(PC-33482) feat(NC): update Price and SearchFilter

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,14 +28,22 @@ 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()
   })
 
   it('should display the search price description when minimum price selected', async () => {
     mockSearchState = { ...initialSearchState, minPrice: '5' }
-    render(<Price />)
+    render(<Price {...props} />)
 
     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(<Price />)
+    render(<Price {...props} />)
 
     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(<Price />)
+    render(<Price {...props} />)
 
     await screen.findByText('Prix')
 
@@ -60,20 +70,20 @@ 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(<Price />)
+    render(<Price {...props} />)
 
     await screen.findByText('Prix')
 
     expect(await screen.findByText('Gratuit')).toBeOnTheScreen()
   })
 
   it('should open the categories filter modal when clicking on the category button', async () => {
-    render(<Price />, {
+    render(<Price {...props} />, {
       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')
 

src/features/search/components/sections/Price/Price.tsx

@@ -1,25 +1,24 @@
-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'
 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 (
     <React.Fragment>
-      <FilterRow
-        icon={Code}
-        title="Prix"
-        description={getPriceDescription(currency, euroToPacificFrancRate, minPrice, maxPrice)}
-        onPress={onPress}
-      />
+      <FilterRow icon={Code} title="Prix" description={description} onPress={onPress} />
       <PriceModal
         title="Prix"
         accessibilityLabel="Ne pas filtrer sur les prix et retourner aux résultats"

src/features/search/pages/SearchFilter/SearchFilter.tsx

@@ -16,16 +16,21 @@ import { useNavigateToSearch } from 'features/search/helpers/useNavigateToSearch
 import { useSync } from 'features/search/helpers/useSync/useSync'
 import { LocationFilter } from 'features/search/types'
 import { analytics } from 'libs/analytics'
+import { useGetPacificFrancToEuroRate } from 'libs/firebase/firestore/exchangeRates/useGetPacificFrancToEuroRate'
 import { useFunctionOnce } from 'libs/hooks'
 import { useLocation } from 'libs/location'
 import { LocationMode } from 'libs/location/types'
 import { SuggestedPlace } from 'libs/place/types'
+import { useGetCurrencyToDisplay } from 'shared/currency/useGetCurrencyToDisplay'
 import { Li } from 'ui/components/Li'
 import { VerticalUl } from 'ui/components/Ul'
 import { SecondaryPageWithBlurHeader } from 'ui/pages/SecondaryPageWithBlurHeader'
 import { Spacer } from 'ui/theme'
 
 export const SearchFilter: React.FC = () => {
+  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 (
     <Container>
@@ -135,13 +129,30 @@ export const SearchFilter: React.FC = () => {
         onGoBack={onGoBack}
         scrollViewProps={{ keyboardShouldPersistTaps: 'always' }}>
         <VerticalUl>
-          {sectionItems.map((SectionItem, index) => {
-            return (
-              <SectionWrapper key={index} isFirstSectionItem={index === 0}>
-                <SectionItem onClose={shouldDisplayCloseButton ? onGoBack : undefined} />
-              </SectionWrapper>
-            )
-          })}
+          <SectionWrapper isFirstSectionItem>
+            <Section.Category onClose={onClose} />
+          </SectionWrapper>
+          {hasDuoOfferToggle ? (
+            <SectionWrapper>
+              <Section.OfferDuo onClose={onClose} />
+            </SectionWrapper>
+          ) : null}
+          <SectionWrapper>
+            <Section.Venue />
+          </SectionWrapper>
+          <SectionWrapper>
+            <Section.Price
+              currency={currency}
+              euroToPacificFrancRate={euroToPacificFrancRate}
+              onClose={onClose}
+            />
+          </SectionWrapper>
+          <SectionWrapper>
+            <Section.DateHour onClose={onClose} />
+          </SectionWrapper>
+          <SectionWrapper>
+            <Section.Accessibility onClose={onClose} />
+          </SectionWrapper>
         </VerticalUl>
       </SecondaryPageWithBlurHeader>
       <Spacer.Column numberOfSpaces={4} />
@@ -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 (
     <StyledLi>