react-native-unit-components 1.9.1 → 1.11.0

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,39 +1,63 @@
-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 { useListenerToBus } from '../../hooks/listenerToBus';
+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';
 import { WebComponent } from '../../webComponent/WebComponent';
-import { getActivityParams, getActivityScript, injectFiltersChanged, injectRefreshEventIfNeeded } from './UNActivityComponent.utils';
+import {
+  getActivityParams,
+  getActivityScript,
+  injectFiltersChanged,
+  injectRefreshEventIfNeeded,
+} from './UNActivityComponent.utils';
 import type WebView from 'react-native-webview';
-import EventBus from '../../helpers/EventBus';
 import type { UNActivityOnLoadData } from '../../types/shared/activity.types';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
-import { BottomSheetRenderingType, type BottomSheetSlotData, type SlotRendering } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetRenderingType,
+} 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';
+import type { UNActivityComponentPaginationType } from '../../types/shared';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+
 export interface UNActivityComponentProps {
   // inputs
   customerToken: string;
   accountId?: string;
-  queryFilter?: string
+  queryFilter?: string;
 
   // ui
   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>();
 
@@ -41,12 +65,26 @@ 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);
   };
 
-  useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, action: dispatchActivityFiltersChanged });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useListenerToEvent({
+    busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
+    action: dispatchActivityFiltersChanged,
+  });
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -58,13 +96,13 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
       return;
     }
 
-    if (RESPONSE_KEYS.authorization in response && RESPONSE_KEYS.transactions in response) {
+    if (RESPONSE_KEYS.authorizations in response && RESPONSE_KEYS.transactions in response) {
       // ActivityOnLoadResponse;
       const activityOnLoad: UNOnLoadResponseData<UNActivityOnLoadData> = {
         data: {
-          [RESPONSE_KEYS.authorization]: response[RESPONSE_KEYS.authorization].data,
-          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data
-        }
+          [RESPONSE_KEYS.authorizations]: response[RESPONSE_KEYS.authorizations].data,
+          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data,
+        },
       };
       props.onLoad(activityOnLoad);
       return;
@@ -80,15 +118,15 @@ const UNActivityComponent = (props: UNActivityComponentProps) => {
         const slotData: BottomSheetSlotData = {
           componentName: WebComponentType.activity,
           componentResourceId: props.accountId,
-          requestRenderingEvent: message.details as RequestRenderingEvent
+          requestRenderingEvent: message.details as RequestRenderingEvent,
         };
 
-        const event = {
+        const data = {
           type: BottomSheetRenderingType.Slot,
-          data: slotData
+          data: slotData,
         } as SlotRendering;
 
-        EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
         break;
       }
       case UnitMessage.UNIT_ON_LOAD:
@@ -127,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

@@ -7,12 +7,17 @@ import { WebComponentType } from '../../types/internal/webComponent.types';
 export const getActivityParams = (props: UNActivityComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const queryFilterParam = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
-
+  const paginationTypeParam = props.paginationType ? `pagination-type="${props.paginationType}"` : '';
+  const transactionsPerPageParam = props.transactionsPerPage ? `transactions-per-page="${props.transactionsPerPage}"` : '';
   return `
     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}
     style="height: 100%"
   `;
 };

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;