feat: mandate Changes for the Saved card screen

juspay · Apr 15, 2024 · 40ba52e · 40ba52e
1 parent bb31a17
commit 40ba52e
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 28 deletions.
diff --git a/src/Components/AnimatedCheckbox.res → src/Components/SaveDetailsCheckbox.res b/src/Components/AnimatedCheckbox.res → src/Components/SaveDetailsCheckbox.res
@@ -1,12 +1,13 @@
 @react.component
 let make = (~isChecked, ~setIsChecked) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
+
   let css = `.container {
   display: flex;
   cursor: pointer;
   position: relative;
   justify-content: center;
-  align-items: center;
 }
 
 .container input {
@@ -50,9 +51,13 @@ let make = (~isChecked, ~setIsChecked) => {
     <style> {React.string(css)} </style>
     <label className={`container CheckboxInput ${checkedState}`}>
       <input type_={`checkbox`} onChange />
-      <div className={`checkmark CheckboxInput ${checkedState}`} />
-      <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2`}>
-        {React.string(localeString.saveCardDetails)}
+      <div className={`checkmark CheckboxInput ${checkedState} mt-1`} />
+      <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2 w-11/12`}>
+        {React.string(
+          showFields
+            ? localeString.saveCardDetails
+            : "By providing your card information, you allow to charge your card for future payments in accordance with their terms.",
+        )}
       </div>
     </label>
   </div>

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -8,7 +8,7 @@ let make = (
   ~loadSavedCards: PaymentType.savedCardsLoadState,
   ~cvcProps,
   ~paymentType,
-  ~list,
+  ~list: PaymentMethodsRecord.list,
 ) => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
@@ -19,6 +19,9 @@ let make = (
     postFailedSubmitResponse(~errortype="validation_error", ~message)
     loggerState.setLogError(~value=message, ~eventName=INVALID_FORMAT, ())
   }
+  let (isSaveCardsChecked, setIsSaveCardsChecked) = React.useState(_ => false)
+  let {displaySavedPaymentMethodsCheckbox} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
 
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (token, _) = paymentToken
@@ -33,6 +36,14 @@ let make = (
     }
   }
 
+  let isCustomerAcceptanceRequired = React.useMemo(() => {
+    if displaySavedPaymentMethodsCheckbox {
+      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
+    } else {
+      !(isGuestCustomer || list.payment_type === NORMAL)
+    }
+  }, (isSaveCardsChecked, list.payment_type))
+
   let bottomElement = {
     savedMethods
     ->Array.mapWithIndex((obj, i) => {
@@ -103,6 +114,7 @@ let make = (
         ~customerId,
         ~cvcNumber,
         ~requiresCvv=customerMethod.requiresCvv,
+        ~isCustomerAcceptanceRequired,
       )
     | _ => {
         let paymentMethodType = switch customerMethod.paymentMethodType {
@@ -115,6 +127,7 @@ let make = (
           ~customerId,
           ~paymentMethod=customerMethod.paymentMethod,
           ~paymentMethodType,
+          ~isCustomerAcceptanceRequired,
         )
       }
     }
@@ -153,9 +166,19 @@ let make = (
         }
       }
     }
-  }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete, customerMethod))
+  }, (
+    areRequiredFieldsValid,
+    requiredFieldsBody,
+    empty,
+    complete,
+    customerMethod,
+    isCustomerAcceptanceRequired,
+  ))
   useSubmitPaymentData(submitCallback)
 
+  let conditionsForShowingSaveCardCheckbox =
+    !isGuestCustomer && list.payment_type !== SETUP_MANDATE && displaySavedPaymentMethodsCheckbox
+
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
     {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
       <div
@@ -179,6 +202,11 @@ let make = (
     } else {
       <RenderIf condition={!showFields}> {bottomElement} </RenderIf>
     }}
+    <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
+      <div className="pt-4 pb-2 flex items-center justify-start">
+        <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
+      </div>
+    </RenderIf>
     <RenderIf condition={!showFields}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -276,7 +276,9 @@ let make = (
           />
           <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
             <div className="pt-4 pb-2 flex items-center justify-start">
-              <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
+              <SaveDetailsCheckbox
+                isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked
+              />
             </div>
           </RenderIf>
           <RenderIf condition={isCustomerAcceptanceRequired}>

diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
@@ -64,20 +64,6 @@ let boletoBody = (~socialSecurityNumber) => [
   ),
 ]
 
-let savedCardBody = (~paymentToken, ~customerId, ~cvcNumber, ~requiresCvv) => {
-  let savedCardBody = [
-    ("payment_method", "card"->JSON.Encode.string),
-    ("payment_token", paymentToken->JSON.Encode.string),
-    ("customer_id", customerId->JSON.Encode.string),
-  ]
-
-  if requiresCvv {
-    savedCardBody->Array.push(("card_cvc", cvcNumber->JSON.Encode.string))->ignore
-  }
-
-  savedCardBody
-}
-
 let customerAcceptanceBody =
   [
     ("acceptance_type", "online"->JSON.Encode.string),
@@ -92,12 +78,50 @@ let customerAcceptanceBody =
   ->Dict.fromArray
   ->JSON.Encode.object
 
-let savedPaymentMethodBody = (~paymentToken, ~customerId, ~paymentMethod, ~paymentMethodType) => [
-  ("payment_method", paymentMethod->JSON.Encode.string),
-  ("payment_token", paymentToken->JSON.Encode.string),
-  ("customer_id", customerId->JSON.Encode.string),
-  ("payment_method_type", paymentMethodType),
-]
+let savedPaymentMethodBody = (
+  ~paymentToken,
+  ~customerId,
+  ~paymentMethod,
+  ~paymentMethodType,
+  ~isCustomerAcceptanceRequired,
+) => {
+  let savedPaymentMethodBody = [
+    ("payment_method", paymentMethod->JSON.Encode.string),
+    ("payment_token", paymentToken->JSON.Encode.string),
+    ("customer_id", customerId->JSON.Encode.string),
+    ("payment_method_type", paymentMethodType),
+  ]
+
+  if isCustomerAcceptanceRequired {
+    savedPaymentMethodBody->Array.push(("customer_acceptance", customerAcceptanceBody))->ignore
+  }
+
+  savedPaymentMethodBody
+}
+let savedCardBody = (
+  ~paymentToken,
+  ~customerId,
+  ~cvcNumber,
+  ~requiresCvv,
+  ~isCustomerAcceptanceRequired,
+) => {
+  let savedCardBody = [
+    ("payment_method", "card"->JSON.Encode.string),
+    ("payment_token", paymentToken->JSON.Encode.string),
+    ("customer_id", customerId->JSON.Encode.string),
+    ("customer_acceptance", customerAcceptanceBody),
+  ]
+
+  if requiresCvv {
+    savedCardBody->Array.push(("card_cvc", cvcNumber->JSON.Encode.string))->ignore
+  }
+
+  if isCustomerAcceptanceRequired {
+    savedCardBody->Array.push(("customer_acceptance", customerAcceptanceBody))->ignore
+  }
+
+  savedCardBody
+}
 
 let mandateBody = paymentType => {
   [

diff --git a/src/orca-loader/Hyper.res b/src/orca-loader/Hyper.res
@@ -318,7 +318,7 @@ let make = (publishableKey, options: option<JSON.t>, analyticsInfo: option<JSON.
                     },
                   )
                 }
-
+                postSubmitMessage(dict)
                 if val->JSON.Decode.bool->Option.getOr(false) && redirect === "always" {
                   Window.replace(returnUrl)
                 } else if !(val->JSON.Decode.bool->Option.getOr(false)) {