react-native-unit-components 1.11.0 → 1.12.0

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -8,7 +8,6 @@ import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 
 import {
-  BottomSheetNativeComponentType,
   BottomSheetNativePlaceType,
   BottomSheetRenderingType,
   BottomSheetSlotData,
@@ -16,7 +15,8 @@ import {
   ScrollState,
 } from '../../types/internal/bottomSheet.types';
 import {
-  BottomSheetNativeMessage, BottomSheetRenderingMessage,
+  BottomSheetNativeMessage,
+  BottomSheetRenderingMessage,
 } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
@@ -26,14 +26,17 @@ import { RootState } from '../../store';
 
 import {
   resetBottomSheetSlice,
-  setIsBottomSheetActive, setIsComponentLoading, setNativePlace,
-  setScrollState, setShouldEnableBottomSheetScroll,
+  setIsBottomSheetActive,
+  setIsComponentLoading,
+  setNativePlace,
+  setScrollState,
+  setShouldEnableBottomSheetScroll,
   setShouldShowBottomSheet,
 } from '../../slices/BottomSheetSlice';
 import UNBottomSheetSlotComponent from './components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent';
 import UNBottomSheetNativeComponent from './components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent';
 import { WebComponentType } from '../../types/internal/webComponent.types';
-import { extractCustomerTokenFromRequestRenderingEvent } from './UNBottomSheetComponent.utils';
+import { getNativeComponentDataFromEvent } from './UNBottomSheetComponent.utils';
 
 const UNBottomSheetComponent = () => {
 
@@ -61,6 +64,34 @@ const UNBottomSheetComponent = () => {
   const styles = getStylesObject();
 
   useEffect(() => {
+    const setHeightFromNativePlace = () => {
+      switch (nativePlace) {
+        // In the case of overFullScreen, set the height to the overFullScreenHeight.
+        case BottomSheetNativePlaceType.overFullScreen:
+          setHeight(overFullScreenHeight);
+          break;
+        // For modal native place type, set the height to the fullScreenHeight.
+        case BottomSheetNativePlaceType.modal:
+          setHeight(fullScreenHeight);
+          break;
+        default:
+          // In general, we want the bottom sheet to fully contain the component,
+          // thus adjusting its height to the component height, up to the maximum of overFullScreenHeight.
+          if (componentHeight) {
+            setHeight(componentHeight < overFullScreenHeight ? componentHeight : overFullScreenHeight);
+          }
+          break;
+      }
+    };
+
+    const setSliderMaxHeightFromNativePlace = () => {
+      if (nativePlace === BottomSheetNativePlaceType.modal) {
+        setSliderMaxHeight(fullScreenHeight);
+      } else {
+        setSliderMaxHeight(overFullScreenHeight);
+      }
+    };
+
     // Check if the inner contained component is still loading or the bottom sheet should not be shown.
     if (isComponentLoading || !shouldShowBottomSheet) {
       // If so, hide the bottom sheet by setting the height to 0.
@@ -73,49 +104,21 @@ const UNBottomSheetComponent = () => {
   }, [componentHeight, nativePlace, isComponentLoading, shouldShowBottomSheet]);
 
   useEffect(() => {
+    const resetBottomSheetManagerState = () => {
+      setComponentParams(undefined);
+      setRequestRenderingEventData(undefined);
+      setNativeComponentData(undefined);
+      setRenderingType(undefined);
+      setHeight(0);
+      setSliderMaxHeight(overFullScreenHeight);
+    };
+
     if (!isBottomSheetActive) {
       dispatch(resetBottomSheetSlice());
       resetBottomSheetManagerState();
     }
   }, [isBottomSheetActive, dispatch]);
 
-  const setHeightFromNativePlace = () => {
-    switch (nativePlace) {
-      // In this case, we want the bottom sheet to fully contain the component,
-      // thus adjusting its height to the component height, up to the maximum of overFullScreenHeight.
-      case BottomSheetNativePlaceType.menu:
-        if (componentHeight) {
-          setHeight(componentHeight < overFullScreenHeight ? componentHeight : overFullScreenHeight);
-        }
-        break;
-      // In the case of overFullScreen, set the height to the overFullScreenHeight.
-      case BottomSheetNativePlaceType.overFullScreen:
-        setHeight(overFullScreenHeight);
-        break;
-      // For modal native place type, set the height to the fullScreenHeight.
-      case BottomSheetNativePlaceType.modal:
-        setHeight(fullScreenHeight);
-        break;
-    }
-  };
-
-  const setSliderMaxHeightFromNativePlace = () => {
-    if (nativePlace === BottomSheetNativePlaceType.modal) {
-      setSliderMaxHeight(fullScreenHeight);
-    } else {
-      setSliderMaxHeight(overFullScreenHeight);
-    }
-  };
-
-  const resetBottomSheetManagerState = () => {
-    setComponentParams(undefined);
-    setRequestRenderingEventData(undefined);
-    setNativeComponentData(undefined);
-    setRenderingType(undefined);
-    setHeight(0);
-    setSliderMaxHeight(overFullScreenHeight);
-  };
-
   const requestRendering = (rendering: BottomSheetRenderingMessage) => {
     if (isBottomSheetActive) {
       dispatch(setShouldShowBottomSheet(false));
@@ -158,22 +161,6 @@ const UNBottomSheetComponent = () => {
     }
   };
 
-  const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
-    let nativeComponentDataFromEvent = null;
-    if (event?.requestRenderingEvent.data.nativeComponent?.includes('action=AddToWallet') && event?.componentResourceId) {
-      nativeComponentDataFromEvent = {
-        nativePlace: BottomSheetNativePlaceType.overFullScreen,
-        component: {
-          type: BottomSheetNativeComponentType.AddToWalletComponent,
-          props: {
-            cardId: event.componentResourceId,
-            customerToken: extractCustomerTokenFromRequestRenderingEvent(event.requestRenderingEvent),
-          },
-        },
-      };
-    }
-    return nativeComponentDataFromEvent;
-  };
   const determineRenderingTypeFromEvent = (event: BottomSheetSlotData) => {
     const nativeComponentDataFromEvent = getNativeComponentDataFromEvent(event);
     if (nativeComponentDataFromEvent) {

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

@@ -1,8 +1,18 @@
 import { LISTENERS } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
 import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
-import type { BottomSheetSlotData, WebComponentData } from '../../types/internal/bottomSheet.types';
 import { webViewId } from '../../scripts/html/bodyHtml';
+import {
+  BottomSheetNativeACHCreditComponentType,
+  BottomSheetNativeACHDebitComponentType,
+  BottomSheetNativeAddToWalletComponentType,
+  BottomSheetNativeBookPaymentComponentType,
+  BottomSheetNativeCheckDepositComponentType,
+  BottomSheetNativeComponentType,
+  BottomSheetNativePlaceType,
+  BottomSheetSlotData,
+} from '../../types/internal/bottomSheet.types';
+import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getBottomSheetScript = () => {
   return LISTENERS.requestRefresh;
@@ -28,21 +38,155 @@ export const injectHtmlFullScreenHeight = (currentWebView: WebView | null, botto
   `);
 };
 
-export const isAddToWalletFromRequestRendering = (data: BottomSheetSlotData): boolean => {
-  return data.requestRenderingEvent?.data?.nativeComponent.includes('AddToWallet') ?? false;
+const getParamsFromRequestRenderingEvent = (event: RequestRenderingEvent): string | null => {
+  const eventString = event.data.nativeComponent;
+  const componentName = event.data.nativeComponentName;
+  const regexStringParams = `(<${componentName})(.*?)(><\\/${componentName}>)`;
+  const regexParams = new RegExp(regexStringParams);
+  const matchParams = eventString?.match(regexParams);
+  if (matchParams && matchParams[2]) {
+    return matchParams[2];
+  }
+  return null;
 };
 
-export const isAddToWalletByComponentParams = (data: WebComponentData): boolean => {
-  return data.params?.includes('AddToWallet') ?? false;
-};
+const extractValueFromRequestRenderingEvent = (event: RequestRenderingEvent, key: string): string | undefined => {
+  const paramsString = getParamsFromRequestRenderingEvent(event);
 
-export const extractCustomerTokenFromRequestRenderingEvent = (event: RequestRenderingEvent): string | null => {
-  const paramsString = event.data.nativeComponent;
-  const regex = /customer-token=([^>]*)>/;
+  const regexString = `${key}=([^\\ \\s]+)`;
+  const regex = new RegExp(regexString);
   const match = paramsString?.match(regex);
   if (match && match[1]) {
     return match[1];
   } else {
+    return undefined;
+  }
+};
+
+const getAddToWalletComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeAddToWalletComponentType | null => {
+  const cardId = event.componentResourceId ?? extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'card-id');
+  if (!cardId) {
+    console.error('componentResourceId is missing in getAddToWalletComponentDataFromEvent and no cardId in requestRenderingEvent');
+    return null;
+  }
+  return {
+    type: BottomSheetNativeComponentType.AddToWalletComponent,
+    props: {
+      cardId: cardId,
+      customerToken: customerToken,
+    },
+  };
+};
+
+const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeACHCreditComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  if (!accountId) {
+    console.error('accountId is missing in getACHCreditComponentDataFromEvent');
+    return null;
+  }
+  return {
+    type: BottomSheetNativeComponentType.ACHCreditComponent,
+    props: {
+      accountId: accountId,
+      customerToken: customerToken,
+    },
+  };
+};
+
+const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeACHDebitComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  if (!accountId) {
+    console.error('accountId is missing in getACHDebitComponentDataFromEvent');
+    return null;
+  }
+  return {
+    type: BottomSheetNativeComponentType.ACHDebitComponent,
+    props: {
+      accountId: accountId,
+      customerToken: customerToken,
+    },
+  };
+};
+
+const getCheckDepositComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeCheckDepositComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  const fee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'fee');
+  if (!accountId || !fee) {
+    console.error('accountId or fee is missing in getCheckDepositComponentDataFromEvent');
+    return null;
+  }
+  return {
+    type: BottomSheetNativeComponentType.CheckDepositComponent,
+    props: {
+      accountId: accountId,
+      fee: parseInt(fee),
+      customerToken: customerToken,
+    },
+  };
+};
+
+const getBookPaymentComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeBookPaymentComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  const counterPartyAccountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-account-id');
+  const counterPartyName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-name');
+  if (!accountId) {
+    console.error('accountId is missing in getBookPaymentComponentDataFromEvent');
+    return null;
+  }
+  return {
+    type: BottomSheetNativeComponentType.BookPaymentComponent,
+    props: {
+      accountId: accountId,
+      counterPartyAccountId: counterPartyAccountId,
+      counterPartyName: counterPartyName,
+      customerToken: customerToken,
+    },
+  };
+};
+
+export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
+  let componentData = null;
+  let nativePlace = BottomSheetNativePlaceType.modal;
+  const requestRenderingEventData = event.requestRenderingEvent.data;
+
+  const customerToken = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'customer-token');
+  if (!customerToken) {
+    console.error('customerToken is missing in getNativeComponentDataFromEvent');
+    return null;
+  }
+
+  switch (requestRenderingEventData.nativeComponentName) {
+    case WebComponentType.cardAction:
+      if (requestRenderingEventData.nativeComponent?.includes('action=AddToWallet')) {
+        nativePlace = BottomSheetNativePlaceType.overFullScreen;
+        componentData = getAddToWalletComponentDataFromEvent(event, customerToken);
+      }
+      break;
+    case WebComponentType.achCreditPayment:
+      componentData = getACHCreditComponentDataFromEvent(event, customerToken);
+      break;
+
+    case WebComponentType.achDebitPayment:
+      componentData = getACHDebitComponentDataFromEvent(event, customerToken);
+      break;
+
+    case WebComponentType.checkDeposit:
+      componentData = getCheckDepositComponentDataFromEvent(event, customerToken);
+      break;
+
+    case WebComponentType.bookPayment:
+      componentData = getBookPaymentComponentDataFromEvent(event, customerToken);
+      break;
+
+    default:
+      break;
+  }
+
+  if (!componentData) {
     return null;
   }
+  return {
+    component: componentData,
+    nativePlace: nativePlace,
+  };
 };

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

@@ -1,14 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   BottomSheetNativeComponentType, BottomSheetNativePlaceType,
   NativeComponentData,
   ScrollState,
 } from '../../../../types/internal/bottomSheet.types';
 import { useDispatch } from 'react-redux';
-import { setScrollState, setShouldEnableBottomSheetScroll } from '../../../../slices/BottomSheetSlice';
+import { setComponentHeight, setScrollState, setShouldEnableBottomSheetScroll } from '../../../../slices/BottomSheetSlice';
 import { UNAddToWalletComponent } from '../../../../nativeComponents/UNAddToWallet/UNAddToWalletComponent';
 import { View } from 'react-native';
 import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import UNACHCreditComponent from '../../../UNACHCreditComponent/UNACHCreditComponent';
+import UNCheckDepositComponent from '../../../UNCheckDepositComponent/UNCheckDepositComponent';
+import UNACHDebitComponent from '../../../UNACHDebitComponent/UNACHDebitComponent';
+import UNBookPaymentComponent from '../../../UNBookPaymentComponent/UNBookPaymentComponent';
+import { PageMessage } from '../../../../messages/webMessages/pageMessage';
+import { useListenerToEvent } from '../../../../hooks/useListenerToEvent';
 
 export interface UNBottomSheetNativeComponentProps {
   nativeComponentData: NativeComponentData;
@@ -16,30 +22,53 @@ export interface UNBottomSheetNativeComponentProps {
 
 const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps) => {
   const dispatch = useDispatch();
-  const [height, setHeight] = React.useState(0);
+  const [height, setHeight] = useState<number>(0);
+  const [paddingTop, setPaddingTop] = useState<number>(0);
+  const [padding, setPadding] = useState<number>(0);
+
+  const updateComponetHeight = (height: number) => {
+    // content height are supported for internal components only.
+    setHeight(height);
+    dispatch(setComponentHeight(height));
+  };
+
+  useListenerToEvent({ busEventKey: PageMessage.PAGE_HEIGHT, action: updateComponetHeight });
 
   useEffect(() => {
+    const setPaddingForNativeComponent = () => {
+      const type = props.nativeComponentData?.component.type;
+      if (type === BottomSheetNativeComponentType.ACHCreditComponent || type === BottomSheetNativeComponentType.ACHDebitComponent) {
+        setPaddingTop(30);
+      }
+
+      if (type != BottomSheetNativeComponentType.CheckDepositComponent) {
+        setPadding(20);
+      }
+    };
+    const setScrollStateForNativeComponent = () => {
+      const scrollState = props.nativeComponentData.scrollState ?? ScrollState.unScrollable;
+      dispatch(setScrollState(scrollState));
+      dispatch(setShouldEnableBottomSheetScroll(scrollState !== ScrollState.onlyWebView));
+    };
+
     setScrollStateForNativeComponent();
-  }, [props.nativeComponentData]);
+    setPaddingForNativeComponent();
+  }, [dispatch, props.nativeComponentData]);
 
   useEffect(() => {
+    const setBottomSheetNativeComponentViewHeight = () => {
+      if (props.nativeComponentData.nativePlace === BottomSheetNativePlaceType.overFullScreen) {
+        setHeight(overFullScreenHeight);
+        dispatch(setComponentHeight(overFullScreenHeight));
+      } else if (props.nativeComponentData.nativePlace === BottomSheetNativePlaceType.modal) {
+        setHeight(fullScreenHeight - statusBarHeight);
+        dispatch(setComponentHeight(fullScreenHeight - statusBarHeight));
+      }
+    };
+
     setBottomSheetNativeComponentViewHeight();
   }, [props.nativeComponentData.nativePlace]);
 
-  const setBottomSheetNativeComponentViewHeight = () => {
-    if (props.nativeComponentData.nativePlace === BottomSheetNativePlaceType.overFullScreen) {
-      setHeight(overFullScreenHeight);
-    } else {
-      setHeight(fullScreenHeight - statusBarHeight);
-    }
-  };
-
-  const setScrollStateForNativeComponent = () => {
-    const scrollState = props.nativeComponentData.scrollState ?? ScrollState.unScrollable;
-    dispatch(setScrollState(scrollState));
-    dispatch(setShouldEnableBottomSheetScroll(scrollState !== ScrollState.onlyWebView));
-  };
-
   const renderNativeComponent = () => {
     switch (props.nativeComponentData?.component.type) {
       case BottomSheetNativeComponentType.AddToWalletComponent:
@@ -48,12 +77,43 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
             {...props.nativeComponentData.component.props}
           />
         );
+      case BottomSheetNativeComponentType.ACHCreditComponent:
+        return (
+          <UNACHCreditComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
+      case BottomSheetNativeComponentType.ACHDebitComponent:
+        return (
+          <UNACHDebitComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
+      case BottomSheetNativeComponentType.CheckDepositComponent:
+        return (
+          <UNCheckDepositComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
+      case BottomSheetNativeComponentType.BookPaymentComponent:
+        return (
+          <UNBookPaymentComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
     }
   };
+
+  if (props.nativeComponentData.nativePlace === BottomSheetNativePlaceType.modal) {
+    return (
+      <View style={{ height, padding, paddingTop }}>
+        {renderNativeComponent()}
+      </View>
+    );
+  }
+
   return (
-    <View style={{ height: height }}>
-      {renderNativeComponent()}
-    </View>
+    renderNativeComponent()
   );
 };
 

package/src/components/UNBottomSheetComponent/components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent.tsx

@@ -32,6 +32,8 @@ import { getAccountActionType } from '../../../UNAccountComponent/UNAccountCompo
 import { UNAccountAction } from '../../../UNAccountComponent/UNAccountComponent';
 import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
 import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bottomSheetMessage';
+import { OpenPlaidEvent, PlaidMessage } from '../../../../messages/webMessages/plaidMessages';
+import { PayeeCounterpartyEvent, PayeeManagementMessage } from '../../../../messages/webMessages/payeeManagementMessage';
 
 export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
@@ -44,46 +46,48 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
   const webRef = useRef<WebView>(null);
   const scrollState = useSelector((state: RootState) => state.bottomSheet.scrollState);
   const nativePlace = props.requestRenderingEvent?.data?.nativePlace;
-  const scrollStateForSlot = () => {
-    if (!props.requestRenderingEvent) return;
-    switch (props.componentName) {
-      case WebComponentType.account: {
-        const accountActionType = getAccountActionType(props.requestRenderingEvent);
-        dispatch(setScrollState(
-          accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable,
-        ));
-        dispatch(setShouldEnableBottomSheetScroll(true));
-        break;
-      }
-      case WebComponentType.card: {
-        dispatch(setScrollState(ScrollState.onTop));
-        dispatch(setShouldEnableBottomSheetScroll(true));
-        break;
-      }
-      default: {
+
+  useEffect(() => {
+    const scrollStateForSlot = () => {
+      if (!props.requestRenderingEvent) return;
+      switch (props.componentName) {
+        case WebComponentType.account: {
+          const accountActionType = getAccountActionType(props.requestRenderingEvent);
+          dispatch(setScrollState(
+            accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable,
+          ));
+          dispatch(setShouldEnableBottomSheetScroll(true));
+          break;
+        }
+        case WebComponentType.card: {
+          dispatch(setScrollState(ScrollState.onTop));
+          dispatch(setShouldEnableBottomSheetScroll(true));
+          break;
+        }
+        default: {
         // default web component case
-        const nativePlace = props.requestRenderingEvent.data.nativePlace;
-        switch (nativePlace) {
-          case BottomSheetNativePlaceType.overFullScreen:
-            dispatch(setScrollState(ScrollState.onTop));
-            dispatch(setShouldEnableBottomSheetScroll(true));
-            break;
-          case BottomSheetNativePlaceType.modal:
-            dispatch(setScrollState(ScrollState.onlyWebView));
-            dispatch(setShouldEnableBottomSheetScroll(false));
-            break;
-          default:
-            dispatch(setScrollState(ScrollState.onTop));
-            dispatch(setShouldEnableBottomSheetScroll(true));
-            break;
+          const nativePlace = props.requestRenderingEvent.data.nativePlace;
+          switch (nativePlace) {
+            case BottomSheetNativePlaceType.overFullScreen:
+              dispatch(setScrollState(ScrollState.onTop));
+              dispatch(setShouldEnableBottomSheetScroll(true));
+              break;
+            case BottomSheetNativePlaceType.modal:
+              dispatch(setScrollState(ScrollState.onlyWebView));
+              dispatch(setShouldEnableBottomSheetScroll(false));
+              break;
+            default:
+              dispatch(setScrollState(ScrollState.onTop));
+              dispatch(setShouldEnableBottomSheetScroll(true));
+              break;
+          }
         }
       }
-    }
-  };
+    };
 
-  useEffect(() => {
     scrollStateForSlot();
-  }, [props.componentName, props.requestRenderingEvent.data.nativePlace, scrollStateForSlot]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.componentName, props.requestRenderingEvent.data.nativePlace]);
 
   const _onWebMessage = (message: WebViewMessage) => {
     switch (message.type) {
@@ -127,6 +131,13 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
         }));
         break;
 
+      case PlaidMessage.UNIT_OPEN_PLAID:
+        dispatch(setEvent({
+          key: PlaidMessage.UNIT_OPEN_PLAID,
+          data: message.details as OpenPlaidEvent
+        }));
+        break;
+
       case CardMessage.CARD_STATUS_CHANGED:
         dispatch(setEvent({
           key: CardMessage.CARD_STATUS_CHANGED,
@@ -145,10 +156,17 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
           data: (message.details as ActivityFiltersChangedEvent),
         }));
         break;
-
+      case PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED: {
+        dispatch(setEvent({
+          key: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
+          data: (message.details as PayeeCounterpartyEvent).counterparty,
+        }));
+        break;
+      }
     }
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const _onScrollWebView = (event: any) => {
     if (scrollState === ScrollState.unScrollable) return;
 

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -15,7 +15,7 @@ import {
 } from './UNCardComponent.utils';
 import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
-import type { NativeModules } from 'react-native';
+import { NativeModules } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import {
   BottomSheetRenderingType,