fix: country selection, card holder name util, dropdown options memoization

Author: Shivam25092001

src/Components/DynamicFields.res

@@ -78,7 +78,7 @@ let make = (
     )
   }, (paymentMethod, paymentMethodType, country, paymentMethodListValue))
 
-  let (_requiredFields, missingRequiredFields, initialValues) = React.useMemo(() => {
+  let (_requiredFields, missingRequiredFields, superpositionInitialValues) = React.useMemo(() => {
     getSuperpositionFinalFields(
       eligibleConnectors,
       superpositionBaseContext,
@@ -90,6 +90,7 @@ let make = (
     superpositionBaseContext,
     requiredFieldsFromPMLFlat,
   ))
+  let initialValues = React.useMemo(() => superpositionInitialValues, [requiredFieldsFromPMLFlat])
 
   let missingRequiredFieldsFiltered = React.useMemo(() => {
     let afterBillingFilter = removeBillingDetailsIfUseBillingAddress(
@@ -126,8 +127,6 @@ let make = (
     })
   }, (missingRequiredFields, billingAddress.isUseBillingAddress))
 
-  let billingPrefix = "payment_method_data.billing."
-
   let dynamicFieldsOutsideBilling = React.useMemo(() => {
     missingRequiredFieldsFiltered->Array.filter(field =>
       !(field.confirmRequestWritePath->String.startsWith(billingPrefix)) ||
@@ -190,7 +189,7 @@ let make = (
 
           ReactFinalForm.useFormStateHandler(
             ~onFormChange=values => {
-              // Flatten the nested form values so keys align correctly during merge using `mergeAndFlattenToTuples`.
+              // RFF stores values as nested objects; flatten to dot-notation keys so they align with the confirm-payload merge.
               let flatValues = values->JSON.Encode.object->Utils.flattenObject(false)
               setRequiredFieldsBody(_ => flatValues)
             },

src/Components/DynamicFields/CardHolderNameField.res

@@ -1,12 +1,5 @@
 open SuperpositionTypes
 
-// "John Doe" -> ("John", "Doe")   "John" -> ("John", "")
-let splitName = (value: string): (string, string) =>
-  switch value->String.indexOf(" ") {
-  | -1 => (value, "")
-  | i => (value->String.substring(~start=0, ~end=i), value->String.substringToEnd(~start=i + 1))
-  }
-
 module FullNameFieldInput = {
   @react.component
   let make = (~firstNameFieldConfig: fieldConfig, ~lastNameFieldConfig: fieldConfig) => {
@@ -46,7 +39,7 @@ module FullNameFieldInput = {
     let handleChange = event => {
       let value: string = ReactEvent.Form.target(event)["value"]
       setName(_ => value)
-      let (firstName, lastName) = splitName(value)
+      let (firstName, lastName) = Utils.splitFullName(value)
       firstProps.input.onChange(firstName)
       lastProps.input.onChange(lastName)
     }

src/Components/DynamicFields/CountryDropdownField.res

@@ -10,10 +10,11 @@ let make = (~fieldConfig: fieldConfig, ~options: array<DropdownField.optionType>
   let firstCountryName = options->Array.get(0)->Option.map(opt => opt.value)->Option.getOr("")
   let defaultCountryName = countryName !== "" ? countryName : firstCountryName
   let defaultIso = Utils.getCountryCode(defaultCountryName).isoAlpha2
+  let defaultIsoRef = React.useRef(defaultIso)
 
   let field = ReactFinalForm.useField(
     fieldConfig.confirmRequestWritePath,
-    ~config={validate, defaultValue: Some(defaultIso)},
+    ~config={validate, defaultValue: Some(defaultIsoRef.current)},
   )
 
   let storedIso = field.input.value->Option.getOr("")

src/Components/DynamicFields/PhoneCountryCodeDropdownField.res

@@ -9,15 +9,14 @@ let make = (~fieldConfig: fieldConfig) => {
   let {label} = DynamicFieldsUtils.resolveFieldTexts(~field=fieldConfig, ~localeObject=localeString)
   let validate = DynamicFieldsUtils.resolveValidator(~field=fieldConfig, ~localeObject=localeString)
 
-  let countryAndCodeList =
+  let countryAndCodeList = React.useMemo0(() =>
     phoneNumberJson
-    ->JSON.Decode.object
-    ->Option.getOr(Dict.make())
+    ->getDictFromJson
     ->getArray("countries")
+  )
 
-  let phoneNumberCodeOptions: array<DropdownField.optionType> = countryAndCodeList->Array.reduce(
-    [],
-    (acc, countryObj) => {
+  let phoneNumberCodeOptions: array<DropdownField.optionType> = React.useMemo0(() =>
+    countryAndCodeList->Array.reduce([], (acc, countryObj) => {
       let countryDict = countryObj->getDictFromJson
       let flag = countryDict->getString("country_flag", "")
       let code = countryDict->getString("phone_number_code", "")
@@ -29,7 +28,7 @@ let make = (~fieldConfig: fieldConfig) => {
       }
       acc->Array.push(opt)
       acc
-    },
+    })
   )
 
   let defaultCountry = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCountry)

src/Components/DynamicFields/StateDropdownField.res

@@ -32,7 +32,7 @@ let make = (~fieldConfig: fieldConfig) => {
       stateField.input.onChange(effectiveCode)
     }
     None
-  }, [effectiveCode])
+  }, (hasStates, storedCode, effectiveCode))
 
   <RenderIf condition={hasStates}>
     <DropdownField

src/Utilities/DynamicFieldsUtils.res

@@ -3,6 +3,8 @@ type fieldTexts = {
   placeholder: string,
 }
 
+let billingPrefix = "payment_method_data.billing."
+
 let lookupLocaleKey = (key: string, locale: LocaleStringTypes.localeStrings): option<string> =>
   switch key {
   | "cardNumberLabel" => Some(locale.cardNumberLabel)
@@ -259,7 +261,7 @@ let resolveValidator = (
   ~field: SuperpositionTypes.fieldConfig,
   ~localeObject: LocaleStringTypes.localeStrings,
 ) => {
-  let requiredRule = field.isRequired ? [Validation.Required] : []
+  let requiredRule = field.isRequired ? [Validation.Required(None)] : []
 
   let semanticRule = switch field.validationRuleType {
   | Some("phone") => [Validation.Phone]
@@ -281,7 +283,7 @@ let resolveValidator = (
 
   let maxLengthRule = [Validation.MaxLength(field.maxInputLength->Option.getOr(255))]
 
-  let rules = Array.concat(Array.concat(requiredRule, semanticRule), maxLengthRule)
+  let rules = [...requiredRule, ...semanticRule, ...maxLengthRule]
 
   Validation.createFieldValidator(
     rules,
@@ -311,7 +313,7 @@ let removeBillingDetailsIfUseBillingAddress = (
 ) => {
   if billingAddress.isUseBillingAddress {
     missingRequiredFields->Array.filter(requiredField => {
-      !(requiredField.confirmRequestWritePath->String.startsWith("payment_method_data.billing."))
+      !(requiredField.confirmRequestWritePath->String.startsWith(billingPrefix))
     })
   } else {
     missingRequiredFields

src/Utilities/Utils.res

@@ -1761,17 +1761,19 @@ let checkIs18OrAbove = dateOfBirth => {
   dateOfBirth <= compareDate
 }
 
-let getFirstAndLastNameFromFullName = fullName => {
+let splitFullName = fullName => {
   let nameStrings = fullName->String.split(" ")
-  let firstName =
-    nameStrings
-    ->Array.get(0)
-    ->Option.flatMap(x => Some(x->JSON.Encode.string))
-    ->Option.getOr(JSON.Encode.null)
-  let lastNameStr = nameStrings->Array.sliceToEnd(~start=1)->Array.join(" ")->String.trim
+  let firstName = nameStrings->Array.get(0)->Option.getOr("")
+  let lastName = nameStrings->Array.sliceToEnd(~start=1)->Array.join(" ")->String.trim
+  (firstName, lastName)
+}
+
+let getFirstAndLastNameFromFullName = fullName => {
+  let (firstNameStr, lastNameStr) = fullName->splitFullName
+  let firstNameJson = firstNameStr->JSON.Encode.string
   let lastNameJson = lastNameStr === "" ? JSON.Encode.null : lastNameStr->JSON.Encode.string
 
-  (firstName, lastNameJson)
+  (firstNameJson, lastNameJson)
 }
 
 let isKeyPresentInDict = (dict, key) => dict->Dict.get(key)->Option.isSome