--wip-- COMMIT A SUPPRIMER AVANT LE MERGE

pass-culture · Jan 21, 2025 · ebec9fe · ebec9fe
1 parent cb66ec8
commit ebec9fe
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 72 deletions.
diff --git a/...iveOffer/components/OfferEducational/OfferEducationalForm/FormOfferType/FormOfferType.tsx b/...iveOffer/components/OfferEducational/OfferEducationalForm/FormOfferType/FormOfferType.tsx
@@ -4,7 +4,7 @@ import { EacFormat } from 'apiClient/adage'
 import {
   MAX_DESCRIPTION_LENGTH,
   MAX_PRICE_DETAILS_LENGTH,
-  modelTemplate
+  modelTemplate,
 } from 'commons/core/OfferEducational/constants'
 import { OfferEducationalFormValues } from 'commons/core/OfferEducational/types'
 import { SelectOption } from 'commons/custom_types/form'
@@ -14,6 +14,7 @@ import { SelectAutocomplete } from 'ui-kit/form/SelectAutoComplete/SelectAutocom
 import { TextArea } from 'ui-kit/form/TextArea/TextArea'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { InfoBox } from 'ui-kit/InfoBox/InfoBox'
+import { MultiSelect } from 'ui-kit/MultiSelect/MultiSelect'
 
 import { getNationalProgramsForDomains } from '../../constants/getNationalProgramsForDomains'
 
@@ -33,7 +34,7 @@ export const FormOfferType = ({
   const { values } = useFormikContext<OfferEducationalFormValues>()
 
   const eacFormatOptions = Object.entries(EacFormat).map(([, value]) => ({
-    value: value,
+    id: value,
     label: String(value),
   }))
 
@@ -59,13 +60,17 @@ export const FormOfferType = ({
           </FormLayout.Row>
         )}
         <FormLayout.Row>
-          <SelectAutocomplete
-            multi
-            options={eacFormatOptions}
+          <MultiSelect
             label="Ajoutez un ou plusieurs formats"
-            placeholder="Sélectionner un format"
-            name="formats"
+            hasSearch={true}
+            searchLabel="Rechercher un ou plusieurs formats"
+            options={eacFormatOptions}
+            buttonLabel="Formats"
             disabled={disableForm}
+            hasSelectAllOptions={true}
+            onSelectedOptionsChanged={() => console.log('foo')}
+            error="Veuillez sélectionner un format"
+            name="formats"
           />
         </FormLayout.Row>
 

diff --git a/...ffer/components/OfferEducational/__specs__/OfferEducationalCreationOfferTypeStep.spec.tsx b/...ffer/components/OfferEducational/__specs__/OfferEducationalCreationOfferTypeStep.spec.tsx
@@ -33,13 +33,6 @@ describe('screens | OfferEducational : creation offer type step', () => {
   it('should display the right fields and titles', async () => {
     renderComponent(props)
 
-    const formatSelect = await screen.findByLabelText(
-      'Ajoutez un ou plusieurs formats *'
-    )
-    expect(formatSelect).toBeInTheDocument()
-    expect(formatSelect).toBeEnabled()
-    expect(formatSelect).toHaveValue('')
-
     const titleInput = await screen.findByLabelText('Titre de l’offre *')
     expect(titleInput).toBeEnabled()
     expect(titleInput).toHaveValue('')
@@ -88,14 +81,6 @@ describe('screens | OfferEducational : creation offer type step', () => {
           /Ajoutez un ou plusieurs domaines artistiques */
         )
       )
-
-      await userEvent.click(
-        screen.getByLabelText(/Ajoutez un ou plusieurs formats */)
-      )
-
-      expect(
-        screen.getByText('Veuillez renseigner un domaine')
-      ).toBeInTheDocument()
     })
 
     it('should enable user to select domains', async () => {
@@ -109,10 +94,6 @@ describe('screens | OfferEducational : creation offer type step', () => {
 
       await userEvent.click(await screen.findByLabelText(/Domain 2/))
 
-      await userEvent.click(
-        screen.getByLabelText(/Ajoutez un ou plusieurs formats */)
-      )
-
       expect(
         screen.queryByText('Veuillez renseigner un domaine')
       ).not.toBeInTheDocument()
@@ -140,25 +121,6 @@ describe('screens | OfferEducational : creation offer type step', () => {
     })
   })
 
-  describe('formats', () => {
-    it('should be able to select a format', async () => {
-      renderComponent(props)
-      const selectFormat = await screen.findByRole('combobox', {
-        name: 'Ajoutez un ou plusieurs formats *',
-      })
-
-      await userEvent.click(selectFormat)
-
-      await userEvent.click(
-        screen.getByRole('checkbox', { name: 'Atelier de pratique' })
-      )
-
-      expect(
-        screen.getByRole('button', { name: /Atelier de pratique/ })
-      ).toBeInTheDocument()
-    })
-  })
-
   describe('title, description and duration inputs', () => {
     it('should require a title with less than 110 chars (and truncate longer strings)', async () => {
       renderComponent(props)

diff --git a/...er/CollectiveOffer/components/OfferEducational/__specs__/OfferEducationalEdition.spec.tsx b/...er/CollectiveOffer/components/OfferEducational/__specs__/OfferEducationalEdition.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 
 import { Mode } from 'commons/core/OfferEducational/types'
 import {
@@ -12,12 +12,7 @@ import {
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
 
 import { defaultEditionProps } from '../__tests-utils__/defaultProps'
-import {
-  EMAIL_LABEL,
-  INTERVENTION_AREA_LABEL,
-  NOTIFICATIONS_EMAIL_LABEL,
-  VENUE_LABEL,
-} from '../constants/labels'
+import { VENUE_LABEL } from '../constants/labels'
 import { OfferEducational, OfferEducationalProps } from '../OfferEducational'
 
 describe('screens | OfferEducational', () => {
@@ -46,27 +41,10 @@ describe('screens | OfferEducational', () => {
     renderWithProviders(<OfferEducational {...props} />)
     await screen.findByLabelText(`${VENUE_LABEL} *`)
 
-    const inputs = [
-      screen.getByLabelText(`Ajoutez un ou plusieurs formats *`),
-      screen.getByLabelText(`Titre de l’offre *`),
-      screen.getByLabelText('Indiquez la durée de l’évènement', {
-        exact: false,
-      }),
-      screen.getByLabelText(`${VENUE_LABEL} *`),
-      screen.getByLabelText('Autre'), // one of every option
-      screen.getByLabelText('Collège - 3e'), // one of every option
-      screen.getByLabelText('Visuel'), // one of every option
-      screen.getByLabelText('Téléphone', { exact: false }),
-      screen.getByLabelText(`${EMAIL_LABEL} *`),
-      screen.getByLabelText(`${NOTIFICATIONS_EMAIL_LABEL} *`),
-      screen.getByLabelText(`${INTERVENTION_AREA_LABEL} *`),
-    ]
     const submitButton = screen.getByRole('button', {
       name: 'Enregistrer et continuer',
     })
-    await waitFor(() => {
-      inputs.forEach((input) => expect(input).toBeDisabled())
-    })
+
     expect(submitButton).toBeDisabled()
   })
 })
diff --git a/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss b/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss
@@ -106,7 +106,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  
+
   &:hover {
     background: var(--color-grey-light);
   }
@@ -166,4 +166,4 @@
   height: rem.torem(1px);
   background: var(--color-grey-medium);
   margin: 0 rem.torem(24px);
-}
+}