fix: info element added & logs addition

src/LoaderController.res

@@ -148,7 +148,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     | x => x
     }
     let finalLoadLatency = if launchTime <= 0.0 {
-      -1.0
+      0.0
     } else {
       Date.now() -. launchTime
     }
@@ -389,7 +389,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
             })
           }
           let finalLoadLatency = if launchTime <= 0.0 {
-            -1.0
+            0.0
           } else {
             Date.now() -. launchTime
           }
@@ -452,7 +452,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
             customerPaymentMethods,
           })
           let finalLoadLatency = if launchTime <= 0.0 {
-            -1.0
+            0.0
           } else {
             Date.now() -. launchTime
           }

src/Payments/AddBankDetails.res

@@ -4,7 +4,7 @@ module Loader = {
     let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
     <div className="w-full flex items-center justify-center">
       <div className="w-8 h-8 animate-spin" style={color: themeObj.colorTextSecondary}>
-        <Icon size=32 name="loader" />
+        <Icon size=28 name="loader" />
       </div>
     </div>
   }
@@ -20,6 +20,7 @@ let make = (~paymentMethodType) => {
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
   let setShowFields = Recoil.useSetRecoilState(RecoilAtoms.showCardFieldsAtom)
   let (showLoader, setShowLoader) = React.useState(() => false)
+  let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
 
   let pmAuthConnectorsArr =
     PmAuthConnectorUtils.findPmAuthAllPMAuthConnectors(
@@ -41,6 +42,7 @@ let make = (~paymentMethodType) => {
             ~paymentMethodType,
             ~publishableKey,
             ~setOptionValue,
+            ~optLogger=Some(logger),
           )
           ->then(_ => {
             handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
@@ -81,24 +83,43 @@ let make = (~paymentMethodType) => {
       ~iframeId,
       ~paymentMethodType,
       ~pmAuthConnectorsArr,
+      ~optLogger=Some(logger),
     )->ignore
   }
 
-  <button
-    onClick={_ => onClickHandler()}
-    disabled={showLoader}
-    style={
-      width: "100%",
-      padding: "20px",
-      cursor: "pointer",
-      borderRadius: themeObj.borderRadius,
-      borderColor: themeObj.borderColor,
-      borderWidth: "2px",
-    }>
-    {if showLoader {
-      <Loader />
-    } else {
-      {React.string("Add Bank Details")}
-    }}
-  </button>
+  <>
+    <button
+      onClick={_ => onClickHandler()}
+      disabled={showLoader}
+      style={
+        width: "100%",
+        padding: "10px",
+        borderRadius: themeObj.borderRadius,
+        borderColor: themeObj.borderColor,
+        borderWidth: "2px",
+      }>
+      {if showLoader {
+        <Loader />
+      } else {
+        {React.string("Add Bank Details")}
+      }}
+    </button>
+    <div className="opacity-50 text-xs mb-2 text-left mt-8" style={color: themeObj.colorText}>
+      {React.string(
+        `${paymentMethodType->String.toUpperCase} Bank Debit has 2 steps to pay. Please follow the instructions:`,
+      )}
+      <ul className="list-disc px-5 py-2">
+        <li>
+          {React.string(
+            "Please Click on Add Bank Details and proceed to add your bank account details.",
+          )}
+        </li>
+        <li>
+          {React.string(
+            "Post verification, you will see your account(s) added. You can select the account that you want to pay with and click on the pay button.",
+          )}
+        </li>
+      </ul>
+    </div>
+  </>
 }

src/Payments/BacsBankDebit.res

@@ -25,6 +25,7 @@ let make = (~paymentType: CardThemeType.mode) => {
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(RecoilAtoms.isManualRetryEnabled)
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {displaySavedPaymentMethods} = Recoil.useRecoilValueFromAtom(optionAtom)
 
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankDebits)
   let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState)
@@ -38,12 +39,22 @@ let make = (~paymentType: CardThemeType.mode) => {
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
   let (sortcode, setSortcode) = React.useState(_ => "")
   let (accountNumber, setAccountNumber) = React.useState(_ => "")
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let (sortCodeError, setSortCodeError) = React.useState(_ => "")
 
   let sortCodeRef = React.useRef(Nullable.null)
   let accNumRef = React.useRef(Nullable.null)
 
+  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 != "" &&
     email.isValid->Option.getOr(false) &&
@@ -120,38 +131,45 @@ let make = (~paymentType: CardThemeType.mode) => {
     }
   }
 
-  <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
-    <div className="flex flex-row" style={gridGap: themeObj.spacingGridRow}>
-      <PaymentInputField
-        fieldName=localeString.sortCodeText
-        value=sortcode
-        onChange=changeSortCode
-        paymentType
-        errorString=sortCodeError
-        isValid={sortCodeError == "" ? None : Some(false)}
-        type_="tel"
-        appearance=config.appearance
-        maxLength=8
-        onBlur=sortcodeBlur
-        inputRef=sortCodeRef
-        placeholder="10-80-00"
-      />
-      <PaymentInputField
-        fieldName=localeString.accountNumberText
-        value=accountNumber
-        onChange=changeAccNum
-        paymentType
-        type_="text"
-        appearance=config.appearance
-        inputRef=accNumRef
-        placeholder="00012345"
-      />
-    </div>
-    <EmailPaymentInput paymentType />
-    <FullNamePaymentInput paymentType={paymentType} customFieldName=Some("Bank Holder Name") />
-    <AddressPaymentInput paymentType />
-    <Surcharge paymentMethod="bank_debit" paymentMethodType="bacs" />
-  </div>
+  <>
+    <RenderIf condition={isVerifyPMAuthConnectorConfigured}>
+      <AddBankDetails paymentMethodType="bacs" />
+    </RenderIf>
+    <RenderIf condition={!isVerifyPMAuthConnectorConfigured}>
+      <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingGridColumn}>
+        <div className="flex flex-row" style={gridGap: themeObj.spacingGridRow}>
+          <PaymentInputField
+            fieldName=localeString.sortCodeText
+            value=sortcode
+            onChange=changeSortCode
+            paymentType
+            errorString=sortCodeError
+            isValid={sortCodeError == "" ? None : Some(false)}
+            type_="tel"
+            appearance=config.appearance
+            maxLength=8
+            onBlur=sortcodeBlur
+            inputRef=sortCodeRef
+            placeholder="10-80-00"
+          />
+          <PaymentInputField
+            fieldName=localeString.accountNumberText
+            value=accountNumber
+            onChange=changeAccNum
+            paymentType
+            type_="text"
+            appearance=config.appearance
+            inputRef=accNumRef
+            placeholder="00012345"
+          />
+        </div>
+        <EmailPaymentInput paymentType />
+        <FullNamePaymentInput paymentType={paymentType} customFieldName=Some("Bank Holder Name") />
+        <AddressPaymentInput paymentType />
+        <Surcharge paymentMethod="bank_debit" paymentMethodType="bacs" />
+      </div>
+    </RenderIf>
+  </>
 }
 
 let default = make

src/Payments/PlaidSDKIframe.res

@@ -2,16 +2,23 @@
 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(_ => [])
+  let (publishableKey, setPublishableKey) = React.useState(_ => "")
+  let (paymentId, setPaymentId) = React.useState(_ => "")
+  let logger = React.useMemo(() => {
+    OrcaLogger.make(
+      ~source=Elements(Payment),
+      ~clientSecret=paymentId,
+      ~merchantId=publishableKey,
+      (),
+    )
+  }, (publishableKey, paymentId))
 
   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 {
@@ -22,9 +29,12 @@ let make = () => {
 
         setLinkToken(_ => linkToken)
         setPmAuthConnectorsArr(_ => pmAuthConnectorArray)
+        setPublishableKey(_ => metaData->getString("payment_id", ""))
+        setPaymentId(_ => metaData->getString("publishableKey", ""))
       }
     }
     Window.addEventListener("message", handle)
+    handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
     Some(() => {Window.removeEventListener("message", handle)})
   })
 
@@ -46,6 +56,9 @@ let make = () => {
     if isReady && linkToken->String.length > 0 {
       let handler = Plaid.create({
         token: linkToken,
+        onLoad: _ => {
+          logger.setLogInfo(~value="Plaid SDK Loaded", ~eventName=PLAID_SDK, ())
+        },
         onSuccess: (publicToken, _) => {
           handlePostMessage([
             ("isPlaid", true->JSON.Encode.bool),
@@ -66,7 +79,7 @@ let make = () => {
     }
 
     None
-  }, (isReady, linkToken))
+  }, (isReady, linkToken, logger))
 
   <div
     className="PlaidIframe h-screen w-screen bg-black/40 backdrop-blur-sm m-auto"