react-native-unit-components 1.11.0 → 1.12.0

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) => {
@@ -118,10 +120,10 @@ export const LISTENERS = {
    });
   `,
   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)
     })
@@ -142,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 = `
@@ -164,6 +254,12 @@ export const DISPATCH_REQUEST_REFRESH = `
   }
 `;
 
+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("unitActivityFiltersChanged",{ detail: details});
@@ -173,7 +269,21 @@ export const DISPATCH_ACTIVITY_FILTER_CHANGED_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/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,7 +2,7 @@
 
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../store';
-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,6 +12,9 @@ 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>;
 
@@ -55,6 +58,26 @@ 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 =
   | CardStatusChangedEventState
@@ -65,6 +88,10 @@ type SharedEvent =
   | RequestCloseBottomSheetFlowEventState
   | RequestRenderingBottomSheetEventState
   | RequestRefreshEventState
+  | MultiFactorAuthFinishedEventState
+  | OpenPlaidEventState
+  | ComponentHeightEventState
+  | PayeeCounterpartyDeletedEventState
 
 type SharedEventsState = {
   event?: SharedEvent

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

@@ -1,13 +1,18 @@
 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 {
@@ -40,6 +45,10 @@ export enum BottomSheetRenderingType {
 
 export enum BottomSheetNativeComponentType {
   AddToWalletComponent = 'UNAddToWalletComponent',
+  ACHCreditComponent = 'UNACHCreditComponent',
+  ACHDebitComponent = 'UNACHDebitComponent',
+  CheckDepositComponent = 'UNCheckDepositComponent',
+  BookPaymentComponent = 'UNBookPaymentComponent'
 }
 
 export type BottomSheetNativeAddToWalletComponentType = {
@@ -47,7 +56,31 @@ export type BottomSheetNativeAddToWalletComponentType = {
   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
@@ -56,20 +89,6 @@ export type BottomSheetSlotData = {
   requestRenderingEvent: RequestRenderingEvent
 }
 
-export type BottomSheetComponentData = {
-  componentName?: WebComponentType,
-  componentResourceId?: string,
-}
-
-export type WebComponentData = {
-  type: WebComponentType;
-  presentationMode?: PresentationMode,
-  params?: string;
-  theme?: string;
-  language?: string;
-  windowParams?: string;
-}
-
 export type NativeComponentData = {
   component: BottomSheetNativeComponent,
   scrollState?: ScrollState,

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

@@ -11,6 +11,8 @@ export enum WebComponentType {
   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/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';

package/src/types/shared/payeeManagement.types.ts

@@ -0,0 +1,49 @@
+import { UNConnectedAccountStatus, UNConnectionAccountType, UNCounterpartyAccountType, UNCounterpartyPermission, UNCounterpartyType } from './payments.types';
+
+export type UNPayeeConnectedAccount = {
+	type: 'plaidConnectedAccount'
+	id: string
+	attributes: {
+		mask: string
+		name: string
+		type: string
+		subType: string
+		createdAt: string
+		updatedAt: string
+		status: UNConnectedAccountStatus
+		connectionType: UNConnectionAccountType
+	}
+	relationships: {
+		customer: {
+			data: {
+				type: 'customer'
+				id: number
+			}
+		}
+	}
+}
+
+export type UNPayeeCounterparty = {
+  id: string,
+  type: string,
+	attributes: {
+		name: string
+		bank?: string
+		routingNumber: string
+		accountNumber: string
+		accountType: UNCounterpartyAccountType
+		type: UNCounterpartyType
+		permissions: UNCounterpartyPermission
+		tags?: {[key: string]: string}
+	}
+}
+
+export enum UNPayeeManagementMenuItem {
+  sendFunds = 'sendFunds',
+  delete = 'delete'
+}
+
+export enum UNPayeeManagementComponentPaginationType {
+  infiniteScroll = 'infiniteScroll',
+  pagination = 'pagination'
+}

package/src/types/shared/payments.types.ts

@@ -4,11 +4,29 @@ export type UNAchCounterparty = {
   name: string
   accountNumber: string
   routingNumber: string
-  accountType: UNAccountType
+  accountType: UNCounterpartyAccountType
 }
 
-type UNAccountType = 'Savings' | 'Checking'
+export type UNCounterpartyAccountType = 'Savings' | 'Checking'
 
+export enum UNCounterpartyType {
+	Business = 'Business',
+	Person = 'Person',
+	Unknown = 'Unknown',
+}
+
+export type UNCounterpartyPermission = 'CreditOnly' | 'CreditAndDebit' | 'DebitOnly'
+
+export enum UNConnectedAccountStatus {
+	Pending = 'Pending',
+	Failed = 'Failed',
+	Verified = 'Verified',
+}
+
+export enum UNConnectionAccountType {
+	SameDayMicroDeposit = 'SameDayMicroDeposit',
+	Instant = 'Instant',
+}
 export enum UNPlaidAccountFilter {
   checking = 'checking',
   savings = 'savings',

package/src/unitSdkManager/UnitSdk.api.ts

@@ -2,16 +2,14 @@ import { UnitSDK } from './UnitSdkManager';
 
 import { getUnitScriptUrl } from './UnitSdkManager.utils.internal';
 import { store } from '../store/store';
-import { setUnitScript, selectConfiguration } from '../slices/ConfigurationSlice';
+import { setUnitScript } from '../slices/ConfigurationSlice';
 
 let isLoadingScript = false;
 
 export const fetchUnitScript = async () => {
-  const configurationState = selectConfiguration(store.getState());
-  const globalUnitScript = configurationState.unitScript;
   const env = UnitSDK.getEnv();
   const webVersioningStrategy = UnitSDK.getWebVersioningStrategy();
-  if (isLoadingScript || globalUnitScript || !env) {
+  if (isLoadingScript || !env) {
     // init function is called and success OR in progress
     return null;
   }

package/src/unitSdkManager/UnitSdk.constants.ts

@@ -3,7 +3,7 @@ import { UNVersioningStrategyType, UNWebVersioningStrategy } from '../types/shar
 const WEB_SDK_RECOMMENDED_STRATEGY: UNWebVersioningStrategy = {
   type: UNVersioningStrategyType.upToNextMinor,
   major: 1,
-  minor: 6,
+  minor: 8,
 };
 
 export const UNSDKConstants = {

package/src/unitSdkManager/UnitSdkManager.ts

@@ -1,4 +1,4 @@
-import type { NativeModules } from 'react-native';
+import { NativeModules } from 'react-native';
 import { fetchUnitScript } from './UnitSdk.api';
 import { UnitUiManager } from './unitUiManager/unitUiManager';
 import type { UNFonts } from '../types/shared/fonts.types';
@@ -7,14 +7,14 @@ import { UNSDKConstants } from './UnitSdk.constants';
 import type { UNWebVersioningStrategy } from '../types/shared';
 import { setTheme, setLanguage } from '../slices/ConfigurationSlice';
 import { store } from '../store/store';
-
-export enum UNEnvironment {
-  sandbox = 'sandbox',
-  production = 'production'
-}
+import { UNEnvironment } from '../types/shared/env.types';
+import { UserDataKeys } from '../types/internal/unitStore.types';
+import UNStoreManagerHelper from '../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
+import { UnitHelpersManager } from './unitHelpersManager/UnitHelpersManager';
 
 export class UnitSDK {
   public static ui: UnitUiManager;
+  public static helpers: UnitHelpersManager;
   protected static env?: UNEnvironment;
   protected static webVersioningStrategy: UNWebVersioningStrategy;
   protected static customerToken?: string;
@@ -30,6 +30,7 @@ export class UnitSDK {
       store.dispatch(setTheme(theme));
       store.dispatch(setLanguage(language));
       this.ui = new UnitUiManager();
+      this.helpers = new UnitHelpersManager();
       warnClientIfNeeded(this.webVersioningStrategy);
       await fetchUnitScript();
     } catch (e) {
@@ -79,4 +80,9 @@ export class UnitSDK {
     return this.customerToken;
   };
 
+  public static cleanUserData = () => {
+    UNStoreManagerHelper.cleanValue(UserDataKeys.unitCustomerToken);
+    UNStoreManagerHelper.cleanValue(UserDataKeys.unitVerifiedToken);
+  };
+
 }

package/src/unitSdkManager/UnitSdkManager.utils.internal.ts

@@ -1,12 +1,14 @@
 import type { UNWebVersioningStrategy } from '../types/shared';
+import { UNEnvironment } from '../types/shared/env.types';
 import { getWebSdkVersionString } from '../utils/webVersioningStrategy.utils';
-import { UNEnvironment } from './UnitSdkManager';
 
 export const getUnitScriptUrl = (env: UNEnvironment, webVersioningStrategy: UNWebVersioningStrategy) => {
   const webSdkVersionString = getWebSdkVersionString(webVersioningStrategy);
+
   switch (env) {
     case UNEnvironment.sandbox:
       return `https://ui.s.unit.sh/release/${webSdkVersionString}/components.js`;
+
     case UNEnvironment.production:
       return `https://ui.unit.co/release/${webSdkVersionString}/components.js`;
   }

package/src/unitSdkManager/unitHelpersManager/UnitHelpersManager.ts

@@ -0,0 +1,11 @@
+export class UnitHelpersManager {
+  redirectUri?: string;
+
+  constructor() {
+    this.init();
+  }
+
+  private init = () => {
+    this.redirectUri = undefined;
+  };
+}

package/src/utils/windowUnitStore.ts

@@ -0,0 +1,5 @@
+import WebView from 'react-native-webview';
+
+export const setItemInWindowUnitStore = (currentWeb: WebView | null, key: string, value: string) => {
+  currentWeb?.injectJavaScript(`setItemInWindowUnitStore('${key}', '${value}')`);
+};

package/src/webComponent/WebComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Linking, Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
@@ -21,6 +21,10 @@ import { getFontFacesString } from '../scripts/html/fontFaces';
 import type { RootState } from '../store';
 import { setEvent } from '../slices/SharedEventsSlice';
 import * as AppInfo from '../utils/AppInfo';
+import UNStoreManagerHelper from '../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
+import { UserDataKeys } from '../types/internal/unitStore.types';
+import { useListenerToEvent } from '../hooks/useListenerToEvent';
+import { setItemInWindowUnitStore } from '../utils/windowUnitStore';
 
 export interface WebComponentProps {
   type: WebComponentType;
@@ -36,7 +40,7 @@ export interface WebComponentProps {
   windowParams?: string;
 }
 
-export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {
+export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webOutRef) {
   const dispatch = useDispatch();
   const unitScript = useSelector((state: RootState) => state.configuration.unitScript);
   const globalTheme = useSelector((state: RootState) => state.configuration.theme);
@@ -45,6 +49,10 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   const [baseName, setBaseName] = useState<string>();
   const [infoParams, setInfoParams] = useState<{ [key: string]: string }>({});
 
+  const webRef = useRef(null);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  useImperativeHandle(webOutRef, () => webRef.current!);
+
   useEffect(() => {
     const getAppName = async () => {
       // For iOS, we extend the app name from the HTML to display a prettier access request message.
@@ -76,35 +84,51 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       return;
     }
 
-    const componentCurrentTheme = props.theme ?? globalTheme;
-    const componentCurrentLanguage = props.language ?? globalLanguage;
+    const updateSourceHTML = async () => {
+      const componentCurrentTheme = props.theme ?? globalTheme;
+      const componentCurrentLanguage = props.language ?? globalLanguage;
+
+      const themeParam = componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '';
+      const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
+
+      const componentParams = (props.params || '') + themeParam + languageParam;
 
-    const themeParam = componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '';
-    const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
+      const fontFaces = getFontFacesString(UnitSDK.getFonts());
 
-    const componentParams = (props.params || '') + themeParam + languageParam;
+      const windowInfoParams = `window.UnitMobileSDKConfig['info'] = ${JSON.stringify(infoParams)}`;
+      const plaidRedirectUriParam = (Platform.OS == 'ios' && UnitSDK.helpers.redirectUri) ? `window.UnitMobileSDKConfig['plaidRedirectUri'] = '${UnitSDK.helpers.redirectUri}/plaid';` : '';
 
-    const fontFaces = getFontFacesString(UnitSDK.getFonts());
+      const unitVerifiedCustomerToken = await UNStoreManagerHelper.getValue(UserDataKeys.unitVerifiedToken);
+      const windowVerifiedCustomerToken = unitVerifiedCustomerToken ? `window.UnitStore['unitVerifiedCustomerToken'] = '${unitVerifiedCustomerToken}'` : '';
+
+      const windowParams = `${windowInfoParams}; ${plaidRedirectUriParam} ${windowVerifiedCustomerToken}; ${props.windowParams || ''}`;
+
+      let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
+      newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);
+      newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
+      newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, windowParams);
+      setSourceHtml(newHtml);
+    };
 
-    const windowInfoParams = `window.UnitMobileSDKConfig['info'] = ${JSON.stringify(infoParams)}`;
-    const windowParams = `${windowInfoParams}; ${props.windowParams || ''}`;
+    updateSourceHTML();
 
-    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
-    newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);
-    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
-    newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, windowParams);
-    setSourceHtml(newHtml);
   }, [props.params, unitScript, props.presentationMode, props.script, props.windowParams, globalTheme, globalLanguage, infoParams]);
 
+  // Listen and update the live webComponents
+  const updateVerifiedCustomerToken = (data: string) => {
+    setItemInWindowUnitStore(webRef.current, UserDataKeys.unitVerifiedToken, data);
+  };
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED, action: updateVerifiedCustomerToken });
+
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
     switch (message.type) {
       case UnitMessage.UNIT_REQUEST_REFRESH:
         message.details &&
-        dispatch(setEvent({
-          key: UnitMessage.UNIT_REQUEST_REFRESH,
-          data: message.details as RequestRefreshEvent,
-        }));
+          dispatch(setEvent({
+            key: UnitMessage.UNIT_REQUEST_REFRESH,
+            data: message.details as RequestRefreshEvent,
+          }));
         break;
       case UnitMessage.UNIT_REQUEST_OPEN_LINK:
         // eslint-disable-next-line no-case-declarations
@@ -114,11 +138,24 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
 
       case UnitMessage.UNIT_REQUEST_DOWNLOAD:
         message.details &&
-        handleRequestDownload(message.details as RequestDownloadEvent, () => {
-          dispatch(setEvent({ key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
-        });
+          handleRequestDownload(message.details as RequestDownloadEvent, () => {
+            dispatch(setEvent({ key: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, data: {} }));
+          });
+        break;
+      case UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED:
+        if (message.details) {
+          const data = message.details as string;
+          UNStoreManagerHelper.saveValue(UserDataKeys.unitVerifiedToken, data);
+          // update existing components - namely, the other webComponents will update their window as well as this webComponent
+          dispatch(setEvent({
+            key: UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
+            data,
+          }));
+        }
+        break;
+      case UnitMessage.UNIT_UNAUTHORIZED_TOKEN:
+        UnitSDK.cleanUserData();
         break;
-
       default:
         props.onMessage && props.onMessage(message);
     }