react-native-unit-components 1.15.0 → 2.0.1

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:

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

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { UNCardMenuAction, UNError, UNOnLoadResponse } from '../../types/shared';
+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 { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { WebComponent } from '../../webComponent/WebComponent';
@@ -14,7 +14,6 @@ import { Dimensions } from 'react-native';
 export interface UNCardActionComponentProps {
   // inputs
   cardId: string;
-  customerToken: string;
   action: UNCardMenuAction;
 
   // ui
@@ -22,7 +21,7 @@ export interface UNCardActionComponentProps {
   language?: string;
 
   // callbacks
-  onLoad?: (response: UNOnLoadResponse<undefined>) => void
+  onLoad?: (response: UNComponentsOnLoadResponse<undefined>) => void
   onCloseFlow?: () => void
 }
 
@@ -36,7 +35,7 @@ const UNCardActionComponent = (props: UNCardActionComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
@@ -52,10 +51,10 @@ const UNCardActionComponent = (props: UNCardActionComponentProps) => {
         currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
         break;
       }
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
-      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+      case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
         props.onCloseFlow && props.onCloseFlow();
         break;
     }
@@ -63,7 +62,7 @@ const UNCardActionComponent = (props: UNCardActionComponentProps) => {
 
   const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         type={WebComponentType.cardAction}
         presentationMode={PresentationMode.Inherit}

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

@@ -4,7 +4,6 @@ import { UNCardActionComponentProps } from './UNCardActionComponent';
 export const getCardActionParams = (props: UNCardActionComponentProps) => {
   return `
     card-id="${props.cardId}"
-    customer-token="${props.customerToken}"
     action="${props.action}"
   `;
 };