react-native-unit-components 1.14.0 → 2.0.0

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

@@ -7,14 +7,15 @@ import {
 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 UNWirePaymentComponent from '../../../UNWirePaymentComponent/UNWirePaymentComponent';
 import { PageMessage } from '../../../../messages/webMessages/pageMessage';
 import { useListenerToEvent } from '../../../../hooks/useListenerToEvent';
+import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
 
 export interface UNBottomSheetNativeComponentProps {
   nativeComponentData: NativeComponentData;
@@ -24,6 +25,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
   const dispatch = useDispatch();
   const [height, setHeight] = useState<number>(0);
   const [paddingTop, setPaddingTop] = useState<number>(0);
+  const [paddingBottom, setPaddingBottom] = useState<number>(0);
   const [padding, setPadding] = useState<number>(0);
 
   const updateComponetHeight = (height: number) => {
@@ -37,13 +39,11 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
   useEffect(() => {
     const setPaddingForNativeComponent = () => {
       const type = props.nativeComponentData?.component.type;
-      if (type === BottomSheetNativeComponentType.ACHCreditComponent || type === BottomSheetNativeComponentType.ACHDebitComponent) {
-        setPaddingTop(30);
-      }
-
       if (type != BottomSheetNativeComponentType.CheckDepositComponent) {
         setPadding(20);
+        setPaddingTop(30);
       }
+      setPaddingBottom(20);
     };
     const setScrollStateForNativeComponent = () => {
       const scrollState = props.nativeComponentData.scrollState ?? ScrollState.unScrollable;
@@ -57,12 +57,20 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
 
   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));
+      let adjustedHeight: number | undefined;
+      switch (props.nativeComponentData.nativePlace) {
+        case BottomSheetNativePlaceType.overFullScreen:
+          adjustedHeight = overFullScreenHeight;
+          break;
+        case BottomSheetNativePlaceType.modal: 
+          adjustedHeight = fullScreenHeight - statusBarHeight;
+          break;
+        default:
+          return;
+      }
+      if (adjustedHeight !== undefined) {
+        setHeight(adjustedHeight);
+        dispatch(setComponentHeight(adjustedHeight));
       }
     };
 
@@ -101,20 +109,35 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
             {...props.nativeComponentData.component.props}
           />
         );
+      case BottomSheetNativeComponentType.WirePaymentComponent:
+        return (
+          <UNWirePaymentComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
     }
   };
 
-  if (props.nativeComponentData.nativePlace === BottomSheetNativePlaceType.modal) {
-    return (
-      <View style={{ height, padding, paddingTop }}>
-        {renderNativeComponent()}
-      </View>
-    );
+  switch (props.nativeComponentData.nativePlace) {
+    case BottomSheetNativePlaceType.modal:
+      return (
+        <UNKeyboardAvoidingView style={{ height, padding, paddingTop, paddingBottom }}>
+          {renderNativeComponent()}
+        </UNKeyboardAvoidingView>
+      );
+    case BottomSheetNativePlaceType.overFullScreen:
+      return (
+        <UNKeyboardAvoidingView style={{ height }}>
+          {renderNativeComponent()}
+        </UNKeyboardAvoidingView>
+      );
+    default: 
+      return (
+        <UNKeyboardAvoidingView>
+          {renderNativeComponent()}
+        </UNKeyboardAvoidingView>
+      );
   }
-
-  return (
-    renderNativeComponent()
-  );
 };
 
 export default UNBottomSheetNativeComponent;

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

@@ -11,8 +11,8 @@ import { WebViewMessage } from '../../../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../../../messages/webMessages/pageMessage';
 import {
   RequestRenderingEvent,
-  UnitMessage,
-} from '../../../../messages/webMessages/unitMessages';
+  UnitComponentsMessage,
+} from '../../../../messages/webMessages/unitComponentsMessages';
 import {
   BottomSheetNativePlaceType, BottomSheetRenderingType,
   ScrollState, SlotRendering,
@@ -34,6 +34,7 @@ import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../U
 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';
 
 export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
@@ -88,7 +89,7 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
     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:
@@ -105,14 +106,18 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
           case BottomSheetNativePlaceType.modal:
             injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
             break;
-          default:
-            dispatch(setComponentHeight(height < overFullScreenHeight ? height : overFullScreenHeight));
+          case BottomSheetNativePlaceType.menu: case BottomSheetNativePlaceType.contentHeight:
+            if (height < overFullScreenHeight) {
+              dispatch(setComponentHeight(height));
+            } else {
+              dispatch(setComponentHeight(overFullScreenHeight));
+            }
             break;
         }
         dispatch(setIsComponentLoading(false));
         break;
       }
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const requestRendering = message.details as RequestRenderingEvent;
         const requestRenderingSlotData = {
           type: BottomSheetRenderingType.Slot,
@@ -121,8 +126,8 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data: requestRenderingSlotData }));
         break;
       }
-      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
-        dispatch(setEvent({ key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
+      case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
+        dispatch(setEvent({ key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
         break;
       case CardMessage.CARD_ACTIVATED:
         dispatch(setEvent({
@@ -184,15 +189,17 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
   };
 
   return (
-    <WebComponent
-      ref={webRef}
-      type={WebComponentType.slot}
-      presentationMode={PresentationMode.CoverInjectedHeight}
-      script={getBottomSheetScript()}
-      onMessage={_onWebMessage}
-      isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
-      handleScroll={_onScrollWebView}
-    />
+    <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>
   );
 };
 

package/src/components/UNCardActionComponent/UNCardActionComponent.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { UNCardMenuAction, UNComponentsError, UNComponentsOnLoadResponse } from '../../types/shared';
+import { withReduxStore } from '../../helpers/store/helpers';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { getCardActionParams, getCardActionScript } from './UNCardActionComponent.utils';
+import { Dimensions } from 'react-native';
+
+export interface UNCardActionComponentProps {
+  // inputs
+  cardId: string;
+  action: UNCardMenuAction;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNComponentsOnLoadResponse<undefined>) => void
+  onCloseFlow?: () => void
+}
+
+const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+const UNCardActionComponent = (props: UNCardActionComponentProps) => {
+  const [defaultHeight, setDefaultHeight] = useState<number>();
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNComponentsError);
+      return;
+    }
+
+    props.onLoad({ data: undefined });
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    if (!message) return;
+
+    switch (message.type) {
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+        break;
+      }
+      case UnitComponentsMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
+        props.onCloseFlow && props.onCloseFlow();
+        break;
+    }
+  };
+
+  const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
+      <WebComponent
+        type={WebComponentType.cardAction}
+        presentationMode={PresentationMode.Inherit}
+        params={getCardActionParams(props)}
+        theme={props.theme}
+        language={props.language}
+        script={getCardActionScript()}
+        onMessage={message => handleMessage(message)}
+        isScrollable={true}
+      />
+    </UNBaseView>
+  );
+};
+
+export default withReduxStore<UNCardActionComponentProps>(UNCardActionComponent);

package/src/components/UNCardActionComponent/UNCardActionComponent.utils.ts

@@ -0,0 +1,15 @@
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import { UNCardActionComponentProps } from './UNCardActionComponent';
+
+export const getCardActionParams = (props: UNCardActionComponentProps) => {
+  return `
+    card-id="${props.cardId}"
+    action="${props.action}"
+  `;
+};
+
+export const getCardActionScript = () => {
+  return `
+    ${LISTENERS.requestRefresh}
+  `;
+};

package/src/components/UNCardActionComponent/index.ts

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

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -1,7 +1,7 @@
 import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
@@ -12,7 +12,7 @@ import {
   injectRequestCardActionScript,
   injectRequestShowSensitiveDataScript, injectRequestHideSensitiveDataScript,
 } from './UNCardComponent.utils';
-import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
+import { UNComponentsOnLoadResponse, UNCard, UNComponentsError, UNCardMenuAction, UNCardMenuItem } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { NativeModules } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
@@ -22,7 +22,7 @@ import {
 } 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 { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { useLaunchInitialize } from '../../helpers/pushProvisioningService/hooks/useLaunchInitialize';
 import { selectWallet } from '../../slices/pushProvisioningSlice';
@@ -30,14 +30,13 @@ 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';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
-  customerToken: string;
   learnMoreUrl?: string;
+  fee?: number;
   menuItems?: UNCardMenuItem[];
 
   // ui
@@ -48,9 +47,11 @@ export interface UNCardComponentProps {
   hideSensitiveDataButton?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<UNCardData>) => void;
-  onStatusChanged?: (card: UNCardData) => void;
-  onCardActivated?: (card: UNCardData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNCard>) => void;
+  onStatusChanged?: (card: UNCard) => void;
+  onCardActivated?: (card: UNCard) => void;
+  onAction?: (action: UNCardMenuAction) => void;
+  onActionsMenuClicked?: () => void;
   pushProvisioningModule?: typeof NativeModules;
 }
 
@@ -85,13 +86,13 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     },
   }));
 
-  const cardStatusChanged = (card: UNCardData) => {
+  const cardStatusChanged = (card: UNCard) => {
     if (props.onStatusChanged) {
       props.onStatusChanged(card);
     }
   };
 
-  const cardActivated = (card: UNCardData) => {
+  const cardActivated = (card: UNCard) => {
     if (props.onCardActivated) {
       props.onCardActivated(card);
     }
@@ -107,13 +108,13 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.card in response) {
       // CardOnLoadResponse
-      props.onLoad(response[RESPONSE_KEYS.card] as UNOnLoadResponse<UNCardData>);
+      props.onLoad(response[RESPONSE_KEYS.card] as UNComponentsOnLoadResponse<UNCard>);
       return;
     }
 
@@ -121,7 +122,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     return;
   };
 
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
   useListenerToEvent({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
 
@@ -129,7 +130,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     if (!message || !message.details) return;
 
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.card,
           componentResourceId: props.cardId,
@@ -142,34 +143,52 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         } as SlotRendering;
 
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+
+        sendActionCallbackIfNeeded(slotData.requestRenderingEvent);
         break;
       }
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
     }
   };
 
-  useEffect(() => {
-    UnitSDK.setCustomerToken(props.customerToken);
-  }, [props.customerToken]);
+  const sendActionCallbackIfNeeded = (requestRenderingEvent: RequestRenderingEvent) => {
+    switch (requestRenderingEvent.data.nativeComponentName) {
+      case WebComponentType.cardMenu:
+        props.onActionsMenuClicked && props.onActionsMenuClicked();
+        break;
+      case WebComponentType.cardAction: {
+        // Find the relevant action from the native component
+        const actionMatch = requestRenderingEvent.data.nativeComponent.match(/action=([^\s]+)/);
+        if (actionMatch && props.onAction) {
+          const actionString = actionMatch[1] as string;
+
+          // Check if the actionString matches any value in the UNCardMenuAction enum
+          if (Object.values(UNCardMenuAction).includes(actionString as UNCardMenuAction)) {
+            props.onAction(actionString as UNCardMenuAction);
+          }
+        }
+      }
+    }
+  };
 
   useEffect(() => {
     if (props.pushProvisioningModule) {
-      UnitSDK.setPushProvisioningModule(props.pushProvisioningModule);
+      UnitComponentsSDK.setPushProvisioningModule(props.pushProvisioningModule);
     }
   }, [props.pushProvisioningModule]);
 
   useEffect(() => {
-    if (signedNonce || !UnitSDK.getPushProvisionModule()) return;
+    if (signedNonce || !UnitComponentsSDK.getPushProvisionModule()) return;
     initializePushProvisioning();
   }, []);
 
   return (
-    <UNBaseView style={{ height, width: '100%', minWidth: 235 }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%', minWidth: 235 }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}

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

@@ -1,20 +1,22 @@
 import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
-import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import type { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type { UNCardMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
+import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
   return `
     card-id="${props.cardId}"
-    customer-token="${props.customerToken}"
-    enable-mobile-wallet="${!!props.pushProvisioningModule}"
+    enable-mobile-wallet="${!!(props.pushProvisioningModule || UnitComponentsSDK.getPushProvisionModule())}"
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
     learn-more-url="${props.learnMoreUrl || ''}"
+    ${feeParam}
     ${menuItemsParam}
   `;
 };

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,32 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { NativeModules, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { getCheckDepositParams, getCheckDepositScript } from './UNCheckDepositComponent.utils';
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
-import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
-import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import type { UNCheckDeposit, UNAccount, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
 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';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
-
-const { Camera } = NativeModules;
+import UNPermissionsModule from '../../nativeModulesHelpers/UNPermissionsHelper/UNPermissionsHelper';
 
 export interface UNCheckDepositComponentProps {
   accountId: string;
   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;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNAccount>) => void;
+  onDepositCreated?: (checkData: UNCheckDeposit) => void;
+  onRestartRequest?: (checkData: UNCheckDeposit) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
 }
@@ -38,7 +35,7 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   useEffect(() => {
     const requestCameraAccess = async () => {
       try {
-        await Camera.requestAccess();
+        await UNPermissionsModule.camera();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
         console.error(error);
@@ -56,13 +53,13 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response) {
       // AccountOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<UNAccountData>);
+      props.onLoad(response[RESPONSE_KEYS.account] as UNComponentsOnLoadResponseData<UNAccount>);
       return;
     }
 
@@ -83,12 +80,12 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
         break;
       }
       case CheckMessage.CHECK_DEPOSIT_CREATED:
-        props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDepositData);
+        props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDeposit);
         break;
       case CheckMessage.CHECK_DEPOSIT_RESTART_REQUEST:
-        props.onRestartRequest && props.onRestartRequest(message.details as UNCheckDepositData);
+        props.onRestartRequest && props.onRestartRequest(message.details as UNCheckDeposit);
         break;
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -105,7 +102,7 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.checkDeposit}
         presentationMode={presentationMode}

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

@@ -7,7 +7,6 @@ export const getCheckDepositParams = (props: UNCheckDepositComponentProps) => {
   return `
     account-id="${props.accountId}"
     ${feeParam}
-    customer-token="${props.customerToken}"
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;