refactor: paymentmethod list prop drilldown refactor (#324)

juspay · May 6, 2024 · 8edf196 · 8edf196
1 parent 5375a48
commit 8edf196
Show file tree

Hide file tree

Showing 57 changed files with 274 additions and 247 deletions.
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -2,7 +2,6 @@ open RecoilAtoms
 @react.component
 let make = (
   ~paymentType,
-  ~list,
   ~paymentMethod,
   ~paymentMethodType,
   ~setRequiredFieldsBody,
@@ -14,6 +13,8 @@ let make = (
   ~isBancontact=false,
 ) => {
   open Utils
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+
   React.useEffect(() => {
     setRequiredFieldsBody(_ => Dict.make())
     None
@@ -23,7 +24,7 @@ let make = (
 
   //<...>//
   let paymentMethodTypes = PaymentUtils.usePaymentMethodTypeFromList(
-    ~list,
+    ~paymentMethodListValue,
     ~paymentMethod,
     ~paymentMethodType,
   )
@@ -59,7 +60,13 @@ let make = (
       ~isAllStoredCardsHaveName,
       (),
     )
-    ->DynamicFieldsUtils.updateDynamicFields(billingAddress, ~list, ~paymentMethod, ~isSavedCardFlow, ())
+    ->DynamicFieldsUtils.updateDynamicFields(
+      billingAddress,
+      ~paymentMethodListValue,
+      ~paymentMethod,
+      ~isSavedCardFlow,
+      (),
+    )
     ->Belt.SortArray.stableSortBy(PaymentMethodsRecord.sortPaymentMethodFields)
     //<...>//
   }, (requiredFields, isAllStoredCardsHaveName, isSavedCardFlow))
@@ -276,7 +283,7 @@ let make = (
     ~isSavedCardFlow,
     ~isAllStoredCardsHaveName,
     ~setRequiredFieldsBody,
-    ~list,
+    ~paymentMethodListValue,
   )
 
   let submitCallback = DynamicFieldsUtils.useSubmitCallback(
@@ -733,7 +740,7 @@ let make = (
                 | SpecialField(element) => element
                 | InfoElement =>
                   <>
-                    <Surcharge list paymentMethod paymentMethodType />
+                    <Surcharge paymentMethod paymentMethodType />
                     {if fieldsArr->Array.length > 1 {
                       bottomElement
                     } else {
@@ -758,7 +765,7 @@ let make = (
       </RenderIf>
       <RenderIf condition={isOnlyInfoElementPresent}>
         {<>
-          <Surcharge list paymentMethod paymentMethodType />
+          <Surcharge paymentMethod paymentMethodType />
           {if fieldsArr->Array.length > 1 {
             bottomElement
           } else {
@@ -767,7 +774,7 @@ let make = (
         </>}
       </RenderIf>
       <RenderIf condition={!isInfoElementPresent}>
-        <Surcharge list paymentMethod paymentMethodType />
+        <Surcharge paymentMethod paymentMethodType />
       </RenderIf>
     </>}
   </RenderIf>

diff --git a/src/Components/SavedCardItem.res b/src/Components/SavedCardItem.res
@@ -8,7 +8,6 @@ let make = (
   ~savedCardlength,
   ~cvcProps,
   ~paymentType,
-  ~list,
   ~setRequiredFieldsBody,
 ) => {
   let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
@@ -173,15 +172,13 @@ let make = (
               <RenderIf condition={isActive}>
                 <DynamicFields
                   paymentType
-                  list
                   paymentMethod=paymentItem.paymentMethod
                   paymentMethodType
                   setRequiredFieldsBody
                   isSavedCardFlow=true
                   savedMethod=paymentItem
                 />
                 <Surcharge
-                  list
                   paymentMethod=paymentItem.paymentMethod
                   paymentMethodType
                   cardBrand={cardBrand->CardUtils.getCardType}

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -6,7 +6,6 @@ let make = (
   ~loadSavedCards: PaymentType.savedCardsLoadState,
   ~cvcProps,
   ~paymentType,
-  ~list,
 ) => {
   open CardUtils
   open Utils
@@ -27,6 +26,7 @@ let make = (
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (token, _) = paymentToken
   let savedCardlength = savedMethods->Array.length
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let getWalletBrandIcon = (obj: PaymentType.customerMethods) => {
     switch obj.paymentMethodType {
@@ -40,7 +40,6 @@ let make = (
   let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
     ~displaySavedPaymentMethodsCheckbox,
     ~isSaveCardsChecked,
-    ~list,
     ~isGuestCustomer,
   )
 
@@ -69,7 +68,6 @@ let make = (
         savedCardlength
         cvcProps
         paymentType
-        list
         setRequiredFieldsBody
       />
     })
@@ -177,8 +175,10 @@ let make = (
   useSubmitPaymentData(submitCallback)
 
   let conditionsForShowingSaveCardCheckbox = React.useMemo(() => {
-    !isGuestCustomer && list.payment_type === NEW_MANDATE && displaySavedPaymentMethodsCheckbox
-  }, (isGuestCustomer, list.payment_type, displaySavedPaymentMethodsCheckbox))
+    !isGuestCustomer &&
+    paymentMethodListValue.payment_type === NEW_MANDATE &&
+    displaySavedPaymentMethodsCheckbox
+  }, (isGuestCustomer, paymentMethodListValue.payment_type, displaySavedPaymentMethodsCheckbox))
 
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
     {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
@@ -208,7 +208,7 @@ let make = (
         <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
       </div>
     </RenderIf>
-    <RenderIf condition={list.payment_type === SETUP_MANDATE}>
+    <RenderIf condition={paymentMethodListValue.payment_type === SETUP_MANDATE}>
       <div
         className="opacity-50 text-xs mb-2 text-left"
         style={ReactDOMStyle.make(

diff --git a/src/Components/Surcharge.res b/src/Components/Surcharge.res
@@ -1,14 +1,14 @@
 @react.component
 let make = (
-  ~list,
   ~paymentMethod,
   ~paymentMethodType,
   ~cardBrand=CardUtils.NOTFOUND,
   ~isForWallets=false,
 ) => {
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
   let getPaymentMethodTypes = paymentMethodType => {
     PaymentMethodsRecord.getPaymentMethodTypeFromList(
-      ~list,
+      ~paymentMethodListValue,
       ~paymentMethod,
       ~paymentMethodType=PaymentUtils.getPaymentMethodName(
         ~paymentMethodType=paymentMethod,
@@ -19,15 +19,18 @@ let make = (
 
   let paymentMethodTypes = paymentMethodType->getPaymentMethodTypes
 
-  let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(~list)
+  let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(
+    ~paymentMethodListValue,
+  )
   let getSurchargeUtilsMessage = SurchargeUtils.useMessageGetter()
 
   let getSurchargeMessage = () => {
     if isForWallets {
       getOneClickWalletsMessage()
     } else {
       switch paymentMethodTypes.surcharge_details {
-      | Some(surchargeDetails) => getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list)
+      | Some(surchargeDetails) =>
+        getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~paymentMethodListValue)
       | None =>
         if paymentMethod === "card" {
           let creditPaymentMethodTypes = getPaymentMethodTypes("credit")
@@ -50,18 +53,18 @@ let make = (
               getSurchargeUtilsMessage(
                 ~paymentMethod,
                 ~surchargeDetails={creditSurchargeDetails},
-                ~list,
+                ~paymentMethodListValue,
               )
             } else {
               getSurchargeUtilsMessage(
                 ~paymentMethod,
                 ~surchargeDetails={debitSurchargeDetails},
-                ~list,
+                ~paymentMethodListValue,
               )
             }
           | (None, Some(surchargeDetails))
           | (Some(surchargeDetails), None) =>
-            getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list)
+            getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~paymentMethodListValue)
           | (None, None) => None
           }
         } else {

diff --git a/src/Components/SurchargeUtils.res b/src/Components/SurchargeUtils.res
@@ -13,7 +13,7 @@ type walletSurchargeDetails = {
   surchargeDetails: PaymentMethodsRecord.surchargeDetails,
 }
 
-let useSurchargeDetailsForOneClickWallets = (~list) => {
+let useSurchargeDetailsForOneClickWallets = (~paymentMethodListValue) => {
   let areOneClickWalletsRendered = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.areOneClickWalletsRendered,
   )
@@ -29,7 +29,7 @@ let useSurchargeDetailsForOneClickWallets = (~list) => {
       if isWalletBtnRendered {
         let paymentMethodType =
           PaymentMethodsRecord.getPaymentMethodTypeFromList(
-            ~list,
+            ~paymentMethodListValue,
             ~paymentMethod="wallet",
             ~paymentMethodType=wallet.paymentMethodType,
           )->Option.getOr(PaymentMethodsRecord.defaultPaymentMethodType)
@@ -47,7 +47,7 @@ let useSurchargeDetailsForOneClickWallets = (~list) => {
         acc
       }
     })
-  }, (areOneClickWalletsRendered, list))
+  }, (areOneClickWalletsRendered, paymentMethodListValue))
 }
 
 let useMessageGetter = () => {
@@ -56,14 +56,14 @@ let useMessageGetter = () => {
   let getMessage = (
     ~surchargeDetails: PaymentMethodsRecord.surchargeDetails,
     ~paymentMethod,
-    ~list: PaymentMethodsRecord.list,
+    ~paymentMethodListValue: PaymentMethodsRecord.paymentMethodList,
   ) => {
     let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Float.toString
 
     let localeStrForSurcharge = if paymentMethod === "card" {
-      localeString.surchargeMsgAmountForCard(list.currency, surchargeValue)
+      localeString.surchargeMsgAmountForCard(paymentMethodListValue.currency, surchargeValue)
     } else {
-      localeString.surchargeMsgAmount(list.currency, surchargeValue)
+      localeString.surchargeMsgAmount(paymentMethodListValue.currency, surchargeValue)
     }
 
     Some(localeStrForSurcharge)
@@ -72,18 +72,18 @@ let useMessageGetter = () => {
   getMessage
 }
 
-let useOneClickWalletsMessageGetter = (~list) => {
+let useOneClickWalletsMessageGetter = (~paymentMethodListValue) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
 
-  let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~list)
+  let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~paymentMethodListValue)
 
   let getOneClickWalletsMessage = () => {
     if oneClickWalletsArr->Array.length !== 0 {
       let msg = oneClickWalletsArr->Array.reduceWithIndex(React.null, (acc, wallet, index) => {
         let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Float.toString
         let myMsg =
           <>
-            <strong> {React.string(`${list.currency} ${amount}`)} </strong>
+            <strong> {React.string(`${paymentMethodListValue.currency} ${amount}`)} </strong>
             {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)}
           </>
         let msgToConcat = if index === 0 {

diff --git a/src/Hooks/UtilityHooks.res b/src/Hooks/UtilityHooks.res
@@ -25,12 +25,20 @@ let useHandlePostMessages = (~complete, ~empty, ~paymentType, ~savedMethod=false
 let useIsCustomerAcceptanceRequired = (
   ~displaySavedPaymentMethodsCheckbox,
   ~isSaveCardsChecked,
-  ~list: PaymentMethodsRecord.list,
   ~isGuestCustomer,
-) => React.useMemo(() => {
+) => {
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+
+  React.useMemo(() => {
     if displaySavedPaymentMethodsCheckbox {
-      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
+      isSaveCardsChecked || paymentMethodListValue.payment_type === SETUP_MANDATE
     } else {
-      !(isGuestCustomer || list.payment_type === NORMAL)
+      !(isGuestCustomer || paymentMethodListValue.payment_type === NORMAL)
     }
-  }, (isSaveCardsChecked, list.payment_type, isGuestCustomer, displaySavedPaymentMethodsCheckbox))
+  }, (
+    isSaveCardsChecked,
+    paymentMethodListValue.payment_type,
+    isGuestCustomer,
+    displaySavedPaymentMethodsCheckbox,
+  ))
+}