fix: validation rules for card holder's name and nickname (#143)

src/components/common/DynamicFields.res

@@ -110,11 +110,21 @@ module RenderField = {
             let (firstNameVal, firstNameErrorMessage) =
               firstNameVal === ""
                 ? (JSON.Encode.null, Some(localeObject.cardHolderNameRequiredText))
-                : (JSON.Encode.string(firstNameVal), None)
+                : (
+                    JSON.Encode.string(firstNameVal),
+                    firstNameVal->ValidationFunctions.containsDigit
+                      ? Some(localeObject.invalidDigitsCardHolderNameError)
+                      : None,
+                  )
             let (lastNameVal, lastNameErrorMessage) =
               lastNameVal === ""
                 ? (JSON.Encode.null, Some(localeObject.lastNameRequiredText))
-                : (JSON.Encode.string(lastNameVal), None)
+                : (
+                    JSON.Encode.string(lastNameVal),
+                    lastNameVal->ValidationFunctions.containsDigit
+                      ? Some(localeObject.invalidDigitsCardHolderNameError)
+                      : None,
+                  )
 
             setErrorMesage(_ =>
               switch firstNameErrorMessage {

src/components/common/ValidationFunctions.res

@@ -27,3 +27,17 @@ let isValidZip = (~zipCode, ~country) => {
   let isZipCodeValid = RegExp.test(postalCode.regex->Js.Re.fromString, zipCode)
   zipCode->String.length > 0 && isZipCodeValid
 }
+
+let containsDigit = text => {
+  switch text->String.match(%re("/\d/")) {
+  | Some(_) => true
+  | None => false
+  }
+}
+
+let containsMoreThanTwoDigits = text => {
+  switch text->String.match(%re("/\d/g")) {
+  | Some(matches) => matches->Array.length > 2
+  | None => false
+  }
+}

src/pages/payment/Card.res

@@ -32,6 +32,7 @@ let make = (
   // Validity Hooks
   let (isAllCardValuesValid, setIsAllCardValuesValid) = React.useState(_ => false)
   let (isAllDynamicFieldValid, setIsAllDynamicFieldValid) = React.useState(_ => true)
+  let (isNicknameValid, setIsNicknameValid) = React.useState(_ => true)
   let requiredFields = cardVal.required_field->Array.filter(val => {
     switch val.field_type {
     | RequiredFieldsTypes.UnKnownField(_) => false
@@ -45,7 +46,7 @@ let make = (
   )> => [])
   let (error, setError) = React.useState(_ => None)
 
-  let isConfirmButtonValid = isAllCardValuesValid && isAllDynamicFieldValid
+  let isConfirmButtonValid = isAllCardValuesValid && isAllDynamicFieldValid && (isNicknameSelected ? isNicknameValid : true)
 
   let initialiseNetcetera = NetceteraThreeDsHooks.useInitNetcetera()
   let (isInitialised, setIsInitialised) = React.useState(_ => false)
@@ -185,9 +186,9 @@ let make = (
         allApiData.additionalPMLData.mandateType,
       ) {
       | (false, _, true, NEW_MANDATE | NORMAL) =>
-        <NickNameElement nickname setNickname isNicknameSelected />
+        <NickNameElement nickname setNickname isNicknameSelected setIsNicknameValid />
       | (false, _, false, NEW_MANDATE) | (false, _, _, SETUP_MANDATE) =>
-        <NickNameElement nickname setNickname isNicknameSelected=true />
+        <NickNameElement nickname setNickname isNicknameSelected=true setIsNicknameValid />
       | _ => React.null
       }}
     </View>

src/pages/payment/NickNameElement.res

@@ -1,7 +1,29 @@
 @react.component
-let make = (~nickname, ~setNickname, ~isNicknameSelected) => {
-  let {component, borderWidth, borderRadius} = ThemebasedStyle.useThemeBasedStyle()
+let make = (~nickname, ~setNickname, ~isNicknameSelected, ~setIsNicknameValid) => {
+  let {component, borderWidth, borderRadius, dangerColor} = ThemebasedStyle.useThemeBasedStyle()
   let localeObject = GetLocale.useGetLocalObj()
+  let (isFocus, setisFocus) = React.useState(_ => false)
+  let (errorMessage, setErrorMesage) = React.useState(_ => None)
+
+  let onChange = text => {
+    setNickname(_ => Some(text))
+
+    if text->String.length > 12 {
+      setErrorMesage(_ => Some(localeObject.nickNameLengthExceedError))
+      setIsNicknameValid(_ => false)
+    } else {
+      switch text->ValidationFunctions.containsMoreThanTwoDigits {
+      | true => {
+          setErrorMesage(_ => Some(localeObject.invalidDigitsNickNameError))
+          setIsNicknameValid(_ => false)
+        }
+      | false => {
+          setErrorMesage(_ => None)
+          setIsNicknameValid(_ => true)
+        }
+      }
+    }
+  }
 
   isNicknameSelected
     ? <>
@@ -10,13 +32,13 @@ let make = (~nickname, ~setNickname, ~isNicknameSelected) => {
         // <Space height=5. />
         <CustomInput
           state={nickname->Option.getOr("")}
-          setState={str => setNickname(_ => Some(str))}
+          setState={str => onChange(str)}
           placeholder={`${localeObject.cardNickname}${" (Optional)"}`}
           keyboardType=#default
           isValid=true
-          onFocus={_ => ()}
-          onBlur={_ => ()}
-          textColor=component.color
+          onFocus={_ => setisFocus(_ => true)}
+          onBlur={_ => setisFocus(_ => false)}
+          textColor={isFocus || errorMessage->Option.isNone ? component.color : dangerColor}
           borderBottomLeftRadius=borderRadius
           borderBottomRightRadius=borderRadius
           borderTopLeftRadius=borderRadius
@@ -27,6 +49,10 @@ let make = (~nickname, ~setNickname, ~isNicknameSelected) => {
           borderRightWidth=borderWidth
           animateLabel=localeObject.cardNickname
         />
+        {switch errorMessage {
+        | Some(text) => <ErrorText text=Some(text) />
+        | None => React.null
+        }}
         <Space height=5. />
       </>
     : React.null