react-native-unit-components 2.1.0 → 3.0.0

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -7,7 +7,9 @@ import type {
   UNComponentsOnLoadResponseData, 
   UNACHOnLoadData, 
   UNACHPayment, 
-  UNPlaidAccountFilter 
+  UNPlaidAccountFilter, 
+  UNCounterparty,
+  UNAccount
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform } from 'react-native';
@@ -15,27 +17,32 @@ import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
   RequestExternalSdkEvent,
+  RequestRenderingEvent,
   UnitComponentsMessage,
 } from '../../messages/webMessages/unitComponentsMessages';
-import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
-import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import { getACHDebitParams, getACHDebitScript, injectRequestCounterpartyDeletedScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
+import { LinkExit, LinkSuccess, open as openPlaidLink, create as createPlaidLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
-import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { ACHOnLoadResponse, RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { ensureArray } from '../../utils/onLoadMessages.utils';
+import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
+import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
 
 export interface UNACHDebitComponentProps {
   accountId?: string;
   theme?: string;
   language?: string;
   isAutoFocus?: boolean;
-  fee?: number;
   sameDay?: boolean;
   showSameDaySelection?: boolean;
   onPaymentCreated?: (data: UNACHPayment) => void;
@@ -46,12 +53,12 @@ export interface UNACHDebitComponentProps {
   plaidLinkCustomizationName?: string;
   initialStageBackButton?: boolean;
   finalStageDoneButton?: boolean;
+  allowCounterpartyDelete?: boolean;
 }
 
 const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [appPackageName, setAppPackageName] = useState<string>('');
-  const [linkToken, setLinkToken] = useState<string>('');
   const webRef = useRef<WebView>(null);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
@@ -65,6 +72,12 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     setPackageNameForAndroid();
   }, []);
 
+  const handleCounterpartyDeleted = (data: UNCounterparty) => {
+    injectRequestCounterpartyDeletedScript(webRef.current, data);
+  };
+  
+  useEventListener({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: handleCounterpartyDeleted });
+
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
       return;
@@ -88,6 +101,20 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       return;
     }
 
+    if (RESPONSE_KEYS.counterpartiesResult in response) {
+      const counterparties = response[RESPONSE_KEYS.counterpartiesResult].data;
+      const accountResponse = response as Partial<ACHOnLoadResponse>;
+      const accountData = accountResponse[RESPONSE_KEYS.account]?.data;
+      const achOnload: UNComponentsOnLoadResponseData<UNACHOnLoadData> = {
+        data: {
+          [RESPONSE_KEYS.account]: (accountData ? ensureArray(accountData) : []) as [UNAccount],
+          [RESPONSE_KEYS.counterpartyAccount]: counterparties,
+        },
+      };
+      props.onLoad(achOnload);
+      return;
+    }
+
     console.error('On Load Error: unexpected response type');
     return;
   };
@@ -112,6 +139,21 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
+        const slotData: BottomSheetSlotData = {
+          componentName: WebComponentType.achDebitPayment,
+          componentResourceId: props.accountId,
+          requestRenderingEvent: message.details as RequestRenderingEvent,
+        };
+      
+        const data = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData,
+        } as SlotRendering;
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
+      
+        break;
+      }
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;
         setHeight(currentHeight);
@@ -123,23 +165,21 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       case PlaidMessage.UNIT_PLAID_TOKEN_CREATED: {
         const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
         const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
-        setLinkToken(linkTokenData.attributes.linkToken);
+        const link: string = linkTokenData.attributes.linkToken;
+        createPlaidLink({ token: link });  
         break;
       }
 
       case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK: {
         const externalSdkType = (message.details as RequestExternalSdkEvent).type;
         if (externalSdkType !== 'plaid') return;
-        linkToken && openLink({
-          tokenConfig: { noLoadingState: false, token: linkToken },
+        openPlaidLink({
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => {
+          onExit: (exit: LinkExit) => {
             console.log(exit);
-          },
-        }).catch(e => {
-          console.error(e);
+          }
         });
         break;
       }

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -1,8 +1,9 @@
-import { DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
+import { DISPATCH_COUNTERPARTY_DELETED, DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
 import type { UNACHDebitComponentProps } from './UNACHDebitComponent';
 
 import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
+import { UNCounterparty } from '../../types/shared';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
@@ -11,7 +12,6 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   return `
     ${accountIdParam}
     is-auto-focus="${props.isAutoFocus ?? false}"
-    ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
     show-same-day-selection="${props.showSameDaySelection ?? false}"
@@ -19,6 +19,7 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
     ${plaidLinkCustomizationNameParam}
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"
+    allow-counterparty-delete="${props.allowCounterpartyDelete ?? false}"
   `;
 };
 
@@ -30,6 +31,7 @@ export const getACHDebitScript = (androidPackageName?: string) => {
     ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
     ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${DISPATCH_COUNTERPARTY_DELETED}
     ${LISTENERS.requestRefresh}
     `;
 };
@@ -38,3 +40,7 @@ export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: Lin
   const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };
+
+export const injectRequestCounterpartyDeletedScript = (currentWeb: WebView | null, counterparty: UNCounterparty) => {
+  currentWeb?.injectJavaScript(`dispatchCounterpartyDeletedEvent('${counterparty}')`);
+};

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -36,9 +36,8 @@ import 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';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNAccountComponentProps {
@@ -79,7 +78,6 @@ export enum UNAccountAction {
 
 const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
 
-  const dispatch = useDispatch();
   const [height, setHeight] = useState(0);
   const webRef = useRef<WebView>(null);
   // currentAccountId is used to store the current account id for the "imperative" refresh event.
@@ -126,8 +124,8 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     console.error('On Load Error: unexpected response type.');
     return;
   };
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useImperativeHandle(accountRef, () => ({
     openActionsMenu() {
@@ -162,7 +160,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
 
         break;
       }

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -32,9 +32,8 @@ import type { BottomSheetSlotData, SlotRendering } from '../../types/internal/bo
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { useDispatch } from 'react-redux';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
@@ -52,6 +51,7 @@ export interface UNActivityComponentProps {
   hideBackToTop?: boolean;
   paginationType?: UNActivityComponentPaginationType;
   transactionsPerPage?: number;
+  showDeclinedActivity?: boolean;
   // event
   onLoad?: (response: UNComponentsOnLoadResponse<UNActivityOnLoadData>) => void;
 }
@@ -61,7 +61,6 @@ export interface UNActivityRef {
 }
 
 const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentProps>(function UNActivityComponent(props, activityRef) {
-  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
@@ -84,8 +83,8 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     injectActivityFiltersChanged(webRef.current, query);
   };
 
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
   });
@@ -100,12 +99,12 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
       return;
     }
 
-    if (RESPONSE_KEYS.authorizations in response && RESPONSE_KEYS.transactions in response) {
+    if (RESPONSE_KEYS.authorizations in response) {
       // ActivityOnLoadResponse;
       const activityOnLoad: UNComponentsOnLoadResponseData<UNActivityOnLoadData> = {
         data: {
           [RESPONSE_KEYS.authorizations]: response[RESPONSE_KEYS.authorizations].data,
-          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data,
+          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions]?.data,
         },
       };
       props.onLoad(activityOnLoad);
@@ -130,7 +129,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
         break;
       }
       case UnitComponentsMessage.UNIT_ON_LOAD:

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

@@ -14,6 +14,7 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
     hide-filter-button="${props.hideFilterButton || false}"
     hide-back-to-top="${props.hideBackToTop || false}"
     hide-title="${props.hideTitle || false}"
+    show-declined-activity="${props.showDeclinedActivity || false}"
     ${queryFilterParam}
     ${paginationTypeParam}
     ${transactionsPerPageParam}

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

@@ -1,20 +1,38 @@
-import { Dimensions, Platform, StatusBar } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 export const BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE = 0.9;
 
-export const androidStatusBarHeight = StatusBar.currentHeight || 0;
+const windowHeight = Dimensions.get('window').height;
+const screenHeight = Dimensions.get('screen').height;
+const statusBarHeight = initialWindowMetrics?.insets.top ?? 0;
+const isAndroid = Platform.OS === 'android';
+const isAndroid15AndAbove = isAndroid && Platform.Version >= 35;
 
-// For iOS - we are currently using hard coded height
-export const iosStatusBarHeight = Dimensions.get('window').height * 0.05;
+// Android 15+ edge-to-edge detection
+const isEdgeToEdgeActive = isAndroid15AndAbove && Math.abs(screenHeight - windowHeight) < 10;
 
-export const statusBarHeight = Platform.OS === 'android' ? androidStatusBarHeight : iosStatusBarHeight;
-// Android 10 and above - need to add status bar height to the window height to get the full screen height because Dimensions.get('window').height returns the height without the status bar
-// reference: https://github.com/facebook/react-native/issues/23693#issuecomment-1403560728
-export const isAndroid10AndAbove = Platform.OS === 'android' && Platform.Version >= 29;
+// Calculate overFullScreenHeight based on platform
+const calculateOverFullScreenHeight = (): number => {
+  if (!isAndroid) {
+    // iOS: simple percentage of window height
+    return windowHeight * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+  }
+  
+  // Android: adjust for edge-to-edge status
+  const topMargin = screenHeight * (1 - BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE);
+  if (isEdgeToEdgeActive) {
+    return screenHeight - topMargin;
+  } else {
+    // Edge-to-edge opted out: status bar is outside window, adjust margin
+    return windowHeight - (topMargin - statusBarHeight);
+  }
+};
 
-export const fullScreenHeight =
-  isAndroid10AndAbove ?
-    Dimensions.get('window').height + statusBarHeight
-    : Dimensions.get('window').height;
+export const overFullScreenHeight = calculateOverFullScreenHeight();
 
-export const overFullScreenHeight = Dimensions.get('window').height * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+export const TOP_PADDING = 48;
+export const BOTTOM_PADDING = 24;
+export const LEFT_PADDING = 24;
+export const RIGHT_PADDING = 24;
+export const VERTICAL_PADDING = TOP_PADDING + BOTTOM_PADDING; // For adjusting injected height

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -17,11 +17,10 @@ import {
   BottomSheetRenderingMessage,
 } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { useEventListener } from '../../hooks/useEventListener';
 import { useDispatch, useSelector } from 'react-redux';
-import { fullScreenHeight, overFullScreenHeight } from './UNBottomSheetComponent.constants';
+import { overFullScreenHeight } from './UNBottomSheetComponent.constants';
 import { RootState } from '../../store';
-
 import {
   resetBottomSheetSlice,
   setIsBottomSheetActive,
@@ -35,9 +34,11 @@ import UNBottomSheetSlotComponent from './components/UNBottomSheetSlotComponent/
 import UNBottomSheetNativeComponent from './components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 import { getNativeComponentDataFromEvent } from './UNBottomSheetComponent.utils';
+import { useSafeAreaDimensions } from '../../hooks/useSafeAreaDimensions';
 
 const UNBottomSheetComponent = () => {
   const dispatch = useDispatch();
+  const { fullScreenHeight } = useSafeAreaDimensions();
 
   const isBottomSheetActive = useSelector((state: RootState) => state.bottomSheet.isBottomSheetActive);
   const isComponentLoading = useSelector((state: RootState) => state.bottomSheet.isComponentLoading);
@@ -66,7 +67,6 @@ const UNBottomSheetComponent = () => {
         case BottomSheetNativePlaceType.overFullScreen:
           setHeight(overFullScreenHeight);
           break;
-        // For modal native place type, set the height to the fullScreenHeight.
         case BottomSheetNativePlaceType.modal:
           setHeight(fullScreenHeight);
           break;
@@ -134,8 +134,8 @@ const UNBottomSheetComponent = () => {
     dispatch(setIsBottomSheetActive(false));
   };
 
-  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
+  useEventListener({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
   const handleRequestRendering = (rendering: BottomSheetRenderingMessage) => {
     if (rendering === currentBottomSheetRenderingMessage) {

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

@@ -8,6 +8,7 @@ import {
   BottomSheetNativeAddToWalletComponentType,
   BottomSheetNativeBookPaymentComponentType,
   BottomSheetNativeCheckDepositComponentType,
+  BottomSheetNativeCheckPaymentComponentType,
   BottomSheetNativeComponentType,
   BottomSheetNativeCreateCardComponentType,
   BottomSheetNativePlaceType,
@@ -89,7 +90,6 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
   const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
   const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
   const withPlaid = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'with-plaid');
@@ -106,7 +106,6 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
       withPlaid: withPlaid ? withPlaid === 'true' : undefined,
@@ -123,7 +122,6 @@ const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSh
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
   const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
   const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
   const plaidLinkCustomizationName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-link-customization-name');
@@ -139,7 +137,6 @@ const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSh
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
       plaidAccountFilters: plaidAccountFiltersArray,
@@ -175,6 +172,25 @@ const getCheckDepositComponentDataFromEvent = (event: BottomSheetSlotData): Bott
   };
 };
 
+const getCheckPaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeCheckPaymentComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
+  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
+  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
+  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
+
+  return {
+    type: BottomSheetNativeComponentType.CheckPaymentComponent,
+    props: {
+      accountId: accountId,
+      theme: theme,
+      language: language,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
+    },
+  };
+};
+
 const getBookPaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeBookPaymentComponentType | null => {
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const counterPartyAccountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-account-id');
@@ -206,7 +222,6 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
   const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
   const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
   const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
@@ -221,7 +236,6 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
@@ -281,6 +295,10 @@ export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
       componentData = getCheckDepositComponentDataFromEvent(event);
       break;
 
+    case WebComponentType.checkPayment:
+      componentData = getCheckPaymentComponentDataFromEvent(event);
+      break;
+
     case WebComponentType.bookPayment:
       componentData = getBookPaymentComponentDataFromEvent(event);
       break;

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent.tsx

@@ -7,15 +7,17 @@ import {
 import { useDispatch } from 'react-redux';
 import { setComponentHeight, setScrollState, setShouldEnableBottomSheetScroll } from '../../../../slices/BottomSheetSlice';
 import { UNAddToWalletComponent } from '../../../../nativeComponents/UNAddToWallet/UNAddToWalletComponent';
-import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import { overFullScreenHeight } from '../../UNBottomSheetComponent.constants';
+import { useSafeAreaDimensions } from '../../../../hooks/useSafeAreaDimensions';
 import UNACHCreditComponent from '../../../UNACHCreditComponent/UNACHCreditComponent';
 import UNCheckDepositComponent from '../../../UNCheckDepositComponent/UNCheckDepositComponent';
+import UNCheckPaymentComponent from '../../../UNCheckPaymentComponent/UNCheckPaymentComponent';
 import UNACHDebitComponent from '../../../UNACHDebitComponent/UNACHDebitComponent';
 import UNBookPaymentComponent from '../../../UNBookPaymentComponent/UNBookPaymentComponent';
 import UNWirePaymentComponent from '../../../UNWirePaymentComponent/UNWirePaymentComponent';
 import UNCreateCardComponent from '../../../UNCreateCardComponent/UNCreateCardComponent';
 import { PageMessage } from '../../../../messages/webMessages/pageMessage';
-import { useListenerToEvent } from '../../../../hooks/useListenerToEvent';
+import { useEventListener } from '../../../../hooks/useEventListener';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
 
 export interface UNBottomSheetNativeComponentProps {
@@ -24,6 +26,7 @@ export interface UNBottomSheetNativeComponentProps {
 
 const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps) => {
   const dispatch = useDispatch();
+  const { contentHeight, effectiveBottomInset } = useSafeAreaDimensions();
   const [height, setHeight] = useState<number>(0);
   const [paddingTop, setPaddingTop] = useState<number>(0);
   const [paddingBottom, setPaddingBottom] = useState<number>(0);
@@ -35,7 +38,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
     dispatch(setComponentHeight(height));
   };
 
-  useListenerToEvent({ busEventKey: PageMessage.PAGE_HEIGHT, action: updateComponetHeight });
+  useEventListener({ busEventKey: PageMessage.PAGE_HEIGHT, action: updateComponetHeight });
 
   useEffect(() => {
     const setPaddingForNativeComponent = () => {
@@ -44,7 +47,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
         setPadding(20);
         setPaddingTop(30);
       }
-      setPaddingBottom(20);
+      setPaddingBottom(20 + effectiveBottomInset);
     };
     const setScrollStateForNativeComponent = () => {
       const scrollState = props.nativeComponentData.scrollState ?? ScrollState.unScrollable;
@@ -54,7 +57,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
 
     setScrollStateForNativeComponent();
     setPaddingForNativeComponent();
-  }, [dispatch, props.nativeComponentData]);
+  }, [dispatch, props.nativeComponentData, effectiveBottomInset]);
 
   useEffect(() => {
     const setBottomSheetNativeComponentViewHeight = () => {
@@ -63,8 +66,8 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
         case BottomSheetNativePlaceType.overFullScreen:
           adjustedHeight = overFullScreenHeight;
           break;
-        case BottomSheetNativePlaceType.modal: 
-          adjustedHeight = fullScreenHeight - statusBarHeight;
+        case BottomSheetNativePlaceType.modal:
+          adjustedHeight = contentHeight;
           break;
         default:
           return;
@@ -76,7 +79,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
     };
 
     setBottomSheetNativeComponentViewHeight();
-  }, [props.nativeComponentData.nativePlace]);
+  }, [props.nativeComponentData.nativePlace, contentHeight, dispatch]);
 
   const renderNativeComponent = () => {
     switch (props.nativeComponentData?.component.type) {
@@ -104,6 +107,12 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
             {...props.nativeComponentData.component.props}
           />
         );
+      case BottomSheetNativeComponentType.CheckPaymentComponent:
+        return (
+          <UNCheckPaymentComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
       case BottomSheetNativeComponentType.BookPaymentComponent:
         return (
           <UNBookPaymentComponent
@@ -134,7 +143,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
       );
     case BottomSheetNativePlaceType.overFullScreen:
       return (
-        <UNKeyboardAvoidingView style={{ height }}>
+        <UNKeyboardAvoidingView style={{ height, padding, paddingTop, paddingBottom }}>
           {renderNativeComponent()}
         </UNKeyboardAvoidingView>
       );