(PC-32644) feat(deeplinks): add ThematicSearch pages (#7294)

* (BSR): alphabetical order

* (BSR): more precise type for ThematicSearch

* (BSR): reduce complexity

* (BSR): reduce complexity

* (BSR): reduce complexity

* Revert "(BSR): reduce complexity"

This reverts commit 329f24b1765fe413ec555fbb1c08bdf9fe39d5ea.

* (BSR): use user instead of fireEvent

* (PC-32644) feat(deeplinkGenerator): add ThematicSearch

__snapshots__/features/internal/marketingAndCommunication/pages/DeeplinksGenerator.native.test.tsx.native-snap

@@ -1610,6 +1610,138 @@ exports[`<DeeplinksGenerator /> should render DeeplinksGenerator 1`] = `
                     ]
                   }
                 />
+                <View
+                  accessibilityLabel="ThematicSearch"
+                  accessibilityRole="radio"
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": false,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    [
+                      [
+                        {
+                          "userSelect": "auto",
+                        },
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "justifyContent": "space-between",
+                          "minHeight": 24,
+                          "paddingVertical": 12,
+                        },
+                      ],
+                      {
+                        "opacity": 1,
+                      },
+                    ]
+                  }
+                  testID="ThematicSearch"
+                >
+                  <View
+                    flex={0.9}
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "flexBasis": 0,
+                          "flexDirection": "row",
+                          "flexGrow": 0.9,
+                          "flexShrink": 0,
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "flexBasis": 0,
+                            "flexGrow": 1,
+                            "flexShrink": 1,
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        isSelected={false}
+                        numberOfLines={2}
+                        style={
+                          [
+                            {
+                              "color": "#161617",
+                              "flexGrow": 1,
+                              "flexShrink": 1,
+                              "fontFamily": "Montserrat-SemiBold",
+                              "fontSize": 16,
+                              "lineHeight": 25.6,
+                            },
+                          ]
+                        }
+                      >
+                        ThematicSearch
+                      </Text>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "flex-end",
+                          "flexBasis": 0,
+                          "flexGrow": 0.1,
+                          "flexShrink": 1,
+                          "height": 20,
+                          "justifyContent": "center",
+                          "width": 20,
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityLabel="Non sélectionné"
+                      height={20}
+                      width={20}
+                    >
+                      <Text>
+                        undefined-SVG-Mock
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    [
+                      {
+                        "backgroundColor": "#F1F1F4",
+                        "height": 1,
+                        "width": "100%",
+                      },
+                    ]
+                  }
+                />
               </View>
             </View>
             <View

src/features/internal/marketingAndCommunication/atoms/OfferCategoryChoices.native.test.tsx

@@ -1,42 +1,56 @@
 import React from 'react'
 
+import { SearchGroupNameEnumv2 } from 'api/gen'
 import { OfferCategoryChoices } from 'features/internal/marketingAndCommunication/atoms/OfferCategoryChoices'
 import { PLACEHOLDER_DATA } from 'libs/subcategories/placeholderData'
-import { fireEvent, render, screen } from 'tests/utils'
+import { userEvent, render, screen } from 'tests/utils'
 
 let mockData = PLACEHOLDER_DATA
 jest.mock('libs/subcategories/useSubcategories', () => ({
   useSubcategories: () => ({
     data: mockData,
   }),
 }))
+const user = userEvent.setup()
 
 describe('<OfferCategoryChoices />', () => {
+  jest.useFakeTimers()
+
   afterEach(() => {
     mockData = PLACEHOLDER_DATA
   })
 
-  it('should call onChange with proper category when toggling', () => {
+  it('should change selected category when toggling', async () => {
     const onChange = jest.fn()
-    render(<OfferCategoryChoices onChange={onChange} />)
+    render(<OfferCategoryChoices onChange={onChange} selection={[]} />)
 
-    fireEvent.press(screen.getByText('Arts & loisirs créatifs'))
+    await user.press(screen.getByText('Arts & loisirs créatifs'))
 
     expect(onChange).toHaveBeenNthCalledWith(1, ['ARTS_LOISIRS_CREATIFS'])
 
-    fireEvent.press(screen.getByText('Conférences & rencontres'))
+    await user.press(screen.getByText('Conférences & rencontres'))
 
     expect(onChange).toHaveBeenNthCalledWith(2, ['RENCONTRES_CONFERENCES'])
+  })
+
+  it('should deleselect category when toggling again a selected category', async () => {
+    const onChange = jest.fn()
+    render(
+      <OfferCategoryChoices
+        onChange={onChange}
+        selection={[SearchGroupNameEnumv2.RENCONTRES_CONFERENCES]}
+      />
+    )
 
-    fireEvent.press(screen.getByText('Conférences & rencontres'))
+    await user.press(screen.getByText('Conférences & rencontres'))
 
-    expect(onChange).toHaveBeenNthCalledWith(3, [])
+    expect(onChange).toHaveBeenNthCalledWith(1, [])
   })
 
   it('should not return labels when no categories sent by backend', () => {
     mockData = { ...mockData, searchGroups: [] }
     const onChange = jest.fn()
-    render(<OfferCategoryChoices onChange={onChange} />)
+    render(<OfferCategoryChoices onChange={onChange} selection={[]} />)
 
     expect(screen.queryByText('Arts & loisirs créatifs')).not.toBeOnTheScreen()
     expect(screen.queryByText('Conférences & rencontres')).not.toBeOnTheScreen()

src/features/internal/marketingAndCommunication/atoms/OfferCategoryChoices.tsx

@@ -1,40 +1,43 @@
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 import styled from 'styled-components/native'
 
 import { SearchGroupNameEnumv2 } from 'api/gen'
 import { SelectionLabel } from 'features/search/components/SelectionLabel/SelectionLabel'
-import { useAvailableCategories } from 'features/search/helpers/useAvailableCategories/useAvailableCategories'
+import { CategoryCriteria } from 'features/search/enums'
+import {
+  useAvailableCategories,
+  useAvailableThematicSearchCategories,
+} from 'features/search/helpers/useAvailableCategories/useAvailableCategories'
 import { useSearchGroupLabelMapping } from 'libs/subcategories/mappings'
 import { Li } from 'ui/components/Li'
 import { Ul } from 'ui/components/Ul'
 import { getSpacing } from 'ui/theme'
 
-interface Props {
+type CategoryChoicesProps = {
   onChange: (selection: SearchGroupNameEnumv2[]) => void
+  selection: SearchGroupNameEnumv2[]
 }
 
-export const OfferCategoryChoices = (props: Props) => {
-  const [selection, setSelection] = useState<SearchGroupNameEnumv2[]>([] as SearchGroupNameEnumv2[])
-  const searchGroupLabelMapping = useSearchGroupLabelMapping()
+type CategoryChoicesWithCategoryCriteria = CategoryChoicesProps & {
+  categories: ReadonlyArray<CategoryCriteria>
+}
+
+export const OfferCategoryChoices = (props: CategoryChoicesProps) => {
   const categories = useAvailableCategories()
+  return <CategoryChoices {...props} categories={categories} />
+}
 
-  const { onChange } = props
+export const ThematicSearchCategoryChoices = (props: CategoryChoicesProps) => {
+  const categories = useAvailableThematicSearchCategories()
+  return <CategoryChoices {...props} categories={categories} />
+}
 
-  const onPress = useCallback(
-    (facetFilter: SearchGroupNameEnumv2) => {
-      setSelection((prevSelection) => {
-        let nextSelection = [...prevSelection]
-        if (nextSelection.includes(facetFilter)) {
-          nextSelection = []
-        } else {
-          nextSelection = [facetFilter]
-        }
-        onChange(nextSelection)
-        return nextSelection
-      })
-    },
-    [onChange]
-  )
+const CategoryChoices = ({
+  onChange,
+  selection,
+  categories,
+}: CategoryChoicesWithCategoryCriteria) => {
+  const searchGroupLabelMapping = useSearchGroupLabelMapping()
 
   if (categories.length === 0) {
     return null
@@ -47,8 +50,10 @@ export const OfferCategoryChoices = (props: Props) => {
           <Li key={category.facetFilter}>
             <SelectionLabel
               label={searchGroupLabelMapping[category.facetFilter]}
-              selected={selection.includes(category.facetFilter)}
-              onPress={() => onPress(category.facetFilter)}
+              selected={!!selection?.includes(category.facetFilter)}
+              onPress={() =>
+                onChange(selection?.includes(category.facetFilter) ? [] : [category.facetFilter])
+              }
             />
           </Li>
         ))}

src/features/internal/marketingAndCommunication/atoms/OfferNativeCategoryChoices.native.test.tsx

@@ -2,14 +2,17 @@ import React from 'react'
 
 import { SearchGroupNameEnumv2 } from 'api/gen'
 import { OfferNativeCategoryChoices } from 'features/internal/marketingAndCommunication/atoms/OfferNativeCategoryChoices'
-import { fireEvent, render, screen } from 'tests/utils'
+import { render, screen, userEvent } from 'tests/utils'
 
 jest.mock('libs/subcategories/useSubcategories')
 
 jest.mock('libs/firebase/analytics/analytics')
+const user = userEvent.setup()
 
 describe('<OfferNativeCategoryChoices />', () => {
-  it('should call onChange with proper subcategory when toggling', () => {
+  jest.useFakeTimers()
+
+  it('should call onChange with proper subcategory when toggling', async () => {
     const onChange = jest.fn()
     render(
       <OfferNativeCategoryChoices
@@ -18,15 +21,15 @@ describe('<OfferNativeCategoryChoices />', () => {
       />
     )
 
-    fireEvent.press(screen.getByText('Arts visuels'))
+    await user.press(screen.getByText('Arts visuels'))
 
     expect(onChange).toHaveBeenNthCalledWith(1, ['ARTS_VISUELS'])
 
-    fireEvent.press(screen.getByText('Matériels créatifs'))
+    await user.press(screen.getByText('Matériels créatifs'))
 
     expect(onChange).toHaveBeenNthCalledWith(2, ['MATERIELS_CREATIFS'])
 
-    fireEvent.press(screen.getByText('Matériels créatifs'))
+    await user.press(screen.getByText('Matériels créatifs'))
 
     expect(onChange).toHaveBeenNthCalledWith(3, [])
   })