From 514c7da3d35e0f1a77ced8ece4793626a3331257 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Thu, 7 Nov 2024 17:09:54 +0530
Subject: [PATCH] fix: multiple iframe resolve

---
 src/Payments/PazeButton.res   |  5 +++++
 src/Payments/PazeWallet.res   |  2 ++
 src/Types/ApplePayTypes.res   | 16 ++++++++++++++++
 src/hyper-loader/Elements.res | 17 ++++++++---------
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/Payments/PazeButton.res b/src/Payments/PazeButton.res
index 411beee9..75545382 100644
--- a/src/Payments/PazeButton.res
+++ b/src/Payments/PazeButton.res
@@ -2,6 +2,10 @@
 let make = (~token: SessionsType.token) => {
   open Utils
   open RecoilAtoms
+
+  let url = RescriptReactRouter.useUrl()
+  let componentName = CardUtils.getQueryParamsDictforKey(url.search, "componentName")
+
   let {iframeId, publishableKey, clientSecret} = Recoil.useRecoilValueFromAtom(keys)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let options = Recoil.useRecoilValueFromAtom(optionAtom)
@@ -26,6 +30,7 @@ let make = (~token: SessionsType.token) => {
       (
         "metadata",
         [
+          ("componentName", componentName->JSON.Encode.string),
           ("wallet", (token.walletName :> string)->JSON.Encode.string),
           ("clientId", token.clientId->JSON.Encode.string),
           ("clientName", token.clientName->JSON.Encode.string),
diff --git a/src/Payments/PazeWallet.res b/src/Payments/PazeWallet.res
index f815f2ba..dff04250 100644
--- a/src/Payments/PazeWallet.res
+++ b/src/Payments/PazeWallet.res
@@ -21,6 +21,7 @@ let make = () => {
         let emailAddress = metaData->getString("emailAddress", "")
         let transactionAmount = metaData->getString("transactionAmount", "")
         let transactionCurrencyCode = metaData->getString("transactionCurrencyCode", "")
+        let componentName = metaData->getString("componentName", "")
 
         let mountPazeSDK = () => {
           let pazeScriptURL =
@@ -100,6 +101,7 @@ let make = () => {
                 ("fullscreen", false->JSON.Encode.bool),
                 ("isPaze", true->JSON.Encode.bool),
                 ("flowExited", "stop"->JSON.Encode.string),
+                ("componentName", componentName->JSON.Encode.string),
               ])
               resolve()
             }
diff --git a/src/Types/ApplePayTypes.res b/src/Types/ApplePayTypes.res
index 983f4962..f8e07330 100644
--- a/src/Types/ApplePayTypes.res
+++ b/src/Types/ApplePayTypes.res
@@ -203,3 +203,19 @@ let handleApplePayIframePostMessage = (msg, componentName, mountedIframeRef) =>
     mountedIframeRef->Window.iframePostMessage(msg)
   }
 }
+
+let handlePazeIframePostMessage = (msg, componentName, eventSource) => {
+  let isPazePresent = ref(false)
+  let iframes = Window.querySelectorAll("iframe")
+  iframes->Array.forEach(iframe => {
+    let iframeSrc = iframe->Window.getAttribute("src")->Option.getOr("")
+    if iframeSrc->String.includes(`componentName=${componentName}`) {
+      iframe->Js.Nullable.return->Window.iframePostMessage(msg)
+      isPazePresent := true
+    }
+  })
+
+  if !isPazePresent.contents {
+    eventSource->Window.sendPostMessage(msg)
+  }
+}
diff --git a/src/hyper-loader/Elements.res b/src/hyper-loader/Elements.res
index 545b2bf7..c850cab3 100644
--- a/src/hyper-loader/Elements.res
+++ b/src/hyper-loader/Elements.res
@@ -129,14 +129,13 @@ let make = (
       }
     }
 
-    let onPazeCallback = mountedIframeRef => {
-      (ev: Types.event) => {
-        let json = ev.data->Identity.anyTypeToJson
-        let dict = json->getDictFromJson
-        let isPazeExist = dict->getBool("isPaze", false)
-        if isPazeExist {
-          mountedIframeRef->Window.iframePostMessage([("data", json)]->Dict.fromArray)
-        }
+    let onPazeCallback = (event: Types.event) => {
+      let json = event.data->Identity.anyTypeToJson
+      let dict = json->getDictFromJson
+      if dict->getBool("isPaze", false) {
+        let componentName = dict->getString("componentName", "payment")
+        let msg = [("data", json)]->Dict.fromArray
+        handlePazeIframePostMessage(msg, componentName, event.source)
       }
     }
 
@@ -149,7 +148,7 @@ let make = (
           isTaxCalculationEnabled.contents =
             dict->getDictFromDict("response")->getBool("is_tax_calculation_enabled", false)
           addSmartEventListener("message", onPlaidCallback(mountedIframeRef), "onPlaidCallback")
-          addSmartEventListener("message", onPazeCallback(mountedIframeRef), "onPazeCallback")
+          addSmartEventListener("message", onPazeCallback, "onPazeCallback")
 
           let json = dict->getJsonFromDict("response", JSON.Encode.null)
           let isApplePayPresent = PaymentMethodsRecord.getPaymentMethodTypeFromList(