From 0e5b5abd588732481bfbafb84080b3297bf993c5 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 16 Apr 2024 17:23:11 +0530
Subject: [PATCH 1/3] feat: mandate Changes for the Saved card screen & SDK
 Button Loader changes (#289)

---
 ...edCheckbox.res => SaveDetailsCheckbox.res} | 20 ++++--
 src/Components/SavedMethods.res               | 40 ++++++++++--
 src/Hooks/UtilityHooks.res                    | 13 ++++
 src/Payments/CardPayment.res                  | 31 +++++----
 src/Payments/PaymentMethodsRecord.res         |  3 +
 src/Utilities/PaymentBody.res                 | 65 +++++++++++++------
 src/orca-loader/Hyper.res                     |  2 +-
 7 files changed, 127 insertions(+), 47 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..3c7ee5724 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -1,5 +1,3 @@
-open CardUtils
-open Utils
 @react.component
 let make = (
   ~paymentToken,
@@ -8,8 +6,12 @@ let make = (
   ~loadSavedCards: PaymentType.savedCardsLoadState,
   ~cvcProps,
   ~paymentType,
-  ~list,
+  ~list: PaymentMethodsRecord.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 +21,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 +38,13 @@ let make = (
     }
   }
 
+  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
+    ~displaySavedPaymentMethodsCheckbox,
+    ~isSaveCardsChecked,
+    ~list,
+    ~isGuestCustomer,
+  )
+
   let bottomElement = {
     savedMethods
     ->Array.mapWithIndex((obj, i) => {
@@ -90,7 +102,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 +115,7 @@ let make = (
         ~customerId,
         ~cvcNumber,
         ~requiresCvv=customerMethod.requiresCvv,
+        ~isCustomerAcceptanceRequired,
       )
     | _ => {
         let paymentMethodType = switch customerMethod.paymentMethodType {
@@ -115,6 +128,7 @@ let make = (
           ~customerId,
           ~paymentMethod=customerMethod.paymentMethod,
           ~paymentMethodType,
+          ~isCustomerAcceptanceRequired,
         )
       }
     }
@@ -153,9 +167,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 +204,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 528aaee35..790ff4e5e 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
@@ -276,7 +273,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/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index 19b8774a2..636541c8b 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -724,6 +724,7 @@ type list = {
   payment_methods: array<methods>,
   mandate_payment: option<mandate>,
   payment_type: payment_type,
+  merchant_name: string,
 }
 
 open Utils
@@ -745,6 +746,7 @@ let defaultList = {
   payment_methods: [],
   mandate_payment: None,
   payment_type: NONE,
+  merchant_name: "",
 }
 let getMethod = str => {
   switch str {
@@ -963,6 +965,7 @@ let itemToObjMapper = dict => {
     payment_methods: getMethodsArr(dict, "payment_methods"),
     mandate_payment: getMandate(dict, "mandate_payment"),
     payment_type: getString(dict, "payment_type", "")->paymentTypeMapper,
+    merchant_name: getString(dict, "merchant_name", ""),
   }
 }
 
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index 740d8c93f..9ddae8ef2 100644
--- 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,51 @@ 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
index 372e194ec..c1b3f7655 100644
--- 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)) {

From 703fd505e686d9c897e82bb0109a280484fc1d6b Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <126236898+prafulkoppalkar@users.noreply.github.com>
Date: Tue, 16 Apr 2024 17:23:25 +0530
Subject: [PATCH 2/3] fix(hyper.res): prefetch assets instead of preload (#291)

---
 Hyperswitch-React-Demo-App/webpack.dev.js | 2 +-
 src/orca-loader/Hyper.res                 | 2 +-
 webpack.dev.js                            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Hyperswitch-React-Demo-App/webpack.dev.js b/Hyperswitch-React-Demo-App/webpack.dev.js
index 9368ac4af..e950ece5b 100644
--- a/Hyperswitch-React-Demo-App/webpack.dev.js
+++ b/Hyperswitch-React-Demo-App/webpack.dev.js
@@ -16,7 +16,7 @@ let devServer = {
     },
   },
   headers: {
-    "Cache-Control": "max-age=31536000,must-revalidate",
+    "Cache-Control": "must-revalidate",
   },
 };
 
diff --git a/src/orca-loader/Hyper.res b/src/orca-loader/Hyper.res
index c1b3f7655..1a8a955b8 100644
--- a/src/orca-loader/Hyper.res
+++ b/src/orca-loader/Hyper.res
@@ -36,7 +36,7 @@ let preloadFile = (~type_, ~href=``, ()) => {
   let link = CommonHooks.createElement("link")
   link.href = href
   link.\"as" = type_
-  link.rel = "preload"
+  link.rel = "prefetch"
   link.crossorigin = "anonymous"
   checkAndAppend(`link[href="${href}"]`, link)
 }
diff --git a/webpack.dev.js b/webpack.dev.js
index 1c95cdd1b..8801754f3 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -32,7 +32,7 @@ let devServer = {
     // },
   },
   headers: {
-    "Cache-Control": "max-age=31536000,must-revalidate",
+    "Cache-Control": "must-revalidate",
   },
 };
 

From e42000a5d5acb3deed76f37a50ac48f1cc70c0c0 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 16 Apr 2024 11:55:18 +0000
Subject: [PATCH 3/3] chore(release): 0.41.0 [skip ci]

# [0.41.0](https://github.com/juspay/hyperswitch-web/compare/v0.40.0...v0.41.0) (2024-04-16)

### Bug Fixes

* **hyper.res:** prefetch assets instead of preload ([#291](https://github.com/juspay/hyperswitch-web/issues/291)) ([703fd50](https://github.com/juspay/hyperswitch-web/commit/703fd505e686d9c897e82bb0109a280484fc1d6b))

### Features

* mandate Changes for the Saved card screen & SDK Button Loader changes ([#289](https://github.com/juspay/hyperswitch-web/issues/289)) ([0e5b5ab](https://github.com/juspay/hyperswitch-web/commit/0e5b5abd588732481bfbafb84080b3297bf993c5))
---
 CHANGELOG.md      | 12 ++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57f4251f6..c56bc8d1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [0.41.0](https://github.com/juspay/hyperswitch-web/compare/v0.40.0...v0.41.0) (2024-04-16)
+
+
+### Bug Fixes
+
+* **hyper.res:** prefetch assets instead of preload ([#291](https://github.com/juspay/hyperswitch-web/issues/291)) ([703fd50](https://github.com/juspay/hyperswitch-web/commit/703fd505e686d9c897e82bb0109a280484fc1d6b))
+
+
+### Features
+
+* mandate Changes for the Saved card screen & SDK Button Loader changes ([#289](https://github.com/juspay/hyperswitch-web/issues/289)) ([0e5b5ab](https://github.com/juspay/hyperswitch-web/commit/0e5b5abd588732481bfbafb84080b3297bf993c5))
+
 # [0.40.0](https://github.com/juspay/hyperswitch-web/compare/v0.39.4...v0.40.0) (2024-04-15)
 
 
diff --git a/package-lock.json b/package-lock.json
index 762e746eb..65d00fc54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.40.0",
+      "version": "0.41.0",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudfront": "^3.414.0",
diff --git a/package.json b/package.json
index d21dae5bc..0b6ba3b31 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "main": "index.js",
   "private": true,
   "dependencies": {