fix: info element added & logs addition

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 added. You can select the account that you want to pay with and click on the pay button.",
+          )}
+        </li>
+      </ul>
+    </div>
+  </>
 }

src/Payments/PlaidSDKIframe.res

@@ -2,16 +2,18 @@
 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=Loader, ~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 +24,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 +51,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_LOADED, ())
+        },
         onSuccess: (publicToken, _) => {
           handlePostMessage([
             ("isPlaid", true->JSON.Encode.bool),
@@ -66,7 +74,7 @@ let make = () => {
     }
 
     None
-  }, (isReady, linkToken))
+  }, (isReady, linkToken, logger))
 
   <div
     className="PlaidIframe h-screen w-screen bg-black/40 backdrop-blur-sm m-auto"

src/Utilities/PaymentHelpers.res

@@ -1720,6 +1720,7 @@ let callAuthLink = (
   ~paymentMethodType,
   ~pmAuthConnectorsArr,
   ~iframeId,
+  ~optLogger,
 ) => {
   open Promise
   let endpoint = ApiEndpoint.getApiEndPoint()
@@ -1745,7 +1746,18 @@ let callAuthLink = (
     if statusCode->String.charAt(0) !== "2" {
       res
       ->Fetch.Response.json
-      ->then(_ => {
+      ->then(data => {
+        logApi(
+          ~optLogger,
+          ~url=uri,
+          ~data,
+          ~statusCode,
+          ~apiLogType=Err,
+          ~eventName=PAYMENT_METHODS_AUTH_LINK,
+          ~logType=ERROR,
+          ~logCategory=API,
+          (),
+        )
         JSON.Encode.null->resolve
       })
     } else {
@@ -1756,6 +1768,8 @@ let callAuthLink = (
           [
             ("linkToken", data->getDictFromJson->getString("link_token", "")->JSON.Encode.string),
             ("pmAuthConnectorArray", pmAuthConnectorsArr->Identity.anyTypeToJson),
+            ("payment_id", clientSecret->Option.getOr("")->getPaymentId->JSON.Encode.string),
+            ("publishableKey", publishableKey->JSON.Encode.string),
           ]->getJsonFromArrayOfJson
 
         handlePostMessage([
@@ -1764,11 +1778,31 @@ let callAuthLink = (
           ("iframeId", iframeId->JSON.Encode.string),
           ("metadata", metaData),
         ])
+        logApi(
+          ~optLogger,
+          ~url=uri,
+          ~statusCode,
+          ~apiLogType=Response,
+          ~eventName=PAYMENT_METHODS_AUTH_LINK,
+          ~logType=INFO,
+          ~logCategory=API,
+          (),
+        )
         JSON.Encode.null->resolve
       })
     }
   })
   ->catch(e => {
+    logApi(
+      ~optLogger,
+      ~url=uri,
+      ~apiLogType=NoResponse,
+      ~eventName=PAYMENT_METHODS_AUTH_LINK,
+      ~logType=ERROR,
+      ~logCategory=API,
+      ~data={e->formatException},
+      (),
+    )
     Console.log2("Unable to retrieve payment_methods auth/link because of ", e)
     JSON.Encode.null->resolve
   })
@@ -1780,6 +1814,7 @@ let callAuthExchange = (
   ~paymentMethodType,
   ~publishableKey,
   ~setOptionValue: (PaymentType.options => PaymentType.options) => unit,
+  ~optLogger,
 ) => {
   open Promise
   open PaymentType
@@ -1808,10 +1843,31 @@ let callAuthExchange = (
     if statusCode->String.charAt(0) !== "2" {
       res
       ->Fetch.Response.json
-      ->then(_ => {
+      ->then(data => {
+        logApi(
+          ~optLogger,
+          ~url=uri,
+          ~data,
+          ~statusCode,
+          ~apiLogType=Err,
+          ~eventName=PAYMENT_METHODS_AUTH_EXCHANGE,
+          ~logType=ERROR,
+          ~logCategory=API,
+          (),
+        )
         JSON.Encode.null->resolve
       })
     } else {
+      logApi(
+        ~optLogger,
+        ~url=uri,
+        ~statusCode,
+        ~apiLogType=Response,
+        ~eventName=PAYMENT_METHODS_AUTH_EXCHANGE,
+        ~logType=INFO,
+        ~logCategory=API,
+        (),
+      )
       fetchCustomerPaymentMethodList(
         ~clientSecret=clientSecret->Option.getOr(""),
         ~publishableKey,
@@ -1831,6 +1887,16 @@ let callAuthExchange = (
         JSON.Encode.null->resolve
       })
       ->catch(e => {
+        logApi(
+          ~optLogger,
+          ~url=uri,
+          ~apiLogType=NoResponse,
+          ~eventName=CUSTOMER_PAYMENT_METHODS_CALL,
+          ~logType=ERROR,
+          ~logCategory=API,
+          ~data={e->formatException},
+          (),
+        )
         Console.log2(
           "Unable to retrieve customer/payment_methods after auth/exchange because of ",
           e,
@@ -1840,6 +1906,16 @@ let callAuthExchange = (
     }
   })
   ->catch(e => {
+    logApi(
+      ~optLogger,
+      ~url=uri,
+      ~apiLogType=NoResponse,
+      ~eventName=PAYMENT_METHODS_AUTH_EXCHANGE,
+      ~logType=ERROR,
+      ~logCategory=API,
+      ~data={e->formatException},
+      (),
+    )
     Console.log2("Unable to retrieve payment_methods auth/exchange because of ", e)
     JSON.Encode.null->resolve
   })

src/orca-log-catcher/OrcaLogger.res

@@ -72,6 +72,9 @@ type eventName =
   | POLL_STATUS_CALL
   | COMPLETE_AUTHORIZE_CALL_INIT
   | COMPLETE_AUTHORIZE_CALL
+  | PLAID_SDK_LOADED
+  | PAYMENT_METHODS_AUTH_EXCHANGE
+  | PAYMENT_METHODS_AUTH_LINK
 
 let eventNameToStrMapper = eventName => {
   switch eventName {
@@ -144,6 +147,9 @@ let eventNameToStrMapper = eventName => {
   | POLL_STATUS_CALL => "POLL_STATUS_CALL"
   | COMPLETE_AUTHORIZE_CALL_INIT => "COMPLETE_AUTHORIZE_CALL_INIT"
   | COMPLETE_AUTHORIZE_CALL => "COMPLETE_AUTHORIZE_CALL"
+  | PLAID_SDK_LOADED => "PLAID_SDK_LOADED"
+  | PAYMENT_METHODS_AUTH_EXCHANGE => "PAYMENT_METHODS_AUTH_EXCHANGE"
+  | PAYMENT_METHODS_AUTH_LINK => "PAYMENT_METHODS_AUTH_LINK"
   }
 }
 
@@ -576,6 +582,7 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta
       RETRIEVE_CALL,
       DISPLAY_THREE_DS_SDK,
       APPLE_PAY_FLOW,
+      PLAID_SDK_LOADED,
     ]
     arrayOfLogs
     ->Array.find(log => {