feat(paymentmethods): boleto Payment Method Integration (#195)

Co-authored-by: ArushKapoorJuspay <[email protected]>

src/App.res

@@ -12,16 +12,20 @@ let make = () => {
     log
   })
 
-  React.useEffect1(()=>{
-    setLoggerState(._=>logger)
+  React.useEffect1(() => {
+    setLoggerState(._ => logger)
     None
-  },[logger])
+  }, [logger])
 
   let renderFullscreen = {
     switch fullscreenMode {
     | "paymentloader" => <PaymentLoader />
-    | "fullscreen" => <div id="fullscreen"> <FullScreenDivDriver /> </div>
+    | "fullscreen" =>
+      <div id="fullscreen">
+        <FullScreenDivDriver />
+      </div>
     | "qrData" => <QRCodeDisplay />
+    | "voucherData" => <VoucherDisplay />
     | "preMountLoader" => {
         let clientSecret = CardUtils.getQueryParamsDictforKey(url.search, "clientSecret")
         let sessionId = CardUtils.getQueryParamsDictforKey(url.search, "sessionId")

src/Components/InfoElement.res

@@ -20,7 +20,8 @@ let make = () => {
       {switch selectedOption {
       | ACHTransfer
       | BacsTransfer
-      | SepaTransfer =>
+      | SepaTransfer
+      | Boleto =>
         localeString.bankDetailsText
       | _ => localeString.redirectText
       }->React.string}

src/LocaleString.res

@@ -61,6 +61,7 @@ type localeStrings = {
   nameEmptyText: string => string,
   completeNameEmptyText: string => string,
   billingDetailsText: string,
+  socialSecurityNumberLabel: string,
 }
 
 let defaultLocale = {
@@ -137,6 +138,7 @@ let defaultLocale = {
   nameEmptyText: str => `Please provide your ${str}`,
   completeNameEmptyText: str => `Please provide your complete ${str}`,
   billingDetailsText: "Billing Details",
+  socialSecurityNumberLabel: "Social Security Number",
 }
 
 type locale = {localeStrings: array<localeStrings>}
@@ -215,6 +217,7 @@ let localeStrings = [
     nameEmptyText: str => `Please provide your ${str}`,
     completeNameEmptyText: str => `Please provide your complete ${str}`,
     billingDetailsText: "Billing Details",
+    socialSecurityNumberLabel: "Social Security Number",
   },
   {
     locale: "he",
@@ -290,6 +293,7 @@ let localeStrings = [
     nameEmptyText: str => `אנא ספק את שלך ${str}`,
     completeNameEmptyText: str => `אנא ספק את המלא שלך ${str}`,
     billingDetailsText: `פרטי תשלום`,
+    socialSecurityNumberLabel: `מספר ביטוח לאומי`,
   },
   {
     locale: `fr`,
@@ -364,7 +368,8 @@ let localeStrings = [
     \"and": `et`,
     nameEmptyText: str => `Veuillez fournir votre ${str}`,
     completeNameEmptyText: str => `Veuillez fournir votre complet ${str}`,
-    billingDetailsText: "Détails de la facturation",
+    billingDetailsText: `Détails de la facturation`,
+    socialSecurityNumberLabel: `Numéro de sécurité sociale`,
   },
   {
     locale: "en-GB",
@@ -440,6 +445,7 @@ let localeStrings = [
     nameEmptyText: str => `Please provide your ${str}`,
     completeNameEmptyText: str => `Please provide your complete ${str}`,
     billingDetailsText: "Billing Details",
+    socialSecurityNumberLabel: "Social Security Number",
   },
   {
     locale: "ar",
@@ -515,6 +521,7 @@ let localeStrings = [
     nameEmptyText: str => `يرجى تقديم الخاص بك ${str}`,
     completeNameEmptyText: str => `يرجى تقديم كامل الخاص بك ${str}`,
     billingDetailsText: `تفاصيل الفاتورة`,
+    socialSecurityNumberLabel: `رقم الضمان الاجتماعي`,
   },
   {
     locale: "ja",
@@ -590,6 +597,7 @@ let localeStrings = [
     nameEmptyText: str => `あなたの情報を提供してください ${str}`,
     completeNameEmptyText: str => `完全な情報を提供してください ${str}`,
     billingDetailsText: `支払明細`,
+    socialSecurityNumberLabel: `社会保障番号`,
   },
   {
     locale: "de",
@@ -665,5 +673,6 @@ let localeStrings = [
     nameEmptyText: str => `Bitte geben Sie Ihre an ${str}`,
     completeNameEmptyText: str => `Bitte geben Sie Ihr vollständiges Formular an ${str}`,
     billingDetailsText: `Rechnungsdetails`,
+    socialSecurityNumberLabel: `Sozialversicherungsnummer`,
   },
 ]

src/PaymentDetails.res

@@ -97,4 +97,9 @@ let details = [
     icon: Some(icon("bank", ~size=21)),
     displayName: "BECS Debit",
   },
+  {
+    type_: "boleto",
+    icon: Some(icon("boleto", ~size=19)),
+    displayName: "Boleto",
+  },
 ]

src/PaymentElement.res

@@ -285,6 +285,10 @@ let make = (
           <ApplePayLazy sessionObj=optToken list walletOptions paymentType />
         | _ => React.null
         }
+      | Boleto =>
+        <React.Suspense fallback={loader()}>
+          <BoletoLazy paymentType list />
+        </React.Suspense>
       | _ =>
         <React.Suspense fallback={loader()}>
           <PaymentMethodsWrapperLazy paymentType list paymentMethodName=selectedOption />

src/Payments/Boleto.res

@@ -0,0 +1,115 @@
+open RecoilAtoms
+open Utils
+
+let cleanSocialSecurityNumber = socialSecurityNumber =>
+  socialSecurityNumber->Js.String2.replaceByRe(%re("/\D+/g"), "")
+
+let formatSocialSecurityNumber = socialSecurityNumber => {
+  let formatted = socialSecurityNumber->cleanSocialSecurityNumber
+  let firstPart = formatted->CardUtils.slice(0, 3)
+  let secondPart = formatted->CardUtils.slice(3, 6)
+  let thirdPart = formatted->CardUtils.slice(6, 9)
+  let fourthPart = formatted->CardUtils.slice(9, 11)
+
+  if formatted->Js.String2.length <= 3 {
+    firstPart
+  } else if formatted->Js.String2.length > 3 && formatted->Js.String2.length <= 6 {
+    `${firstPart}.${secondPart}`
+  } else if formatted->Js.String2.length > 6 && formatted->Js.String2.length <= 9 {
+    `${firstPart}.${secondPart}.${thirdPart}`
+  } else {
+    `${firstPart}.${secondPart}.${thirdPart}-${fourthPart}`
+  }
+}
+
+@react.component
+let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+  let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
+
+  let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
+
+  let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Other)
+  let setComplete = Recoil.useSetRecoilState(fieldsComplete)
+  let (socialSecurityNumber, setSocialSecurityNumber) = React.useState(_ => "")
+
+  let (socialSecurityNumberError, setSocialSecurityNumberError) = React.useState(_ => "")
+
+  let socialSecurityNumberRef = React.useRef(Js.Nullable.null)
+
+  let (complete, empty) = React.useMemo1(() => {
+    (
+      socialSecurityNumber->cleanSocialSecurityNumber->Js.String2.length == 11,
+      socialSecurityNumber->Js.String2.length == 0,
+    )
+  }, [socialSecurityNumber])
+
+  React.useEffect2(() => {
+    handlePostMessageEvents(~complete, ~empty, ~paymentType="boleto", ~loggerState)
+    None
+  }, (complete, empty))
+
+  React.useEffect1(() => {
+    setComplete(._ => complete)
+    None
+  }, [complete])
+
+  let submitCallback = React.useCallback1((ev: Window.event) => {
+    let json = ev.data->Js.Json.parseExn
+    let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper
+
+    if confirm.doSubmit {
+      if complete {
+        let body = PaymentBody.boletoBody(
+          ~socialSecurityNumber=socialSecurityNumber->Js.String2.replaceByRe(%re("/\D+/g"), ""),
+        )
+        intent(
+          ~bodyArr=body,
+          ~confirmParam=confirm.confirmParams,
+          ~handleUserError=false,
+          ~iframeId,
+          (),
+        )
+        ()
+      } else {
+        postFailedSubmitResponse(~errortype="validation_error", ~message="Please enter all fields")
+      }
+    }
+  }, [socialSecurityNumber])
+  submitPaymentData(submitCallback)
+
+  let changeSocialSecurityNumber = ev => {
+    let val = ReactEvent.Form.target(ev)["value"]
+    setSocialSecurityNumberError(_ => "")
+    setSocialSecurityNumber(_ => val->formatSocialSecurityNumber)
+  }
+  let socialSecurityNumberBlur = ev => {
+    let val = ReactEvent.Focus.target(ev)["value"]->cleanSocialSecurityNumber
+    if val->Js.String2.length != 11 && val->Js.String2.length > 0 {
+      setSocialSecurityNumberError(_ => "The social security number entered is invalid.")
+    }
+  }
+
+  <div
+    className="flex flex-col animate-slowShow"
+    style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
+    <PaymentInputField
+      fieldName=localeString.socialSecurityNumberLabel
+      value=socialSecurityNumber
+      onChange=changeSocialSecurityNumber
+      paymentType
+      errorString=socialSecurityNumberError
+      isValid={socialSecurityNumberError == "" ? None : Some(false)}
+      type_="tel"
+      appearance=config.appearance
+      maxLength=14
+      onBlur=socialSecurityNumberBlur
+      inputRef=socialSecurityNumberRef
+      placeholder="000.000.000-00"
+    />
+    <Surcharge list paymentMethod="voucher" paymentMethodType="boleto" />
+    <InfoElement />
+  </div>
+}
+
+let default = make

src/Payments/Boleto.resi

@@ -0,0 +1,5 @@
+let cleanSocialSecurityNumber: Js.String2.t => Js.String2.t
+let formatSocialSecurityNumber: Js.String2.t => Js.String2.t
+@react.component
+let make: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: props<CardThemeType.mode, PaymentMethodsRecord.list> => React.element

src/Payments/BoletoLazy.res

@@ -0,0 +1,8 @@
+open LazyUtils
+
+type props = {
+  paymentType: CardThemeType.mode,
+  list: PaymentMethodsRecord.list,
+}
+
+let make: props => React.element = reactLazy(.() => import_("./Boleto.bs.js"))

src/Payments/PaymentMethodsRecord.res

@@ -485,6 +485,13 @@ let paymentMethodsFields = [
     displayName: "Pix",
     miniIcon: None,
   },
+  {
+    paymentMethodName: "boleto",
+    icon: Some(icon("boleto", ~size=19, ~width=25)),
+    displayName: "Boleto",
+    fields: [InfoElement],
+    miniIcon: None,
+  },
 ]
 
 type required_fields = {
@@ -651,7 +658,7 @@ let getPaymentDetails = (arr: array<string>) => {
 }
 
 type paymentMethod =
-  Cards | Wallets | PayLater | BankRedirect | BankTransfer | BankDebit | Crypto | NONE
+  Cards | Wallets | PayLater | BankRedirect | BankTransfer | BankDebit | Crypto | Voucher | NONE
 
 type cardType = Credit | Debit
 type paymentMethodType =
@@ -737,6 +744,7 @@ let getMethod = str => {
   | "bank_transfer" => BankTransfer
   | "bank_debit" => BankDebit
   | "crypto" => Crypto
+  | "voucher" => Voucher
   | _ => NONE
   }
 }