refactor: paymentmethod list prop drilldown refactor

.github/PULL_REQUEST_TEMPLATE.md

@@ -14,17 +14,6 @@
 
 <!-- Describe your changes in detail -->
 
-## Motivation and Context
-
-<!--
-Why is this change required? What problem does it solve?
-If it fixes an open issue, please link to the issue here.
-
-If you don't have an issue, we'd recommend starting with one first so the PR
-can focus on the implementation (unless its an obvious bug or documentation fix
-that will have little conversation).
--->
-
 ## How did you test it?
 
 <!--

src/Components/AccordionContainer.res

@@ -2,13 +2,13 @@ open RecoilAtoms
 module Loader = {
   @react.component
   let make = (~cardShimmerCount) => {
-    let list = Recoil.useRecoilValueFromAtom(list)
+    let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
     let layoutClass = CardUtils.getLayoutClass(layout)
     open PaymentType
     open PaymentElementShimmer
-    switch list {
+    switch paymentMethodList {
     | SemiLoaded =>
       Array.make(~length=cardShimmerCount - 1, "")
       ->Array.mapWithIndex((_, i) => {
@@ -61,7 +61,7 @@ module Loader = {
 @react.component
 let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
-  let list = Recoil.useRecoilValueFromAtom(list)
+  let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (showMore, setShowMore) = React.useState(_ => false)
@@ -81,7 +81,7 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
       !showMore &&
       !layoutClass.spacedAccordionItems &&
       index == 0 &&
-      list == SemiLoaded &&
+      paymentMethodList == SemiLoaded &&
       cardOptionDetails->Array.length == 1
     ) {
       `${themeObj.borderRadius} ${themeObj.borderRadius} 0px 0px`

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 = DynamicFieldsUtils.usePaymentMethodTypeFromList(
-    ~list,
+    ~paymentMethodListValue,
     ~paymentMethod,
     ~paymentMethodType,
   )
@@ -693,7 +694,7 @@ let make = (
                 | SpecialField(element) => element
                 | InfoElement =>
                   <>
-                    <Surcharge list paymentMethod paymentMethodType />
+                    <Surcharge paymentMethod paymentMethodType />
                     {if fieldsArr->Array.length > 1 {
                       bottomElement
                     } else {
@@ -718,7 +719,7 @@ let make = (
       </RenderIf>
       <RenderIf condition={isOnlyInfoElementPresent}>
         {<>
-          <Surcharge list paymentMethod paymentMethodType />
+          <Surcharge paymentMethod paymentMethodType />
           {if fieldsArr->Array.length > 1 {
             bottomElement
           } else {
@@ -727,7 +728,7 @@ let make = (
         </>}
       </RenderIf>
       <RenderIf condition={!isInfoElementPresent}>
-        <Surcharge list paymentMethod paymentMethodType />
+        <Surcharge paymentMethod paymentMethodType />
       </RenderIf>
     </>}
   </RenderIf>

src/Components/SavedCardItem.res

@@ -8,7 +8,6 @@ let make = (
   ~savedCardlength,
   ~cvcProps,
   ~paymentType,
-  ~list,
   ~setRequiredFieldsBody,
 ) => {
   let {themeObj, config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
@@ -156,15 +155,13 @@ let make = (
               </RenderIf>
               <DynamicFields
                 paymentType
-                list
                 paymentMethod=paymentItem.paymentMethod
                 paymentMethodType
                 setRequiredFieldsBody
                 isSavedCardFlow=true
                 savedMethod=paymentItem
               />
               <Surcharge
-                list
                 paymentMethod=paymentItem.paymentMethod
                 paymentMethodType
                 cardBrand={cardBrand->CardUtils.getCardType}

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(

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 {

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 {

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,
+  ))
+}