feat: added support for nickname when passing customerAcceptance

juspay · Mar 12, 2024 · 456e51d · 456e51d
1 parent d8d74f9
commit 456e51d
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 43 deletions.
diff --git a/src/Components/NicknamePaymentInput.res b/src/Components/NicknamePaymentInput.res
@@ -0,0 +1,19 @@
+@react.component
+let make = (~paymentType: CardThemeType.mode, ~value, ~setValue) => {
+  let {config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+
+  let onChange = ev => {
+    let val = ReactEvent.Form.target(ev)["value"]
+    setValue(_ => val)
+  }
+
+  <PaymentInputField
+    fieldName=localeString.nicknameLabel
+    value
+    onChange
+    paymentType
+    appearance=config.appearance
+    inputRef={React.useRef(Js.Nullable.null)}
+    placeholder=localeString.nicknamePlaceholder
+  />
+}
diff --git a/src/Components/SavedCardItem.res b/src/Components/SavedCardItem.res
@@ -91,15 +91,15 @@ let make = (
                 border="1px solid currentColor"
               />
             </div>
-            <div className={`PickerItemIcon mx-3 flex  items-center `}>
-              brandIcon
-            </div>
-            <div className="flex items-center gap-2">
+            <div className={`PickerItemIcon mx-3 flex  items-center `}> brandIcon </div>
+            <div className="flex items-center gap-4">
               {isCard
-                ? <div
-                    className={`PickerItemLabel flex flex-row gap-3 items-center`}>
-                    <div className="tracking-widest"> {React.string(`****`)} </div>
-                    <div> {React.string({paymentItem.card.last4Digits})} </div>
+                ? <div className="flex flex-col items-start">
+                    <div> {React.string(paymentItem.card.nickname)} </div>
+                    <div className={`PickerItemLabel flex flex-row gap-3 items-center`}>
+                      <div className="tracking-widest"> {React.string(`****`)} </div>
+                      <div> {React.string(paymentItem.card.last4Digits)} </div>
+                    </div>
                   </div>
                 : <div> {React.string(paymentMethodType)} </div>}
               <RenderIf condition={paymentItem.defaultPaymentMethodSet}>

diff --git a/src/LocaleString.res b/src/LocaleString.res
@@ -67,6 +67,8 @@ type localeStrings = {
   useExistingPaymentMethods: string,
   selectPaymentMethodLabel: string,
   savedPaymentMethodsLabel: string,
+  nicknameLabel: string,
+  nicknamePlaceholder: string,
 }
 
 let defaultLocale = {
@@ -149,6 +151,8 @@ let defaultLocale = {
   useExistingPaymentMethods: "Use saved payment methods",
   selectPaymentMethodLabel: "Select Payment Method",
   savedPaymentMethodsLabel: "Saved Payment Methods",
+  nicknameLabel: "Card Nickname",
+  nicknamePlaceholder: "Card Nickname (Optional)",
 }
 
 type locale = {localeStrings: array<localeStrings>}
@@ -233,6 +237,8 @@ let localeStrings = [
     useExistingPaymentMethods: "Use saved payment methods",
     selectPaymentMethodLabel: "Select Payment Method",
     savedPaymentMethodsLabel: "Saved Payment Methods",
+    nicknameLabel: "Card Nickname",
+    nicknamePlaceholder: "Card Nickname (Optional)",
   },
   {
     locale: "he",
@@ -314,6 +320,8 @@ let localeStrings = [
     useExistingPaymentMethods: `השתמש באמצעי תשלום שמורים`,
     selectPaymentMethodLabel: `בחר שיטת תשלום`,
     savedPaymentMethodsLabel: `אמצעי תשלום שמורים`,
+    nicknameLabel: `כינוי לכרטיס`,
+    nicknamePlaceholder: `כינוי לכרטיס (אופציונלי)`,
   },
   {
     locale: `fr`,
@@ -395,6 +403,8 @@ let localeStrings = [
     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)`,
   },
   {
     locale: "en-GB",
@@ -476,6 +486,8 @@ let localeStrings = [
     useExistingPaymentMethods: "Use saved payment methods",
     selectPaymentMethodLabel: "Select Payment Method",
     savedPaymentMethodsLabel: "Saved Payment Methods",
+    nicknameLabel: "Card Nickname",
+    nicknamePlaceholder: "Card Nickname (Optional)",
   },
   {
     locale: "ar",
@@ -557,6 +569,8 @@ let localeStrings = [
     useExistingPaymentMethods: `استخدم طرق الدفع المحفوظة`,
     selectPaymentMethodLabel: `اختار طريقة الدفع`,
     savedPaymentMethodsLabel: `طرق الدفع المحفوظة`,
+    nicknameLabel: `الاسم علي الكارت`,
+    nicknamePlaceholder: `اسم البطاقة (اختياري)`,
   },
   {
     locale: "ja",
@@ -638,6 +652,8 @@ let localeStrings = [
     useExistingPaymentMethods: `保存した支払い方法を使用する`,
     selectPaymentMethodLabel: `支払い方法を選択してください`,
     savedPaymentMethodsLabel: `保存された支払い方法`,
+    nicknameLabel: `カードのニックネーム`,
+    nicknamePlaceholder: `カードニックネーム（任意）`,
   },
   {
     locale: "de",
@@ -719,5 +735,7 @@ let localeStrings = [
     useExistingPaymentMethods: `Gespeicherte Zahlungsarten nutzen`,
     selectPaymentMethodLabel: `Wählen Sie die Zahlungsmethode`,
     savedPaymentMethodsLabel: `Gespeicherte Zahlungsarten`,
+    nicknameLabel: `Spitzname der Karte`,
+    nicknamePlaceholder: `Kartenname (optional)`,
   },
 ]
diff --git a/src/Payment.res b/src/Payment.res
@@ -252,6 +252,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
           ~cardHolderName="",
           ~cvcNumber,
           ~cardBrand=cardNetwork,
+          (),
         )
       | CardNumberElement =>
         let (month, year) = getExpiryDates(getCardElementValue(iframeId, "card-expiry"))
@@ -263,6 +264,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
           ~cardHolderName="",
           ~cvcNumber=localCvcNumber,
           ~cardBrand=cardNetwork,
+          (),
         )
       | _ => []
       }

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -16,6 +16,9 @@ let make = (
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+
+  let (nickname, setNickname) = React.useState(_ => "")
+
   let (
     isCardValid,
     setIsCardValid,
@@ -100,7 +103,15 @@ let make = (
     ~isCvcValidValue,
   )
 
-  let submitCallback = React.useCallback5((ev: Window.event) => {
+  let isCustomerAcceptanceRequired = React.useMemo1(() => {
+    if displaySavedPaymentMethodsCheckbox {
+      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
+    } else {
+      !(isGuestCustomer || list.payment_type === NORMAL)
+    }
+  }, [isSaveCardsChecked])
+
+  let submitCallback = React.useCallback6((ev: Window.event) => {
     let json = ev.data->Js.Json.parseExn
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
     let (month, year) = CardUtils.getExpiryDates(cardExpiry)
@@ -120,18 +131,14 @@ let make = (
       ~cardHolderName="",
       ~cvcNumber,
       ~cardBrand=cardNetwork,
+      ~nickname,
+      (),
     )
     let banContactBody = PaymentBody.bancontactBody()
-    let cardBody = if displaySavedPaymentMethodsCheckbox {
-      if isSaveCardsChecked || list.payment_type === SETUP_MANDATE {
-        defaultCardBody->Js.Array2.concat(onSessionBody)
-      } else {
-        defaultCardBody
-      }
-    } else if isGuestCustomer || list.payment_type === NORMAL {
-      defaultCardBody
-    } else {
+    let cardBody = if isCustomerAcceptanceRequired {
       defaultCardBody->Js.Array2.concat(onSessionBody)
+    } else {
+      defaultCardBody
     }
     if confirm.doSubmit {
       let validFormat =
@@ -171,7 +178,14 @@ let make = (
         }
       }
     }
-  }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete, isSaveCardsChecked))
+  }, (
+    areRequiredFieldsValid,
+    requiredFieldsBody,
+    empty,
+    complete,
+    isCustomerAcceptanceRequired,
+    nickname,
+  ))
   submitPaymentData(submitCallback)
 
   let paymentMethod = isBancontact ? "bank_redirect" : "card"
@@ -182,6 +196,8 @@ let make = (
     options.displaySavedPaymentMethodsCheckbox &&
     !isBancontact
 
+  let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5"
+
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
       <div
@@ -271,6 +287,11 @@ let make = (
               <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
             </div>
           </RenderIf>
+          <RenderIf condition={isCustomerAcceptanceRequired}>
+            <div className={`pb-2 ${nicknameFieldClassName}`}>
+              <NicknamePaymentInput paymentType value=nickname setValue=setNickname />
+            </div>
+          </RenderIf>
           <RenderIf condition={savedMethods->Js.Array2.length > 0 && !isBancontact}>
             <div
               className="Label flex flex-row gap-3 items-end cursor-pointer"

diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
@@ -114,6 +114,7 @@ type customerCard = {
   expiryYear: string,
   cardToken: string,
   cardHolderName: option<string>,
+  nickname: string,
 }
 type customerMethods = {
   paymentToken: string,
@@ -164,6 +165,7 @@ let defaultCardDetails = {
   expiryYear: "",
   cardToken: "",
   cardHolderName: None,
+  nickname: "",
 }
 let defaultCustomerMethods = {
   paymentToken: "",
@@ -781,6 +783,7 @@ let getCardDetails = (dict, str) => {
       expiryYear: getString(json, "expiry_year", ""),
       cardToken: getString(json, "card_token", ""),
       cardHolderName: Some(getString(json, "card_holder_name", "")),
+      nickname: getString(json, "nick_name", ""),
     }
   })
   ->Belt.Option.getWithDefault(defaultCardDetails)

diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
@@ -1,29 +1,38 @@
 @val @scope("window")
 external btoa: string => string = "btoa"
-let cardPaymentBody = (~cardNumber, ~month, ~year, ~cardHolderName, ~cvcNumber, ~cardBrand) => [
-  ("payment_method", "card"->Js.Json.string),
-  (
-    "payment_method_data",
-    [
-      (
-        "card",
-        [
-          ("card_number", cardNumber->CardUtils.clearSpaces->Js.Json.string),
-          ("card_exp_month", month->Js.Json.string),
-          ("card_exp_year", year->Js.Json.string),
-          ("card_holder_name", cardHolderName->Js.Json.string),
-          ("card_cvc", cvcNumber->Js.Json.string),
-          ("card_issuer", ""->Js.Json.string),
-        ]
-        ->Js.Array2.concat(cardBrand)
-        ->Js.Dict.fromArray
-        ->Js.Json.object_,
-      ),
-    ]
-    ->Js.Dict.fromArray
-    ->Js.Json.object_,
-  ),
-]
+let cardPaymentBody = (
+  ~cardNumber,
+  ~month,
+  ~year,
+  ~cardHolderName,
+  ~cvcNumber,
+  ~cardBrand,
+  ~nickname="",
+  (),
+) => {
+  let cardBody = [
+    ("card_number", cardNumber->CardUtils.clearSpaces->Js.Json.string),
+    ("card_exp_month", month->Js.Json.string),
+    ("card_exp_year", year->Js.Json.string),
+    ("card_holder_name", cardHolderName->Js.Json.string),
+    ("card_cvc", cvcNumber->Js.Json.string),
+    ("card_issuer", ""->Js.Json.string),
+  ]
+
+  if nickname != "" {
+    cardBody->Js.Array2.push(("nickname", nickname->Js.Json.string))->ignore
+  }
+
+  [
+    ("payment_method", "card"->Js.Json.string),
+    (
+      "payment_method_data",
+      [("card", cardBody->Js.Array2.concat(cardBrand)->Js.Dict.fromArray->Js.Json.object_)]
+      ->Js.Dict.fromArray
+      ->Js.Json.object_,
+    ),
+  ]
+}
 
 let bancontactBody = () => [
   ("payment_method", "bank_redirect"->Js.Json.string),