From ed7a1e0f0c4dd2aaa16df0483f84f746666ee8c1 Mon Sep 17 00:00:00 2001 From: LucasBeneston Date: Thu, 26 Dec 2024 16:19:57 +0100 Subject: [PATCH] (PC-33482) feat(NC): update Price and SearchFilter --- .../sections/Price/Price.native.test.tsx | 26 ++++++--- .../components/sections/Price/Price.tsx | 25 ++++----- .../pages/SearchFilter/SearchFilter.tsx | 55 +++++++++++-------- 3 files changed, 63 insertions(+), 43 deletions(-) diff --git a/src/features/search/components/sections/Price/Price.native.test.tsx b/src/features/search/components/sections/Price/Price.native.test.tsx index ac976bf5097..ad37e176633 100644 --- a/src/features/search/components/sections/Price/Price.native.test.tsx +++ b/src/features/search/components/sections/Price/Price.native.test.tsx @@ -2,8 +2,10 @@ import React from 'react' import { Price } from 'features/search/components/sections/Price/Price' import { initialSearchState } from 'features/search/context/reducer' +import { DEFAULT_PACIFIC_FRANC_TO_EURO_RATE } from 'libs/firebase/firestore/exchangeRates/useGetPacificFrancToEuroRate' import { setFeatureFlags } from 'libs/firebase/firestore/featureFlags/__tests__/setFeatureFlags' -import { fireEvent, render, screen } from 'tests/utils' +import { Currency } from 'shared/currency/useGetCurrencyToDisplay' +import { render, screen, userEvent } from 'tests/utils' let mockSearchState = initialSearchState @@ -26,6 +28,14 @@ jest.mock('react-native/Libraries/Animated/createAnimatedComponent', () => { } }) +const user = userEvent.setup() +jest.useFakeTimers() + +const props = { + currency: Currency.EURO, + euroToPacificFrancRate: DEFAULT_PACIFIC_FRANC_TO_EURO_RATE, +} + describe('Price component', () => { beforeEach(() => { setFeatureFlags() @@ -33,7 +43,7 @@ describe('Price component', () => { it('should display the search price description when minimum price selected', async () => { mockSearchState = { ...initialSearchState, minPrice: '5' } - render() + render() await screen.findByText('Prix') @@ -42,7 +52,7 @@ describe('Price component', () => { it('should display the search price description when maximum price selected', async () => { mockSearchState = { ...initialSearchState, maxPrice: '10' } - render() + render() await screen.findByText('Prix') @@ -51,7 +61,7 @@ describe('Price component', () => { it('should display the search price description when minimum and maximum prices selected', async () => { mockSearchState = { ...initialSearchState, minPrice: '5', maxPrice: '10' } - render() + render() await screen.findByText('Prix') @@ -60,7 +70,7 @@ describe('Price component', () => { it('should display the search price description with "Gratuit" when minimum and maximum prices selected and are 0', async () => { mockSearchState = { ...initialSearchState, minPrice: '0', maxPrice: '0' } - render() + render() await screen.findByText('Prix') @@ -68,12 +78,12 @@ describe('Price component', () => { }) it('should open the categories filter modal when clicking on the category button', async () => { - render(, { + render(, { theme: { isDesktopViewport: false, isMobileViewport: true }, }) - const searchPriceButton = await screen.findByTestId('FilterRow') - fireEvent.press(searchPriceButton) + const searchPriceButton = await screen.findByTestId('FilterRow') + await user.press(searchPriceButton) const fullscreenModalScrollView = screen.getByTestId('fullscreenModalScrollView') diff --git a/src/features/search/components/sections/Price/Price.tsx b/src/features/search/components/sections/Price/Price.tsx index add14999afa..56596b198ad 100644 --- a/src/features/search/components/sections/Price/Price.tsx +++ b/src/features/search/components/sections/Price/Price.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useMemo } from 'react' import { FilterRow } from 'features/search/components/FilterRow/FilterRow' import { useSearch } from 'features/search/context/SearchWrapper' @@ -6,20 +6,19 @@ import { FilterBehaviour } from 'features/search/enums' import { getPriceAsNumber } from 'features/search/helpers/getPriceAsNumber/getPriceAsNumber' import { getPriceDescription } from 'features/search/helpers/getPriceDescription/getPriceDescription' import { PriceModal } from 'features/search/pages/modals/PriceModal/PriceModal' -import { useGetPacificFrancToEuroRate } from 'libs/firebase/firestore/exchangeRates/useGetPacificFrancToEuroRate' -import { useGetCurrencyToDisplay } from 'shared/currency/useGetCurrencyToDisplay' +import { Currency } from 'shared/currency/useGetCurrencyToDisplay' import { useModal } from 'ui/components/modals/useModal' import { Code } from 'ui/svg/icons/Code' type Props = { onClose?: VoidFunction + currency: Currency + euroToPacificFrancRate: number } -export const Price = ({ onClose }: Props) => { - const currency = useGetCurrencyToDisplay() - const euroToPacificFrancRate = useGetPacificFrancToEuroRate() - +export const Price = ({ onClose, currency, euroToPacificFrancRate }: Props) => { const { searchState } = useSearch() + const { visible: searchPriceModalVisible, showModal: showSearchPriceModal, @@ -33,14 +32,14 @@ export const Price = ({ onClose }: Props) => { showSearchPriceModal() }, [showSearchPriceModal]) + const description = useMemo( + () => getPriceDescription(currency, euroToPacificFrancRate, minPrice, maxPrice), + [currency, euroToPacificFrancRate, maxPrice, minPrice] + ) + return ( - + { + const currency = useGetCurrencyToDisplay() + const euroToPacificFrancRate = useGetPacificFrancToEuroRate() + const { disabilities, setDisabilities } = useAccessibilityFiltersContext() const routes = useNavigationState((state) => state?.routes) const currentRoute = routes?.[routes?.length - 1]?.name @@ -45,17 +50,13 @@ export const SearchFilter: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps const oldSearchState = useMemo(() => searchState, []) + const onGoBack = useCallback(() => { navigateToSearch(oldSearchState, oldAccessibilityFilter) }, [navigateToSearch, oldSearchState, oldAccessibilityFilter]) const onSearchPress = useCallback(() => { - navigateToSearch( - { - ...searchState, - }, - disabilities - ) + navigateToSearch({ ...searchState }, disabilities) }, [navigateToSearch, searchState, disabilities]) const onResetPress = useCallback(() => { @@ -119,14 +120,7 @@ export const SearchFilter: React.FC = () => { return isBeneficiary && hasRemainingCredit }, [user?.isBeneficiary, user?.domainsCredit?.all?.remaining]) - const shouldDisplayCloseButton = isMobileViewport - - const sectionItems = [Section.Category] - if (hasDuoOfferToggle) sectionItems.push(Section.OfferDuo) - sectionItems.push(Section.Venue) - sectionItems.push(Section.Price) - sectionItems.push(Section.DateHour) - sectionItems.push(Section.Accessibility) + const onClose = isMobileViewport ? onGoBack : undefined return ( @@ -135,13 +129,30 @@ export const SearchFilter: React.FC = () => { onGoBack={onGoBack} scrollViewProps={{ keyboardShouldPersistTaps: 'always' }}> - {sectionItems.map((SectionItem, index) => { - return ( - - - - ) - })} + + + + {hasDuoOfferToggle ? ( + + + + ) : null} + + + + + + + + + + + + @@ -157,7 +168,7 @@ export const SearchFilter: React.FC = () => { const SectionWrapper: React.FunctionComponent<{ children: React.JSX.Element - isFirstSectionItem: boolean + isFirstSectionItem?: boolean }> = ({ children, isFirstSectionItem = false }) => { return (