diff --git a/src/features/location/components/HomeLocationModal.tsx b/src/features/location/components/HomeLocationModal.tsx index 82464e4cd4f..04557bad34a 100644 --- a/src/features/location/components/HomeLocationModal.tsx +++ b/src/features/location/components/HomeLocationModal.tsx @@ -1,7 +1,6 @@ import React from 'react' import { LocationModal } from 'features/location/components/LocationModal' -import { LOCATION_PLACEHOLDER } from 'features/location/constants' import { useLocationMode } from 'features/location/helpers/useLocationMode' import { useLocationState } from 'features/location/helpers/useLocationState' import { analytics } from 'libs/analytics' @@ -46,7 +45,7 @@ export const HomeLocationModal = ({ visible, dismissModal }: HomeLocationModalPr onSubmit, onClose, shouldDirectlyValidate: true, - setPlaceGlobally, + ...locationStateProps, }) return ( @@ -66,6 +65,7 @@ export const HomeLocationModal = ({ visible, dismissModal }: HomeLocationModalPr onResetPlace={onResetPlace} shouldShowRadiusSlider={false} isSubmitDisabled={!selectedPlace} + shouldDisplayEverywhereSection /> ) } diff --git a/src/features/location/components/LocationModal.tsx b/src/features/location/components/LocationModal.tsx index 70d32b49e8f..a5e7c7f825d 100644 --- a/src/features/location/components/LocationModal.tsx +++ b/src/features/location/components/LocationModal.tsx @@ -5,7 +5,6 @@ import { LocationModalButton } from 'features/location/components/LocationModalB import { LocationModalFooter } from 'features/location/components/LocationModalFooter' import { LOCATION_PLACEHOLDER } from 'features/location/constants' import { LocationState } from 'features/location/types' -import { Action } from 'features/search/context/reducer' import { LocationLabel, LocationMode } from 'libs/location/types' import { SuggestedPlace } from 'libs/place/types' import { LocationSearchFilters } from 'shared/location/LocationSearchFilters' @@ -20,6 +19,30 @@ import { PositionFilled } from 'ui/svg/icons/PositionFilled' import { WorldPosition } from 'ui/svg/icons/WorldPosition' import { getSpacing } from 'ui/theme' +type LocationModalProps = { + visible: boolean + onSubmit: () => void + onClose: () => void + onModalHideRef: LocationState['onModalHideRef'] + selectLocationMode: (mode: LocationMode) => () => void + tempLocationMode: LocationState['tempLocationMode'] + hasGeolocPosition: LocationState['hasGeolocPosition'] + selectedPlace: LocationState['selectedPlace'] + setSelectedPlace: LocationState['setSelectedPlace'] + placeQuery: LocationState['placeQuery'] + setPlaceQuery: LocationState['setPlaceQuery'] + onSetSelectedPlace: (place: SuggestedPlace) => void + onResetPlace: LocationState['onResetPlace'] + shouldDisplayEverywhereSection: boolean + isSubmitDisabled: boolean + shouldShowRadiusSlider: boolean + buttonWording?: string + tempAroundMeRadius?: LocationState['tempAroundMeRadius'] + onTempAroundMeRadiusValueChange?: (newValues: number[]) => void + tempAroundPlaceRadius?: LocationState['tempAroundPlaceRadius'] + onTempAroundPlaceRadiusValueChange?: (newValues: number[]) => void +} + export const LocationModal = ({ visible, onSubmit, @@ -39,29 +62,10 @@ export const LocationModal = ({ tempAroundPlaceRadius, onTempAroundPlaceRadiusValueChange, shouldShowRadiusSlider, + buttonWording, isSubmitDisabled, -}: { - visible: boolean - onSubmit: () => void - onClose: () => void - onModalHideRef: LocationState['onModalHideRef'] - selectLocationMode: (mode: LocationMode) => () => void - tempLocationMode: LocationState['tempLocationMode'] - hasGeolocPosition: LocationState['hasGeolocPosition'] - selectedPlace: LocationState['selectedPlace'] - setSelectedPlace: LocationState['setSelectedPlace'] - placeQuery: LocationState['placeQuery'] - setPlaceQuery: LocationState['setPlaceQuery'] - onSetSelectedPlace: (place: SuggestedPlace) => void - onResetPlace: LocationState['onResetPlace'] - isSubmitDisabled: boolean - shouldShowRadiusSlider: boolean - tempAroundMeRadius?: LocationState['tempAroundMeRadius'] - onTempAroundMeRadiusValueChange?: (newValues: number[]) => void - tempAroundPlaceRadius?: LocationState['tempAroundPlaceRadius'] - onTempAroundPlaceRadiusValueChange?: (newValues: number[]) => void - dispatch?: React.Dispatch -}) => { + shouldDisplayEverywhereSection, +}: LocationModalProps) => { const isCurrentLocationMode = (target: LocationMode) => tempLocationMode === target const theme = useTheme() @@ -110,7 +114,11 @@ export const LocationModal = ({ } fixedModalBottom={ - onSubmit()} isSubmitDisabled={isSubmitDisabled} /> + onSubmit()} + isSubmitDisabled={isSubmitDisabled} + buttonWording={buttonWording} + /> }> @@ -161,15 +169,19 @@ export const LocationModal = ({ ) : null} ) : null} - - - - + {shouldDisplayEverywhereSection ? ( + + + + + + + ) : null} ) diff --git a/src/features/location/components/SearchLocationModal.tsx b/src/features/location/components/SearchLocationModal.tsx index 0916c8d7036..cd1d532bec9 100644 --- a/src/features/location/components/SearchLocationModal.tsx +++ b/src/features/location/components/SearchLocationModal.tsx @@ -57,7 +57,6 @@ export const SearchLocationModal = ({ visible, dismissModal }: LocationModalProp return ( ) } diff --git a/src/features/location/components/VenueMapLocationModal.tsx b/src/features/location/components/VenueMapLocationModal.tsx index b12b41a4caa..7cb1ca70f7a 100644 --- a/src/features/location/components/VenueMapLocationModal.tsx +++ b/src/features/location/components/VenueMapLocationModal.tsx @@ -1,10 +1,7 @@ import { useNavigation } from '@react-navigation/native' import React, { useEffect } from 'react' -import styled, { useTheme } from 'styled-components/native' -import { LocationModalButton } from 'features/location/components/LocationModalButton' -import { LocationModalFooter } from 'features/location/components/LocationModalFooter' -import { LOCATION_PLACEHOLDER } from 'features/location/constants' +import { LocationModal } from 'features/location/components/LocationModal' import { useLocationMode } from 'features/location/helpers/useLocationMode' import { useLocationState } from 'features/location/helpers/useLocationState' import { useLocationSubmit } from 'features/location/helpers/useLocationSubmit' @@ -15,16 +12,6 @@ import { useInitialVenuesActions } from 'features/venueMap/store/initialVenuesSt import { useSelectedVenueActions } from 'features/venueMap/store/selectedVenueStore' import { analytics } from 'libs/analytics' import { LocationMode } from 'libs/location/types' -import { LocationSearchFilters } from 'shared/location/LocationSearchFilters' -import { LocationSearchInput } from 'shared/location/LocationSearchInput' -import { AppModal } from 'ui/components/modals/AppModal' -import { ModalHeader } from 'ui/components/modals/ModalHeader' -import { Separator } from 'ui/components/Separator' -import { Spacer } from 'ui/components/spacer/Spacer' -import { Close } from 'ui/svg/icons/Close' -import { MagnifyingGlassFilled } from 'ui/svg/icons/MagnifyingGlassFilled' -import { PositionFilled } from 'ui/svg/icons/PositionFilled' -import { getSpacing } from 'ui/theme' interface LocationModalProps { visible: boolean @@ -57,17 +44,22 @@ export const VenueMapLocationModal = ({ tempAroundPlaceRadius, tempAroundMeRadius, } = locationStateProps + const locationSubmitProps = useLocationSubmit({ dismissModal, from: 'venueMap', ...locationStateProps, }) const { onSubmit, onClose } = locationSubmitProps - const { onTempAroundRadiusPlaceValueChange, onTempAroundMeRadiusValueChange } = useRadiusChange({ + + const { + onTempAroundRadiusPlaceValueChange: onTempAroundPlaceRadiusValueChange, + onTempAroundMeRadiusValueChange, + } = useRadiusChange({ visible, ...locationStateProps, }) - const { onPlaceSelection } = usePlaceSelection({ + const { onPlaceSelection: onSetSelectedPlace } = usePlaceSelection({ ...locationStateProps, }) const { selectLocationMode } = useLocationMode({ @@ -76,18 +68,9 @@ export const VenueMapLocationModal = ({ ...locationStateProps, ...locationSubmitProps, }) + const { removeSelectedVenue } = useSelectedVenueActions() const { setInitialVenues } = useInitialVenuesActions() - const isCurrentLocationMode = (target: LocationMode) => tempLocationMode === target - const theme = useTheme() - - const geolocationModeColor = isCurrentLocationMode(LocationMode.AROUND_ME) - ? theme.colors.primary - : theme.colors.black - - const customLocationModeColor = isCurrentLocationMode(LocationMode.AROUND_PLACE) - ? theme.colors.primary - : theme.colors.black useEffect(() => { setInitialVenues([]) @@ -104,88 +87,28 @@ export const VenueMapLocationModal = ({ } return ( - - - - } - fixedModalBottom={ - - }> - - - - {isCurrentLocationMode(LocationMode.AROUND_ME) ? ( - - - - - ) : null} - - - - - {isCurrentLocationMode(LocationMode.AROUND_PLACE) ? ( - - - - {selectedPlace ? ( - - ) : null} - - ) : null} - - + onSubmit={handleSubmit} + hasGeolocPosition={hasGeolocPosition} + tempLocationMode={tempLocationMode} + onClose={onClose} + selectLocationMode={selectLocationMode} + onModalHideRef={onModalHideRef} + selectedPlace={selectedPlace} + setSelectedPlace={setSelectedPlace} + placeQuery={placeQuery} + setPlaceQuery={setPlaceQuery} + onSetSelectedPlace={onSetSelectedPlace} + onResetPlace={onResetPlace} + shouldShowRadiusSlider + isSubmitDisabled={!selectedPlace && tempLocationMode !== LocationMode.AROUND_ME} + tempAroundPlaceRadius={tempAroundPlaceRadius} + onTempAroundMeRadiusValueChange={onTempAroundMeRadiusValueChange} + onTempAroundPlaceRadiusValueChange={onTempAroundPlaceRadiusValueChange} + tempAroundMeRadius={tempAroundMeRadius} + buttonWording="Valider et voir sur la carte" + shouldDisplayEverywhereSection={false} + /> ) } - -const StyledScrollView = styled.ScrollView({ - paddingHorizontal: getSpacing(6), -}) - -const HeaderContainer = styled.View({ - padding: getSpacing(4), - width: '100%', -})