react-native-unit-components 1.5.0 → 1.6.1

package/lib/typescript/scripts/html/bodyScript.d.ts

@@ -12,6 +12,7 @@ export declare const LISTENERS: {
     cardStatusChange: string;
     unitRequestExternalSdk: string;
     unitPaymentCreated: string;
+    unitPlaidTokenCreated: string;
     unitAccountChanged: string;
     unitActivityFiltersChanged: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -1,15 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { View } from 'react-native';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
-import { getACHCreditParams, getACHCreditScript } from './UNACHCreditComponent.utils';
+import { Platform, View } from 'react-native';
+import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from './UNACHCreditComponent.utils';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import type WebView from 'react-native-webview';
+import { getAndroidPackageName } from '../utils/nativeModulesInfo';
 
 export interface UNACHCreditComponentProps {
   accountId: string;
@@ -18,6 +21,7 @@ export interface UNACHCreditComponentProps {
   language?: string;
   isAutoFocus?: boolean;
   fee?: number;
+  withPlaid?: boolean;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
 }
@@ -25,6 +29,19 @@ export interface UNACHCreditComponentProps {
 export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+  const [linkToken, setLinkToken] = useState<string>();
+  const [appPackageName, setAppPackageName] = useState<string>();
+  const webRef = useRef<WebView>(null);
+
+  useEffect(() => {
+    const setPackageNameForAndroid = async () => {
+      if (Platform.OS === 'android') {
+        const packageName = await getAndroidPackageName();
+        setAppPackageName(packageName);
+      }
+    };
+    setPackageNameForAndroid();
+  }, []);
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -72,16 +89,38 @@ export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         }
         break;
       }
+      case UnitMessage.UNIT_PLAID_TOKEN_CREATED: {
+        const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
+        const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
+        setLinkToken(linkTokenData.attributes.linkToken);
+        break;
+      }
+
+      case UnitMessage.UNIT_REQUEST_EXTERNAL_SDK: {
+        const externalSdkType = (message.details as RequestExternalSdkEvent).type;
+        if (externalSdkType !== 'plaid') return;
+        linkToken && openLink({
+          tokenConfig: { noLoadingState: false, token: linkToken },
+          onSuccess: (success: LinkSuccess) => {
+            injectUnitPlaidResponse(webRef.current, success);
+          },
+          onExit: exit => { console.log(exit); }
+        }).catch(e => {
+          console.error(e);
+        });
+        break;
+      }
     }
   };
 
   const renderACHCreditWebView = () => {
     return (
       <WebComponent
+        ref={webRef}
         type={WebComponentType.achCreditPayment}
         presentationMode={presentationMode}
         params={getACHCreditParams(props)}
-        script={getACHCreditScript()}
+        script={getACHCreditScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         isScrollable={false}
         theme={props.theme}

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -1,26 +1,29 @@
 import type { UNACHCreditComponentProps } from './UNACHCreditComponent';
-
-import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import type WebView from 'react-native-webview';
+import type { LinkSuccess } from 'react-native-plaid-link-sdk';
+import { DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
   `;
 };
 
-export const getACHCreditScript = () => {
+export const getACHCreditScript = (appPackageName?: string) => {
   return `
-    window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
-      const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
-        }).catch((e) => {
-          console.log(e)
-        })
-    });
+    ${LISTENERS.unitPlaidTokenCreated}
+    ${appPackageName && `window.UnitMobileSDKConfig.androidPackageName='${appPackageName}'`}
+    ${LISTENERS.unitPaymentCreated}
+    ${DISPATCH_PLAID_RESPONSE}
   `;
 };
+
+export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
+  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
+};

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -6,14 +6,14 @@ import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHO
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
 import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { getACHDebitParams, getACHDebitScript, getAndroidPackageName, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
-
+import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { getAndroidPackageName } from '../utils/nativeModulesInfo';
 
 export interface UNACHDebitComponentProps {
   accountId: string;
@@ -43,10 +43,6 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     setPackageNameForAndroid();
   }, []);
 
-  const dispatchUnitPlaidResponse = (success: LinkSuccess) => {
-    injectUnitPlaidResponse(webRef.current, success);
-  };
-
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
       return;
@@ -105,8 +101,8 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         if (externalSdkType !== 'plaid') return;
         linkToken && openLink({
           tokenConfig: { noLoadingState: false, token: linkToken },
-          onSuccess: (success) => {
-            dispatchUnitPlaidResponse(success);
+          onSuccess: (success: LinkSuccess) => {
+            injectUnitPlaidResponse(webRef.current, success);
           },
           onExit: exit => { console.log(exit); }
         }).catch(e => {

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -3,9 +3,6 @@ import type { UNACHDebitComponentProps } from './UNACHDebitComponent';
 
 import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
-import { NativeModules } from 'react-native';
-const { RNAppInfoModule } = NativeModules;
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   return `
@@ -17,25 +14,9 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   `;
 };
 
-export const getAndroidPackageName = async () => {
-  try {
-    const response = await RNAppInfoModule.getAppPackageName();
-    return response;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
 export const getACHDebitScript = (androidPackageName?: string) => {
   return `
-      window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
-        const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
-        }).catch((e) => {
-          console.log(e)
-        })
-      });
+    ${LISTENERS.unitPlaidTokenCreated}
     ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
     ${DISPATCH_PLAID_RESPONSE}

package/src/components/UNAccountComponent/UNAccountComponent.utils.ts

@@ -5,9 +5,10 @@ import { WebComponentType } from '../../webComponent/WebComponent';
 import type { UNAccountMenuAction } from 'src/sharedTypes';
 
 export const getAccountParams = (props: UNAccountComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
   `;

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -18,8 +18,8 @@ import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
   // inputs
-  accountId: string;
   customerToken: string;
+  accountId?: string;
   queryFilter?: string
 
   // ui

package/src/components/UNActivityComponent/UNActivityComponent.utils.ts

@@ -5,10 +5,12 @@ import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type { UNActivityComponentProps } from './UNActivityComponent';
 
 export const getActivityParams = (props: UNActivityComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const queryFilterParam = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
+
   return `
-    account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
     ${queryFilterParam}
     style="height: 100%"

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -12,13 +12,19 @@ import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMes
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 
 export interface UNBookPaymentComponentProps {
+  //inputs
   accountId: string;
   customerToken: string;
   isSameCustomer: boolean;
   counterPartyAccountId: string;
   counterPartyName: string;
+
+  // ui
   theme?: string;
   language?: string;
+  isAutoFocus?: boolean;
+
+  // events
   onPaymentCreated?: (data: UNBookPaymentData) => void;
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
 }

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -10,6 +10,7 @@ export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
     is-same-customer="${props.isSameCustomer}"
     counterparty-account-id="${props.counterPartyAccountId}"
     counterparty-name="${props.counterPartyName}"
+    is-auto-focus="${props.isAutoFocus || false}"
     style="height: 100%"
   `;
 };

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -21,6 +21,7 @@ export interface UNCardComponentProps {
   // inputs
   cardId: string;
   customerToken: string;
+  learnMoreUrl?: string;
 
   // ui
   theme?: string;

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

@@ -17,6 +17,7 @@ export const getCardParams = (props: UNCardComponentProps) => {
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
+    learn-more-url="${props.learnMoreUrl || ''}"
   `;
 };
 

package/src/components/utils/nativeModulesInfo.ts

@@ -0,0 +1,11 @@
+import { NativeModules } from 'react-native';
+const { RNAppInfoModule } = NativeModules;
+
+export const getAndroidPackageName = async () => {
+  try {
+    const response = await RNAppInfoModule.getAppPackageName();
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};

package/src/scripts/html/bodyScript.ts

@@ -84,7 +84,7 @@ export const LISTENERS = {
   window.addEventListener("${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", (e) => {
     postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
   });
-`,
+  `,
   unitPaymentCreated: `
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
@@ -93,8 +93,18 @@ export const LISTENERS = {
       }).catch((e) => {
         console.log(e)
       })
-  });`
-  ,
+  });
+  `,
+  unitPlaidTokenCreated: `
+  window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
+    const response = e.detail
+    response.then((data) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
+    }).catch((e) => {
+      console.log(e)
+    })
+  });
+  `,
   unitAccountChanged: `
     window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CHANGED}", (e) => {
       const response = e.detail

package/src/webComponent/WebComponent.tsx

@@ -139,7 +139,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}
-      style={{ width: width, flex: 1, opacity: 0.99 }}
+      style={{ width: width, flex: 1, opacity: 0.99, backgroundColor: "transparent" }}
       source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}
       onMessage={onMessage}
       androidHardwareAccelerationDisabled