feat(customer_acceptance): add customer_acceptance for wallets

src/LocaleString.res

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

src/Payments/ApplePay.res

@@ -51,10 +51,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 modifiedBody =
+      !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=modifiedBody,
         ~confirmParam={
           return_url: options.wallets.walletReturnUrl,
           publishableKey,

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 modifiedPaymentBodyForGpay = {
+          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)
+          modifiedPaymentBodyForGpay
           ->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,20 @@ 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.messageForWalletsDetailsSave->React.string}
+      </em>
+    </div>
+  }
+}
+
 @react.component
 let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
   open SessionsType
@@ -30,6 +44,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 +120,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,