feat: pm auth connector integration - Plaid

src/App.res

@@ -30,6 +30,7 @@ let make = () => {
   | _ =>
     switch fullscreenMode {
     | "paymentloader" => <PaymentLoader />
+    | "plaidSDK" => <PlaidSDKIframe />
     | "fullscreen" =>
       <div id="fullscreen">
         <FullScreenDivDriver />

src/Components/SavedCardItem.res

@@ -1,3 +1,32 @@
+module RenderSavedPaymentMethodItem = {
+  @react.component
+  let make = (~paymentItem: PaymentType.customerMethods, ~paymentMethodType) => {
+    switch paymentItem.paymentMethod {
+    | "card" =>
+      <div className="flex flex-col items-start">
+        <div> {React.string(paymentItem.card.nickname)} </div>
+        <div className={`PickerItemLabel flex flex-row gap-3 items-center`}>
+          <div className="tracking-widest"> {React.string(`****`)} </div>
+          <div> {React.string(paymentItem.card.last4Digits)} </div>
+        </div>
+      </div>
+    | "bank_debit" =>
+      <div className="flex flex-col items-start">
+        <div>
+          {React.string(
+            `${paymentMethodType->String.toUpperCase} ${paymentItem.paymentMethod->Utils.snakeToTitleCase}`,
+          )}
+        </div>
+        <div className={`PickerItemLabel flex flex-row gap-3 items-center`}>
+          <div className="tracking-widest"> {React.string(`****`)} </div>
+          <div> {React.string(paymentItem.bank.mask)} </div>
+        </div>
+      </div>
+    | _ => <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>
+    }
+  }
+}
+
 @react.component
 let make = (
   ~setPaymentToken,
@@ -109,15 +138,7 @@ let make = (
               <div className={`PickerItemIcon mx-3 flex  items-center `}> brandIcon </div>
               <div className="flex flex-col">
                 <div className="flex items-center gap-4">
-                  {isCard
-                    ? <div className="flex flex-col items-start">
-                        <div> {React.string(paymentItem.card.nickname)} </div>
-                        <div className={`PickerItemLabel flex flex-row gap-3 items-center`}>
-                          <div className="tracking-widest"> {React.string(`****`)} </div>
-                          <div> {React.string(paymentItem.card.last4Digits)} </div>
-                        </div>
-                      </div>
-                    : <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>}
+                  <RenderSavedPaymentMethodItem paymentItem={paymentItem} paymentMethodType />
                   <RenderIf
                     condition={displayDefaultSavedPaymentIcon &&
                     paymentItem.defaultPaymentMethodSet}>

src/Components/SavedMethods.res

@@ -65,6 +65,7 @@ let make = (
     ->Array.mapWithIndex((obj, i) => {
       let brandIcon = switch obj.paymentMethod {
       | "wallet" => getWalletBrandIcon(obj)
+      | "bank_debit" => <Icon size=brandIconSize name="bank" />
       | _ =>
         getCardBrandIcon(
           switch obj.card.scheme {

src/LoaderController.res

@@ -3,7 +3,6 @@ open Utils
 let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTimestamp) => {
   open RecoilAtoms
 
-  Console.log("in LoaderController")
   //<...>//
   let (configAtom, setConfig) = Recoil.useRecoilState(configAtom)
   let (keys, setKeys) = Recoil.useRecoilState(keys)

src/Payments/ACHBankDebit.res

@@ -5,6 +5,7 @@ open PaymentModeType
 @react.component
 let make = (~paymentType: CardThemeType.mode) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {displaySavedPaymentMethods} = Recoil.useRecoilValueFromAtom(optionAtom)
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(isManualRetryEnabled)
 
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -29,6 +30,15 @@ let make = (~paymentType: CardThemeType.mode) => {
   let (state, _) = Recoil.useLoggedRecoilState(userAddressState, "state", loggerState)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
+  let pmAuthMapper = React.useMemo1(
+    () =>
+      PmAuthConnectorUtils.findPmAuthAllPMAuthConnectors(paymentMethodListValue.payment_methods),
+    [paymentMethodListValue.payment_methods],
+  )
+
+  let isVerifyPMAuthConnectorConfigured =
+    displaySavedPaymentMethods && pmAuthMapper->Dict.get("ach")->Option.isSome
+
   OutsideClick.useOutsideClick(
     ~refs=ArrayOfRef([toolTipRef]),
     ~isActive=openToolTip,
@@ -94,30 +104,37 @@ let make = (~paymentType: CardThemeType.mode) => {
   }, (email, modalData, fullName, isManualRetryEnabled))
   useSubmitPaymentData(submitCallback)
 
-  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
-    <FullNamePaymentInput paymentType={paymentType} />
-    <EmailPaymentInput paymentType />
-    <div className="flex flex-col">
-      <AddBankAccount modalData setModalData />
-      <RenderIf condition={bankError->String.length > 0}>
-        <div
-          className="Error pt-1"
-          style={
-            color: themeObj.colorDangerText,
-            fontSize: themeObj.fontSizeSm,
-            alignSelf: "start",
-            textAlign: "left",
-          }>
-          {React.string(bankError)}
+  <>
+    <RenderIf condition={isVerifyPMAuthConnectorConfigured}>
+      <VerifyBankDetails paymentMethodType="ach" />
+    </RenderIf>
+    <RenderIf condition={!isVerifyPMAuthConnectorConfigured}>
+      <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
+        <FullNamePaymentInput paymentType={paymentType} />
+        <EmailPaymentInput paymentType />
+        <div className="flex flex-col">
+          <AddBankAccount modalData setModalData />
+          <RenderIf condition={bankError->String.length > 0}>
+            <div
+              className="Error pt-1"
+              style={
+                color: themeObj.colorDangerText,
+                fontSize: themeObj.fontSizeSm,
+                alignSelf: "start",
+                textAlign: "left",
+              }>
+              {React.string(bankError)}
+            </div>
+          </RenderIf>
         </div>
-      </RenderIf>
-    </div>
-    <Surcharge paymentMethod="bank_debit" paymentMethodType="ach" />
-    <Terms mode=ACHBankDebit />
-    <FullScreenPortal>
-      <BankDebitModal setModalData />
-    </FullScreenPortal>
-  </div>
+        <Surcharge paymentMethod="bank_debit" paymentMethodType="ach" />
+        <Terms mode=ACHBankDebit />
+        <FullScreenPortal>
+          <BankDebitModal setModalData />
+        </FullScreenPortal>
+      </div>
+    </RenderIf>
+  </>
 }
 
 let default = make

src/Payments/PaymentMethodsRecord.res

@@ -745,6 +745,7 @@ type paymentMethodTypes = {
   bank_transfers_connectors: array<string>,
   required_fields: array<required_fields>,
   surcharge_details: option<surchargeDetails>,
+  pm_auth_connector: option<string>,
 }
 
 type methods = {
@@ -788,6 +789,7 @@ let defaultPaymentMethodType = {
   bank_transfers_connectors: [],
   required_fields: [],
   surcharge_details: None,
+  pm_auth_connector: None,
 }
 
 let defaultList = {
@@ -935,6 +937,7 @@ let getPaymentMethodTypes = (dict, str) => {
         paymentMethodType === "bancontact_card",
       ),
       surcharge_details: jsonDict->getSurchargeDetails,
+      pm_auth_connector: getOptionString(jsonDict, "pm_auth_connector"),
     }
   })
 }

src/Payments/PlaidSDKIframe.res

@@ -0,0 +1,78 @@
+@react.component
+let make = () => {
+  open Utils
+
+  let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+  let (linkToken, setLinkToken) = React.useState(_ => "")
+  let (isReady, setIsReady) = React.useState(_ => false)
+  let (pmAuthConnectorsArr, setPmAuthConnectorsArr) = React.useState(_ => [])
+
+  React.useEffect0(() => {
+    handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
+    let handle = (ev: Window.event) => {
+      let json = ev.data->JSON.parseExn
+
+      let metaData = json->getDictFromJson->getDictFromDict("metadata")
+      let linkToken = metaData->getString("linkToken", "")
+      if linkToken->String.length > 0 {
+        let pmAuthConnectorArray =
+          metaData
+          ->getArray("pmAuthConnectorArray")
+          ->Array.map(ele => ele->JSON.Decode.string)
+
+        setLinkToken(_ => linkToken)
+        setPmAuthConnectorsArr(_ => pmAuthConnectorArray)
+      }
+    }
+    Window.addEventListener("message", handle)
+    Some(() => {Window.removeEventListener("message", handle)})
+  })
+
+  React.useEffect(() => {
+    PmAuthConnectorUtils.mountAllRequriedAuthConnectorScripts(
+      ~pmAuthConnectorsArr,
+      ~onScriptLoaded=authConnector => {
+        switch authConnector->PmAuthConnectorUtils.pmAuthNameToTypeMapper {
+        | PLAID => setIsReady(_ => true)
+        | NONE => ()
+        }
+      },
+      ~logger,
+    )
+    None
+  }, [pmAuthConnectorsArr])
+
+  React.useEffect(() => {
+    if isReady && linkToken->String.length > 0 {
+      let handler = Plaid.create({
+        token: linkToken,
+        onSuccess: (publicToken, _) => {
+          handlePostMessage([
+            ("isPlaid", true->JSON.Encode.bool),
+            ("publicToken", publicToken->JSON.Encode.string),
+          ])
+        },
+        onExit: _ => {
+          handlePostMessage([
+            ("fullscreen", false->JSON.Encode.bool),
+            ("isPlaid", true->JSON.Encode.bool),
+            ("isExited", true->JSON.Encode.bool),
+            ("publicToken", ""->JSON.Encode.string),
+          ])
+        },
+      })
+
+      handler.open_()
+    }
+
+    None
+  }, (isReady, linkToken))
+
+  <div
+    className="PlaidIframe h-screen w-screen bg-black/40 backdrop-blur-sm m-auto"
+    style={
+      transition: "opacity .35s ease .1s,background-color 600ms linear",
+      opacity: "100",
+    }
+  />
+}

src/Payments/SepaBankDebit.res

@@ -11,6 +11,8 @@ let make = (~paymentType: CardThemeType.mode) => {
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankDebits)
 
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {displaySavedPaymentMethods} = Recoil.useRecoilValueFromAtom(optionAtom)
+
   let (modalData, setModalData) = React.useState(_ => None)
 
   let (fullName, _) = Recoil.useLoggedRecoilState(userFullName, "fullName", loggerState)
@@ -22,6 +24,16 @@ let make = (~paymentType: CardThemeType.mode) => {
   let (postalCode, _) = Recoil.useLoggedRecoilState(userAddressPincode, "postal_code", loggerState)
   let (state, _) = Recoil.useLoggedRecoilState(userAddressState, "state", loggerState)
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+
+  let pmAuthMapper = React.useMemo1(
+    () =>
+      PmAuthConnectorUtils.findPmAuthAllPMAuthConnectors(paymentMethodListValue.payment_methods),
+    [paymentMethodListValue.payment_methods],
+  )
+
+  let isVerifyPMAuthConnectorConfigured =
+    displaySavedPaymentMethods && pmAuthMapper->Dict.get("sepa")->Option.isSome
 
   let complete =
     email.value != "" &&
@@ -82,21 +94,27 @@ let make = (~paymentType: CardThemeType.mode) => {
     }
   }, (email, fullName, modalData, isManualRetryEnabled))
   useSubmitPaymentData(submitCallback)
-
-  <div
-    className="flex flex-col animate-slowShow"
-    style={
-      gridGap: {config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : ""},
-    }>
-    <EmailPaymentInput paymentType />
-    <FullNamePaymentInput paymentType />
-    <AddBankAccount modalData setModalData />
-    <FullScreenPortal>
-      <BankDebitModal setModalData />
-    </FullScreenPortal>
-    <Surcharge paymentMethod="bank_debit" paymentMethodType="sepa" />
-    <Terms mode=SepaBankDebit />
-  </div>
+  <>
+    <RenderIf condition={isVerifyPMAuthConnectorConfigured}>
+      <VerifyBankDetails paymentMethodType="sepa" />
+    </RenderIf>
+    <RenderIf condition={!isVerifyPMAuthConnectorConfigured}>
+      <div
+        className="flex flex-col animate-slowShow"
+        style={
+          gridGap: {config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : ""},
+        }>
+        <EmailPaymentInput paymentType />
+        <FullNamePaymentInput paymentType />
+        <AddBankAccount modalData setModalData />
+        <FullScreenPortal>
+          <BankDebitModal setModalData />
+        </FullScreenPortal>
+        <Surcharge paymentMethod="bank_debit" paymentMethodType="sepa" />
+        <Terms mode=SepaBankDebit />
+      </div>
+    </RenderIf>
+  </>
 }
 
 let default = make