react-native-unit-components 2.0.2 → 2.2.0

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -1,7 +1,8 @@
 import type { UNACHCreditComponentProps } from './UNACHCreditComponent';
 import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
-import { DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_COUNTERPARTY_DELETED, DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
+import { UNCounterparty } from '../../types/shared';
 
 export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
   const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
@@ -11,13 +12,15 @@ export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
     ${accountIdParam}
     with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
-    ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
+    show-same-day-selection="${props.showSameDaySelection ?? false}"
     ${plaidAccountFiltersParam}
     ${plaidLinkCustomizationNameParam}
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"
+    allow-counterparty-delete="${props.allowCounterpartyDelete ?? false}"
+    show-account-type-selector="${props.showAccountTypeSelector ?? false}"
   `;
 };
 
@@ -29,8 +32,8 @@ export const getACHCreditScript = (appPackageName?: string) => {
     ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
     ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${DISPATCH_COUNTERPARTY_DELETED}
     ${LISTENERS.requestRefresh}
-
   `;
 };
 
@@ -38,3 +41,7 @@ export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: Lin
   const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };
+
+export const injectRequestCounterpartyDeletedScript = (currentWeb: WebView | null, counterparty: UNCounterparty) => {
+  currentWeb?.injectJavaScript(`dispatchCounterpartyDeletedEvent('${counterparty}')`);
+};

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -7,7 +7,8 @@ import type {
   UNComponentsOnLoadResponseData, 
   UNACHOnLoadData, 
   UNACHPayment, 
-  UNPlaidAccountFilter 
+  UNPlaidAccountFilter, 
+  UNCounterparty
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform } from 'react-native';
@@ -15,9 +16,10 @@ import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
   RequestExternalSdkEvent,
+  RequestRenderingEvent,
   UnitComponentsMessage,
 } from '../../messages/webMessages/unitComponentsMessages';
-import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
+import { getACHDebitParams, getACHDebitScript, injectRequestCounterpartyDeletedScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
@@ -29,25 +31,33 @@ import { withReduxStore } from '../../helpers/store/helpers';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { ensureArray } from '../../utils/onLoadMessages.utils';
+import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
 
 export interface UNACHDebitComponentProps {
   accountId?: string;
   theme?: string;
   language?: string;
   isAutoFocus?: boolean;
-  fee?: number;
+  sameDay?: boolean;
+  showSameDaySelection?: boolean;
   onPaymentCreated?: (data: UNACHPayment) => void;
   onLoad?: (response: UNComponentsOnLoadResponse<UNACHOnLoadData>) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
-  sameDay?: boolean;
   plaidAccountFilters?: UNPlaidAccountFilter[];
   plaidLinkCustomizationName?: string;
   initialStageBackButton?: boolean;
   finalStageDoneButton?: boolean;
+  allowCounterpartyDelete?: boolean;
 }
 
 const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
+  const dispatch = useDispatch();
   const [height, setHeight] = useState<number>(0);
   const [appPackageName, setAppPackageName] = useState<string>('');
   const [linkToken, setLinkToken] = useState<string>('');
@@ -64,6 +74,12 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     setPackageNameForAndroid();
   }, []);
 
+  const handleCounterpartyDeleted = (data: UNCounterparty) => {
+    injectRequestCounterpartyDeletedScript(webRef.current, data);
+  };
+  
+  useListenerToEvent({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: handleCounterpartyDeleted });
+
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
       return;
@@ -111,6 +127,21 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
+        const slotData: BottomSheetSlotData = {
+          componentName: WebComponentType.achDebitPayment,
+          componentResourceId: props.accountId,
+          requestRenderingEvent: message.details as RequestRenderingEvent,
+        };
+      
+        const data = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData,
+        } as SlotRendering;
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+      
+        break;
+      }
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;
         setHeight(currentHeight);

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -1,8 +1,9 @@
-import { DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
+import { DISPATCH_COUNTERPARTY_DELETED, DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
 import type { UNACHDebitComponentProps } from './UNACHDebitComponent';
 
 import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
+import { UNCounterparty } from '../../types/shared';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
@@ -11,13 +12,14 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   return `
     ${accountIdParam}
     is-auto-focus="${props.isAutoFocus ?? false}"
-    ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
+    show-same-day-selection="${props.showSameDaySelection ?? false}"
     ${plaidAccountFiltersParam}
     ${plaidLinkCustomizationNameParam}
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"
+    allow-counterparty-delete="${props.allowCounterpartyDelete ?? false}"
   `;
 };
 
@@ -29,6 +31,7 @@ export const getACHDebitScript = (androidPackageName?: string) => {
     ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
     ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${DISPATCH_COUNTERPARTY_DELETED}
     ${LISTENERS.requestRefresh}
     `;
 };
@@ -37,3 +40,7 @@ export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: Lin
   const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };
+
+export const injectRequestCounterpartyDeletedScript = (currentWeb: WebView | null, counterparty: UNCounterparty) => {
+  currentWeb?.injectJavaScript(`dispatchCounterpartyDeletedEvent('${counterparty}')`);
+};

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -23,7 +23,8 @@ import type {
   UNCreditAccount, 
   UNComponentsError, 
   UNComponentsOnLoadResponse, 
-  UNComponentsOnLoadResponseData 
+  UNComponentsOnLoadResponseData, 
+  UNAccountStatusPosition
 } from '../../types/shared';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
@@ -51,6 +52,7 @@ export interface UNAccountComponentProps {
   hideActionsMenuButton?: boolean;
   hideSelectionMenuButton?: boolean;
   hideAccountStatus?: boolean;
+  accountStatusPosition?: UNAccountStatusPosition;
   hideAccountDetails?: boolean;
   hideAccountButtons?: boolean;
   hideAccountCtaBanner?: boolean;
@@ -160,7 +162,6 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
 
         break;

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

@@ -1,7 +1,7 @@
 import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
 import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type WebView from 'react-native-webview';
-import type { UNAccountMenuAction } from '../../types/shared';
+import { UNAccountStatusPosition, type UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 import { LISTENERS } from '../../scripts/html/bodyScript';
 import { DISPATCH_REQUEST_REFRESH } from '../../scripts/html/bodyScript';
@@ -14,6 +14,7 @@ export const getAccountParams = (props: UNAccountComponentProps) => {
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
     hide-account-status="${props.hideAccountStatus || false}"
+    account-status-position="${props.accountStatusPosition || UNAccountStatusPosition.End}"
     hide-account-details="${props.hideAccountDetails || false}"
     hide-account-buttons="${props.hideAccountButtons || false}"
     hide-account-cta-banner="${props.hideAccountCtaBanner || false}"

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -19,7 +19,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import {
   getActivityParams,
   getActivityScript,
-  injectFiltersChanged,
+  injectActivityFiltersChanged,
   injectRefreshEventIfNeeded,
 } from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
@@ -81,7 +81,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
   }));
 
   const dispatchActivityFiltersChanged = (query: string) => {
-    injectFiltersChanged(webRef.current, query);
+    injectActivityFiltersChanged(webRef.current, query);
   };
 
   useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });

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

@@ -31,6 +31,6 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
   }
 };
 
-export const injectFiltersChanged = (currentWeb: WebView | null, query: string) => {
+export const injectActivityFiltersChanged = (currentWeb: WebView | null, query: string) => {
   currentWeb?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
 };

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

@@ -18,3 +18,9 @@ export const fullScreenHeight =
     : Dimensions.get('window').height;
 
 export const overFullScreenHeight = Dimensions.get('window').height * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+
+export const TOP_PADDING = 48;
+export const BOTTOM_PADDING = 24;
+export const LEFT_PADDING = 24;
+export const RIGHT_PADDING = 24;
+export const VERTICAL_PADDING = TOP_PADDING + BOTTOM_PADDING; // For adjusting injected height

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

@@ -9,12 +9,13 @@ import {
   BottomSheetNativeBookPaymentComponentType,
   BottomSheetNativeCheckDepositComponentType,
   BottomSheetNativeComponentType,
+  BottomSheetNativeCreateCardComponentType,
   BottomSheetNativePlaceType,
   BottomSheetNativeWirePaymentComponentType,
   BottomSheetSlotData,
 } from '../../types/internal/bottomSheet.types';
 import { WebComponentType } from '../../types/internal/webComponent.types';
-import { parseUNAccountFilters } from '../../types/shared';
+import { parseUNAccountFilters, parseUNCreateCardTypes } from '../../types/shared';
 
 export const getBottomSheetScript = () => {
   return LISTENERS.requestRefresh;
@@ -88,13 +89,13 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  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 showSameDaySelection = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'show-same-day-selection');
   const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
   const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);
 
@@ -104,7 +105,6 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
       withPlaid: withPlaid ? withPlaid === 'true' : undefined,
@@ -112,6 +112,7 @@ const getACHCreditComponentDataFromEvent = (event: BottomSheetSlotData): BottomS
       plaidLinkCustomizationName: plaidLinkCustomizationName,
       isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
       sameDay: sameDay ? sameDay === 'true' : undefined,
+      showSameDaySelection: showSameDaySelection ? showSameDaySelection === 'true' : undefined
     },
   };
 };
@@ -120,12 +121,12 @@ const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSh
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  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 showSameDaySelection = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'show-same-day-selection');
   const plaidAccountFiltersAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'plaid-account-filters');
   const plaidAccountFiltersArray = parseUNAccountFilters(plaidAccountFiltersAsString);
 
@@ -135,13 +136,13 @@ const getACHDebitComponentDataFromEvent = (event: BottomSheetSlotData): BottomSh
       accountId: accountId,
       theme: theme,
       language: language,
-      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,
+      showSameDaySelection: showSameDaySelection ? showSameDaySelection === 'true' : undefined
     },
   };
 };
@@ -201,7 +202,6 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
   const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
-  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');
@@ -216,7 +216,6 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
       accountId: accountId,
       theme: theme,
       language: language,
-      fee: fee ? parseInt(fee) : undefined,
       isAutoFocus: isAutoFocus ? isAutoFocus === 'true' : undefined,
       initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
       finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
@@ -224,6 +223,28 @@ const getWirePaymentComponentDataFromEvent = (event: BottomSheetSlotData): Botto
   };
 };
 
+const getCreateCardComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeCreateCardComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
+  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
+  const virtualCardFee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'virtual-card-fee');
+  const physicalCardFee = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'physical-card-fee');
+  const cardTypesAsString = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'card-types');
+  const cardTypes = parseUNCreateCardTypes(cardTypesAsString);
+
+  return {
+    type: BottomSheetNativeComponentType.CreateCardComponent,
+    props: {
+      accountId: accountId,
+      theme: theme,
+      language: language,
+      cardTypes: cardTypes,
+      physicalCardFee: physicalCardFee ? parseInt(physicalCardFee) : undefined,
+      virtualCardFee: virtualCardFee ? parseInt(virtualCardFee) : undefined,
+    },
+  };
+};
+
 export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
   let componentData = null;
   let nativePlace = BottomSheetNativePlaceType.modal;
@@ -262,6 +283,10 @@ export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
       componentData = getWirePaymentComponentDataFromEvent(event);
       break;
 
+    case WebComponentType.createCard:
+      componentData = getCreateCardComponentDataFromEvent(event);
+      break;
+
     default:
       break;
   }

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

@@ -13,6 +13,7 @@ import UNCheckDepositComponent from '../../../UNCheckDepositComponent/UNCheckDep
 import UNACHDebitComponent from '../../../UNACHDebitComponent/UNACHDebitComponent';
 import UNBookPaymentComponent from '../../../UNBookPaymentComponent/UNBookPaymentComponent';
 import UNWirePaymentComponent from '../../../UNWirePaymentComponent/UNWirePaymentComponent';
+import UNCreateCardComponent from '../../../UNCreateCardComponent/UNCreateCardComponent';
 import { PageMessage } from '../../../../messages/webMessages/pageMessage';
 import { useListenerToEvent } from '../../../../hooks/useListenerToEvent';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
@@ -115,6 +116,12 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
             {...props.nativeComponentData.component.props}
           />
         );
+      case BottomSheetNativeComponentType.CreateCardComponent:
+        return (
+          <UNCreateCardComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
     }
   };
 
@@ -127,7 +134,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
       );
     case BottomSheetNativePlaceType.overFullScreen:
       return (
-        <UNKeyboardAvoidingView style={{ height }}>
+        <UNKeyboardAvoidingView style={{ height, padding, paddingTop, paddingBottom }}>
           {renderNativeComponent()}
         </UNKeyboardAvoidingView>
       );

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

@@ -30,11 +30,13 @@ import {
 } from '../../../../slices/BottomSheetSlice';
 import { getAccountActionType } from '../../../UNAccountComponent/UNAccountComponent.utils';
 import { UNAccountAction } from '../../../UNAccountComponent/UNAccountComponent';
-import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import { BOTTOM_PADDING, fullScreenHeight, LEFT_PADDING, overFullScreenHeight, RIGHT_PADDING, statusBarHeight, TOP_PADDING, VERTICAL_PADDING } from '../../UNBottomSheetComponent.constants';
 import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bottomSheetMessage';
 import { OpenPlaidEvent, PlaidMessage } from '../../../../messages/webMessages/plaidMessages';
 import { PayeeCounterpartyEvent, PayeeManagementMessage } from '../../../../messages/webMessages/payeeManagementMessage';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
+import { MultipleCardsFiltersChangedEvent, MultipleCardsMessage } from '../../../../messages/webMessages/multipleCardsMessage';
+import { View } from 'react-native';
 
 export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
@@ -100,17 +102,35 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
       case PageMessage.PAGE_HEIGHT: {
         const height = (message.details as HeightEvent).height;
         switch (nativePlace) {
-          case BottomSheetNativePlaceType.overFullScreen:
-            injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+          case BottomSheetNativePlaceType.overFullScreen: {
+            if (!props.requestRenderingEvent.data.isPaddingIncluded) {
+              injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight - VERTICAL_PADDING);
+            } else {
+              injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
+            }
             break;
-          case BottomSheetNativePlaceType.modal:
-            injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+          }
+          case BottomSheetNativePlaceType.modal:  {
+            if (!props.requestRenderingEvent.data.isPaddingIncluded) {
+              injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight - VERTICAL_PADDING);
+            } else {
+              injectHtmlFullScreenHeight(webRef.current, fullScreenHeight - statusBarHeight);
+            }
             break;
+          }
           case BottomSheetNativePlaceType.menu: case BottomSheetNativePlaceType.contentHeight:
             if (height < overFullScreenHeight) {
-              dispatch(setComponentHeight(height));
+              dispatch(setComponentHeight(
+                props.requestRenderingEvent.data.isPaddingIncluded ? 
+                  height :
+                  height + VERTICAL_PADDING
+              ));
             } else {
-              dispatch(setComponentHeight(overFullScreenHeight));
+              dispatch(setComponentHeight(
+                props.requestRenderingEvent.data.isPaddingIncluded ? 
+                  overFullScreenHeight :
+                  overFullScreenHeight + VERTICAL_PADDING
+              ));
             }
             break;
         }
@@ -161,6 +181,12 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
           data: (message.details as ActivityFiltersChangedEvent),
         }));
         break;
+      case MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED:
+        dispatch(setEvent({
+          key: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED,
+          data: (message.details as MultipleCardsFiltersChangedEvent),
+        }));
+        break;
       case PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED: {
         dispatch(setEvent({
           key: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
@@ -187,19 +213,29 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
       dispatch(setShouldEnableBottomSheetScroll(false));
     }
   };
+  
+  // If isPaddingIncluded is true, we don't need to add padding to the web component
+  const paddingStyle = !props.requestRenderingEvent.data.isPaddingIncluded ? {
+    paddingTop: TOP_PADDING,
+    paddingBottom: BOTTOM_PADDING,
+    paddingLeft: LEFT_PADDING,
+    paddingRight: RIGHT_PADDING,
+  } : {};
 
   return (
-    <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.slot}
-        presentationMode={PresentationMode.CoverInjectedHeight}
-        script={getBottomSheetScript()}
-        onMessage={_onWebMessage}
-        isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
-        handleScroll={_onScrollWebView}
-      />
-    </UNKeyboardAvoidingView>
+    <View style={paddingStyle}>
+      <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.slot}
+          presentationMode={PresentationMode.CoverInjectedHeight}
+          script={getBottomSheetScript()}
+          onMessage={_onWebMessage}
+          isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+          handleScroll={_onScrollWebView}
+        />
+      </UNKeyboardAvoidingView>
+    </View>
   );
 };
 

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -45,6 +45,8 @@ export interface UNCardComponentProps {
   hideActionsMenuButton?: boolean;
   hideCardTitle?: boolean;
   hideSensitiveDataButton?: boolean;
+  showCardTypeSubtitle?: boolean;
+  showCardHolderSubtitle?: boolean;
 
   // events
   onLoad?: (response: UNComponentsOnLoadResponse<UNCard>) => void;

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

@@ -18,6 +18,8 @@ export const getCardParams = (props: UNCardComponentProps) => {
     learn-more-url="${props.learnMoreUrl || ''}"
     ${feeParam}
     ${menuItemsParam}
+    show-card-type-subtitle="${props.showCardTypeSubtitle || false}"
+    show-card-holder-subtitle="${props.showCardHolderSubtitle || false}"
   `;
 };
 
@@ -40,8 +42,9 @@ export const injectRequestHideSensitiveDataScript = (currentWeb: WebView | null)
 export const injectRequestShowSensitiveDataScript = (currentWeb: WebView | null) => {
   currentWeb?.injectJavaScript(`dispatchRequestShowSensitiveData('${WebComponentType.card}')`);
 };
+
 export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => {
   if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.card.valueOf()) && requestRefreshEvent.resourceId == cardId) {
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
   }
-};
+};

package/src/components/UNCreateCardComponent/UNCreateCardComponent.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { getCreateCardParams } from './UNCreateCardComponent.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { UNCard, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { UNCreateCardComponentResources, UNCreateCardType } from '../../types/shared/createCard.types';
+import { CardCreatedEvent, CardMessage } from '../../messages/webMessages/cardMessage';
+import { useDispatch } from 'react-redux';
+import { setEvent } from '../../slices/SharedEventsSlice';
+
+export interface UNCreateCardComponentProps {
+  // inputs
+  accountId?: string;
+  cardTypes: UNCreateCardType[];
+  virtualCardFee?: number;
+  physicalCardFee?: number;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNComponentsOnLoadResponse<UNCreateCardComponentResources>) => void
+  onCardCreated?: (cardData: UNCard) => void
+}
+
+const UNCreateCardComponent = (props: UNCreateCardComponentProps) => {
+  const dispatch = useDispatch();
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNComponentsError);
+      return;
+    }
+    if (RESPONSE_KEYS.createCardResult in response) {
+      const createCardResponse = response[RESPONSE_KEYS.createCardResult] as UNComponentsOnLoadResponseData<UNCreateCardComponentResources>;
+      props.onLoad(createCardResponse);
+      return;
+    }
+    console.error('On Load Error: unexpected response type.');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case UnitComponentsMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+      case CardMessage.CARD_CREATED:
+        dispatch(setEvent({
+          key: CardMessage.CARD_CREATED,
+          data: (message.details as CardCreatedEvent),
+        }));
+        props.onCardCreated && props.onCardCreated(message.details as UNCard);
+        break;
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+  return <UNBaseView style={style} onLoadError={handleUnitOnLoad} fallback={<></>}>
+    <WebComponent
+      type={WebComponentType.createCard}
+      presentationMode={PresentationMode.Inherit}
+      params={getCreateCardParams(props)}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      theme={props.theme}
+      language={props.language}
+    />
+  </UNBaseView>;
+};
+
+export default withReduxStore<UNCreateCardComponentProps>(UNCreateCardComponent);