react-native-unit-components 1.9.1 → 1.10.0

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,39 +1,53 @@
 import React, { useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
 import { WebComponent } from '../../webComponent/WebComponent';
-import { getActivityParams, getActivityScript, injectFiltersChanged, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
+import {
+  getActivityParams,
+  getActivityScript,
+  injectFiltersChanged,
+  injectRefreshEventIfNeeded,
+} from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
-import EventBus from '../../helpers/EventBus';
 import type { UNActivityOnLoadData } from '../../types/shared/activity.types';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
-import { BottomSheetRenderingType, type BottomSheetSlotData, type SlotRendering } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetRenderingType,
+  type BottomSheetSlotData,
+  type SlotRendering,
+} from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { useDispatch } from 'react-redux';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import type { UNActivityComponentPaginationType } from '../../types/shared';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+
 export interface UNActivityComponentProps {
   // inputs
   customerToken: string;
   accountId?: string;
-  queryFilter?: string
+  queryFilter?: string;
 
   // ui
   theme?: string;
   language?: string;
   hideFilterButton?: boolean;
-
+  paginationType?: UNActivityComponentPaginationType;
+  transactionsPerPage?: number;
   // event
   onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
 }
 
 const UNActivityComponent = (props: UNActivityComponentProps) => {
+  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
@@ -45,8 +59,11 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
     injectFiltersChanged(webRef.current, query);
   };
 
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, action: dispatchActivityFiltersChanged });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({
+    busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
+    action: dispatchActivityFiltersChanged,
+  });
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -58,13 +75,13 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
       return;
     }
 
-    if (RESPONSE_KEYS.authorization in response && RESPONSE_KEYS.transactions in response) {
+    if (RESPONSE_KEYS.authorizations in response && RESPONSE_KEYS.transactions in response) {
       // ActivityOnLoadResponse;
       const activityOnLoad: UNOnLoadResponseData<UNActivityOnLoadData> = {
         data: {
-          [RESPONSE_KEYS.authorization]: response[RESPONSE_KEYS.authorization].data,
-          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data
-        }
+          [RESPONSE_KEYS.authorizations]: response[RESPONSE_KEYS.authorizations].data,
+          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data,
+        },
       };
       props.onLoad(activityOnLoad);
       return;
@@ -80,15 +97,15 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.activity,
           componentResourceId: props.accountId,
-          requestRenderingEvent: message.details as RequestRenderingEvent
+          requestRenderingEvent: message.details as RequestRenderingEvent,
         };
 
-        const event = {
+        const data = {
           type: BottomSheetRenderingType.Slot,
-          data: slotData
+          data: slotData,
         } as SlotRendering;
 
-        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:

package/src/components/UNActivityComponent/UNActivityComponent.utils.ts

@@ -7,12 +7,15 @@ import { WebComponentType } from '../../types/internal/webComponent.types';
 export const getActivityParams = (props: UNActivityComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const queryFilterParam = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
-
+  const paginationTypeParam = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
+  const transactionsPerPageParam = props.transactionsPerPage ? `transactions-per-page="${props.transactionsPerPage}"` : '';
   return `
     customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
     ${queryFilterParam}
+    ${paginationTypeParam}
+    ${transactionsPerPageParam}
     style="height: 100%"
   `;
 };

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -4,11 +4,9 @@ import type WebView from 'react-native-webview';
 import { WebComponent } from '../../webComponent/WebComponent';
 import { Dimensions, Linking, View } from 'react-native';
 import BottomSheet from '../../helpers/BottomSheet/BottomSheet';
-import EventBus from '../../helpers/EventBus';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestOpenLinkEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import { CardMessage, CardActivatedEvent, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
   extractCardIdFromComponentParams,
@@ -28,10 +26,21 @@ import type { AccountChangedEvent } from '../../messages/webMessages/accountMess
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { ActivityFiltersChangedEvent, ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from './UNBottomSheetComponent.constants';
-import { BottomSheetRenderingType, BottomSheetSlotData, NativeComponentData, WebComponentData } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetRenderingType,
+  BottomSheetSlotData,
+  NativeComponentData,
+  WebComponentData,
+} from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
-import { BottomSheetNativeMessage, type StartBottomSheetFlowMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import {
+  BottomSheetNativeMessage,
+  type StartBottomSheetFlowMessage,
+} from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { useDispatch } from 'react-redux';
 
 export enum ScrollState {
   /*
@@ -57,6 +66,7 @@ export enum ScrollState {
 }
 
 const UNBottomSheetComponent = () => {
+  const dispatch = useDispatch();
   const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
   const [height, setHeight] = useState(0);
 
@@ -143,8 +153,8 @@ const UNBottomSheetComponent = () => {
     }
   }, [shouldShowComponent, newHeightMessage, isAddToWallet]);
 
-  useListenerToBus({ busEventKey: BottomSheetNativeMessage.START_FLOW, action: startFlow });
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
+  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.START_FLOW, action: startFlow });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
   const defineScrollState = () => {
     const scrollStateForSlot = () => {
@@ -153,7 +163,7 @@ const UNBottomSheetComponent = () => {
         case WebComponentType.account: {
           const accountActionType = getAccountActionType(bottomSheetSlotData.requestRenderingEvent);
           setScrollState(
-            accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable
+            accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable,
           );
           break;
         }
@@ -233,7 +243,7 @@ const UNBottomSheetComponent = () => {
           setBottomSheetSlotData({
             componentResourceId: bottomSheetSlotData?.componentResourceId,
             componentName: bottomSheetSlotData?.componentName,
-            requestRenderingEvent: requestRendering
+            requestRenderingEvent: requestRendering,
           });
 
           // Open the bottom sheet
@@ -242,16 +252,28 @@ const UNBottomSheetComponent = () => {
         break;
       }
       case CardMessage.CARD_ACTIVATED:
-        EventBus.Instance.event(CardMessage.CARD_ACTIVATED, (message.details as CardActivatedEvent).card);
+        dispatch(setEvent({
+          key: CardMessage.CARD_ACTIVATED,
+          data: (message.details as CardActivatedEvent).card,
+        }));
         break;
       case CardMessage.CARD_STATUS_CHANGED:
-        EventBus.Instance.event(CardMessage.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card);
+        dispatch(setEvent({
+          key: CardMessage.CARD_STATUS_CHANGED,
+          data: (message.details as CardStatusChangedEvent).card,
+        }));
         break;
       case AccountMessage.UNIT_ACCOUNT_CHANGED:
-        EventBus.Instance.event(AccountMessage.UNIT_ACCOUNT_CHANGED, (message.details as AccountChangedEvent).account);
+        dispatch(setEvent({
+          key: AccountMessage.UNIT_ACCOUNT_CHANGED,
+          data: (message.details as AccountChangedEvent).account,
+        }));
         break;
       case ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED:
-        EventBus.Instance.event(ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, (message.details as ActivityFiltersChangedEvent));
+        dispatch(setEvent({
+          key: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
+          data: (message.details as ActivityFiltersChangedEvent),
+        }));
         break;
       case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
         handleCloseFlow();
@@ -287,7 +309,10 @@ const UNBottomSheetComponent = () => {
     switch (renderingType) {
       case BottomSheetRenderingType.Slot:
         if (bottomSheetSlotData?.requestRenderingEvent.data.nativeComponent?.includes('action=AddToWallet') && bottomSheetSlotData?.componentResourceId) {
-          return <UNAddToWalletBottomSheetItem renderingType={renderingType} renderingRequest={bottomSheetSlotData.requestRenderingEvent} cardId={bottomSheetSlotData?.componentResourceId} fullScreenHeight={fullScreenHeight} />;
+          return <UNAddToWalletBottomSheetItem renderingType={renderingType}
+            renderingRequest={bottomSheetSlotData.requestRenderingEvent}
+            cardId={bottomSheetSlotData?.componentResourceId}
+            fullScreenHeight={fullScreenHeight} />;
         }
 
         return (
@@ -305,7 +330,8 @@ const UNBottomSheetComponent = () => {
         if (webComponentData?.params?.includes('action=AddToWallet')) {
           const cardId = extractCardIdFromComponentParams(webComponentData);
           if (!cardId) return null;
-          return <UNAddToWalletBottomSheetItem renderingType={renderingType} webComponentData={webComponentData} cardId={cardId} fullScreenHeight={fullScreenHeight} />;
+          return <UNAddToWalletBottomSheetItem renderingType={renderingType} webComponentData={webComponentData}
+            cardId={cardId} fullScreenHeight={fullScreenHeight} />;
         }
         return null;
       case BottomSheetRenderingType.NativeComponent:
@@ -327,8 +353,8 @@ const UNBottomSheetComponent = () => {
         shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
       >
         {isAppActive && renderBottomSheetItem()}
-      </BottomSheet >
-    </View >
+      </BottomSheet>
+    </View>
   );
 };
 

package/src/components/UNBottomSheetComponent/components/UNAddToWalletBottomSheetItem/UNAddToWalletBottomSheetItem.tsx

@@ -12,7 +12,8 @@ import { PresentationMode, WebComponentType } from '../../../../types/internal/w
 import { useCardWallet } from '../../../../helpers/pushProvisioningService/hooks/useCardWallet';
 import { launchStartCardProvisioning } from '../../../../helpers/pushProvisioningService/startProvisioning';
 import type { WebViewMessage } from '../../../../messages/webMessages';
-import EventBus from '../../../../helpers/EventBus';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../../../slices/SharedEventsSlice';
 
 export interface UNAddToWalletBottomSheetItemProps {
   renderingType: BottomSheetRenderingType
@@ -23,6 +24,7 @@ export interface UNAddToWalletBottomSheetItemProps {
 }
 
 export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItemProps) => {
+  const dispatch = useDispatch();
   const styles = getStylesObject();
 
   const webRef = useRef<WebView>(null);
@@ -55,7 +57,10 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
         injectHtmlFullScreenHeight(webRef.current, props.fullScreenHeight);
         break;
       case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
-        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_CLOSE_FLOW, {});
+        dispatch(setEvent({
+          key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
+          data: {},
+        }));
         break;
       default:
         break;

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -3,9 +3,7 @@ import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import EventBus from '../../helpers/EventBus';
 import { WebComponent } from '../../webComponent/WebComponent';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
   getCardParams,
@@ -29,9 +27,10 @@ import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
 import { selectWallet } from '../../slices/pushProvisioningSlice';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
-
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { setEvent } from '../../slices/SharedEventsSlice';
 
 export interface UNCardComponentProps {
   // inputs
@@ -61,6 +60,8 @@ export interface CardRef {
 }
 
 const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
+  const dispatch = useDispatch();
+
   const [height, setHeight] = useState(0);
 
   const webRef = useRef<WebView>(null);
@@ -118,9 +119,9 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     return;
   };
 
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
-  useListenerToBus({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
+  useListenerToEvent({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
 
   const handleMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
@@ -133,12 +134,12 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
           requestRenderingEvent: message.details as RequestRenderingEvent,
         };
 
-        const event = {
+        const data = {
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
 
-        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
         break;
       }
       case PageMessage.PAGE_HEIGHT:
@@ -178,7 +179,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View >
+    </View>
   );
 
 });

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -0,0 +1,119 @@
+import React, { useRef, useState } from 'react';
+import { Dimensions, View } from 'react-native';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { WebComponent } from '../../webComponent/WebComponent';
+
+import type WebView from 'react-native-webview';
+
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { getMultipleCardsParams, getMultipleCardsScript } from './UNMultipleCardsComponent.utils';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import type { UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
+import type {
+  UNCardData,
+  UNError,
+  UNMultipleCardsComponentPaginationType,
+  UNMultipleCardsOnLoadData,
+  UNOnLoadResponse,
+  UNOnLoadResponseData,
+} from '../../types/shared';
+import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+
+const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+
+export interface UNMultipleCardsComponentProps {
+  // inputs
+  customerToken: string;
+
+  // ui
+  paginationType?: UNMultipleCardsComponentPaginationType;
+  cardsPerPage?: number;
+  disableCardClick?: boolean;
+  theme?: string;
+  language?: string;
+  queryFilter?: string;
+  hideTitle?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => void;
+  onCardClicked?: (card: UNCardData) => void;
+}
+
+const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
+  const webRef = useRef<WebView>(null);
+  const [defaultHeight, setDefaultHeight] = useState<number>();
+
+  const cardClicked = (card: UNCardData) => {
+    if (props.onCardClicked) {
+      props.onCardClicked(card);
+    }
+  };
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.cards in response) {
+      // MultipleCardsOnLoadResponse;
+      props.onLoad(response[RESPONSE_KEYS.cards] as UNOnLoadResponseData<UNMultipleCardsOnLoadData>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+        break;
+      }
+      case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED: {
+        cardClicked(message.details as MultipleCardsCardClickedEvent);
+      }
+    }
+  };
+
+  const renderMultipleCardsWebView = () => {
+    return (
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.multipleCards}
+        presentationMode={PresentationMode.Inherit}
+        params={getMultipleCardsParams(props)}
+        script={getMultipleCardsScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        nestedScrollEnabled={true}
+        theme={props.theme}
+        language={props.language}
+      />
+    );
+  };
+
+  if (!defaultHeight) {
+    return renderMultipleCardsWebView();
+  }
+
+  return (
+    <View style={{ height: defaultHeight }}>
+      {renderMultipleCardsWebView()}
+    </View>
+  );
+};
+
+export default withReduxStore<UNMultipleCardsComponentProps>(UNMultipleCardsComponent);

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.utils.ts

@@ -0,0 +1,36 @@
+import type { UNMultipleCardsComponentProps } from './UNMultipleCardsComponent';
+import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+
+export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) => {
+  const paginationType = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
+  const cardsPerPage = props.cardsPerPage ? `cards-per-page="${props.cardsPerPage}"` : '';
+  const queryFilter = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
+  return `
+  customer-token="${props.customerToken}"
+  ${paginationType}
+  ${cardsPerPage}
+  disable-card-click="${props.disableCardClick || false}"
+  ${queryFilter}
+  hide-title="${props.hideTitle || false}"
+  style="height: 100%"
+  `;
+};
+
+const MULTIPLE_CARDS_LISTENERS = {
+  cardClicked: `
+    window.addEventListener("${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `,
+};
+
+export const getMultipleCardsScript = () => {
+  return `
+     ${MULTIPLE_CARDS_LISTENERS.cardClicked}
+  `;
+};

package/src/components/UNMultipleCardsComponent/index.ts

@@ -0,0 +1,3 @@
+export {
+  default as UNMultipleCardsComponent, UNMultipleCardsComponentProps,
+} from './UNMultipleCardsComponent';

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './UNCardComponent';
+export * from './UNMultipleCardsComponent';
 export * from './UNBottomSheetComponent';
 export * from './UNBookPaymentComponent';
 export * from './UNActivityComponent';

package/src/flows/card/UNCardFlows.ts

@@ -1,10 +1,16 @@
-import EventBus from '../../helpers/EventBus';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
-import { BottomSheetRenderingType, type WebComponentData, type WebComponentRendering } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetRenderingType,
+  type WebComponentData,
+  type WebComponentRendering,
+} from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
 
 export class UNCardFlows {
   public static startPushProvisioning = async (cardId: string, customerToken: string) => {
+    const dispatch = useDispatch(); //todo: can we use hook here?
     try {
       const addToWalletComponentData: WebComponentData = {
         type: WebComponentType.cardAction,
@@ -12,12 +18,12 @@ export class UNCardFlows {
         params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
       };
 
-      const event: WebComponentRendering = {
+      const data: WebComponentRendering = {
         type: BottomSheetRenderingType.WebComponent,
         data: addToWalletComponentData,
       };
 
-      EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+      dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
     } catch (error) {
       console.error(error);
     }

package/src/helpers/pushProvisioningService/helpers.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { UNNativePromiseReject, UNVPError, UNVPErrorType } from './types';
+
+export const isUNVPError = (error: any): error is UNVPError => {
+  return 'code' in error &&
+    'description' in error &&
+    'type' in error &&
+    isUNVPErrorType(error.type) &&
+    'correlationId' in error;
+};
+
+const isUNVPErrorType = (type: any): type is UNVPErrorType => {
+  return Object.values(UNVPErrorType).includes(type);
+};
+
+export const isUNNativePromiseReject = (error: any): error is UNNativePromiseReject => {
+  return 'code' in error && 'message' in error;
+};
+
+export const promiseRejectToUNVPErrorType = (error: any): UNVPErrorType | null => {
+  // validate the shape of a promise reject we get from iOS/Android native
+  if (!isUNNativePromiseReject(error)) {
+    return null;
+  }
+  const parsedError = JSON.parse(error.message);
+  // validate the shape of an error we get from VDE SDK
+  if (!isUNVPError(parsedError)) {
+    return null;
+  }
+  return parsedError.type;
+};