react-native-unit-components 1.2.1 → 1.4.0

package/src/scripts/html/bodyScript.ts

@@ -3,6 +3,7 @@ import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
+import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 
 export const POST_MESSAGE_TO_SDK = `
   const postMessageToSDK = (message) => {
@@ -59,6 +60,16 @@ export const LISTENERS = {
       postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_DOWNLOAD}", details: e.detail })
     });
   `,
+  cardActivated: `
+    window.addEventListener("${CardMessage.CARD_ACTIVATED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+          postMessageToSDK({ type: "${CardMessage.CARD_ACTIVATED}", details:  { card: data.data }})
+      }).catch((e) => {
+          console.log(e)
+      })
+    });
+  `,
   cardStatusChange: `
     window.addEventListener("${CardMessage.CARD_STATUS_CHANGED}", (e) => {
       const response = e.detail
@@ -74,7 +85,7 @@ export const LISTENERS = {
     postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
   });
 `,
-  unitPaymentCreated:`
+  unitPaymentCreated: `
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
       response.then((data) => {
@@ -94,6 +105,11 @@ export const LISTENERS = {
       })
   });
   `,
+  unitActivityFiltersChanged: `
+    window.addEventListener("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", (e) => {
+      postMessageToSDK({ type: "${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", details: e.detail })
+    });
+  `
 };
 
 export const DISPATCH_RENDERING_EVENT = `
@@ -110,9 +126,34 @@ export const DISPATCH_REQUEST_REFRESH = `
     }
 `;
 
+export const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT = `
+    const dispatchActivityFilterChangedEvent = (details) => {
+      const event = new CustomEvent("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}",{ detail: details });
+      window.dispatchEvent(event);
+    }
+`;
+
 export const DISPATCH_PLAID_RESPONSE = `
     const dispatchPlaidEvent = (details) => {
     const event = new CustomEvent("${UnitMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
     window.dispatchEvent(event)
     }
 `;
+
+export const DISPATCH_OPEN_ACTIONS_MENU = `
+    const dispatchOpenActionsMenu = (componentName) => {
+      document.querySelector(componentName).dispatchEvent(new CustomEvent("unitRequestOpenActionsMenu"))
+    }
+`;
+
+export const DISPATCH_REQUEST_CARD_ACTION = `
+    const dispatchRequestCardAction = (action) => {
+      document.querySelector("unit-elements-card").dispatchEvent(new CustomEvent("unitRequestCardAction", {detail: {action: action}}))
+    }
+`;
+
+export const DISPATCH_REQUEST_ACCOUNT_ACTION = `
+    const dispatchRequestAccountAction = (action) => {
+      document.querySelector("unit-elements-account").dispatchEvent(new CustomEvent("unitRequestAccountAction", {detail: {action: action}}))
+    }
+`;

package/src/sharedTypes/account.types.ts

@@ -2,31 +2,39 @@ import type { UNRelationship, UNTags } from './types';
 
 export type UNAccountData = UNDepositAccount | UNBatchAccount | UNCreditAccount
 
+export type UNCounterpartyAccountData = {
+  id: string
+  attributes: {
+    name: string
+    tags?: { [key: string]: string }
+  }
+}
+
 enum UNAccountStatus {
-  Open = "Open",
-  Closed = "Closed",
-  Frozen = "Frozen",
+  Open = 'Open',
+  Closed = 'Closed',
+  Frozen = 'Frozen',
 }
 
 export enum UNCloseReason {
-  Fraud = "Fraud",
-  ByCustomer = "ByCustomer",
+  Fraud = 'Fraud',
+  ByCustomer = 'ByCustomer',
 }
 
 export enum UNFraudReason {
-  ACHActivity = "ACHActivity",
-  CardActivity = "CardActivity",
-  CheckActivity = "CheckActivity",
-  ApplicationHistory = "ApplicationHistory",
-  AccountActivity = "AccountActivity",
-  ClientIdentified = "ClientIdentified",
-  IdentityTheft = "IdentityTheft",
-  LinkedToFraudulentCustomer = "LinkedToFraudulentCustomer",
+  ACHActivity = 'ACHActivity',
+  CardActivity = 'CardActivity',
+  CheckActivity = 'CheckActivity',
+  ApplicationHistory = 'ApplicationHistory',
+  AccountActivity = 'AccountActivity',
+  ClientIdentified = 'ClientIdentified',
+  IdentityTheft = 'IdentityTheft',
+  LinkedToFraudulentCustomer = 'LinkedToFraudulentCustomer',
 }
 
 export type UNDepositAccount = {
   id: string
-  type: "depositAccount"
+  type: 'depositAccount'
   attributes: {
     createdAt: string
     updatedAt?: string
@@ -63,7 +71,7 @@ export type UNDepositAccount = {
 
 export type UNBatchAccount = {
   id: string
-  type: "batchAccount"
+  type: 'batchAccount'
   attributes: {
     createdAt: Date
     updatedAt?: Date
@@ -77,12 +85,12 @@ export type UNBatchAccount = {
     reserve: number
     available: number
     currency: string
-    status: "Open" | "Closed"
+    status: 'Open' | 'Closed'
     closeReason?: string
     fraudReason?: UNFraudReason
     closeReasonText?: string
     freezeReason?: string
-    tags?: {[key: string]: string}
+    tags?: { [key: string]: string }
   }
   relationships: {
     org: UNRelationship
@@ -91,7 +99,7 @@ export type UNBatchAccount = {
 
 export type UNCreditAccount = {
   id: string
-  type: "creditAccount"
+  type: 'creditAccount'
   attributes: {
     createdAt: Date
     updatedAt?: Date
@@ -103,7 +111,7 @@ export type UNCreditAccount = {
     available: number
     creditLimit: number
     currency: string
-    tags: {[key: string]: string}
+    tags: { [key: string]: string }
     status: UNAccountStatus
     closeReason?: UNCloseReason
     fraudReason?: UNFraudReason
@@ -115,3 +123,9 @@ export type UNCreditAccount = {
     org: UNRelationship
   }
 }
+
+export enum UNAccountMenuAction {
+  OpenAccountDetails = 'OpenAccountDetails',
+  OpenAccountStatements = 'OpenAccountStatements',
+  DownloadBankVerificationLetter = 'DownloadBankVerificationLetter',
+}

package/src/sharedTypes/achCredit.types.ts

@@ -1,6 +1,13 @@
+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 { UNTags, UNRelationship } from './types';
 
+export type UNACHOnLoadData = {
+  [RESPONSE_KEYS.account]: UNAccountData,
+  [RESPONSE_KEYS.counterpartyAccount]: [UNCounterpartyAccountData]
+}
+
 export type UNACHData = {
   type: 'achPayment',
   id: string,

package/src/sharedTypes/activity.types.ts

@@ -0,0 +1,8 @@
+import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { UNAuthorizationData } from './authorization.types';
+import type { UNTransactionData } from './transactions.types';
+
+export type UNActivityOnLoadData = {
+  [RESPONSE_KEYS.authorization]: UNAuthorizationData,
+  [RESPONSE_KEYS.transactions]: UNTransactionData,
+}

package/src/sharedTypes/authorization.types.ts

@@ -0,0 +1,22 @@
+export type UNAuthorizationData = {
+  type: string,
+  id: string,
+  attributes: UNAuthorizationDetails
+}
+
+export type UNAuthorizationDetails = {
+  cardNetwork: string,
+  createdAt: Date,
+  amount: string,
+  merchant?: UNAuthorizationMerchant,
+  cardLast4Digits: string,
+  recurring : boolean,
+  summary: string,
+}
+
+export type UNAuthorizationMerchant = {
+  name: string,
+  type: string,
+  category: string,
+  location?: string,
+}

package/src/sharedTypes/card.types.ts

@@ -57,3 +57,16 @@ export type UNBusinessDebitCard = {
     customer: UNRelationship
   }
 }
+
+export enum UNCardMenuAction {
+  Freeze = 'Freeze',
+  ManagePin = 'ManagePin',
+  Replace = 'Replace',
+  Report = 'Report',
+  Close = 'Close',
+  Activate = 'Activate',
+  Unfreeze = 'Unfreeze',
+  ChangePin = 'ChangePin',
+  SetPin = 'SetPin',
+  AddToWallet = 'AddToWallet'
+}

package/src/sharedTypes/checkDeposit.types.ts

@@ -0,0 +1,50 @@
+import type { UNRelationship } from './types';
+
+export type UNCheckDepositData = {
+	id: string
+	type: string
+	attributes: UNCheckDepositAttributes
+	relationships: UNCheckDepositRelationships
+}
+
+export type UNCheckDepositAttributes = {
+  createdAt: Date
+  status: keyof typeof UNCheckDepositStatus
+  reason?: string
+  description: string
+  amount: Cents
+  checkNumber?: string
+  counterparty: UNCheckCounterparty
+  settlementDate?: Date
+  tags?: {[key: string]: string}
+}
+
+export type UNCheckDepositRelationships = {
+  account: UNRelationship
+  customer?: UNRelationship
+  customers?: UNRelationship
+  org?: UNRelationship
+  transaction?: UNRelationship
+}
+
+export enum UNCheckDepositStatus {
+	AwaitingImages = 'AwaitingImages',
+	AwaitingFrontImage = 'AwaitingFrontImage',
+	AwaitingBackImage = 'AwaitingBackImage',
+	PendingReview = 'PendingReview',
+	AwaitingCustomerConfirmation = 'AwaitingCustomerConfirmation',
+	Pending = 'Pending',
+	Rejected = 'Rejected',
+	Clearing = 'Clearing',
+	Sent = 'Sent',
+	Canceled = 'Canceled',
+	Returned = 'Returned',
+}
+
+export type Cents = number
+
+export type UNCheckCounterparty = {
+	name: string
+	accountNumber: string
+	routingNumber: string
+}

package/src/sharedTypes/index.ts

@@ -3,4 +3,5 @@ export * from './card.types';
 export * from './onLoadResponse.types';
 export * from './achCredit.types';
 export * from './payments.types';
-export * from "./account.types";
+export * from './account.types';
+export * from './checkDeposit.types';

package/src/sharedTypes/onLoadResponse.types.ts

@@ -1,27 +1,19 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import type { UNCardData } from '../sharedTypes';
+export type UNOnLoadResponseData<T> = {
+  data: T,
+}
 
-export type UNSuccessResponseUnitOnLoad = {
-  /*
-   Object since the current response data types from 'Activities' and 'BookPayment' do not have documentation.
-   When things are determined, we may update it
-  */
-  data: UNCardData | Object,
-  included: [Object],
-  errors: null
+export type UNError = {
+  errors: UNErrorData[]
 }
 
-export type UNErrorResponseUnitOnLoad = {
-  errors: [
-    {
-      status: string,
-      title: string,
-      detail?: string,
-      details?: string,
-      meta?: Record<string, string>
-    }
-  ]
+export type UNErrorData = {
+  status: string,
+  title: string,
+  detail?: string,
+  details?: string,
+  meta?: Record<string, string>
 }
-export type UNResponseUnitOnLoadEvent =
-  | UNSuccessResponseUnitOnLoad
-  | UNErrorResponseUnitOnLoad
+
+export type UNOnLoadResponse<T> =
+  | UNOnLoadResponseData<T>
+  | UNError

package/src/sharedTypes/transactions.types.ts

@@ -0,0 +1,84 @@
+export type UNTransactionData = {
+  type: UNTransactionType,
+  id: string,
+  attributes: UNATransactionAttributes,
+  relationships: UNTransactionRelationships
+}
+
+export type UNATransactionAttributes = {
+  createdAt: Date,
+  amount: string,
+  direction?: UNDirection,
+  balance?: string,
+  summary?: string,
+  companyName?: string,
+  counterpartyName?: string,
+  counterpartyRoutingNumber?: string,
+  reason?: string,
+}
+
+export type UNTransactionRelationships = {
+  customer?: {
+    data: {
+      type: string
+      id: number
+    }
+  }
+  customers?: {
+    data: [
+      {
+        type: 'customer'
+        id: string
+      }
+    ]
+  }
+  org?: {
+    data: {
+      type: string
+      id: number
+    }
+  }
+}
+
+export enum UNDirection {
+	Debit = 'Debit',
+	Credit = 'Credit',
+}
+
+export enum UNTransactionType {
+	ATM = 'atmTransaction',
+	Adjustment = 'adjustmentTransaction',
+	BillPay = 'billPayTransaction',
+	Book = 'bookTransaction',
+	Card = 'cardTransaction',
+	CardReversal = 'cardReverTransactionTypessalTransaction',
+	Chargeback = 'chargebackTransaction',
+	CheckDeposit = 'checkDepositTransaction',
+	DishonoredACH = 'dishonoredAchTransaction',
+	Dispute = 'disputeTransaction',
+	DisputeSettlement = 'disputeSettlementTransaction',
+	Fee = 'feeTransaction',
+	InterchangeShare = 'interchangeShareTransaction',
+	Interest = 'interestTransaction',
+	InterestShare = 'interestShareTransaction',
+	NegativeBalanceCoverage = 'negativeBalanceCoverageTransaction',
+	OriginatedACH = 'originatedAchTransaction',
+	PaymentAdvance = 'paymentAdvanceTransaction',
+	PaymentCanceled = 'paymentCanceledTransaction',
+	Purchase = 'purchaseTransaction',
+	ReceivedACH = 'receivedAchTransaction',
+	Release = 'releaseTransaction',
+	RepaidPaymentAdvance = 'repaidPaymentAdvanceTransaction',
+	ReturnedACH = 'returnedAchTransaction',
+	ReturnedCheckDeposit = 'returnedCheckDepositTransaction',
+	ReturnedReceivedACH = 'returnedReceivedAchTransaction',
+	Reward = 'rewardTransaction',
+	Settlement = 'settlementTransaction',
+	SponsoredInterest = 'sponsoredInterestTransaction',
+	Wire = 'wireTransaction',
+	AccountLowBalanceClosure = 'accountLowBalanceClosureTransaction',
+	CashDeposit = 'cashDepositTransaction',
+	BankRepayment = 'bankRepaymentTransaction',
+	CustomerRepayment = 'CustomerRepaymentTransaction',
+	CustomerRepaymentReturned = 'CustomerRepaymentReturnedTransaction',
+}

package/src/webComponent/WebComponent.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
+import { NativeModules, Platform } from 'react-native';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import EventBus from '../helpers/EventBus';
 import html, { HTML_PLACEHOLDER } from './html';
@@ -12,6 +13,8 @@ import type { WebViewMessage } from '../messages/webMessages';
 import { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';
 import { handleRequestDownload } from './WebComponent.utils';
 
+const { UNAppInfo } = NativeModules;
+
 export interface WebComponentProps {
   type: WebComponentType;
   presentationMode?: PresentationMode,
@@ -31,6 +34,7 @@ export enum WebComponentType {
   activity = 'unit-elements-activity',
   slot = 'unit-elements-sdk-slot',
   account = 'unit-elements-account',
+  checkDeposit = 'unit-elements-check-deposit',
   achDebitPayment = 'unit-elements-ach-debit-payment',
   achCreditPayment = 'unit-elements-ach-credit-payment'
 }
@@ -39,6 +43,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);
   const [sourceHtml, setSourceHtml] = useState<string | null>(null);
   const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());
+  const [baseName, setBaseName] = useState<string>();
   const width = props.width ?? '100%';
 
   const updateUnitScript = (data: SdkScriptFetched) => {
@@ -52,6 +57,26 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   useListenerToBus({ busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript });
   useListenerToBus({ busEventKey: SDKMessage.IS_SDK_INITIALIZED, action: updateInitializedParams });
 
+  useEffect(() => {
+
+    const getAppName = async () => {
+      // For iOS, we extend the app name from the HTML to display a prettier access request message.
+      // On Android, there is no request message sent from HTML.
+      try {
+        if (Platform.OS == 'ios') {
+          const name = await UNAppInfo.getBundleName();
+          setBaseName(name.replace(/ /g, '-'));
+        } else { // android
+          setBaseName('unit');
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    };
+
+    getAppName();
+  }, []);
+
   useEffect(() => {
     if (!unitScript) {
       fetchUnitScript();
@@ -92,9 +117,16 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     return null;
   };
 
+  if (!baseName) {
+    return null;
+  }
+
   return (
     <WebView
       ref={webRef}
+      originWhitelist={['*']}
+      mediaPlaybackRequiresUserAction={false}
+      allowsInlineMediaPlayback={true}
       cacheEnabled={false}
       scrollEnabled={props.isScrollable}
       nestedScrollEnabled={props.nestedScrollEnabled}
@@ -102,7 +134,9 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       overScrollMode="never"
       injectedJavaScript={unitScript}
       style={{ width: width, flex: 1, opacity: 0.99}}
-      source={{ html: sourceHtml }}
-      onMessage={onMessage} />
+      source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}
+      onMessage={onMessage}
+      androidHardwareAccelerationDisabled
+    />
   );
 });

package/src/webComponent/html.ts

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT } from '../scripts/html/bodyScript';
+import { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT, DISPATCH_REQUEST_CARD_ACTION, DISPATCH_OPEN_ACTIONS_MENU, DISPATCH_REQUEST_ACCOUNT_ACTION, DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT } from '../scripts/html/bodyScript';
 
 export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
@@ -21,7 +21,7 @@ const htmlText = `
     }
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
-  </html>
+  </head>
 
   <body style="margin: 0;">
     ${HTML_PLACEHOLDER.BODY}
@@ -43,17 +43,30 @@ const htmlText = `
 
       ${LISTENERS.requestCloseFlow}
 
+      ${LISTENERS.cardActivated}
+
       ${LISTENERS.cardStatusChange}
 
       ${LISTENERS.unitRequestExternalSdk}
 
       ${LISTENERS.unitAccountChanged}
 
+      ${LISTENERS.unitActivityFiltersChanged}
+
       ${DISPATCH_RENDERING_EVENT}
 
+      ${DISPATCH_OPEN_ACTIONS_MENU}
+
+      ${DISPATCH_REQUEST_CARD_ACTION}
+
+      ${DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT}
+
+      ${DISPATCH_REQUEST_ACCOUNT_ACTION}
+
       ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}
     </script>
   </body>
+  </html>
 `;
 
 export default htmlText;

package/android/src/main/res/values/themes.xml

@@ -1,16 +0,0 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
-    <!-- Base application theme. -->
-    <style name="Theme.UnitWalletDemo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
-        <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
-        <item name="colorOnPrimary">@color/white</item>
-        <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/teal_200</item>
-        <item name="colorSecondaryVariant">@color/teal_700</item>
-        <item name="colorOnSecondary">@color/black</item>
-        <!-- Status bar color. -->
-        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
-        <!-- Customize your theme here. -->
-    </style>
-</resources>

package/android/src/main/res/values-night/themes.xml

@@ -1,16 +0,0 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
-    <!-- Base application theme. -->
-    <style name="Theme.UnitWalletDemo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
-        <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_200</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
-        <item name="colorOnPrimary">@color/black</item>
-        <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/teal_200</item>
-        <item name="colorSecondaryVariant">@color/teal_200</item>
-        <item name="colorOnSecondary">@color/black</item>
-        <!-- Status bar color. -->
-        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
-        <!-- Customize your theme here. -->
-    </style>
-</resources>