[NO CHANGELOG][Checkout Widget][CM-884]feat: Relay WidgetProviderEvent (

#2167)

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;
   };

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],
+  );
+}

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;