feat: props divide disableSave cards to checkbox and api

src/Components/AnimatedCheckbox.res

@@ -49,7 +49,7 @@ let make = (~isChecked, ~setIsChecked) => {
   <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 />
+      <input type_={`checkbox`} onChange />
       <div className={`checkmark CheckboxInput ${checkedState}`} />
       <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2`}>
         {React.string(localeString.saveCardDetails)}

src/LocaleString.res

@@ -62,6 +62,7 @@ type localeStrings = {
   completeNameEmptyText: string => string,
   billingDetailsText: string,
   socialSecurityNumberLabel: string,
+  saveWalletDetails: string,
 }
 
 let defaultLocale = {
@@ -139,6 +140,7 @@ let defaultLocale = {
   completeNameEmptyText: str => `Please provide your complete ${str}`,
   billingDetailsText: "Billing Details",
   socialSecurityNumberLabel: "Social Security Number",
+  saveWalletDetails: "Wallets details will be saved upon selection",
 }
 
 type locale = {localeStrings: array<localeStrings>}
@@ -218,6 +220,7 @@ let localeStrings = [
     completeNameEmptyText: str => `Please provide your complete ${str}`,
     billingDetailsText: "Billing Details",
     socialSecurityNumberLabel: "Social Security Number",
+    saveWalletDetails: "Wallets details will be saved upon selection",
   },
   {
     locale: "he",
@@ -294,6 +297,7 @@ let localeStrings = [
     completeNameEmptyText: str => `אנא ספק את המלא שלך ${str}`,
     billingDetailsText: `פרטי תשלום`,
     socialSecurityNumberLabel: `מספר ביטוח לאומי`,
+    saveWalletDetails: "פרטי הארנק יישמרו בעת בחירה",
   },
   {
     locale: `fr`,
@@ -370,6 +374,7 @@ let localeStrings = [
     completeNameEmptyText: str => `Veuillez fournir votre complet ${str}`,
     billingDetailsText: `Détails de la facturation`,
     socialSecurityNumberLabel: `Numéro de sécurité sociale`,
+    saveWalletDetails: "Les détails du portefeuille seront enregistrés lors de la sélection",
   },
   {
     locale: "en-GB",
@@ -446,6 +451,7 @@ let localeStrings = [
     completeNameEmptyText: str => `Please provide your complete ${str}`,
     billingDetailsText: "Billing Details",
     socialSecurityNumberLabel: "Social Security Number",
+    saveWalletDetails: "Wallets details will be saved upon selection",
   },
   {
     locale: "ar",
@@ -522,6 +528,7 @@ let localeStrings = [
     completeNameEmptyText: str => `يرجى تقديم كامل الخاص بك ${str}`,
     billingDetailsText: `تفاصيل الفاتورة`,
     socialSecurityNumberLabel: `رقم الضمان الاجتماعي`,
+    saveWalletDetails: "سيتم حفظ تفاصيل المحفظة عند الاختيار",
   },
   {
     locale: "ja",
@@ -598,6 +605,7 @@ let localeStrings = [
     completeNameEmptyText: str => `完全な情報を提供してください ${str}`,
     billingDetailsText: `支払明細`,
     socialSecurityNumberLabel: `社会保障番号`,
+    saveWalletDetails: "選択時にウォレットの詳細が保存されます",
   },
   {
     locale: "de",
@@ -674,5 +682,6 @@ let localeStrings = [
     completeNameEmptyText: str => `Bitte geben Sie Ihr vollständiges Formular an ${str}`,
     billingDetailsText: `Rechnungsdetails`,
     socialSecurityNumberLabel: `Sozialversicherungsnummer`,
+    saveWalletDetails: "Wallet-Details werden beim Auswählen gespeichert",
   },
 ]

src/Payments/ApplePay.res

@@ -52,10 +52,24 @@ let make = (
     ? list->PaymentUtils.getConnectors(Wallets(ApplePay(SDK)))
     : list->PaymentUtils.getConnectors(Wallets(ApplePay(Redirect)))
 
+  let isGuestCustomer = React.useMemo1(() => {
+    switch options.customerPaymentMethods {
+    | LoadedSavedCards(_, false)
+    | NoResult(false) => false
+    | _ => true
+    }
+  }, [options.customerPaymentMethods])
+
   let processPayment = bodyArr => {
+    let requestBody =
+      !isGuestCustomer &&
+      (list.payment_type === "new_mandate" || list.payment_type === "setup_mandate")
+        ? bodyArr->Js.Array2.concat([("customer_acceptance", PaymentBody.customerAcceptanceBody)])
+        : bodyArr
+
     if isWallet {
       intent(
-        ~bodyArr,
+        ~bodyArr=requestBody,
         ~confirmParam={
           return_url: options.wallets.walletReturnUrl,
           publishableKey,

src/Payments/CardPayment.res

@@ -57,7 +57,7 @@ let make = (
     cvcError,
     setCvcError,
   ) = cvcProps
-  let {customerPaymentMethods, disableSaveCards} = Recoil.useRecoilValueFromAtom(
+  let {customerPaymentMethods, displaySavedPaymentMethodsCheckbox} = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.optionAtom,
   )
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
@@ -105,12 +105,12 @@ let make = (
   }, [customerPaymentMethods])
 
   React.useEffect1(() => {
-    if disableSaveCards {
+    if displaySavedPaymentMethodsCheckbox {
       setShowFields(._ => true)
       setLoadSavedCards(_ => LoadedSavedCards([], true))
     }
     None
-  }, [disableSaveCards])
+  }, [displaySavedPaymentMethodsCheckbox])
 
   React.useEffect1(() => {
     let tokenobj =
@@ -164,15 +164,15 @@ let make = (
     let (token, customerId) = paymentToken
     let savedCardBody = PaymentBody.savedCardBody(~paymentToken=token, ~customerId, ~cvcNumber)
 
-    let onSessionBody = [("setup_future_usage", "on_session"->Js.Json.string)]
+    let onSessionBody = [("customer_acceptance", PaymentBody.customerAcceptanceBody)]
     let cardNetwork = {
       if cardBrand != "" {
         [("card_network", cardBrand->Js.Json.string)]
       } else {
         []
       }
     }
-    let deafultCardBody = PaymentBody.cardPaymentBody(
+    let defaultCardBody = PaymentBody.cardPaymentBody(
       ~cardNumber,
       ~month,
       ~year,
@@ -181,9 +181,15 @@ let make = (
       ~cardBrand=cardNetwork,
     )
     let banContactBody = PaymentBody.bancontactBody()
-    let cardBody = isSaveCardsChecked
-      ? deafultCardBody->Js.Array2.concat(onSessionBody)
-      : deafultCardBody
+    let cardBody = if displaySavedPaymentMethodsCheckbox {
+      if isSaveCardsChecked {
+        defaultCardBody->Js.Array2.concat(onSessionBody)
+      } else {
+        defaultCardBody
+      }
+    } else {
+      defaultCardBody->Js.Array2.concat(onSessionBody)
+    }
     if confirm.doSubmit {
       let validFormat =
         (isBancontact ||
@@ -336,7 +342,10 @@ let make = (
             cvcProps={Some(cvcProps)}
             isBancontact
           />
-          <RenderIf condition={!isBancontact && !options.disableSaveCards && !isGuestCustomer}>
+          <RenderIf
+            condition={!isBancontact &&
+            options.displaySavedPaymentMethodsCheckbox &&
+            !isGuestCustomer}>
             <div className="pt-4 pb-2 flex items-center justify-start">
               <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
             </div>

src/Payments/GPay.res

@@ -33,6 +33,14 @@ let make = (
 
   let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
 
+  let isGuestCustomer = React.useMemo1(() => {
+    switch options.customerPaymentMethods {
+    | LoadedSavedCards(_, false)
+    | NoResult(false) => false
+    | _ => true
+    }
+  }, [options.customerPaymentMethods])
+
   let googlePayPaymentMethodType = switch PaymentMethodsRecord.getPaymentMethodTypeFromList(
     ~list,
     ~paymentMethod="wallet",
@@ -87,8 +95,15 @@ let make = (
       if dict->Js.Dict.get("gpayResponse")->Belt.Option.isSome {
         let metadata = dict->getJsonObjectFromDict("gpayResponse")
         let obj = metadata->getDictFromJson->itemToObjMapper
+        let gPayBody = {
+          let body = PaymentBody.gpayBody(~payObj=obj, ~connectors)
+          !isGuestCustomer &&
+          (list.payment_type === "new_mandate" || list.payment_type === "setup_mandate")
+            ? body->Js.Array2.concat([("customer_acceptance", PaymentBody.customerAcceptanceBody)])
+            : body
+        }
         let body = {
-          PaymentBody.gpayBody(~payObj=obj, ~connectors)
+          gPayBody
           ->Js.Dict.fromArray
           ->Js.Json.object_
           ->OrcaUtils.flattenObject(true)

src/Payments/PayPal.res

@@ -29,6 +29,15 @@ let make = (~list: PaymentMethodsRecord.list) => {
   }
   let (buttonColor, textColor) =
     options.wallets.style.theme == Light ? ("#0070ba", "#ffffff") : ("#ffc439", "#000000")
+
+  let isGuestCustomer = React.useMemo1(() => {
+    switch options.customerPaymentMethods {
+    | LoadedSavedCards(_, false)
+    | NoResult(false) => false
+    | _ => true
+    }
+  }, [options.customerPaymentMethods])
+
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paypal)
   let onPaypalClick = _ev => {
     loggerState.setLogInfo(
@@ -45,8 +54,15 @@ let make = (~list: PaymentMethodsRecord.list) => {
       if result {
         let (connectors, _) = list->PaymentUtils.getConnectors(Wallets(Paypal(Redirect)))
         let body = PaymentBody.paypalRedirectionBody(~connectors)
+
+        let modifiedPaymentBody =
+          !isGuestCustomer &&
+          (list.payment_type === "new_mandate" || list.payment_type === "setup_mandate")
+            ? body->Js.Array2.concat([("customer_acceptance", PaymentBody.customerAcceptanceBody)])
+            : body
+
         intent(
-          ~bodyArr=body,
+          ~bodyArr=modifiedPaymentBody,
           ~confirmParam={
             return_url: options.wallets.walletReturnUrl,
             publishableKey,

src/Payments/PaymentRequestButtonElement.res

@@ -11,6 +11,18 @@ let paymentMode = str => {
   | _ => NONE
   }
 }
+
+module WalletsSaveDetailsText = {
+  @react.component
+  let make = () => {
+    let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+    <div className="flex items-center text-xs mt-2">
+      <Icon name="lock" size=10 className="mr-1" />
+      <em className="text-left text-gray-400"> {localeString.saveWalletDetails->React.string} </em>
+    </div>
+  }
+}
+
 @react.component
 let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
   open SessionsType
@@ -30,6 +42,18 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
     googlePayThirdPartySessionObj.sessionsToken,
     Gpay,
   )
+  let {isGooglePay, isApplePay, isPaypal} = Recoil.useRecoilValueFromAtom(
+    RecoilAtoms.areOneClickWalletsRendered,
+  )
+  let {customerPaymentMethods} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+
+  let isGuestCustomer = React.useMemo1(() => {
+    switch customerPaymentMethods {
+    | LoadedSavedCards(_, false)
+    | NoResult(false) => false
+    | _ => true
+    }
+  }, [customerPaymentMethods])
 
   let {clientSecret} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
 
@@ -94,5 +118,11 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
     })
     ->React.array}
     <Surcharge list paymentMethod="wallet" paymentMethodType="google_pay" isForWallets=true />
+    <RenderIf
+      condition={!isGuestCustomer &&
+      (list.payment_type === "new_mandate" || list.payment_type === "setup_mandate") &&
+      (isGooglePay || isApplePay || isPaypal)}>
+      <WalletsSaveDetailsText />
+    </RenderIf>
   </div>
 }

src/Payments/PaypalSDK.res

@@ -37,6 +37,13 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
     },
   }
   let handleCloseLoader = () => Utils.handlePostMessage([("fullscreen", false->Js.Json.boolean)])
+  let isGuestCustomer = React.useMemo1(() => {
+    switch options.customerPaymentMethods {
+    | LoadedSavedCards(_, false)
+    | NoResult(false) => false
+    | _ => true
+    }
+  }, [options.customerPaymentMethods])
   let loadPaypalSdk = () => {
     loggerState.setLogInfo(
       ~value="Paypal SDK Button Clicked",
@@ -94,8 +101,16 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
                                 ~token=payload.nonce,
                                 ~connectors,
                               )
+                              let modifiedPaymentBody =
+                                !isGuestCustomer &&
+                                (list.payment_type === "new_mandate" ||
+                                  list.payment_type === "setup_mandate")
+                                  ? body->Js.Array2.concat([
+                                      ("customer_acceptance", PaymentBody.customerAcceptanceBody),
+                                    ])
+                                  : body
                               intent(
-                                ~bodyArr=body,
+                                ~bodyArr=modifiedPaymentBody,
                                 ~confirmParam={
                                   return_url: options.wallets.walletReturnUrl,
                                   publishableKey,

src/Types/PaymentType.res

@@ -136,7 +136,8 @@ type options = {
   business: business,
   customerPaymentMethods: savedCardsLoadState,
   paymentMethodOrder: option<array<string>>,
-  disableSaveCards: bool,
+  displaySavedPaymentMethodsCheckbox: bool,
+  displaySavedPaymentMethods: bool,
   fields: fields,
   readOnly: bool,
   terms: terms,
@@ -252,7 +253,8 @@ let defaultOptions = {
   layout: ObjectLayout(defaultLayout),
   paymentMethodOrder: None,
   fields: defaultFields,
-  disableSaveCards: false,
+  displaySavedPaymentMethodsCheckbox: true,
+  displaySavedPaymentMethods: true,
   readOnly: false,
   terms: defaultTerms,
   branding: Auto,
@@ -872,7 +874,8 @@ let itemToObjMapper = (dict, logger) => {
       "terms",
       "wallets",
       "showCardFormByDefault",
-      "disableSaveCards",
+      "displaySavedPaymentMethodsCheckbox",
+      "displaySavedPaymentMethods",
       "sdkHandleOneClickConfirmPayment",
       "showCardFormByDefault",
     ],
@@ -891,7 +894,18 @@ let itemToObjMapper = (dict, logger) => {
       "options.branding",
       logger,
     ),
-    disableSaveCards: getBoolWithWarning(dict, "disableSaveCards", false, ~logger),
+    displaySavedPaymentMethodsCheckbox: getBoolWithWarning(
+      dict,
+      "displaySavedPaymentMethodsCheckbox",
+      true,
+      ~logger,
+    ),
+    displaySavedPaymentMethods: getBoolWithWarning(
+      dict,
+      "displaySavedPaymentMethods",
+      false,
+      ~logger,
+    ),
     readOnly: getBoolWithWarning(dict, "readOnly", false, ~logger),
     terms: getTerms(dict, "terms", logger),
     wallets: getWallets(dict, "wallets", logger),

src/Types/PostalCodeType.res

@@ -10,7 +10,6 @@ let defaultPostalCode = {
 }
 
 type themeDataModule = {default: array<postalCodes>}
-open Promise
 
 @val
-external importPostalCode: string => t<themeDataModule> = "import"
+external importPostalCode: string => Promise.t<themeDataModule> = "import"