react-native-unit-components 1.2.1 → 1.4.0

package/lib/typescript/messages/webMessages/onLoadMessage.d.ts

@@ -0,0 +1,30 @@
+import type { UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
+import type { UNAuthorizationData } from '../../sharedTypes/authorization.types';
+import type { UNTransactionData } from '../../sharedTypes/transactions.types';
+export declare enum RESPONSE_KEYS {
+    errors = "errors",
+    card = "cardResult",
+    account = "accountResult",
+    counterpartyAccount = "counterpartyResult",
+    transactions = "transactionsResult",
+    authorization = "authorizationResult"
+}
+export type CardOnLoadResponse = {
+    [RESPONSE_KEYS.card]: UNOnLoadResponseData<UNCardData>;
+};
+export type AccountOnLoadResponse = {
+    [RESPONSE_KEYS.account]: UNOnLoadResponseData<UNAccountData>;
+};
+export type AccountsOnLoadResponse = {
+    [RESPONSE_KEYS.account]: UNOnLoadResponseData<[UNAccountData]>;
+};
+export type ACHOnLoadResponse = {
+    [RESPONSE_KEYS.account]: UNOnLoadResponseData<UNAccountData>;
+    [RESPONSE_KEYS.counterpartyAccount]: UNOnLoadResponseData<[UNCounterpartyAccountData]>;
+};
+export type ActivityOnLoadResponse = {
+    [RESPONSE_KEYS.authorization]: UNOnLoadResponseData<UNAuthorizationData>;
+    [RESPONSE_KEYS.transactions]: UNOnLoadResponseData<UNTransactionData>;
+};
+export type UnitOnLoadResponseSuccessData = CardOnLoadResponse | ACHOnLoadResponse | AccountsOnLoadResponse | AccountOnLoadResponse | ActivityOnLoadResponse;
+export type UnitOnLoadResponseEvent = UNError | UnitOnLoadResponseSuccessData;

package/lib/typescript/messages/webMessages/unitMessages.d.ts

@@ -1,4 +1,4 @@
-import type { UNResponseUnitOnLoadEvent } from '../../sharedTypes';
+import type { UnitOnLoadResponseEvent } from './onLoadMessage';
 export declare enum UnitMessage {
     UNIT_REQUEST_RENDERING = "unitRequestRendering",
     UNIT_REQUEST_REFRESH = "unitRequestRefresh",
@@ -48,5 +48,5 @@ interface PlaidLinkTokenAttributes {
 export interface RequestExternalSdkEvent {
     type: string;
 }
-export type UnitEvent = RequestRenderingEvent | RequestRefreshEvent | RequestOpenLinkEvent | UNResponseUnitOnLoadEvent | RequestDownloadEvent | PlaidTokenCreatedEvent | RequestExternalSdkEvent;
+export type UnitEvent = RequestRenderingEvent | RequestRefreshEvent | RequestOpenLinkEvent | UnitOnLoadResponseEvent | RequestDownloadEvent | PlaidTokenCreatedEvent | RequestExternalSdkEvent;
 export {};

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

@@ -8,11 +8,17 @@ export declare const LISTENERS: {
     requestCloseFlow: string;
     requestOpenLink: string;
     unitRequestDownload: string;
+    cardActivated: string;
     cardStatusChange: string;
     unitRequestExternalSdk: string;
     unitPaymentCreated: string;
     unitAccountChanged: string;
+    unitActivityFiltersChanged: string;
 };
 export declare const DISPATCH_RENDERING_EVENT: string;
 export declare const DISPATCH_REQUEST_REFRESH: string;
+export declare const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT: string;
 export declare const DISPATCH_PLAID_RESPONSE: string;
+export declare const DISPATCH_OPEN_ACTIONS_MENU = "\n    const dispatchOpenActionsMenu = (componentName) => {\n      document.querySelector(componentName).dispatchEvent(new CustomEvent(\"unitRequestOpenActionsMenu\"))\n    }\n";
+export declare const DISPATCH_REQUEST_CARD_ACTION = "\n    const dispatchRequestCardAction = (action) => {\n      document.querySelector(\"unit-elements-card\").dispatchEvent(new CustomEvent(\"unitRequestCardAction\", {detail: {action: action}}))\n    }\n";
+export declare const DISPATCH_REQUEST_ACCOUNT_ACTION = "\n    const dispatchRequestAccountAction = (action) => {\n      document.querySelector(\"unit-elements-account\").dispatchEvent(new CustomEvent(\"unitRequestAccountAction\", {detail: {action: action}}))\n    }\n";

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

@@ -1,5 +1,14 @@
 import type { UNRelationship, UNTags } from './types';
 export type UNAccountData = UNDepositAccount | UNBatchAccount | UNCreditAccount;
+export type UNCounterpartyAccountData = {
+    id: string;
+    attributes: {
+        name: string;
+        tags?: {
+            [key: string]: string;
+        };
+    };
+};
 declare enum UNAccountStatus {
     Open = "Open",
     Closed = "Closed",
@@ -21,7 +30,7 @@ export declare enum UNFraudReason {
 }
 export type UNDepositAccount = {
     id: string;
-    type: "depositAccount";
+    type: 'depositAccount';
     attributes: {
         createdAt: string;
         updatedAt?: string;
@@ -56,7 +65,7 @@ export type UNDepositAccount = {
 };
 export type UNBatchAccount = {
     id: string;
-    type: "batchAccount";
+    type: 'batchAccount';
     attributes: {
         createdAt: Date;
         updatedAt?: Date;
@@ -70,7 +79,7 @@ export type UNBatchAccount = {
         reserve: number;
         available: number;
         currency: string;
-        status: "Open" | "Closed";
+        status: 'Open' | 'Closed';
         closeReason?: string;
         fraudReason?: UNFraudReason;
         closeReasonText?: string;
@@ -85,7 +94,7 @@ export type UNBatchAccount = {
 };
 export type UNCreditAccount = {
     id: string;
-    type: "creditAccount";
+    type: 'creditAccount';
     attributes: {
         createdAt: Date;
         updatedAt?: Date;
@@ -111,4 +120,9 @@ export type UNCreditAccount = {
         org: UNRelationship;
     };
 };
+export declare enum UNAccountMenuAction {
+    OpenAccountDetails = "OpenAccountDetails",
+    OpenAccountStatements = "OpenAccountStatements",
+    DownloadBankVerificationLetter = "DownloadBankVerificationLetter"
+}
 export {};

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

@@ -1,5 +1,11 @@
+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/lib/typescript/sharedTypes/activity.types.d.ts

@@ -0,0 +1,7 @@
+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/lib/typescript/sharedTypes/authorization.types.d.ts

@@ -0,0 +1,20 @@
+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/lib/typescript/sharedTypes/card.types.d.ts

@@ -53,4 +53,16 @@ export type UNBusinessDebitCard = {
         customer: UNRelationship;
     };
 };
+export declare enum UNCardMenuAction {
+    Freeze = "Freeze",
+    ManagePin = "ManagePin",
+    Replace = "Replace",
+    Report = "Report",
+    Close = "Close",
+    Activate = "Activate",
+    Unfreeze = "Unfreeze",
+    ChangePin = "ChangePin",
+    SetPin = "SetPin",
+    AddToWallet = "AddToWallet"
+}
 export {};

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

@@ -0,0 +1,46 @@
+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 declare 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/lib/typescript/sharedTypes/index.d.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/lib/typescript/sharedTypes/onLoadResponse.types.d.ts

@@ -1,18 +1,14 @@
-import type { UNCardData } from '../sharedTypes';
-export type UNSuccessResponseUnitOnLoad = {
-    data: UNCardData | Object;
-    included: [Object];
-    errors: null;
+export type UNOnLoadResponseData<T> = {
+    data: T;
 };
-export type UNErrorResponseUnitOnLoad = {
-    errors: [
-        {
-            status: string;
-            title: string;
-            detail?: string;
-            details?: string;
-            meta?: Record<string, string>;
-        }
-    ];
+export type UNError = {
+    errors: UNErrorData[];
 };
-export type UNResponseUnitOnLoadEvent = UNSuccessResponseUnitOnLoad | UNErrorResponseUnitOnLoad;
+export type UNErrorData = {
+    status: string;
+    title: string;
+    detail?: string;
+    details?: string;
+    meta?: Record<string, string>;
+};
+export type UNOnLoadResponse<T> = UNOnLoadResponseData<T> | UNError;

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

@@ -0,0 +1,80 @@
+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 declare enum UNDirection {
+    Debit = "Debit",
+    Credit = "Credit"
+}
+export declare 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/lib/typescript/webComponent/WebComponent.d.ts

@@ -20,6 +20,7 @@ export declare 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"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -74,8 +74,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-webview": "*",
-    "react-native-plaid-link-sdk": "*"
+    "react-native-plaid-link-sdk": "*",
+    "react-native-webview": "*"
   },
   "dependencies": {
     "axios": "^1.3.3",

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -2,13 +2,14 @@ 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 type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { getACHCreditParams, getACHCreditScript } from './UNACHCreditComponent.utils';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 
 export interface UNACHCreditComponentProps {
   accountId: string;
@@ -17,13 +18,39 @@ export interface UNACHCreditComponentProps {
   isAutoFocus?: boolean;
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
-  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
+  onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
 }
 
 export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
+      // ACHOnLoadResponse;
+      const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
+        data: {
+          [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
+          [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
+        }
+      };
+      props.onLoad(achOnload);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
   const handleWebViewMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
 
@@ -34,7 +61,7 @@ export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -2,7 +2,7 @@ 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 type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
 import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -13,6 +13,7 @@ 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';
 
 export interface UNACHDebitComponentProps {
   accountId: string;
@@ -21,7 +22,7 @@ export interface UNACHDebitComponentProps {
   isAutoFocus?: boolean;
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
-  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
+  onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
 }
 
 export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
@@ -45,6 +46,32 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     injectUnitPlaidResponse(webRef.current, success);
   };
 
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
+      // ACHOnLoadResponse;
+      const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
+        data: {
+          [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
+          [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
+        }
+      };
+      props.onLoad(achOnload);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
   const handleWebViewMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
 
@@ -55,7 +82,7 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';
@@ -6,28 +6,42 @@ import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../m
 import EventBus from '../../helpers/EventBus';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
-import { getAccountParams, getAccountScript, injectRefreshEventIfNeeded } from './UNAccountComponent.utils';
+import { getAccountParams, getAccountScript, injectOpenActionsMenuScript, injectRefreshEventIfNeeded, injectRequestAccountActionScript } from './UNAccountComponent.utils';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
-import type { UNResponseUnitOnLoadEvent } from '../../sharedTypes';
+import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { UNAccountData } from '../../sharedTypes/account.types';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import type { UNAccountMenuAction } from '../../sharedTypes';
 
 export interface UNAccountComponentProps {
+  // inputs
   accountId?: string;
   customerToken: string;
+
+  // ui
   theme?: string;
-  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
+  hideActionsMenuButton?: boolean;
+  hideSelectionMenuButton?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
   onAccountChanged?: (account: UNAccountData) => void;
 }
 
+export interface UNAccountRef {
+  openActionsMenu: () => void;
+  openAction: (action: UNAccountMenuAction) => void;
+}
+
 export enum AccountAction {
   List = 'account-list',
   Menu = 'account-menu'
 }
 
-export const UNAccountComponent = (props: UNAccountComponentProps) => {
+export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
   const [height, setHeight] = useState(0);
   const windowWidth = Dimensions.get('window').width;
 
@@ -36,13 +50,33 @@ export const UNAccountComponent = (props: UNAccountComponentProps) => {
   const webRef = useRef<WebView>(null);
 
   const handleAccountChanged = (account: UNAccountData) => {
-    props.onAccountChanged && props.onAccountChanged(account)
-  }
+    props.onAccountChanged && props.onAccountChanged(account);
+  };
 
   const requestRefresh = (data: RequestRefreshEvent) => {
     setRequestRefreshEvent(data);
   };
 
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response) {
+      // AccountsOnLoadResponse;
+      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type.');
+    return;
+  };
+
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToBus({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
@@ -50,10 +84,19 @@ export const UNAccountComponent = (props: UNAccountComponentProps) => {
     injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
   }, [requestRefreshEvent]);
 
+  useImperativeHandle(accountRef, () => ({
+    openActionsMenu() {
+      injectOpenActionsMenuScript(webRef.current);
+    },
+    openAction(action: UNAccountMenuAction) {
+      injectRequestAccountActionScript(webRef.current, action);
+    }
+  }));
+
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
         break;
       case UnitMessage.UNIT_REQUEST_RENDERING: {
         const event: BottomSheetSlotData = {
@@ -85,4 +128,4 @@ export const UNAccountComponent = (props: UNAccountComponentProps) => {
       />
     </View>
   );
-};
+});

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

@@ -2,11 +2,14 @@ import { AccountAction, UNAccountComponentProps } from './UNAccountComponent';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import type WebView from 'react-native-webview';
 import { WebComponentType } from '../../webComponent/WebComponent';
+import type { UNAccountMenuAction } from 'src/sharedTypes';
 
 export const getAccountParams = (props: UNAccountComponentProps) => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    hide-actions-menu-button="${props.hideActionsMenuButton || false}"
+    hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
   `;
 };
 
@@ -19,6 +22,14 @@ export const getAccountScript = () => {
   `;
 };
 
+export const injectOpenActionsMenuScript = (currentWeb: WebView | null) => {
+  currentWeb?.injectJavaScript(`dispatchOpenActionsMenu('${WebComponentType.account}')`);
+};
+
+export const injectRequestAccountActionScript = (currentWeb: WebView | null, action: UNAccountMenuAction) => {
+  currentWeb?.injectJavaScript(`dispatchRequestAccountAction('${action}')`);
+};
+
 export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null) => {
   if (requestRefreshEvent && requestRefreshEvent.dependencies.includes(WebComponentType.account.valueOf())) {
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);