fix: HS-180: Added check on last name for Dynamic Fields (#71)

juspay · Jan 22, 2024 · 4fee41f · 4fee41f
1 parent 8063f4b
commit 4fee41f
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 41 deletions.
diff --git a/src/Components/BillingNamePaymentInput.res b/src/Components/BillingNamePaymentInput.res
@@ -3,7 +3,7 @@ open PaymentType
 open Utils
 
 @react.component
-let make = (~paymentType, ~customFieldName=None) => {
+let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None, ()) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -39,6 +39,17 @@ let make = (~paymentType, ~customFieldName=None) => {
           ...prev,
           errorString: `Please provide your ${fieldName}`,
         })
+      } else {
+        switch optionalRequiredFields {
+        | Some(requiredFields) =>
+          if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, BillingName, billingName) {
+            setBillingName(.prev => {
+              ...prev,
+              errorString: `Please provide your complete ${fieldName}`,
+            })
+          }
+        | None => ()
+        }
       }
     }
   }, [billingName])

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -220,6 +220,7 @@ let make = (
   }
 
   DynamicFieldsUtils.useRequiredFieldsEmptyAndValid(
+    ~requiredFields,
     ~fieldsArr,
     ~countryNames,
     ~bankNames,
@@ -449,11 +450,15 @@ let make = (
                     {switch item {
                     | FullName =>
                       <FullNamePaymentInput
-                        paymentType customFieldName={item->getCustomFieldName}
+                        paymentType
+                        customFieldName={item->getCustomFieldName}
+                        optionalRequiredFields={Some(requiredFields)}
                       />
                     | BillingName =>
                       <BillingNamePaymentInput
-                        paymentType customFieldName={item->getCustomFieldName}
+                        paymentType
+                        customFieldName={item->getCustomFieldName}
+                        optionalRequiredFields={Some(requiredFields)}
                       />
                     | Email => <EmailPaymentInput paymentType />
                     | PhoneNumber => <PhoneNumberPaymentInput />

diff --git a/src/Components/FullNamePaymentInput.res b/src/Components/FullNamePaymentInput.res
@@ -3,7 +3,7 @@ open PaymentType
 open Utils
 
 @react.component
-let make = (~paymentType, ~customFieldName=None) => {
+let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -35,6 +35,17 @@ let make = (~paymentType, ~customFieldName=None) => {
           ...prev,
           errorString: `Please provide your ${fieldName}`,
         })
+      } else {
+        switch optionalRequiredFields {
+        | Some(requiredFields) =>
+          if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, FullName, fullName) {
+            setFullName(.prev => {
+              ...prev,
+              errorString: `Please provide your complete ${fieldName}`,
+            })
+          }
+        | None => ()
+        }
       }
     }
   }, [fullName])

diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
@@ -71,7 +71,29 @@ let addBillingAddressIfUseBillingAddress = fieldsArr => {
   }
 }
 
+let checkIfNameIsValid = (
+  requiredFieldsType: array<PaymentMethodsRecord.required_fields>,
+  paymentMethodFields,
+  field: RecoilAtomTypes.field,
+) => {
+  requiredFieldsType
+  ->Js.Array2.filter(required_field => required_field.field_type === paymentMethodFields)
+  ->Js.Array2.reduce((acc, item) => {
+    let fieldNameArr = field.value->Js.String2.split(" ")
+    let requiredFieldsArr = item.required_field->Js.String2.split(".")
+    let fieldValue = switch requiredFieldsArr
+    ->Belt.Array.get(requiredFieldsArr->Belt.Array.length - 1)
+    ->Belt.Option.getWithDefault("") {
+    | "first_name" => fieldNameArr->Belt.Array.get(0)->Belt.Option.getWithDefault("")
+    | "last_name" => fieldNameArr->Belt.Array.get(1)->Belt.Option.getWithDefault("")
+    | _ => field.value
+    }
+    acc && fieldValue !== ""
+  }, true)
+}
+
 let useRequiredFieldsEmptyAndValid = (
+  ~requiredFields,
   ~fieldsArr: Js.Array2.t<PaymentMethodsRecord.paymentMethodsFields>,
   ~countryNames,
   ~bankNames,
@@ -101,43 +123,40 @@ let useRequiredFieldsEmptyAndValid = (
   let fieldsArrWithBillingAddress = fieldsArr->addBillingAddressIfUseBillingAddress
 
   React.useEffect7(() => {
-    let areRequiredFieldsValid =
-      fieldsArrWithBillingAddress->Js.Array2.reduce((acc, paymentMethodFields) => {
-        acc &&
-        switch paymentMethodFields {
-        | Email => email.isValid
-        | FullName => Some(fullName.value !== "")
-        | Country => Some(country !== "" || countryNames->Belt.Array.length === 0)
-        | AddressCountry(countryArr) => Some(country !== "" || countryArr->Belt.Array.length === 0)
-        | BillingName => Some(billingName.value !== "")
-        | AddressLine1 => Some(line1.value !== "")
-        | AddressLine2 => Some(line2.value !== "")
-        | Bank => Some(selectedBank !== "" || bankNames->Belt.Array.length === 0)
-        | PhoneNumber => Some(phone.value !== "")
-        | StateAndCity => Some(state.value !== "" && city.value !== "")
-        | CountryAndPincode(countryArr) =>
-          Some(
-            (country !== "" || countryArr->Belt.Array.length === 0) &&
-              postalCode.isValid->Belt.Option.getWithDefault(false),
-          )
-        | AddressCity => Some(city.value !== "")
-        | AddressPincode => postalCode.isValid
-        | AddressState => Some(state.value !== "")
-        | BlikCode => Some(blikCode.value !== "")
-        | Currency(currencyArr) => Some(currency !== "" || currencyArr->Belt.Array.length === 0)
-        | CardNumber => isCardValid
-        | CardExpiryMonth
-        | CardExpiryYear
-        | CardExpiryMonthAndYear => isExpiryValid
-        | CardCvc => isCVCValid
-        | CardExpiryAndCvc =>
-          Some(
-            isExpiryValid->Belt.Option.getWithDefault(false) &&
-              isCVCValid->Belt.Option.getWithDefault(false),
-          )
-        | _ => Some(true)
-        }->Belt.Option.getWithDefault(false)
-      }, true)
+    let areRequiredFieldsValid = fieldsArr->Js.Array2.reduce((acc, paymentMethodFields) => {
+      acc &&
+      switch paymentMethodFields {
+      | Email => email.isValid->Belt.Option.getWithDefault(false)
+      | FullName => checkIfNameIsValid(requiredFields, paymentMethodFields, fullName)
+      | Country => country !== "" || countryNames->Belt.Array.length === 0
+      | AddressCountry(countryArr) => country !== "" || countryArr->Belt.Array.length === 0
+      | BillingName => checkIfNameIsValid(requiredFields, paymentMethodFields, billingName)
+      | AddressLine1 => line1.value !== ""
+      | AddressLine2 => line2.value !== ""
+      | Bank => selectedBank !== "" || bankNames->Belt.Array.length === 0
+      | PhoneNumber => phone.value !== ""
+      | StateAndCity => state.value !== "" && city.value !== ""
+      | CountryAndPincode(countryArr) =>
+        (country !== "" || countryArr->Belt.Array.length === 0) &&
+          postalCode.isValid->Belt.Option.getWithDefault(false)
+
+      | AddressCity => city.value !== ""
+      | AddressPincode => postalCode.isValid->Belt.Option.getWithDefault(false)
+      | AddressState => state.value !== ""
+      | BlikCode => blikCode.value !== ""
+      | Currency(currencyArr) => currency !== "" || currencyArr->Belt.Array.length === 0
+      | CardNumber => isCardValid->Belt.Option.getWithDefault(false)
+      | CardExpiryMonth
+      | CardExpiryYear
+      | CardExpiryMonthAndYear =>
+        isExpiryValid->Belt.Option.getWithDefault(false)
+      | CardCvc => isCVCValid->Belt.Option.getWithDefault(false)
+      | CardExpiryAndCvc =>
+        isExpiryValid->Belt.Option.getWithDefault(false) &&
+          isCVCValid->Belt.Option.getWithDefault(false)
+      | _ => true
+      }
+    }, true)
     setAreRequiredFieldsValid(._ => areRequiredFieldsValid)
 
     let areRequiredFieldsEmpty =