react-native-unit-components 1.0.4 → 1.2.0

package/lib/typescript/sharedTypes/account.types.d.ts

@@ -0,0 +1,114 @@
+import type { UNRelationship, UNTags } from './types';
+export type UNAccountData = UNDepositAccount | UNBatchAccount | UNCreditAccount;
+declare enum UNAccountStatus {
+    Open = "Open",
+    Closed = "Closed",
+    Frozen = "Frozen"
+}
+export declare enum UNCloseReason {
+    Fraud = "Fraud",
+    ByCustomer = "ByCustomer"
+}
+export declare enum UNFraudReason {
+    ACHActivity = "ACHActivity",
+    CardActivity = "CardActivity",
+    CheckActivity = "CheckActivity",
+    ApplicationHistory = "ApplicationHistory",
+    AccountActivity = "AccountActivity",
+    ClientIdentified = "ClientIdentified",
+    IdentityTheft = "IdentityTheft",
+    LinkedToFraudulentCustomer = "LinkedToFraudulentCustomer"
+}
+export type UNDepositAccount = {
+    id: string;
+    type: "depositAccount";
+    attributes: {
+        createdAt: string;
+        updatedAt?: string;
+        name: string;
+        depositProduct: string;
+        routingNumber: string;
+        accountNumber: string;
+        maskedAccountNumber?: string;
+        secondaryAccountNumber?: {
+            routingNumber: string;
+            accountNumber: string;
+        };
+        balance: number;
+        hold: number;
+        reserve: number;
+        available: number;
+        overdraftLimit?: number;
+        currency: string;
+        tags: UNTags;
+        status: UNAccountStatus;
+        closeReason?: string;
+        fraudReason?: UNFraudReason;
+        closeReasonText?: string;
+        freezeReason?: string;
+        isOverdrawnWithinLimit?: boolean;
+    };
+    relationships: {
+        customer?: UNRelationship;
+        customers?: UNRelationship;
+        org: UNRelationship;
+    };
+};
+export type UNBatchAccount = {
+    id: string;
+    type: "batchAccount";
+    attributes: {
+        createdAt: Date;
+        updatedAt?: Date;
+        name: string;
+        depositProduct: string;
+        routingNumber: string;
+        accountNumber: string;
+        maskedAccountNumber?: string;
+        balance: number;
+        hold: number;
+        reserve: number;
+        available: number;
+        currency: string;
+        status: "Open" | "Closed";
+        closeReason?: string;
+        fraudReason?: UNFraudReason;
+        closeReasonText?: string;
+        freezeReason?: string;
+        tags?: {
+            [key: string]: string;
+        };
+    };
+    relationships: {
+        org: UNRelationship;
+    };
+};
+export type UNCreditAccount = {
+    id: string;
+    type: "creditAccount";
+    attributes: {
+        createdAt: Date;
+        updatedAt?: Date;
+        name: string;
+        creditTerms: string;
+        balance: number;
+        hold: number;
+        reserve: number;
+        available: number;
+        creditLimit: number;
+        currency: string;
+        tags: {
+            [key: string]: string;
+        };
+        status: UNAccountStatus;
+        closeReason?: UNCloseReason;
+        fraudReason?: UNFraudReason;
+        closeReasonText?: string;
+        freezeReason?: string;
+    };
+    relationships: {
+        customer: UNRelationship;
+        org: UNRelationship;
+    };
+};
+export {};

package/lib/typescript/sharedTypes/achCredit.types.d.ts

@@ -0,0 +1,31 @@
+import type { UNAchCounterparty, UNCounterpartyVerificationMethod, UNPaymentStatus } from './payments.types';
+import type { UNTags, UNRelationship } from './types';
+export type UNACHData = {
+    type: 'achPayment';
+    id: string;
+    attributes: {
+        createdAt: string | Date;
+        status: UNPaymentStatus;
+        settlementDate?: Date;
+        reason: string;
+        direction: 'Debit' | 'Credit';
+        description: string;
+        transactionSummaryOverride?: string;
+        amount: string;
+        tags: UNTags;
+        addenda?: string;
+        counterparty: UNAchCounterparty;
+        expectedCompletionDate?: Date;
+        counterpartyVerificationMethod?: keyof typeof UNCounterpartyVerificationMethod;
+        sameDay?: boolean;
+    };
+    relationships: {
+        account: UNRelationship;
+        customer?: UNRelationship;
+        customers?: UNRelationship;
+        counterpartyAccount: UNRelationship;
+        counterpartyCustomer: UNRelationship;
+        transaction: UNRelationship;
+        recurringPayment: UNRelationship;
+    };
+};

package/lib/typescript/sharedTypes/bookPayment.types.d.ts

@@ -1,26 +1,25 @@
-import type { Tags, Relationship } from './types';
-declare type BookPaymentStatus = 'Sent' | 'Rejected';
-export declare type UNBookPaymentData = {
+import type { UNPaymentStatus } from './payments.types';
+import type { UNTags, UNRelationship } from './types';
+export type UNBookPaymentData = {
     type: 'bookPayment';
     id: string;
     attributes: {
         createdAt: string | Date;
-        status: BookPaymentStatus;
+        status: UNPaymentStatus;
         reason: string;
         direction: 'Debit' | 'Credit';
         description: string;
         transactionSummaryOverride?: string;
         amount: string;
-        tags: Tags;
+        tags: UNTags;
     };
     relationships: {
-        account: Relationship;
-        customer?: Relationship;
-        customers?: Relationship;
-        counterpartyAccount: Relationship;
-        counterpartyCustomer: Relationship;
-        transaction: Relationship;
-        recurringPayment: Relationship;
+        account: UNRelationship;
+        customer?: UNRelationship;
+        customers?: UNRelationship;
+        counterpartyAccount: UNRelationship;
+        counterpartyCustomer: UNRelationship;
+        transaction: UNRelationship;
+        recurringPayment: UNRelationship;
     };
 };
-export {};

package/lib/typescript/sharedTypes/card.types.d.ts

@@ -1,42 +1,42 @@
-import type { Address, FullName, Limits, Relationship, Tags } from './types';
-export declare type UNCardData = IndividualDebitCard | BusinessDebitCard;
-declare type CardStatus = 'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud';
-export declare type IndividualDebitCard = {
+import type { UNAddress, UNFullName, UNLimits, UNRelationship, UNTags } from './types';
+export type UNCardData = UNIndividualDebitCard | UNBusinessDebitCard;
+type UNCardStatus = 'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud';
+export type UNIndividualDebitCard = {
     id: string;
     type: 'individualDebitCard' | 'individualVirtualDebitCard';
     attributes: {
         createdAt: string;
         last4Digits: string;
         expirationDate: string;
-        status: CardStatus;
-        shippingAddress?: Address;
+        status: UNCardStatus;
+        shippingAddress?: UNAddress;
         updatedAt?: string;
         design?: string;
         additionalEmbossedText?: string;
         idempotencyKey?: string;
-        tags?: Tags;
-        limits?: Limits;
+        tags?: UNTags;
+        limits?: UNLimits;
         printOnlyBusinessName?: boolean;
     };
     relationships: {
-        account: Relationship;
-        customer: Relationship;
+        account: UNRelationship;
+        customer: UNRelationship;
     };
 };
-export declare type BusinessDebitCard = {
+export type UNBusinessDebitCard = {
     id: string;
     type: 'businessDebitCard' | 'businessVirtualDebitCard';
     attributes: {
-        fullName: FullName;
+        fullName: UNFullName;
         dateOfBirth: string;
-        address: Address;
-        shippingAddress?: Address;
+        address: UNAddress;
+        shippingAddress?: UNAddress;
         phone: string;
         email: string;
         createdAt: string;
         last4Digits: string;
         expirationDate: string;
-        status: CardStatus;
+        status: UNCardStatus;
         updatedAt?: string;
         ssn?: string;
         passport?: string;
@@ -45,12 +45,12 @@ export declare type BusinessDebitCard = {
         additionalEmbossedText?: string;
         idempotencyKey?: string;
         tags?: Record<string, string>;
-        limits?: Limits;
+        limits?: UNLimits;
         printOnlyBusinessName?: boolean;
     };
     relationships: {
-        account: Relationship;
-        customer: Relationship;
+        account: UNRelationship;
+        customer: UNRelationship;
     };
 };
 export {};

package/lib/typescript/sharedTypes/index.d.ts

@@ -1,3 +1,6 @@
 export * from './bookPayment.types';
 export * from './card.types';
 export * from './onLoadResponse.types';
+export * from './achCredit.types';
+export * from './payments.types';
+export * from "./account.types";

package/lib/typescript/sharedTypes/onLoadResponse.types.d.ts

@@ -1,10 +1,10 @@
 import type { UNCardData } from '../sharedTypes';
-export declare type SuccessResponseUnitOnLoad = {
+export type UNSuccessResponseUnitOnLoad = {
     data: UNCardData | Object;
     included: [Object];
     errors: null;
 };
-export declare type ErrorResponseUnitOnLoad = {
+export type UNErrorResponseUnitOnLoad = {
     errors: [
         {
             status: string;
@@ -15,4 +15,4 @@ export declare type ErrorResponseUnitOnLoad = {
         }
     ];
 };
-export declare type ResponseUnitOnLoadEvent = SuccessResponseUnitOnLoad | ErrorResponseUnitOnLoad;
+export type UNResponseUnitOnLoadEvent = UNSuccessResponseUnitOnLoad | UNErrorResponseUnitOnLoad;

package/lib/typescript/sharedTypes/payments.types.d.ts

@@ -0,0 +1,12 @@
+export type UNPaymentStatus = 'Sent' | 'Rejected';
+export type UNAchCounterparty = {
+    name: string;
+    accountNumber: string;
+    routingNumber: string;
+    accountType: UNAccountType;
+};
+type UNAccountType = 'Savings' | 'Checking';
+export declare enum UNCounterpartyVerificationMethod {
+    Plaid = "Plaid"
+}
+export {};

package/lib/typescript/sharedTypes/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Address = {
+export type UNAddress = {
     street: string;
     street2?: string;
     city: string;
@@ -6,22 +6,22 @@ export declare type Address = {
     postalCode: string;
     country: string;
 };
-export declare type Limits = {
+export type UNLimits = {
     dailyWithdrawal?: string | number;
     dailyPurchase?: string | number;
     monthlyWithdrawal?: string | number;
     monthlyPurchase?: string | number;
 };
-declare type Data = {
+type UNData = {
     type: string;
     id: string;
 };
-export declare type Relationship = {
-    data: null | [] | Data | Data[];
+export type UNRelationship = {
+    data: null | [] | UNData | UNData[];
 };
-export declare type FullName = {
+export type UNFullName = {
     first: string;
     last: string;
 };
-export declare type Tags = Record<string, string>;
+export type UNTags = Record<string, string>;
 export {};

package/lib/typescript/sharedTypes/wallet.types.d.ts

@@ -1,4 +1,3 @@
-import type { CardAddToWalletStatus } from 'src/messages/nativeMessages/cardMessage';
 export declare enum UNWalletCode {
     Apple = "ApplePayPushProvision",
     Google = "GooglePayPushProvision"
@@ -10,5 +9,15 @@ export declare enum UNWalletName {
 export interface UNWallet {
     name: string;
     code: string;
-    status: CardAddToWalletStatus;
+    status: UNCardAddToWalletStatus;
+}
+export declare enum UNCardAddToWalletStatus {
+    pending = 0,
+    readyToProvisioning = "ReadyToProvision",
+    addedToWallet = "AlreadyProvisioned",
+    iosProvisionedInCurrentDevice = "ProvisionedInCurrentDevice",
+    iosProvisionedInPairedDevice = "ProvisionedInPairedDevice",
+    androidNotInstalled = "NotInstalled",
+    androidWalletSetupNotCompleted = "WalletSetupNotCompleted",
+    androidWalletAppUpdateAvailable = "WalletAppUpdateAvailable"
 }

package/lib/typescript/webComponent/WebComponent.d.ts

@@ -19,6 +19,8 @@ export declare enum WebComponentType {
     bookPayment = "unit-elements-book-payment",
     activity = "unit-elements-activity",
     slot = "unit-elements-sdk-slot",
-    account = "unit-elements-account"
+    account = "unit-elements-account",
+    achDebitPayment = "unit-elements-ach-debit-payment",
+    achCreditPayment = "unit-elements-ach-credit-payment"
 }
 export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -74,10 +74,12 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-webview": "*"
+    "react-native-webview": "*",
+    "react-native-plaid-link-sdk": "*"
   },
   "dependencies": {
     "axios": "^1.3.3",
+    "react-native-plaid-link-sdk": "^9.0.1",
     "react-native-webview": "11.23.1"
   },
   "jest": {

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { WebViewMessage } from '../../messages/webMessages';
+import type { UNResponseUnitOnLoadEvent, UNACHData } 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 { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
+
+export interface UNACHCreditComponentProps {
+  accountId: string;
+  customerToken: string;
+  theme?: string;
+  isAutoFocus?: boolean;
+  fee?: number;
+  onPaymentCreated?: (data: UNACHData) => void;
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
+}
+
+export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case PaymentMessage.PAYMENT_CREATED: {
+        const achCreditEvent = message.details as ACHEvent;
+        props.onPaymentCreated && props.onPaymentCreated(achCreditEvent.data as UNACHData);
+        break;
+      }
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+    }
+  };
+
+  const renderACHCreditWebView = () => {
+    return (
+      <WebComponent
+        type={WebComponentType.achCreditPayment}
+        presentationMode={presentationMode}
+        params={getACHCreditParams(props)}
+        script={getACHCreditScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={false}
+        theme={props.theme}
+      />
+    );
+  };
+
+  if (presentationMode === PresentationMode.Inherit) {
+    return renderACHCreditWebView();
+  }
+
+  return (
+    <View style={{ height: height }}>
+      {renderACHCreditWebView()}
+    </View>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { UNACHCreditComponentProps } from './UNACHCreditComponent';
+
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+
+export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    ${props.fee ? `fee="${props.fee}"` : ''}
+    style="height: 100%"
+  `;
+};
+
+export const getACHCreditScript = () => {
+  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)
+        })
+    });
+  `;
+};

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { WebViewMessage } from '../../messages/webMessages';
+import type { UNResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
+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 { 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';
+
+export interface UNACHDebitComponentProps {
+  accountId: string;
+  customerToken: string;
+  theme?: string;
+  isAutoFocus?: boolean;
+  fee?: number;
+  onPaymentCreated?: (data: UNACHData) => void;
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
+}
+
+export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [appPackageName, setAppPackageName] = useState<string>('');
+  const [linkToken, setLinkToken] = useState<string>('');
+  const webRef = useRef<WebView>(null);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  useEffect(() => {
+    const setPackageNameForAndroid = async () => {
+      if (Platform.OS === 'android') {
+        const packageName = await getAndroidPackageName();
+        setAppPackageName(packageName);
+      }
+    };
+    setPackageNameForAndroid();
+  }, []);
+
+  const dispatchUnitPlaidResponse = (success: LinkSuccess) => {
+    injectUnitPlaidResponse(webRef.current, success);
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case PaymentMessage.PAYMENT_CREATED: {
+        const achDebitEvent = message.details as ACHEvent;
+        props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data as UNACHData);
+        break;
+      }
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
+        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 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) => {
+            dispatchUnitPlaidResponse(success);
+          },
+          onExit: exit => { console.log(exit); }
+        }).catch(e => {
+          console.error(e);
+        });
+        break;
+      }
+    }
+  };
+
+  const renderACHDebitWebView = () => {
+    return (
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.achDebitPayment}
+        presentationMode={presentationMode}
+        params={getACHDebitParams(props)}
+        script={getACHDebitScript(appPackageName)}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={false}
+        theme={props.theme}
+      />
+    );
+  };
+
+  if (presentationMode === PresentationMode.Inherit) {
+    return renderACHDebitWebView();
+  }
+
+  return (
+    <View style={{ height: height }}>
+      {renderACHDebitWebView()}
+    </View>
+
+  );
+};

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

@@ -0,0 +1,48 @@
+import { DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
+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 `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    ${props.fee ? `fee="${props.fee}"` : ''}
+    style="height: 100%"
+  `;
+};
+
+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)
+        })
+      });
+    ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
+    ${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)})`);
+};