react-native-unit-components 1.0.4 → 1.2.0

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -5,18 +5,21 @@ import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessag
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
 import EventBus from '../../helpers/EventBus';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { useListenerToBus } from '../../hooks/listenerToBus';
 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,13 +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: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToBus({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useEffect(() => {
     injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
@@ -47,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) => {
@@ -26,14 +28,21 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
     injectRefreshEventIfNeeded(webRef.current, data);
   };
 
-  useListenerToBus([
-    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
-  ]);
+  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
 
   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,11 +3,12 @@ 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 { BookPaymentEvent, BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
-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';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 
 export interface UNBookPaymentComponentProps {
   accountId: string;
@@ -17,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) => {
@@ -28,11 +29,11 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
-      case BookPaymentMessage.PAYMENT_CREATED:
+      case PaymentMessage.PAYMENT_CREATED:
         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/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -1,7 +1,7 @@
 import { LISTENERS } from './../../scripts/html/bodyScript';
 import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
 
-import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 
 export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
   return `
@@ -16,10 +16,10 @@ export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
 
 export const getBookPaymentScript = () => {
   return `
-    window.addEventListener("${BookPaymentMessage.PAYMENT_CREATED}", (e) => {
+    window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
       const response = e.detail
         response.then((data) => {
-          postMessageToSDK({ type: "${BookPaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+          postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
         }).catch((e) => {
           console.log(e)
         })

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 {
   /*
@@ -109,10 +116,8 @@ export const UNBottomSheetComponent = () => {
     }
   }, [waitForLoadingNewComponent, newHeightMessage]);
 
-  useListenerToBus([
-    { busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: handleRequestRendering },
-    { busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow }
-  ]);
+  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_RENDERING, action: handleRequestRendering });
+  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
   const setNewHeight = (message: WebViewMessage) => {
     if (!requestRenderingEvent) return;
@@ -172,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,15 +44,13 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
     }
   }, [webRef.current, renderingRequest, addToWalletStatus]);
 
-  const gotCardWalletStatus = (data?: CardAddToWalletStatusEvent) => {
+  const gotCardWalletStatus = (data?: UNCardAddToWalletStatusEvent) => {
     if (data != null) {
       setAddToWalletStatus(data.status);
     }
   };
 
-  useListenerToBus([
-    { busEventKey: CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, action: gotCardWalletStatus },
-  ]);
+  useListenerToBus({ busEventKey: CardNativeMessage.CARD_UPDATE_ADD_TO_WALLET_STATUS, action: gotCardWalletStatus });
 
   const handleAddToWalletClicked = () => {
     if (!cardId) return;
@@ -67,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,26 +9,35 @@ 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
   cardId: string;
   customerToken: string;
   theme?: string;
+  hideActionsMenuButton?: boolean;
+  hideCardTitle?: boolean;
+  hideSensitiveDataButton?: boolean;
+
+  // events
+  onLoad?: (response: UNResponseUnitOnLoadEvent) => void
   onStatusChanged?: (card: UNCardData) => void;
   pushProvisioningModule?: typeof NativeModules;
-  onLoad?: (response: ResponseUnitOnLoadEvent) => void
 }
 
 export const UNCardComponent = (props: UNCardComponentProps) => {
   const [height, setHeight] = useState(0);
   const windowWidth = Dimensions.get('window').width;
+
   const walletRef = useRef<UNWallet | null>(null);
+  // walletRef can be changed to a state. (After the change of the listener hook)
+  // TODO: walletState and checks it works. =)
 
   const webRef = useRef<WebView>(null);
 
@@ -52,12 +61,10 @@ export const UNCardComponent = (props: UNCardComponentProps) => {
     getWallets();
   };
 
-  useListenerToBus([
-    { busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged },
-    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
-    { busEventKey: CardNativeMessage.CARD_START_PUSH_PROVISIONING, action: startPushProvisioning },
-    { busEventKey: CardNativeMessage.CARD_GET_ADD_TO_WALLET_STATUS, action: getAddToWalletStatus }
-  ]);
+  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToBus({ busEventKey: CardMessage.CARD_STATUS_CHANGED, action: cardStatusChanged });
+  useListenerToBus({ busEventKey: CardNativeMessage.CARD_START_PUSH_PROVISIONING, action: startPushProvisioning });
+  useListenerToBus({ busEventKey: CardNativeMessage.CARD_GET_ADD_TO_WALLET_STATUS, action: getAddToWalletStatus });
 
   const handleMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
@@ -76,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;
     }
   };
@@ -91,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/components/UNCardComponent/UNCardComponent.utils.ts

@@ -13,6 +13,9 @@ export const getCardParams = (props: UNCardComponentProps) => {
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
     enable-mobile-wallet="${!!props.pushProvisioningModule}"
+    hide-actions-menu-button="${props.hideActionsMenuButton || false}"
+    hide-card-title="${props.hideCardTitle || false}"
+    hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
   `;
 };
 

package/src/components/UNCardComponent/networking/requests/UNWalletPayloadRequest.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { APIHeaders, UNIT_SECURE_URL } from '../common/UNNetworkConstants';
-import { UNEnvironment, UnitSDK } from 'react-native-unit-components';
+import { UnitSDK, UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
 
 export const getMobileWalletPayload = async (customerToken: string, cardId: string, env: UNEnvironment) => {
   const headers = {

package/src/components/index.ts

@@ -3,3 +3,5 @@ export * from './UNBottomSheetComponent/UNBottomSheetComponent';
 export * from './UNBookPaymentComponent/UNBookPaymentComponent';
 export * from './UNActivityComponent/UNActivityComponent';
 export * from './UNAccountComponent/UNAccountComponent';
+export * from './UNACHDebitComponent/UNACHDebitComponent';
+export * from './UNACHCreditComponent/UNACHCreditComponent';

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -61,8 +61,6 @@ const BottomSheet = (props: BottomSheetProps) => {
         collapse();
       } else if (!props.expandToMaxHeightEnabled) {
         contentHeight && setToContentHeight(contentHeight);
-      } else if (dy < 0) {
-        expand();
       } else {
         expand();
       }
@@ -70,10 +68,9 @@ const BottomSheet = (props: BottomSheetProps) => {
   });
 
   useEffect(() => {
-    if (!isAppActive && isPanelOpened) {
-      setContentHeight(0);
-      _dismiss(false);
-    }
+    // on App Active State change reset the bottom-sheet
+    setContentHeight(0);
+    _dismiss(false);
   }, [isAppActive]);
 
   useEffect(() => {
@@ -150,7 +147,6 @@ const BottomSheet = (props: BottomSheetProps) => {
       _dismiss();
       return;
     }
-
     contentHeight && setToContentHeight(contentHeight);
   };
 

package/src/hooks/listenerToBus.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import EventBus, { BusEventKey } from '../helpers/EventBus';
 
 type Listener = {
@@ -7,17 +7,22 @@ type Listener = {
   action: (data: any) => void
 }
 
-export const useListenerToBus = (listeners: Listener[]) => {
+export const useListenerToBus = (listener: Listener) => {
+  const [eventData, setEventData] = useState<any>();
+  const callback = (eventData: any) => setEventData(eventData);
+
   useEffect(() => {
-    {
-      listeners.map((listener: {busEventKey: BusEventKey, action: (data: any) => void}) => {
-        EventBus.Instance.addListener(listener.busEventKey, listener.action);
-      });
-    }
+    // listen to callback
+    EventBus.Instance.addListener(listener.busEventKey, callback);
+
+    // Remove listener on UnMount.
     return (() => {
-      listeners.map((listener: {busEventKey: BusEventKey, action: (data: any) => void}) => {
-        EventBus.Instance.removeListener(listener.action);
-      });
+      EventBus.Instance.removeListener(callback);
     });
   }, []);
+
+  // Call to action when event is changed. (To be updated with the current props).
+  useEffect(() => {
+    eventData && listener.action(eventData);
+  }, [eventData]);
 };

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/achCreditMessage.ts

@@ -0,0 +1,8 @@
+import type { UNACHData } from '../../sharedTypes';
+
+export interface PaymentCreatedEvent {
+  data: UNACHData
+}
+
+export type ACHEvent =
+| PaymentCreatedEvent

package/src/messages/webMessages/bookPaymentMessage.ts

@@ -1,9 +1,5 @@
 import type { UNBookPaymentData } from '../../sharedTypes';
 
-export enum BookPaymentMessage {
-  PAYMENT_CREATED = 'unitPaymentCreated'
-}
-
 export interface PaymentCreatedEvent {
   data: UNBookPaymentData
 }

package/src/messages/webMessages/index.ts

@@ -1,19 +1,27 @@
-import type { BookPaymentEvent, BookPaymentMessage } from './bookPaymentMessage';
+import type { ACHEvent } from './achCreditMessage';
+import type { BookPaymentEvent } from './bookPaymentMessage';
+
 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
-  | BookPaymentMessage
+  | PaymentMessage
+  | AccountMessage
 
 type WebViewEvent =
   | PageEvent
   | UnitEvent
   | CardEvent
   | BookPaymentEvent
+  | PaymentMessage
+  | ACHEvent
+  | AccountEvent
 
 export interface WebViewMessage {
   type: WebViewMessageType,

package/src/messages/webMessages/paymentsMessage.ts

@@ -0,0 +1,3 @@
+export enum PaymentMessage {
+  PAYMENT_CREATED = 'unitPaymentCreated'
+}

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',
@@ -6,7 +6,11 @@ export enum UnitMessage {
   UNIT_REQUEST_CLOSE_FLOW = 'unitRequestCloseFlow',
   UNIT_REQUEST_OPEN_LINK = 'unitRequestOpenLink',
   UNIT_ON_LOAD = 'unitOnLoad',
-  UNIT_REQUEST_DOWNLOAD = 'unitRequestDownload'
+  UNIT_REQUEST_DOWNLOAD = 'unitRequestDownload',
+  UNIT_PLAID_TOKEN_CREATED = 'unitPlaidLinkTokenCreated',
+  UNIT_REQUEST_EXTERNAL_SDK = 'unitRequestExternalSdk',
+  UNIT_PLAID_RESPONSE = 'unitPlaidResponse'
+
 }
 export interface RequestRenderingEvent {
   data: RequestRenderingEventData
@@ -37,9 +41,29 @@ export interface RequestDownloadEvent {
   fileName: string
 }
 
+export interface PlaidTokenCreatedEvent {
+  linkToken: PlaidLinkTokenData
+}
+
+export interface PlaidLinkTokenData {
+  type: string,
+  attributes: PlaidLinkTokenAttributes
+}
+
+interface PlaidLinkTokenAttributes {
+  linkToken: string,
+  expiration: string
+}
+
+export interface RequestExternalSdkEvent {
+  type: string
+}
+
 export type UnitEvent =
   | RequestRenderingEvent
   | RequestRefreshEvent
   | RequestOpenLinkEvent
-  | ResponseUnitOnLoadEvent
+  | UNResponseUnitOnLoadEvent
   | RequestDownloadEvent
+  | PlaidTokenCreatedEvent
+  | RequestExternalSdkEvent