(PC-11490) create constants for fields label

src/screens/OfferEducational/OfferEducationalForm/FormContact/FormContact.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { TextInput } from 'ui-kit'
 
+import { EMAIL_LABEL, PHONE_LABEL } from '../../constants/labels'
 import FormSection from '../FormSection'
 
 import styles from './FormContact.module.scss'
@@ -14,13 +15,13 @@ const FormContact = (): JSX.Element => {
     >
       <div className={styles.subsection}>
         <TextInput
-          label="Téléphone"
+          label={PHONE_LABEL}
           name='phone'
         />
       </div>
       <div className={styles.subsection}>
         <TextInput
-          label="Email"
+          label={EMAIL_LABEL}
           name='email'
         />
       </div>

src/screens/OfferEducational/OfferEducationalForm/FormNotifications/FormNotifications.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Checkbox, TextInput } from 'ui-kit'
 
+import { NOTIFICATIONS_EMAIL_LABEL, NOTIFICATIONS_LABEL } from '../../constants/labels'
 import FormSection from '../FormSection'
 
 import styles from './FormNotifications.module.scss'
@@ -12,13 +13,13 @@ const FormNotifications = (): JSX.Element => {
       title="Notifications"
     >
       <Checkbox
-        label="Être notifié par email des réservations"
+        label={NOTIFICATIONS_LABEL}
         name='notifications'
         value=''
       />
       <div className={styles.subsection}>
         <TextInput
-          label="Email auquel envoyer les notifications"
+          label={NOTIFICATIONS_EMAIL_LABEL}
           name='notificationEmail'
         />
       </div>

src/screens/OfferEducational/OfferEducationalForm/FormOfferVenue/FormOfferVenue.tsx

@@ -2,6 +2,11 @@ import React from 'react'
 
 import { RadioButton } from 'ui-kit'
 
+import {
+  OFFER_VENUE_OFFERER_LABEL,
+  OFFER_VENUE_OTHER_LABEL,
+  OFFER_VENUE_SCHOOL_LABEL,
+} from '../../constants/labels'
 import FormSection from '../FormSection'
 
 import styles from './FormOfferVenue.module.scss'
@@ -18,17 +23,17 @@ const FormOfferVenue = (): JSX.Element => {
         </h4>
         <div className={styles['radio-group']}>
           <RadioButton
-            label='Dans votre établissement'
+            label={OFFER_VENUE_OFFERER_LABEL}
             name='offerVenueId'
             value='offererVenue'
           />
           <RadioButton
-            label="Dans l'établissement scolaire"
+            label={OFFER_VENUE_SCHOOL_LABEL}
             name='offerVenueId'
             value='school'
           />
           <RadioButton
-            label='Autre'
+            label={OFFER_VENUE_OTHER_LABEL}
             name='offerVenueId'
             value='other'
           />

src/screens/OfferEducational/OfferEducationalForm/FormType/FormType.tsx

@@ -3,6 +3,12 @@ import React from 'react'
 import { Category, SubCategory } from 'custom_types/categories'
 import { Select, TextArea, TextInput } from 'ui-kit'
 
+import {
+  CATEGORY_LABEL,
+  DESCRIPTION_LABEL,
+  SUBCATEGORY_LABEL,
+  TITLE_LABEL,
+} from '../../constants/labels'
 import FormSection from '../FormSection'
 
 import styles from './FormType.module.scss'
@@ -29,27 +35,27 @@ const EACOfferCreationType = ({
     >
       <div className={styles.subsection}>
         <Select
-          label="Domaine"
+          label={CATEGORY_LABEL}
           name='category'
           options={buildOptions(categories)}
         />
       </div>
       <div className={styles.subsection}>
         <Select
-          label="Sous Domaine"
+          label={SUBCATEGORY_LABEL}
           name='subCategory'
           options={buildOptions(subCategoriesForSelectedCategory)}
         />
       </div>
       <div className={styles.subsection}>
         <TextInput
-          label="Titre de l'offre"
+          label={TITLE_LABEL}
           name="title"
         />
       </div>
       <div className={styles.subsection}>
         <TextArea
-          label="Description"
+          label={DESCRIPTION_LABEL}
           name='description'
         />
       </div>

src/screens/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Select } from 'ui-kit'
 
+import { OFFERER_LABEL, VENUE_LABEL } from '../../constants/labels'
 import FormSection from '../FormSection'
 
 import styles from './FormVenue.module.scss'
@@ -15,14 +16,14 @@ const FormVenue = (): JSX.Element => {
       <div className={styles.subsection}>
         <Select
           disabled
-          label="Structure"
+          label={OFFERER_LABEL}
           name='offerer'
           options={[]}
         />
       </div>
       <div className={styles.subsection}>
         <Select
-          label="Lieu qui percevra le remboursement"
+          label={VENUE_LABEL}
           name='venueId'
           options={[]}
         />

src/screens/OfferEducational/__specs__/OfferEducationalDefaultValues.spec.tsx

@@ -6,6 +6,19 @@ import { Router } from 'react-router'
 
 import { getCategoriesSelect, getSubcategoriesSelect } from '../__tests-utils__/eacOfferCreationUtils'
 import setDefaultProps from '../__tests-utils__/setDefaultProps'
+import {
+  DESCRIPTION_LABEL,
+  EMAIL_LABEL,
+  NOTIFICATIONS_EMAIL_LABEL,
+  NOTIFICATIONS_LABEL,
+  OFFERER_LABEL,
+  OFFER_VENUE_OFFERER_LABEL,
+  OFFER_VENUE_OTHER_LABEL,
+  OFFER_VENUE_SCHOOL_LABEL,
+  PHONE_LABEL,
+  TITLE_LABEL,
+  VENUE_LABEL,
+} from '../constants/labels'
 import OfferEducational, { IOfferEducationalProps } from '../OfferEducational'
 import { accessibilityOptions } from '../OfferEducationalForm/FormAccessibility/accessibilityOptions'
 import { participantsOptions } from '../OfferEducationalForm/FormParticipants/participantsOptions'
@@ -39,21 +52,21 @@ describe('screens | OfferEducational', () => {
     const subCategoriesSelect = getSubcategoriesSelect()
     expect(subCategoriesSelect.value).toBe('')
 
-    const titleInput = screen.getByLabelText("Titre de l'offre") as HTMLInputElement
+    const titleInput = screen.getByLabelText(TITLE_LABEL) as HTMLInputElement
     expect(titleInput.value).toBe('')
 
-    const descriptionTextArea = screen.getByLabelText('Description') as HTMLTextAreaElement
+    const descriptionTextArea = screen.getByLabelText(DESCRIPTION_LABEL) as HTMLTextAreaElement
     expect(descriptionTextArea.value).toBe('')
 
-    const offererSelect = screen.getByLabelText('Structure') as HTMLSelectElement
+    const offererSelect = screen.getByLabelText(OFFERER_LABEL) as HTMLSelectElement
     expect(offererSelect.value).toBe('')
 
-    const venueSelect = screen.getByLabelText('Lieu qui percevra le remboursement') as HTMLSelectElement
+    const venueSelect = screen.getByLabelText(VENUE_LABEL) as HTMLSelectElement
     expect(venueSelect.value).toBe('')
 
-    const offerVenueRadio1 = screen.getByLabelText('Dans votre établissement') as HTMLInputElement
-    const offerVenueRadio2 = screen.getByLabelText("Dans l'établissement scolaire") as HTMLInputElement
-    const offerVenueRadio3 = screen.getByLabelText('Autre') as HTMLInputElement
+    const offerVenueRadio1 = screen.getByLabelText(OFFER_VENUE_OFFERER_LABEL) as HTMLInputElement
+    const offerVenueRadio2 = screen.getByLabelText(OFFER_VENUE_SCHOOL_LABEL) as HTMLInputElement
+    const offerVenueRadio3 = screen.getByLabelText(OFFER_VENUE_OTHER_LABEL) as HTMLInputElement
     [offerVenueRadio1, offerVenueRadio2, offerVenueRadio3].forEach(radio => {
       expect(radio.checked).toBe(false)
     })
@@ -68,16 +81,16 @@ describe('screens | OfferEducational', () => {
       expect(accessibilityCheckbox.checked).toBe(false)
     })
 
-    const phoneInput = screen.getByLabelText('Téléphone') as HTMLInputElement
+    const phoneInput = screen.getByLabelText(PHONE_LABEL) as HTMLInputElement
     expect(phoneInput.value).toBe('')
 
-    const emailInput = screen.getByLabelText('Email') as HTMLInputElement
+    const emailInput = screen.getByLabelText(EMAIL_LABEL) as HTMLInputElement
     expect(emailInput.value).toBe('')
 
-    const notificationsCheckbox = screen.getByLabelText('Être notifié par email des réservations') as HTMLInputElement
+    const notificationsCheckbox = screen.getByLabelText(NOTIFICATIONS_LABEL) as HTMLInputElement
     expect(notificationsCheckbox.checked).toBe(false)
 
-    const notificationEmailInput = screen.getByLabelText('Email auquel envoyer les notifications') as HTMLInputElement
+    const notificationEmailInput = screen.getByLabelText(NOTIFICATIONS_EMAIL_LABEL) as HTMLInputElement
     expect(notificationEmailInput.value).toBe('')
   })
 })

src/screens/OfferEducational/__tests-utils__/eacOfferCreationUtils.ts

@@ -1,7 +1,9 @@
 import { screen } from '@testing-library/react'
 
+import { CATEGORY_LABEL, SUBCATEGORY_LABEL } from 'screens/OfferEducational/constants/labels'
+
 export const getCategoriesSelect = (): HTMLSelectElement => 
-    screen.getByLabelText('Domaine') as HTMLSelectElement
+    screen.getByLabelText(CATEGORY_LABEL) as HTMLSelectElement
 
 export const getSubcategoriesSelect = (): HTMLSelectElement =>
-    screen.getByLabelText('Sous Domaine') as HTMLSelectElement
+    screen.getByLabelText(SUBCATEGORY_LABEL) as HTMLSelectElement

src/screens/OfferEducational/constants/labels.ts

@@ -0,0 +1,13 @@
+export const CATEGORY_LABEL = "Domaine"
+export const SUBCATEGORY_LABEL = "Sous Domaine"
+export const TITLE_LABEL = "Titre de l'offre"
+export const DESCRIPTION_LABEL = "Description"
+export const OFFERER_LABEL = "Structure"
+export const VENUE_LABEL = "Lieu qui percevra le remboursement"
+export const OFFER_VENUE_OFFERER_LABEL = "Dans notre établissement"
+export const OFFER_VENUE_SCHOOL_LABEL = "Dans l'établissement scolaire"
+export const OFFER_VENUE_OTHER_LABEL = "Autre"
+export const PHONE_LABEL = "Téléphone"
+export const EMAIL_LABEL = "Email"
+export const NOTIFICATIONS_LABEL = "Être notifié par email des réservations"
+export const NOTIFICATIONS_EMAIL_LABEL = "Email auquel envoyer les notifications"