react-native-unit-components 1.10.0 → 1.12.0

package/src/nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper.ts

@@ -0,0 +1,19 @@
+import { NativeModules } from 'react-native';
+
+const { UNStoreManager } = NativeModules;
+
+class UNStoreManagerHelper {
+  static saveValue(key: string, value: string) {
+    UNStoreManager.saveValue(key, value);
+  }
+
+  static async getValue(key: string): Promise<string> {
+    return UNStoreManager.getValue(key);
+  }
+
+  static cleanValue(key: string) {
+    UNStoreManager.cleanValue(key);
+  }
+}
+
+export default UNStoreManagerHelper;

package/src/networking/common/UNNetworkConstants.ts

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

package/src/networking/requests/UNWalletPayloadRequest.ts

@@ -1,9 +1,10 @@
 import axios from 'axios';
 import { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';
-import type { UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
 import type { UNMobileWalletPayload } from '../../helpers/pushProvisioningService/types';
 import type { UNError, UNErrorData } from '../../types/shared/error.types';
+import { UNEnvironment } from '../../types/shared/env.types';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isUNMobileWalletPayload = (object: any): object is UNMobileWalletPayload => {
   return 'data' in object &&
     'attributes' in object.data &&

package/src/scripts/html/bodyHtml.ts

@@ -18,7 +18,7 @@ export const getHtmlBody = (unitComponent: string, unitComponentProps?: string,
 const getCoverInjectedHeightBodyScript = (currentUnitScript: string) => {
   return `
     <div id=${webViewId}>
-      <div style="height: 100%; display: block; padding: 1px;">
+      <div style="height: 100%; display: block;">
         ${currentUnitScript}
       </div>
     </div>

package/src/scripts/html/bodyScript.ts

@@ -4,6 +4,8 @@ import { PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
+import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
 
 export const POST_MESSAGE_TO_SDK = `
   const postMessageToSDK = (message) => {
@@ -36,6 +38,7 @@ export const LISTENERS = {
   `,
   requestRefresh: `
     window.addEventListener("${UnitMessage.UNIT_REQUEST_REFRESH}", (e) => {
+      if (e.detail.fromSDK) { return }
       postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_REFRESH}", details:  e.detail  })
     });
   `,
@@ -47,7 +50,11 @@ export const LISTENERS = {
   `,
   requestCloseFlow: `
     window.addEventListener("${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}", (e) => {
-      postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}" })
+    // Add a delay of 200 milliseconds to allow the SDK to finish processing prior events that require a Promise before closing the flow
+    setTimeout(() => {
+        postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_CLOSE_FLOW}" });
+    }, 200);
+
     });
   `,
   requestOpenLink: `
@@ -85,6 +92,12 @@ export const LISTENERS = {
     postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
   });
   `,
+
+  unitRequestLeftToSpendDetails: `
+  window.addEventListener("${UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", (e) => {
+    postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS}", details: e.detail })
+  });
+  `,
   unitPaymentCreated: `
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
@@ -95,11 +108,22 @@ export const LISTENERS = {
       })
   });
   `,
+  unitPaymentInitialStageBackButtonClicked: `
+  window.addEventListener("unitPaymentInitialStageBackButtonClicked", (e) => {
+    postMessageToSDK({ type: "${PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED}", details: { data: e.detail }})
+  });
+  `,
+
+  unitPaymentFinalStageDoneButtonClicked: `
+   window.addEventListener("unitPaymentFinalStageDoneButtonClicked", (e) => {
+    postMessageToSDK({ type: "${PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED}", details: { data: e.detail }})
+   });
+  `,
   unitPlaidTokenCreated: `
-  window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
+  window.addEventListener("${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
     const response = e.detail
     response.then((data) => {
-      postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
+      postMessageToSDK({ type: "${PlaidMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
     }).catch((e) => {
       console.log(e)
     })
@@ -120,6 +144,94 @@ export const LISTENERS = {
       postMessageToSDK({ type: "${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", details: e.detail })
     });
   `,
+  unitMultiFactorAuthFinished: `
+    window.addEventListener("${UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", async (e) => {
+      const response = await event.detail.response;
+      const data = JSON.stringify({
+        token: response.data.attributes.token,
+        expiration: new Date().getTime() + response.data.attributes.expiresIn * 1000,
+      });
+      window.UnitStore["unitVerifiedCustomerToken"] = data;
+
+      postMessageToSDK({ type: "${UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", details: data })
+    });
+  `,
+  unitWhiteLabelAppOnLoad: `
+    window.addEventListener("${UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD}", async (event) => {
+      const response = event.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${UnitMessage.UNIT_WHITE_LABEL_APP_ON_LOAD}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
+  `,
+  unitUnauthorizedToken: `
+    window.addEventListener("${UnitMessage.UNIT_UNAUTHORIZED_TOKEN}", (e) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_UNAUTHORIZED_TOKEN}", details: "Clean the current user tokens" })
+    });
+  `,
+  unitConnectedAccountCreated: `
+    window.addEventListener("${PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED}", (e) => {
+      const response = e.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED}", details: { account: data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
+  `,
+  unitCounterpartyCreated: `
+    window.addEventListener("${PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED}", (e) => {
+      const response = e.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_COUNTERPARTY_CREATED}", details: { counterparty: data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
+  `,
+  unitCounterpartyDeleted: `
+    window.addEventListener("${PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED}", (e) => {
+      const response = e.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED}", details: { counterparty: data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
+  `,
+  unitMicroDepositConnectionCreated: `
+    window.addEventListener("${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED}", (e) => {
+      const response = e.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_CREATED}", details: { account : data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
+  `,
+  unitMicroDepositConnectionRejected: `
+    window.addEventListener("${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED}", (e) => {
+      const response = e.detail;
+      response.then((data) => {
+        postMessageToSDK({ type: "${PayeeManagementMessage.UNIT_MICRO_DEPOSIT_CONNECTION_REJECTED}", details: { account : data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+    });
+  `,
+
+  unitOpenPlaid: `
+  window.addEventListener("${PlaidMessage.UNIT_OPEN_PLAID}", async (e) => {
+    const response = event.detail;
+    response.then((data) => {
+      postMessageToSDK({ type: "${PlaidMessage.UNIT_OPEN_PLAID}", details: data.data })
+    }).catch((e) => {
+      console.log(e)
+    })
+  });
+  `
 };
 
 export const DISPATCH_RENDERING_EVENT = `
@@ -130,22 +242,48 @@ export const DISPATCH_RENDERING_EVENT = `
 `;
 
 export const DISPATCH_REQUEST_REFRESH = `
-    const dispatchRefreshEvent = (details) => {
-    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
+  const dispatchRefreshEvent = (details) => {
+    let event;
+    // we are adding "fromSDK" param to avoid infinite loop
+    if (details) {
+        event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: {...JSON.parse(details), fromSDK: true} });
+    } else {
+        event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}", { detail: { fromSDK: true }});
+    }
     window.dispatchEvent(event)
+  }
+`;
+
+export const SET_ITEM_IN_WINDOW_UNIT_STORE = `
+    const setItemInWindowUnitStore = (key, value) => {
+      window.UnitStore[key] = value;
     }
 `;
 
 export const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT = `
-    const dispatchActivityFilterChangedEvent = (details) => {
-      const event = new CustomEvent("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}",{ detail: details });
-      window.dispatchEvent(event);
-    }
+  const dispatchActivityFilterChangedEvent = (details) => {
+    const event = new CustomEvent("unitActivityFiltersChanged",{ detail: details});
+    window.dispatchEvent(event);
+  }
 `;
 
 export const DISPATCH_PLAID_RESPONSE = `
     const dispatchPlaidEvent = (details) => {
-    const event = new CustomEvent("${UnitMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
+    const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
+    window.dispatchEvent(event)
+    }
+`;
+
+export const DISPATCH_PLAID_EXIT = `
+    const dispatchPlaidExit = (details) => {
+    const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_EXIT}",{ detail: details })
+    window.dispatchEvent(event)
+    }
+`;
+
+export const DISPATCH_OPEN_PLAID = `
+    const dispatchOpenPlaidEvent = (details) => {
+    const event = new CustomEvent("${PlaidMessage.UNIT_OPEN_PLAID}",{ detail: details })
     window.dispatchEvent(event)
     }
 `;

package/src/slices/BottomSheetSlice.ts

@@ -0,0 +1,72 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import { BottomSheetNativePlaceType, ScrollState } from '../types/internal/bottomSheet.types';
+
+export interface BottomSheetState {
+  isBottomSheetActive: boolean;
+  isComponentLoading?: boolean;
+  shouldShowBottomSheet?: boolean;
+  nativePlace?: BottomSheetNativePlaceType;
+  componentHeight?: number;
+  shouldEnableBottomSheetScroll: boolean;
+  scrollState?: ScrollState;
+}
+
+const initialState: BottomSheetState = {
+  isBottomSheetActive: false,
+  isComponentLoading: false,
+  shouldShowBottomSheet: false,
+  shouldEnableBottomSheetScroll: true,
+  nativePlace: BottomSheetNativePlaceType.overFullScreen,
+  componentHeight: 0,
+};
+
+const BottomSheetSlice = createSlice({
+  name: 'BottomSheet',
+  initialState: initialState,
+  reducers: {
+    setIsBottomSheetActive(state, action: PayloadAction<boolean>) {
+      state.isBottomSheetActive = action.payload;
+    },
+    setIsComponentLoading(state, action: PayloadAction<boolean>) {
+      state.isComponentLoading = action.payload;
+    },
+    setShouldShowBottomSheet(state, action: PayloadAction<boolean>) {
+      state.shouldShowBottomSheet = action.payload;
+    },
+
+    setNativePlace(state, action: PayloadAction<BottomSheetNativePlaceType>) {
+      state.nativePlace = action.payload;
+    },
+    setComponentHeight(state, action: PayloadAction<number>) {
+      state.componentHeight = action.payload;
+    },
+    setShouldEnableBottomSheetScroll(state, action: PayloadAction<boolean>) {
+      state.shouldEnableBottomSheetScroll = action.payload;
+    },
+
+    setScrollState(state, action: PayloadAction<ScrollState>) {
+      state.scrollState = action.payload;
+    },
+
+    resetBottomSheetSlice(state) {
+      //resets all besides is active to avoid loops in useEffects invoked by closing the flow
+      state.isComponentLoading = initialState.isComponentLoading;
+      state.shouldShowBottomSheet = initialState.shouldShowBottomSheet;
+      state.nativePlace = initialState.nativePlace;
+      state.componentHeight = initialState.componentHeight;
+      state.shouldEnableBottomSheetScroll = initialState.shouldEnableBottomSheetScroll;
+      state.scrollState = initialState.scrollState;
+    },
+  },
+
+});
+
+export const {
+  setIsBottomSheetActive, setIsComponentLoading,
+  setShouldShowBottomSheet, setNativePlace,
+  setComponentHeight,
+  setShouldEnableBottomSheetScroll, setScrollState, resetBottomSheetSlice,
+} = BottomSheetSlice.actions;
+export const selectConfiguration = (state: RootState) => state.bottomSheet;
+export default BottomSheetSlice.reducer;

package/src/slices/ConfigurationSlice.ts

@@ -21,9 +21,8 @@ const ConfigurationSlice = createSlice({
     },
     setLanguage(state, action: PayloadAction<string | undefined>) {
       state.language = action.payload;
-    },
+    }
   },
-
 });
 
 export const { setUnitScript, setLanguage, setTheme } = ConfigurationSlice.actions;

package/src/slices/SharedEventsSlice.ts

@@ -2,8 +2,7 @@
 
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../store';
-import type { SlotRendering, WebComponentRendering } from '../types/internal/bottomSheet.types';
-import type { UNAccountData, UNCardData } from '../types/shared';
+import type { UNAccountData, UNCardData, UNPayeeCounterparty } from '../types/shared';
 import type { ActivityFiltersChangedEvent } from '../messages/webMessages/activityMessage';
 import type { RequestRefreshEvent } from '../messages/webMessages/unitMessages';
 import type { BottomSheetNativeMessage } from '../messages/nativeMessages/bottomSheetMessage';
@@ -12,13 +11,13 @@ import type { AccountMessage } from '../messages/webMessages/accountMessage';
 import type { ActivityMessage } from '../messages/webMessages/activityMessage';
 import type { UnitMessage } from '../messages/webMessages/unitMessages';
 import type { MultipleCardsMessage } from '../messages/webMessages/multipleCardsMessage';
+import { BottomSheetRenderingMessage } from '../messages/nativeMessages/bottomSheetMessage';
+import { PageMessage } from '../messages/webMessages/pageMessage';
+import { OpenPlaidEvent, PlaidMessage } from '../messages/webMessages/plaidMessages';
+import { PayeeManagementMessage } from '../messages/webMessages/payeeManagementMessage';
 
 type EmptyObj = Record<PropertyKey, never>;
 
-type SlotRenderingEventState = {
-  key: BottomSheetNativeMessage.START_FLOW,
-  data: SlotRendering
-}
 type MultipleCardsCardClickedEventState = {
   key: MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED,
   data: UNCardData
@@ -44,14 +43,14 @@ type ActivityFiltersChangedEventState = {
   data: ActivityFiltersChangedEvent
 }
 
-type RequestCloseFlowEventState = {
+type RequestCloseBottomSheetFlowEventState = {
   key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
   data: EmptyObj
 }
 
-type WebComponentRenderingEventState = {
-  key: BottomSheetNativeMessage.START_FLOW,
-  data: WebComponentRendering
+type RequestRenderingBottomSheetEventState = {
+  key: BottomSheetNativeMessage.REQUEST_RENDERING,
+  data: BottomSheetRenderingMessage
 }
 
 type RequestRefreshEventState = {
@@ -59,17 +58,40 @@ type RequestRefreshEventState = {
   data: RequestRefreshEvent
 }
 
+type MultiFactorAuthFinishedEventState = {
+  key: UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
+  data: string
+}
+
+type ComponentHeightEventState = {
+  key: PageMessage.PAGE_HEIGHT
+  data: number | string
+}
+
+type OpenPlaidEventState = {
+  key: PlaidMessage.UNIT_OPEN_PLAID,
+  data: OpenPlaidEvent
+}
+
+type PayeeCounterpartyDeletedEventState = {
+  key: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED,
+  data: UNPayeeCounterparty
+}
+
 //currently left state suffixes to avoid the duplication of the event names
 type SharedEvent =
-  SlotRenderingEventState
   | CardStatusChangedEventState
   | CardActivatedEventState
   | MultipleCardsCardClickedEventState
   | AccountChangedEventState
   | ActivityFiltersChangedEventState
-  | RequestCloseFlowEventState
-  | WebComponentRenderingEventState
+  | RequestCloseBottomSheetFlowEventState
+  | RequestRenderingBottomSheetEventState
   | RequestRefreshEventState
+  | MultiFactorAuthFinishedEventState
+  | OpenPlaidEventState
+  | ComponentHeightEventState
+  | PayeeCounterpartyDeletedEventState
 
 type SharedEventsState = {
   event?: SharedEvent

package/src/store/store.ts

@@ -2,12 +2,14 @@ import { configureStore } from '@reduxjs/toolkit';
 import wallet from '../slices/pushProvisioningSlice';
 import configuration from '../slices/ConfigurationSlice';
 import sharedEvents from '../slices/SharedEventsSlice';
+import bottomSheet from '../slices/BottomSheetSlice';
 
 export const store = configureStore({
   reducer: {
     wallet,
     configuration,
     sharedEvents,
+    bottomSheet,
   },
 });
 

package/src/styles/variables.ts

@@ -4,6 +4,9 @@ export const VARIABLES = {
     BLACK: '#000000',
     BLUE: '#005fF0',
     GREY: '#bbbbbb',
-    SILVER_FLAKE: '#D5DDE0'
-  }
+    SILVER_FLAKE: '#D5DDE0',
+    PINK: '#FF00FF',
+    PURPLE: '#800080',
+    GREEN: '#008000',
+  },
 };

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

@@ -1,12 +1,87 @@
 import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
-import type { PresentationMode, WebComponentType } from './webComponent.types';
+import type { WebComponentType } from './webComponent.types';
+import {
+  UNAddToWalletComponentProps,
+} from '../../nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent';
+import { UNACHCreditComponentProps } from '../../components/UNACHCreditComponent';
+import { UNACHDebitComponentProps } from '../../components/UNACHDebitComponent';
+import { UNCheckDepositComponentProps } from '../../components/UNCheckDepositComponent';
+import { UNBookPaymentComponentProps } from '../../components/UNBookPaymentComponent';
+
+export enum BottomSheetNativePlaceType {
+  overFullScreen = 'overFullScreen',
+  modal = 'modal',
+  menu = 'menu',
+  contentHeight = 'contentHeight'
+}
+
+export enum ScrollState {
+  /*
+    Web View ScrollState -
+      - Initialization:
+      'onTop': for a scrollable webView.
+        (onTop means that the webview is onTop of the BottomSheet and we need to recognize the scroll direction).
+        Then, it recognize the scroll direction and update the scroll state as needed.
+
+      -'unScrollable': for an unscrollable webView
+  */
+  onTop = 'onTop',
+  unScrollable = 'unScrollable',
+
+  /*
+    These are only for maintain the bottom sheet scrollState (not an initialize scroll state).
+    It relates to the current scroll state.
+    onlyWebView means that now the scroll is on webview (only).
+    onlyBottomSheet means that now the scroll is on bottomSheet (only).
+   */
+  onlyWebView = 'webViewScroll',
+  onlyBottomSheet = 'onlyBottomSheet',
+}
 
 export enum BottomSheetRenderingType {
   Slot,
-  WebComponent,
   NativeComponent
 }
 
+export enum BottomSheetNativeComponentType {
+  AddToWalletComponent = 'UNAddToWalletComponent',
+  ACHCreditComponent = 'UNACHCreditComponent',
+  ACHDebitComponent = 'UNACHDebitComponent',
+  CheckDepositComponent = 'UNCheckDepositComponent',
+  BookPaymentComponent = 'UNBookPaymentComponent'
+}
+
+export type BottomSheetNativeAddToWalletComponentType = {
+  type: BottomSheetNativeComponentType.AddToWalletComponent,
+  props: UNAddToWalletComponentProps
+}
+
+export type BottomSheetNativeACHCreditComponentType = {
+  type: BottomSheetNativeComponentType.ACHCreditComponent,
+  props: UNACHCreditComponentProps
+}
+
+export type BottomSheetNativeACHDebitComponentType = {
+  type: BottomSheetNativeComponentType.ACHDebitComponent,
+  props: UNACHDebitComponentProps
+}
+
+export type BottomSheetNativeCheckDepositComponentType = {
+  type: BottomSheetNativeComponentType.CheckDepositComponent,
+  props: UNCheckDepositComponentProps
+}
+
+export type BottomSheetNativeBookPaymentComponentType = {
+  type: BottomSheetNativeComponentType.BookPaymentComponent,
+  props: UNBookPaymentComponentProps
+}
+
+export type BottomSheetNativeComponent = BottomSheetNativeAddToWalletComponentType
+  | BottomSheetNativeACHCreditComponentType
+  | BottomSheetNativeACHDebitComponentType
+  | BottomSheetNativeCheckDepositComponentType
+  | BottomSheetNativeBookPaymentComponentType
+
 export type BottomSheetSlotData = {
   // The data that rendered by the web view
   componentName?: WebComponentType,
@@ -14,17 +89,10 @@ export type BottomSheetSlotData = {
   requestRenderingEvent: RequestRenderingEvent
 }
 
-export type WebComponentData = {
-  type: WebComponentType;
-  presentationMode?: PresentationMode,
-  params?: string;
-  theme?: string;
-  language?: string;
-  windowParams?: string;
-}
-
 export type NativeComponentData = {
-  component: React.ReactNode,
+  component: BottomSheetNativeComponent,
+  scrollState?: ScrollState,
+  nativePlace?: BottomSheetNativePlaceType,
 }
 
 export interface SlotRendering {
@@ -32,11 +100,6 @@ export interface SlotRendering {
   data: BottomSheetSlotData
 }
 
-export interface WebComponentRendering {
-  type: BottomSheetRenderingType.WebComponent,
-  data: WebComponentData
-}
-
 export interface NativeComponentRendering {
   type: BottomSheetRenderingType.NativeComponent,
   data: NativeComponentData

package/src/types/internal/unitStore.types.ts

@@ -0,0 +1,6 @@
+// types related to unit store - (on the web component window)
+
+export enum UserDataKeys {
+  unitCustomerToken = 'unitCustomerToken',
+  unitVerifiedToken = 'unitVerifiedCustomerToken'
+}

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

@@ -9,6 +9,10 @@ export enum WebComponentType {
   achDebitPayment = 'unit-elements-ach-debit-payment',
   achCreditPayment = 'unit-elements-ach-credit-payment',
   cardAction = 'unit-elements-card-action',
+  programDetails = 'unit-elements-program-details',
+  nextRepayment = 'unit-elements-next-repayment',
+  payeeManagement = 'unit-elements-payee-management',
+  whiteLabelApp = 'unit-elements-white-label-app',
 }
 
 export enum PresentationMode {

package/src/types/shared/account.types.ts

@@ -129,3 +129,9 @@ export enum UNAccountMenuAction {
   OpenAccountStatements = 'OpenAccountStatements',
   DownloadBankVerificationLetter = 'DownloadBankVerificationLetter',
 }
+
+export enum UNAccountMenuItem {
+  details = 'details',
+  statements = 'statements',
+  bankVerification = 'bankVerification',
+}

package/src/types/shared/activity.types.ts

@@ -2,12 +2,12 @@ import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAuthorizationData } from './authorization.types';
 import type { UNTransactionData } from './transactions.types';
 
-export const enum UNActivityComponentPaginationType {
+export enum UNActivityComponentPaginationType {
   infiniteScroll = 'infiniteScroll',
   pagination = 'pagination'
 }
 
 export type UNActivityOnLoadData = {
-  [RESPONSE_KEYS.authorizations]: UNAuthorizationData,
-  [RESPONSE_KEYS.transactions]: UNTransactionData,
+  [RESPONSE_KEYS.authorizations]: [UNAuthorizationData],
+  [RESPONSE_KEYS.transactions]: [UNTransactionData],
 }

package/src/types/shared/card.types.ts

@@ -2,7 +2,7 @@ import type { UNAddress, UNFullName, UNLimits, UNRelationship, UNTags } from './
 
 export type UNCardData = UNIndividualDebitCard | UNBusinessDebitCard
 
-type UNCardStatus =  'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud'
+type UNCardStatus = 'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud'
 
 export type UNIndividualDebitCard = {
   id: string,
@@ -70,3 +70,12 @@ export enum UNCardMenuAction {
   SetPin = 'SetPin',
   AddToWallet = 'AddToWallet'
 }
+
+export enum UNCardMenuItem {
+  freeze = 'freeze',
+  addToWallet = 'addToWallet',
+  managePin = 'managePin',
+  replace = 'replace',
+  report = 'report',
+  close = 'close',
+}

package/src/types/shared/env.types.ts

@@ -0,0 +1,4 @@
+export enum UNEnvironment {
+  sandbox = 'sandbox',
+  production = 'production'
+}

package/src/types/shared/index.ts

@@ -10,3 +10,5 @@ export * from './fonts.types';
 export * from './error.types';
 export * from './versioning.types';
 export * from './multipleCards.types';
+export * from './payeeManagement.types';
+export * from './env.types';