react-native-unit-components 1.10.0 → 1.12.0

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -1,344 +1,221 @@
 /* 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 {
+  BottomSheetNativePlaceType,
   BottomSheetRenderingType,
   BottomSheetSlotData,
   NativeComponentData,
-  WebComponentData,
+  ScrollState,
 } from '../../types/internal/bottomSheet.types';
-import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import {
   BottomSheetNativeMessage,
-  type StartBottomSheetFlowMessage,
+  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 { getNativeComponentDataFromEvent } 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;
-    }
-  };
-
-  const handleCloseFlow = () => {
-    setIsBottomSheetActive(false);
-  };
-
   useEffect(() => {
-    switch (renderingType) {
-      case BottomSheetRenderingType.Slot:
-        if (webRef.current && bottomSheetSlotData?.requestRenderingEvent) {
-          renderingBottomSheetRequest(webRef.current, bottomSheetSlotData.requestRenderingEvent);
-        }
-        break;
-      case BottomSheetRenderingType.WebComponent:
-        if (isAddToWallet) {
-          webRef.current?.injectJavaScript('document.activeElement && document.activeElement.blur();');
+    const setHeightFromNativePlace = () => {
+      switch (nativePlace) {
+        // In the case of overFullScreen, set the height to the overFullScreenHeight.
+        case BottomSheetNativePlaceType.overFullScreen:
+          setHeight(overFullScreenHeight);
+          break;
+        // For modal native place type, set the height to the fullScreenHeight.
+        case BottomSheetNativePlaceType.modal:
           setHeight(fullScreenHeight);
-        }
-        break;
-      case BottomSheetRenderingType.NativeComponent:
-        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);
-    }
-  }, [shouldShowComponent, newHeightMessage, isAddToWallet]);
-
-  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.START_FLOW, action: startFlow });
-  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
-
-  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);
+        default:
+          // In general, we want the bottom sheet to fully contain the component,
+          // thus adjusting its height to the component height, up to the maximum of overFullScreenHeight.
+          if (componentHeight) {
+            setHeight(componentHeight < overFullScreenHeight ? componentHeight : overFullScreenHeight);
           }
           break;
-        }
-        default: {
-          // default web component case
-          const nativePlace = bottomSheetSlotData.requestRenderingEvent.data.nativePlace;
-          if (nativePlace == 'overFullScreen') {
-            setScrollState(ScrollState.onTop);
-          } else {
-            setScrollState(ScrollState.unScrollable);
-          }
-        }
       }
     };
 
-    const scrollStateForWebComponent = () => {
-      if (isAddToWallet) {
-        setScrollState(ScrollState.unScrollable);
+    const setSliderMaxHeightFromNativePlace = () => {
+      if (nativePlace === BottomSheetNativePlaceType.modal) {
+        setSliderMaxHeight(fullScreenHeight);
       } else {
-        setScrollState(ScrollState.onTop);
+        setSliderMaxHeight(overFullScreenHeight);
       }
     };
 
-    switch (renderingType) {
-      case BottomSheetRenderingType.Slot:
-        scrollStateForSlot();
-        break;
-      case BottomSheetRenderingType.WebComponent:
-        scrollStateForWebComponent();
-        break;
-      default:
-        setScrollState(ScrollState.onTop);
+    // 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();
     }
-  };
+  }, [componentHeight, nativePlace, isComponentLoading, shouldShowBottomSheet]);
 
-  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);
-      }
+  useEffect(() => {
+    const resetBottomSheetManagerState = () => {
+      setComponentParams(undefined);
+      setRequestRenderingEventData(undefined);
+      setNativeComponentData(undefined);
+      setRenderingType(undefined);
+      setHeight(0);
+      setSliderMaxHeight(overFullScreenHeight);
+    };
+
+    if (!isBottomSheetActive) {
+      dispatch(resetBottomSheetSlice());
+      resetBottomSheetManagerState();
     }
-  };
+  }, [isBottomSheetActive, dispatch]);
 
-  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'));
+  const requestRendering = (rendering: BottomSheetRenderingMessage) => {
+    if (isBottomSheetActive) {
+      dispatch(setShouldShowBottomSheet(false));
+    }
 
-          // Animation between bottom sheet screens
-          // Close the bottom sheet
-          setHeight(0);
-          setShouldShowComponent(false);
+    handleRequestRendering(rendering);
 
-          // Update the bottom sheet data
-          setBottomSheetSlotData({
-            componentResourceId: bottomSheetSlotData?.componentResourceId,
-            componentName: bottomSheetSlotData?.componentName,
-            requestRenderingEvent: requestRendering,
-          });
+    if (isBottomSheetActive) {
+      setTimeout(() => dispatch(setShouldShowBottomSheet(true)), 400);
+    } else {
+      dispatch(setIsBottomSheetActive(true));
+      dispatch(setShouldShowBottomSheet(true));
+    }
+  };
 
-          // 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 handleCloseFlow = () => {
+    dispatch(setIsBottomSheetActive(false));
+  };
+
+  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
+  useListenerToEvent({ busEventKey: UnitMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
+
+  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 determineRenderingTypeFromEvent = (event: BottomSheetSlotData) => {
+    const nativeComponentDataFromEvent = getNativeComponentDataFromEvent(event);
+    if (nativeComponentDataFromEvent) {
+      setupDataForNativeComponent(nativeComponentDataFromEvent as NativeComponentData);
+      return;
     }
+    setupDataForSlotComponent(event);
+  };
 
-    if (scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
-      setScrollState(ScrollState.onlyWebView);
-    }
+  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 +224,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>
   );