feat: (revert) mandate Changes for the Saved card screen & SDK Button…

… Loader changes (#301)
juspay · Apr 17, 2024 · b490fed · b490fed
1 parent e42000a
commit b490fed
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 128 deletions.
diff --git a/src/Components/SaveDetailsCheckbox.res → src/Components/AnimatedCheckbox.res b/src/Components/SaveDetailsCheckbox.res → src/Components/AnimatedCheckbox.res
@@ -1,14 +1,12 @@
 @react.component
-let make = (~isChecked, ~setIsChecked, ~list: PaymentMethodsRecord.list) => {
+let make = (~isChecked, ~setIsChecked) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
-  let {business} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
-
   let css = `.container {
   display: flex;
   cursor: pointer;
   position: relative;
   justify-content: center;
+  align-items: center;
 }
 
 .container input {
@@ -48,21 +46,13 @@ let make = (~isChecked, ~setIsChecked, ~list: PaymentMethodsRecord.list) => {
     ? ("Checkbox--checked", "CheckboxInput--checked", "CheckboxLabel--checked")
     : ("", "", "")
 
-  let valueToBeRendered = if showFields {
-    localeString.saveCardDetails
-  } else if business.name !== "" {
-    localeString.cardTerms(business.name)
-  } else {
-    localeString.cardTerms(list.merchant_name)
-  }
-
   <div className={`Checkbox ${checkboxState} flex flex-row gap-2 items-center`}>
     <style> {React.string(css)} </style>
     <label className={`container CheckboxInput ${checkedState}`}>
       <input type_={`checkbox`} onChange />
-      <div className={`checkmark CheckboxInput ${checkedState} mt-1`} />
-      <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2 w-11/12`}>
-        {React.string(valueToBeRendered)}
+      <div className={`checkmark CheckboxInput ${checkedState}`} />
+      <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2`}>
+        {React.string(localeString.saveCardDetails)}
       </div>
     </label>
   </div>

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -1,3 +1,5 @@
+open CardUtils
+open Utils
 @react.component
 let make = (
   ~paymentToken,
@@ -6,12 +8,8 @@ let make = (
   ~loadSavedCards: PaymentType.savedCardsLoadState,
   ~cvcProps,
   ~paymentType,
-  ~list: PaymentMethodsRecord.list,
+  ~list,
 ) => {
-  open CardUtils
-  open Utils
-  open UtilityHooks
-
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
   let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsValid)
@@ -21,9 +19,6 @@ 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 = useIsGuestCustomer()
 
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (token, _) = paymentToken
@@ -38,13 +33,6 @@ let make = (
     }
   }
 
-  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
-    ~displaySavedPaymentMethodsCheckbox,
-    ~isSaveCardsChecked,
-    ~list,
-    ~isGuestCustomer,
-  )
-
   let bottomElement = {
     savedMethods
     ->Array.mapWithIndex((obj, i) => {
@@ -102,7 +90,7 @@ let make = (
 
   let paymentType = customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
 
-  useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -115,7 +103,6 @@ let make = (
         ~customerId,
         ~cvcNumber,
         ~requiresCvv=customerMethod.requiresCvv,
-        ~isCustomerAcceptanceRequired,
       )
     | _ => {
         let paymentMethodType = switch customerMethod.paymentMethodType {
@@ -128,7 +115,6 @@ let make = (
           ~customerId,
           ~paymentMethod=customerMethod.paymentMethod,
           ~paymentMethodType,
-          ~isCustomerAcceptanceRequired,
         )
       }
     }
@@ -167,20 +153,9 @@ let make = (
         }
       }
     }
-  }, (
-    areRequiredFieldsValid,
-    requiredFieldsBody,
-    empty,
-    complete,
-    customerMethod,
-    isCustomerAcceptanceRequired,
-  ))
+  }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete, customerMethod))
   useSubmitPaymentData(submitCallback)
 
-  let conditionsForShowingSaveCardCheckbox = React.useMemo(() => {
-    !isGuestCustomer && list.payment_type !== SETUP_MANDATE && displaySavedPaymentMethodsCheckbox
-  }, (isGuestCustomer, list.payment_type, displaySavedPaymentMethodsCheckbox))
-
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
     {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
       <div
@@ -204,11 +179,6 @@ 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 list />
-      </div>
-    </RenderIf>
     <RenderIf condition={!showFields}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"

diff --git a/src/Hooks/UtilityHooks.res b/src/Hooks/UtilityHooks.res
@@ -21,16 +21,3 @@ let useHandlePostMessages = (~complete, ~empty, ~paymentType, ~savedMethod=false
     None
   }, (complete, empty, paymentType))
 }
-
-let useIsCustomerAcceptanceRequired = (
-  ~displaySavedPaymentMethodsCheckbox,
-  ~isSaveCardsChecked,
-  ~list: PaymentMethodsRecord.list,
-  ~isGuestCustomer,
-) => React.useMemo(() => {
-    if displaySavedPaymentMethodsCheckbox {
-      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
-    } else {
-      !(isGuestCustomer || list.payment_type === NORMAL)
-    }
-  }, (isSaveCardsChecked, list.payment_type))
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -1,5 +1,7 @@
 type target = {checked: bool}
 type event = {target: target}
+open PaymentType
+open PaymentModeType
 
 @react.component
 let make = (
@@ -10,11 +12,7 @@ let make = (
   ~paymentType: CardThemeType.mode,
   ~list: PaymentMethodsRecord.list,
 ) => {
-  open PaymentType
-  open PaymentModeType
   open Utils
-  open UtilityHooks
-
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
@@ -83,22 +81,27 @@ let make = (
     None
   }, [complete])
 
-  useHandlePostMessages(~complete=complete && areRequiredFieldsValid, ~empty, ~paymentType="card")
+  UtilityHooks.useHandlePostMessages(
+    ~complete=complete && areRequiredFieldsValid,
+    ~empty,
+    ~paymentType="card",
+  )
 
-  let isGuestCustomer = useIsGuestCustomer()
+  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
   let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)
   let (cardEmpty, cardComplete, cardInvalid) = CardUtils.useCardDetails(
     ~cvcNumber,
     ~isCVCValid,
     ~isCvcValidValue,
   )
 
-  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
-    ~displaySavedPaymentMethodsCheckbox,
-    ~isSaveCardsChecked,
-    ~list,
-    ~isGuestCustomer,
-  )
+  let isCustomerAcceptanceRequired = React.useMemo(() => {
+    if displaySavedPaymentMethodsCheckbox {
+      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
+    } else {
+      !(isGuestCustomer || list.payment_type === NORMAL)
+    }
+  }, (isSaveCardsChecked, list.payment_type))
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -187,6 +190,8 @@ let make = (
 
   let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5"
 
+  Js.log2("sdvjnsddsjd", (list.mandate_payment, options.terms.card))
+
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
       <div
@@ -273,9 +278,7 @@ let make = (
           />
           <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
             <div className="pt-4 pb-2 flex items-center justify-start">
-              <SaveDetailsCheckbox
-                isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked list
-              />
+              <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
             </div>
           </RenderIf>
           <RenderIf condition={isCustomerAcceptanceRequired}>
@@ -292,19 +295,21 @@ let make = (
       />
     </RenderIf>
     <RenderIf condition={!isBancontact}>
-      {switch (list.mandate_payment, options.terms.card) {
-      | (Some(_), Auto)
-      | (_, Always) =>
+      {switch (list.mandate_payment, options.terms.card, list.payment_type) {
+      | (Some(_), Auto, _)
+      | (_, Always, _)
+      | (_, _, NEW_MANDATE)
+      | (_, _, SETUP_MANDATE) =>
         <div
           className="opacity-50 text-xs mb-2 text-left"
           style={ReactDOMStyle.make(
             ~color=themeObj.colorText,
-            ~marginTop=themeObj.spacingGridColumn->addSize(10.0, Pixel),
+            ~marginTop=themeObj.spacingGridColumn,
             (),
           )}>
           <Terms mode={Card} />
         </div>
-      | (_, _) => React.null
+      | (_, _, _) => React.null
       }}
     </RenderIf>
   </div>

diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
@@ -64,6 +64,20 @@ 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),
@@ -78,51 +92,12 @@ let customerAcceptanceBody =
   ->Dict.fromArray
   ->JSON.Encode.object
 
-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 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 mandateBody = paymentType => {
   [