react-native-unit-components 1.6.1 → 1.7.1

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -1,22 +1,21 @@
-import React, { useImperativeHandle, useRef, useState } from 'react';
-import { Dimensions, NativeModule, View } from 'react-native';
+import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
+import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import EventBus from '../../helpers/EventBus';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { WebComponent } from '../../webComponent/WebComponent';
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
-import { getCardParams, getCardScript, injectRefreshEventIfNeeded, launchStartCardProvisioning, injectOpenActionsMenuScript, injectRequestCardActionScript } from './UNCardComponent.utils';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
-import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../sharedTypes';
+import { getCardParams, getCardScript, injectRefreshEventIfNeeded, injectOpenActionsMenuScript, injectRequestCardActionScript } from './UNCardComponent.utils';
+import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
-import { launchGetWallets } from './UNCardComponent.utils';
 import type { NativeModules } from 'react-native';
-import type { UNWallet } from 'src/sharedTypes/wallet.types';
-import { CardAddToWalletErrors, UNCardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../messages/nativeMessages/cardMessage';
-import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { BottomSheetRenderingType, SlotRendering, 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';
 export interface UNCardComponentProps {
   // inputs
   cardId: string;
@@ -43,11 +42,6 @@ export interface CardRef {
 
 export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
   const [height, setHeight] = useState(0);
-  const windowWidth = Dimensions.get('window').width;
-
-  const walletRef = useRef<UNWallet | null>(null);
-  // walletRef can be changed to a state. (After the change of the listener hook)
-  // TODO: walletState and checks it works. =)
 
   const webRef = useRef<WebView>(null);
 
@@ -76,16 +70,6 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
     injectRefreshEventIfNeeded(webRef.current, data, props.cardId);
   };
 
-  const startPushProvisioning = async (data: CardStartPushProvisioningEvent) => {
-    if (data.cardId !== props.cardId) return;
-    onAddToWalletClicked();
-  };
-
-  const getAddToWalletStatus = (data: CardGetAddToWalletStatusEvent) => {
-    if (data.cardId !== props.cardId) return;
-    getWallets();
-  };
-
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
       return;
@@ -109,20 +93,24 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToBus({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
   useListenerToBus({ busEventKey: CardMessage.CARD_ACTIVATED, action: cardActivated });
-  useListenerToBus({ busEventKey: CardNativeMessage.CARD_START_PUSH_PROVISIONING, action: startPushProvisioning });
-  useListenerToBus({ busEventKey: CardNativeMessage.CARD_GET_ADD_TO_WALLET_STATUS, action: getAddToWalletStatus });
 
   const handleMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
       case UnitMessage.UNIT_REQUEST_RENDERING: {
-        const event: BottomSheetSlotData = {
+        const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.card,
           componentResourceId: props.cardId,
           requestRenderingEvent: message.details as RequestRenderingEvent
         };
-        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);
+
+        const event = {
+          type: BottomSheetRenderingType.Slot,
+          data: slotData
+        } as SlotRendering;
+
+        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
         break;
       }
       case PageMessage.PAGE_HEIGHT:
@@ -134,37 +122,18 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
     }
   };
 
-  const getWallets = async () => {
-
-    try {
+  useEffect(() => {
+    UnitSDK.setCustomerToken(props.customerToken);
+  }, [props.customerToken]);
 
-      const walletResponse = await launchGetWallets(props.customerToken, props.cardId, props.pushProvisioningModule as NativeModule);
-
-      if (!walletResponse) return;
-
-      walletRef.current = walletResponse;
-
-      const walletStatus: UNCardAddToWalletStatusEvent = { status: walletResponse.status };
-      EventBus.Instance.event(CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, walletStatus);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const onAddToWalletClicked = async () => {
-    try {
-      await launchStartCardProvisioning(props.pushProvisioningModule as NativeModule, walletRef.current);
-    } catch (error) {
-      if (error instanceof Error) {
-        const parsedError = JSON.parse(error.message);
-        if (parsedError.code === CardAddToWalletErrors.closedNativeWalletScreen) return;
-      }
-      console.log(error);
+  useEffect(() => {
+    if (props.pushProvisioningModule) {
+      UnitSDK.setPushProvisioningModule(props.pushProvisioningModule);
     }
-  };
+  }, [props.pushProvisioningModule]);
 
   return (
-    <View style={{ height }}>
+    <View style={{ height, width: '100%' }}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}
@@ -174,7 +143,6 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
         language={props.language}
         script={getCardScript()}
         onMessage={message => handleMessage(message)}
-        width={windowWidth}
         isScrollable={false}
       />
     </View>

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

@@ -1,13 +1,9 @@
 import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
-import { WebComponentType } from '../../webComponent/WebComponent';
-import type { NativeModules } from 'react-native';
-import { getMobileWalletPayload } from './networking/requests/UNWalletPayloadRequest';
-import { UNWallet, UNWalletCode, UNWalletName } from '../../../src/sharedTypes/wallet.types';
 import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
-import type { UNCardMenuAction } from '../../sharedTypes';
+import type { UNCardMenuAction } from '../../types/shared';
+import { WebComponentType } from '../../types/internal/webComponent.types';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   return `
@@ -38,46 +34,3 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
   }
 };
-
-export const launchGetWallets = async (customerToken: string, cardId: string, pushProvisioningModule: typeof NativeModules) => {
-  try {
-    const env = UnitSDK.getEnv();
-    if (!env) return null;
-
-    const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
-    if (!encryptedPayload) return null;
-
-    const walletsResponse = await pushProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));
-    const parsedWalletsResponse = JSON.parse(walletsResponse);
-    const wallets = parsedWalletsResponse.wallets;
-
-    if (!wallets) return null;
-    if (wallets[0].code === UNWalletCode.Apple) {
-      return ({ name: UNWalletName.Apple, code: UNWalletCode.Apple, status: wallets[0].status });
-    } else {
-      const googleWallet = wallets.filter((wallet: { name: UNWalletName }) => {
-        return wallet.name === UNWalletName.Google;
-      });
-      if (!googleWallet) return;
-      return ({ name: UNWalletName.Google, code: UNWalletCode.Google, status: googleWallet[0].status });
-    }
-  } catch (error) {
-    return Promise.reject(error);
-  }
-
-};
-
-export const launchStartCardProvisioning = async (pushProvisioningModule: typeof NativeModules, wallet: UNWallet | null) => {
-  try {
-    const response = await pushProvisioningModule.launchStartCardProvisioning(
-      JSON.stringify({
-        walletCode: wallet?.code,
-        walletName: wallet?.name
-      }));
-    return response;
-  }
-
-  catch (error) {
-    return Promise.reject(error);
-  }
-};

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { View, NativeModules, Platform } from 'react-native';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
+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 { getCheckDepositParams, getCheckDepositScript } from './UNCheckDepositComponent.utils';
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
-import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
-import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
+import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
+import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 
 const { Camera } = NativeModules;
 

package/src/flows/UNFlows.ts

@@ -0,0 +1,13 @@
+import { UNCardFlows } from './card/UNCardFlows';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+
+export class UNFlows {
+  constructor() {
+    console.log('new Flows instance created');
+  }
+
+  public async startPushProvisioning(cardId: string, customerToken: string) {
+    UnitSDK.setCustomerToken(customerToken);
+    UNCardFlows.startPushProvisioning(cardId, customerToken);
+  }
+}

package/src/flows/card/UNCardFlows.ts

@@ -0,0 +1,25 @@
+import EventBus from '../../helpers/EventBus';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { BottomSheetRenderingType, type WebComponentData, type WebComponentRendering } from '../../types/internal/bottomSheet.types';
+import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+
+export class UNCardFlows {
+  public static startPushProvisioning = async (cardId: string, customerToken: string) => {
+    try {
+      const addToWalletComponentData: WebComponentData = {
+        type: WebComponentType.cardAction,
+        presentationMode: PresentationMode.CoverInjectedHeight,
+        params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
+      };
+
+      const event: WebComponentRendering = {
+        type: BottomSheetRenderingType.WebComponent,
+        data: addToWalletComponentData,
+      };
+
+      EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+}

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { UNWalletCode, type UNWallet, UNWalletName } from '../../../types/shared/wallet.types';
+import { UnitSDK } from '../../../unitSdkManager/UnitSdkManager';
+import { getMobileWalletPayload } from '../../../networking/requests/UNWalletPayloadRequest';
+
+export type CardToEncryptedPayload = {
+  [cardId: string]: string;
+};
+
+export const useCardWallet = (cardId: string) => {
+  const [currentUNWallet, setCurrentUNWallet] = useState<UNWallet>();
+
+  useEffect(() => {
+    const getEncryptedPayload = async () => {
+      const env = UnitSDK.getEnv();
+      const customerToken = UnitSDK.getCustomerToken();
+      if (!env || !customerToken) return;
+
+      const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
+      return encryptedPayload;
+    };
+
+    const getCardWalletData = async ()  => {
+      const currentProvisioningModule = UnitSDK.getPushProvisionModule();
+      if (!currentProvisioningModule) return;
+      try {
+        const encryptedPayload = await getEncryptedPayload();
+        const walletsResponse = await currentProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));
+
+        const unWallet: UNWallet | null = parseWalletsResponse(walletsResponse);
+        if (!unWallet) return;
+        setCurrentUNWallet(unWallet);
+        return;
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    };
+
+    getCardWalletData();
+
+  }, [cardId]);
+
+  return {
+    currentUNWallet
+  };
+
+};
+
+const parseWalletsResponse = (walletsResponse: string): UNWallet | null  => {
+  try {
+    const parsedWalletsResponse = JSON.parse(walletsResponse);
+    const wallets = parsedWalletsResponse.wallets;
+
+    if (!wallets) return null;
+    if (wallets[0].code === UNWalletCode.Apple) {
+      return ({ name: UNWalletName.Apple, code: UNWalletCode.Apple, status: wallets[0].status });
+    } else {
+      const googleWallet = wallets.filter((wallet: { name: UNWalletName }) => {
+        return wallet.name === UNWalletName.Google;
+      });
+      if (!googleWallet) return null;
+      return ({ name: UNWalletName.Google, code: UNWalletCode.Google, status: googleWallet[0].status });
+    }
+  } catch (error) {
+    throw new Error('Error parsing wallet response');
+  }
+};

package/src/helpers/pushProvisioningService/startProvisioning.ts

@@ -0,0 +1,20 @@
+import type { UNWallet } from '../../types/shared/wallet.types';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+
+export const launchStartCardProvisioning = async (wallet: UNWallet | null) => {
+  const pushProvisioningModule = UnitSDK.getPushProvisionModule();
+  if (!pushProvisioningModule) return;
+
+  try {
+    const response = await pushProvisioningModule.launchStartCardProvisioning(
+      JSON.stringify({
+        walletCode: wallet?.code,
+        walletName: wallet?.name
+      }));
+    return response;
+  }
+
+  catch (error) {
+    return Promise.reject(error);
+  }
+};

package/src/index.tsx

@@ -1,5 +1,5 @@
 export * from './components';
 
-export * from './sharedTypes';
+export * from './types/shared';
 
 export { UnitSDK, UNEnvironment } from './unitSdkManager/UnitSdkManager';

package/src/messages/nativeMessages/bottomSheetMessage.ts

@@ -0,0 +1,15 @@
+import type {NativeComponentRendering, WebComponentRendering, SlotRendering } from '../../types/internal/bottomSheet.types';
+
+export enum BottomSheetNativeMessage {
+  START_FLOW = 'startBottomSheetFlow',
+}
+
+export enum CardAddToWalletErrors {
+  closedNativeWalletScreen = 'VP_ERROR_302'
+}
+
+export type StartBottomSheetFlowMessage = SlotRendering | WebComponentRendering | NativeComponentRendering
+
+export type BottomSheetNativeEvent = |
+  StartBottomSheetFlowMessage
+  // BottomSheetChangeFlowMessage - probably, we want to add this message event in the future to alternate between flows

package/src/messages/nativeMessages/cardMessage.ts

@@ -1,27 +1,4 @@
-import type { UNCardAddToWalletStatus } from '../../sharedTypes/wallet.types';
-
-export enum CardNativeMessage {
-  CARD_GET_ADD_TO_WALLET_STATUS = 'cardGetAddToWalletStatus',
-  CARD_UPDATE_ADD_TO_WALLET_STATUS = 'cardUpdateAddToWalletStatus',
-  CARD_START_PUSH_PROVISIONING = 'cardStartPushProvisioning'
-}
-
+// Should we remove it ?
 export enum CardAddToWalletErrors {
   closedNativeWalletScreen = 'VP_ERROR_302'
 }
-export interface UNCardAddToWalletStatusEvent {
-  status: UNCardAddToWalletStatus
-}
-
-export interface CardGetAddToWalletStatusEvent {
-  cardId: string
-}
-
-export interface CardStartPushProvisioningEvent {
-  cardId: string
-}
-
-export type CardNativeEvent =
-  | UNCardAddToWalletStatusEvent
-  | CardGetAddToWalletStatusEvent
-  | CardStartPushProvisioningEvent

package/src/messages/nativeMessages/index.ts

@@ -1,13 +1,13 @@
-import type { CardNativeEvent, CardNativeMessage } from './cardMessage';
+import type { BottomSheetNativeEvent, BottomSheetNativeMessage } from './bottomSheetMessage';
 import type { SDKEvent, SDKMessage } from './sdkMessage';
 
 export type NativeMessageType =
   | SDKMessage
-  | CardNativeMessage
+  | BottomSheetNativeMessage
 
 export type NativeEvent =
-  | CardNativeEvent
   | SDKEvent
+  | BottomSheetNativeEvent
 
 export interface NativeMessage {
   type: NativeMessageType,

package/src/messages/webMessages/accountMessage.ts

@@ -1,4 +1,4 @@
-import type { UNAccountData } from '../../sharedTypes';
+import type { UNAccountData } from '../../types/shared';
 
 export enum AccountMessage {
   UNIT_ACCOUNT_CHANGED = 'unitAccountChanged'

package/src/messages/webMessages/achCreditMessage.ts

@@ -1,4 +1,4 @@
-import type { UNACHData } from '../../sharedTypes';
+import type { UNACHData } from '../../types/shared';
 
 export interface PaymentCreatedEvent {
   data: UNACHData

package/src/messages/webMessages/bookPaymentMessage.ts

@@ -1,4 +1,4 @@
-import type { UNBookPaymentData } from '../../sharedTypes';
+import type { UNBookPaymentData } from '../../types/shared';
 
 export interface PaymentCreatedEvent {
   data: UNBookPaymentData

package/src/messages/webMessages/cardMessage.ts

@@ -1,4 +1,4 @@
-import type { UNCardData } from '../../sharedTypes';
+import type { UNCardData } from '../../types/shared';
 
 export enum CardMessage {
   CARD_ACTIVATED = 'unitCardActivated',

package/src/messages/webMessages/checkMessage.ts

@@ -1,4 +1,4 @@
-import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
+import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
 
 export enum CheckMessage {
   // check deposit

package/src/messages/webMessages/onLoadMessage.ts

@@ -1,6 +1,6 @@
-import type {UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
-import type { UNAuthorizationData } from '../../sharedTypes/authorization.types';
-import type { UNTransactionData } from '../../sharedTypes/transactions.types';
+import type {UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../types/shared';
+import type { UNAuthorizationData } from '../../types/shared/authorization.types';
+import type { UNTransactionData } from '../../types/shared/transactions.types';
 
 export enum RESPONSE_KEYS {
   errors = 'errors',

package/src/messages/webMessages/unitMessages.ts

@@ -9,9 +9,10 @@ export enum UnitMessage {
   UNIT_REQUEST_DOWNLOAD = 'unitRequestDownload',
   UNIT_PLAID_TOKEN_CREATED = 'unitPlaidLinkTokenCreated',
   UNIT_REQUEST_EXTERNAL_SDK = 'unitRequestExternalSdk',
-  UNIT_PLAID_RESPONSE = 'unitPlaidResponse'
-
+  UNIT_PLAID_RESPONSE = 'unitPlaidResponse',
+  PAGE_HEIGHT = 'PAGE_HEIGHT'
 }
+
 export interface RequestRenderingEvent {
   data: RequestRenderingEventData
 }

package/src/{components/UNCardComponent/networking → networking}/common/UNNetworkConstants.ts

@@ -1,4 +1,4 @@
-import { UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
+import { UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
 
 export const APIHeaders = {
   AUTHORIZATION: 'Authorization',

package/src/{components/UNCardComponent/networking → networking}/requests/UNWalletPayloadRequest.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';
-import { UnitSDK, UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
+import { UnitSDK, UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
+
+// TODO: use apiClient class for handling requests.
 
 export const getMobileWalletPayload = async (customerToken: string, cardId: string, env: UNEnvironment) => {
   const headers = {

package/src/scripts/html/bodyHtml.ts

@@ -1,18 +1,6 @@
-export const webViewId = 'webViewContainer';
-
-export enum PresentationMode {
-  /*
-    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.
-
-    Inherit -  inherit the parent size by style of 100 view height
+import { PresentationMode } from '../../types/internal/webComponent.types';
 
-    Default - return the unit component script
-  */
-
-  CoverInjectedHeight = 'coverInjectedHeight',
-  Inherit = 'inherit',
-  Default = 'deafult'
-}
+export const webViewId = 'webViewContainer';
 
 export const getHtmlBody = (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => {
   const currentComponent = `<${unitComponent} ${unitComponentProps || ''} }> </${unitComponent}>`;

package/src/types/internal/bottomSheet.types.ts

@@ -0,0 +1,43 @@
+import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import type { PresentationMode, WebComponentType } from './webComponent.types';
+
+export enum BottomSheetRenderingType {
+  Slot,
+  WebComponent,
+  NativeComponent
+}
+
+export type BottomSheetSlotData = {
+  // The data that rendered by the web view
+  componentName?: WebComponentType,
+  componentResourceId?: string,
+  requestRenderingEvent: RequestRenderingEvent
+}
+
+export type WebComponentData = {
+  type: WebComponentType;
+  presentationMode?: PresentationMode,
+  params?: string;
+  theme?: string;
+  language?: string;
+  windowParams?: string;
+}
+
+export type NativeComponentData = {
+  component: React.ReactNode,
+}
+
+export interface SlotRendering {
+  type: BottomSheetRenderingType.Slot,
+  data: BottomSheetSlotData
+}
+
+export interface WebComponentRendering {
+  type: BottomSheetRenderingType.WebComponent,
+  data: WebComponentData
+}
+
+export interface NativeComponentRendering {
+  type: BottomSheetRenderingType.NativeComponent,
+  data: NativeComponentData
+}

package/src/types/internal/webComponent.types.ts

@@ -0,0 +1,26 @@
+export enum WebComponentType {
+  card = 'unit-elements-card',
+  bookPayment = 'unit-elements-book-payment',
+  activity = 'unit-elements-activity',
+  slot = 'unit-elements-sdk-slot',
+  account = 'unit-elements-account',
+  checkDeposit = 'unit-elements-check-deposit',
+  achDebitPayment = 'unit-elements-ach-debit-payment',
+  achCreditPayment = 'unit-elements-ach-credit-payment',
+
+  cardAction = 'unit-elements-card-action',
+}
+
+export enum PresentationMode {
+  /*
+    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.
+
+    Inherit -  inherit the parent size by style of 100 view height
+
+    Default - return the unit component script
+  */
+
+  CoverInjectedHeight = 'coverInjectedHeight',
+  Inherit = 'inherit',
+  Default = 'deafult'
+}

package/src/{sharedTypes → types/shared}/achCredit.types.ts

@@ -1,4 +1,4 @@
-import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAccountData, UNCounterpartyAccountData } from './account.types';
 import type { UNAchCounterparty, UNCounterpartyVerificationMethod, UNPaymentStatus } from './payments.types';
 import type { UNTags, UNRelationship } from './types';

package/src/{sharedTypes → types/shared}/activity.types.ts

@@ -1,4 +1,4 @@
-import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAuthorizationData } from './authorization.types';
 import type { UNTransactionData } from './transactions.types';