fix: disable and enable Pay now button

juspay · Mar 12, 2024 · c0e2fd6 · c0e2fd6
1 parent 4b5654f
commit c0e2fd6
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
@@ -19,21 +19,41 @@ let make = (
   ~cardProps: CardUtils.cardProps,
   ~expiryProps: CardUtils.expiryProps,
   ~selectedOption: PaymentModeType.payment,
+  ~savedMethods: array<PaymentType.customerMethods>,
+  ~paymentToken,
 ) => {
   open RecoilAtoms
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let (isDisabled, setIsDisabled) = React.useState(() => false)
   let (showLoader, setShowLoader) = React.useState(() => false)
   let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let showFields = Recoil.useRecoilValueFromAtom(showCardFieldsAtom)
 
-  let (isCVCValid, _, _, _, _, _, _, _, _, _) = cvcProps
+  let (isCVCValid, _, cvcNumber, _, _, _, _, _, _, _) = cvcProps
   let (isCardValid, _, _, _, _, _, _, _, _, _) = cardProps
   let (isExpiryValid, _, _, _, _, _, _, _, _) = expiryProps
 
+  let (token, _) = paymentToken
+  let customerMethod =
+    savedMethods
+    ->Array.filter(savedMethod => {
+      savedMethod.paymentToken === token
+    })
+    ->Array.get(0)
+    ->Option.getOr(PaymentType.defaultCustomerMethods)
+  let isCardPaymentMethod = customerMethod.paymentMethod === "card"
+  let complete = switch isCVCValid {
+  | Some(val) => token !== "" && val
+  | _ => false
+  }
+  let empty = cvcNumber == ""
+  let isSavedMethodCheck =
+    areRequiredFieldsValidValue && (!isCardPaymentMethod || (complete && !empty))
+
   let validFormat =
-    isCVCValid->Option.getOr(false) &&
     isCardValid->Option.getOr(false) &&
+    isCVCValid->Option.getOr(false) &&
     isExpiryValid->Option.getOr(false) &&
     areRequiredFieldsValidValue
 
@@ -44,14 +64,19 @@ let make = (
     setShowLoader(_ => true)
     Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
-  React.useEffect3(() => {
-    if selectedOption === Card {
-      setIsDisabled(_ => !validFormat)
+
+  React.useEffect4(() => {
+    if showFields {
+      if selectedOption === Card {
+        setIsDisabled(_ => !validFormat)
+      } else {
+        setIsDisabled(_ => !areRequiredFieldsValidValue)
+      }
     } else {
-      setIsDisabled(_ => !areRequiredFieldsValidValue)
+      setIsDisabled(_ => !isSavedMethodCheck)
     }
     None
-  }, (validFormat, areRequiredFieldsValidValue, selectedOption))
+  }, (validFormat, areRequiredFieldsValidValue, selectedOption, isSavedMethodCheck))
 
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button

diff --git a/src/Payment.res b/src/Payment.res
@@ -127,6 +127,12 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     if cvc->Js.String2.length > 0 && cvcNumberInRange(cvc, cardBrand)->Js.Array2.includes(true) {
       zipRef.current->Js.Nullable.toOption->Belt.Option.forEach(input => input->focus)->ignore
     }
+
+    if cvc->Js.String2.length > 0 && cvcNumberInRange(cvc, cardBrand)->Js.Array2.includes(true) {
+      setIsCVCValid(_ => Some(true))
+    } else {
+      setIsCVCValid(_ => None)
+    }
   }
 
   let changeZipCode = ev => {

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -80,8 +80,7 @@ let make = (
 
   React.useEffect1(() => {
     let defaultPaymentMethod =
-      savedMethods
-      ->Js.Array2.find(savedMethod => savedMethod.defaultPaymentMethodSet)
+      savedMethods->Js.Array2.find(savedMethod => savedMethod.defaultPaymentMethodSet)
 
     let isSavedMethodsEmpty = savedMethods->Js.Array2.length === 0
 
@@ -400,6 +399,8 @@ let make = (
           cardProps
           expiryProps
           selectedOption={selectedOption->PaymentModeType.paymentMode}
+          savedMethods
+          paymentToken
         />
       </div>
     </RenderIf>

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -123,12 +123,12 @@ let make = (
     )
     let banContactBody = PaymentBody.bancontactBody()
     let cardBody = if displaySavedPaymentMethodsCheckbox {
-      if isSaveCardsChecked || list.payment_type === "setup_mandate" {
+      if isSaveCardsChecked || list.payment_type === SETUP_MANDATE {
         defaultCardBody->Js.Array2.concat(onSessionBody)
       } else {
         defaultCardBody
       }
-    } else if isGuestCustomer || list.payment_type === "normal" {
+    } else if isGuestCustomer || list.payment_type === NORMAL {
       defaultCardBody
     } else {
       defaultCardBody->Js.Array2.concat(onSessionBody)
@@ -178,7 +178,7 @@ let make = (
   let paymentMethodType = isBancontact ? "bancontact_card" : "debit"
   let conditionsForShowingSaveCardCheckbox =
     !isGuestCustomer &&
-    list.payment_type !== "setup_mandate" &&
+    list.payment_type !== SETUP_MANDATE &&
     options.displaySavedPaymentMethodsCheckbox &&
     !isBancontact
 

diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
@@ -706,13 +706,14 @@ type mandate = {
   single_use: option<mandateType>,
   multi_use: option<mandateType>,
 }
+type payment_type = NORMAL | NEW_MANDATE | SETUP_MANDATE | NONE
 
 type list = {
   redirect_url: string,
   currency: string,
   payment_methods: array<methods>,
   mandate_payment: option<mandate>,
-  payment_type: string,
+  payment_type: payment_type,
 }
 
 open Utils
@@ -733,7 +734,7 @@ let defaultList = {
   currency: "",
   payment_methods: [],
   mandate_payment: None,
-  payment_type: "",
+  payment_type: NONE,
 }
 let getMethod = str => {
   switch str {
@@ -927,13 +928,31 @@ let getMandate = (dict, str) => {
   })
 }
 
+let paymentTypeMapper = payment_type => {
+  switch payment_type {
+  | "normal" => NORMAL
+  | "new_mandate" => NEW_MANDATE
+  | "setup_mandate" => SETUP_MANDATE
+  | _ => NONE
+  }
+}
+
+let paymentTypeToStringMapper = payment_type => {
+  switch payment_type {
+  | NORMAL => "normal"
+  | NEW_MANDATE => "new_mandate"
+  | SETUP_MANDATE => "setup_mandate"
+  | NONE => ""
+  }
+}
+
 let itemToObjMapper = dict => {
   {
     redirect_url: getString(dict, "redirect_url", ""),
     currency: getString(dict, "currency", ""),
     payment_methods: getMethodsArr(dict, "payment_methods"),
     mandate_payment: getMandate(dict, "mandate_payment"),
-    payment_type: getString(dict, "payment_type", ""),
+    payment_type: getString(dict, "payment_type", "")->paymentTypeMapper,
   }
 }
 

diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
@@ -171,7 +171,7 @@ let achBankDebitBody = (
       ->Js.Dict.fromArray
       ->Js.Json.object_,
     ),
-  ]->Js.Array2.concat(mandateBody(paymentType))
+  ]->Array.concat(mandateBody(paymentType->PaymentMethodsRecord.paymentTypeToStringMapper))
 
 let sepaBankDebitBody = (
   ~fullName,

diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
@@ -749,7 +749,9 @@ let usePaymentIntent = (optLogger: option<OrcaLogger.loggerMake>, paymentType: p
           body
           ->Js.Array2.concat(
             bodyArr->Js.Array2.concatMany([
-              PaymentBody.mandateBody(mandatePaymentType),
+              PaymentBody.mandateBody(
+                mandatePaymentType->PaymentMethodsRecord.paymentTypeToStringMapper,
+              ),
               broswerInfo(),
             ]),
           )

diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
@@ -228,8 +228,11 @@ let getPaymentMethodName = (~paymentMethodType, ~paymentMethodName) => {
   }
 }
 
-let isAppendingCustomerAcceptance = (~isGuestCustomer, ~paymentType) => {
-  !isGuestCustomer && (paymentType === "new_mandate" || paymentType === "setup_mandate")
+let isAppendingCustomerAcceptance = (
+  ~isGuestCustomer,
+  ~paymentType: PaymentMethodsRecord.payment_type,
+) => {
+  !isGuestCustomer && (paymentType === NEW_MANDATE || paymentType === SETUP_MANDATE)
 }
 
 let appendedCustomerAcceptance = (~isGuestCustomer, ~paymentType, ~body) => {