From 8a1e3dd5b9559059f9e7aae4c5a767011dd8a084 Mon Sep 17 00:00:00 2001
From: Jimmy Hardwick <jwhardwick@gmail.com>
Date: Thu, 12 Sep 2024 14:56:10 +1000
Subject: [PATCH] [NO CHANGELOG][Checkout Widget][CM-884]feat: Relay
 WidgetProviderEvent (#2167)

---
 .../postMessageEventTypes.ts                  |  4 ++++
 .../hooks/useWidgetProviderEventRelayer.ts    | 23 +++++++++++++++++++
 .../checkout/views/CheckoutAppIframe.tsx      |  2 ++
 3 files changed, 29 insertions(+)
 create mode 100644 packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetProviderEventRelayer.ts

diff --git a/packages/checkout/sdk/src/postMessageHandler/postMessageEventTypes.ts b/packages/checkout/sdk/src/postMessageHandler/postMessageEventTypes.ts
index f12e2a620a..1b7c5cbbc5 100644
--- a/packages/checkout/sdk/src/postMessageHandler/postMessageEventTypes.ts
+++ b/packages/checkout/sdk/src/postMessageHandler/postMessageEventTypes.ts
@@ -8,6 +8,7 @@ export enum PostMessageHandlerEventType {
   PROVIDER_UPDATED = 'IMTBL_PROVIDER_UPDATED',
   EIP_6963_EVENT = 'IMTBL_EIP_6963_EVENT',
   WIDGET_EVENT = 'IMTBL_CHECKOUT_WIDGET_EVENT',
+  WIDGET_PROVIDER_EVENT = 'IMTBL_WIDGET_PROVIDER_EVENT',
 }
 
 export type WidgetEventDetail<T extends WidgetType> = {
@@ -52,4 +53,7 @@ export type PostMessageData =
   | {
     type: PostMessageHandlerEventType.WIDGET_EVENT;
     payload: PostMessageWidgetEventData;
+  } | {
+    type: PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT;
+    payload: any;
   };
diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetProviderEventRelayer.ts b/packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetProviderEventRelayer.ts
new file mode 100644
index 0000000000..cd3690e93c
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/widgets/checkout/hooks/useWidgetProviderEventRelayer.ts
@@ -0,0 +1,23 @@
+import { PostMessageHandlerEventType } from '@imtbl/checkout-sdk';
+import { useCallback, useEffect } from 'react';
+import { useCheckoutContext } from '../context/CheckoutContextProvider';
+
+export function useWidgetProviderEventRelayer() {
+  const [checkoutState] = useCheckoutContext();
+  const { postMessageHandler } = checkoutState;
+
+  const onWidgetProviderEvent = useCallback(() => {
+    postMessageHandler?.send(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, {});
+  }, [postMessageHandler]);
+
+  useEffect(
+    () => {
+      if (!postMessageHandler) return () => { };
+
+      window.addEventListener(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, onWidgetProviderEvent);
+
+      return () => window.removeEventListener(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, onWidgetProviderEvent);
+    },
+    [postMessageHandler, onWidgetProviderEvent],
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/views/CheckoutAppIframe.tsx b/packages/checkout/widgets-lib/src/widgets/checkout/views/CheckoutAppIframe.tsx
index eb8fc1f922..71e1a6590d 100644
--- a/packages/checkout/widgets-lib/src/widgets/checkout/views/CheckoutAppIframe.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/checkout/views/CheckoutAppIframe.tsx
@@ -21,6 +21,7 @@ import {
   IFRAME_ALLOW_PERMISSIONS,
   IFRAME_INIT_TIMEOUT_MS,
 } from '../utils/config';
+import { useWidgetProviderEventRelayer } from '../hooks/useWidgetProviderEventRelayer';
 
 export interface LoadingHandoverProps {
   text: string;
@@ -43,6 +44,7 @@ export function CheckoutAppIframe() {
   useCheckoutEventsRelayer();
   useEip6963Relayer();
   useProviderRelay();
+  useWidgetProviderEventRelayer();
 
   const loading = !iframeURL || !iframeContentWindow || !initialised;