react-native-unit-components 1.3.0 → 1.4.0

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -7,20 +7,27 @@ import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { getActivityParams, getActivityScript, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
+import { getActivityParams, getActivityScript, injectFiltersChanged, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
 import type { BottomSheetSlotData } from '../UNBottomSheetComponent/UNBottomSheetComponent';
 import EventBus from '../../helpers/EventBus';
 import type { UNActivityOnLoadData } from '../../sharedTypes/activity.types';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
+  // inputs
   accountId: string;
   customerToken: string;
+  queryFilter?: string
+
+  // ui
   theme?: string;
+  hideFilterButton?: boolean;
+
+  // event
   onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
-  queryFilter?: string
 }
 
 export const UNActivityComponent = (props: UNActivityComponentProps) => {
@@ -31,7 +38,12 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
     injectRefreshEventIfNeeded(webRef.current, data);
   };
 
+  const dispatchActivityFiltersChanged = (query: string) => {
+    injectFiltersChanged(webRef.current, query);
+  };
+
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToBus({ busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, action: dispatchActivityFiltersChanged});
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {

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

@@ -9,6 +9,7 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    hide-filter-button="${props.hideFilterButton || false}"
     ${queryFilterParam}
     style="height: 100%"
   `;
@@ -23,3 +24,7 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
     currentWeb?.injectJavaScript(`dispatchRefreshEvent('${JSON.stringify(requestRefreshEvent)}')`);
   }
 };
+
+export const injectFiltersChanged = (currentWeb: WebView | null, query: string) => {
+  currentWeb?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
+};

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -45,6 +45,7 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     console.error('On Load Error: unexpected response type');
     return;
   };
+
   const handleWebViewMessage = (message: WebViewMessage) => {
     if (!message || !message.details) return;
 

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -24,6 +24,7 @@ import { getAccountActionType } from '../UNAccountComponent/UNAccountComponent.u
 import { AccountAction } from '../UNAccountComponent/UNAccountComponent';
 import type { AccountChangedEvent } from '../../messages/webMessages/accountMessage';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
+import { ActivityFiltersChangedEvent, ActivityMessage } from '../../messages/webMessages/activityMessage';
 
 export enum ScrollState {
   /*
@@ -183,6 +184,9 @@ export const UNBottomSheetComponent = () => {
       case AccountMessage.UNIT_ACCOUNT_CHANGED:
         EventBus.Instance.event(AccountMessage.UNIT_ACCOUNT_CHANGED, (message.details as AccountChangedEvent).account);
         break;
+      case ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED:
+        EventBus.Instance.event(ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, (message.details as ActivityFiltersChangedEvent));
+        break;
       case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
         handleCloseFlow();
         break;

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -21,6 +21,8 @@ export interface UNCardComponentProps {
   // inputs
   cardId: string;
   customerToken: string;
+
+  // ui
   theme?: string;
   hideActionsMenuButton?: boolean;
   hideCardTitle?: boolean;

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { View, NativeModules, Platform } from 'react-native';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { getCheckDepositParams, getCheckDepositScript } from './UNCheckDepositComponent.utils';
+import { CheckMessage } from '../../messages/webMessages/checkMessage';
+import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
+import type { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../sharedTypes';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+
+const { Camera } = NativeModules;
+
+export interface UNCheckDepositComponentProps {
+  accountId: string;
+  fee: number;
+  customerToken: string;
+  theme?: string;
+  onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
+  onDepositCreated?: (checkData: UNCheckDepositData) => void
+  onRestartRequest?: (checkData: UNCheckDepositData) => void
+}
+
+export const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  useEffect(() => {
+    const requestCameraAccess = async () => {
+      try {
+        await Camera.requestAccess();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        console.error(error);
+      }
+    };
+
+    if (Platform.OS == 'ios') {
+      requestCameraAccess();
+    }
+  }, []);
+
+  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) {
+      // AccountOnLoadResponse;
+      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<UNAccountData>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case CheckMessage.CHECK_DEPOSIT_CREATED:
+        props.onDepositCreated && props.onDepositCreated(message.details as UNCheckDepositData);
+        break;
+      case CheckMessage.CHECK_DEPOSIT_RESTART_REQUEST:
+        props.onRestartRequest && props.onRestartRequest(message.details as UNCheckDepositData);
+        break;
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+    }
+  };
+
+  const renderBookPaymentWebView = () => {
+    return (
+      <WebComponent
+        type={WebComponentType.checkDeposit}
+        presentationMode={presentationMode}
+        params={getCheckDepositParams(props)}
+        script={getCheckDepositScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        theme={props.theme}
+        isScrollable={true}
+      />
+    );
+  };
+
+  if (presentationMode === PresentationMode.Inherit) {
+    return renderBookPaymentWebView();
+  }
+
+  return (
+    <View style={{ height: height }}>
+      {renderBookPaymentWebView()}
+    </View>
+  );
+};

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.utils.ts

@@ -0,0 +1,40 @@
+import { CheckMessage } from '../../messages/webMessages/checkMessage';
+import type { UNCheckDepositComponentProps } from './UNCheckDepositComponent';
+
+export const getCheckDepositParams = (props: UNCheckDepositComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    fee="${props.fee}"
+    customer-token="${props.customerToken}"
+  `;
+};
+
+const CHECK_DEPOSIT_LISTENERS = {
+  paymentCreated: `
+    window.addEventListener("${CheckMessage.CHECK_DEPOSIT_CREATED}", (e) => {
+      const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${CheckMessage.CHECK_DEPOSIT_CREATED}", details: data.data })
+        }).catch((e) => {
+          console.log(e)
+        })
+    });
+  `,
+  restartRequest: `
+    window.addEventListener("${CheckMessage.CHECK_DEPOSIT_RESTART_REQUEST}", (e) => {
+      const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${CheckMessage.CHECK_DEPOSIT_RESTART_REQUEST}", details: data.data })
+        }).catch((e) => {
+          console.log(e)
+        })
+    });
+  `
+};
+
+export const getCheckDepositScript = () => {
+  return `
+    ${CHECK_DEPOSIT_LISTENERS.paymentCreated}
+    ${CHECK_DEPOSIT_LISTENERS.restartRequest}
+  `;
+};

package/src/components/index.ts

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

package/src/hooks/listenerToBus.ts

@@ -23,6 +23,9 @@ export const useListenerToBus = (listener: Listener) => {
 
   // Call to action when event is changed. (To be updated with the current props).
   useEffect(() => {
-    eventData && listener.action(eventData);
+    if (eventData == null || eventData == undefined) {
+      return;
+    }
+    listener.action(eventData);
   }, [eventData]);
 };

package/src/messages/webMessages/activityMessage.ts

@@ -0,0 +1,8 @@
+export enum ActivityMessage {
+  UNIT_ACTIVITY_FILTERS_CHANGED = 'unitActivityFiltersChanged'
+}
+
+export type ActivityFiltersChangedEvent = string
+
+export type ActivityEvent =
+  | ActivityFiltersChangedEvent

package/src/messages/webMessages/checkMessage.ts

@@ -0,0 +1,14 @@
+import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
+
+export enum CheckMessage {
+  // check deposit
+    CHECK_DEPOSIT_CREATED = 'unitCheckDepositCreated',
+    CHECK_DEPOSIT_RESTART_REQUEST = 'unitCheckDepositRestartRequest'
+}
+
+export type CheckDepositCreatedEvent = UNCheckDepositData
+export type CheckDepositRestartRequestEvent = UNCheckDepositData
+
+export type CheckEvent =
+| CheckDepositCreatedEvent
+| CheckDepositRestartRequestEvent

package/src/messages/webMessages/index.ts

@@ -6,6 +6,8 @@ import type { PageEvent, PageMessage } from './pageMessage';
 import type { PaymentMessage } from './paymentsMessage';
 import type { UnitEvent, UnitMessage } from './unitMessages';
 import type { AccountEvent, AccountMessage } from './accountMessage';
+import type { CheckEvent, CheckMessage } from './checkMessage';
+import type { ActivityEvent, ActivityMessage } from './activityMessage';
 
 export type WebViewMessageType =
   | PageMessage
@@ -13,6 +15,8 @@ export type WebViewMessageType =
   | UnitMessage
   | PaymentMessage
   | AccountMessage
+  | CheckMessage
+  | ActivityMessage
 
 type WebViewEvent =
   | PageEvent
@@ -22,6 +26,8 @@ type WebViewEvent =
   | PaymentMessage
   | ACHEvent
   | AccountEvent
+  | CheckEvent
+  | ActivityEvent
 
 export interface WebViewMessage {
   type: WebViewMessageType,

package/src/scripts/html/bodyScript.ts

@@ -3,6 +3,7 @@ import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { AccountMessage } from '../../messages/webMessages/accountMessage';
+import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 
 export const POST_MESSAGE_TO_SDK = `
   const postMessageToSDK = (message) => {
@@ -84,7 +85,7 @@ export const LISTENERS = {
     postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
   });
 `,
-  unitPaymentCreated:`
+  unitPaymentCreated: `
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
       response.then((data) => {
@@ -104,6 +105,11 @@ export const LISTENERS = {
       })
   });
   `,
+  unitActivityFiltersChanged: `
+    window.addEventListener("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", (e) => {
+      postMessageToSDK({ type: "${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}", details: e.detail })
+    });
+  `
 };
 
 export const DISPATCH_RENDERING_EVENT = `
@@ -120,6 +126,13 @@ export const DISPATCH_REQUEST_REFRESH = `
     }
 `;
 
+export const DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT = `
+    const dispatchActivityFilterChangedEvent = (details) => {
+      const event = new CustomEvent("${ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED}",{ detail: details });
+      window.dispatchEvent(event);
+    }
+`;
+
 export const DISPATCH_PLAID_RESPONSE = `
     const dispatchPlaidEvent = (details) => {
     const event = new CustomEvent("${UnitMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
@@ -138,3 +151,9 @@ export const DISPATCH_REQUEST_CARD_ACTION = `
       document.querySelector("unit-elements-card").dispatchEvent(new CustomEvent("unitRequestCardAction", {detail: {action: action}}))
     }
 `;
+
+export const DISPATCH_REQUEST_ACCOUNT_ACTION = `
+    const dispatchRequestAccountAction = (action) => {
+      document.querySelector("unit-elements-account").dispatchEvent(new CustomEvent("unitRequestAccountAction", {detail: {action: action}}))
+    }
+`;

package/src/sharedTypes/account.types.ts

@@ -3,11 +3,11 @@ import type { UNRelationship, UNTags } from './types';
 export type UNAccountData = UNDepositAccount | UNBatchAccount | UNCreditAccount
 
 export type UNCounterpartyAccountData = {
-	id: string
-	attributes: {
-		name: string
-		tags?: {[key: string]: string}
-	}
+  id: string
+  attributes: {
+    name: string
+    tags?: { [key: string]: string }
+  }
 }
 
 enum UNAccountStatus {
@@ -90,7 +90,7 @@ export type UNBatchAccount = {
     fraudReason?: UNFraudReason
     closeReasonText?: string
     freezeReason?: string
-    tags?: {[key: string]: string}
+    tags?: { [key: string]: string }
   }
   relationships: {
     org: UNRelationship
@@ -111,7 +111,7 @@ export type UNCreditAccount = {
     available: number
     creditLimit: number
     currency: string
-    tags: {[key: string]: string}
+    tags: { [key: string]: string }
     status: UNAccountStatus
     closeReason?: UNCloseReason
     fraudReason?: UNFraudReason
@@ -123,3 +123,9 @@ export type UNCreditAccount = {
     org: UNRelationship
   }
 }
+
+export enum UNAccountMenuAction {
+  OpenAccountDetails = 'OpenAccountDetails',
+  OpenAccountStatements = 'OpenAccountStatements',
+  DownloadBankVerificationLetter = 'DownloadBankVerificationLetter',
+}

package/src/sharedTypes/checkDeposit.types.ts

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

package/src/sharedTypes/index.ts

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

package/src/webComponent/WebComponent.tsx

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

package/src/webComponent/html.ts

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