react-native-unit-components 2.2.0 → 3.0.0

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -11,11 +11,7 @@ import {
   View,
 } from 'react-native';
 import { CloseIcon } from '../../assets/images';
-import {
-  androidStatusBarHeight,
-  fullScreenHeight, isAndroid10AndAbove,
-  statusBarHeight,
-} from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { useSafeAreaDimensions } from '../../hooks/useSafeAreaDimensions';
 import { getStylesObject } from './BottomSheet.styles';
 import { useIsBackFromLongBackground } from '../../hooks/useAppStateListener';
 import { BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
@@ -43,6 +39,9 @@ const BottomSheet = (props: BottomSheetProps) => {
   const styles = getStylesObject(fadeAnim);
   const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+  const { insets, fullScreenHeight, isAndroid10AndAbove, isEdgeToEdgeActive } = useSafeAreaDimensions();
+  // Android 15+ (API 35) enforces edge-to-edge, so marginTop calculation differs
+  const isAndroid15AndAbove = Platform.OS === 'android' && Platform.Version >= 35;
 
   const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);
 
@@ -204,11 +203,13 @@ const BottomSheet = (props: BottomSheetProps) => {
           borderTopLeftRadius: isModal ? 0 : styles.container.borderTopLeftRadius,
           borderTopRightRadius: isModal ? 0 : styles.container.borderTopRightRadius,
           height: props.sliderMaxHeight,
-          marginTop: fullScreenHeight - props.sliderMaxHeight - ((!isModal && isAndroid10AndAbove) ? androidStatusBarHeight : 0),
+          // Android 15+ (edge-to-edge): fullScreenHeight is already the full screen, no adjustment needed
+          // Android 10-14: fullScreenHeight includes status bar, but view starts below it, so subtract insets.top
+          marginTop: isModal ? 0 : fullScreenHeight - props.sliderMaxHeight - (isAndroid10AndAbove && !isAndroid15AndAbove ? insets.top : 0),
           transform: [
             { translateY: panelHeightValue },
           ],
-          paddingTop: Platform.OS === 'ios' && isModal ? statusBarHeight : 0,
+          paddingTop: isModal && (Platform.OS === 'ios' || isEdgeToEdgeActive) ? insets.top : 0,
         }}
       >
         <View

package/src/helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView.tsx

@@ -1,6 +1,6 @@
-import { KeyboardAvoidingView, Platform, ViewStyle } from 'react-native';
+import { KeyboardAvoidingView, Platform, StatusBar, ViewStyle } from 'react-native';
 import React from 'react';
-import { statusBarHeight } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 interface UNKeyboardAvoidingViewProps {
   children: React.ReactNode,
@@ -8,12 +8,15 @@ interface UNKeyboardAvoidingViewProps {
   keyboardVerticalOffset?: number,
 }
 
+const topInset = initialWindowMetrics?.insets.top ?? 0;
+const defaultOffset = topInset > 0 ? topInset : (StatusBar.currentHeight || 0);
+
 const UNKeyboardAvoidingView = ({ children, style, keyboardVerticalOffset }: UNKeyboardAvoidingViewProps) => {
   return (
     <KeyboardAvoidingView
       style={style ?? { height: '100%' }}
       behavior="padding"
-      keyboardVerticalOffset={keyboardVerticalOffset ?? statusBarHeight}
+      keyboardVerticalOffset={keyboardVerticalOffset ?? defaultOffset}
       enabled={Platform.OS === 'android'}
     >
       {children}
@@ -21,4 +24,4 @@ const UNKeyboardAvoidingView = ({ children, style, keyboardVerticalOffset }: UNK
   );
 };
 
-export default UNKeyboardAvoidingView;
+export default UNKeyboardAvoidingView;

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -24,7 +24,6 @@ export const useCardWallet = (cardId: string) => {
   const isRecoveringSignedNonceRef = useRef<boolean>(false);
   const customerToken = useSelector((state: RootState) => state.configuration.customerToken);
 
-
   const shouldRecoverVPSDKForError = (errorType: UNVPErrorType) => {
     const recoveringTypes = [UNVPErrorType.PayloadDecryptionFailed, UNVPErrorType.SessionExpired, UNVPErrorType.InvalidNonce];
     return recoveringTypes.includes(errorType);

package/src/hooks/useEventListener.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import { eventBus, type EventMap } from '../utils/eventBus';
+
+type EventListener<K extends keyof EventMap> = {
+  busEventKey: K;
+  action: (data: EventMap[K]) => void;
+};
+
+/**
+ * Hook to listen to events from the EventBus
+ * Automatically subscribes on mount and unsubscribes on unmount
+ */
+export const useEventListener = <K extends keyof EventMap>(listener: EventListener<K>) => {
+  const actionRef = useRef(listener.action);
+
+  // Keep action ref up to date
+  useEffect(() => {
+    actionRef.current = listener.action;
+  }, [listener.action]);
+
+  useEffect(() => {
+    // Subscribe to the event
+    const unsubscribe = eventBus.on(listener.busEventKey, (data) => {
+      actionRef.current(data);
+    });
+
+    // Cleanup: unsubscribe when component unmounts
+    return unsubscribe;
+  }, [listener.busEventKey]);
+};

package/src/hooks/useSafeAreaDimensions.ts

@@ -0,0 +1,48 @@
+import { Dimensions, Platform } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+
+const isAndroid = Platform.OS === 'android';
+const isAndroid10To14 = isAndroid && Platform.Version >= 29 && Platform.Version < 35;
+const isAndroid15AndAbove = isAndroid && Platform.Version >= 35;
+
+const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+const windowHeight = Dimensions.get('window').height;
+const screenHeight = Dimensions.get('screen').height;
+
+// Detect edge-to-edge by comparing window to screen height
+// Edge-to-edge ON: windowHeight ≈ screenHeight | OFF: windowHeight < screenHeight
+const heightDifference = Math.abs(screenHeight - windowHeight);
+const isEdgeToEdgeActive = isAndroid15AndAbove && heightDifference < 10;
+
+const effectiveBottomInset = isEdgeToEdgeActive ? insets.bottom : 0;
+
+const calculateFullScreenHeight = (): number => {
+  if (isAndroid15AndAbove) {
+    return isEdgeToEdgeActive ? screenHeight : windowHeight;
+  } else if (isAndroid10To14) {
+    return windowHeight + insets.top;
+  }
+  return windowHeight;
+};
+
+const fullScreenHeight = calculateFullScreenHeight();
+
+const calculateContentHeight = (): number => {
+  if (isAndroid15AndAbove && !isEdgeToEdgeActive) {
+    return windowHeight;
+  }
+  return fullScreenHeight - insets.top;
+};
+
+const contentHeight = calculateContentHeight();
+
+export const useSafeAreaDimensions = () => {
+  return {
+    insets,
+    fullScreenHeight,
+    contentHeight,
+    isAndroid10AndAbove: isAndroid && Platform.Version >= 29,
+    isEdgeToEdgeActive,
+    effectiveBottomInset,
+  };
+};

package/src/messages/webMessages/checkPaymentMessage.ts

@@ -0,0 +1,8 @@
+import { UNPayment } from '../../types/shared';
+
+export interface PaymentCreatedEvent {
+  data: UNPayment
+}
+
+export type CheckPaymentEvent =
+  | PaymentCreatedEvent

package/src/messages/webMessages/index.ts

@@ -6,6 +6,7 @@ import type { PaymentMessage } from './paymentsMessage';
 import type { UnitEvent, UnitComponentsMessage, MultiFactorAuthenticationFinishedEvent } from './unitComponentsMessages';
 import type { AccountEvent, AccountMessage } from './accountMessage';
 import type { CheckEvent, CheckMessage } from './checkMessage';
+import type { CheckPaymentEvent } from './checkPaymentMessage';
 import type { ActivityEvent, ActivityMessage } from './activityMessage';
 import type { MultipleCardsEvent, MultipleCardsMessage } from './multipleCardsMessage';
 import { PlaidEvent, PlaidMessage } from './plaidMessages';
@@ -36,6 +37,7 @@ type WebViewEvent =
   | ACHEvent
   | AccountEvent
   | CheckEvent
+  | CheckPaymentEvent
   | ActivityEvent
   | PlaidEvent
   | PayeeManagementEvent

package/src/messages/webMessages/onLoadMessage.ts

@@ -45,7 +45,7 @@ export type ACHOnLoadResponse = {
 
 export type ActivityOnLoadResponse = {
   [RESPONSE_KEYS.authorizations]: UNComponentsOnLoadResponseData<[UNAuthorization]>,
-  [RESPONSE_KEYS.transactions]: UNComponentsOnLoadResponseData<[UNTransaction]>
+  [RESPONSE_KEYS.transactions]?: UNComponentsOnLoadResponseData<[UNTransaction]>
 }
 
 export type PayeeManagementOnLoadResponse = {

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.tsx

@@ -6,7 +6,6 @@ import { PresentationMode, WebComponentType } from '../../../types/internal/webC
 import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
 import UnitAddToWalletButtonView from '../UnitAddToWalletButtonNativeComponent';
 import WebView from 'react-native-webview';
-import { useDispatch } from 'react-redux';
 import {
   getStylesObject,
 } from './UNAddToWalletBottomSheetItem.styles';
@@ -15,7 +14,7 @@ import { getAddToWalletParams, getAddToWalletWindowParams } from './UNAddToWalle
 import { WebViewMessage } from '../../../messages/webMessages';
 import { UnitComponentsMessage } from '../../../messages/webMessages/unitComponentsMessages';
 import { injectHtmlFullScreenHeight } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.utils';
-import { setEvent } from '../../../slices/SharedEventsSlice';
+import { eventBus } from '../../../utils/eventBus';
 import {
   overFullScreenHeight,
 } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
@@ -33,7 +32,6 @@ export interface UNAddToWalletComponentProps {
 }
 
 const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
-  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const { currentUNWallet } = useCardWallet(props.cardId);
   const styles = getStylesObject();
@@ -55,10 +53,10 @@ const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
         injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
         break;
       case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
-        dispatch(setEvent({
-          key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW,
-          data: {},
-        }));
+        eventBus.emit(
+          UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW,
+          {}
+        );
         break;
       default:
         break;

package/src/store/store.ts

@@ -1,14 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import wallet from '../slices/pushProvisioningSlice';
 import configuration from '../slices/ConfigurationSlice';
-import sharedEvents from '../slices/SharedEventsSlice';
 import bottomSheet from '../slices/BottomSheetSlice';
 
 export const store = configureStore({
   reducer: {
     wallet,
     configuration,
-    sharedEvents,
     bottomSheet,
   },
 });

package/src/types/internal/bottomSheet.types.ts

@@ -9,6 +9,7 @@ import { UNCheckDepositComponentProps } from '../../components/UNCheckDepositCom
 import { UNBookPaymentComponentProps } from '../../components/UNBookPaymentComponent';
 import { UNWirePaymentComponentProps } from '../../components/UNWirePaymentComponent';
 import { UNCreateCardComponentProps } from '../../components/UNCreateCardComponent';
+import { UNCheckPaymentComponentProps } from '../../components/UNCheckPaymentComponent';
 
 export enum BottomSheetNativePlaceType {
   overFullScreen = 'overFullScreen',
@@ -50,6 +51,7 @@ export enum BottomSheetNativeComponentType {
   ACHCreditComponent = 'UNACHCreditComponent',
   ACHDebitComponent = 'UNACHDebitComponent',
   CheckDepositComponent = 'UNCheckDepositComponent',
+  CheckPaymentComponent = 'UNCheckPaymentComponent',
   BookPaymentComponent = 'UNBookPaymentComponent',
   WirePaymentComponent = 'UNWirePaymentComponent',
   CreateCardComponent = 'UNCreateCardComponent'
@@ -75,6 +77,11 @@ export type BottomSheetNativeCheckDepositComponentType = {
   props: UNCheckDepositComponentProps
 }
 
+export type BottomSheetNativeCheckPaymentComponentType = {
+  type: BottomSheetNativeComponentType.CheckPaymentComponent,
+  props: UNCheckPaymentComponentProps
+}
+
 export type BottomSheetNativeBookPaymentComponentType = {
   type: BottomSheetNativeComponentType.BookPaymentComponent,
   props: UNBookPaymentComponentProps
@@ -94,6 +101,7 @@ export type BottomSheetNativeComponent = BottomSheetNativeAddToWalletComponentTy
   | BottomSheetNativeACHCreditComponentType
   | BottomSheetNativeACHDebitComponentType
   | BottomSheetNativeCheckDepositComponentType
+  | BottomSheetNativeCheckPaymentComponentType
   | BottomSheetNativeBookPaymentComponentType
   | BottomSheetNativeWirePaymentComponentType
   | BottomSheetNativeCreateCardComponentType

package/src/types/internal/webComponent.types.ts

@@ -16,7 +16,8 @@ export enum WebComponentType {
   whiteLabelApp = 'unit-elements-white-label-app',
   multiFactorAuthentication = 'unit-elements-multi-factor-authentication',
   createCard = 'unit-elements-create-card',
-  cardMenu = 'unit-elements-card-menu'
+  cardMenu = 'unit-elements-card-menu',
+  checkPayment = 'unit-elements-check-payment'
 }
 
 export enum PresentationMode {

package/src/types/shared/activity.types.ts

@@ -9,7 +9,7 @@ export enum UNActivityComponentPaginationType {
 
 export type UNActivityOnLoadData = {
   [RESPONSE_KEYS.authorizations]: [UNAuthorization],
-  [RESPONSE_KEYS.transactions]: [UNTransaction],
+  [RESPONSE_KEYS.transactions]?: [UNTransaction],
 }
 
 export enum UNActivityType {

package/src/types/shared/payment/checkPayment.types.ts

@@ -0,0 +1,39 @@
+import { UNPaymentType } from './payments.types';
+
+export interface UNCheckPayment {
+  type: UNPaymentType.CheckPayment
+  id: string
+  attributes: {
+    counterparty: UNCheckPaymentCounterparty
+    amount: number
+    idempotencyKey: string
+    description: string
+    memo: string
+  }
+  relationships: {
+    account: {
+      data: {
+        type: string
+        id: string
+      }
+    }
+    customer: {
+      data: {
+        type: string
+        id: string
+      }
+    }
+  }
+}
+
+export interface UNCheckPaymentCounterparty {
+  name: string
+  address: {
+    street: string
+    street2?: string
+    city: string
+    state: string
+    postalCode: string
+    country: string
+  }
+}

package/src/types/shared/payment/index.ts

@@ -1,5 +1,6 @@
 export * from './achPayment.types';
 export * from './billPayment.types';
 export * from './bookPayment.types';
+export * from './checkPayment.types';
 export * from './wirePayment.types';
 export * from './payments.types';

package/src/types/shared/payment/payments.types.ts

@@ -3,14 +3,16 @@ import { UNACHPayment } from './achPayment.types';
 import { UNBillPayment } from './billPayment.types';
 import { UNBookPayment } from './bookPayment.types';
 import { UNWirePayment } from './wirePayment.types';
+import { UNCheckPayment } from './checkPayment.types';
 
-export type UNPayment = UNACHPayment | UNBookPayment | UNWirePayment | UNBillPayment
+export type UNPayment = UNACHPayment | UNBookPayment | UNWirePayment | UNBillPayment | UNCheckPayment
 
 export enum UNPaymentType {
   AchPayment = 'achPayment',
   BookPayment = 'bookPayment',
   WirePayment = 'wirePayment',
   BillPayment = 'billPayment',
+  CheckPayment = 'checkPayment',
   CardToCardPayment = 'cardToCardPayment',
 }
 

package/src/types/shared/transaction/UNNegativeBalanceCoverageTransaction.ts

@@ -1,4 +1,4 @@
- import { UNCents } from '../payment/payments.types';
+import { UNCents } from '../payment/payments.types';
 import { UNTransactionTypes } from './transactions.types';
 import { UNDirection } from '../types';
 

package/src/unitComponentsSdkManager/UnitComponentsSdk.constants.ts

@@ -3,8 +3,8 @@ import { UNComponentsSecuritySettings, UNComponentsSnapshotProtectionStrategy }
 
 const WEB_SDK_RECOMMENDED_STRATEGY: UNComponentsWebVersioningStrategy = {
   type: UNVersioningStrategyType.upToNextMinor,
-  major: 2,
-  minor: 5,
+  major: 3,
+  minor: 3,
 };
 
 const DEFAULT_SECURITY_SETTINGS: UNComponentsSecuritySettings = {

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.ts

@@ -25,7 +25,7 @@ export class UnitComponentsSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '2.2.0';
+  protected static sdkVersion = '3.0.0';
 
   public static init = async (
     env: UNComponentsEnvironment,

package/src/utils/eventBus/EventBus.ts

@@ -0,0 +1,106 @@
+import type { EventMap, SharedEvent } from './EventBus.types';
+
+// Type-safe callback that receives the correct data type for the event key
+export type EventCallback<K extends keyof EventMap> = (data: EventMap[K]) => void;
+
+class EventBus {
+  private debug = false;
+  private listeners = new Map<SharedEvent['key'], Set<(data: unknown) => void>>();
+  private eventQueue: SharedEvent[] = [];
+  private isProcessing = false;
+
+  /**
+   * Subscribe to an event
+   * @returns Unsubscribe function
+   */
+  on<K extends keyof EventMap>(eventKey: K, callback: EventCallback<K>): () => void {
+    if (!this.listeners.has(eventKey)) {
+      this.listeners.set(eventKey, new Set());
+    }
+    
+    this.listeners.get(eventKey)!.add(callback as (data: unknown) => void);
+    
+    if (this.debug) {
+      console.log(`[EventBus] Subscribed to: ${eventKey} (${this.listenerCount(eventKey)} listeners)`);
+    }
+
+    // Return unsubscribe function
+    return () => {
+      const callbacks = this.listeners.get(eventKey);
+      if (callbacks) {
+        callbacks.delete(callback as (data: unknown) => void);
+        if (callbacks.size === 0) {
+          this.listeners.delete(eventKey);
+        }
+      }
+    };
+  }
+
+  /**
+   * Emit an event - queues it for processing to ensure all events are delivered
+   */
+  emit<K extends keyof EventMap>(eventKey: K, data: EventMap[K]): void {
+    const event = { key: eventKey, data } as SharedEvent;
+    
+    if (this.debug) {
+      console.log(`[EventBus] Emitting: ${eventKey} (${this.listenerCount(eventKey)} listeners)`);
+    }
+    this.eventQueue.push(event);
+    this.processQueue();
+  }
+
+  /**
+   * Process events from queue sequentially
+   * This ensures rapid successive events are all delivered
+   */
+  private processQueue(): void {
+    if (this.isProcessing || this.eventQueue.length === 0) {
+      return;
+    }
+
+    this.isProcessing = true;
+
+    // Process all queued events synchronously to ensure immediate delivery
+    while (this.eventQueue.length > 0) {
+      const event = this.eventQueue.shift()!;
+      const callbacks = this.listeners.get(event.key);
+
+      if (callbacks && callbacks.size > 0) {
+        // Process all listeners for this event
+        callbacks.forEach(callback => {
+          try {
+            callback(event.data);
+          } catch (error) {
+            console.error(`Error in event listener for ${event.key}:`, error);
+          }
+        });
+      }
+    }
+
+    this.isProcessing = false;
+  }
+
+  /**
+   * Remove all listeners for an event
+   */
+  off<K extends keyof EventMap>(eventKey: K): void {
+    this.listeners.delete(eventKey);
+  }
+
+  /**
+   * Get number of listeners for an event (useful for debugging)
+   */
+  listenerCount<K extends keyof EventMap>(eventKey: K): number {
+    return this.listeners.get(eventKey)?.size ?? 0;
+  }
+
+  /**
+   * Enable or disable debug logging
+   */
+  setDebug(enabled: boolean): void {
+    this.debug = enabled;
+  }
+}
+
+// Singleton instance
+export const eventBus = new EventBus();

package/src/utils/eventBus/EventBus.types.ts

@@ -0,0 +1,37 @@
+import type { UNAccount, UNCard } from '../../types/shared';
+import type { ActivityFiltersChangedEvent } from '../../messages/webMessages/activityMessage';
+import type { MultiFactorAuthenticationFinishedEvent, RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
+import type { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import type { CardCreatedEvent, CardMessage } from '../../messages/webMessages/cardMessage';
+import type { AccountMessage } from '../../messages/webMessages/accountMessage';
+import type { ActivityMessage } from '../../messages/webMessages/activityMessage';
+import type { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import type { MultipleCardsFiltersChangedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+import { BottomSheetRenderingMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { PageMessage } from '../../messages/webMessages/pageMessage';
+import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
+import { UNCounterparty } from '../../types/shared/counterparty.types';
+
+// Map of event keys to their data types
+export type EventMap = {
+  [CardMessage.CARD_STATUS_CHANGED]: UNCard;
+  [CardMessage.CARD_ACTIVATED]: UNCard;
+  [CardMessage.CARD_CREATED]: CardCreatedEvent;
+  [AccountMessage.UNIT_ACCOUNT_CHANGED]: UNAccount;
+  [ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED]: ActivityFiltersChangedEvent;
+  [MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED]: UNCard;
+  [MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED]: MultipleCardsFiltersChangedEvent;
+  [UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW]: Record<PropertyKey, never>;
+  [BottomSheetNativeMessage.REQUEST_RENDERING]: BottomSheetRenderingMessage;
+  [UnitComponentsMessage.UNIT_REQUEST_REFRESH]: RequestRefreshEvent;
+  [UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED]: MultiFactorAuthenticationFinishedEvent;
+  [PageMessage.PAGE_HEIGHT]: number;
+  [PlaidMessage.UNIT_OPEN_PLAID]: OpenPlaidEvent;
+  [PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED]: UNCounterparty;
+};
+
+// Generate SharedEvent as a union of { key, data } objects
+export type SharedEvent = {
+  [K in keyof EventMap]: { key: K; data: EventMap[K] };
+}[keyof EventMap];

package/src/utils/eventBus/index.ts

@@ -0,0 +1,3 @@
+export { eventBus } from './EventBus';
+export type { EventCallback } from './EventBus';
+export type { EventMap, SharedEvent } from './EventBus.types';

package/src/webComponent/WebComponent.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Linking, Platform } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+import { Linking, Platform, View } from 'react-native';
+import { useSelector } from 'react-redux';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { useSafeAreaDimensions } from '../hooks/useSafeAreaDimensions';
 import html, { HTML_PLACEHOLDER } from './html';
 import {
   RequestRefreshEvent,
@@ -20,11 +21,11 @@ import { getInfoParams, handleRequestDownload, injectEventToContinue } from './W
 import { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';
 import { getFontFacesString } from '../scripts/html/fontFaces';
 import type { RootState } from '../store';
-import { setEvent } from '../slices/SharedEventsSlice';
+import { eventBus } from '../utils/eventBus';
 import AppInfo from '../utils/AppInfo';
 import UNStoreManagerHelper from '../nativeModulesHelpers/UNStoreModuleHelper/UNStoreModuleHelper';
 import { UserDataKeys } from '../types/internal/unitStore.types';
-import { useListenerToEvent } from '../hooks/useListenerToEvent';
+import { useEventListener } from '../hooks/useEventListener';
 import { setItemInWindowUnitStore } from '../utils/windowUnitStore';
 
 export interface WebComponentProps {
@@ -42,7 +43,6 @@ export interface WebComponentProps {
 }
 
 export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webOutRef) {
-  const dispatch = useDispatch();
   const unitScript = useSelector((state: RootState) => state.configuration.unitScript);
   const globalTheme = useSelector((state: RootState) => state.configuration.theme);
   const globalLanguage = useSelector((state: RootState) => state.configuration.language);
@@ -131,17 +131,17 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     });
   };
 
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED, action: handleMultiFactorAuthFinished });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED, action: handleMultiFactorAuthFinished });
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
     switch (message.type) {
       case UnitComponentsMessage.UNIT_REQUEST_REFRESH:
         message.details &&
-          dispatch(setEvent({
-            key: UnitComponentsMessage.UNIT_REQUEST_REFRESH,
-            data: message.details as RequestRefreshEvent,
-          }));
+          eventBus.emit(
+            UnitComponentsMessage.UNIT_REQUEST_REFRESH,
+            message.details as RequestRefreshEvent
+          );
         break;
       case UnitComponentsMessage.UNIT_REQUEST_OPEN_LINK:
         // eslint-disable-next-line no-case-declarations
@@ -152,7 +152,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       case UnitComponentsMessage.UNIT_REQUEST_DOWNLOAD:
         message.details &&
           handleRequestDownload(message.details as RequestDownloadEvent, () => {
-            dispatch(setEvent({ key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
+            eventBus.emit(UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, {});
           });
         break;
       case UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED:
@@ -160,10 +160,10 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
           const data = message.details as MultiFactorAuthenticationFinishedEvent;
           UNStoreManagerHelper.saveValue(UserDataKeys.unitVerifiedToken, data.unitVerifiedCustomerTokenString);
           // update existing components - namely, the other webComponents will update their window as well as this webComponent
-          dispatch(setEvent({
-            key: UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
-            data,
-          }));
+          eventBus.emit(
+            UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
+            data
+          );
         }
         props.onMessage && props.onMessage(message);
         break;
@@ -187,7 +187,11 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     return null;
   }
 
-  return (
+  const isInheritMode = props.presentationMode === PresentationMode.Inherit;
+  const { effectiveBottomInset } = useSafeAreaDimensions();
+  const needsBottomPadding = isInheritMode && effectiveBottomInset > 0;
+
+  const webView = (
     <WebView
       ref={webRef}
       originWhitelist={['*']}
@@ -207,4 +211,14 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       mediaCapturePermissionGrantType='grant'
     />
   );
+
+  if (needsBottomPadding) {
+    return (
+      <View style={{ flex: 1, paddingBottom: effectiveBottomInset }}>
+        {webView}
+      </View>
+    );
+  }
+
+  return webView;
 });