(PC-32617) feat(venueMap): redirect to venue page when fling on botto…

…m-sheet
pass-culture · Oct 31, 2024 · 4b24227 · 4b24227
1 parent 1dde036
commit 4b24227
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/src/features/venueMap/components/VenueMapView/VenueMapView.tsx b/src/features/venueMap/components/VenueMapView/VenueMapView.tsx
@@ -2,6 +2,7 @@ import BottomSheet from '@gorhom/bottom-sheet'
 import { useNavigation } from '@react-navigation/native'
 import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Platform, View } from 'react-native'
+import { Directions, FlingGesture, Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import styled from 'styled-components/native'
 import Supercluster from 'supercluster'
@@ -50,6 +51,8 @@ interface Props {
   playlistType: PlaylistType
 }
 
+const FLING_GESTURE = Gesture.Fling().runOnJS(true).direction(Directions.UP)
+
 export const VenueMapView: FunctionComponent<Props> = ({
   height,
   from,
@@ -71,6 +74,9 @@ export const VenueMapView: FunctionComponent<Props> = ({
   const { setInitialVenues } = useInitialVenuesActions()
   const isPreviewEnabled = useFeatureFlag(RemoteStoreFeatureFlags.WIP_VENUE_MAP)
   const shouldDisplayPinV2 = useFeatureFlag(RemoteStoreFeatureFlags.WIP_VENUE_MAP_PIN_V2)
+  const shouldNavigateToVenueOnFling = useFeatureFlag(
+    RemoteStoreFeatureFlags.WIP_FLING_BOTTOM_SHEET_NAVIGATE_TO_VENUE
+  )
   const bottomSheetOffersEnabled = useFeatureFlag(
     RemoteStoreFeatureFlags.WIP_OFFERS_IN_BOTTOM_SHEET
   )
@@ -269,6 +275,7 @@ export const VenueMapView: FunctionComponent<Props> = ({
           .filter((venueType): venueType is VenueTypeCode => !!venueType) ?? []
       return (
         <VenueMapCluster
+          key={clusterProps.properties.cluster_id}
           {...clusterProps}
           color={getClusterColorByDominantVenueType(clusterVenueTypes)}
         />
@@ -277,19 +284,33 @@ export const VenueMapView: FunctionComponent<Props> = ({
     [filteredVenues]
   )
 
+  const flingRef = useRef<FlingGesture>()
+
+  FLING_GESTURE.withRef(flingRef)
+    .enabled(shouldNavigateToVenueOnFling)
+    .onEnd(() => {
+      if (selectedVenue && bottomSheetIndex === snapPoints.length - 1) {
+        navigateToVenue(selectedVenue.venueId)
+      }
+    })
+
   return (
     <React.Fragment>
-      <VenueMapBottomSheet
-        snapPoints={snapPoints}
-        ref={bottomSheetRef}
-        onClose={removeSelectedVenue}
-        venue={selectedVenue}
-        venueOffers={bottomSheetOffersEnabled ? selectedVenueOffers?.hits : undefined}
-        PlaylistContainer={PlaylistContainer}
-        onAnimate={handleBottomSheetAnimation}
-        onChange={setBottomSheetIndex}
-        playlistType={playlistType}
-      />
+      <GestureDetector gesture={FLING_GESTURE}>
+        <VenueMapBottomSheet
+          snapPoints={snapPoints}
+          ref={bottomSheetRef}
+          onClose={removeSelectedVenue}
+          venue={selectedVenue}
+          simultaneousHandlers={flingRef}
+          venueOffers={bottomSheetOffersEnabled ? selectedVenueOffers?.hits : undefined}
+          PlaylistContainer={PlaylistContainer}
+          onAnimate={handleBottomSheetAnimation}
+          onChange={setBottomSheetIndex}
+          playlistType={playlistType}
+        />
+      </GestureDetector>
+
       <StyledMapView
         ref={mapViewRef}
         showsUserLocation

diff --git a/src/libs/firebase/firestore/types.ts b/src/libs/firebase/firestore/types.ts
@@ -71,6 +71,7 @@ export enum RemoteStoreFeatureFlags {
   WIP_SEARCH_N1_FILMS_DOCUMENTAIRES_ET_SERIES = 'wipSearchN1FilmsDocumentairesEtSeries',
   WIP_STEPPER_RETRY_UBBLE = 'wipStepperRetryUbble',
   WIP_VENUE_MAP = 'wipVenueMap',
+  WIP_FLING_BOTTOM_SHEET_NAVIGATE_TO_VENUE = 'wipFlingBottomSheetNavigateToVenue',
   WIP_VENUE_MAP_HIDDEN_POI = 'wipVenueMapHiddenPOI',
   WIP_VENUE_MAP_IN_SEARCH = 'wipVenueMapInSearch',
   WIP_VENUE_MAP_PIN_V2 = 'wipVenueMapPinV2',