feat: added prop for PaymentHeader Text (#226)

rising-dragon401 · Mar 13, 2024 · b3f1abd · b3f1abd
1 parent f64cb9d
commit b3f1abd
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 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,7 +14,6 @@ let make = (
   ~countryProps,
   ~paymentType: CardThemeType.mode,
 ) => {
-  let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let sessionsObj = Recoil.useRecoilValueFromAtom(sessions)
   let {
     showCardFormByDefault,
@@ -23,6 +22,7 @@ let make = (
     customerPaymentMethods,
     displaySavedPaymentMethods,
   } = Recoil.useRecoilValueFromAtom(optionAtom)
+  let optionAtomValue = Recoil.useRecoilValueFromAtom(optionAtom)
   let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
   let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
   let methodslist = Recoil.useRecoilValueFromAtom(list)
@@ -396,13 +396,19 @@ let make = (
   }, [displaySavedPaymentMethods])
 
   let paymentLabel = if displaySavedPaymentMethods {
-    showFields ? localeString.selectPaymentMethodLabel : localeString.savedPaymentMethodsLabel
+    showFields
+      ? optionAtomValue.paymentMethodsHeaderText
+      : optionAtomValue.savedPaymentMethodsHeaderText
   } else {
-    localeString.selectPaymentMethodLabel
+    optionAtomValue.paymentMethodsHeaderText
   }
 
   <>
-    <div className="text-2xl font-semibold text-[#151619] mb-6"> {React.string(paymentLabel)} </div>
+    <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 && displaySavedPaymentMethods}>
       <SavedMethods
         paymentToken setPaymentToken savedMethods loadSavedCards cvcProps paymentType list

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -103,13 +103,13 @@ let make = (
     ~isCvcValidValue,
   )
 
-  let isCustomerAcceptanceRequired = React.useMemo1(() => {
+  let isCustomerAcceptanceRequired = React.useMemo2(() => {
     if displaySavedPaymentMethodsCheckbox {
       isSaveCardsChecked || list.payment_type === SETUP_MANDATE
     } else {
       !(isGuestCustomer || list.payment_type === NORMAL)
     }
-  }, [isSaveCardsChecked])
+  }, (isSaveCardsChecked, list.payment_type))
 
   let submitCallback = React.useCallback6((ev: Window.event) => {
     let json = ev.data->Js.Json.parseExn

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