react-native-unit-components 1.1.0 → 1.2.1

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -2,7 +2,7 @@ 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 { ResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -17,7 +17,7 @@ export interface UNACHCreditComponentProps {
   isAutoFocus?: boolean;
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
 }
 
 export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
@@ -34,7 +34,7 @@ export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
         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 { ResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
 import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -21,7 +21,7 @@ export interface UNACHDebitComponentProps {
   isAutoFocus?: boolean;
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
 }
 
 export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
@@ -55,7 +55,7 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -9,14 +9,17 @@ import type { WebViewMessage } from '../../messages/webMessages';
 import { getAccountParams, getAccountScript, injectRefreshEventIfNeeded } from './UNAccountComponent.utils';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
-import type { ResponseUnitOnLoadEvent } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent } from '../../sharedTypes';
 import { useListenerToBus } from '../../hooks/listenerToBus';
+import type { UNAccountData } from '../../sharedTypes/account.types';
+import { AccountMessage } from '../../messages/webMessages/accountMessage';
 
 export interface UNAccountComponentProps {
   accountId?: string;
   customerToken: string;
   theme?: string;
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
+  onAccountChanged?: (account: UNAccountData) => void;
 }
 
 export enum AccountAction {
@@ -32,11 +35,16 @@ export const UNAccountComponent = (props: UNAccountComponentProps) => {
 
   const webRef = useRef<WebView>(null);
 
+  const handleAccountChanged = (account: UNAccountData) => {
+    props.onAccountChanged && props.onAccountChanged(account)
+  }
+
   const requestRefresh = (data: RequestRefreshEvent) => {
     setRequestRefreshEvent(data);
   };
 
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToBus({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useEffect(() => {
     injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
@@ -45,7 +53,7 @@ export const UNAccountComponent = (props: UNAccountComponentProps) => {
   const handleMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
         break;
       case UnitMessage.UNIT_REQUEST_RENDERING: {
         const event: BottomSheetSlotData = {

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,21 +1,23 @@
 import React, { useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
-import { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
-import type { ResponseUnitOnLoadEvent } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent } from '../../sharedTypes';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import { getActivityParams, getActivityScript, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
+import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
+import EventBus from '../../helpers/EventBus';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
   accountId: string;
   customerToken: string;
   theme?: string;
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void
 }
 
 export const UNActivityComponent = (props: UNActivityComponentProps) => {
@@ -30,8 +32,17 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
 
   const handleWebViewMessage = (message: WebViewMessage) => {
     switch (message.type) {
+      case UnitMessage.UNIT_REQUEST_RENDERING: {
+        const event: BottomSheetSlotData = {
+          componentName: WebComponentType.activity,
+          componentResourceId: props.accountId,
+          requestRenderingEvent: message.details as RequestRenderingEvent
+        };
+        EventBus.Instance.event(UnitMessage.UNIT_REQUEST_RENDERING, event);
+        break;
+      }
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -3,7 +3,7 @@ import { WebComponent, WebComponentType } from '../../webComponent/WebComponent'
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { ResponseUnitOnLoadEvent, UNBookPaymentData } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent, UNBookPaymentData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -18,7 +18,7 @@ export interface UNBookPaymentComponentProps {
   counterPartyName: string;
   theme?: string;
   onPaymentCreated?: (data: UNBookPaymentData) => void;
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void;
 }
 
 export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
@@ -33,7 +33,7 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
         props.onPaymentCreated && props.onPaymentCreated((message.details as BookPaymentEvent).data);
         break;
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
         break;
       case PageMessage.PAGE_HEIGHT: {
         const currentHeight = (message.details as HeightEvent).height;

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -10,13 +10,20 @@ import { RequestOpenLinkEvent, RequestRenderingEvent, UnitMessage } from '../../
 import { CardMessage, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
 import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
-import { getBottomSheetScript, handleHtmlFullHeight, renderingBottomSheetRequest, resetHtml } from './UNBottomSheetComponent.utils';
+import {
+  getBottomSheetScript,
+  handleHtmlFullHeight,
+  renderingBottomSheetRequest,
+  resetHtml,
+} from './UNBottomSheetComponent.utils';
 import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { UNAddToWalletBottomSheetItem } from './components/UNAddToWalletBottomSheetItem';
 import { getAccountActionType } from '../UNAccountComponent/UNAccountComponent.utils';
 import { AccountAction } from '../UNAccountComponent/UNAccountComponent';
+import type { AccountChangedEvent } from '../../messages/webMessages/accountMessage';
+import { AccountMessage } from '../../messages/webMessages/accountMessage';
 
 export enum ScrollState {
   /*
@@ -170,6 +177,9 @@ export const UNBottomSheetComponent = () => {
       case CardMessage.CARD_STATUS_CHANGED:
         EventBus.Instance.event(CardMessage.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card);
         break;
+      case AccountMessage.UNIT_ACCOUNT_CHANGED:
+        EventBus.Instance.event(AccountMessage.UNIT_ACCOUNT_CHANGED, (message.details as AccountChangedEvent).account);
+        break;
       case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
         handleCloseFlow();
         break;

package/src/components/UNBottomSheetComponent/components/UNAddToWalletBottomSheetItem.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import type WebView from 'react-native-webview';
-import { CardAddToWalletStatus, CardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../../messages/nativeMessages/cardMessage';
+import { UNCardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../../messages/nativeMessages/cardMessage';
 import EventBus from '../../../helpers/EventBus';
 import { PresentationMode } from '../../../scripts/html/bodyHtml';
 import { WebComponent, WebComponentType } from '../../../webComponent/WebComponent';
@@ -10,6 +10,7 @@ import { ActivityIndicator } from 'react-native';
 import { useListenerToBus } from '../../../hooks/listenerToBus';
 import type { RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
 import UnitAddToWalletButtonView from '../../../nativeComponent/UnitAddToWalletButton';
+import { UNCardAddToWalletStatus } from '../../../sharedTypes/wallet.types';
 
 export interface UNAddToWalletBottomSheetItemProps {
   renderingRequest?: RequestRenderingEvent
@@ -23,7 +24,7 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
 
   const { renderingRequest, cardId } = props;
 
-  const [addToWalletStatus, setAddToWalletStatus] = useState<CardAddToWalletStatus>(CardAddToWalletStatus.pending);
+  const [addToWalletStatus, setAddToWalletStatus] = useState<UNCardAddToWalletStatus>(UNCardAddToWalletStatus.pending);
 
   useEffect(() => {
     if (!cardId) return;
@@ -33,9 +34,9 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
 
   useEffect(() => {
     if (!webRef.current) return;
-    if (addToWalletStatus === CardAddToWalletStatus.pending) return;
+    if (addToWalletStatus === UNCardAddToWalletStatus.pending) return;
 
-    const isCardInWallet = addToWalletStatus === CardAddToWalletStatus.addedToWallet;
+    const isCardInWallet = addToWalletStatus === UNCardAddToWalletStatus.addedToWallet;
     webRef.current.injectJavaScript(`window.UnitMobileSDKConfig["isCardInWallet"] = ${isCardInWallet}`);
 
     if (renderingRequest) {
@@ -43,7 +44,7 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
     }
   }, [webRef.current, renderingRequest, addToWalletStatus]);
 
-  const gotCardWalletStatus = (data?: CardAddToWalletStatusEvent) => {
+  const gotCardWalletStatus = (data?: UNCardAddToWalletStatusEvent) => {
     if (data != null) {
       setAddToWalletStatus(data.status);
     }
@@ -65,8 +66,8 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
         presentationMode={PresentationMode.CoverInjectedHeight}
         isScrollable={false}
       />
-      {addToWalletStatus === CardAddToWalletStatus.pending && <ActivityIndicator style={styles.loader} />}
-      {addToWalletStatus === CardAddToWalletStatus.readyToProvisioning && <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />}
+      {addToWalletStatus === UNCardAddToWalletStatus.pending && <ActivityIndicator style={styles.loader} />}
+      {addToWalletStatus === UNCardAddToWalletStatus.readyToProvisioning && <UnitAddToWalletButtonView style={styles.addToWalletButton} onAddToWalletClicked={handleAddToWalletClicked} />}
     </>
   );
 };

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -9,12 +9,12 @@ import { useListenerToBus } from '../../hooks/listenerToBus';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { getCardParams, getCardScript, injectRefreshEventIfNeeded, launchStartCardProvisioning } from './UNCardComponent.utils';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
-import type { ResponseUnitOnLoadEvent, UNCardData } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent, UNCardData } from '../../sharedTypes';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { launchGetWallets } from './UNCardComponent.utils';
 import type { NativeModules } from 'react-native';
 import type { UNWallet } from 'src/sharedTypes/wallet.types';
-import { CardAddToWalletErrors, CardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../messages/nativeMessages/cardMessage';
+import { CardAddToWalletErrors, UNCardAddToWalletStatusEvent, CardGetAddToWalletStatusEvent, CardNativeMessage, CardStartPushProvisioningEvent } from '../../messages/nativeMessages/cardMessage';
 import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
 export interface UNCardComponentProps {
   // inputs
@@ -26,7 +26,7 @@ export interface UNCardComponentProps {
   hideSensitiveDataButton?: boolean;
 
   // events
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void
   onStatusChanged?: (card: UNCardData) => void;
   pushProvisioningModule?: typeof NativeModules;
 }
@@ -83,7 +83,7 @@ export const UNCardComponent = (props: UNCardComponentProps) => {
         setHeight((message.details as HeightEvent).height);
         break;
       case UnitMessage.UNIT_ON_LOAD:
-        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        props.onLoad && props.onLoad(message.details as UNResponseUnitOnLoadEvent);
         break;
     }
   };
@@ -98,7 +98,7 @@ export const UNCardComponent = (props: UNCardComponentProps) => {
 
       walletRef.current = walletResponse;
 
-      const walletStatus: CardAddToWalletStatusEvent = { status: walletResponse.status };
+      const walletStatus: UNCardAddToWalletStatusEvent = { status: walletResponse.status };
       EventBus.Instance.event(CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, walletStatus);
     } catch (error) {
       console.error(error);

package/src/messages/nativeMessages/cardMessage.ts

@@ -1,26 +1,16 @@
+import type { UNCardAddToWalletStatus } from '../../sharedTypes/wallet.types';
+
 export enum CardNativeMessage {
   CARD_GET_ADD_TO_WALLET_STATUS = 'cardGetAddToWalletStatus',
   CARD_UPDATE_ADD_TO_WALLET_STATUS = 'cardUpdateAddToWalletStatus',
   CARD_START_PUSH_PROVISIONING = 'cardStartPushProvisioning'
 }
 
-export enum CardAddToWalletStatus {
-  pending,
-  readyToProvisioning = 'ReadyToProvision',
-  addedToWallet = 'AlreadyProvisioned',
-  iosProvisionedInCurrentDevice = 'ProvisionedInCurrentDevice',
-  iosProvisionedInPairedDevice = 'ProvisionedInPairedDevice',
-  androidNotInstalled = 'NotInstalled',
-  androidWalletSetupNotCompleted = 'WalletSetupNotCompleted',
-  androidWalletAppUpdateAvailable = 'WalletAppUpdateAvailable'
-
-}
-
 export enum CardAddToWalletErrors {
   closedNativeWalletScreen = 'VP_ERROR_302'
 }
-export interface CardAddToWalletStatusEvent {
-  status: CardAddToWalletStatus
+export interface UNCardAddToWalletStatusEvent {
+  status: UNCardAddToWalletStatus
 }
 
 export interface CardGetAddToWalletStatusEvent {
@@ -32,6 +22,6 @@ export interface CardStartPushProvisioningEvent {
 }
 
 export type CardNativeEvent =
-  | CardAddToWalletStatusEvent
+  | UNCardAddToWalletStatusEvent
   | CardGetAddToWalletStatusEvent
   | CardStartPushProvisioningEvent

package/src/messages/webMessages/accountMessage.ts

@@ -0,0 +1,12 @@
+import type { UNAccountData } from '../../sharedTypes';
+
+export enum AccountMessage {
+  UNIT_ACCOUNT_CHANGED = 'unitAccountChanged'
+}
+
+export interface AccountChangedEvent {
+  account: UNAccountData;
+}
+
+export type AccountEvent =
+  | AccountChangedEvent

package/src/messages/webMessages/index.ts

@@ -5,12 +5,14 @@ import type { CardEvent, CardMessage } from './cardMessage';
 import type { PageEvent, PageMessage } from './pageMessage';
 import type { PaymentMessage } from './paymentsMessage';
 import type { UnitEvent, UnitMessage } from './unitMessages';
+import type { AccountEvent, AccountMessage } from './accountMessage';
 
 export type WebViewMessageType =
   | PageMessage
   | CardMessage
   | UnitMessage
   | PaymentMessage
+  | AccountMessage
 
 type WebViewEvent =
   | PageEvent
@@ -19,6 +21,7 @@ type WebViewEvent =
   | BookPaymentEvent
   | PaymentMessage
   | ACHEvent
+  | AccountEvent
 
 export interface WebViewMessage {
   type: WebViewMessageType,

package/src/messages/webMessages/unitMessages.ts

@@ -1,4 +1,4 @@
-import type { ResponseUnitOnLoadEvent } from '../../sharedTypes';
+import type { UNResponseUnitOnLoadEvent } from '../../sharedTypes';
 
 export enum UnitMessage {
   UNIT_REQUEST_RENDERING = 'unitRequestRendering',
@@ -63,7 +63,7 @@ export type UnitEvent =
   | RequestRenderingEvent
   | RequestRefreshEvent
   | RequestOpenLinkEvent
-  | ResponseUnitOnLoadEvent
+  | UNResponseUnitOnLoadEvent
   | RequestDownloadEvent
   | PlaidTokenCreatedEvent
   | RequestExternalSdkEvent

package/src/scripts/html/bodyScript.ts

@@ -2,6 +2,7 @@ import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { AccountMessage } from '../../messages/webMessages/accountMessage';
 
 export const POST_MESSAGE_TO_SDK = `
   const postMessageToSDK = (message) => {
@@ -62,7 +63,7 @@ export const LISTENERS = {
     window.addEventListener("${CardMessage.CARD_STATUS_CHANGED}", (e) => {
       const response = e.detail
       response.then((data) => {
-        postMessageToSDK({ type: "${CardMessage.CARD_STATUS_CHANGED}", details:  { card: JSON.stringify(data.data) }})
+        postMessageToSDK({ type: "${CardMessage.CARD_STATUS_CHANGED}", details:  { card: data.data }})
       }).catch((e) => {
         console.log(e)
       })
@@ -77,11 +78,22 @@ export const LISTENERS = {
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
       response.then((data) => {
-        postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+        postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: data.data }})
       }).catch((e) => {
         console.log(e)
       })
   });`
+  ,
+  unitAccountChanged: `
+    window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CHANGED}", (e) => {
+      const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${AccountMessage.UNIT_ACCOUNT_CHANGED}", details:  { account: data.data }})
+      }).catch((e) => {
+        console.log(e)
+      })
+  });
+  `,
 };
 
 export const DISPATCH_RENDERING_EVENT = `