react-native-unit-components 2.1.0 → 3.0.0

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

@@ -18,7 +18,7 @@ import {
   ScrollState, SlotRendering,
 } from '../../../../types/internal/bottomSheet.types';
 import { CardActivatedEvent, CardMessage, CardStatusChangedEvent } from '../../../../messages/webMessages/cardMessage';
-import { setEvent } from '../../../../slices/SharedEventsSlice';
+import { eventBus } from '../../../../utils/eventBus';
 import { AccountChangedEvent, AccountMessage } from '../../../../messages/webMessages/accountMessage';
 import { ActivityFiltersChangedEvent, ActivityMessage } from '../../../../messages/webMessages/activityMessage';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,12 +30,14 @@ import {
 } from '../../../../slices/BottomSheetSlice';
 import { getAccountActionType } from '../../../UNAccountComponent/UNAccountComponent.utils';
 import { UNAccountAction } from '../../../UNAccountComponent/UNAccountComponent';
-import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import { BOTTOM_PADDING, LEFT_PADDING, overFullScreenHeight, RIGHT_PADDING, TOP_PADDING, VERTICAL_PADDING } from '../../UNBottomSheetComponent.constants';
+import { useSafeAreaDimensions } from '../../../../hooks/useSafeAreaDimensions';
 import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bottomSheetMessage';
 import { OpenPlaidEvent, PlaidMessage } from '../../../../messages/webMessages/plaidMessages';
 import { PayeeCounterpartyEvent, PayeeManagementMessage } from '../../../../messages/webMessages/payeeManagementMessage';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
 import { MultipleCardsFiltersChangedEvent, MultipleCardsMessage } from '../../../../messages/webMessages/multipleCardsMessage';
+import { View } from 'react-native';
 
 export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
@@ -48,6 +50,7 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
   const webRef = useRef<WebView>(null);
   const scrollState = useSelector((state: RootState) => state.bottomSheet.scrollState);
   const nativePlace = props.requestRenderingEvent?.data?.nativePlace;
+  const { fullScreenHeight, contentHeight, effectiveBottomInset } = useSafeAreaDimensions();
 
   useEffect(() => {
     const scrollStateForSlot = () => {
@@ -101,19 +104,30 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
       case PageMessage.PAGE_HEIGHT: {
         const height = (message.details as HeightEvent).height;
         switch (nativePlace) {
-          case BottomSheetNativePlaceType.overFullScreen:
-            injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+          case BottomSheetNativePlaceType.overFullScreen: {
+            const injectedHeight = !props.requestRenderingEvent.data.isPaddingIncluded
+              ? overFullScreenHeight - VERTICAL_PADDING - effectiveBottomInset
+              : overFullScreenHeight - effectiveBottomInset;
+            injectHtmlFullScreenHeight(webRef.current, injectedHeight);
             break;
-          case BottomSheetNativePlaceType.modal:
-            injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+          }
+          case BottomSheetNativePlaceType.modal: {
+            const injectedHeight = !props.requestRenderingEvent.data.isPaddingIncluded
+              ? contentHeight - VERTICAL_PADDING - effectiveBottomInset
+              : contentHeight - effectiveBottomInset;
+            injectHtmlFullScreenHeight(webRef.current, injectedHeight);
             break;
-          case BottomSheetNativePlaceType.menu: case BottomSheetNativePlaceType.contentHeight:
-            if (height < overFullScreenHeight) {
-              dispatch(setComponentHeight(height));
-            } else {
-              dispatch(setComponentHeight(overFullScreenHeight));
-            }
+          }
+          case BottomSheetNativePlaceType.menu: case BottomSheetNativePlaceType.contentHeight: {
+            const adjustedHeight = props.requestRenderingEvent.data.isPaddingIncluded 
+              ? height + effectiveBottomInset
+              : height + VERTICAL_PADDING + effectiveBottomInset;
+            const maxHeight = props.requestRenderingEvent.data.isPaddingIncluded
+              ? overFullScreenHeight + effectiveBottomInset
+              : overFullScreenHeight + VERTICAL_PADDING + effectiveBottomInset;
+            dispatch(setComponentHeight(Math.min(adjustedHeight, maxHeight)));
             break;
+          }
         }
         dispatch(setIsComponentLoading(false));
         break;
@@ -124,55 +138,55 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
           type: BottomSheetRenderingType.Slot,
           data: { requestRenderingEvent: requestRendering, componentResourceId: props.componentResourceId },
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data: requestRenderingSlotData }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, requestRenderingSlotData);
         break;
       }
       case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
-        dispatch(setEvent({ key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
+        eventBus.emit(UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, {});
         break;
       case CardMessage.CARD_ACTIVATED:
-        dispatch(setEvent({
-          key: CardMessage.CARD_ACTIVATED,
-          data: (message.details as CardActivatedEvent).card,
-        }));
+        eventBus.emit(
+          CardMessage.CARD_ACTIVATED,
+          (message.details as CardActivatedEvent).card
+        );
         break;
 
       case PlaidMessage.UNIT_OPEN_PLAID:
-        dispatch(setEvent({
-          key: PlaidMessage.UNIT_OPEN_PLAID,
-          data: message.details as OpenPlaidEvent
-        }));
+        eventBus.emit(
+          PlaidMessage.UNIT_OPEN_PLAID,
+          message.details as OpenPlaidEvent
+        );
         break;
 
       case CardMessage.CARD_STATUS_CHANGED:
-        dispatch(setEvent({
-          key: CardMessage.CARD_STATUS_CHANGED,
-          data: (message.details as CardStatusChangedEvent).card,
-        }));
+        eventBus.emit(
+          CardMessage.CARD_STATUS_CHANGED,
+          (message.details as CardStatusChangedEvent).card
+        );
         break;
       case AccountMessage.UNIT_ACCOUNT_CHANGED:
-        dispatch(setEvent({
-          key: AccountMessage.UNIT_ACCOUNT_CHANGED,
-          data: (message.details as AccountChangedEvent).account,
-        }));
+        eventBus.emit(
+          AccountMessage.UNIT_ACCOUNT_CHANGED,
+          (message.details as AccountChangedEvent).account
+        );
         break;
       case ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED:
-        dispatch(setEvent({
-          key: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
-          data: (message.details as ActivityFiltersChangedEvent),
-        }));
+        eventBus.emit(
+          ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
+          (message.details as ActivityFiltersChangedEvent)
+        );
         break;
       case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED:
-        dispatch(setEvent({
-          key: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
-          data: (message.details as MultipleCardsFiltersChangedEvent),
-        }));
+        eventBus.emit(
+          MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
+          (message.details as MultipleCardsFiltersChangedEvent)
+        );
         break;
       case PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED: {
-        dispatch(setEvent({
-          key: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
-          data: (message.details as PayeeCounterpartyEvent).counterparty,
-        }));
+        eventBus.emit(
+          PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
+          (message.details as PayeeCounterpartyEvent).counterparty
+        );
         break;
       }
     }
@@ -194,19 +208,29 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
       dispatch(setShouldEnableBottomSheetScroll(false));
     }
   };
+  
+  // If isPaddingIncluded is true, we don't need to add padding to the web component
+  const paddingStyle = !props.requestRenderingEvent.data.isPaddingIncluded ? {
+    paddingTop: TOP_PADDING,
+    paddingBottom: BOTTOM_PADDING + effectiveBottomInset,
+    paddingLeft: LEFT_PADDING,
+    paddingRight: RIGHT_PADDING,
+  } : {};
 
   return (
-    <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.slot}
-        presentationMode={PresentationMode.CoverInjectedHeight}
-        script={getBottomSheetScript()}
-        onMessage={_onWebMessage}
-        isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
-        handleScroll={_onScrollWebView}
-      />
-    </UNKeyboardAvoidingView>
+    <View style={{...paddingStyle, flex: 1}}>
+      <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.slot}
+          presentationMode={PresentationMode.CoverInjectedHeight}
+          script={getBottomSheetScript()}
+          onMessage={_onWebMessage}
+          isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+          handleScroll={_onScrollWebView}
+        />
+      </UNKeyboardAvoidingView>
+    </View>
   );
 };
 

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -26,10 +26,10 @@ import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponents
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
 import { selectWallet } from '../../slices/pushProvisioningSlice';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import { setEvent } from '../../slices/SharedEventsSlice';
+import { useEventListener } from '../../hooks/useEventListener';
+import { eventBus } from '../../utils/eventBus';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNCardComponentProps {
@@ -65,7 +65,6 @@ export interface CardRef {
 }
 
 const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
-  const dispatch = useDispatch();
 
   const [height, setHeight] = useState(0);
 
@@ -124,9 +123,9 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     return;
   };
 
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
-  useListenerToEvent({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
+  useEventListener({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
 
   const handleMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
@@ -144,7 +143,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
 
         sendActionCallbackIfNeeded(slotData.requestRenderingEvent);
         break;

package/src/components/UNCheckPaymentComponent/UNCheckPaymentComponent.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { UNAccount, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
+import { UNCheckPayment } from '../../types/shared/payment';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import { CheckPaymentEvent } from '../../messages/webMessages/checkPaymentMessage';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { getCheckPaymentParams, getCheckPaymentScript } from './UNCheckPaymentComponent.utils';
+
+export interface UNCheckPaymentComponentProps {
+  //inputs
+  accountId?: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
+
+  // events
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNAccount]>) => void;
+  onPaymentCreated?: (data: UNCheckPayment) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
+}
+
+const UNCheckPaymentComponent = (props: UNCheckPaymentComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNComponentsError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response) {
+      const account = response[RESPONSE_KEYS.account].data;
+      const paymentOnload: UNComponentsOnLoadResponseData<[UNAccount]> = {
+        data: ensureArray(account),
+      };
+      props.onLoad(paymentOnload);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
+      case PaymentMessage.PAYMENT_CREATED: {
+        const checkPaymentEvent = message.details as CheckPaymentEvent;
+        props.onPaymentCreated && props.onPaymentCreated(checkPaymentEvent.data as UNCheckPayment);
+        break;
+      }
+      case UnitComponentsMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
+      <WebComponent
+        type={WebComponentType.checkPayment}
+        presentationMode={presentationMode}
+        params={getCheckPaymentParams(props)}
+        script={getCheckPaymentScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={true}
+        theme={props.theme}
+        language={props.language}
+      />
+    </UNBaseView>
+  );
+};
+
+export default withReduxStore<UNCheckPaymentComponentProps>(UNCheckPaymentComponent);

package/src/components/UNCheckPaymentComponent/UNCheckPaymentComponent.utils.tsx

@@ -0,0 +1,31 @@
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import type { UNCheckPaymentComponentProps } from './UNCheckPaymentComponent';
+
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+
+export const getCheckPaymentParams = (props: UNCheckPaymentComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  return `
+    ${accountIdParam}
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
+    style="height: 100%"
+  `;
+};
+
+export const getCheckPaymentScript = () => {
+  return `
+    window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
+      const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+        }).catch((e) => {
+          console.log(e)
+        })
+    });
+
+    ${LISTENERS.requestRefresh}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
+  `;
+};

package/src/components/UNCheckPaymentComponent/index.ts

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

package/src/components/UNCreateCardComponent/UNCreateCardComponent.tsx

@@ -11,8 +11,7 @@ import { UNCard, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLo
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { UNCreateCardComponentResources, UNCreateCardType } from '../../types/shared/createCard.types';
 import { CardCreatedEvent, CardMessage } from '../../messages/webMessages/cardMessage';
-import { useDispatch } from 'react-redux';
-import { setEvent } from '../../slices/SharedEventsSlice';
+import { eventBus } from '../../utils/eventBus';
 
 export interface UNCreateCardComponentProps {
   // inputs
@@ -31,7 +30,6 @@ export interface UNCreateCardComponentProps {
 }
 
 const UNCreateCardComponent = (props: UNCreateCardComponentProps) => {
-  const dispatch = useDispatch();
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
@@ -49,6 +47,10 @@ const UNCreateCardComponent = (props: UNCreateCardComponentProps) => {
       props.onLoad(createCardResponse);
       return;
     }
+    // Ignore cardResult - card creation handled by onCardCreated
+    if (RESPONSE_KEYS.card in response) {
+      return;
+    }
     console.error('On Load Error: unexpected response type.');
     return;
   };
@@ -69,10 +71,10 @@ const UNCreateCardComponent = (props: UNCreateCardComponentProps) => {
         break;
       }
       case CardMessage.CARD_CREATED:
-        dispatch(setEvent({
-          key: CardMessage.CARD_CREATED,
-          data: (message.details as CardCreatedEvent),
-        }));
+        eventBus.emit(
+          CardMessage.CARD_CREATED,
+          (message.details as CardCreatedEvent)
+        );
         props.onCardCreated && props.onCardCreated(message.details as UNCard);
         break;
     }

package/src/components/UNCreateCardComponent/UNCreateCardComponent.utils.ts

@@ -1,4 +1,4 @@
-import { UNCreateCardComponentProps } from "./UNCreateCardComponent";
+import { UNCreateCardComponentProps } from './UNCreateCardComponent';
 
 export const getCreateCardParams = (props: UNCreateCardComponentProps) => {
   const cardTypesParam = props.cardTypes ? `card-types="${props.cardTypes.join()}"` : '';

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -22,11 +22,10 @@ import type {
 } from '../../types/shared';
 import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { useEventListener } from '../../hooks/useEventListener';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
-import { useDispatch } from 'react-redux';
-import { setEvent } from '../../slices/SharedEventsSlice';
+import { eventBus } from '../../utils/eventBus';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
@@ -37,6 +36,7 @@ export interface UNMultipleCardsComponentProps {
   cardsPerPage?: number;
   disableCardClick?: boolean;
   isRowItemClickable?: boolean;
+  showSeeAllCardsLink?: boolean;
   theme?: string;
   language?: string;
   queryFilter?: string;
@@ -49,7 +49,6 @@ export interface UNMultipleCardsComponentProps {
 }
 
 const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
-  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
@@ -61,19 +60,19 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     injectMultipleCardsFiltersChanged(webRef.current, query);
   };
 
-  const dispatchCardCreated = (card: string) => {
+  const dispatchCardCreated = (card: UNCard) => {
     injectCardCreated(webRef.current, card);
   };
 
-  useListenerToEvent({ 
+  useEventListener({ 
     busEventKey: CardMessage.CARD_STATUS_CHANGED, 
     action: dispatchCardStatusChanged 
   });
-  useListenerToEvent({
+  useEventListener({
     busEventKey: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
     action: dispatchMultipleCardsFiltersChanged,
   });
-  useListenerToEvent({
+  useEventListener({
     busEventKey: CardMessage.CARD_CREATED,
     action: dispatchCardCreated,
   });
@@ -129,7 +128,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
         break;
       }
     }

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

@@ -12,6 +12,7 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   ${cardsPerPage}
   disable-card-click="${props.disableCardClick || false}"
   is-row-item-clickable="${props.isRowItemClickable || false}"
+  show-see-all-cards-link="${props.showSeeAllCardsLink || false}"
   ${queryFilter}
   hide-title="${props.hideTitle || false}"
   hide-back-to-top="${props.hideBackToTop || false}"
@@ -42,8 +43,8 @@ export const injectMultipleCardsFiltersChanged = (currentWeb: WebView | null, qu
   currentWeb?.injectJavaScript(`dispatchMultipleCardsFilterChangedEvent('${query}')`);
 };
 
-export const injectCardCreated = (currentWeb: WebView | null, card: string) => {
-  currentWeb?.injectJavaScript(`dispatchCardCreatedEvent('${card}')`);
+export const injectCardCreated = (currentWeb: WebView | null, card: UNCard) => {
+  currentWeb?.injectJavaScript(`dispatchCardCreatedEvent(${JSON.stringify(card)})`);
 };
 
 export const injectCardStatusChangedEvent = (currentWeb: WebView | null, card: UNCard | null) => {

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -20,11 +20,10 @@ import {
 import { getPayeeParams, getPayeeManagementScript, injectRefreshEventIfNeeded, injectUnitPlaidResponse, injectUnitOpenPlaid, injectUnitPlaidExit } from './UNPayeeManagementComponent.utils';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
-import { useDispatch } from 'react-redux';
-import { setEvent } from '../../slices/SharedEventsSlice';
+import { eventBus } from '../../utils/eventBus';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import { useEventListener } from '../../hooks/useEventListener';
+import { LinkExit, LinkSuccess, open as openPlaidLink, create as createPlaidLink } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeConnectedAccountEvent, PayeeCounterpartyEvent, PayeeManagementMessage, PayeeMicroDepositeConnectionEvent } from '../../messages/webMessages/payeeManagementMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
@@ -43,6 +42,7 @@ export interface UNPayeeManagementComponentProps {
 
   hideTitle?: boolean;
   hideCounterpartyActionsButton?: boolean;
+  showAccountTypeSelector?: boolean;
 
   menuPlaceholder?: string;
   flowPlaceholder?: string;
@@ -63,7 +63,6 @@ export interface UNPayeeManagementComponentProps {
 }
 
 const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
-  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
 
   const requestRefresh = (data: RequestRefreshEvent) => {
@@ -74,17 +73,15 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
     injectUnitOpenPlaid(webRef.current, openPlaidData);
 
     const linkToken = openPlaidData.plaidLinkToken.attributes.linkToken;
+    createPlaidLink({ token: linkToken });
 
-    linkToken && openLink({
-      tokenConfig: { noLoadingState: false, token: linkToken },
+    openPlaidLink({
       onSuccess: (success: LinkSuccess) => {
         injectUnitPlaidResponse(webRef.current, success);
       },
-      onExit: exit => {
+      onExit: (exit: LinkExit) => {
         injectUnitPlaidExit(webRef.current, exit.error);
-      },
-    }).catch(e => {
-      console.error(e);
+      }
     });
   };
 
@@ -92,9 +89,9 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
     props.onCounterpartyDeleted && props.onCounterpartyDeleted(counterparty);
   };
 
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({ busEventKey: PlaidMessage.UNIT_OPEN_PLAID, action: openPlaid });
-  useListenerToEvent({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: reportCounterpartyDeleted });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({ busEventKey: PlaidMessage.UNIT_OPEN_PLAID, action: openPlaid });
+  useEventListener({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: reportCounterpartyDeleted });
 
   const handleRequestRendering = (requestRenderingEvent : RequestRenderingEvent) => {
     switch (requestRenderingEvent.data.nativeComponentName) {
@@ -107,7 +104,7 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
       }
     }
   };

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.utils.ts

@@ -3,7 +3,7 @@ import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 import { UNPayeeManagementComponentProps } from './UNPayeeManagementComponent';
-import { DISPATCH_OPEN_PLAID, DISPATCH_PLAID_EXIT, DISPATCH_PLAID_RESPONSE, DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_COUNTERPARTY_DELETED, DISPATCH_OPEN_PLAID, DISPATCH_PLAID_EXIT, DISPATCH_PLAID_RESPONSE, DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
 import { LinkError, LinkSuccess } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent } from '../../messages/webMessages/plaidMessages';
 
@@ -28,6 +28,7 @@ export const getPayeeParams = (props: UNPayeeManagementComponentProps) => {
     ${counterPartiesPerPageParam}
     hide-title="${props.hideTitle || false}"
     hide-counterparty-actions-button="${props.hideCounterpartyActionsButton || false}"
+    show-account-type-selector="${props.showAccountTypeSelector ?? false}"
     ${menuPlaceholderParam}
     ${flowPlaceholderParam}
     ${payeeCreationPlaceholderParam}
@@ -49,6 +50,7 @@ export const getPayeeManagementScript = () => {
     ${DISPATCH_PLAID_EXIT}
     ${DISPATCH_OPEN_PLAID}
     ${DISPATCH_REQUEST_REFRESH}
+    ${DISPATCH_COUNTERPARTY_DELETED}
   `;
 };