react-native-unit-components 1.8.1 → 1.10.0

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -3,19 +3,31 @@ 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 type { WebViewMessage } from '../../messages/webMessages';
-import { getAccountParams, getAccountScript, injectOpenActionsMenuScript, injectRefreshEventIfNeeded, injectRequestAccountActionScript } from './UNAccountComponent.utils';
+import {
+  getAccountParams,
+  getAccountScript,
+  injectOpenActionsMenuScript,
+  injectRefreshEventIfNeeded,
+  injectRequestAccountActionScript,
+} from './UNAccountComponent.utils';
 import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { UNAccountData } from '../../types/shared/account.types';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import type { UNAccountMenuAction } from '../../types/shared';
-import { BottomSheetRenderingType, SlotRendering, type BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetRenderingType,
+  SlotRendering,
+  type BottomSheetSlotData,
+} from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 
 export interface UNAccountComponentProps {
   // inputs
@@ -38,12 +50,14 @@ export interface UNAccountRef {
   openAction: (action: UNAccountMenuAction) => void;
 }
 
-export enum AccountAction {
+export enum UNAccountAction {
   List = 'account-list',
   Menu = 'account-menu'
 }
 
-export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
+const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
+
+  const dispatch = useDispatch();
   const [height, setHeight] = useState(0);
 
   const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
@@ -77,9 +91,8 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
     console.error('On Load Error: unexpected response type.');
     return;
   };
-
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useEffect(() => {
     injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
@@ -91,7 +104,7 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
     },
     openAction(action: UNAccountMenuAction) {
       injectRequestAccountActionScript(webRef.current, action);
-    }
+    },
   }));
 
   const handleMessage = (message: WebViewMessage) => {
@@ -103,15 +116,16 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.account,
           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 PageMessage.PAGE_HEIGHT:
@@ -136,3 +150,5 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
     </View>
   );
 });
+
+export default withReduxStoreAndRefForwarding<UNAccountComponentProps, UNAccountRef>(UNAccountComponent);

package/src/components/UNAccountComponent/UNAccountComponent.utils.ts

@@ -1,4 +1,4 @@
-import { AccountAction, UNAccountComponentProps } from './UNAccountComponent';
+import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from 'src/types/shared';
@@ -38,5 +38,5 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
 };
 
 export const getAccountActionType = (requestRendering: RequestRenderingEvent) => {
-  return requestRendering.data.nativeComponent.includes(AccountAction.List) ? AccountAction.List : AccountAction.Menu;
+  return requestRendering.data.nativeComponent.includes(UNAccountAction.List) ? UNAccountAction.List : UNAccountAction.Menu;
 };

package/src/components/UNAccountComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNAccountComponent, UNAccountComponentProps, UNAccountRef } from './UNAccountComponent';

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,38 +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;
 }
 
-export const UNActivityComponent = (props: UNActivityComponentProps) => {
+const UNActivityComponent = (props: UNActivityComponentProps) => {
+  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
@@ -44,8 +59,11 @@ export 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) {
@@ -57,13 +75,13 @@ export 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;
@@ -79,15 +97,15 @@ export 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:
@@ -127,3 +145,5 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
     </View>
   );
 };
+
+export default withReduxStore<UNActivityComponentProps>(UNActivityComponent);

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/UNActivityComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNActivityComponent, UNActivityComponentProps } from './UNActivityComponent';

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -10,6 +10,7 @@ import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
 
 export interface UNBookPaymentComponentProps {
   //inputs
@@ -29,7 +30,7 @@ export interface UNBookPaymentComponentProps {
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
 }
 
-export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
+const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
@@ -99,3 +100,5 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     </View>
   );
 };
+
+export default withReduxStore<UNBookPaymentComponentProps>(UNBookPaymentComponent);

package/src/components/UNBookPaymentComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNBookPaymentComponent, UNBookPaymentComponentProps } from './UNBookPaymentComponent';

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,
@@ -23,14 +21,26 @@ import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { UNAddToWalletBottomSheetItem } from './components/UNAddToWalletBottomSheetItem';
 import { getAccountActionType } from '../UNAccountComponent/UNAccountComponent.utils';
-import { AccountAction } from '../UNAccountComponent/UNAccountComponent';
+import { UNAccountAction } from '../UNAccountComponent/UNAccountComponent';
 import type { AccountChangedEvent } from '../../messages/webMessages/accountMessage';
 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 {
   /*
@@ -55,7 +65,8 @@ export enum ScrollState {
   onlyBottomSheet = 'onlyBottomSheet',
 }
 
-export const UNBottomSheetComponent = () => {
+const UNBottomSheetComponent = () => {
+  const dispatch = useDispatch();
   const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
   const [height, setHeight] = useState(0);
 
@@ -142,8 +153,8 @@ export 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 = () => {
@@ -152,7 +163,7 @@ export const UNBottomSheetComponent = () => {
         case WebComponentType.account: {
           const accountActionType = getAccountActionType(bottomSheetSlotData.requestRenderingEvent);
           setScrollState(
-            accountActionType === AccountAction.List ? ScrollState.onTop : ScrollState.unScrollable
+            accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable,
           );
           break;
         }
@@ -232,7 +243,7 @@ export const UNBottomSheetComponent = () => {
           setBottomSheetSlotData({
             componentResourceId: bottomSheetSlotData?.componentResourceId,
             componentName: bottomSheetSlotData?.componentName,
-            requestRenderingEvent: requestRendering
+            requestRenderingEvent: requestRendering,
           });
 
           // Open the bottom sheet
@@ -241,16 +252,28 @@ export 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();
@@ -286,7 +309,10 @@ export 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 (
@@ -304,7 +330,8 @@ export 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:
@@ -313,22 +340,22 @@ export const UNBottomSheetComponent = () => {
   };
 
   return (
-    <>
-      <View
-        pointerEvents={isBottomSheetActive ? undefined : 'none'}
-        style={styles.container}
+    <View
+      pointerEvents={isBottomSheetActive ? undefined : 'none'}
+      style={styles.container}
+    >
+      <BottomSheet
+        isOpen={isBottomSheetActive}
+        height={height}
+        onClose={() => setIsBottomSheetActive(false)}
+        onOpen={() => setIsBottomSheetActive(true)}
+        handleWebViewScroll={() => handleWebViewScroll()}
+        shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
       >
-        <BottomSheet
-          isOpen={isBottomSheetActive}
-          height={height}
-          onClose={() => setIsBottomSheetActive(false)}
-          onOpen={() => setIsBottomSheetActive(true)}
-          handleWebViewScroll={() => handleWebViewScroll()}
-          shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
-        >
-          {isAppActive && renderBottomSheetItem()}
-        </BottomSheet >
-      </View >
-    </>
+        {isAppActive && renderBottomSheetItem()}
+      </BottomSheet>
+    </View>
   );
 };
+
+export default withReduxStore(UNBottomSheetComponent);

package/src/components/UNBottomSheetComponent/components/{UNAddToWalletBottomSheetItem.tsx → UNAddToWalletBottomSheetItem/UNAddToWalletBottomSheetItem.tsx}

@@ -1,18 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import type WebView from 'react-native-webview';
-import { WebComponent } from '../../../webComponent/WebComponent';
-import { injectHtmlFullScreenHeight, renderingBottomSheetRequest } from '../UNBottomSheetComponent.utils';
+import { WebComponent } from '../../../../webComponent/WebComponent';
+import { injectHtmlFullScreenHeight, renderingBottomSheetRequest } from '../../UNBottomSheetComponent.utils';
 import { getStylesObject } from './UNAddToWalletBottomSheetItem.styles';
 import { ActivityIndicator } from 'react-native';
-import { UnitMessage, type RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
-import UnitAddToWalletButtonView from '../../../nativeComponent/UnitAddToWalletButton';
-import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
-import { BottomSheetRenderingType, WebComponentData } from '../../../types/internal/bottomSheet.types';
-import { PresentationMode, WebComponentType } from '../../../types/internal/webComponent.types';
-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 { UnitMessage, type RequestRenderingEvent } from '../../../../messages/webMessages/unitMessages';
+import UnitAddToWalletButtonView from '../../../../nativeComponent/UnitAddToWalletButton';
+import { UNCardAddToWalletStatus } from '../../../../types/shared/wallet.types';
+import { BottomSheetRenderingType, WebComponentData } from '../../../../types/internal/bottomSheet.types';
+import { PresentationMode, WebComponentType } from '../../../../types/internal/webComponent.types';
+import { useCardWallet } from '../../../../helpers/pushProvisioningService/hooks/useCardWallet';
+import { launchStartCardProvisioning } from '../../../../helpers/pushProvisioningService/startProvisioning';
+import type { WebViewMessage } from '../../../../messages/webMessages';
+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);
@@ -48,14 +50,17 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
     launchStartCardProvisioning(currentUNWallet);
   };
 
-  const handleWebComponentMessage  = (message: WebViewMessage) => {
+  const handleWebComponentMessage = (message: WebViewMessage) => {
     if (!message || !message.type) return;
     switch (message.type) {
       case UnitMessage.UNIT_ON_LOAD:
         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/UNBottomSheetComponent/components/UNAddToWalletBottomSheetItem/index.ts

@@ -0,0 +1 @@
+export * from './UNAddToWalletBottomSheetItem';

package/src/components/UNBottomSheetComponent/components/index.ts

@@ -0,0 +1 @@
+export * from './UNAddToWalletBottomSheetItem';

package/src/components/UNBottomSheetComponent/index.ts

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