react-native-unit-components 1.9.1 → 1.11.0

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -1,318 +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 EventBus from '../../helpers/EventBus';
-import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { RequestOpenLinkEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { CardMessage, CardActivatedEvent, CardStatusChangedEvent } from '../../messages/webMessages/cardMessage';
-import { useListenerToBus } from '../../hooks/listenerToBus';
-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 { BottomSheetRenderingType, BottomSheetSlotData, NativeComponentData, WebComponentData } from '../../types/internal/bottomSheet.types';
-import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
-import { BottomSheetNativeMessage, type StartBottomSheetFlowMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { withReduxStore } from '../../helpers/store/helpers';
 
-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',
+import {
+  BottomSheetNativeComponentType,
+  BottomSheetNativePlaceType,
+  BottomSheetRenderingType,
+  BottomSheetSlotData,
+  NativeComponentData,
+  ScrollState,
+} from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetNativeMessage, BottomSheetRenderingMessage,
+} from '../../messages/nativeMessages/bottomSheetMessage';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { useDispatch, useSelector } from 'react-redux';
+import { fullScreenHeight, overFullScreenHeight } from './UNBottomSheetComponent.constants';
+import { RootState } from '../../store';
 
-  /*
-    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 [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);
+  const setSliderMaxHeightFromNativePlace = () => {
+    if (nativePlace === BottomSheetNativePlaceType.modal) {
+      setSliderMaxHeight(fullScreenHeight);
+    } else {
+      setSliderMaxHeight(overFullScreenHeight);
     }
-  }, [isBottomSheetActive]);
-
-  useEffect(() => {
-    if (shouldShowComponent) {
-      defineScrollState();
-      setNewHeight(newHeightMessage);
-    }
-  }, [shouldShowComponent, newHeightMessage, isAddToWallet]);
+  };
 
-  useListenerToBus({ busEventKey: BottomSheetNativeMessage.START_FLOW, action: startFlow });
-  useListenerToBus({ 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);
+  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
-          // Update the bottom sheet data
-          setBottomSheetSlotData({
-            componentResourceId: bottomSheetSlotData?.componentResourceId,
-            componentName: bottomSheetSlotData?.componentName,
-            requestRenderingEvent: requestRendering
-          });
-
-          // Open the bottom sheet
-          setTimeout(() => setShouldShowComponent(true), 400);
-        }
-        break;
-      }
-      case CardMessage.CARD_ACTIVATED:
-        EventBus.Instance.event(CardMessage.CARD_ACTIVATED, (message.details as CardActivatedEvent).card);
-        break;
-      case CardMessage.CARD_STATUS_CHANGED:
-        EventBus.Instance.event(CardMessage.CARD_STATUS_CHANGED, (message.details as CardStatusChangedEvent).card);
-        break;
-      case AccountMessage.UNIT_ACCOUNT_CHANGED:
-        EventBus.Instance.event(AccountMessage.UNIT_ACCOUNT_CHANGED, (message.details as AccountChangedEvent).account);
-        break;
-      case ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED:
-        EventBus.Instance.event(ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, (message.details as ActivityFiltersChangedEvent));
+  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'}
@@ -321,14 +237,17 @@ 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()}
-      </BottomSheet >
-    </View >
+        {isAppActive && renderBottomSheetComponent()}
+      </BottomSheet>
+    </View>
   );
 };
 

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

@@ -36,13 +36,12 @@ export const isAddToWalletByComponentParams = (data: WebComponentData): boolean
   return data.params?.includes('AddToWallet') ?? false;
 };
 
-export const extractCardIdFromComponentParams = (data: WebComponentData): string | null => {
-  const regex = /card-id=(\d+)/;
-  const match = data.params?.match(regex);
-
+export const extractCustomerTokenFromRequestRenderingEvent = (event: RequestRenderingEvent): string | null => {
+  const paramsString = event.data.nativeComponent;
+  const regex = /customer-token=([^>]*)>/;
+  const match = paramsString?.match(regex);
   if (match && match[1]) {
-    const cardId = match[1];
-    return cardId;
+    return match[1];
   } else {
     return null;
   }

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import {
+  BottomSheetNativeComponentType, BottomSheetNativePlaceType,
+  NativeComponentData,
+  ScrollState,
+} from '../../../../types/internal/bottomSheet.types';
+import { useDispatch } from 'react-redux';
+import { setScrollState, setShouldEnableBottomSheetScroll } from '../../../../slices/BottomSheetSlice';
+import { UNAddToWalletComponent } from '../../../../nativeComponents/UNAddToWallet/UNAddToWalletComponent';
+import { View } from 'react-native';
+import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+
+export interface UNBottomSheetNativeComponentProps {
+  nativeComponentData: NativeComponentData;
+}
+
+const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps) => {
+  const dispatch = useDispatch();
+  const [height, setHeight] = React.useState(0);
+
+  useEffect(() => {
+    setScrollStateForNativeComponent();
+  }, [props.nativeComponentData]);
+
+  useEffect(() => {
+    setBottomSheetNativeComponentViewHeight();
+  }, [props.nativeComponentData.nativePlace]);
+
+  const setBottomSheetNativeComponentViewHeight = () => {
+    if (props.nativeComponentData.nativePlace === BottomSheetNativePlaceType.overFullScreen) {
+      setHeight(overFullScreenHeight);
+    } else {
+      setHeight(fullScreenHeight - statusBarHeight);
+    }
+  };
+
+  const setScrollStateForNativeComponent = () => {
+    const scrollState = props.nativeComponentData.scrollState ?? ScrollState.unScrollable;
+    dispatch(setScrollState(scrollState));
+    dispatch(setShouldEnableBottomSheetScroll(scrollState !== ScrollState.onlyWebView));
+  };
+
+  const renderNativeComponent = () => {
+    switch (props.nativeComponentData?.component.type) {
+      case BottomSheetNativeComponentType.AddToWalletComponent:
+        return (
+          <UNAddToWalletComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
+    }
+  };
+  return (
+    <View style={{ height: height }}>
+      {renderNativeComponent()}
+    </View>
+  );
+};
+
+export default UNBottomSheetNativeComponent;

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/index.ts

@@ -0,0 +1 @@
+export * from './UNBottomSheetNativeComponent';