react-native-unit-components 3.1.2-beta.1 → 3.1.2-beta.3

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -16,6 +16,7 @@ import WebView from 'react-native-webview';
 import {
   getWhiteLabelAppParams,
   getWhiteLabelAppScript,
+  injectAccountCreationActionsOpenPlaidForLinkExternalAccount,
   injectRefreshEventIfNeeded,
 } from './UNWhiteLabelAppComponent.utils';
 import { UserDataKeys } from '../../types/internal/unitStore.types';
@@ -25,6 +26,10 @@ import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { setItemInWindowUnitStore } from '../../utils/windowUnitStore';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { UnitComponentsSDK } from '../../unitComponentsSdkManager/UnitComponentsSdkManager';
+import { AccountMessage } from '../../messages/webMessages/accountMessage';
+import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { injectUnitPlaidExit, injectUnitPlaidResponse } from '../UNPayeeManagementComponent/UNPayeeManagementComponent.utils';
+import { LinkExit, LinkSuccess, open as openPlaidLink, create as createPlaidLink } from 'react-native-plaid-link-sdk';
 
 export interface UNWhiteLabelAppComponentProps {
   // inputs
@@ -66,9 +71,12 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
         }
         break;
       }
-
       case PageMessage.PAGE_LOADED:
         updateWindowUnitStore();
+        break;
+      case PlaidMessage.UNIT_OPEN_PLAID:
+        openPlaid(message.details as OpenPlaidEvent);
+        break;
     }
   };
 
@@ -94,11 +102,38 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
     webRef.current?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
   };
 
+  const openPlaid = (openPlaidData: OpenPlaidEvent) => {
+    const linkToken = openPlaidData.plaidLinkToken.attributes.linkToken;
+    createPlaidLink({ token: linkToken });
+
+    openPlaidLink({
+      onSuccess: (success: LinkSuccess) => {
+        injectUnitPlaidResponse(webRef.current, success);
+      },
+      onExit: (exit: LinkExit) => {
+        injectUnitPlaidExit(webRef.current, exit.error);
+      }
+    });
+  };
+
   useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useEventListener({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
   });
+  useEventListener({
+    busEventKey: PlaidMessage.UNIT_OPEN_PLAID,
+    action: (details) => {
+      openPlaid(details);
+    },
+  });
+  useEventListener({
+    busEventKey: AccountMessage.UNIT_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT,
+    action: () => injectAccountCreationActionsOpenPlaidForLinkExternalAccount(webRef.current),
+  });
+  useEventListener({ busEventKey: AccountMessage.UNIT_ACCOUNT_CREATED, action: () => {
+    webRef.current?.injectJavaScript('dispatchAccountCreatedEvent()');
+  } });
 
   const renderWebView = () => {
     return (

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.utils.ts

@@ -1,7 +1,7 @@
 import WebView from 'react-native-webview';
 import { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import { UNWhiteLabelAppComponentProps } from './UNWhiteLabelAppComponent';
-import { DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT, DISPATCH_OPEN_PLAID, DISPATCH_PLAID_EXIT, DISPATCH_PLAID_RESPONSE, DISPATCH_REQUEST_REFRESH, LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getWhiteLabelAppParams = (props: UNWhiteLabelAppComponentProps) => {
   // customer token is the preferred way to authenticate
@@ -26,10 +26,18 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
   }
 };
 
+export const injectAccountCreationActionsOpenPlaidForLinkExternalAccount = (currentWeb: WebView | null) => {
+  currentWeb?.injectJavaScript('dispatchAccountCreationActionsOpenPlaidForLinkExternalAccount()');
+};
+
 export const getWhiteLabelAppScript = () => {
   return `
     ${DISPATCH_REQUEST_REFRESH}
-
+    ${DISPATCH_OPEN_PLAID}
+    ${DISPATCH_PLAID_RESPONSE}
+    ${DISPATCH_PLAID_EXIT}
+    ${DISPATCH_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT}
     ${LISTENERS.unitWhiteLabelAppOnLoad}
+    ${LISTENERS.unitCounterpartyCreated}
   `;
 };

package/src/hooks/useSafeAreaDimensions.ts

@@ -1,5 +1,6 @@
 import { Dimensions, Platform } from 'react-native';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+import { isNavigationBarTranslucent } from '../nativeModulesHelpers/UNNavigationBarHelper';
 
 const isAndroid = Platform.OS === 'android';
 const isAndroid10To14 = isAndroid && Platform.Version >= 29 && Platform.Version < 35;
@@ -9,12 +10,20 @@ const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, rig
 const windowHeight = Dimensions.get('window').height;
 const screenHeight = Dimensions.get('screen').height;
 
-// Detect edge-to-edge by comparing window to screen height
-// Edge-to-edge ON: windowHeight ≈ screenHeight | OFF: windowHeight < screenHeight
+// Detect edge-to-edge on API 35+ by comparing window to screen height
 const heightDifference = Math.abs(screenHeight - windowHeight);
 const isEdgeToEdgeActive = isAndroid15AndAbove && heightDifference < 10;
 
-const effectiveBottomInset = isEdgeToEdgeActive ? insets.bottom : 0;
+// Resolved once at module load time; defaults to false until resolved.
+// The native call is fast (reads a window flag), so it resolves before
+// any bottom sheet is opened.
+let _navBarTranslucent = false;
+
+if (isAndroid) {
+  isNavigationBarTranslucent().then((result) => {
+    _navBarTranslucent = result;
+  });
+}
 
 const calculateFullScreenHeight = (): number => {
   if (isAndroid15AndAbove) {
@@ -41,6 +50,9 @@ const calculateContentHeight = (): number => {
 const contentHeight = calculateContentHeight();
 
 export const useSafeAreaDimensions = () => {
+  const shouldApplyBottomInset = isEdgeToEdgeActive || _navBarTranslucent;
+  const effectiveBottomInset = shouldApplyBottomInset ? insets.bottom : 0;
+
   return {
     insets,
     fullScreenHeight,

package/src/messages/webMessages/accountMessage.ts

@@ -1,12 +1,13 @@
 import type { UNAccount } from '../../types/shared';
 
 export enum AccountMessage {
-  UNIT_ACCOUNT_CHANGED = 'unitAccountChanged'
+  UNIT_ACCOUNT_CHANGED = 'unitAccountChanged',
+  UNIT_ACCOUNT_CREATED = 'unitAccountCreated',
+  UNIT_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT = 'unitAccountCreationActionsOpenPlaidForLinkExternalAccount',
 }
 
 export interface AccountChangedEvent {
   account: UNAccount;
 }
 
-export type AccountEvent =
-  | AccountChangedEvent
+export type AccountEvent = AccountChangedEvent;

package/src/nativeModulesHelpers/UNNavigationBarHelper.ts

@@ -0,0 +1,14 @@
+import { Platform, NativeModules } from 'react-native';
+
+const UNNavigationBarModule = Platform.OS === 'android'
+  ? NativeModules.UNNavigationBarModule
+  : undefined;
+
+export async function isNavigationBarTranslucent(): Promise<boolean> {
+  if (!UNNavigationBarModule) return false;
+  try {
+    return await UNNavigationBarModule.isNavigationBarTranslucent();
+  } catch {
+    return false;
+  }
+}

package/src/scripts/html/bodyScript.ts

@@ -157,6 +157,12 @@ export const LISTENERS = {
       })
   });
   `,
+  unitAccountCreated: `
+    window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CREATED}", (e) => {
+      if (e.detail?.fromSDK) { return }
+      postMessageToSDK({ type: "${AccountMessage.UNIT_ACCOUNT_CREATED}" })
+    });
+  `,
   unitActivityFiltersChanged: `
     window.addEventListener("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", (e) => {
       postMessageToSDK({ type: "${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", details: e.detail })
@@ -262,13 +268,19 @@ export const LISTENERS = {
 
   unitOpenPlaid: `
     window.addEventListener("${PlaidMessage.UNIT_OPEN_PLAID}", async (e) => {
-      const response = event.detail;
+      const response = e.detail;
       response.then((data) => {
         postMessageToSDK({ type: "${PlaidMessage.UNIT_OPEN_PLAID}", details: data.data })
       }).catch((e) => {
         console.log(e)
       })
     });
+  `,
+  unitAccountCreationActionsOpenPlaidForLinkExternalAccount: `
+    window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT}", (e) => {
+      if (e.detail?.fromSDK) { return }
+      postMessageToSDK({ type: "${AccountMessage.UNIT_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT}" })
+    });
   `
 };
 
@@ -286,6 +298,12 @@ export const DISPATCH_EVENT_TO_CONTINUE = `
   }
 `;
 
+export const DISPATCH_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT = `
+  const dispatchAccountCreationActionsOpenPlaidForLinkExternalAccount = () => {
+    window.dispatchEvent(new CustomEvent("${AccountMessage.UNIT_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT}", { detail: { fromSDK: true } }))
+  }
+`;
+
 export const DISPATCH_CARD_STATUS_CHANGED = `
   const dispatchCardStatusChanged = (details) => {
     const event = new CustomEvent("${CardMessage.CARD_STATUS_CHANGED}",{ detail: JSON.parse(details) })
@@ -385,9 +403,15 @@ export const DISPATCH_REQUEST_ACCOUNT_ACTION = `
     }
 `;
 
+export const DISPATCH_ACCOUNT_CREATED_EVENT = `
+  const dispatchAccountCreatedEvent = () => {
+    window.dispatchEvent(new CustomEvent("${AccountMessage.UNIT_ACCOUNT_CREATED}", { detail: { fromSDK: true } }));
+  }
+`;
+
 export const DISPATCH_COUNTERPARTY_DELETED = `
   const dispatchCounterpartyDeletedEvent = (details) => {
     const event = new CustomEvent("unitCounterpartyDeleted",{ detail: { data: details } });
     window.dispatchEvent(event);
   }
-`;
+`;

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.ts

@@ -26,7 +26,7 @@ export class UnitComponentsSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '3.1.2-beta.1';
+  protected static sdkVersion = '3.1.2-beta.3';
   static iosFontBase64Map: Record<string, string> = {};
 
   public static init = async (

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.utils.internal.ts

@@ -2,7 +2,10 @@ import type { UNComponentsWebVersioningStrategy } from '../types/shared';
 import { UNComponentsEnvironment } from '../types/shared/env.types';
 import { getWebSdkVersionString } from '../utils/webVersioningStrategy.utils';
 
-export const getUnitScriptUrl = (env: UNComponentsEnvironment, webVersioningStrategy: UNComponentsWebVersioningStrategy) => {
+export const getUnitScriptUrl = (
+  env: UNComponentsEnvironment,
+  webVersioningStrategy: UNComponentsWebVersioningStrategy
+) => {
   const webSdkVersionString = getWebSdkVersionString(webVersioningStrategy);
 
   switch (env) {

package/src/utils/eventBus/EventBus.types.ts

@@ -19,6 +19,7 @@ export type EventMap = {
   [CardMessage.CARD_ACTIVATED]: UNCard;
   [CardMessage.CARD_CREATED]: CardCreatedEvent;
   [AccountMessage.UNIT_ACCOUNT_CHANGED]: UNAccount;
+  [AccountMessage.UNIT_ACCOUNT_CREATED]: Record<PropertyKey, never>;
   [ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED]: ActivityFiltersChangedEvent;
   [MultipleCardsMessage.UNIT_MULTIPLE_CARDS_CARD_CLICKED]: UNCard;
   [MultipleCardsMessage.UNIT_MULTIPLE_CARDS_FILTERS_CHANGED]: MultipleCardsFiltersChangedEvent;
@@ -28,6 +29,7 @@ export type EventMap = {
   [UnitComponentsMessage.UNIT_MULTI_FACTOR_AUTH_FINISHED]: MultiFactorAuthenticationFinishedEvent;
   [PageMessage.PAGE_HEIGHT]: number;
   [PlaidMessage.UNIT_OPEN_PLAID]: OpenPlaidEvent;
+  [AccountMessage.UNIT_ACCOUNT_CREATION_ACTIONS_OPEN_PLAID_FOR_LINK_EXTERNAL_ACCOUNT]: Record<PropertyKey, never>;
   [PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED]: UNCounterparty;
 };
 

package/src/webComponent/WebComponent.tsx

@@ -49,6 +49,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   const customerToken = useSelector((state: RootState) => state.configuration.customerToken);
   const [sourceHtml, setSourceHtml] = useState<string | null>(null);
   const [baseName, setBaseName] = useState<string>();
+  const [androidPackageName, setAndroidPackageName] = useState<string>();
   const [infoParams, setInfoParams] = useState<{ [key: string]: string }>({});
 
   const webRef = useRef(null);
@@ -65,6 +66,8 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
           setBaseName(name.replace(/ /g, '-'));
         } else { // android
           setBaseName('unit');
+          const packageName = await AppInfo.getAppIdentifier();
+          setAndroidPackageName(packageName);
         }
       } catch (error: any) {
         console.error(error);
@@ -104,6 +107,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
 
       const windowInfoParams = `window.UnitMobileSDKConfig['info'] = ${JSON.stringify(infoParams)};`;
       const plaidRedirectUriParam = (Platform.OS == 'ios' && UnitComponentsSDK.helpers.redirectUri) ? `window.UnitMobileSDKConfig['plaidRedirectUri'] = '${UnitComponentsSDK.helpers.redirectUri}/plaid';` : '';
+      const androidPackageNameParam = androidPackageName ? `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}';` : '';
       const unitSessionIdParam = `window.UnitSessionStore.unitSessionId = '${UnitComponentsSDK.helpers.unitSessionId}';`;
 
       const unitVerifiedCustomerToken = await UNStoreManagerHelper.getValue(UserDataKeys.unitVerifiedCustomerToken);
@@ -111,7 +115,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       const windowVerifiedCustomerToken = unitVerifiedCustomerToken ? `window.UnitStore['${UserDataKeys.unitVerifiedCustomerToken}'] = '${unitVerifiedCustomerToken}';` : '';
       const windowAppFormVerifiedToken = unitAppFormVerifiedToken ? `window.UnitStore['${UserDataKeys.unitApplicationFormVerifiedToken}'] = '${unitAppFormVerifiedToken}';` : '';
 
-      const windowParams = `${windowInfoParams} ${unitSessionIdParam} ${plaidRedirectUriParam} ${windowVerifiedCustomerToken} ${windowAppFormVerifiedToken} ${props.windowParams || ''}`;
+      const windowParams = `${windowInfoParams} ${unitSessionIdParam} ${plaidRedirectUriParam} ${androidPackageNameParam} ${windowVerifiedCustomerToken} ${windowAppFormVerifiedToken} ${props.windowParams || ''}`;
 
       let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
       newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);
@@ -122,7 +126,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
 
     updateSourceHTML();
 
-  }, [props.params, unitScript, props.presentationMode, props.script, props.windowParams, globalTheme, globalLanguage, customerToken, infoParams]);
+  }, [props.params, unitScript, props.presentationMode, props.script, props.windowParams, globalTheme, globalLanguage, customerToken, infoParams, androidPackageName]);
 
   // Listen and update the live webComponents
   const handleMultiFactorAuthFinished = (data: MultiFactorAuthenticationFinishedEvent) => {

package/src/webComponent/html.ts

@@ -15,6 +15,7 @@ import {
   DISPATCH_CARD_STATUS_CHANGED,
   DISPATCH_MULTIPLE_CARDS_FILTER_CHANGED_EVENT,
   DISPATCH_CARD_CREATED_EVENT,
+  DISPATCH_ACCOUNT_CREATED_EVENT,
 } from '../scripts/html/bodyScript';
 
 export const HTML_PLACEHOLDER = {
@@ -86,6 +87,8 @@ const htmlText = `
 
       ${LISTENERS.unitAccountChanged}
 
+      ${LISTENERS.unitAccountCreated}
+
       ${LISTENERS.unitActivityFiltersChanged}
 
       ${LISTENERS.unitMultipleCardsFiltersChanged}
@@ -116,6 +119,8 @@ const htmlText = `
 
       ${DISPATCH_REQUEST_ACCOUNT_ACTION}
 
+      ${DISPATCH_ACCOUNT_CREATED_EVENT}
+
       ${SET_ITEM_IN_WINDOW_UNIT_STORE}
 
       ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}