react-native-unit-components 1.10.0 → 1.12.0

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -8,15 +8,22 @@ import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
-import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  PlaidLinkTokenData,
+  PlaidTokenCreatedEvent,
+  RequestExternalSdkEvent,
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import * as AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { UNPlaidAccountFilter } from '../../types/shared';
+import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 
 export interface UNACHCreditComponentProps {
-  accountId: string;
+  accountId?: string;
   customerToken: string;
   theme?: string;
   language?: string;
@@ -24,8 +31,14 @@ export interface UNACHCreditComponentProps {
   fee?: number;
   withPlaid?: boolean;
   onPaymentCreated?: (data: UNACHData) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
   sameDay?: boolean;
+  plaidAccountFilters?: UNPlaidAccountFilter[];
+  plaidLinkCustomizationName?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
 }
 
 const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
@@ -61,7 +74,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         data: {
           [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
-        }
+        },
       };
       props.onLoad(achOnload);
       return;
@@ -75,6 +88,14 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
       case PaymentMessage.PAYMENT_CREATED: {
         const achCreditEvent = message.details as ACHEvent;
         props.onPaymentCreated && props.onPaymentCreated(achCreditEvent.data as UNACHData);
@@ -91,7 +112,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         }
         break;
       }
-      case UnitMessage.UNIT_PLAID_TOKEN_CREATED: {
+      case PlaidMessage.UNIT_PLAID_TOKEN_CREATED: {
         const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
         const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
         setLinkToken(linkTokenData.attributes.linkToken);
@@ -106,7 +127,9 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => { console.log(exit); }
+          onExit: exit => {
+            console.log(exit);
+          },
         }).catch(e => {
           console.error(e);
         });

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -4,14 +4,21 @@ import type { LinkSuccess } from 'react-native-plaid-link-sdk';
 import { DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
+  const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
+  const plaidLinkCustomizationNameParam = props.plaidLinkCustomizationName ? `plaid-link-customization-name="${props.plaidLinkCustomizationName}"` : '';
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
+    ${accountIdParam}
     customer-token="${props.customerToken}"
     with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
+    ${plaidAccountFiltersParam}
+    ${plaidLinkCustomizationNameParam}
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
 };
 
@@ -20,11 +27,15 @@ export const getACHCreditScript = (appPackageName?: string) => {
     ${LISTENERS.unitPlaidTokenCreated}
     ${appPackageName && `window.UnitMobileSDKConfig.androidPackageName='${appPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${LISTENERS.requestRefresh}
+
   `;
 };
 
 export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
-  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -4,7 +4,12 @@ import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
-import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  PlaidLinkTokenData,
+  PlaidTokenCreatedEvent,
+  RequestExternalSdkEvent,
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
 import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
@@ -15,9 +20,11 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import * as AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { UNPlaidAccountFilter } from '../../types/shared';
+import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 
 export interface UNACHDebitComponentProps {
-  accountId: string;
+  accountId?: string;
   customerToken: string;
   theme?: string;
   language?: string;
@@ -25,7 +32,13 @@ export interface UNACHDebitComponentProps {
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
   sameDay?: boolean;
+  plaidAccountFilters?: UNPlaidAccountFilter[];
+  plaidLinkCustomizationName?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
 }
 
 const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
@@ -61,7 +74,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         data: {
           [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
-        }
+        },
       };
       props.onLoad(achOnload);
       return;
@@ -75,6 +88,14 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
       case PaymentMessage.PAYMENT_CREATED: {
         const achDebitEvent = message.details as ACHEvent;
         props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data as UNACHData);
@@ -91,7 +112,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         }
         break;
       }
-      case UnitMessage.UNIT_PLAID_TOKEN_CREATED: {
+      case PlaidMessage.UNIT_PLAID_TOKEN_CREATED: {
         const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
         const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
         setLinkToken(linkTokenData.attributes.linkToken);
@@ -106,7 +127,9 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => { console.log(exit); }
+          onExit: exit => {
+            console.log(exit);
+          },
         }).catch(e => {
           console.error(e);
         });

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

@@ -5,13 +5,20 @@ import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
+  const plaidAccountFiltersParam = props.plaidAccountFilters ? `plaid-account-filters="${props.plaidAccountFilters.join()}"` : '';
+  const plaidLinkCustomizationNameParam = props.plaidLinkCustomizationName ? `plaid-link-customization-name="${props.plaidLinkCustomizationName}"` : '';
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
+    ${accountIdParam}
     customer-token="${props.customerToken}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
     same-day="${props.sameDay ?? false}"
+    ${plaidAccountFiltersParam}
+    ${plaidLinkCustomizationNameParam}
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
 };
 
@@ -20,11 +27,14 @@ export const getACHDebitScript = (androidPackageName?: string) => {
     ${LISTENERS.unitPlaidTokenCreated}
     ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${DISPATCH_PLAID_RESPONSE}
+    ${LISTENERS.requestRefresh}
     `;
 };
 
 export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
-  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  const successObj = { data: { publicToken: success.publicToken, metadata: success.metadata } };
   currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
 };

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -1,8 +1,13 @@
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  RequestRefreshEvent,
+  RequestRenderingEvent,
+  UnitMessage,
+  UnitRequestRefreshEventTypes,
+} from '../../messages/webMessages/unitMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import {
@@ -20,34 +25,39 @@ import type { UNAccountMenuAction } from '../../types/shared';
 import {
   BottomSheetRenderingType,
   SlotRendering,
-  type BottomSheetSlotData,
 } from '../../types/internal/bottomSheet.types';
+import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { UNAccountMenuItem, UNCreditAccount } from '../../types/shared';
 
 export interface UNAccountComponentProps {
   // inputs
   accountId?: string;
   customerToken: string;
+  menuItems?: UNAccountMenuItem[];
 
   // ui
   theme?: string;
   language?: string;
   hideActionsMenuButton?: boolean;
   hideSelectionMenuButton?: boolean;
+  showLeftToSpend?: boolean;
 
   // events
   onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
   onAccountChanged?: (account: UNAccountData) => void;
+  onRequestLeftToSpendDetails?: (account: UNCreditAccount) => void;
 }
 
 export interface UNAccountRef {
   openActionsMenu: () => void;
   openAction: (action: UNAccountMenuAction) => void;
+  refresh: () => void;
 }
 
 export enum UNAccountAction {
@@ -59,17 +69,21 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
 
   const dispatch = useDispatch();
   const [height, setHeight] = useState(0);
-
-  const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
-
   const webRef = useRef<WebView>(null);
+  // currentAccountId is used to store the current account id for the "imperative" refresh event.
+  const accountIdRef = useRef<string | undefined>(props.accountId);
 
   const handleAccountChanged = (account: UNAccountData) => {
+    accountIdRef.current = account.id;
     props.onAccountChanged && props.onAccountChanged(account);
   };
 
   const requestRefresh = (data: RequestRefreshEvent) => {
-    setRequestRefreshEvent(data);
+    injectRefreshEventIfNeeded(webRef.current, data);
+  };
+
+  const handleRequestLeftToSpendDetails = (accountData: UNCreditAccount) => {
+    props.onRequestLeftToSpendDetails && props.onRequestLeftToSpendDetails(accountData);
   };
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
@@ -84,7 +98,12 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
 
     if (RESPONSE_KEYS.account in response) {
       // AccountsOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>);
+      const accountResponse = response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>;
+      props.onLoad(accountResponse);
+      // if accountId is not provided, set the first account as current
+      if (!props.accountId && accountResponse.data && accountResponse.data.length > 0) {
+        accountIdRef.current = accountResponse.data[0].id;
+      }
       return;
     }
 
@@ -94,10 +113,6 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
   useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
-  useEffect(() => {
-    injectRefreshEventIfNeeded(webRef.current, requestRefreshEvent);
-  }, [requestRefreshEvent]);
-
   useImperativeHandle(accountRef, () => ({
     openActionsMenu() {
       injectOpenActionsMenuScript(webRef.current);
@@ -105,6 +120,14 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     openAction(action: UNAccountMenuAction) {
       injectRequestAccountActionScript(webRef.current, action);
     },
+    refresh() {
+      requestRefresh({
+        type: UnitRequestRefreshEventTypes.REQUEST_REFRESH_EVENT,
+        refEvent: undefined,
+        dependencies: [WebComponentType.account.valueOf()],
+        resourceId: accountIdRef.current,
+      });
+    },
   }));
 
   const handleMessage = (message: WebViewMessage) => {
@@ -124,13 +147,16 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
-        
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+
         break;
       }
       case PageMessage.PAGE_HEIGHT:
         setHeight((message.details as HeightEvent).height);
         break;
+      case UnitMessage.UNIT_REQUEST_LEFT_TO_SPEND_DETAILS:
+        handleRequestLeftToSpendDetails(message.details as UNCreditAccount);
+        break;
     }
   };
 

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

@@ -1,25 +1,28 @@
 import { UNAccountAction, UNAccountComponentProps } from './UNAccountComponent';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { RequestRefreshEvent, RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
 import type WebView from 'react-native-webview';
-import type { UNAccountMenuAction } from 'src/types/shared';
+import type { UNAccountMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_REQUEST_REFRESH } from '../../scripts/html/bodyScript';
 
 export const getAccountParams = (props: UNAccountComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
     customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
+    show-left-to-spend="${props.showLeftToSpend || false}"
+    ${menuItemsParam}
   `;
 };
 
 export const getAccountScript = () => {
   return `
-    const dispatchRefreshEvent = (details) => {
-    const event = new CustomEvent("${UnitMessage.UNIT_REQUEST_REFRESH}",{ detail: JSON.parse(details) })
-    window.dispatchEvent(event)
-    }
+    ${DISPATCH_REQUEST_REFRESH}
+    ${LISTENERS.unitRequestLeftToSpendDetails}
   `;
 };
 

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,6 +1,11 @@
-import React, { useRef, useState } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
-import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import {
+  RequestRefreshEvent,
+  RequestRenderingEvent,
+  UnitMessage,
+  UnitRequestRefreshEventTypes,
+} from '../../messages/webMessages/unitMessages';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import type { UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
@@ -17,12 +22,11 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import {
   BottomSheetRenderingType,
-  type BottomSheetSlotData,
-  type SlotRendering,
 } from '../../types/internal/bottomSheet.types';
+import type { BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { withReduxStore } from '../../helpers/store/helpers';
+import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useDispatch } from 'react-redux';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
@@ -40,13 +44,19 @@ export interface UNActivityComponentProps {
   theme?: string;
   language?: string;
   hideFilterButton?: boolean;
+  hideTitle?: boolean;
+  hideBackToTop?: boolean;
   paginationType?: UNActivityComponentPaginationType;
   transactionsPerPage?: number;
   // event
   onLoad?: (response: UNOnLoadResponse<UNActivityOnLoadData>) => void;
 }
 
-const UNActivityComponent = (props: UNActivityComponentProps) => {
+export interface UNActivityRef {
+  refresh: () => void;
+}
+
+const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentProps>(function UNActivityComponent(props, activityRef) {
   const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
@@ -55,6 +65,17 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
     injectRefreshEventIfNeeded(webRef.current, data);
   };
 
+  useImperativeHandle(activityRef, () => ({
+    refresh() {
+      requestRefresh({
+        type: UnitRequestRefreshEventTypes.REQUEST_REFRESH_EVENT,
+        refEvent: undefined,
+        dependencies: [WebComponentType.activity.valueOf()],
+        resourceId: '',
+      });
+    },
+  }));
+
   const dispatchActivityFiltersChanged = (query: string) => {
     injectFiltersChanged(webRef.current, query);
   };
@@ -105,7 +126,7 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.START_FLOW, data }));
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
@@ -144,6 +165,6 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
       {renderActivityWebView()}
     </View>
   );
-};
+});
 
-export default withReduxStore<UNActivityComponentProps>(UNActivityComponent);
+export default withReduxStoreAndRefForwarding<UNActivityComponentProps, UNActivityRef>(UNActivityComponent);

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

@@ -13,6 +13,8 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
     customer-token="${props.customerToken}"
     ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
+    hide-back-to-top="${props.hideBackToTop || false}"
+    hide-title="${props.hideTitle || false}"
     ${queryFilterParam}
     ${paginationTypeParam}
     ${transactionsPerPageParam}

package/src/components/UNActivityComponent/index.ts

@@ -1 +1 @@
-export { default as UNActivityComponent, UNActivityComponentProps } from './UNActivityComponent';
+export { default as UNActivityComponent, UNActivityComponentProps, UNActivityRef } from './UNActivityComponent';

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -2,7 +2,13 @@ import React, { useState } from 'react';
 import { WebComponent } from '../../webComponent/WebComponent';
 import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { UNOnLoadResponse, UNBookPaymentData, UNError, UNAccountData, UNOnLoadResponseData } from '../../types/shared';
+import type {
+  UNOnLoadResponse,
+  UNBookPaymentData,
+  UNError,
+  UNAccountData,
+  UNOnLoadResponseData,
+} from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -14,20 +20,24 @@ import { withReduxStore } from '../../helpers/store/helpers';
 
 export interface UNBookPaymentComponentProps {
   //inputs
-  accountId: string;
+  accountId?: string;
   customerToken: string;
-  isSameCustomer: boolean;
-  counterPartyAccountId: string;
-  counterPartyName: string;
 
   // ui
   theme?: string;
   language?: string;
   isAutoFocus?: boolean;
+  isSameCustomer?: boolean;
+  counterPartyAccountId?: string;
+  counterPartyName?: string;
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
 
   // events
   onPaymentCreated?: (data: UNBookPaymentData) => void;
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
 }
 
 const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
@@ -58,6 +68,14 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     if (!message || !message.details) return;
 
     switch (message.type) {
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
       case PaymentMessage.PAYMENT_CREATED:
         props.onPaymentCreated && props.onPaymentCreated((message.details as BookPaymentEvent).data);
         break;

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -4,13 +4,18 @@ import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 
 export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  const counterpartyAccountIdParam = props.counterPartyAccountId ? `counterparty-account-id="${props.counterPartyAccountId}"` : '';
+  const counterpartyNameParam = props.counterPartyName ? `counterparty-name="${props.counterPartyName}"` : '';
   return `
-    account-id="${props.accountId}"
+    ${accountIdParam}
     customer-token="${props.customerToken}"
-    is-same-customer="${props.isSameCustomer}"
-    counterparty-account-id="${props.counterPartyAccountId}"
-    counterparty-name="${props.counterPartyName}"
+    is-same-customer="${props.isSameCustomer || false}"
+    ${counterpartyAccountIdParam}
+    ${counterpartyNameParam}
     is-auto-focus="${props.isAutoFocus || false}"
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
     style="height: 100%"
   `;
 };
@@ -27,5 +32,7 @@ export const getBookPaymentScript = () => {
     });
 
     ${LISTENERS.requestRefresh}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
   `;
 };

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

@@ -1 +1,20 @@
-export const BOTTOM_SHEET_MAX_PERCENTAGE_SIZE = 0.9;
+import { Dimensions, Platform, StatusBar } from 'react-native';
+
+export const BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE = 0.9;
+
+export const androidStatusBarHeight = StatusBar.currentHeight || 0;
+
+// For iOS - we are currently using hard coded height
+export const iosStatusBarHeight = Dimensions.get('window').height * 0.05;
+
+export const statusBarHeight = Platform.OS === 'android' ? androidStatusBarHeight : iosStatusBarHeight;
+// Android 10 and above - need to add status bar height to the window height to get the full screen height because Dimensions.get('window').height returns the height without the status bar
+// reference: https://github.com/facebook/react-native/issues/23693#issuecomment-1403560728
+export const isAndroid10AndAbove = Platform.OS === 'android' && Platform.Version >= 29;
+
+export const fullScreenHeight =
+  isAndroid10AndAbove ?
+    Dimensions.get('window').height + statusBarHeight
+    : Dimensions.get('window').height;
+
+export const overFullScreenHeight = Dimensions.get('window').height * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;