From 7c87c0c4cba1c321840531c40b5b51b60a21b090 Mon Sep 17 00:00:00 2001 From: Shiva Nandan Date: Wed, 6 Nov 2024 15:25:52 +0530 Subject: [PATCH 1/2] refactor: refactor PreMountLoader (#583) Co-authored-by: Pritish Budhiraja --- src/Payments/PreMountLoader.res | 233 ++++++++++++++------------------ src/Utilities/Utils.res | 1 + 2 files changed, 104 insertions(+), 130 deletions(-) diff --git a/src/Payments/PreMountLoader.res b/src/Payments/PreMountLoader.res index 8f976ca4..1244153f 100644 --- a/src/Payments/PreMountLoader.res +++ b/src/Payments/PreMountLoader.res @@ -1,64 +1,60 @@ -@react.component -let make = ( - ~sessionId, - ~publishableKey, - ~clientSecret, - ~endpoint, - ~ephemeralKey, - ~hyperComponentName: Types.hyperComponentName, - ~merchantHostname, - ~customPodUri, -) => { - open Utils - let (paymentMethodsResponseSent, setPaymentMethodsResponseSent) = React.useState(_ => false) - let ( - customerPaymentMethodsResponseSent, - setCustomerPaymentMethodsResponseSent, - ) = React.useState(_ => false) - let (savedPaymentMethodsResponseSent, setSavedPaymentMethodsResponseSent) = React.useState(_ => - false - ) - let (sessionTokensResponseSent, setSessionTokensResponseSent) = React.useState(_ => false) - let logger = HyperLogger.make( - ~sessionId, - ~source=Loader, - ~merchantId=publishableKey, - ~clientSecret, - ) +let sendPromiseData = (promise, key) => { + open Promise + promise + ->then(res => resolve(res)) + ->catch(_ => resolve(JSON.Encode.null)) + ->thenResolve(response => { + Utils.messageParentWindow([("response", response), ("data", key->JSON.Encode.string)]) + }) + ->ignore +} - let ( - paymentMethodsResponse, - customerPaymentMethodsResponse, - sessionTokensResponse, - savedPaymentMethodsResponse, - ) = React.useMemo0(() => { - let paymentMethodsResponse = switch hyperComponentName { - | Elements => - PaymentHelpers.fetchPaymentMethodList( +let useMessageHandler = getPromisesAndMessageHandler => { + React.useEffect0(() => { + let (promises, messageHandler) = getPromisesAndMessageHandler() + + open Promise + Promise.all(promises) + ->thenResolve(_ => { + Utils.messageParentWindow([("preMountLoaderIframeUnMount", true->JSON.Encode.bool)]) + Window.removeEventListener("message", messageHandler) + }) + ->ignore + + Utils.messageParentWindow([("preMountLoaderIframeMountedCallback", true->JSON.Encode.bool)]) + Window.addEventListener("message", messageHandler) + Some(() => Window.removeEventListener("message", messageHandler)) + }) +} + +module PreMountLoaderForElements = { + @react.component + let make = ( + ~logger, + ~publishableKey, + ~clientSecret, + ~endpoint, + ~merchantHostname, + ~customPodUri, + ) => { + useMessageHandler(() => { + let paymentMethodsPromise = PaymentHelpers.fetchPaymentMethodList( ~clientSecret, ~publishableKey, ~logger, ~customPodUri, ~endpoint, ) - | _ => JSON.Encode.null->Promise.resolve - } - let customerPaymentMethodsResponse = switch hyperComponentName { - | Elements => - PaymentHelpers.fetchCustomerPaymentMethodList( + let customerPaymentMethodsPromise = PaymentHelpers.fetchCustomerPaymentMethodList( ~clientSecret, ~publishableKey, ~optLogger=Some(logger), ~customPodUri, ~endpoint, ) - | _ => JSON.Encode.null->Promise.resolve - } - let sessionTokensResponse = switch hyperComponentName { - | Elements => - PaymentHelpers.fetchSessions( + let sessionTokensPromise = PaymentHelpers.fetchSessions( ~clientSecret, ~publishableKey, ~optLogger=Some(logger), @@ -66,101 +62,78 @@ let make = ( ~endpoint, ~merchantHostname, ) - | _ => JSON.Encode.null->Promise.resolve - } - let savedPaymentMethodsResponse = switch hyperComponentName { - | PaymentMethodsManagementElements => - PaymentHelpers.fetchSavedPaymentMethodList( + let messageHandler = (ev: Window.event) => { + open Utils + let dict = ev.data->safeParse->getDictFromJson + if dict->isKeyPresentInDict("sendPaymentMethodsResponse") { + paymentMethodsPromise->sendPromiseData("payment_methods") + } else if dict->isKeyPresentInDict("sendCustomerPaymentMethodsResponse") { + customerPaymentMethodsPromise->sendPromiseData("customer_payment_methods") + } else if dict->isKeyPresentInDict("sendSessionTokensResponse") { + sessionTokensPromise->sendPromiseData("session_tokens") + } + } + + let promises = [paymentMethodsPromise, customerPaymentMethodsPromise, sessionTokensPromise] + (promises, messageHandler) + }) + + React.null + } +} + +module PreMountLoaderForPMMElements = { + @react.component + let make = (~logger, ~endpoint, ~ephemeralKey, ~customPodUri) => { + useMessageHandler(() => { + let savedPaymentMethodsPromise = PaymentHelpers.fetchSavedPaymentMethodList( ~ephemeralKey, ~optLogger=Some(logger), ~customPodUri, ~endpoint, ) - | _ => JSON.Encode.null->Promise.resolve - } - ( - paymentMethodsResponse, - customerPaymentMethodsResponse, - sessionTokensResponse, - savedPaymentMethodsResponse, - ) - }) - - let sendPromiseData = (promise, key) => { - open Promise - promise - ->then(res => { - messageParentWindow([("response", res), ("data", key->JSON.Encode.string)]) - switch key { - | "payment_methods" => setPaymentMethodsResponseSent(_ => true) - | "session_tokens" => setSessionTokensResponseSent(_ => true) - | "customer_payment_methods" => setCustomerPaymentMethodsResponseSent(_ => true) - | "saved_payment_methods" => setSavedPaymentMethodsResponseSent(_ => true) - | _ => () + let messageHandler = (ev: Window.event) => { + open Utils + let dict = ev.data->safeParse->getDictFromJson + if dict->isKeyPresentInDict("sendSavedPaymentMethodsResponse") { + savedPaymentMethodsPromise->sendPromiseData("saved_payment_methods") + } } - resolve() - }) - ->catch(_err => { - messageParentWindow([("response", JSON.Encode.null), ("data", key->JSON.Encode.string)]) - resolve() + + let promises = [savedPaymentMethodsPromise] + (promises, messageHandler) }) - ->ignore - } - let handle = (ev: Window.event) => { - let json = ev.data->safeParse - let dict = json->Utils.getDictFromJson - if dict->Dict.get("sendPaymentMethodsResponse")->Option.isSome { - paymentMethodsResponse->sendPromiseData("payment_methods") - } else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Option.isSome { - customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods") - } else if dict->Dict.get("sendSessionTokensResponse")->Option.isSome { - sessionTokensResponse->sendPromiseData("session_tokens") - } else if dict->Dict.get("sendSavedPaymentMethodsResponse")->Belt.Option.isSome { - savedPaymentMethodsResponse->sendPromiseData("saved_payment_methods") - } + React.null } +} - React.useEffect0(() => { - Window.addEventListener("message", handle) - messageParentWindow([("preMountLoaderIframeMountedCallback", true->JSON.Encode.bool)]) - Some( - () => { - Window.removeEventListener("message", handle) - }, - ) - }) - - React.useEffect4(() => { - let handleUnmount = () => { - messageParentWindow([("preMountLoaderIframeUnMount", true->JSON.Encode.bool)]) - Window.removeEventListener("message", handle) - } - - switch hyperComponentName { - | Elements => - if ( - paymentMethodsResponseSent && - customerPaymentMethodsResponseSent && - sessionTokensResponseSent - ) { - handleUnmount() - } - | PaymentMethodsManagementElements => - if savedPaymentMethodsResponseSent { - handleUnmount() - } - } - - None - }, ( - paymentMethodsResponseSent, - customerPaymentMethodsResponseSent, - sessionTokensResponseSent, - savedPaymentMethodsResponseSent, - )) +@react.component +let make = ( + ~sessionId, + ~publishableKey, + ~clientSecret, + ~endpoint, + ~ephemeralKey, + ~hyperComponentName: Types.hyperComponentName, + ~merchantHostname, + ~customPodUri, +) => { + let logger = HyperLogger.make( + ~sessionId, + ~source=Loader, + ~merchantId=publishableKey, + ~clientSecret, + ) - React.null + switch hyperComponentName { + | Elements => + + | PaymentMethodsManagementElements => + + } } diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res index 50f09d97..b839a278 100644 --- a/src/Utilities/Utils.res +++ b/src/Utilities/Utils.res @@ -1419,6 +1419,7 @@ let getFirstAndLastNameFromFullName = fullName => { (firstName, lastNameJson) } +let isKeyPresentInDict = (dict, key) => dict->Dict.get(key)->Option.isSome let checkIsTestCardWildcard = val => ["1111222233334444"]->Array.includes(val) let minorUnitToString = val => (val->Int.toFloat /. 100.)->Float.toString From 49688759a872c1d347ac7ee98441b469daea4ac1 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 6 Nov 2024 09:57:43 +0000 Subject: [PATCH 2/2] chore(release): 0.99.6 [skip ci] ## [0.99.6](https://github.com/juspay/hyperswitch-web/compare/v0.99.5...v0.99.6) (2024-11-06) --- CHANGELOG.md | 2 ++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b311c1fe..6d4f590e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +## [0.99.6](https://github.com/juspay/hyperswitch-web/compare/v0.99.5...v0.99.6) (2024-11-06) + ## [0.99.5](https://github.com/juspay/hyperswitch-web/compare/v0.99.4...v0.99.5) (2024-11-06) ## [0.99.4](https://github.com/juspay/hyperswitch-web/compare/v0.99.3...v0.99.4) (2024-11-05) diff --git a/package-lock.json b/package-lock.json index facd283d..89bb5442 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "orca-payment-page", - "version": "0.99.5", + "version": "0.99.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "orca-payment-page", - "version": "0.99.5", + "version": "0.99.6", "hasInstallScript": true, "dependencies": { "@glennsl/rescript-fetch": "^0.2.0", diff --git a/package.json b/package.json index e87738c5..bf9ad4f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "orca-payment-page", - "version": "0.99.5", + "version": "0.99.6", "main": "index.js", "private": true, "dependencies": {