diff --git a/src/LoaderController.res b/src/LoaderController.res index 70ff70b65..6824896d1 100644 --- a/src/LoaderController.res +++ b/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 } diff --git a/src/Payments/AddBankDetails.res b/src/Payments/AddBankDetails.res index 5525fd905..fbbc13d51 100644 --- a/src/Payments/AddBankDetails.res +++ b/src/Payments/AddBankDetails.res @@ -4,7 +4,7 @@ module Loader = { let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
- +
} @@ -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 } - + <> + +
+ {React.string( + `${paymentMethodType->String.toUpperCase} Bank Debit has 2 steps to pay. Please follow the instructions:`, + )} + +
+ } diff --git a/src/Payments/BacsBankDebit.res b/src/Payments/BacsBankDebit.res index 8219cb509..64b9ebc22 100644 --- a/src/Payments/BacsBankDebit.res +++ b/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) => { } } -
-
- - -
- - - - -
+ <> + + + + +
+
+ + +
+ + + + +
+ + } let default = make diff --git a/src/Payments/PlaidSDKIframe.res b/src/Payments/PlaidSDKIframe.res index 93d960c29..e557efe58 100644 --- a/src/Payments/PlaidSDKIframe.res +++ b/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))
{ open Promise let endpoint = ApiEndpoint.getApiEndPoint() let uri = `${endpoint}/payment_methods/auth/link` let headers = [("Content-Type", "application/json"), ("api-key", publishableKey)]->Dict.fromArray + logApi( + ~optLogger, + ~url=uri, + ~apiLogType=Request, + ~eventName=PAYMENT_METHODS_AUTH_LINK_CALL_INIT, + ~logType=INFO, + ~logCategory=API, + (), + ) + fetchApi( uri, ~method=#POST, @@ -1745,7 +1756,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_CALL, + ~logType=ERROR, + ~logCategory=API, + (), + ) JSON.Encode.null->resolve }) } else { @@ -1756,6 +1778,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 +1788,31 @@ let callAuthLink = ( ("iframeId", iframeId->JSON.Encode.string), ("metadata", metaData), ]) + logApi( + ~optLogger, + ~url=uri, + ~statusCode, + ~apiLogType=Response, + ~eventName=PAYMENT_METHODS_AUTH_LINK_CALL, + ~logType=INFO, + ~logCategory=API, + (), + ) JSON.Encode.null->resolve }) } }) ->catch(e => { + logApi( + ~optLogger, + ~url=uri, + ~apiLogType=NoResponse, + ~eventName=PAYMENT_METHODS_AUTH_LINK_CALL, + ~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 +1824,7 @@ let callAuthExchange = ( ~paymentMethodType, ~publishableKey, ~setOptionValue: (PaymentType.options => PaymentType.options) => unit, + ~optLogger, ) => { open Promise open PaymentType @@ -1796,6 +1841,16 @@ let callAuthExchange = ( let headers = [("Content-Type", "application/json"), ("api-key", publishableKey)]->Dict.fromArray + logApi( + ~optLogger, + ~url=uri, + ~apiLogType=Request, + ~eventName=PAYMENT_METHODS_AUTH_EXCHANGE_CALL_INIT, + ~logType=INFO, + ~logCategory=API, + (), + ) + fetchApi( uri, ~method=#POST, @@ -1808,10 +1863,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_CALL, + ~logType=ERROR, + ~logCategory=API, + (), + ) JSON.Encode.null->resolve }) } else { + logApi( + ~optLogger, + ~url=uri, + ~statusCode, + ~apiLogType=Response, + ~eventName=PAYMENT_METHODS_AUTH_EXCHANGE_CALL, + ~logType=INFO, + ~logCategory=API, + (), + ) fetchCustomerPaymentMethodList( ~clientSecret=clientSecret->Option.getOr(""), ~publishableKey, @@ -1840,6 +1916,16 @@ let callAuthExchange = ( } }) ->catch(e => { + logApi( + ~optLogger, + ~url=uri, + ~apiLogType=NoResponse, + ~eventName=PAYMENT_METHODS_AUTH_EXCHANGE_CALL, + ~logType=ERROR, + ~logCategory=API, + ~data={e->formatException}, + (), + ) Console.log2("Unable to retrieve payment_methods auth/exchange because of ", e) JSON.Encode.null->resolve }) diff --git a/src/orca-log-catcher/OrcaLogger.res b/src/orca-log-catcher/OrcaLogger.res index 7242fae97..9ad920b36 100644 --- a/src/orca-log-catcher/OrcaLogger.res +++ b/src/orca-log-catcher/OrcaLogger.res @@ -72,6 +72,11 @@ type eventName = | POLL_STATUS_CALL | COMPLETE_AUTHORIZE_CALL_INIT | COMPLETE_AUTHORIZE_CALL + | PLAID_SDK + | PAYMENT_METHODS_AUTH_EXCHANGE_CALL_INIT + | PAYMENT_METHODS_AUTH_EXCHANGE_CALL + | PAYMENT_METHODS_AUTH_LINK_CALL_INIT + | PAYMENT_METHODS_AUTH_LINK_CALL let eventNameToStrMapper = eventName => { switch eventName { @@ -144,6 +149,11 @@ 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 => "PLAID_SDK" + | PAYMENT_METHODS_AUTH_EXCHANGE_CALL => "PAYMENT_METHODS_AUTH_EXCHANGE_CALL" + | PAYMENT_METHODS_AUTH_LINK_CALL => "PAYMENT_METHODS_AUTH_LINK_CALL" + | PAYMENT_METHODS_AUTH_EXCHANGE_CALL_INIT => "PAYMENT_METHODS_AUTH_EXCHANGE_CALL_INIT" + | PAYMENT_METHODS_AUTH_LINK_CALL_INIT => "PAYMENT_METHODS_AUTH_LINK_CALL_INIT" } } @@ -576,6 +586,7 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta RETRIEVE_CALL, DISPLAY_THREE_DS_SDK, APPLE_PAY_FLOW, + PLAID_SDK, ] arrayOfLogs ->Array.find(log => { @@ -606,7 +617,7 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta let appRenderedTimestamp = events.contents->Dict.get(APP_RENDERED->eventNameToStrMapper) switch appRenderedTimestamp { | Some(float) => currentTimestamp -. float - | _ => -1. + | _ => 0. } } | AUTHENTICATION_CALL @@ -615,6 +626,8 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta | SESSIONS_CALL | PAYMENT_METHODS_CALL | CUSTOMER_PAYMENT_METHODS_CALL + | PAYMENT_METHODS_AUTH_EXCHANGE_CALL + | PAYMENT_METHODS_AUTH_LINK_CALL | CREATE_CUSTOMER_PAYMENT_METHODS_CALL => { let logRequestTimestamp = events.contents->Dict.get(eventName->eventNameToStrMapper ++ "_INIT")