feat: unified view for saved and more payment methods screen

src/Components/SavedMethods.res

@@ -1,3 +1,66 @@
+module SavedCardsElement = {
+  @react.component
+  let make = (
+    ~cardsArr: array<PaymentType.customerMethods>,
+    ~setPaymentToken,
+    ~paymentTokenVal,
+    ~savedCardlength,
+    ~cvcProps,
+    ~setRequiredFieldsBody,
+  ) => {
+    open CardUtils
+
+    cardsArr
+    ->Array.mapWithIndex((obj, i) =>
+      <SavedCardItem
+        key={i->Int.toString}
+        setPaymentToken
+        isActive={paymentTokenVal == obj.paymentToken}
+        paymentItem=obj
+        brandIcon={obj->getPaymentMethodBrand}
+        index=i
+        savedCardlength
+        cvcProps
+        setRequiredFieldsBody
+      />
+    )
+    ->React.array
+  }
+}
+
+module ClickToPayElement = {
+  @react.component
+  let make = (
+    ~savedMethods,
+    ~isClickToPayAuthenticateError,
+    ~setIsClickToPayAuthenticateError,
+    ~setPaymentToken,
+    ~paymentTokenVal,
+    ~cvcProps,
+    ~getVisaCards,
+    ~setIsClickToPayRememberMe,
+    ~closeComponentIfSavedMethodsAreEmpty,
+  ) => {
+    let clickToPayConfig = Recoil.useRecoilValueFromAtom(RecoilAtoms.clickToPayConfig)
+    let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+
+    <RenderIf condition={clickToPayConfig.isReady == Some(true)}>
+      <ClickToPayAuthenticate
+        loggerState
+        savedMethods
+        isClickToPayAuthenticateError
+        setIsClickToPayAuthenticateError
+        setPaymentToken
+        paymentTokenVal
+        cvcProps
+        getVisaCards
+        setIsClickToPayRememberMe
+        closeComponentIfSavedMethodsAreEmpty
+      />
+    </RenderIf>
+  }
+}
+
 @react.component
 let make = (
   ~paymentToken: RecoilAtomTypes.paymentToken,
@@ -37,9 +100,12 @@ let make = (
     loggerState.setLogError(~value=message, ~eventName=INVALID_FORMAT)
   }
   let (isSaveCardsChecked, setIsSaveCardsChecked) = React.useState(_ => false)
-  let {displaySavedPaymentMethodsCheckbox, readOnly} = Recoil.useRecoilValueFromAtom(
+  let (showMore, setShowMore) = React.useState(_ => true)
+  let {displaySavedPaymentMethodsCheckbox, readOnly, layout} = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.optionAtom,
   )
+  let layoutClass = CardUtils.getLayoutClass(layout)
+  let displayMergedSavedMethods = layoutClass.savedMethodsLayout.displayMergedSavedMethods
   let isGuestCustomer = useIsGuestCustomer()
 
   let {iframeId, clientSecret} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
@@ -66,38 +132,72 @@ let make = (
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
   let {paymentToken: paymentTokenVal, customerId} = paymentToken
 
-  let bottomElement = {
+  let (cardOptionDetails, dropDownOptionsDetails) = React.useMemo(() => {
+    (
+      savedMethods->Array.slice(~start=0, ~end=layoutClass.savedMethodsLayout.maxSavedItems),
+      savedMethods->Array.sliceToEnd(~start=layoutClass.savedMethodsLayout.maxSavedItems),
+    )
+  }, [savedMethods])
+
+  let mergedViewBottomElement = {
     <div
       className="PickerItemContainer" tabIndex={0} role="region" ariaLabel="Saved payment methods">
-      {savedMethods
-      ->Array.mapWithIndex((obj, i) =>
-        <SavedCardItem
-          key={i->Int.toString}
+      <SavedCardsElement
+        cardsArr=cardOptionDetails
+        setPaymentToken
+        paymentTokenVal
+        savedCardlength
+        cvcProps
+        setRequiredFieldsBody
+      />
+      <RenderIf condition={!showMore}>
+        <SavedCardsElement
+          cardsArr=dropDownOptionsDetails
           setPaymentToken
-          isActive={paymentTokenVal == obj.paymentToken}
-          paymentItem=obj
-          brandIcon={obj->getPaymentMethodBrand}
-          index=i
+          paymentTokenVal
           savedCardlength
           cvcProps
           setRequiredFieldsBody
         />
-      )
-      ->React.array}
-      <RenderIf condition={clickToPayConfig.isReady == Some(true)}>
-        <ClickToPayAuthenticate
-          loggerState
-          savedMethods
-          isClickToPayAuthenticateError
-          setIsClickToPayAuthenticateError
+      </RenderIf>
+      <ClickToPayElement
+        savedMethods
+        isClickToPayAuthenticateError
+        setIsClickToPayAuthenticateError
+        setPaymentToken
+        paymentTokenVal
+        cvcProps
+        getVisaCards
+        setIsClickToPayRememberMe
+        closeComponentIfSavedMethodsAreEmpty
+      />
+    </div>
+  }
+
+  let bottomElement = {
+    <div
+      className="PickerItemContainer" tabIndex={0} role="region" ariaLabel="Saved payment methods">
+      <RenderIf condition={!displayMergedSavedMethods}>
+        <SavedCardsElement
+          cardsArr=savedMethods
           setPaymentToken
           paymentTokenVal
+          savedCardlength
           cvcProps
-          getVisaCards
-          setIsClickToPayRememberMe
-          closeComponentIfSavedMethodsAreEmpty
+          setRequiredFieldsBody
         />
       </RenderIf>
+      <ClickToPayElement
+        savedMethods
+        isClickToPayAuthenticateError
+        setIsClickToPayAuthenticateError
+        setPaymentToken
+        paymentTokenVal
+        cvcProps
+        getVisaCards
+        setIsClickToPayRememberMe
+        closeComponentIfSavedMethodsAreEmpty
+      />
     </div>
   }
 
@@ -336,15 +436,23 @@ let make = (
   let enableSavedPaymentShimmer = React.useMemo(() => {
     savedCardlength === 0 &&
     !showPaymentMethodsScreen &&
-    (loadSavedCards === PaymentType.LoadingSavedCards || clickToPayConfig.isReady->Option.isNone)
-  }, (savedCardlength, loadSavedCards, showPaymentMethodsScreen, clickToPayConfig.isReady))
+    (loadSavedCards === PaymentType.LoadingSavedCards || clickToPayConfig.isReady->Option.isNone) &&
+    !displayMergedSavedMethods
+  }, (
+    savedCardlength,
+    loadSavedCards,
+    showPaymentMethodsScreen,
+    clickToPayConfig.isReady,
+    displayMergedSavedMethods,
+  ))
 
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
-    {if enableSavedPaymentShimmer {
+    <RenderIf condition={enableSavedPaymentShimmer}>
       <PaymentElementShimmer.SavedPaymentCardShimmer />
-    } else {
-      <RenderIf condition={!showPaymentMethodsScreen}> {bottomElement} </RenderIf>
-    }}
+    </RenderIf>
+    <RenderIf condition={!enableSavedPaymentShimmer && !showPaymentMethodsScreen}>
+      {displayMergedSavedMethods ? mergedViewBottomElement : bottomElement}
+    </RenderIf>
     <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
       <div className="pt-4 pb-2 flex items-center justify-start">
         <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
@@ -360,7 +468,7 @@ let make = (
         }
       />
     </RenderIf>
-    <RenderIf condition={!enableSavedPaymentShimmer}>
+    <RenderIf condition={!enableSavedPaymentShimmer && !displayMergedSavedMethods}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer mt-4"
         style={
@@ -386,5 +494,6 @@ let make = (
         {React.string(localeString.morePaymentMethods)}
       </div>
     </RenderIf>
+    <ShowMoreButton displayMergedSavedMethods dropDownOptionsDetails showMore setShowMore />
   </div>
 }

src/Components/ShowMoreButton.res

@@ -0,0 +1,20 @@
+@react.component
+let make = (~displayMergedSavedMethods, ~dropDownOptionsDetails, ~showMore, ~setShowMore) => {
+  let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+
+  <RenderIf condition={displayMergedSavedMethods && dropDownOptionsDetails->Array.length > 0}>
+    <div
+      className="Label flex flex-row gap-1 items-end cursor-pointer mt-3 text-[14px] font-medium float-left w-fit"
+      style={
+        color: themeObj.colorPrimary,
+      }
+      onClick={_ => {
+        setShowMore(_ => !showMore)
+      }}>
+      {showMore ? React.string("Show more") : React.string("Show Less")}
+      <div className="m-1">
+        {showMore ? <Icon name="arrow-down" size=10 /> : <Icon name="arrow-up" size=10 />}
+      </div>
+    </div>
+  </RenderIf>
+}

src/PaymentElement.res

@@ -60,6 +60,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   }, (clickToPayConfig, isClickToPayAuthenticateError))
 
   let layoutClass = CardUtils.getLayoutClass(layout)
+  let displayMergedSavedMethods = layoutClass.savedMethodsLayout.displayMergedSavedMethods
 
   let (getVisaCards, closeComponentIfSavedMethodsAreEmpty) = ClickToPayHook.useClickToPay(
     ~areClickToPayUIScriptsLoaded,
@@ -278,6 +279,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   }, [selectedOption])
   useSubmitPaymentData(submitCallback)
   React.useEffect(() => {
+    if displayMergedSavedMethods {
+      setShowPaymentMethodsScreen(_ => selectedOption != "saved_methods")
+    }
     setSelectedOption(prev =>
       selectedOption !== ""
         ? prev
@@ -402,6 +406,19 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
             </RenderIf>
           }}
         </SessionPaymentWrapper>
+      | SavedMethods =>
+        <SavedMethods
+          paymentToken
+          setPaymentToken
+          savedMethods
+          loadSavedCards
+          cvcProps
+          sessions
+          isClickToPayAuthenticateError
+          setIsClickToPayAuthenticateError
+          getVisaCards
+          closeComponentIfSavedMethodsAreEmpty
+        />
       | _ =>
         <ReusableReactSuspense loaderComponent={loader()} componentName="PaymentMethodsWrapperLazy">
           <PaymentMethodsWrapperLazy paymentMethodName=selectedOption />
@@ -450,15 +467,18 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </div>
     </RenderIf>
     {if clickToPayConfig.isReady->Option.isNone {
-      if areClickToPayUIScriptsLoaded {
+      if displayMergedSavedMethods {
+        <PaymentElementShimmer />
+      } else if areClickToPayUIScriptsLoaded {
         <ClickToPayHelpers.SrcLoader />
       } else {
         <PaymentElementShimmer.SavedPaymentCardShimmer />
       }
     } else {
       <RenderIf
         condition={!showPaymentMethodsScreen &&
-        (displaySavedPaymentMethods || isShowPaymentMethodsDependingOnClickToPay)}>
+        (displaySavedPaymentMethods || isShowPaymentMethodsDependingOnClickToPay) &&
+        !displayMergedSavedMethods}>
         <SavedMethods
           paymentToken
           setPaymentToken
@@ -475,7 +495,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     }}
     <RenderIf
       condition={(paymentOptions->Array.length > 0 || walletOptions->Array.length > 0) &&
-      showPaymentMethodsScreen &&
+      (showPaymentMethodsScreen || displayMergedSavedMethods) &&
       clickToPayConfig.isReady->Option.isSome}>
       <div
         className="flex flex-col place-items-center"
@@ -510,7 +530,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     </RenderIf>
     <RenderIf
       condition={((displaySavedPaymentMethods && savedMethods->Array.length > 0) ||
-        isShowPaymentMethodsDependingOnClickToPay) && showPaymentMethodsScreen}>
+        isShowPaymentMethodsDependingOnClickToPay) &&
+      showPaymentMethodsScreen &&
+      !displayMergedSavedMethods}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer mt-4"
         style={
@@ -542,7 +564,8 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </RenderIf>
     | _ =>
       <RenderIf
-        condition={!displaySavedPaymentMethods &&
+        condition={(!displaySavedPaymentMethods ||
+        (displayMergedSavedMethods && savedMethods->Array.length == 0)) &&
         paymentOptions->Array.length == 0 &&
         walletOptions->Array.length == 0}>
         <PaymentElementShimmer />

src/PaymentElementV2.res

@@ -235,6 +235,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       | Boleto
       | PayPal
       | EFT
+      | SavedMethods
       | Unknown => React.null
       }}
     </ErrorBoundary>

src/Payments/PaymentMethodsRecord.res

@@ -221,6 +221,13 @@ let getPaymentMethodsFields = (~localeString: LocaleStringTypes.localeStrings) =
     displayName: localeString.payment_methods_card,
     miniIcon: None,
   },
+  {
+    paymentMethodName: "saved_methods",
+    icon: Some(icon("default-card", ~size=19)),
+    fields: [],
+    displayName: "Saved",
+    miniIcon: None,
+  },
   {
     paymentMethodName: "klarna",
     icon: Some(icon("klarna", ~size=19)),

src/Types/PaymentModeType.res

@@ -26,6 +26,7 @@ type payment =
   | Boleto
   | PayPal
   | EFT
+  | SavedMethods
   | Unknown
 
 let paymentMode = str => {
@@ -57,11 +58,13 @@ let paymentMode = str => {
   | "boleto" => Boleto
   | "paypal" => PayPal
   | "eft" => EFT
+  | "saved_methods" => SavedMethods
   | _ => Unknown
   }
 }
 
 let defaultOrder = [
+  "saved_methods",
   "card",
   "apple_pay",
   "google_pay",