feat: added prop for PaymentHeader Text

juspay · Mar 13, 2024 · e1e2d1b · e1e2d1b
1 parent a0baebc
commit e1e2d1b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 46 deletions.
diff --git a/src/LocaleString.res b/src/LocaleString.res
@@ -65,8 +65,6 @@ type localeStrings = {
   saveWalletDetails: string,
   morePaymentMethods: string,
   useExistingPaymentMethods: string,
-  selectPaymentMethodLabel: string,
-  savedPaymentMethodsLabel: string,
   nicknameLabel: string,
   nicknamePlaceholder: string,
 }
@@ -149,8 +147,6 @@ let defaultLocale = {
   saveWalletDetails: "Wallets details will be saved upon selection",
   morePaymentMethods: "More payment methods",
   useExistingPaymentMethods: "Use saved payment methods",
-  selectPaymentMethodLabel: "Select Payment Method",
-  savedPaymentMethodsLabel: "Saved Payment Methods",
   nicknameLabel: "Card Nickname",
   nicknamePlaceholder: "Card Nickname (Optional)",
 }
@@ -235,8 +231,6 @@ let localeStrings = [
     saveWalletDetails: "Wallets details will be saved upon selection",
     morePaymentMethods: "More payment methods",
     useExistingPaymentMethods: "Use saved payment methods",
-    selectPaymentMethodLabel: "Select Payment Method",
-    savedPaymentMethodsLabel: "Saved Payment Methods",
     nicknameLabel: "Card Nickname",
     nicknamePlaceholder: "Card Nickname (Optional)",
   },
@@ -318,8 +312,6 @@ let localeStrings = [
     saveWalletDetails: "פרטי הארנק יישמרו בעת בחירה",
     morePaymentMethods: `אמצעי תשלום נוספים`,
     useExistingPaymentMethods: `השתמש באמצעי תשלום שמורים`,
-    selectPaymentMethodLabel: `בחר שיטת תשלום`,
-    savedPaymentMethodsLabel: `אמצעי תשלום שמורים`,
     nicknameLabel: `כינוי לכרטיס`,
     nicknamePlaceholder: `כינוי לכרטיס (אופציונלי)`,
   },
@@ -401,8 +393,6 @@ let localeStrings = [
     saveWalletDetails: "Les détails du portefeuille seront enregistrés lors de la sélection",
     morePaymentMethods: `Plus de méthodes de paiement`,
     useExistingPaymentMethods: `Utiliser les modes de paiement enregistrés`,
-    selectPaymentMethodLabel: `Sélectionnez le mode de paiement`,
-    savedPaymentMethodsLabel: `Modes de paiement enregistrés`,
     nicknameLabel: `Pseudonyme de la carte`,
     nicknamePlaceholder: `Surnom de la carte (facultatif)`,
   },
@@ -484,8 +474,6 @@ let localeStrings = [
     saveWalletDetails: "Wallets details will be saved upon selection",
     morePaymentMethods: "More payment methods",
     useExistingPaymentMethods: "Use saved payment methods",
-    selectPaymentMethodLabel: "Select Payment Method",
-    savedPaymentMethodsLabel: "Saved Payment Methods",
     nicknameLabel: "Card Nickname",
     nicknamePlaceholder: "Card Nickname (Optional)",
   },
@@ -567,8 +555,6 @@ let localeStrings = [
     saveWalletDetails: "سيتم حفظ تفاصيل المحفظة عند الاختيار",
     morePaymentMethods: `المزيد من طرق الدفع`,
     useExistingPaymentMethods: `استخدم طرق الدفع المحفوظة`,
-    selectPaymentMethodLabel: `اختار طريقة الدفع`,
-    savedPaymentMethodsLabel: `طرق الدفع المحفوظة`,
     nicknameLabel: `الاسم علي الكارت`,
     nicknamePlaceholder: `اسم البطاقة (اختياري)`,
   },
@@ -650,8 +636,6 @@ let localeStrings = [
     saveWalletDetails: "選択時にウォレットの詳細が保存されます",
     morePaymentMethods: `その他の支払い方法`,
     useExistingPaymentMethods: `保存した支払い方法を使用する`,
-    selectPaymentMethodLabel: `支払い方法を選択してください`,
-    savedPaymentMethodsLabel: `保存された支払い方法`,
     nicknameLabel: `カードのニックネーム`,
     nicknamePlaceholder: `カードニックネーム（任意）`,
   },
@@ -733,8 +717,6 @@ let localeStrings = [
     saveWalletDetails: "Wallet-Details werden beim Auswählen gespeichert",
     morePaymentMethods: `Mehr Zahlungsmethoden`,
     useExistingPaymentMethods: `Gespeicherte Zahlungsarten nutzen`,
-    selectPaymentMethodLabel: `Wählen Sie die Zahlungsmethode`,
-    savedPaymentMethodsLabel: `Gespeicherte Zahlungsarten`,
     nicknameLabel: `Spitzname der Karte`,
     nicknamePlaceholder: `Kartenname (optional)`,
   },

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -14,27 +14,20 @@ let make = (
   ~countryProps,
   ~paymentType: CardThemeType.mode,
 ) => {
-  let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let sessionsObj = Recoil.useRecoilValueFromAtom(sessions)
-  let {
-    showCardFormByDefault,
-    paymentMethodOrder,
-    layout,
-    customerPaymentMethods,
-    displaySavedPaymentMethods,
-  } = Recoil.useRecoilValueFromAtom(optionAtom)
+  let optionValue = Recoil.useRecoilValueFromAtom(optionAtom)
   let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
   let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
   let methodslist = Recoil.useRecoilValueFromAtom(list)
-  let paymentOrder = paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate
+  let paymentOrder = optionValue.paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate
   let (sessions, setSessions) = React.useState(_ => Js.Dict.empty()->Js.Json.object_)
   let (paymentOptions, setPaymentOptions) = React.useState(_ => [])
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
   let (list, setList) = React.useState(_ => PaymentMethodsRecord.defaultList)
   let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0)
-  let layoutClass = CardUtils.getLayoutClass(layout)
+  let layoutClass = CardUtils.getLayoutClass(optionValue.layout)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
   let (dropDownOptions: array<string>, setDropDownOptions) = React.useState(_ => [])
   let (cardOptions: array<string>, setCardOptions) = React.useState(_ => [])
@@ -50,7 +43,7 @@ let make = (
   ) = React.useState(_ => PaymentType.LoadingSavedCards)
 
   React.useEffect2(() => {
-    switch (displaySavedPaymentMethods, customerPaymentMethods) {
+    switch (optionValue.displaySavedPaymentMethods, optionValue.customerPaymentMethods) {
     | (false, _) => {
         setShowFields(._ => true)
         setLoadSavedCards(_ => LoadedSavedCards([], true))
@@ -86,7 +79,7 @@ let make = (
     }
 
     None
-  }, (customerPaymentMethods, displaySavedPaymentMethods))
+  }, (optionValue.customerPaymentMethods, optionValue.displaySavedPaymentMethods))
 
   React.useEffect1(() => {
     let defaultPaymentMethod =
@@ -140,14 +133,14 @@ let make = (
         otherOptions,
       )
     | SemiLoaded =>
-      showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder)
+      optionValue.showCardFormByDefault && Utils.checkPriorityList(optionValue.paymentMethodOrder)
         ? ([], ["card"], [])
         : ([], [], [])
     | _ => ([], [], [])
     }
   }, (
     methodslist,
-    paymentMethodOrder,
+    optionValue.paymentMethodOrder,
     isApplePayReady,
     isGooglePayReady,
     areAllGooglePayRequiredFieldsPrefilled,
@@ -164,19 +157,19 @@ let make = (
       })
       setWalletOptions(_ => walletList)
       setList(_ => plist)
-      showCardFormByDefault
+      optionValue.showCardFormByDefault
         ? if !(actualList->Js.Array2.includes(selectedOption)) && selectedOption !== "" {
             ErrorUtils.manageErrorWarning(
               SDK_CONNECTOR_WARNING,
               ~dynamicStr="Please enable Card Payment in the dashboard, or 'ShowCard.FormByDefault' to false.",
               ~logger=loggerState,
               (),
             )
-          } else if !Utils.checkPriorityList(paymentMethodOrder) {
+          } else if !Utils.checkPriorityList(optionValue.paymentMethodOrder) {
             ErrorUtils.manageErrorWarning(
               SDK_CONNECTOR_WARNING,
-              ~dynamicStr=`'paymentMethodOrder' is ${Js.Array2.joinWith(
-                  paymentMethodOrder->Utils.getOptionalArr,
+              ~dynamicStr=`'optionValue.paymentMethodOrder' is ${Js.Array2.joinWith(
+                  optionValue.paymentMethodOrder->Utils.getOptionalArr,
                   ", ",
                 )} . Please enable Card Payment as 1st priority to show it as default.`,
               ~logger=loggerState,
@@ -187,7 +180,9 @@ let make = (
     | LoadError(_)
     | SemiLoaded =>
       setPaymentOptions(_ =>
-        showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? ["card"] : []
+        optionValue.showCardFormByDefault && Utils.checkPriorityList(optionValue.paymentMethodOrder)
+          ? ["card"]
+          : []
       )
     | _ => ()
     }
@@ -238,9 +233,12 @@ let make = (
         : switch methodslist {
           | SemiLoaded
           | LoadError(_) =>
-            showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? "card" : ""
+            optionValue.showCardFormByDefault &&
+            Utils.checkPriorityList(optionValue.paymentMethodOrder)
+              ? "card"
+              : ""
           | Loaded(_) =>
-            paymentOptions->Js.Array2.includes(selectedOption) && showCardFormByDefault
+            paymentOptions->Js.Array2.includes(selectedOption) && optionValue.showCardFormByDefault
               ? selectedOption
               : paymentOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("")
           | _ => paymentOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("")
@@ -391,19 +389,23 @@ let make = (
   }
 
   React.useEffect1(() => {
-    setShowFields(._ => !displaySavedPaymentMethods)
+    setShowFields(._ => !optionValue.displaySavedPaymentMethods)
     None
-  }, [displaySavedPaymentMethods])
+  }, [optionValue.displaySavedPaymentMethods])
 
-  let paymentLabel = if displaySavedPaymentMethods {
-    showFields ? localeString.selectPaymentMethodLabel : localeString.savedPaymentMethodsLabel
+  let paymentLabel = if optionValue.displaySavedPaymentMethods {
+    showFields ? optionValue.paymentMethodsHeaderText : optionValue.savedPaymentMethodsHeaderText
   } else {
-    localeString.selectPaymentMethodLabel
+    optionValue.paymentMethodsHeaderText
   }
 
   <>
-    <div className="text-2xl font-semibold text-[#151619] mb-6"> {React.string(paymentLabel)} </div>
-    <RenderIf condition={!showFields && displaySavedPaymentMethods}>
+    <RenderIf condition={paymentLabel->Option.isSome}>
+      <div className="text-2xl font-semibold text-[#151619] mb-6">
+        {paymentLabel->Option.getOr("")->React.string}
+      </div>
+    </RenderIf>
+    <RenderIf condition={!showFields && optionValue.displaySavedPaymentMethods}>
       <SavedMethods
         paymentToken setPaymentToken savedMethods loadSavedCards cvcProps paymentType list
       />

diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
@@ -158,6 +158,8 @@ type options = {
   showCardFormByDefault: bool,
   billingAddress: billingAddress,
   sdkHandleConfirmPayment: sdkHandleConfirmPayment,
+  paymentMethodsHeaderText?: string,
+  savedPaymentMethodsHeaderText?: string,
 }
 let defaultCardDetails = {
   scheme: None,
@@ -926,6 +928,8 @@ let itemToObjMapper = (dict, logger) => {
       "sdkHandleOneClickConfirmPayment",
       "showCardFormByDefault",
       "sdkHandleConfirmPayment",
+      "paymentMethodsHeaderText",
+      "savedPaymentMethodsHeaderText",
     ],
     dict,
     "options",
@@ -964,6 +968,8 @@ let itemToObjMapper = (dict, logger) => {
     sdkHandleConfirmPayment: dict
     ->getDictfromDict("sdkHandleConfirmPayment")
     ->getSdkHandleConfirmPaymentProps,
+    paymentMethodsHeaderText: ?getOptionString(dict, "paymentMethodsHeaderText"),
+    savedPaymentMethodsHeaderText: ?getOptionString(dict, "savedPaymentMethodsHeaderText"),
   }
 }