react-native-unit-components 1.15.0 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"WebComponent.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/WebComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAYpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAU/F,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,uFAgKvB,CAAC"}
+{"version":3,"file":"WebComponent.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/WebComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAYpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAU1F,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,uFAsKvB,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { EventToContinueEvent, RequestDownloadEvent } from '../messages/webMessages/unitMessages';
+import type { EventToContinueEvent, RequestDownloadEvent } from '../messages/webMessages/unitComponentsMessages';
 import WebView from 'react-native-webview';
 export declare const getInfoParams: () => Promise<{
     [key: string]: string;

package/lib/typescript/src/webComponent/WebComponent.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebComponent.utils.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/WebComponent.utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAEvG,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAG3C,eAAO,MAAM,aAAa;;EAazB,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAAmB,oBAAoB,kBAAkB,MAAM,IAAI,kBAoBpG,CAAC;AAEF,eAAO,MAAM,qBAAqB,eAAgB,OAAO,GAAG,IAAI,wBAAwB,oBAAoB,SAE3G,CAAC"}
+{"version":3,"file":"WebComponent.utils.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/WebComponent.utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC;AAEjH,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAG3C,eAAO,MAAM,aAAa;;EAazB,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAAmB,oBAAoB,kBAAkB,MAAM,IAAI,kBAoBpG,CAAC;AAEF,eAAO,MAAM,qBAAqB,eAAgB,OAAO,GAAG,IAAI,wBAAwB,oBAAoB,SAE3G,CAAC"}

package/lib/typescript/src/webComponent/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/html.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,QAAA,MAAM,QAAQ,QAuFb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../../src/webComponent/html.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,QAAA,MAAM,QAAQ,QAyFb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.15.0",
+  "version": "2.0.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -15,6 +15,7 @@
     "cpp",
     "react-native-unit-components.podspec",
     "!lib/typescript/example",
+    "!lib/typescript/exampleNewArch",
     "!android/build",
     "!ios/build",
     "!**/__tests__",
@@ -28,7 +29,9 @@
     "prepare": "bob build",
     "example": "yarn --cwd example",
     "cleanNodeModules": "rm -rf node_modules",
-    "bootstrap": "yarn cleanNodeModules && yarn example cleanNodeModules && yarn example && yarn && yarn example pods"
+    "bootstrap": "yarn cleanNodeModules && yarn example cleanNodeModules && yarn example && yarn && yarn example pods",
+    "cleanAll": "rm -rf node_modules example/node_modules android/build example/android/build example/ios/pods",
+    "installAll": "yarn install && cd example && yarn install && cd ios && pod install"
   },
   "keywords": [
     "react-native",
@@ -44,6 +47,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.18.2",
     "@react-native-community/eslint-config": "^3.0.2",
+    "@react-native/codegen": "^0.78.0",
     "@types/jest": "^26.0.14",
     "@types/react": "18.2.0",
     "@types/react-native": "^0.69.9",
@@ -60,6 +64,7 @@
     "react": "18.2.0",
     "react-native": "0.69.9",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-tscodegen": "^0.72.0",
     "react-native-webview": "^13.6.3",
     "typescript": "^4.5.2"
   },
@@ -126,5 +131,18 @@
         }
       ]
     ]
+  },
+  "codegenConfig": {
+    "name": "RNUnitComponentsSdkViewSpec",
+    "type": "all",
+    "jsSrcsDir": "./src",
+    "android": {
+      "javaPackageName": "com.unitreactnativecomponents"
+    },
+    "ios": {
+      "componentProvider": {
+        "UnitAddToWalletButtonNativeView": "UnitAddToWalletButtonNativeViewComponentView"
+      }
+    }
   }
 }

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../types/shared';
+import type { 
+  UNComponentsOnLoadResponse, 
+  UNComponentsOnLoadResponseData, 
+  UNACHOnLoadData, 
+  UNComponentsError, 
+  UNPlaidAccountFilter, 
+  UNACHPayment 
+} from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform } from 'react-native';
 import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from './UNACHCreditComponent.utils';
@@ -12,30 +19,28 @@ import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
   RequestExternalSdkEvent,
-  UnitMessage,
-} from '../../messages/webMessages/unitMessages';
+  UnitComponentsMessage,
+} from '../../messages/webMessages/unitComponentsMessages';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
-import * as AppInfo from '../../utils/AppInfo';
+import AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { UNPlaidAccountFilter } from '../../types/shared';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNACHCreditComponentProps {
   accountId?: string;
-  customerToken: string;
   theme?: string;
   language?: string;
   isAutoFocus?: boolean;
   fee?: number;
   withPlaid?: boolean;
-  onPaymentCreated?: (data: UNACHData) => void;
+  onPaymentCreated?: (data: UNACHPayment) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
-  onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNACHOnLoadData>) => void;
   sameDay?: boolean;
   plaidAccountFilters?: UNPlaidAccountFilter[];
   plaidLinkCustomizationName?: string;
@@ -66,14 +71,14 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
       const account = response[RESPONSE_KEYS.account].data;
       // ACHOnLoadResponse;
-      const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
+      const achOnload: UNComponentsOnLoadResponseData<UNACHOnLoadData> = {
         data: {
           [RESPONSE_KEYS.account]: ensureArray(account),
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
@@ -101,10 +106,10 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
       }
       case PaymentMessage.PAYMENT_CREATED: {
         const achCreditEvent = message.details as ACHEvent;
-        props.onPaymentCreated && props.onPaymentCreated(achCreditEvent.data as UNACHData);
+        props.onPaymentCreated && props.onPaymentCreated(achCreditEvent.data as UNACHPayment);
         break;
       }
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -122,7 +127,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         break;
       }
 
-      case UnitMessage.UNIT_REQUEST_EXTERNAL_SDK: {
+      case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK: {
         const externalSdkType = (message.details as RequestExternalSdkEvent).type;
         if (externalSdkType !== 'plaid') return;
         linkToken && openLink({
@@ -144,7 +149,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
   const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.achCreditPayment}

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

@@ -9,7 +9,6 @@ export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
     ${accountIdParam}
-    customer-token="${props.customerToken}"
     with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -1,39 +1,43 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../types/shared';
+import type {
+  UNComponentsOnLoadResponse, 
+  UNComponentsError, 
+  UNComponentsOnLoadResponseData, 
+  UNACHOnLoadData, 
+  UNACHPayment, 
+  UNPlaidAccountFilter 
+} from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform } from 'react-native';
 import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
   RequestExternalSdkEvent,
-  UnitMessage,
-} from '../../messages/webMessages/unitMessages';
+  UnitComponentsMessage,
+} from '../../messages/webMessages/unitComponentsMessages';
 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 * as AppInfo from '../../utils/AppInfo';
+import AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { UNPlaidAccountFilter } from '../../types/shared';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNACHDebitComponentProps {
   accountId?: string;
-  customerToken: string;
   theme?: string;
   language?: string;
   isAutoFocus?: boolean;
   fee?: number;
-  onPaymentCreated?: (data: UNACHData) => void;
-  onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
+  onPaymentCreated?: (data: UNACHPayment) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNACHOnLoadData>) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
   sameDay?: boolean;
@@ -66,14 +70,14 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
       const account = response[RESPONSE_KEYS.account].data;
       // ACHOnLoadResponse;
-      const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
+      const achOnload: UNComponentsOnLoadResponseData<UNACHOnLoadData> = {
         data: {
           [RESPONSE_KEYS.account]: ensureArray(account),
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
@@ -101,10 +105,10 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       }
       case PaymentMessage.PAYMENT_CREATED: {
         const achDebitEvent = message.details as ACHEvent;
-        props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data as UNACHData);
+        props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data as UNACHPayment);
         break;
       }
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -122,7 +126,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         break;
       }
 
-      case UnitMessage.UNIT_REQUEST_EXTERNAL_SDK: {
+      case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK: {
         const externalSdkType = (message.details as RequestExternalSdkEvent).type;
         if (externalSdkType !== 'plaid') return;
         linkToken && openLink({
@@ -144,7 +148,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
   const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.achDebitPayment}

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

@@ -10,7 +10,6 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
     ${accountIdParam}
-    customer-token="${props.customerToken}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -4,9 +4,9 @@ import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessag
 import {
   RequestRefreshEvent,
   RequestRenderingEvent,
-  UnitMessage,
+  UnitComponentsMessage,
   UnitRequestRefreshEventTypes,
-} from '../../messages/webMessages/unitMessages';
+} from '../../messages/webMessages/unitComponentsMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
@@ -16,11 +16,17 @@ import {
   injectRefreshEventIfNeeded,
   injectRequestAccountActionScript,
 } from './UNAccountComponent.utils';
-import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
-import type { UNAccountData } from '../../types/shared/account.types';
+import type { 
+  UNAccount, 
+  UNAccountMenuAction, 
+  UNAccountMenuItem, 
+  UNCreditAccount, 
+  UNComponentsError, 
+  UNComponentsOnLoadResponse, 
+  UNComponentsOnLoadResponseData 
+} from '../../types/shared';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import type { UNAccountMenuAction } from '../../types/shared';
 import {
   BottomSheetRenderingType,
   SlotRendering,
@@ -32,13 +38,11 @@ import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import { UNAccountMenuItem, UNCreditAccount } from '../../types/shared';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNAccountComponentProps {
   // inputs
   accountId?: string;
-  customerToken: string;
   menuItems?: UNAccountMenuItem[];
 
   // ui
@@ -46,11 +50,17 @@ export interface UNAccountComponentProps {
   language?: string;
   hideActionsMenuButton?: boolean;
   hideSelectionMenuButton?: boolean;
+  hideAccountStatus?: boolean;
+  hideAccountDetails?: boolean;
+  hideAccountButtons?: boolean;
+  hideAccountCtaBanner?: boolean;
   showLeftToSpend?: boolean;
+  enableFundAccountButton?: boolean;
+  enablePaySomeoneAccountButton?: boolean;
 
   // events
-  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
-  onAccountChanged?: (account: UNAccountData) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<[UNAccount]>) => void;
+  onAccountChanged?: (account: UNAccount) => void;
   onRequestLeftToSpendDetails?: (account: UNCreditAccount) => void;
 }
 
@@ -72,12 +82,12 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   const webRef = useRef<WebView>(null);
   // currentAccountId is used to store the current account id for the "imperative" refresh event.
   const accountIdRef = useRef<string | undefined>(undefined);
-
+  
   useEffect(() => {
     accountIdRef.current = props.accountId;
   }, [props.accountId]);
 
-  const handleAccountChanged = (account: UNAccountData) => {
+  const handleAccountChanged = (account: UNAccount) => {
     accountIdRef.current = account.id;
     props.onAccountChanged && props.onAccountChanged(account);
   };
@@ -96,13 +106,13 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.account in response) {
       // AccountsOnLoadResponse;
-      const accountResponse = response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>;
+      const accountResponse = response[RESPONSE_KEYS.account] as UNComponentsOnLoadResponseData<[UNAccount]>;
       props.onLoad(accountResponse);
       // if accountId is not provided, set the first account as current
       if (!props.accountId && accountResponse.data && accountResponse.data.length > 0) {
@@ -114,7 +124,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     console.error('On Load Error: unexpected response type.');
     return;
   };
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useImperativeHandle(accountRef, () => ({
@@ -136,10 +146,10 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
 
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.account,
           componentResourceId: props.accountId,
@@ -158,14 +168,14 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
-      case UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
+      case UnitComponentsMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
         handleRequestLeftToSpendDetails(message.details as UNCreditAccount);
         break;
     }
   };
 
   return (
-    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.account}

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

@@ -1,5 +1,5 @@
 import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
-import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type WebView from 'react-native-webview';
 import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
@@ -10,11 +10,16 @@ export const getAccountParams = (props: UNAccountComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
-    customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
+    hide-account-status="${props.hideAccountStatus || false}"
+    hide-account-details="${props.hideAccountDetails || false}"
+    hide-account-buttons="${props.hideAccountButtons || false}"
+    hide-account-cta-banner="${props.hideAccountCtaBanner || false}"
     show-left-to-spend="${props.showLeftToSpend || false}"
+    enable-fund-account-button="${props.enableFundAccountButton || false}"
+    enable-pay-someone-account-button="${props.enablePaySomeoneAccountButton || false}"
     ${menuItemsParam}
   `;
 };

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -3,12 +3,18 @@ import { Dimensions } from 'react-native';
 import {
   RequestRefreshEvent,
   RequestRenderingEvent,
-  UnitMessage,
+  UnitComponentsMessage,
   UnitRequestRefreshEventTypes,
-} from '../../messages/webMessages/unitMessages';
+} from '../../messages/webMessages/unitComponentsMessages';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import type { 
+  UNComponentsError, 
+  UNComponentsOnLoadResponse, 
+  UNComponentsOnLoadResponseData, 
+  UNActivityOnLoadData, 
+  UNActivityComponentPaginationType 
+} from '../../types/shared';
 import { WebComponent } from '../../webComponent/WebComponent';
 import {
   getActivityParams,
@@ -17,7 +23,6 @@ import {
   injectRefreshEventIfNeeded,
 } from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
-import type { UNActivityOnLoadData } from '../../types/shared/activity.types';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import {
@@ -30,14 +35,12 @@ import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useDispatch } from 'react-redux';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import type { UNActivityComponentPaginationType } from '../../types/shared';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
 export interface UNActivityComponentProps {
   // inputs
-  customerToken: string;
   accountId?: string;
   queryFilter?: string;
 
@@ -50,7 +53,7 @@ export interface UNActivityComponentProps {
   paginationType?: UNActivityComponentPaginationType;
   transactionsPerPage?: number;
   // event
-  onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
+  onLoad?: (response: UNComponentsOnLoadResponse<UNActivityOnLoadData>) => void;
 }
 
 export interface UNActivityRef {
@@ -81,7 +84,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     injectFiltersChanged(webRef.current, query);
   };
 
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
@@ -93,13 +96,13 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     }
 
     if (RESPONSE_KEYS.errors in response) {
-      props.onLoad(response as UNError);
+      props.onLoad(response as UNComponentsError);
       return;
     }
 
     if (RESPONSE_KEYS.authorizations in response && RESPONSE_KEYS.transactions in response) {
       // ActivityOnLoadResponse;
-      const activityOnLoad: UNOnLoadResponseData<UNActivityOnLoadData> = {
+      const activityOnLoad: UNComponentsOnLoadResponseData<UNActivityOnLoadData> = {
         data: {
           [RESPONSE_KEYS.authorizations]: response[RESPONSE_KEYS.authorizations].data,
           [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data,
@@ -115,7 +118,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
 
   const handleWebViewMessage = (message: WebViewMessage) => {
     switch (message.type) {
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
+      case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.activity,
           componentResourceId: props.accountId,
@@ -130,7 +133,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
-      case UnitMessage.UNIT_ON_LOAD:
+      case UnitComponentsMessage.UNIT_ON_LOAD:
         handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
@@ -144,7 +147,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
   const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
 
   return (
-    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.activity}

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

@@ -1,4 +1,4 @@
-import type { RequestRefreshEvent } from './../../messages/webMessages/unitMessages';
+import type { RequestRefreshEvent } from '../../messages/webMessages/unitComponentsMessages';
 import type { WebView } from 'react-native-webview';
 import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type { UNActivityComponentProps } from './UNActivityComponent';
@@ -10,7 +10,6 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
   const paginationTypeParam = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
   const transactionsPerPageParam = props.transactionsPerPage ? `transactions-per-page="${props.transactionsPerPage}"` : '';
   return `
-    customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
     hide-back-to-top="${props.hideBackToTop || false}"