react-native-unit-components 1.10.0 → 1.11.0

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;

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -1,344 +1,234 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useRef, useState } from 'react';
-import type WebView from 'react-native-webview';
-import { WebComponent } from '../../webComponent/WebComponent';
-import { Dimensions, Linking, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
 import BottomSheet from '../../helpers/BottomSheet/BottomSheet';
-import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { RequestOpenLinkEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { CardMessage, CardActivatedEvent, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
-import type { WebViewMessage } from '../../messages/webMessages';
-import {
-  extractCardIdFromComponentParams,
-  getBottomSheetScript,
-  injectHtmlFullScreenHeight,
-  isAddToWalletByComponentParams,
-  isAddToWalletFromRequestRendering,
-  renderingBottomSheetRequest,
-  resetHtml,
-} from './UNBottomSheetComponent.utils';
+import { RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+
 import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
-import { UNAddToWalletBottomSheetItem } from './components/UNAddToWalletBottomSheetItem';
-import { getAccountActionType } from '../UNAccountComponent/UNAccountComponent.utils';
-import { UNAccountAction } from '../UNAccountComponent/UNAccountComponent';
-import type { AccountChangedEvent } from '../../messages/webMessages/accountMessage';
-import { AccountMessage } from '../../messages/webMessages/accountMessage';
-import { ActivityFiltersChangedEvent, ActivityMessage } from '../../messages/webMessages/activityMessage';
-import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from './UNBottomSheetComponent.constants';
+
 import {
+  BottomSheetNativeComponentType,
+  BottomSheetNativePlaceType,
   BottomSheetRenderingType,
   BottomSheetSlotData,
   NativeComponentData,
-  WebComponentData,
+  ScrollState,
 } from '../../types/internal/bottomSheet.types';
-import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import {
-  BottomSheetNativeMessage,
-  type StartBottomSheetFlowMessage,
+  BottomSheetNativeMessage, BottomSheetRenderingMessage,
 } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { fullScreenHeight, overFullScreenHeight } from './UNBottomSheetComponent.constants';
+import { RootState } from '../../store';
 
-export enum ScrollState {
-  /*
-    Web View ScrollState -
-      - Initialization:
-      'onTop': for a scrollable webView.
-        (onTop means that the webview is onTop of the BottomSheet and we need to recognize the scroll direction).
-        Then, it recognize the scroll direction and update the scroll state as needed.
-
-      -'unScrollable': for an unscrollable webView
-  */
-  onTop = 'onTop',
-  unScrollable = 'unScrollable',
-
-  /*
-    These are only for maintain the bottom sheet scrollState (not an initialize scroll state).
-    It relates to the current scroll state.
-    onlyWebView means that now the scroll is on webview (only).
-    onlyBottomSheet means that now the scroll is on bottomSheet (only).
-   */
-  onlyWebView = 'webViewScroll',
-  onlyBottomSheet = 'onlyBottomSheet',
-}
+import {
+  resetBottomSheetSlice,
+  setIsBottomSheetActive, setIsComponentLoading, setNativePlace,
+  setScrollState, setShouldEnableBottomSheetScroll,
+  setShouldShowBottomSheet,
+} from '../../slices/BottomSheetSlice';
+import UNBottomSheetSlotComponent from './components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent';
+import UNBottomSheetNativeComponent from './components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent';
+import { WebComponentType } from '../../types/internal/webComponent.types';
+import { extractCustomerTokenFromRequestRenderingEvent } from './UNBottomSheetComponent.utils';
 
 const UNBottomSheetComponent = () => {
-  const dispatch = useDispatch();
-  const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
-  const [height, setHeight] = useState(0);
 
-  const fullScreenHeight = Dimensions.get('window').height * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE;
+  const dispatch = useDispatch();
 
-  const [renderingType, setRenderingType] = useState<BottomSheetRenderingType>(BottomSheetRenderingType.Slot);
-  const [bottomSheetSlotData, setBottomSheetSlotData] = useState<BottomSheetSlotData>();
-  const [webComponentData, setWebComponentData] = useState<WebComponentData>();
+  const isBottomSheetActive = useSelector((state: RootState) => state.bottomSheet.isBottomSheetActive);
+  const isComponentLoading = useSelector((state: RootState) => state.bottomSheet.isComponentLoading);
+  const shouldShowBottomSheet = useSelector((state: RootState) => state.bottomSheet.shouldShowBottomSheet);
+  const nativePlace = useSelector((state: RootState) => state.bottomSheet.nativePlace);
+  const componentHeight = useSelector((state: RootState) => state.bottomSheet.componentHeight);
+  const scrollState = useSelector((state: RootState) => state.bottomSheet.scrollState);
+  const shouldEnableBottomSheetScroll = useSelector((state: RootState) => state.bottomSheet.shouldEnableBottomSheetScroll);
+  const [renderingType, setRenderingType] = useState<BottomSheetRenderingType>();
+  const [height, setHeight] = useState(0);
+  const [sliderMaxHeight, setSliderMaxHeight] = useState(overFullScreenHeight);
   const [nativeComponentData, setNativeComponentData] = useState<NativeComponentData>();
-
-  const [isAddToWallet, setIsAddToWallet] = useState(false);
-  const [scrollState, setScrollState] = useState<ScrollState>(ScrollState.onTop);
-
-  const [shouldShowComponent, setShouldShowComponent] = useState(false);
-  const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null);
+  const [requestRenderingEventData, setRequestRenderingEventData] = useState<RequestRenderingEvent>();
+  const [componentParams, setComponentParams] = useState<{
+    componentName?: WebComponentType,
+    componentResourceId?: string
+  }>();
+  const [currentBottomSheetRenderingMessage, setCurrentBottomSheetRenderingMessage] = useState<BottomSheetRenderingMessage>();
 
   const isAppActive = useAppStateListener();
-
   const styles = getStylesObject();
 
-  const webRef = useRef<WebView>(null);
-
-  const startFlow = (rendering: StartBottomSheetFlowMessage) => {
-    setRenderingType(rendering.type);
-    setIsBottomSheetActive(true);
-    setShouldShowComponent(true);
-    switch (rendering.type) {
-      case BottomSheetRenderingType.Slot:
-        setBottomSheetSlotData(rendering.data);
-        setIsAddToWallet(isAddToWalletFromRequestRendering(rendering.data));
-        setWebComponentData(undefined);
-        break;
-      case BottomSheetRenderingType.WebComponent:
-        setIsAddToWallet(isAddToWalletByComponentParams(rendering.data));
-        isAddToWallet && setHeight(fullScreenHeight);
-        setBottomSheetSlotData(undefined);
-        setWebComponentData(rendering.data);
-        break;
-      case BottomSheetRenderingType.NativeComponent:
-        setNativeComponentData(rendering.data);
-        break;
+  useEffect(() => {
+    // Check if the inner contained component is still loading or the bottom sheet should not be shown.
+    if (isComponentLoading || !shouldShowBottomSheet) {
+      // If so, hide the bottom sheet by setting the height to 0.
+      setHeight(0);
+    } else {
+      // If not, display the bottom sheet by calculating and setting the height based on the native place type.
+      setHeightFromNativePlace();
+      setSliderMaxHeightFromNativePlace();
     }
-  };
-
-  const handleCloseFlow = () => {
-    setIsBottomSheetActive(false);
-  };
+  }, [componentHeight, nativePlace, isComponentLoading, shouldShowBottomSheet]);
 
   useEffect(() => {
-    switch (renderingType) {
-      case BottomSheetRenderingType.Slot:
-        if (webRef.current && bottomSheetSlotData?.requestRenderingEvent) {
-          renderingBottomSheetRequest(webRef.current, bottomSheetSlotData.requestRenderingEvent);
+    if (!isBottomSheetActive) {
+      dispatch(resetBottomSheetSlice());
+      resetBottomSheetManagerState();
+    }
+  }, [isBottomSheetActive, dispatch]);
+
+  const setHeightFromNativePlace = () => {
+    switch (nativePlace) {
+      // In this case, we want the bottom sheet to fully contain the component,
+      // thus adjusting its height to the component height, up to the maximum of overFullScreenHeight.
+      case BottomSheetNativePlaceType.menu:
+        if (componentHeight) {
+          setHeight(componentHeight < overFullScreenHeight ? componentHeight : overFullScreenHeight);
         }
         break;
-      case BottomSheetRenderingType.WebComponent:
-        if (isAddToWallet) {
-          webRef.current?.injectJavaScript('document.activeElement && document.activeElement.blur();');
-          setHeight(fullScreenHeight);
-        }
+      // In the case of overFullScreen, set the height to the overFullScreenHeight.
+      case BottomSheetNativePlaceType.overFullScreen:
+        setHeight(overFullScreenHeight);
         break;
-      case BottomSheetRenderingType.NativeComponent:
+      // For modal native place type, set the height to the fullScreenHeight.
+      case BottomSheetNativePlaceType.modal:
+        setHeight(fullScreenHeight);
         break;
     }
-  }, [webRef, webComponentData, bottomSheetSlotData, nativeComponentData]);
-
-  useEffect(() => {
-    if (!isBottomSheetActive) {
-      webRef.current && resetHtml(webRef.current);
-      setHeight(0);
-      setShouldShowComponent(false);
-      setWebComponentData(undefined);
-      setBottomSheetSlotData(undefined);
-      setRenderingType(BottomSheetRenderingType.Slot);
-      setScrollState(ScrollState.onTop);
-      setIsAddToWallet(false);
-    }
-  }, [isBottomSheetActive]);
+  };
 
-  useEffect(() => {
-    if (shouldShowComponent) {
-      defineScrollState();
-      setNewHeight(newHeightMessage);
+  const setSliderMaxHeightFromNativePlace = () => {
+    if (nativePlace === BottomSheetNativePlaceType.modal) {
+      setSliderMaxHeight(fullScreenHeight);
+    } else {
+      setSliderMaxHeight(overFullScreenHeight);
     }
-  }, [shouldShowComponent, newHeightMessage, isAddToWallet]);
+  };
 
-  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.START_FLOW, action: startFlow });
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
+  const resetBottomSheetManagerState = () => {
+    setComponentParams(undefined);
+    setRequestRenderingEventData(undefined);
+    setNativeComponentData(undefined);
+    setRenderingType(undefined);
+    setHeight(0);
+    setSliderMaxHeight(overFullScreenHeight);
+  };
 
-  const defineScrollState = () => {
-    const scrollStateForSlot = () => {
-      if (!bottomSheetSlotData?.requestRenderingEvent) return;
-      switch (bottomSheetSlotData?.componentName) {
-        case WebComponentType.account: {
-          const accountActionType = getAccountActionType(bottomSheetSlotData.requestRenderingEvent);
-          setScrollState(
-            accountActionType === UNAccountAction.List ? ScrollState.onTop : ScrollState.unScrollable,
-          );
-          break;
-        }
-        case WebComponentType.card: {
-          if (isAddToWallet) {
-            setScrollState(ScrollState.unScrollable);
-          } else {
-            setScrollState(ScrollState.onTop);
-          }
-          break;
-        }
-        default: {
-          // default web component case
-          const nativePlace = bottomSheetSlotData.requestRenderingEvent.data.nativePlace;
-          if (nativePlace == 'overFullScreen') {
-            setScrollState(ScrollState.onTop);
-          } else {
-            setScrollState(ScrollState.unScrollable);
-          }
-        }
-      }
-    };
+  const requestRendering = (rendering: BottomSheetRenderingMessage) => {
+    if (isBottomSheetActive) {
+      dispatch(setShouldShowBottomSheet(false));
+    }
 
-    const scrollStateForWebComponent = () => {
-      if (isAddToWallet) {
-        setScrollState(ScrollState.unScrollable);
-      } else {
-        setScrollState(ScrollState.onTop);
-      }
-    };
+    handleRequestRendering(rendering);
 
-    switch (renderingType) {
-      case BottomSheetRenderingType.Slot:
-        scrollStateForSlot();
-        break;
-      case BottomSheetRenderingType.WebComponent:
-        scrollStateForWebComponent();
-        break;
-      default:
-        setScrollState(ScrollState.onTop);
+    if (isBottomSheetActive) {
+      setTimeout(() => dispatch(setShouldShowBottomSheet(true)), 400);
+    } else {
+      dispatch(setIsBottomSheetActive(true));
+      dispatch(setShouldShowBottomSheet(true));
     }
   };
 
-  const setNewHeight = (message: WebViewMessage | null) => {
-    if (isAddToWallet) {
-      setHeight(fullScreenHeight);
-    } else if (message) {
-      const nativePlace = bottomSheetSlotData?.requestRenderingEvent.data.nativePlace;
-      if (nativePlace == 'overFullScreen') {
-        injectHtmlFullScreenHeight(webRef.current, fullScreenHeight);
-        setHeight(fullScreenHeight);
-      } else {
-        const height = (message.details as HeightEvent).height;
-        setHeight(height < fullScreenHeight ? height : fullScreenHeight);
-      }
-    }
+  const handleCloseFlow = () => {
+    dispatch(setIsBottomSheetActive(false));
   };
 
-  const onWebMessage = (message: WebViewMessage) => {
-    switch (message.type) {
-      case PageMessage.PAGE_HEIGHT:
-        bottomSheetSlotData?.requestRenderingEvent && setNewHeightMessage(message);
-        break;
-      case UnitMessage.UNIT_REQUEST_RENDERING: {
-        setRenderingType(BottomSheetRenderingType.Slot);
-        const requestRendering = (message.details as RequestRenderingEvent);
-        setWebComponentData(undefined);
-        if (requestRendering.data.nativeComponent != bottomSheetSlotData?.requestRenderingEvent?.data?.nativeComponent) {
-          setIsAddToWallet(requestRendering.data.nativeComponent.includes('action=AddToWallet'));
-
-          // Animation between bottom sheet screens
-          // Close the bottom sheet
-          setHeight(0);
-          setShouldShowComponent(false);
-
-          // Update the bottom sheet data
-          setBottomSheetSlotData({
-            componentResourceId: bottomSheetSlotData?.componentResourceId,
-            componentName: bottomSheetSlotData?.componentName,
-            requestRenderingEvent: requestRendering,
-          });
+  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
-          // Open the bottom sheet
-          setTimeout(() => setShouldShowComponent(true), 400);
-        }
-        break;
-      }
-      case CardMessage.CARD_ACTIVATED:
-        dispatch(setEvent({
-          key: CardMessage.CARD_ACTIVATED,
-          data: (message.details as CardActivatedEvent).card,
-        }));
-        break;
-      case CardMessage.CARD_STATUS_CHANGED:
-        dispatch(setEvent({
-          key: CardMessage.CARD_STATUS_CHANGED,
-          data: (message.details as CardStatusChangedEvent).card,
-        }));
-        break;
-      case AccountMessage.UNIT_ACCOUNT_CHANGED:
-        dispatch(setEvent({
-          key: AccountMessage.UNIT_ACCOUNT_CHANGED,
-          data: (message.details as AccountChangedEvent).account,
-        }));
-        break;
-      case ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED:
-        dispatch(setEvent({
-          key: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
-          data: (message.details as ActivityFiltersChangedEvent),
-        }));
+  const handleRequestRendering = (rendering: BottomSheetRenderingMessage) => {
+    if (rendering === currentBottomSheetRenderingMessage) {
+      return;
+    } else {
+      setCurrentBottomSheetRenderingMessage(rendering);
+    }
+    dispatch(setIsComponentLoading(true));
+    switch (rendering.type) {
+      //if slot check if we know this component and want to show it, otherwise get directly the component
+      case BottomSheetRenderingType.Slot:
+        determineRenderingTypeFromEvent(rendering.data as BottomSheetSlotData);
         break;
-      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
-        handleCloseFlow();
+      case BottomSheetRenderingType.NativeComponent:
+        setupDataForNativeComponent(rendering.data as NativeComponentData);
         break;
-      case UnitMessage.UNIT_REQUEST_OPEN_LINK:
-        // eslint-disable-next-line no-case-declarations
-        const { href } = (message.details as RequestOpenLinkEvent);
-        Linking.openURL(href);
+      default:
         break;
     }
   };
 
-  const onScrollWebView = (event: any) => {
-    if (scrollState === ScrollState.unScrollable) return;
-
-    const currY = event.nativeEvent.contentOffset.y;
-
-    if (ScrollState.onTop && currY < 5) {
-      setScrollState(ScrollState.onlyBottomSheet);
+  const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
+    let nativeComponentDataFromEvent = null;
+    if (event?.requestRenderingEvent.data.nativeComponent?.includes('action=AddToWallet') && event?.componentResourceId) {
+      nativeComponentDataFromEvent = {
+        nativePlace: BottomSheetNativePlaceType.overFullScreen,
+        component: {
+          type: BottomSheetNativeComponentType.AddToWalletComponent,
+          props: {
+            cardId: event.componentResourceId,
+            customerToken: extractCustomerTokenFromRequestRenderingEvent(event.requestRenderingEvent),
+          },
+        },
+      };
     }
-
-    if (scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
-      setScrollState(ScrollState.onlyWebView);
+    return nativeComponentDataFromEvent;
+  };
+  const determineRenderingTypeFromEvent = (event: BottomSheetSlotData) => {
+    const nativeComponentDataFromEvent = getNativeComponentDataFromEvent(event);
+    if (nativeComponentDataFromEvent) {
+      setupDataForNativeComponent(nativeComponentDataFromEvent as NativeComponentData);
+      return;
     }
+    setupDataForSlotComponent(event);
+  };
+
+  const setupDataForNativeComponent = (eventData: NativeComponentData) => {
+    const nativePlace = eventData.nativePlace ? eventData.nativePlace : BottomSheetNativePlaceType.modal;
+    setRenderingType(BottomSheetRenderingType.NativeComponent);
+    dispatch(setNativePlace(nativePlace));
+    setNativeComponentData(eventData as NativeComponentData);
+    dispatch(setIsComponentLoading(false)); //todo: work with events?
+  };
+  const setupDataForSlotComponent = (eventData: BottomSheetSlotData) => {
+    setRenderingType(BottomSheetRenderingType.Slot);
+    const componentParamsFromEvent = {
+      componentName: eventData.componentName ? eventData.componentName : componentParams?.componentName,
+      componentResourceId: eventData.componentResourceId ? eventData.componentResourceId : componentParams?.componentResourceId,
+    };
+    setComponentParams(componentParamsFromEvent);
+    dispatch(setNativePlace(eventData.requestRenderingEvent.data.nativePlace));
+    setRequestRenderingEventData(eventData.requestRenderingEvent);
   };
 
   const handleWebViewScroll = () => {
     if (scrollState === ScrollState.unScrollable) return;
-    setScrollState(ScrollState.onlyWebView);
+    dispatch(setScrollState(ScrollState.onlyWebView));
+    dispatch(setShouldEnableBottomSheetScroll(false));
   };
 
-  const renderBottomSheetItem = () => {
+  const renderBottomSheetComponent = () => {
     switch (renderingType) {
       case BottomSheetRenderingType.Slot:
-        if (bottomSheetSlotData?.requestRenderingEvent.data.nativeComponent?.includes('action=AddToWallet') && bottomSheetSlotData?.componentResourceId) {
-          return <UNAddToWalletBottomSheetItem renderingType={renderingType}
-            renderingRequest={bottomSheetSlotData.requestRenderingEvent}
-            cardId={bottomSheetSlotData?.componentResourceId}
-            fullScreenHeight={fullScreenHeight} />;
-        }
-
-        return (
-          <WebComponent
-            ref={webRef}
-            type={WebComponentType.slot}
-            presentationMode={PresentationMode.CoverInjectedHeight}
-            script={getBottomSheetScript()}
-            onMessage={onWebMessage}
-            isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
-            handleScroll={onScrollWebView}
+        return requestRenderingEventData ? (
+          <UNBottomSheetSlotComponent
+            requestRenderingEvent={requestRenderingEventData}
+            componentName={componentParams?.componentName}
+            componentResourceId={componentParams?.componentResourceId}
           />
-        );
-      case BottomSheetRenderingType.WebComponent:
-        if (webComponentData?.params?.includes('action=AddToWallet')) {
-          const cardId = extractCardIdFromComponentParams(webComponentData);
-          if (!cardId) return null;
-          return <UNAddToWalletBottomSheetItem renderingType={renderingType} webComponentData={webComponentData}
-            cardId={cardId} fullScreenHeight={fullScreenHeight} />;
-        }
-        return null;
+        ) : null;
+
       case BottomSheetRenderingType.NativeComponent:
+        return nativeComponentData ? (
+          <UNBottomSheetNativeComponent
+            nativeComponentData={nativeComponentData}
+          />
+        ) : null;
+
+      default:
         return null;
     }
   };
-
   return (
     <View
       pointerEvents={isBottomSheetActive ? undefined : 'none'}
@@ -347,12 +237,15 @@ const UNBottomSheetComponent = () => {
       <BottomSheet
         isOpen={isBottomSheetActive}
         height={height}
-        onClose={() => setIsBottomSheetActive(false)}
-        onOpen={() => setIsBottomSheetActive(true)}
+        sliderMaxHeight={sliderMaxHeight}
+        onClose={() => dispatch(setIsBottomSheetActive(false))}
+        onOpen={() => dispatch(setIsBottomSheetActive(true))}
         handleWebViewScroll={() => handleWebViewScroll()}
-        shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
+        shouldEnableBottomSheetScroll={shouldEnableBottomSheetScroll}
+        nativePlace={nativePlace}
+        isComponentLoading={isComponentLoading}
       >
-        {isAppActive && renderBottomSheetItem()}
+        {isAppActive && renderBottomSheetComponent()}
       </BottomSheet>
     </View>
   );