react-native-unit-components 1.10.0 → 1.12.0

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,22 +38,155 @@ export const injectHtmlFullScreenHeight = (currentWebView: WebView | null, botto
   `);
 };
 
-export const isAddToWalletFromRequestRendering = (data: BottomSheetSlotData): boolean => {
-  return data.requestRenderingEvent?.data?.nativeComponent.includes('AddToWallet') ?? false;
-};
-
-export const isAddToWalletByComponentParams = (data: WebComponentData): boolean => {
-  return data.params?.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 extractCardIdFromComponentParams = (data: WebComponentData): string | null => {
-  const regex = /card-id=(\d+)/;
-  const match = data.params?.match(regex);
+const extractValueFromRequestRenderingEvent = (event: RequestRenderingEvent, key: string): string | undefined => {
+  const paramsString = getParamsFromRequestRenderingEvent(event);
 
+  const regexString = `${key}=([^\\ \\s]+)`;
+  const regex = new RegExp(regexString);
+  const match = paramsString?.match(regex);
   if (match && match[1]) {
-    const cardId = match[1];
-    return cardId;
+    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

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import {
+  BottomSheetNativeComponentType, BottomSheetNativePlaceType,
+  NativeComponentData,
+  ScrollState,
+} from '../../../../types/internal/bottomSheet.types';
+import { useDispatch } from 'react-redux';
+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;
+}
+
+const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps) => {
+  const dispatch = useDispatch();
+  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();
+    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 renderNativeComponent = () => {
+    switch (props.nativeComponentData?.component.type) {
+      case BottomSheetNativeComponentType.AddToWalletComponent:
+        return (
+          <UNAddToWalletComponent
+            {...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 (
+    renderNativeComponent()
+  );
+};
+
+export default UNBottomSheetNativeComponent;

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/index.ts

@@ -0,0 +1 @@
+export * from './UNBottomSheetNativeComponent';

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

@@ -0,0 +1,199 @@
+import { WebComponent } from '../../../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../../../types/internal/webComponent.types';
+import {
+  getBottomSheetScript,
+  injectHtmlFullScreenHeight,
+  renderingBottomSheetRequest,
+} from '../../UNBottomSheetComponent.utils';
+import React, { useEffect, useRef } from 'react';
+import WebView from 'react-native-webview';
+import { WebViewMessage } from '../../../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../../../messages/webMessages/pageMessage';
+import {
+  RequestRenderingEvent,
+  UnitMessage,
+} from '../../../../messages/webMessages/unitMessages';
+import {
+  BottomSheetNativePlaceType, BottomSheetRenderingType,
+  ScrollState, SlotRendering,
+} from '../../../../types/internal/bottomSheet.types';
+import { CardActivatedEvent, CardMessage, CardStatusChangedEvent } from '../../../../messages/webMessages/cardMessage';
+import { setEvent } from '../../../../slices/SharedEventsSlice';
+import { AccountChangedEvent, AccountMessage } from '../../../../messages/webMessages/accountMessage';
+import { ActivityFiltersChangedEvent, ActivityMessage } from '../../../../messages/webMessages/activityMessage';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../../../store';
+import {
+  setComponentHeight,
+  setIsComponentLoading,
+  setScrollState, setShouldEnableBottomSheetScroll,
+} from '../../../../slices/BottomSheetSlice';
+import { getAccountActionType } from '../../../UNAccountComponent/UNAccountComponent.utils';
+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;
+  componentName?: WebComponentType,
+  componentResourceId?: string,
+}
+
+const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
+  const dispatch = useDispatch();
+  const webRef = useRef<WebView>(null);
+  const scrollState = useSelector((state: RootState) => state.bottomSheet.scrollState);
+  const nativePlace = props.requestRenderingEvent?.data?.nativePlace;
+
+  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;
+          }
+        }
+      }
+    };
+
+    scrollStateForSlot();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.componentName, props.requestRenderingEvent.data.nativePlace]);
+
+  const _onWebMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case PageMessage.PAGE_LOADED:
+        if (webRef.current && props.requestRenderingEvent) {
+          renderingBottomSheetRequest(webRef.current, props.requestRenderingEvent);
+        }
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const height = (message.details as HeightEvent).height;
+        switch (nativePlace) {
+          case BottomSheetNativePlaceType.overFullScreen:
+            injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+            break;
+          case BottomSheetNativePlaceType.modal:
+            injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+            break;
+          default:
+            dispatch(setComponentHeight(height < overFullScreenHeight ? height : overFullScreenHeight));
+            break;
+        }
+        dispatch(setIsComponentLoading(false));
+        break;
+      }
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const requestRendering = message.details as RequestRenderingEvent;
+        const requestRenderingSlotData = {
+          type: BottomSheetRenderingType.Slot,
+          data: { requestRenderingEvent: requestRendering, componentResourceId: props.componentResourceId },
+        } as SlotRendering;
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data: requestRenderingSlotData }));
+        break;
+      }
+      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        dispatch(setEvent({ key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
+        break;
+      case CardMessage.CARD_ACTIVATED:
+        dispatch(setEvent({
+          key: CardMessage.CARD_ACTIVATED,
+          data: (message.details as CardActivatedEvent).card,
+        }));
+        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,
+          data: (message.details as CardStatusChangedEvent).card,
+        }));
+        break;
+      case AccountMessage.UNIT_ACCOUNT_CHANGED:
+        dispatch(setEvent({
+          key: AccountMessage.UNIT_ACCOUNT_CHANGED,
+          data: (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),
+        }));
+        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;
+
+    const currY = event.nativeEvent.contentOffset.y;
+
+    if (ScrollState.onTop && currY < 5) {
+      dispatch(setScrollState(ScrollState.onlyBottomSheet));
+      dispatch(setShouldEnableBottomSheetScroll(true));
+    }
+
+    if (scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
+      dispatch(setScrollState(ScrollState.onlyWebView));
+      dispatch(setShouldEnableBottomSheetScroll(false));
+    }
+  };
+
+  return (
+    <WebComponent
+      ref={webRef}
+      type={WebComponentType.slot}
+      presentationMode={PresentationMode.CoverInjectedHeight}
+      script={getBottomSheetScript()}
+      onMessage={_onWebMessage}
+      isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+      handleScroll={_onScrollWebView}
+    />
+  );
+};
+
+export default UNBottomSheetSlotComponent;

package/src/components/UNBottomSheetComponent/components/UNBottomSheetSlotComponent/index.ts

@@ -0,0 +1 @@
+export * from './UNBottomSheetSlotComponent';

package/src/components/UNBottomSheetComponent/components/index.ts

@@ -1 +1,2 @@
-export * from './UNAddToWalletBottomSheetItem';
+export * from './UNBottomSheetSlotComponent';
+export * from './UNBottomSheetNativeComponent';

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -15,13 +15,13 @@ 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,
   SlotRendering,
-  type BottomSheetSlotData,
 } from '../../types/internal/bottomSheet.types';
+import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
@@ -31,12 +31,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { setEvent } from '../../slices/SharedEventsSlice';
+import { UNCardMenuItem } from '../../types/shared';
 
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
   customerToken: string;
   learnMoreUrl?: string;
+  menuItems?: UNCardMenuItem[];
 
   // ui
   theme?: string;
@@ -139,7 +141,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
       case PageMessage.PAGE_HEIGHT:

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -6,6 +6,7 @@ import type { UNCardMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getCardParams = (props: UNCardComponentProps) => {
+  const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
@@ -14,6 +15,7 @@ export const getCardParams = (props: UNCardComponentProps) => {
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
     learn-more-url="${props.learnMoreUrl || ''}"
+    ${menuItemsParam}
   `;
 };
 

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -11,18 +11,23 @@ import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } f
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 
 const { Camera } = NativeModules;
 
 export interface UNCheckDepositComponentProps {
   accountId: string;
-  fee: number;
+  fee?: number;
   customerToken: string;
   theme?: string;
   language?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
-  onDepositCreated?: (checkData: UNCheckDepositData) => void
-  onRestartRequest?: (checkData: UNCheckDepositData) => void
+  onDepositCreated?: (checkData: UNCheckDepositData) => void;
+  onRestartRequest?: (checkData: UNCheckDepositData) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
 }
 
 const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
@@ -68,6 +73,14 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
     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 CheckMessage.CHECK_DEPOSIT_CREATED:
         props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDepositData);
         break;

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.utils.ts

@@ -1,11 +1,15 @@
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
 import type { UNCheckDepositComponentProps } from './UNCheckDepositComponent';
+import { LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getCheckDepositParams = (props: UNCheckDepositComponentProps) => {
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
   return `
     account-id="${props.accountId}"
-    fee="${props.fee}"
+    ${feeParam}
     customer-token="${props.customerToken}"
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
 };
 
@@ -29,12 +33,14 @@ const CHECK_DEPOSIT_LISTENERS = {
           console.log(e)
         })
     });
-  `
+  `,
 };
 
 export const getCheckDepositScript = () => {
   return `
     ${CHECK_DEPOSIT_LISTENERS.paymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${CHECK_DEPOSIT_LISTENERS.restartRequest}
   `;
 };

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -36,6 +36,7 @@ export interface UNMultipleCardsComponentProps {
   language?: string;
   queryFilter?: string;
   hideTitle?: boolean;
+  hideBackToTop?: boolean;
 
   // events
   onLoad?: (response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => void;

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

@@ -12,6 +12,7 @@ export const getMultipleCardsParams = (props: UNMultipleCardsComponentProps) =>
   disable-card-click="${props.disableCardClick || false}"
   ${queryFilter}
   hide-title="${props.hideTitle || false}"
+  hide-back-to-top="${props.hideBackToTop || false}"
   style="height: 100%"
   `;
 };