react-native-unit-components 1.14.0 → 1.15.0

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

@@ -0,0 +1,16 @@
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import { UNCardActionComponentProps } from './UNCardActionComponent';
+
+export const getCardActionParams = (props: UNCardActionComponentProps) => {
+  return `
+    card-id="${props.cardId}"
+    customer-token="${props.customerToken}"
+    action="${props.action}"
+  `;
+};
+
+export const getCardActionScript = () => {
+  return `
+    ${LISTENERS.requestRefresh}
+  `;
+};

package/src/components/UNCardActionComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNCardActionComponent, UNCardActionComponentProps } from './UNCardActionComponent';

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -12,7 +12,7 @@ import {
   injectRequestCardActionScript,
   injectRequestShowSensitiveDataScript, injectRequestHideSensitiveDataScript,
 } from './UNCardComponent.utils';
-import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
+import { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { NativeModules } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
@@ -51,6 +51,8 @@ export interface UNCardComponentProps {
   onLoad?: (response: UNOnLoadResponse<UNCardData>) => void;
   onStatusChanged?: (card: UNCardData) => void;
   onCardActivated?: (card: UNCardData) => void;
+  onAction?: (action: UNCardMenuAction) => void;
+  onActionsMenuClicked?: () => void;
   pushProvisioningModule?: typeof NativeModules;
 }
 
@@ -142,6 +144,8 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         } as SlotRendering;
 
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+
+        sendActionCallbackIfNeeded(slotData.requestRenderingEvent);
         break;
       }
       case PageMessage.PAGE_HEIGHT:
@@ -153,6 +157,26 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     }
   };
 
+  const sendActionCallbackIfNeeded = (requestRenderingEvent: RequestRenderingEvent) => {
+    switch (requestRenderingEvent.data.nativeComponentName) {
+      case WebComponentType.cardMenu:
+        props.onActionsMenuClicked && props.onActionsMenuClicked();
+        break;
+      case WebComponentType.cardAction: {
+        // Find the relevant action from the native component
+        const actionMatch = requestRenderingEvent.data.nativeComponent.match(/action=([^\s]+)/);
+        if (actionMatch && props.onAction) {
+          const actionString = actionMatch[1] as string;
+
+          // Check if the actionString matches any value in the UNCardMenuAction enum
+          if (Object.values(UNCardMenuAction).includes(actionString as UNCardMenuAction)) {
+            props.onAction(actionString as UNCardMenuAction);
+          }
+        }
+      }
+    }
+  };
+
   useEffect(() => {
     UnitSDK.setCustomerToken(props.customerToken);
   }, [props.customerToken]);

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

@@ -4,13 +4,14 @@ import type { UNCardComponentProps } from './UNCardComponent';
 import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
 import type { UNCardMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
-    enable-mobile-wallet="${!!props.pushProvisioningModule}"
+    enable-mobile-wallet="${!!(props.pushProvisioningModule || UnitSDK.getPushProvisionModule())}"
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.tsx

@@ -0,0 +1,86 @@
+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 { getMultiFactorAuthenticationParams, getMultiFactorAuthenticationScript } from './UNMultiFactorAuthenticationComponent.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { MultiFactorAuthenticationFinishedEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UNError, UNOnLoadResponse } from '../../types/shared';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
+import { UNCustomerTokenVerification, UNMultiFactorAuthenticationFinished } from '../../types/shared/multiFactorAuthentication.types';
+
+export interface UNMultiFactorAuthenticationComponentProps {
+  // inputs
+  customerToken: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNOnLoadResponse<undefined>) => void
+  onVerificationTokenCreated?: (data: UNCustomerTokenVerification) => void
+  onAuthenticationFinished?: (data: UNMultiFactorAuthenticationFinished) => void
+}
+
+const UNMultiFactorAuthenticationComponent = (props: UNMultiFactorAuthenticationComponentProps) => {
+  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 UNError);
+      return;
+    }
+
+    props.onLoad({ data: undefined });
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case UnitMessage.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 MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED:
+        props.onVerificationTokenCreated && props.onVerificationTokenCreated(message.details as UNCustomerTokenVerification);
+        break;
+      case UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED: {
+        const data = JSON.parse((message.details as MultiFactorAuthenticationFinishedEvent).unitVerifiedCustomerTokenString);
+        props.onAuthenticationFinished && props.onAuthenticationFinished(data as UNMultiFactorAuthenticationFinished);
+        break;
+      }
+    }
+  };
+
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+  return <UNBaseView style={style} onLoadError={handleUnitOnLoad}>
+    <WebComponent
+      type={WebComponentType.multiFactorAuthentication}
+      presentationMode={PresentationMode.Inherit}
+      params={getMultiFactorAuthenticationParams(props)}
+      script={getMultiFactorAuthenticationScript()}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      theme={props.theme}
+      language={props.language}
+    />
+  </UNBaseView>;
+};
+
+export default withReduxStore<UNMultiFactorAuthenticationComponentProps>(UNMultiFactorAuthenticationComponent);

package/src/components/UNMultiFactorAuthenticationComponent/UNMultiFactorAuthenticationComponent.utils.ts

@@ -0,0 +1,27 @@
+import { MultiFactorAuthenticationMessage } from '../../messages/webMessages/multiFactorAuthenticationMessage';
+import { UNMultiFactorAuthenticationComponentProps } from './UNMultiFactorAuthenticationComponent';
+
+export const getMultiFactorAuthenticationParams = (props: UNMultiFactorAuthenticationComponentProps) => {
+  return `
+    customer-token="${props.customerToken}"
+  `;
+};
+
+const MULTI_FACTOR_AUTHENTICATION_LISTENERS = {
+  verificationTokenCreated: `
+    window.addEventListener("${MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${MultiFactorAuthenticationMessage.UNIT_MFA_VERIFICATION_TOKEN_CREATED}", details: data.data })
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `
+};
+
+export const getMultiFactorAuthenticationScript = () => {
+  return `
+     ${MULTI_FACTOR_AUTHENTICATION_LISTENERS.verificationTokenCreated}
+  `;
+};

package/src/components/UNMultiFactorAuthenticationComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNMultiFactorAuthenticationComponent, UNMultiFactorAuthenticationComponentProps } from './UNMultiFactorAuthenticationComponent';

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.utils.ts

@@ -5,6 +5,6 @@ export const getNextRepaymentParams = (props: UNNextRepaymentComponentProps) =>
   return `
     customer-token="${props.customerToken}"
     account-id="${props.accountId}"
-    hide-actions-menu-button="${props.hideTitle || false}"
+    hide-title="${props.hideTitle || false}"
   `;
 };

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -8,7 +8,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { UNPayeeConnectedAccount, UNPayeeCounterparty, UNPayeeManagementComponentPaginationType, UNPayeeManagementMenuItem, UNPlaidAccountFilter } from '../../types/shared';
+import { UNError, UNOnLoadResponse, UNPayeeConnectedAccount, UNPayeeCounterparty, UNPayeeManagementComponentPaginationType, UNPayeeManagementMenuItem, UNPlaidAccountFilter } from '../../types/shared';
 import { getPayeeParams, getPayeeManagementScript, injectRefreshEventIfNeeded, injectUnitPlaidResponse, injectUnitOpenPlaid, injectUnitPlaidExit } from './UNPayeeManagementComponent.utils';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
@@ -20,6 +20,7 @@ import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeConnectedAccountEvent, PayeeCounterpartyEvent, PayeeManagementMessage, PayeeMicroDepositeConnectionEvent } from '../../messages/webMessages/payeeManagementMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 
 export interface UNPayeeManagementComponentProps {
   // inputs
@@ -45,6 +46,7 @@ export interface UNPayeeManagementComponentProps {
   plaidLinkCustomizationName?: string;
 
   // events
+  onLoad?: (response: UNOnLoadResponse<[UNPayeeCounterparty]>) => void;
   onCounterpartyCreated?: (counterparty: UNPayeeCounterparty) => void;
   onCounterpartyDeleted?: (counterparty: UNPayeeCounterparty) => void;
 
@@ -103,6 +105,25 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
     }
   };
 
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.counterpartiesResult in response) {
+      props.onLoad(response[RESPONSE_KEYS.counterpartiesResult] as UNOnLoadResponse<[UNPayeeCounterparty]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case UnitMessage.UNIT_REQUEST_RENDERING: {
@@ -111,6 +132,7 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
         break;
       }
       case UnitMessage.UNIT_ON_LOAD: {
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       }
       case PayeeManagementMessage.UNIT_CONNECTED_ACCOUNT_CREATED: {

package/src/components/index.ts

@@ -13,3 +13,5 @@ export * from './UNNextRepaymentComponent';
 export * from './UNWhiteLabelAppComponent';
 export * from './UNPayeeManagementComponent';
 export * from './UNWirePaymentComponent';
+export * from './UNMultiFactorAuthenticationComponent';
+export * from './UNCardActionComponent';

package/src/messages/webMessages/index.ts

@@ -12,6 +12,7 @@ import type { MultipleCardsEvent, MultipleCardsMessage } from './multipleCardsMe
 import { FundAccountPaymentEvent } from './fundAccountPaymentMessage';
 import { PlaidEvent, PlaidMessage } from './plaidMessages';
 import { PayeeManagementMessage, PayeeManagementEvent } from './payeeManagementMessage';
+import { MultiFactorAuthenticationMessage } from './multiFactorAuthenticationMessage';
 
 export type WebViewMessageType =
   | PageMessage
@@ -24,6 +25,7 @@ export type WebViewMessageType =
   | ActivityMessage
   | PlaidMessage
   | PayeeManagementMessage
+  | MultiFactorAuthenticationMessage
 
 type WebViewEvent =
   | PageEvent

package/src/messages/webMessages/multiFactorAuthenticationMessage.ts

@@ -0,0 +1,3 @@
+export enum MultiFactorAuthenticationMessage {
+  UNIT_MFA_VERIFICATION_TOKEN_CREATED = 'unitMultiFactorAuthVerificationTokenCreated'
+}

package/src/messages/webMessages/onLoadMessage.ts

@@ -4,6 +4,7 @@ import type {
   UNCardData,
   UNError,
   UNOnLoadResponseData,
+  UNPayeeCounterparty
 } from '../../types/shared';
 import type { UNAuthorizationData } from '../../types/shared/authorization.types';
 import type { UNTransactionData } from '../../types/shared/transactions.types';
@@ -19,7 +20,8 @@ export enum RESPONSE_KEYS {
   authorizations = 'authorizationsResult',
   repayment = 'repaymentResult',
   astraExternalCard = 'astraCardsResult',
-  accountCards = 'accountCardsResult'
+  accountCards = 'accountCardsResult',
+  counterpartiesResult = 'counterpartiesResult'
 }
 
 export type CardsOnLoadResponse = {
@@ -54,6 +56,10 @@ export type FundAccountPaymentOnLoadResponse = {
   [RESPONSE_KEYS.accountCards]?: UNOnLoadResponseData<[UNCardData]>
 }
 
+export type PayeeManagementOnLoadResponse = {
+  [RESPONSE_KEYS.counterpartiesResult]: UNOnLoadResponseData<[UNPayeeCounterparty]>
+}
+
 export type UnitOnLoadResponseSuccessData =
   | CardOnLoadResponse
   | CardsOnLoadResponse
@@ -62,6 +68,7 @@ export type UnitOnLoadResponseSuccessData =
   | AccountOnLoadResponse
   | ActivityOnLoadResponse
   | FundAccountPaymentOnLoadResponse
+  | PayeeManagementOnLoadResponse
 
 export type UnitOnLoadResponseEvent =
   | UNError

package/src/messages/webMessages/unitMessages.ts

@@ -13,11 +13,12 @@ export enum UnitMessage {
   UNIT_REQUEST_LEFT_TO_SPEND_DETAILS = 'unitRequestLeftToSpendDetails',
   UNIT_MULTI_FACTOR_AUTH_FINISHED = 'unitMultiFactorAuthFinished',
   UNIT_WHITE_LABEL_APP_ON_LOAD = 'unitWhiteLabelAppOnLoad',
-  UNIT_UNAUTHORIZED_TOKEN = 'unitUnauthorizedToken'
+  UNIT_UNAUTHORIZED_TOKEN = 'unitUnauthorizedToken',
+  UNIT_EVENT_TO_CONTINUE = 'unitEventToContinue'
 }
 
 export enum UnitRequestRefreshEventTypes {
-  REQUEST_REFRESH_EVENT = 'requestRefreshEvent' 
+  REQUEST_REFRESH_EVENT = 'requestRefreshEvent'
 }
 
 export interface RequestRenderingEvent {
@@ -38,6 +39,12 @@ export interface RequestRefreshEvent {
   resourceId?: string;
 }
 
+export interface MultiFactorAuthenticationFinishedEvent {
+  unitVerifiedCustomerTokenString: string;
+  parentInstanceId?: string;
+  eventToContinue?: string;
+}
+
 export interface RequestOpenLinkEvent {
   href: string;
   target: string;
@@ -51,6 +58,11 @@ export interface RequestDownloadEvent {
   fileName: string;
 }
 
+export interface EventToContinueEvent {
+  parentInstanceId?: string;
+  eventToContinue?: string;
+}
+
 export interface PlaidTokenCreatedEvent {
   linkToken: PlaidLinkTokenData;
 }

package/src/scripts/html/bodyScript.ts

@@ -146,12 +146,19 @@ export const LISTENERS = {
   `,
   unitMultiFactorAuthFinished: `
     window.addEventListener("${UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", async (e) => {
-      const response = await event.detail.response;
-      const data = JSON.stringify({
+      const response = await e.detail.response;
+      const unitVerifiedCustomerToken = {
         token: response.data.attributes.token,
         expiration: new Date().getTime() + response.data.attributes.expiresIn * 1000,
-      });
-      window.UnitStore["unitVerifiedCustomerToken"] = data;
+      };
+      const unitVerifiedCustomerTokenString = JSON.stringify(unitVerifiedCustomerToken);
+      window.UnitStore["unitVerifiedCustomerToken"] = unitVerifiedCustomerTokenString;
+
+      const data = {
+        unitVerifiedCustomerTokenString,
+        parentInstanceId: e.detail.parentInstanceId,
+        eventToContinue: e.detail.eventToContinue
+      }
 
       postMessageToSDK({ type: "${UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED}", details: data })
     });
@@ -241,6 +248,13 @@ export const DISPATCH_RENDERING_EVENT = `
   }
 `;
 
+export const DISPATCH_EVENT_TO_CONTINUE = `
+  const dispatchEventToContinue = (details) => {
+    const event = new CustomEvent("${UnitMessage.UNIT_EVENT_TO_CONTINUE}",{ detail: JSON.parse(details) })
+    window.dispatchEvent(event)
+  }
+`;
+
 export const DISPATCH_REQUEST_REFRESH = `
   const dispatchRefreshEvent = (details) => {
     let event;

package/src/slices/SharedEventsSlice.ts

@@ -4,7 +4,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../store';
 import type { UNAccountData, UNCardData, UNPayeeCounterparty } from '../types/shared';
 import type { ActivityFiltersChangedEvent } from '../messages/webMessages/activityMessage';
-import type { RequestRefreshEvent } from '../messages/webMessages/unitMessages';
+import type { MultiFactorAuthenticationFinishedEvent, RequestRefreshEvent } from '../messages/webMessages/unitMessages';
 import type { BottomSheetNativeMessage } from '../messages/nativeMessages/bottomSheetMessage';
 import type { CardMessage } from '../messages/webMessages/cardMessage';
 import type { AccountMessage } from '../messages/webMessages/accountMessage';
@@ -60,7 +60,7 @@ type RequestRefreshEventState = {
 
 type MultiFactorAuthFinishedEventState = {
   key: UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED,
-  data: string
+  data: MultiFactorAuthenticationFinishedEvent
 }
 
 type ComponentHeightEventState = {

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

@@ -15,6 +15,8 @@ export enum WebComponentType {
   payeeManagement = 'unit-elements-payee-management',
   wirePayment = 'unit-elements-wire-payment',
   whiteLabelApp = 'unit-elements-white-label-app',
+  multiFactorAuthentication = 'unit-elements-multi-factor-authentication',
+  cardMenu = 'unit-elements-card-menu'
 }
 
 export enum PresentationMode {

package/src/types/shared/multiFactorAuthentication.types.ts

@@ -0,0 +1,17 @@
+export interface UNMultiFactorVerification {
+	type: string
+
+	attributes: {
+		verificationToken: string
+		phoneLast4Digits?: string
+	}
+}
+
+export interface UNCustomerTokenVerification extends UNMultiFactorVerification {
+	type: 'customerTokenVerification'
+}
+
+export type UNMultiFactorAuthenticationFinished = {
+  token: string
+	expiresIn: number
+}

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

@@ -35,6 +35,14 @@ export type UNPayeeCounterparty = {
 		type: UNCounterpartyType
 		permissions: UNCounterpartyPermission
 		tags?: {[key: string]: string}
+	},
+  relationships: {
+		customer: {
+			data: {
+				type: 'customer'
+				id: number
+			}
+		}
 	}
 }
 
@@ -47,3 +55,26 @@ export enum UNPayeeManagementComponentPaginationType {
   infiniteScroll = 'infiniteScroll',
   pagination = 'pagination'
 }
+
+export type UNPayeeOnLoadCounterparty = {
+	id: string
+	attributes: {
+		name: string
+		bank?: string
+		routingNumber: string
+		accountNumber: string
+		accountType: UNCounterpartyAccountType
+		type: UNCounterpartyType
+		permissions: UNCounterpartyPermission
+		createdAt: Date
+		tags: {[key: string]: string}
+	}
+	relationships: {
+		customer: {
+			data: {
+				type: 'customer'
+				id: number
+			}
+		}
+	}
+}

package/src/unitSdkManager/UnitSdk.constants.ts

@@ -4,7 +4,7 @@ import { UNSecuritySettings, UNSnapshotProtectionStrategy } from '../types/share
 const WEB_SDK_RECOMMENDED_STRATEGY: UNWebVersioningStrategy = {
   type: UNVersioningStrategyType.upToNextMinor,
   major: 1,
-  minor: 8,
+  minor: 10,
 };
 
 const DEFAULT_SECURITY_SETTINGS: UNSecuritySettings = {

package/src/unitSdkManager/UnitSdkManager.ts

@@ -1,4 +1,4 @@
-import { NativeModules } from 'react-native';
+import { NativeModules, Platform } from 'react-native';
 import { fetchUnitScript } from './UnitSdk.api';
 import { UnitUiManager } from './unitUiManager/unitUiManager';
 import type { UNFonts } from '../types/shared/fonts.types';
@@ -26,7 +26,7 @@ export class UnitSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '1.14.0';
+  protected static sdkVersion = '1.15.0';
 
   public static init = async (
     env: UNEnvironment,
@@ -52,7 +52,9 @@ export class UnitSDK {
       store.dispatch(setLanguage(language));
       warnClientIfNeeded(this.webVersioningStrategy);
       const shouldProtectFromSnapshot = securitySettings.snapshotProtectionStrategy != UNSnapshotProtectionStrategy.None;
-      UNSnapshotProtectionHelper.setIosSecurity(shouldProtectFromSnapshot, 'light');
+      if (Platform.OS === 'ios') {
+        UNSnapshotProtectionHelper.setIosSecurity(shouldProtectFromSnapshot, 'light');
+      }
       await fetchUnitScript();
     } catch (e) {
       console.log(e);
@@ -63,7 +65,7 @@ export class UnitSDK {
     return this.env != undefined;
   };
 
-  public static setPushProvisioningModule = (pushProvisionModule: typeof NativeModules) => {
+  public static setPushProvisioningModule = (pushProvisionModule?: typeof NativeModules) => {
     this.pushProvisionModule = pushProvisionModule;
   };
 

package/src/webComponent/WebComponent.tsx

@@ -9,13 +9,14 @@ import {
   UnitMessage,
   RequestDownloadEvent,
   RequestOpenLinkEvent,
+  MultiFactorAuthenticationFinishedEvent,
 } from '../messages/webMessages/unitMessages';
 import { getHtmlBody } from '../scripts/html/bodyHtml';
 import { fetchUnitScript } from '../unitSdkManager/UnitSdk.api';
 import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
 import type { WebViewMessage } from '../messages/webMessages';
 
-import { getInfoParams, handleRequestDownload } from './WebComponent.utils';
+import { getInfoParams, handleRequestDownload, injectEventToContinue } from './WebComponent.utils';
 import type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';
 import { getFontFacesString } from '../scripts/html/fontFaces';
 import type { RootState } from '../store';
@@ -116,10 +117,15 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   }, [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);
+  const handleMultiFactorAuthFinished = (data: MultiFactorAuthenticationFinishedEvent) => {
+    setItemInWindowUnitStore(webRef.current, UserDataKeys.unitVerifiedToken, data.unitVerifiedCustomerTokenString);
+    injectEventToContinue(webRef.current, {
+      parentInstanceId: data.parentInstanceId,
+      eventToContinue: data.eventToContinue
+    });
   };
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED, action: updateVerifiedCustomerToken });
+
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED, action: handleMultiFactorAuthFinished });
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
@@ -145,14 +151,15 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
         break;
       case UnitMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED:
         if (message.details) {
-          const data = message.details as string;
-          UNStoreManagerHelper.saveValue(UserDataKeys.unitVerifiedToken, data);
+          const data = message.details as MultiFactorAuthenticationFinishedEvent;
+          UNStoreManagerHelper.saveValue(UserDataKeys.unitVerifiedToken, data.unitVerifiedCustomerTokenString);
           // 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,
           }));
         }
+        props.onMessage && props.onMessage(message);
         break;
       case UnitMessage.UNIT_UNAUTHORIZED_TOKEN:
         UnitSDK.cleanUserData();
@@ -191,6 +198,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       onMessage={onMessage}
       androidLayerType='hardware'
       webviewDebuggingEnabled={__DEV__}
+      mediaCapturePermissionGrantType='grant'
     />
   );
 });

package/src/webComponent/WebComponent.utils.ts

@@ -1,8 +1,9 @@
 import axios from 'axios';
 import { Share, NativeModules, Platform } from 'react-native';
 import * as AppInfo from '../utils/AppInfo';
-import type { RequestDownloadEvent } from '../messages/webMessages/unitMessages';
+import type { EventToContinueEvent, RequestDownloadEvent } from '../messages/webMessages/unitMessages';
 import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+import WebView from 'react-native-webview';
 const { RNShareFile } = NativeModules;
 
 export const getInfoParams = async () => {
@@ -41,3 +42,7 @@ export const handleRequestDownload = async (details: RequestDownloadEvent, onRea
     }
   }
 };
+
+export const injectEventToContinue = (currentWeb: WebView | null, eventToContinueEvent: EventToContinueEvent) => {
+  currentWeb?.injectJavaScript(`dispatchEventToContinue('${JSON.stringify(eventToContinueEvent)}')`);
+};

package/src/webComponent/html.ts

@@ -10,7 +10,8 @@ import {
   DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT,
   DISPATCH_REQUEST_SHOW_SENSITIVE_DATA,
   DISPATCH_REQUEST_HIDE_SENSITIVE_DATA,
-  SET_ITEM_IN_WINDOW_UNIT_STORE
+  SET_ITEM_IN_WINDOW_UNIT_STORE,
+  DISPATCH_EVENT_TO_CONTINUE
 } from '../scripts/html/bodyScript';
 
 export const HTML_PLACEHOLDER = {
@@ -88,6 +89,8 @@ const htmlText = `
 
       ${DISPATCH_RENDERING_EVENT}
 
+      ${DISPATCH_EVENT_TO_CONTINUE}
+
       ${DISPATCH_OPEN_ACTIONS_MENU}
 
       ${DISPATCH_REQUEST_HIDE_SENSITIVE_DATA}