From 7b149c7ed76d2d2350edd4fd031eece879738230 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 17:16:23 +0530
Subject: [PATCH 01/12] feat: mandate changes for Saved Card flow

---
 ...edCheckbox.res => SaveDetailsCheckbox.res} | 20 ++++--
 src/Components/SavedMethods.res               | 37 +++++++++--
 src/Hooks/UtilityHooks.res                    | 13 ++++
 src/Payments/CardPayment.res                  | 31 +++++----
 src/Utilities/PaymentBody.res                 | 63 +++++++++++++------
 5 files changed, 120 insertions(+), 44 deletions(-)
 rename src/Components/{AnimatedCheckbox.res => SaveDetailsCheckbox.res} (68%)

diff --git a/src/Components/AnimatedCheckbox.res b/src/Components/SaveDetailsCheckbox.res
similarity index 68%
rename from src/Components/AnimatedCheckbox.res
rename to src/Components/SaveDetailsCheckbox.res
index 7a6fd1726..703c58858 100644
--- a/src/Components/AnimatedCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -1,12 +1,14 @@
 @react.component
-let make = (~isChecked, ~setIsChecked) => {
+let make = (~isChecked, ~setIsChecked, ~list: PaymentMethodsRecord.list) => {
   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 {
@@ -46,13 +48,21 @@ let make = (~isChecked, ~setIsChecked) => {
     ? ("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}`} />
-      <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(valueToBeRendered)}
       </div>
     </label>
   </div>
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 944506758..1f6a5a14c 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -1,5 +1,3 @@
-open CardUtils
-open Utils
 @react.component
 let make = (
   ~paymentToken,
@@ -10,6 +8,9 @@ let make = (
   ~paymentType,
   ~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)
@@ -19,6 +20,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 = useIsGuestCustomer()
 
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (token, _) = paymentToken
@@ -33,6 +37,13 @@ let make = (
     }
   }
 
+  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
+    ~displaySavedPaymentMethodsCheckbox,
+    ~isSaveCardsChecked,
+    ~list,
+    ~isGuestCustomer,
+  )
+
   let bottomElement = {
     savedMethods
     ->Array.mapWithIndex((obj, i) => {
@@ -90,7 +101,7 @@ let make = (
 
   let paymentType = customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
 
-  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
+  useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -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,20 @@ let make = (
         }
       }
     }
-  }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete, customerMethod))
+  }, (
+    areRequiredFieldsValid,
+    requiredFieldsBody,
+    empty,
+    complete,
+    customerMethod,
+    isCustomerAcceptanceRequired,
+  ))
   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
@@ -179,6 +203,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 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
index f34078b30..02380e144 100644
--- a/src/Hooks/UtilityHooks.res
+++ b/src/Hooks/UtilityHooks.res
@@ -21,3 +21,16 @@ 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
index f2a16c723..869b32df1 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -1,7 +1,5 @@
 type target = {checked: bool}
 type event = {target: target}
-open PaymentType
-open PaymentModeType
 
 @react.component
 let make = (
@@ -12,7 +10,11 @@ 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)
@@ -81,13 +83,9 @@ let make = (
     None
   }, [complete])
 
-  UtilityHooks.useHandlePostMessages(
-    ~complete=complete && areRequiredFieldsValid,
-    ~empty,
-    ~paymentType="card",
-  )
+  useHandlePostMessages(~complete=complete && areRequiredFieldsValid, ~empty, ~paymentType="card")
 
-  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+  let isGuestCustomer = useIsGuestCustomer()
   let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)
   let (cardEmpty, cardComplete, cardInvalid) = CardUtils.useCardDetails(
     ~cvcNumber,
@@ -95,13 +93,12 @@ let make = (
     ~isCvcValidValue,
   )
 
-  let isCustomerAcceptanceRequired = React.useMemo(() => {
-    if displaySavedPaymentMethodsCheckbox {
-      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
-    } else {
-      !(isGuestCustomer || list.payment_type === NORMAL)
-    }
-  }, (isSaveCardsChecked, list.payment_type))
+  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
+    ~displaySavedPaymentMethodsCheckbox,
+    ~isSaveCardsChecked,
+    ~list,
+    ~isGuestCustomer,
+  )
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -278,7 +275,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 list
+              />
             </div>
           </RenderIf>
           <RenderIf condition={isCustomerAcceptanceRequired}>
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index 740d8c93f..67cacc823 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -64,40 +64,65 @@ let boletoBody = (~socialSecurityNumber) => [
   ),
 ]
 
-let savedCardBody = (~paymentToken, ~customerId, ~cvcNumber, ~requiresCvv) => {
+let customerAcceptanceBody =
+  [
+    ("acceptance_type", "online"->JSON.Encode.string),
+    ("accepted_at", Date.now()->Js.Date.fromFloat->Date.toISOString->JSON.Encode.string),
+    (
+      "online",
+      [("user_agent", BrowserSpec.navigator.userAgent->JSON.Encode.string)]
+      ->Dict.fromArray
+      ->JSON.Encode.object,
+    ),
+  ]
+  ->Dict.fromArray
+  ->JSON.Encode.object
+
+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 customerAcceptanceBody =
-  [
-    ("acceptance_type", "online"->JSON.Encode.string),
-    ("accepted_at", Date.now()->Js.Date.fromFloat->Date.toISOString->JSON.Encode.string),
-    (
-      "online",
-      [("user_agent", BrowserSpec.navigator.userAgent->JSON.Encode.string)]
-      ->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),
   ]
-  ->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),
-]
+  if isCustomerAcceptanceRequired {
+    savedPaymentMethodBody->Array.push(("customer_acceptance", customerAcceptanceBody))->ignore
+  }
+
+  savedPaymentMethodBody
+}
 
 let mandateBody = paymentType => {
   [

From d4f2a579a6c8d62c16400fb4e3ae5a9d4211168b Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 17:47:53 +0530
Subject: [PATCH 02/12] fix: saved flow added

---
 src/Components/SavedMethods.res | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 1f6a5a14c..e9742eea1 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -208,6 +208,17 @@ let make = (
         <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked list />
       </div>
     </RenderIf>
+    <RenderIf condition={list.payment_type === SETUP_MANDATE}>
+      <div
+        className="opacity-50 text-xs mb-2 text-left"
+        style={ReactDOMStyle.make(
+          ~color=themeObj.colorText,
+          ~marginTop=themeObj.spacingGridColumn,
+          (),
+        )}>
+        <Terms mode={Card} />
+      </div>
+    </RenderIf>
     <RenderIf condition={!showFields}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"

From 21b7d550fa673dc3c9605ea3f9832c47e024136d Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 17:58:56 +0530
Subject: [PATCH 03/12] fix: customer_acceptance fix

---
 src/Utilities/PaymentBody.res | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index 67cacc823..e98bdacf3 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -89,7 +89,6 @@ 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 {

From 3340cd9264f4660411e3e328e39783a0484bcdd0 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 19:26:30 +0530
Subject: [PATCH 04/12] fix: adding checks for business name and replacing with
 merchant_name if business_name is ""

---
 src/LoaderController.res | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/LoaderController.res b/src/LoaderController.res
index 60e1430a5..eb0fa9c4e 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -362,6 +362,15 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
         }
         if dict->getDictIsSome("paymentMethodList") {
           let list = dict->getJsonObjectFromDict("paymentMethodList")
+          let listDict = list->getDictFromJson
+          if optionsPayment.business.name === "" {
+            setOptionsPayment(prev => {
+              ...prev,
+              business: {
+                name: listDict->getString("merchant_name", ""),
+              },
+            })
+          }
           let finalLoadLatency = if launchTime <= 0.0 {
             -1.0
           } else {
@@ -370,11 +379,11 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
           let updatedState: PaymentType.loadType =
             list == Dict.make()->JSON.Encode.object
               ? LoadError(list)
-              : switch list->getDictFromJson->Dict.get("error") {
+              : switch listDict->Dict.get("error") {
                 | Some(_) => LoadError(list)
                 | None =>
                   let isNonEmptyPaymentMethodList =
-                    list->getDictFromJson->getArray("payment_methods")->Array.length > 0
+                    listDict->getArray("payment_methods")->Array.length > 0
                   isNonEmptyPaymentMethodList ? Loaded(list) : LoadError(list)
                 }
 
@@ -474,7 +483,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
       }
     }
     handleMessage(handleFun, "Error in parsing sent Data")
-  }, (showCardFormByDefault, paymentMethodOrder))
+  }, (showCardFormByDefault, paymentMethodOrder, optionsPayment.business.name))
 
   let observer = ResizeObserver.newResizerObserver(entries => {
     entries

From 88e8b6ed8b5ff5e28e2a2e33aacacdaf8e7eba70 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 19:31:09 +0530
Subject: [PATCH 05/12] fix: comments addressed

---
 src/Components/SaveDetailsCheckbox.res | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index 703c58858..196337eff 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -50,10 +50,8 @@ let make = (~isChecked, ~setIsChecked, ~list: PaymentMethodsRecord.list) => {
 
   let valueToBeRendered = if showFields {
     localeString.saveCardDetails
-  } else if business.name !== "" {
-    localeString.cardTerms(business.name)
   } else {
-    localeString.cardTerms(list.merchant_name)
+    localeString.cardTerms(business.name)
   }
 
   <div className={`Checkbox ${checkboxState} flex flex-row gap-2 items-center`}>

From 134c99a4e14d8ccf860d4d9f9eeaddb3ab65bb02 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 19:32:03 +0530
Subject: [PATCH 06/12] fix: comments adddressed

---
 src/Hooks/UtilityHooks.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Hooks/UtilityHooks.res b/src/Hooks/UtilityHooks.res
index 02380e144..feb416e0b 100644
--- a/src/Hooks/UtilityHooks.res
+++ b/src/Hooks/UtilityHooks.res
@@ -33,4 +33,4 @@ let useIsCustomerAcceptanceRequired = (
     } else {
       !(isGuestCustomer || list.payment_type === NORMAL)
     }
-  }, (isSaveCardsChecked, list.payment_type))
+  }, (isSaveCardsChecked, list.payment_type, isGuestCustomer, displaySavedPaymentMethodsCheckbox))

From ffcb073534b5234c0be4a59e6db2e18ac04e62f7 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 19:34:12 +0530
Subject: [PATCH 07/12] fix: addressed comments

---
 src/LoaderController.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/LoaderController.res b/src/LoaderController.res
index eb0fa9c4e..e0b5a9aba 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -483,7 +483,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
       }
     }
     handleMessage(handleFun, "Error in parsing sent Data")
-  }, (showCardFormByDefault, paymentMethodOrder, optionsPayment.business.name))
+  }, (showCardFormByDefault, paymentMethodOrder, optionsPayment))
 
   let observer = ResizeObserver.newResizerObserver(entries => {
     entries

From bd6448b0030e887678c56cdc9cca47d9f935e112 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 17 Apr 2024 19:36:16 +0530
Subject: [PATCH 08/12] fix: warnings removed

---
 src/Components/SaveDetailsCheckbox.res | 2 +-
 src/Components/SavedMethods.res        | 2 +-
 src/Payments/CardPayment.res           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index 196337eff..296e6f1d3 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -1,5 +1,5 @@
 @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)
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index e9742eea1..12c0729b4 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -205,7 +205,7 @@ let make = (
     }}
     <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
       <div className="pt-4 pb-2 flex items-center justify-start">
-        <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked list />
+        <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
       </div>
     </RenderIf>
     <RenderIf condition={list.payment_type === SETUP_MANDATE}>
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index ca1bdc39d..14aee6d5b 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -275,7 +275,7 @@ let make = (
           <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
             <div className="pt-4 pb-2 flex items-center justify-start">
               <SaveDetailsCheckbox
-                isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked list
+                isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked
               />
             </div>
           </RenderIf>

From bf35640092cbfbc5cb9f38ebd7dda5c6facc2b34 Mon Sep 17 00:00:00 2001
From: Vrishab Srivatsa <136090360+vsrivatsa-juspay@users.noreply.github.com>
Date: Wed, 17 Apr 2024 19:39:06 +0530
Subject: [PATCH 09/12] fix: update saveCardCheckboxLabel

---
 src/Components/SaveDetailsCheckbox.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index 296e6f1d3..4901f2c52 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -48,7 +48,7 @@ let make = (~isChecked, ~setIsChecked) => {
     ? ("Checkbox--checked", "CheckboxInput--checked", "CheckboxLabel--checked")
     : ("", "", "")
 
-  let valueToBeRendered = if showFields {
+  let saveCardCheckboxLabel = if showFields {
     localeString.saveCardDetails
   } else {
     localeString.cardTerms(business.name)

From 38053848194b09e1b93e1f856a40c01e27ac3f29 Mon Sep 17 00:00:00 2001
From: Vrishab Srivatsa <136090360+vsrivatsa-juspay@users.noreply.github.com>
Date: Wed, 17 Apr 2024 19:39:12 +0530
Subject: [PATCH 10/12] fix: update saveCardCheckboxLabel

---
 src/Components/SaveDetailsCheckbox.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index 4901f2c52..4ee425282 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -60,7 +60,7 @@ let make = (~isChecked, ~setIsChecked) => {
       <input type_={`checkbox`} onChange />
       <div className={`checkmark CheckboxInput ${checkedState} mt-1`} />
       <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2 w-11/12`}>
-        {React.string(valueToBeRendered)}
+        {React.string(saveCardCheckboxLabel)}
       </div>
     </label>
   </div>

From 715351549ecfa9f8b9b6b729829d1d606cf9e3ac Mon Sep 17 00:00:00 2001
From: Vrishab Srivatsa <136090360+vsrivatsa-juspay@users.noreply.github.com>
Date: Wed, 17 Apr 2024 19:40:23 +0530
Subject: [PATCH 11/12] fix: update checkboxLabelState class

---
 src/Components/SaveDetailsCheckbox.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index 4ee425282..4589eb14e 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -59,7 +59,7 @@ let make = (~isChecked, ~setIsChecked) => {
     <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`}>
+      <div className={`CheckboxLabel ${checkBoxLabelState} ml-2 w-11/12`}>
         {React.string(saveCardCheckboxLabel)}
       </div>
     </label>

From 037e672b42913b0f2440c41b0bbb1ee399df56f3 Mon Sep 17 00:00:00 2001
From: Vrishab Srivatsa <vrishab.srivatsa@juspay.in>
Date: Wed, 17 Apr 2024 19:43:04 +0530
Subject: [PATCH 12/12] fix: typos fixed

---
 src/Components/SaveDetailsCheckbox.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index 4589eb14e..838fe86c8 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -44,7 +44,7 @@ let make = (~isChecked, ~setIsChecked) => {
     setIsChecked(_ => value)
   }
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let (checkboxState, checkedState, checkBoxLabelSate) = isChecked
+  let (checkboxState, checkedState, checkBoxLabelState) = isChecked
     ? ("Checkbox--checked", "CheckboxInput--checked", "CheckboxLabel--checked")
     : ("", "", "")