react-native-unit-components 1.0.3 → 1.1.0

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

@@ -0,0 +1,48 @@
+import { DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
+import type { UNACHDebitComponentProps } from './UNACHDebitComponent';
+
+import type WebView from 'react-native-webview';
+import type { LinkSuccess } from 'react-native-plaid-link-sdk';
+import { NativeModules } from 'react-native';
+const { RNAppInfoModule } = NativeModules;
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+
+export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    ${props.fee ? `fee="${props.fee}"` : ''}
+    style="height: 100%"
+  `;
+};
+
+export const getAndroidPackageName = async () => {
+  try {
+    const response = await RNAppInfoModule.getAppPackageName();
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getACHDebitScript = (androidPackageName?: string) => {
+  return `
+      window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
+        const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
+        }).catch((e) => {
+          console.log(e)
+        })
+      });
+    ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
+    ${LISTENERS.unitPaymentCreated}
+    ${DISPATCH_PLAID_RESPONSE}
+    `;
+};
+
+export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
+  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
+};

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -5,12 +5,12 @@ 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 { useListenerToBus } from '../../hooks/listenerToBus';
 
 export interface UNAccountComponentProps {
   accountId?: string;
@@ -36,9 +36,7 @@ export const UNAccountComponent = (props: UNAccountComponentProps) => {
     setRequestRefreshEvent(data);
   };
 
-  useListenerToBus([
-    { busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh },
-  ]);
+  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
 
   useEffect(() => {
     injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -26,9 +26,7 @@ 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) {

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 { 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;
@@ -28,7 +29,7 @@ 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:

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

@@ -109,10 +109,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;

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

@@ -49,9 +49,7 @@ export const UNAddToWalletBottomSheetItem = (props: UNAddToWalletBottomSheetItem
     }
   };
 
-  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;

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -17,18 +17,27 @@ import type { UNWallet } from 'src/sharedTypes/wallet.types';
 import { CardAddToWalletErrors, CardAddToWalletStatusEvent, 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: ResponseUnitOnLoadEvent) => 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;

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -6,12 +6,16 @@ import type { NativeModules } from 'react-native';
 import { getMobileWalletPayload } from './networking/requests/UNWalletPayloadRequest';
 import { UNWallet, UNWalletCode, UNWalletName } from '../../../src/sharedTypes/wallet.types';
 import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   return `
     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}"
   `;
 };
 
@@ -27,7 +31,10 @@ export const injectRefreshEventIfNeeded = (currentWeb: WebView | null, requestRe
 
 export const launchGetWallets = async (customerToken: string, cardId: string, pushProvisioningModule: typeof NativeModules) => {
   try {
-    const encryptedPayload = await getMobileWalletPayload(customerToken, cardId);
+    const env = UnitSDK.getEnv();
+    if (!env) return null;
+
+    const encryptedPayload = await getMobileWalletPayload(customerToken, cardId, env);
     if (!encryptedPayload) return null;
 
     const walletsResponse = await pushProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));

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

@@ -1,10 +1,8 @@
 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';
 
-const env = UnitSDK.getEnv();
-
-export const getMobileWalletPayload = async (customerToken: string, cardId: string) => {
+export const getMobileWalletPayload = async (customerToken: string, cardId: string, env: UNEnvironment) => {
   const headers = {
     'Content-Type': APIHeaders.CONTENT_TYPE,
     'Authorization': `Bearer ${customerToken}`,

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/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,24 @@
-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';
 
 export type WebViewMessageType =
   | PageMessage
   | CardMessage
   | UnitMessage
-  | BookPaymentMessage
+  | PaymentMessage
 
 type WebViewEvent =
   | PageEvent
   | UnitEvent
   | CardEvent
   | BookPaymentEvent
+  | PaymentMessage
+  | ACHEvent
 
 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

@@ -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
   | RequestDownloadEvent
+  | PlaidTokenCreatedEvent
+  | RequestExternalSdkEvent

package/src/scripts/html/bodyScript.ts

@@ -1,3 +1,4 @@
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -66,7 +67,21 @@ export const LISTENERS = {
         console.log(e)
       })
   });
-  `
+  `,
+  unitRequestExternalSdk: `
+  window.addEventListener("${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", (e) => {
+    postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
+  });
+`,
+  unitPaymentCreated:`
+  window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
+    const response = e.detail
+      response.then((data) => {
+        postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+      }).catch((e) => {
+        console.log(e)
+      })
+  });`
 };
 
 export const DISPATCH_RENDERING_EVENT = `
@@ -82,3 +97,10 @@ export const DISPATCH_REQUEST_REFRESH = `
     window.dispatchEvent(event)
     }
 `;
+
+export const DISPATCH_PLAID_RESPONSE = `
+    const dispatchPlaidEvent = (details) => {
+    const event = new CustomEvent("${UnitMessage.UNIT_PLAID_RESPONSE}",{ detail: details })
+    window.dispatchEvent(event)
+    }
+`;

package/src/sharedTypes/achCredit.types.ts

@@ -0,0 +1,32 @@
+import type { AchCounterparty, CounterpartyVerificationMethod, PaymentStatus } from './payments.types';
+import type { Tags, Relationship } from './types';
+
+export type UNACHData = {
+  type: 'achPayment',
+  id: string,
+  attributes: {
+    createdAt: string | Date,
+    status: PaymentStatus,
+    settlementDate?: Date,
+    reason: string,
+    direction: 'Debit' | 'Credit',
+    description: string,
+    transactionSummaryOverride?: string,
+    amount: string,
+    tags: Tags,
+    addenda?: string
+		counterparty: AchCounterparty
+		expectedCompletionDate?: Date
+		counterpartyVerificationMethod?:keyof typeof CounterpartyVerificationMethod
+		sameDay?: boolean
+  },
+  relationships: {
+    account: Relationship,
+    customer?: Relationship,
+    customers?: Relationship,
+    counterpartyAccount: Relationship,
+    counterpartyCustomer: Relationship,
+    transaction: Relationship,
+    recurringPayment: Relationship
+  }
+}

package/src/sharedTypes/bookPayment.types.ts

@@ -1,13 +1,12 @@
+import type { PaymentStatus } from './payments.types';
 import type { Tags, Relationship } from './types';
 
-type BookPaymentStatus = 'Sent' | 'Rejected'
-
 export type UNBookPaymentData = {
   type: 'bookPayment',
   id: string,
   attributes: {
     createdAt: string | Date,
-    status: BookPaymentStatus,
+    status: PaymentStatus,
     reason: string,
     direction: 'Debit' | 'Credit',
     description: string,

package/src/sharedTypes/index.ts

@@ -1,3 +1,5 @@
 export * from './bookPayment.types';
 export * from './card.types';
 export * from './onLoadResponse.types';
+export * from './achCredit.types';
+export * from './payments.types';

package/src/sharedTypes/payments.types.ts

@@ -0,0 +1,14 @@
+export type PaymentStatus = 'Sent' | 'Rejected'
+
+export type AchCounterparty = {
+	name: string
+	accountNumber: string
+	routingNumber: string
+	accountType: AccountType
+}
+
+type AccountType = 'Savings' | 'Checking'
+
+export enum CounterpartyVerificationMethod {
+	Plaid = 'Plaid',
+}

package/src/webComponent/WebComponent.tsx

@@ -31,6 +31,8 @@ export enum WebComponentType {
   activity = 'unit-elements-activity',
   slot = 'unit-elements-sdk-slot',
   account = 'unit-elements-account',
+  achDebitPayment = 'unit-elements-ach-debit-payment',
+  achCreditPayment = 'unit-elements-ach-credit-payment'
 }
 
 export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {
@@ -47,10 +49,8 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());
   };
 
-  useListenerToBus([
-    { busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript },
-    { busEventKey: SDKMessage.IS_SDK_INITIALIZED, action: updateInitializedParams },
-  ]);
+  useListenerToBus({ busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript });
+  useListenerToBus({ busEventKey: SDKMessage.IS_SDK_INITIALIZED, action: updateInitializedParams });
 
   useEffect(() => {
     if (!unitScript) {
@@ -62,7 +62,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     setSourceHtml(newHtml);
-  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme]);
+  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, props.script]);
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;

package/src/webComponent/html.ts

@@ -14,11 +14,11 @@ const htmlText = `
   <head lang="en">
     <title>Unit Web SDK Demo</title>
     <script>
-      window.UnitMobileSDK = true
-      window.UnitMobileSDKConfig = {
-        os: "${Platform.OS}",
-        walletName: "${Platform.OS === 'ios' ? 'Apple' : 'Google'}"
-      }
+    window.UnitMobileSDK = true
+    window.UnitMobileSDKConfig = {
+      os: "${Platform.OS}",
+      walletName: "${Platform.OS === 'ios' ? 'Apple' : 'Google'}",
+    }
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
   </html>
@@ -45,6 +45,8 @@ const htmlText = `
 
       ${LISTENERS.cardStatusChange}
 
+      ${LISTENERS.unitRequestExternalSdk}
+
       ${DISPATCH_RENDERING_EVENT}
 
       ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}