react-native-unit-components 1.12.0 → 1.13.0

package/src/components/UNFundAccountPaymentComponent/UNFundAccountPaymentComponent.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable no-case-declarations */
+import React, { useRef } from 'react';
+import type WebView from 'react-native-webview';
+import {
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
+import { WebComponent } from '../../webComponent/WebComponent';
+import type { WebViewMessage } from '../../messages/webMessages';
+import {
+  getFundAccountPaymentParams,
+  getFundAccountPaymentScript,
+} from './UNFundAccountPaymentComponent.utils';
+import type { UNFundAccountPaymentData, UNFundAccountPaymentOnLoadData, UNAstraExternalCardData, UNCardData, UNError, UNOnLoadResponse } from '../../types/shared';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { SafeAreaView } from 'react-native';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import { FundAccountPaymentEvent } from '../../messages/webMessages/fundAccountPaymentMessage';
+export interface UNFundAccountPaymentComponentProps {
+  // inputs
+  accountId?: string;
+  customerToken: string;
+  fee?: number;
+  isAutoFocus?: boolean;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<UNFundAccountPaymentOnLoadData>) => void;
+  onPaymentCreated?: (data: UNFundAccountPaymentData) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
+}
+
+const UNFundAccountPaymentComponent = (props: UNFundAccountPaymentComponentProps) => {
+  const webRef = useRef<WebView>(null);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.astraExternalCard in response) {
+      // AstraOnLoadResponse
+      props.onLoad(response[RESPONSE_KEYS.astraExternalCard] as UNOnLoadResponse<[UNAstraExternalCardData]>);
+      return;
+    }
+
+    if (RESPONSE_KEYS.accountCards in response) {
+      props.onLoad(response[RESPONSE_KEYS.accountCards] as UNOnLoadResponse<[UNCardData]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PaymentMessage.PAYMENT_CREATED:
+        const fundAccountPayment = message.details as FundAccountPaymentEvent;
+        props.onPaymentCreated && props.onPaymentCreated(fundAccountPayment.data as UNFundAccountPaymentData);
+        break;
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
+    }
+  };
+
+  return (
+    <SafeAreaView style={{flex: 1, minHeight: 400}}>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.fundAccountPayment}
+        presentationMode={PresentationMode.Inherit}
+        params={getFundAccountPaymentParams(props)}
+        script={getFundAccountPaymentScript()}
+        theme={props.theme}
+        language={props.language}
+        onMessage={message => handleMessage(message)}
+        isScrollable={true}
+        nestedScrollEnabled={true}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default withReduxStore<UNFundAccountPaymentComponentProps>(UNFundAccountPaymentComponent);

package/src/components/UNFundAccountPaymentComponent/UNFundAccountPaymentComponent.utils.ts

@@ -0,0 +1,24 @@
+import { UNFundAccountPaymentComponentProps } from './UNFundAccountPaymentComponent';
+import { LISTENERS } from '../../scripts/html/bodyScript';
+
+export const getFundAccountPaymentParams = (props: UNFundAccountPaymentComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
+  return `
+    customer-token="${props.customerToken}"
+    ${accountIdParam}
+    ${feeParam}
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
+    style="height: 100%"
+  `;
+};
+
+export const getFundAccountPaymentScript = () => {
+  return `
+    ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
+  `;
+};

package/src/components/UNFundAccountPaymentComponent/index.ts

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

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -79,7 +79,7 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
     try {
       const token = await UNStoreManagerHelper.getValue(UserDataKeys.unitCustomerToken);
       if (token) {
-        setItemInWindowUnitStore(webRef.current, UserDataKeys.unitCustomerToken, token + ' s');
+        setItemInWindowUnitStore(webRef.current, UserDataKeys.unitCustomerToken, token);
       }
     } catch (e) {
       console.log(e);

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './UNBottomSheetComponent';
 export * from './UNBookPaymentComponent';
 export * from './UNActivityComponent';
 export * from './UNAccountComponent';
+export * from './UNFundAccountPaymentComponent';
 export * from './UNCheckDepositComponent';
 export * from './UNACHDebitComponent';
 export * from './UNACHCreditComponent';

package/src/messages/webMessages/fundAccountPaymentMessage.ts

@@ -0,0 +1,8 @@
+import type { UNFundAccountPaymentData } from '../../types/shared';
+
+export interface PaymentCreatedEvent {
+  data: UNFundAccountPaymentData
+}
+
+export type FundAccountPaymentEvent =
+| PaymentCreatedEvent

package/src/messages/webMessages/index.ts

@@ -9,6 +9,7 @@ import type { AccountEvent, AccountMessage } from './accountMessage';
 import type { CheckEvent, CheckMessage } from './checkMessage';
 import type { ActivityEvent, ActivityMessage } from './activityMessage';
 import type { MultipleCardsEvent, MultipleCardsMessage } from './multipleCardsMessage';
+import { FundAccountPaymentEvent } from './fundAccountPaymentMessage';
 import { PlaidEvent, PlaidMessage } from './plaidMessages';
 import { PayeeManagementMessage, PayeeManagementEvent } from './payeeManagementMessage';
 
@@ -32,6 +33,7 @@ type WebViewEvent =
   | BookPaymentEvent
   | PaymentMessage
   | ACHEvent
+  | FundAccountPaymentEvent
   | AccountEvent
   | CheckEvent
   | ActivityEvent

package/src/messages/webMessages/onLoadMessage.ts

@@ -7,6 +7,7 @@ import type {
 } from '../../types/shared';
 import type { UNAuthorizationData } from '../../types/shared/authorization.types';
 import type { UNTransactionData } from '../../types/shared/transactions.types';
+import type { UNAstraExternalCardData } from '../../types/shared/payments.types';
 
 export enum RESPONSE_KEYS {
   errors = 'errors',
@@ -16,7 +17,9 @@ export enum RESPONSE_KEYS {
   counterpartyAccount = 'counterpartyResult',
   transactions = 'transactionsResult',
   authorizations = 'authorizationsResult',
-  repayment = 'repaymentResult'
+  repayment = 'repaymentResult',
+  astraExternalCard = 'astraCardsResult',
+  accountCards = 'accountCardsResult'
 }
 
 export type CardsOnLoadResponse = {
@@ -44,6 +47,13 @@ export type ActivityOnLoadResponse = {
   [RESPONSE_KEYS.transactions]: UNOnLoadResponseData<[UNTransactionData]>
 }
 
+export type FundAccountPaymentOnLoadResponse = {
+  // Currently, FundAccountPaymentComponent get 2 on load events: 1- for the external cards, 2- for the internal cards;
+  // we may consider unite them.
+  [RESPONSE_KEYS.astraExternalCard]?: UNOnLoadResponseData<[UNAstraExternalCardData]>,
+  [RESPONSE_KEYS.accountCards]?: UNOnLoadResponseData<[UNCardData]>
+}
+
 export type UnitOnLoadResponseSuccessData =
   | CardOnLoadResponse
   | CardsOnLoadResponse
@@ -51,6 +61,7 @@ export type UnitOnLoadResponseSuccessData =
   | AccountsOnLoadResponse
   | AccountOnLoadResponse
   | ActivityOnLoadResponse
+  | FundAccountPaymentOnLoadResponse
 
 export type UnitOnLoadResponseEvent =
   | UNError

package/src/messages/webMessages/unitMessages.ts

@@ -17,7 +17,7 @@ export enum UnitMessage {
 }
 
 export enum UnitRequestRefreshEventTypes {
-  REQUEST_REFRESH_EVENT = 'requestRefreshEvent'
+  REQUEST_REFRESH_EVENT = 'requestRefreshEvent' 
 }
 
 export interface RequestRenderingEvent {

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

@@ -5,6 +5,7 @@ export enum WebComponentType {
   activity = 'unit-elements-activity',
   slot = 'unit-elements-sdk-slot',
   account = 'unit-elements-account',
+  fundAccountPayment = 'unit-elements-fund-account-payment',
   checkDeposit = 'unit-elements-check-deposit',
   achDebitPayment = 'unit-elements-ach-debit-payment',
   achCreditPayment = 'unit-elements-ach-credit-payment',

package/src/types/shared/achCredit.types.ts

@@ -1,6 +1,6 @@
 import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAccountData, UNCounterpartyAccountData } from './account.types';
-import type { UNAchCounterparty, UNCounterpartyVerificationMethod, UNPaymentStatus } from './payments.types';
+import type { UNPaymentType, UNAchCounterparty, UNCounterpartyVerificationMethod, UNPaymentStatus } from './payments.types';
 import type { UNTags, UNRelationship } from './types';
 
 export type UNACHOnLoadData = {
@@ -9,7 +9,7 @@ export type UNACHOnLoadData = {
 }
 
 export type UNACHData = {
-  type: 'achPayment',
+  type: UNPaymentType.AchPayment,
   id: string,
   attributes: {
     createdAt: string | Date,

package/src/types/shared/bookPayment.types.ts

@@ -1,8 +1,8 @@
-import type { UNPaymentStatus } from './payments.types';
+import type { UNPaymentStatus, UNPaymentType } from './payments.types';
 import type { UNTags, UNRelationship } from './types';
 
 export type UNBookPaymentData = {
-  type: 'bookPayment',
+  type: UNPaymentType.BookPayment,
   id: string,
   attributes: {
     createdAt: string | Date,

package/src/types/shared/checkDeposit.types.ts

@@ -1,4 +1,5 @@
 import type { UNRelationship } from './types';
+import type { Cents } from './payments.types';
 
 export type UNCheckDepositData = {
 	id: string
@@ -41,8 +42,6 @@ export enum UNCheckDepositStatus {
 	Returned = 'Returned',
 }
 
-export type Cents = number
-
 export type UNCheckCounterparty = {
 	name: string
 	accountNumber: string

package/src/types/shared/fundAccountPayment.types.ts

@@ -0,0 +1,38 @@
+import { UNCardData } from './card.types';
+import { UNPaymentType, Cents, UNPaymentStatus, UNAstraExternalCardData } from './payments.types';
+import { UNDirection, UNRelationshipData } from './types';
+
+export type UNFundAccountPaymentOnLoadData = [UNAstraExternalCardData] | [UNCardData]
+
+export type UNFundAccountPaymentData = {
+	type: UNPaymentType.CardToCardPayment
+	id: string
+	attributes: {
+		createdAt: Date
+		amount: Cents
+		direction: UNDirection
+		description: string
+		status: UNPaymentStatus
+		reason?: string
+		tags?: {[key: string]: string}
+		astraRoutineId: string
+	}
+	relationships: {
+		account: {
+			data: UNRelationshipData
+		}
+		customer?: {
+			data: UNRelationshipData
+		}
+		customers?: {
+			data: [UNRelationshipData]
+		}
+		transaction?: {
+			data: [UNRelationshipData]
+		}
+
+		card: {
+			data: UNRelationshipData
+		}
+	}
+}

package/src/types/shared/index.ts

@@ -10,5 +10,6 @@ export * from './fonts.types';
 export * from './error.types';
 export * from './versioning.types';
 export * from './multipleCards.types';
+export * from './fundAccountPayment.types';
 export * from './payeeManagement.types';
 export * from './env.types';

package/src/types/shared/payments.types.ts

@@ -1,4 +1,10 @@
-export type UNPaymentStatus = 'Sent' | 'Rejected'
+export enum UNPaymentType {
+	AchPayment = 'achPayment',
+	BookPayment = 'bookPayment',
+	CardToCardPayment = 'cardToCardPayment',
+}
+
+export type UNPaymentStatus = 'Sent' | 'Rejected' | 'Pending' | 'Clearing' | 'Canceled' | 'Returned' | 'PendingReview'
 
 export type UNAchCounterparty = {
   name: string
@@ -35,3 +41,28 @@ export enum UNPlaidAccountFilter {
 export enum UNCounterpartyVerificationMethod {
   Plaid = 'Plaid',
 }
+
+export enum UNCardNetwork {
+	Visa = 'Visa',
+	Diners = 'Diners',
+	Maestro = 'Maestro',
+	Generic = 'Generic',
+	Discover = 'Discover',
+	MasterCard = 'MasterCard',
+	AmericanExpress = 'AmericanExpress',
+}
+
+export interface UNAstraExternalCardData {
+	type: 'astraExternalCard'
+	id: string
+	attributes: {
+		last4Digits: string
+		cardNetwork: UNCardNetwork
+		fullName: {
+			first: string
+			last: string
+		}
+	}
+}
+
+export type Cents = number

package/src/types/shared/types.ts

@@ -14,17 +14,17 @@ export type UNLimits = {
   monthlyPurchase?: string | number,
 }
 
-type UNData = {
+export type UNRelationshipData = {
   type: string,
-  id: string
+  id: number | string
 }
 
 export type UNRelationship = {
   data:
     | null
     | []
-    | UNData
-    | UNData[]
+    | UNRelationshipData
+    | UNRelationshipData[]
 }
 
 export type UNFullName = {
@@ -32,4 +32,9 @@ export type UNFullName = {
   last: string
 }
 
+export enum UNDirection {
+	Debit = 'Debit',
+	Credit = 'Credit',
+}
+
 export type UNTags = Record<string, string> // TODO: specify Tag type

package/src/unitSdkManager/UnitSdkManager.ts

@@ -21,6 +21,7 @@ export class UnitSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
+  protected static sdkVersion = '1.13.0';
 
   public static init = async (env: UNEnvironment, theme?: string, language?: string, fonts?: UNFonts, webVersioningStrategy: UNWebVersioningStrategy = UNSDKConstants.webSDKRecommendedStrategy) => {
     try {
@@ -80,6 +81,10 @@ export class UnitSDK {
     return this.customerToken;
   };
 
+  public static getSdkVersion = () => {
+    return this.sdkVersion;
+  };
+
   public static cleanUserData = () => {
     UNStoreManagerHelper.cleanValue(UserDataKeys.unitCustomerToken);
     UNStoreManagerHelper.cleanValue(UserDataKeys.unitVerifiedToken);

package/src/unitSdkManager/unitHelpersManager/UnitHelpersManager.ts

@@ -1,5 +1,6 @@
 export class UnitHelpersManager {
   redirectUri?: string;
+  unitSessionId?: string;
 
   constructor() {
     this.init();
@@ -7,5 +8,24 @@ export class UnitHelpersManager {
 
   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/webComponent/WebComponent.tsx

@@ -95,13 +95,14 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
 
       const fontFaces = getFontFacesString(UnitSDK.getFonts());
 
-      const windowInfoParams = `window.UnitMobileSDKConfig['info'] = ${JSON.stringify(infoParams)}`;
+      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 unitVerifiedCustomerToken = await UNStoreManagerHelper.getValue(UserDataKeys.unitVerifiedToken);
-      const windowVerifiedCustomerToken = unitVerifiedCustomerToken ? `window.UnitStore['unitVerifiedCustomerToken'] = '${unitVerifiedCustomerToken}'` : '';
+      const windowVerifiedCustomerToken = unitVerifiedCustomerToken ? `window.UnitStore['unitVerifiedCustomerToken'] = '${unitVerifiedCustomerToken}';` : '';
 
-      const windowParams = `${windowInfoParams}; ${plaidRedirectUriParam} ${windowVerifiedCustomerToken}; ${props.windowParams || ''}`;
+      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);

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

@@ -30,6 +30,7 @@ const htmlText = `
     <script>
     window.UnitMobileSDK = true
     window.UnitStore = {}
+    window.UnitSessionStore = {}
     window.UnitMobileSDKConfig = {
       os: "${Platform.OS}",
       walletName: "${Platform.OS === 'ios' ? 'Apple' : 'Google'}",

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;
-};