feat: props divide disableSave cards to checkbox and api (#206)

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/Hooks/UtilityHooks.res

@@ -0,0 +1,11 @@
+let useIsGuestCustomer = () => {
+  let {customerPaymentMethods} = RecoilAtoms.optionAtom->Recoil.useRecoilValueFromAtom
+
+  React.useMemo1(() => {
+    switch customerPaymentMethods {
+    | LoadedSavedCards(_, false)
+    | NoResult(false) => false
+    | _ => true
+    }
+  }, [customerPaymentMethods])
+}

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/PaymentElement.res

@@ -20,7 +20,7 @@ let make = (
     paymentMethodOrder,
     layout,
     customerPaymentMethods,
-    disableSaveCards,
+    displaySavedPaymentMethodsCheckbox,
   } = Recoil.useRecoilValueFromAtom(optionAtom)
   let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
   let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
@@ -73,12 +73,12 @@ let make = (
   }, [customerPaymentMethods])
 
   React.useEffect1(() => {
-    if disableSaveCards {
+    if displaySavedPaymentMethodsCheckbox {
       setShowFields(._ => true)
       setLoadSavedCards(_ => LoadedSavedCards([], true))
     }
     None
-  }, [disableSaveCards])
+  }, [displaySavedPaymentMethodsCheckbox])
 
   React.useEffect1(() => {
     let tokenobj =

src/Payments/ApplePay.res

@@ -52,10 +52,18 @@ let make = (
     ? list->PaymentUtils.getConnectors(Wallets(ApplePay(SDK)))
     : list->PaymentUtils.getConnectors(Wallets(ApplePay(Redirect)))
 
+  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
   let processPayment = bodyArr => {
+    let requestBody = PaymentUtils.appendedCustomerAcceptance(
+      ~isGuestCustomer,
+      ~paymentType=list.payment_type,
+      ~body=bodyArr,
+    )
+
     if isWallet {
       intent(
-        ~bodyArr,
+        ~bodyArr=requestBody,
         ~confirmParam={
           return_url: options.wallets.walletReturnUrl,
           publishableKey,

src/Payments/CardPayment.res

@@ -57,6 +57,9 @@ let make = (
     cvcError,
     setCvcError,
   ) = cvcProps
+  let {customerPaymentMethods, displaySavedPaymentMethodsCheckbox} = Recoil.useRecoilValueFromAtom(
+    RecoilAtoms.optionAtom,
+  )
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
   let setComplete = Recoil.useSetRecoilState(RecoilAtoms.fieldsComplete)
@@ -83,12 +86,13 @@ let make = (
   }, (empty, complete))
 
   let (savedMethods, isGuestCustomer) = React.useMemo1(() => {
-    switch options.customerPaymentMethods {
+    switch customerPaymentMethods {
     | LoadedSavedCards(savedMethods, isGuest) => (savedMethods, isGuest)
     | NoResult(isGuest) => ([], isGuest)
     | _ => ([], true)
     }
-  }, [options.customerPaymentMethods])
+  }, [customerPaymentMethods])
+
   let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)
   let (cardEmpty, cardComplete, cardInvalid) = CardUtils.useCardDetails(
     ~cvcNumber,
@@ -100,15 +104,16 @@ let make = (
     let json = ev.data->Js.Json.parseExn
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
     let (month, year) = CardUtils.getExpiryDates(cardExpiry)
-    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,
@@ -117,9 +122,15 @@ let make = (
       ~cardBrand=cardNetwork,
     )
     let banContactBody = PaymentBody.bancontactBody()
-    let cardBody = isSaveCardsChecked
-      ? deafultCardBody->Js.Array2.concat(onSessionBody)
-      : deafultCardBody
+    let cardBody = if displaySavedPaymentMethodsCheckbox {
+      if isSaveCardsChecked || list.payment_type === "setup_mandate" {
+        defaultCardBody->Js.Array2.concat(onSessionBody)
+      } else {
+        defaultCardBody
+      }
+    } else {
+      defaultCardBody->Js.Array2.concat(onSessionBody)
+    }
     if confirm.doSubmit {
       let validFormat =
         (isBancontact ||
@@ -163,6 +174,11 @@ let make = (
 
   let paymentMethod = isBancontact ? "bank_redirect" : "card"
   let paymentMethodType = isBancontact ? "bancontact_card" : "debit"
+  let conditionsForShowingSaveCardCheckbox =
+    !isGuestCustomer &&
+    list.payment_type !== "setup_mandate" &&
+    options.displaySavedPaymentMethodsCheckbox &&
+    !isBancontact
 
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
@@ -248,7 +264,7 @@ let make = (
             cvcProps={Some(cvcProps)}
             isBancontact
           />
-          <RenderIf condition={!isBancontact && !options.disableSaveCards && !isGuestCustomer}>
+          <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
             <div className="pt-4 pb-2 flex items-center justify-start">
               <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
             </div>

src/Payments/GPay.res

@@ -33,6 +33,8 @@ let make = (
 
   let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
 
+  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
   let googlePayPaymentMethodType = switch PaymentMethodsRecord.getPaymentMethodTypeFromList(
     ~list,
     ~paymentMethod="wallet",
@@ -87,8 +89,14 @@ let make = (
       if dict->Js.Dict.get("gpayResponse")->Belt.Option.isSome {
         let metadata = dict->getJsonObjectFromDict("gpayResponse")
         let obj = metadata->getDictFromJson->itemToObjMapper
+        let gPayBody = PaymentUtils.appendedCustomerAcceptance(
+          ~isGuestCustomer,
+          ~paymentType=list.payment_type,
+          ~body=PaymentBody.gpayBody(~payObj=obj, ~connectors),
+        )
+
         let body = {
-          PaymentBody.gpayBody(~payObj=obj, ~connectors)
+          gPayBody
           ->Js.Dict.fromArray
           ->Js.Json.object_
           ->OrcaUtils.flattenObject(true)

src/Payments/PayPal.res

@@ -29,6 +29,8 @@ let make = (~list: PaymentMethodsRecord.list) => {
   }
   let (buttonColor, textColor) =
     options.wallets.style.theme == Light ? ("#0070ba", "#ffffff") : ("#ffc439", "#000000")
+  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paypal)
   let onPaypalClick = _ev => {
     loggerState.setLogInfo(
@@ -45,8 +47,15 @@ let make = (~list: PaymentMethodsRecord.list) => {
       if result {
         let (connectors, _) = list->PaymentUtils.getConnectors(Wallets(Paypal(Redirect)))
         let body = PaymentBody.paypalRedirectionBody(~connectors)
+
+        let modifiedPaymentBody = PaymentUtils.appendedCustomerAcceptance(
+          ~isGuestCustomer,
+          ~paymentType=list.payment_type,
+          ~body,
+        )
+
         intent(
-          ~bodyArr=body,
+          ~bodyArr=modifiedPaymentBody,
           ~confirmParam={
             return_url: options.wallets.walletReturnUrl,
             publishableKey,

src/Payments/PaymentRequestButtonElement.res

@@ -11,6 +11,30 @@ let paymentMode = str => {
   | _ => NONE
   }
 }
+
+module WalletsSaveDetailsText = {
+  @react.component
+  let make = (~paymentType) => {
+    open RecoilAtoms
+    let {isGooglePay, isApplePay, isPaypal} = Recoil.useRecoilValueFromAtom(
+      areOneClickWalletsRendered,
+    )
+    let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+    let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
+    <RenderIf
+      condition={PaymentUtils.isAppendingCustomerAcceptance(~isGuestCustomer, ~paymentType) &&
+      (isGooglePay || isApplePay || isPaypal)}>
+      <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>
+    </RenderIf>
+  }
+}
+
 @react.component
 let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
   open SessionsType
@@ -94,5 +118,6 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
     })
     ->React.array}
     <Surcharge list paymentMethod="wallet" paymentMethodType="google_pay" isForWallets=true />
+    <WalletsSaveDetailsText paymentType=list.payment_type />
   </div>
 }

src/Payments/PaypalSDK.res

@@ -37,6 +37,7 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
     },
   }
   let handleCloseLoader = () => Utils.handlePostMessage([("fullscreen", false->Js.Json.boolean)])
+  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
   let loadPaypalSdk = () => {
     loggerState.setLogInfo(
       ~value="Paypal SDK Button Clicked",
@@ -94,8 +95,14 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
                                 ~token=payload.nonce,
                                 ~connectors,
                               )
+                              let modifiedPaymentBody = PaymentUtils.appendedCustomerAcceptance(
+                                ~isGuestCustomer,
+                                ~paymentType=list.payment_type,
+                                ~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",
+      true,
+      ~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"