feat: HS-132: Passing Card Holder Name in Saved Cards Flow (#50)

There needs to be a refactor following this to add the card holder name inside the body of the saved card box instead of outside with other Dynamic Fields

src/Components/DynamicFields.res

@@ -7,6 +7,7 @@ let make = (
   ~paymentMethodType,
   ~setRequiredFieldsBody,
   ~isSavedCardFlow=false,
+  ~savedCards=[]: array<PaymentType.customerMethods>,
 ) => {
   React.useEffect1(() => {
     setRequiredFieldsBody(_ => Js.Dict.empty())
@@ -44,12 +45,17 @@ let make = (
     Js.Json.null
   }
 
+  let isAllStoredCardsHaveName = React.useMemo1(() => {
+    PaymentType.getIsAllStoredCardsHaveName(savedCards)
+  }, [savedCards])
+
   //<...>//
   let fieldsArr =
     PaymentMethodsRecord.getPaymentMethodFields(
       paymentMethodType,
       requiredFields,
       ~isSavedCardFlow,
+      ~isAllStoredCardsHaveName,
       (),
     )
     ->Utils.removeDuplicate
@@ -388,7 +394,20 @@ let make = (
         | InfoElement
         | None => ""
         }
-        acc->Js.Dict.set(item.required_field, value->Js.Json.string)
+        if (
+          isSavedCardFlow &&
+          item.display_name === "card_holder_name" &&
+          (item.field_type === BillingName || item.field_type === FullName)
+        ) {
+          if !isAllStoredCardsHaveName {
+            acc->Js.Dict.set(
+              "payment_method_data.card_token.card_holder_name",
+              value->Js.Json.string,
+            )
+          }
+        } else {
+          acc->Js.Dict.set(item.required_field, value->Js.Json.string)
+        }
         acc
       }, Js.Dict.empty())
 

src/Components/SavedMethods.res

@@ -73,7 +73,7 @@ let make = (
       }}
       <RenderIf condition={list.payment_methods->Js.Array.length !== 0}>
         <DynamicFields
-          paymentType list paymentMethod="card" paymentMethodType="debit" setRequiredFieldsBody isSavedCardFlow=true
+          paymentType list paymentMethod="card" paymentMethodType="debit" setRequiredFieldsBody isSavedCardFlow=true savedCards=savedMethods
         />
       </RenderIf>
       <RenderIf condition={!showFeilds}>

src/Payments/CardPayment.res

@@ -222,8 +222,7 @@ let make = (
           ->Js.Json.object_
           ->OrcaUtils.flattenObject(true)
           ->OrcaUtils.mergeTwoFlattenedJsonDicts(requiredFieldsBody)
-          ->OrcaUtils.getArrayOfTupleFromDict
-          ->Js.Array2.filter(((key, _)) => key !== "payment_method_data"),
+          ->OrcaUtils.getArrayOfTupleFromDict,
           ~confirmParam=confirm.confirmParams,
           ~handleUserError=false,
           (),

src/Payments/PaymentMethodsRecord.res

@@ -528,14 +528,14 @@ let getRequiredFieldsFromJson = dict => {
 
 let dynamicFieldsEnabledPaymentMethods = ["crypto_currency", "debit", "credit", "blik"]
 
-let getPaymentMethodFields = (paymentMethod, requiredFields, ~isSavedCardFlow=false, ()) => {
+let getPaymentMethodFields = (paymentMethod, requiredFields, ~isSavedCardFlow=false, ~isAllStoredCardsHaveName=false, ()) => {
   let requiredFieldsArr =
     requiredFields
     ->Utils.getDictFromJson
     ->Js.Dict.values
     ->Js.Array2.map(item => {
       let val = item->Utils.getDictFromJson->getRequiredFieldsFromJson
-      if isSavedCardFlow && val.display_name === "card_holder_name" {
+      if isSavedCardFlow && val.display_name === "card_holder_name" && isAllStoredCardsHaveName {
         None
       } else {
         val.field_type

src/Types/PaymentType.res

@@ -856,3 +856,15 @@ let itemToObjMapper = (dict, logger) => {
 }
 
 type loadType = Loading | Loaded(Js.Json.t) | SemiLoaded | LoadError(Js.Json.t)
+
+let getIsAllStoredCardsHaveName = (savedCards: array<customerMethods>) => {
+  savedCards
+  ->Js.Array2.filter(savedCard => {
+    switch savedCard.card.cardHolderName {
+    | None
+    | Some("") => false
+    | _ => true
+    }
+  })
+  ->Belt.Array.length === savedCards->Belt.Array.length
+}