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 (