react-native-unit-components 1.14.0 → 2.0.0

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -4,9 +4,9 @@ import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessag
 import {
   RequestRefreshEvent,
   RequestRenderingEvent,
-  UnitMessage,
+  UnitComponentsMessage,
   UnitRequestRefreshEventTypes,
-} from '../../messages/webMessages/unitMessages';
+} from '../../messages/webMessages/unitComponentsMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
@@ -16,11 +16,17 @@ import {
   injectRefreshEventIfNeeded,
   injectRequestAccountActionScript,
 } from './UNAccountComponent.utils';
-import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
-import type { UNAccountData } from '../../types/shared/account.types';
+import type { 
+  UNAccount, 
+  UNAccountMenuAction, 
+  UNAccountMenuItem, 
+  UNCreditAccount, 
+  UNComponentsError, 
+  UNComponentsOnLoadResponse, 
+  UNComponentsOnLoadResponseData 
+} from '../../types/shared';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import type { UNAccountMenuAction } from '../../types/shared';
 import {
   BottomSheetRenderingType,
   SlotRendering,
@@ -32,13 +38,11 @@ import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import { UNAccountMenuItem, UNCreditAccount } from '../../types/shared';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNAccountComponentProps {
   // inputs
   accountId?: string;
-  customerToken: string;
   menuItems?: UNAccountMenuItem[];
 
   // ui
@@ -46,11 +50,17 @@ export interface UNAccountComponentProps {
   language?: string;
   hideActionsMenuButton?: boolean;
   hideSelectionMenuButton?: boolean;
+  hideAccountStatus?: boolean;
+  hideAccountDetails?: boolean;
+  hideAccountButtons?: boolean;
+  hideAccountCtaBanner?: boolean;
   showLeftToSpend?: boolean;
+  enableFundAccountButton?: boolean;
+  enablePaySomeoneAccountButton?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
-  onAccountChanged?: (account: UNAccountData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNAccount]>) => void;
+  onAccountChanged?: (account: UNAccount) => void;
   onRequestLeftToSpendDetails?: (account: UNCreditAccount) => void;
 }
 
@@ -72,12 +82,12 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   const webRef = useRef<WebView>(null);
   // currentAccountId is used to store the current account id for the "imperative" refresh event.
   const accountIdRef = useRef<string | undefined>(undefined);
-
+  
   useEffect(() => {
     accountIdRef.current = props.accountId;
   }, [props.accountId]);
 
-  const handleAccountChanged = (account: UNAccountData) => {
+  const handleAccountChanged = (account: UNAccount) => {
     accountIdRef.current = account.id;
     props.onAccountChanged && props.onAccountChanged(account);
   };
@@ -96,13 +106,13 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response) {
       // AccountsOnLoadResponse;
-      const accountResponse = response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>;
+      const accountResponse = response[RESPONSE_KEYS.account] as UNComponentsOnLoadResponseData<[UNAccount]>;
       props.onLoad(accountResponse);
       // if accountId is not provided, set the first account as current
       if (!props.accountId && accountResponse.data && accountResponse.data.length > 0) {
@@ -114,7 +124,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     console.error('On Load Error: unexpected response type.');
     return;
   };
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useImperativeHandle(accountRef, () => ({
@@ -136,10 +146,10 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
 
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.account,
           componentResourceId: props.accountId,
@@ -158,14 +168,14 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
-      case UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
+      case UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
         handleRequestLeftToSpendDetails(message.details as UNCreditAccount);
         break;
     }
   };
 
   return (
-    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.account}

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

@@ -1,5 +1,5 @@
 import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
-import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
@@ -10,11 +10,16 @@ export const getAccountParams = (props: UNAccountComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
-    customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
+    hide-account-status="${props.hideAccountStatus || false}"
+    hide-account-details="${props.hideAccountDetails || false}"
+    hide-account-buttons="${props.hideAccountButtons || false}"
+    hide-account-cta-banner="${props.hideAccountCtaBanner || false}"
     show-left-to-spend="${props.showLeftToSpend || false}"
+    enable-fund-account-button="${props.enableFundAccountButton || false}"
+    enable-pay-someone-account-button="${props.enablePaySomeoneAccountButton || false}"
     ${menuItemsParam}
   `;
 };

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -3,12 +3,18 @@ import { Dimensions } from 'react-native';
 import {
   RequestRefreshEvent,
   RequestRenderingEvent,
-  UnitMessage,
+  UnitComponentsMessage,
   UnitRequestRefreshEventTypes,
-} from '../../messages/webMessages/unitMessages';
+} from '../../messages/webMessages/unitComponentsMessages';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import type { 
+  UNComponentsError, 
+  UNComponentsOnLoadResponse, 
+  UNComponentsOnLoadResponseData, 
+  UNActivityOnLoadData, 
+  UNActivityComponentPaginationType 
+} from '../../types/shared';
 import { WebComponent } from '../../webComponent/WebComponent';
 import {
   getActivityParams,
@@ -17,7 +23,6 @@ import {
   injectRefreshEventIfNeeded,
 } from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
-import type { UNActivityOnLoadData } from '../../types/shared/activity.types';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import {
@@ -30,14 +35,12 @@ import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useDispatch } from 'react-redux';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import type { UNActivityComponentPaginationType } from '../../types/shared';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
 export interface UNActivityComponentProps {
   // inputs
-  customerToken: string;
   accountId?: string;
   queryFilter?: string;
 
@@ -50,7 +53,7 @@ export interface UNActivityComponentProps {
   paginationType?: UNActivityComponentPaginationType;
   transactionsPerPage?: number;
   // event
-  onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNActivityOnLoadData>) => void;
 }
 
 export interface UNActivityRef {
@@ -81,7 +84,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     injectFiltersChanged(webRef.current, query);
   };
 
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
@@ -93,13 +96,13 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.authorizations in response && RESPONSE_KEYS.transactions in response) {
       // ActivityOnLoadResponse;
-      const activityOnLoad: UNOnLoadResponseData<UNActivityOnLoadData> = {
+      const activityOnLoad: UNComponentsOnLoadResponseData<UNActivityOnLoadData> = {
         data: {
           [RESPONSE_KEYS.authorizations]: response[RESPONSE_KEYS.authorizations].data,
           [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data,
@@ -115,7 +118,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
 
   const handleWebViewMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.activity,
           componentResourceId: props.accountId,
@@ -130,7 +133,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -144,7 +147,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
   const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.activity}

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

@@ -1,4 +1,4 @@
-import type { RequestRefreshEvent } from './../../messages/webMessages/unitMessages';
+import type { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type { WebView } from 'react-native-webview';
 import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type { UNActivityComponentProps } from './UNActivityComponent';
@@ -10,7 +10,6 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
   const paginationTypeParam = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
   const transactionsPerPageParam = props.transactionsPerPage ? `transactions-per-page="${props.transactionsPerPage}"` : '';
   return `
-    customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
     hide-back-to-top="${props.hideBackToTop || false}"

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -3,16 +3,15 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type {
-  UNOnLoadResponse,
-  UNBookPaymentData,
-  UNError,
-  UNAccountData,
-  UNOnLoadResponseData,
+  UNComponentsOnLoadResponse,
+  UNComponentsError,
+  UNAccount,
+  UNComponentsOnLoadResponseData,
+  UNBookPayment
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
-import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
@@ -22,7 +21,6 @@ import { ensureArray } from '../../utils/onLoadMessages.utils';
 export interface UNBookPaymentComponentProps {
   //inputs
   accountId?: string;
-  customerToken: string;
 
   // ui
   theme?: string;
@@ -35,8 +33,8 @@ export interface UNBookPaymentComponentProps {
   finalStageDoneButton?: boolean;
 
   // events
-  onPaymentCreated?: (data: UNBookPaymentData) => void;
-  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
+  onPaymentCreated?: (data: UNBookPayment) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNAccount]>) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
 }
@@ -51,14 +49,14 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response) {
       const account = response[RESPONSE_KEYS.account].data;
       // AccountOnLoadResponse;
-      const paymentOnload: UNOnLoadResponseData<[UNAccountData]> = {
+      const paymentOnload: UNComponentsOnLoadResponseData<[UNAccount]> = {
         data: ensureArray(account),
       };
       props.onLoad(paymentOnload);
@@ -82,9 +80,9 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
         break;
       }
       case PaymentMessage.PAYMENT_CREATED:
-        props.onPaymentCreated && props.onPaymentCreated((message.details as BookPaymentEvent).data);
+        props.onPaymentCreated && props.onPaymentCreated((message.details as UNBookPayment));
         break;
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -101,7 +99,7 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
   const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.bookPayment}
         presentationMode={presentationMode}

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -9,7 +9,6 @@ export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
   const counterpartyNameParam = props.counterPartyName ? `counterparty-name="${props.counterPartyName}"` : '';
   return `
     ${accountIdParam}
-    customer-token="${props.customerToken}"
     is-same-customer="${props.isSameCustomer || false}"
     ${counterpartyAccountIdParam}
     ${counterpartyNameParam}

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -2,11 +2,9 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import BottomSheet from '../../helpers/BottomSheet/BottomSheet';
-import { RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestRenderingEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 
 import { getStylesObject } from './UNBottomSheetComponent.styles';
-import { useAppStateListener } from '../../hooks/useAppStateListener';
-
 import {
   BottomSheetNativePlaceType,
   BottomSheetRenderingType,
@@ -57,9 +55,8 @@ const UNBottomSheetComponent = () => {
     componentName?: WebComponentType,
     componentResourceId?: string
   }>();
+  
   const [currentBottomSheetRenderingMessage, setCurrentBottomSheetRenderingMessage] = useState<BottomSheetRenderingMessage>();
-
-  const isAppActive = useAppStateListener();
   const styles = getStylesObject();
 
   useEffect(() => {
@@ -138,7 +135,7 @@ const UNBottomSheetComponent = () => {
   };
 
   useListenerToEvent({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
   const handleRequestRendering = (rendering: BottomSheetRenderingMessage) => {
     if (rendering === currentBottomSheetRenderingMessage) {
@@ -222,16 +219,18 @@ const UNBottomSheetComponent = () => {
     >
       <BottomSheet
         isOpen={isBottomSheetActive}
-        height={height}
-        sliderMaxHeight={sliderMaxHeight}
-        onClose={() => dispatch(setIsBottomSheetActive(false))}
         onOpen={() => dispatch(setIsBottomSheetActive(true))}
+        onClose={() => dispatch(setIsBottomSheetActive(false))}
+        height={height}
+        animationDuration={200}
+        expandToMaxHeightEnabled={false}
         handleWebViewScroll={() => handleWebViewScroll()}
         shouldEnableBottomSheetScroll={shouldEnableBottomSheetScroll}
         nativePlace={nativePlace}
         isComponentLoading={isComponentLoading}
+        sliderMaxHeight={sliderMaxHeight}
       >
-        {isAppActive && renderBottomSheetComponent()}
+        {renderBottomSheetComponent()}
       </BottomSheet>
     </View>
   );

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

@@ -1,6 +1,6 @@
 import { LISTENERS } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
-import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import type { RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
 import { webViewId } from '../../scripts/html/bodyHtml';
 import {
   BottomSheetNativeACHCreditComponentType,
@@ -10,9 +10,11 @@ import {
   BottomSheetNativeCheckDepositComponentType,
   BottomSheetNativeComponentType,
   BottomSheetNativePlaceType,
+  BottomSheetNativeWirePaymentComponentType,
   BottomSheetSlotData,
 } from '../../types/internal/bottomSheet.types';
 import { WebComponentType } from '../../types/internal/webComponent.types';
+import { parseUNAccountFilters } from '../../types/shared';
 
 export const getBottomSheetScript = () => {
   return LISTENERS.requestRefresh;
@@ -78,68 +80,122 @@ const getAddToWalletComponentDataFromEvent = (event: BottomSheetSlotData, custom
   };
 };
 
-const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeACHCreditComponentType | null => {
+const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeACHCreditComponentType | null => {
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
-  if (!accountId) {
-    console.error('accountId is missing in getACHCreditComponentDataFromEvent');
-    return null;
-  }
+  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');
+  const plaidLinkCustomizationName = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-link-customization-name');
+  const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
+  const sameDay = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'same-day');
+  const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
+  const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);
+
   return {
     type: BottomSheetNativeComponentType.ACHCreditComponent,
     props: {
       accountId: accountId,
-      customerToken: customerToken,
+      fee: fee ? parseInt(fee) : undefined,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
+      withPlaid: withPlaid ? withPlaid === 'true' : undefined,
+      plaidAccountFilters: plaidAccountFiltersArray,
+      plaidLinkCustomizationName: plaidLinkCustomizationName,
+      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
+      sameDay: sameDay ? sameDay === 'true' : undefined,
     },
   };
 };
 
-const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeACHDebitComponentType | null => {
+const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeACHDebitComponentType | null => {
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
-  if (!accountId) {
-    console.error('accountId is missing in getACHDebitComponentDataFromEvent');
-    return null;
-  }
+  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');
+  const isAutoFocus = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-auto-focus');
+  const sameDay = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'same-day');
+  const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
+  const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);
+
   return {
     type: BottomSheetNativeComponentType.ACHDebitComponent,
     props: {
       accountId: accountId,
-      customerToken: customerToken,
+      fee: fee ? parseInt(fee) : undefined,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
+      plaidAccountFilters: plaidAccountFiltersArray,
+      plaidLinkCustomizationName: plaidLinkCustomizationName,
+      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
+      sameDay: sameDay ? sameDay === 'true' : undefined,
     },
   };
 };
 
-const getCheckDepositComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeCheckDepositComponentType | null => {
+const getCheckDepositComponentDataFromEvent = (event: BottomSheetSlotData): 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');
+  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
+  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
+  if (!accountId) {
+    console.error('accountId is missing in getCheckDepositComponentDataFromEvent');
     return null;
   }
   return {
     type: BottomSheetNativeComponentType.CheckDepositComponent,
     props: {
       accountId: accountId,
-      fee: parseInt(fee),
-      customerToken: customerToken,
+      fee: fee ? parseInt(fee) : undefined,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
     },
   };
 };
 
-const getBookPaymentComponentDataFromEvent = (event: BottomSheetSlotData, customerToken: string): BottomSheetNativeBookPaymentComponentType | null => {
+const getBookPaymentComponentDataFromEvent = (event: BottomSheetSlotData): 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;
-  }
+  const isSameCustomer = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'is-same-customer');
+  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');
+
   return {
     type: BottomSheetNativeComponentType.BookPaymentComponent,
     props: {
       accountId: accountId,
       counterPartyAccountId: counterPartyAccountId,
       counterPartyName: counterPartyName,
-      customerToken: customerToken,
+      isSameCustomer: isSameCustomer ? isSameCustomer === 'true' : undefined,
+      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
+    },
+  };
+};
+
+const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeWirePaymentComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  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');
+
+  if (!accountId) {
+    console.error('accountId is missing in getWirePaymentComponentDataFromEvent');
+    return null;
+  }
+  return {
+    type: BottomSheetNativeComponentType.WirePaymentComponent,
+    props: {
+      accountId: accountId,
+      fee: fee ? parseInt(fee) : undefined,
+      isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
     },
   };
 };
@@ -163,19 +219,23 @@ export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
       }
       break;
     case WebComponentType.achCreditPayment:
-      componentData = getACHCreditComponentDataFromEvent(event, customerToken);
+      componentData = getACHCreditComponentDataFromEvent(event);
       break;
 
     case WebComponentType.achDebitPayment:
-      componentData = getACHDebitComponentDataFromEvent(event, customerToken);
+      componentData = getACHDebitComponentDataFromEvent(event);
       break;
 
     case WebComponentType.checkDeposit:
-      componentData = getCheckDepositComponentDataFromEvent(event, customerToken);
+      componentData = getCheckDepositComponentDataFromEvent(event);
       break;
 
     case WebComponentType.bookPayment:
-      componentData = getBookPaymentComponentDataFromEvent(event, customerToken);
+      componentData = getBookPaymentComponentDataFromEvent(event);
+      break;
+
+    case WebComponentType.wirePayment:
+      componentData = getWirePaymentComponentDataFromEvent(event);
       break;
 
     default: