react-native-unit-components 1.11.0 → 1.13.0

package/src/unitSdkManager/unitHelpersManager/UnitHelpersManager.ts

@@ -0,0 +1,31 @@
+export class UnitHelpersManager {
+  redirectUri?: string;
+  unitSessionId?: string;
+
+  constructor() {
+    this.init();
+  }
+
+  private init = () => {
+    this.redirectUri = undefined;
+    this.unitSessionId = this.generateUUID();
+  };
+
+  private generateUUID = () => {
+    let d = new Date().getTime(); //Timestamp
+    let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      let r = Math.random() * 16; //random number between 0 and 16
+      if (d > 0) {
+        //Use timestamp until depleted
+        r = (d + r) % 16 | 0;
+        d = Math.floor(d / 16);
+      } else {
+        //Use microseconds since page-load if supported
+        r = (d2 + r) % 16 | 0;
+        d2 = Math.floor(d2 / 16);
+      }
+      return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  };
+}

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,52 @@ 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 unitSessionIdParam = `window.UnitSessionStore.unitSessionId = '${UnitSDK.helpers.unitSessionId}';`;
 
-    const fontFaces = getFontFacesString(UnitSDK.getFonts());
+      const unitVerifiedCustomerToken = await UNStoreManagerHelper.getValue(UserDataKeys.unitVerifiedToken);
+      const windowVerifiedCustomerToken = unitVerifiedCustomerToken ? `window.UnitStore['unitVerifiedCustomerToken'] = '${unitVerifiedCustomerToken}';` : '';
+
+      const windowParams = `${windowInfoParams} ${unitSessionIdParam} ${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 +139,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);
     }

package/src/webComponent/WebComponent.utils.ts

@@ -1,8 +1,8 @@
 import axios from 'axios';
 import { Share, NativeModules, Platform } from 'react-native';
-import * as SDKInfo from '../utils/SDKInfo';
 import * as AppInfo from '../utils/AppInfo';
 import type { RequestDownloadEvent } from '../messages/webMessages/unitMessages';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
 const { RNShareFile } = NativeModules;
 
 export const getInfoParams = async () => {
@@ -11,7 +11,7 @@ export const getInfoParams = async () => {
   const appIdentifier = await AppInfo.getAppIdentifier();
 
   const infoParams: { [key: string]: string } = {};
-  infoParams['sdkVersion'] = SDKInfo.getSDKVersion();
+  infoParams['sdkVersion'] = UnitSDK.getSdkVersion();
   infoParams['sdkPlatform'] = 'React Native';
   infoParams['os'] = Platform.OS == 'android' ? 'Android' : 'iOS';
   infoParams['hostedAppVersion'] = appVersion;

package/src/webComponent/html.ts

@@ -8,7 +8,9 @@ import {
   DISPATCH_OPEN_ACTIONS_MENU,
   DISPATCH_REQUEST_ACCOUNT_ACTION,
   DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT,
-  DISPATCH_REQUEST_SHOW_SENSITIVE_DATA, DISPATCH_REQUEST_HIDE_SENSITIVE_DATA,
+  DISPATCH_REQUEST_SHOW_SENSITIVE_DATA,
+  DISPATCH_REQUEST_HIDE_SENSITIVE_DATA,
+  SET_ITEM_IN_WINDOW_UNIT_STORE
 } from '../scripts/html/bodyScript';
 
 export const HTML_PLACEHOLDER = {
@@ -27,6 +29,8 @@ const htmlText = `
     <title>Unit Web SDK Demo</title>
     <script>
     window.UnitMobileSDK = true
+    window.UnitStore = {}
+    window.UnitSessionStore = {}
     window.UnitMobileSDKConfig = {
       os: "${Platform.OS}",
       walletName: "${Platform.OS === 'ios' ? 'Apple' : 'Google'}",
@@ -68,12 +72,20 @@ const htmlText = `
 
       ${LISTENERS.cardStatusChange}
 
+      ${LISTENERS.unitCounterpartyDeleted}
+
       ${LISTENERS.unitRequestExternalSdk}
 
+      ${LISTENERS.unitOpenPlaid}
+
       ${LISTENERS.unitAccountChanged}
 
       ${LISTENERS.unitActivityFiltersChanged}
 
+      ${LISTENERS.unitMultiFactorAuthFinished}
+
+      ${LISTENERS.unitUnauthorizedToken}
+
       ${DISPATCH_RENDERING_EVENT}
 
       ${DISPATCH_OPEN_ACTIONS_MENU}
@@ -88,6 +100,8 @@ const htmlText = `
 
       ${DISPATCH_REQUEST_ACCOUNT_ACTION}
 
+      ${SET_ITEM_IN_WINDOW_UNIT_STORE}
+
       ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}
     </script>
   </body>

package/lib/commonjs/utils/SDKInfo.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSDKVersion = void 0;
-var _package = _interopRequireDefault(require("../../package.json"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const getSDKVersion = () => {
-  return _package.default.version;
-};
-exports.getSDKVersion = getSDKVersion;
-//# sourceMappingURL=SDKInfo.js.map

package/lib/commonjs/utils/SDKInfo.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_package","_interopRequireDefault","require","obj","__esModule","default","getSDKVersion","Package","version","exports"],"sourceRoot":"../../../src","sources":["utils/SDKInfo.ts"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAyC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAElC,MAAMG,aAAa,GAAGA,CAAA,KAAM;EACjC,OAAOC,gBAAO,CAACC,OAAO;AACxB,CAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA"}

package/lib/module/utils/SDKInfo.js

@@ -1,5 +0,0 @@
-import Package from '../../package.json';
-export const getSDKVersion = () => {
-  return Package.version;
-};
-//# sourceMappingURL=SDKInfo.js.map

package/lib/module/utils/SDKInfo.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Package","getSDKVersion","version"],"sourceRoot":"../../../src","sources":["utils/SDKInfo.ts"],"mappings":"AAAA,OAAOA,OAAO,MAAM,oBAAoB;AAExC,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,OAAOD,OAAO,CAACE,OAAO;AACxB,CAAC"}

package/lib/typescript/src/utils/SDKInfo.d.ts

@@ -1,2 +0,0 @@
-export declare const getSDKVersion: () => string;
-//# sourceMappingURL=SDKInfo.d.ts.map

package/lib/typescript/src/utils/SDKInfo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SDKInfo.d.ts","sourceRoot":"","sources":["../../../../src/utils/SDKInfo.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,cAEzB,CAAC"}

package/src/utils/SDKInfo.ts

@@ -1,5 +0,0 @@
-import Package from '../../package.json';
-
-export const getSDKVersion = () => {
-  return Package.version;
-};