Merge branch 'paypal-tabs-flow' of github.com:juspay/hyperswitch-web …

…into paypal-tabs-flow
juspay · Nov 19, 2024 · 65b5923 · 65b5923
2 parents c3dd275 + 67a5840
commit 65b5923
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 14 deletions.
diff --git a/src/Components/NicknamePaymentInput.res b/src/Components/NicknamePaymentInput.res
@@ -1,19 +1,50 @@
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~value, ~setValue) => {
-  let {config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+let make = (~paymentType: CardThemeType.mode) => {
+  open RecoilAtoms
+  open Utils
+
+  let (nickName, setNickName) = Recoil.useRecoilState(userCardNickName)
+  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+
+  let validateNickname = val => {
+    let isValid = Some(val === "" || !(val->isDigitLimitExceeded(~digit=2)))
+    let errorString =
+      val !== "" && val->isDigitLimitExceeded(~digit=2) ? localeString.invalidNickNameError : ""
+
+    (isValid, errorString)
+  }
+
+  let setNickNameState = (val, prevState: RecoilAtomTypes.field) => {
+    let (isValid, errorString) = val->validateNickname
+    {
+      ...prevState,
+      value: val,
+      isValid,
+      errorString,
+    }
+  }
 
   let onChange = ev => {
-    let val = ReactEvent.Form.target(ev)["value"]
-    setValue(_ => val)
+    let val: string = ReactEvent.Form.target(ev)["value"]
+    setNickName(prev => setNickNameState(val, prev))
+  }
+
+  let onBlur = ev => {
+    let val: string = ReactEvent.Focus.target(ev)["value"]
+    setNickName(prev => setNickNameState(val, prev))
   }
 
-  <PaymentInputField
+  <PaymentField
     fieldName=localeString.cardNickname
-    value
+    value=nickName
+    setValue=setNickName
     onChange
+    onBlur
     paymentType
-    appearance=config.appearance
+    type_="userCardNickName"
+    name="userCardNickName"
     inputRef={React.useRef(Nullable.null)}
     placeholder=localeString.nicknamePlaceholder
+    maxLength=12
   />
 }
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -21,7 +21,7 @@ let make = (
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
-  let (nickname, setNickname) = React.useState(_ => "")
+  let nickname = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCardNickName)
 
   let (
     isCardValid,
@@ -145,7 +145,7 @@ let make = (
       ~cardHolderName="",
       ~cvcNumber,
       ~cardBrand=cardNetwork,
-      ~nickname,
+      ~nickname=nickname.value,
     )
     let banContactBody = PaymentBody.bancontactBody()
     let cardBody = if isCustomerAcceptanceRequired {
@@ -154,12 +154,17 @@ let make = (
       defaultCardBody
     }
     if confirm.doSubmit {
-      let validFormat =
-        (isBancontact ||
-        (isCVCValid->Option.getOr(false) &&
+      let isCardDetailsValid =
+        isCVCValid->Option.getOr(false) &&
         isCardValid->Option.getOr(false) &&
         isCardSupported->Option.getOr(false) &&
-        isExpiryValid->Option.getOr(false))) && areRequiredFieldsValid
+        isExpiryValid->Option.getOr(false)
+
+      let isNicknameValid = nickname.value === "" || nickname.isValid->Option.getOr(false)
+
+      let validFormat =
+        (isBancontact || isCardDetailsValid) && isNicknameValid && areRequiredFieldsValid
+
       if validFormat && (showFields || isBancontact) {
         intent(
           ~bodyArr={
@@ -339,7 +344,7 @@ let make = (
             </div>
           </RenderIf>
           <RenderIf condition={!options.hideCardNicknameField && isCustomerAcceptanceRequired}>
-            <NicknamePaymentInput paymentType value=nickname setValue=setNickname />
+            <NicknamePaymentInput paymentType />
           </RenderIf>
         </div>
       </div>

diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
@@ -50,6 +50,7 @@ let userPhoneNumber = Recoil.atom(
     countryCode: "",
   },
 )
+let userCardNickName = Recoil.atom("userCardNickName", defaultFieldValues)
 let isGooglePayReady = Recoil.atom("isGooglePayReady", false)
 let isApplePayReady = Recoil.atom("isApplePayReady", false)
 let userCountry = Recoil.atom("userCountry", "")

diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
@@ -1451,3 +1451,10 @@ let handleIframePostMessageForWallets = (msg, componentName, mountedIframeRef) =
     mountedIframeRef->Window.iframePostMessage(msg)
   }
 }
+
+let isDigitLimitExceeded = (val, ~digit) => {
+  switch val->String.match(%re("/\d/g")) {
+  | Some(matches) => matches->Array.length > digit
+  | None => false
+  }
+}