From b738d5db8b2273a252810dd4bda9f5a8eadaccd3 Mon Sep 17 00:00:00 2001
From: Benjamin Morali <benjaminmorali4@hotmail.fr>
Date: Wed, 27 Nov 2024 12:00:51 +0100
Subject: [PATCH] Retours formulaire (#253)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Retours formulaire

* Ajout de valeur par défaut pour les radio button

* Meileure validation de la dénomination de structrure

* Ajout de l'adresse complète pour les RIDET

* Modification du menu

* resolve error test

* gestion siret & ridet

* Ajout d'un état disabled sur le bouton envoyer

---------

Co-authored-by: ornella <ornella93@outlook.fr>
---
 src/components/Menu.js                        |  26 +++-
 src/components/commun/BoutonRadio.jsx         |   7 +-
 src/components/commun/RadioGroup.jsx          |  46 +++++++
 .../CandidatureConseiller.jsx                 |  11 +-
 .../CandidatureConseiller.test.jsx            |   2 +
 .../candidature-conseiller/Disponibilite.jsx  |  61 +++++----
 .../SituationEtExperience.jsx                 |  20 ++-
 .../candidature-conseiller/useApiAdmin.js     |  10 ++
 .../BesoinEnCoordinateur.jsx                  |  38 ++++--
 .../CandidatureCoordinateur.jsx               |  16 ++-
 .../CandidatureCoordinateur.test.jsx          | 112 +++++++++++++++-
 .../CompanyFinder.jsx                         |   4 +-
 .../BesoinEnConseillerNumerique.jsx           |  20 ++-
 .../CandidatureStructure.jsx                  |  16 ++-
 .../CandidatureStructure.test.jsx             | 121 +++++++++++++++++-
 .../candidature-structure/CompanyFinder.jsx   |   2 +-
 .../candidature-structure/Engagement.jsx      |   1 -
 .../InformationsDeStructure.jsx               |  72 +++++++----
 .../useEntrepriseFinder.js                    |   2 +-
 19 files changed, 477 insertions(+), 110 deletions(-)
 create mode 100644 src/components/commun/RadioGroup.jsx

diff --git a/src/components/Menu.js b/src/components/Menu.js
index f4a0c88..f316ba4 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -97,25 +97,37 @@ function Menu() {
                 aria-expanded={activeMenu === 'cnfs'}
                 aria-controls="menu-cnfs"
                 onClick={onClickMenu}
-                {...(location.pathname.startsWith('/aide-candidat') || location.pathname.startsWith('/aide-structure') ? { 'aria-current': true } : {})}>
-                Recrutement
+                {
+                  ...(location.pathname.startsWith('/nouveau-formulaire-conseiller') ||
+                  location.pathname.startsWith('/nouveau-formulaire-structure') ||
+                  location.pathname.startsWith('/nouveau-formulaire-coordinateur') ? { 'aria-current': true } : {})
+                }>
+                Candidature
               </button>
               <div className={`fr-collapse fr-menu ${activeMenu === 'cnfs' ? 'fr-collapse--expanded' : ''}`} id="menu-cnfs">
                 <ul className="fr-menu__list">
                   <li>
                     <Link
-                      to="/aide-candidat"
+                      to="/nouveau-formulaire-conseiller"
                       className="fr-nav__link"
-                      {...(location.pathname.startsWith('/aide-candidat') ? { 'aria-current': 'page' } : {})}>
+                      {...(location.pathname.startsWith('/nouveau-formulaire-conseiller') ? { 'aria-current': 'page' } : {})}>
                       Devenir conseiller num&eacute;rique
                     </Link>
                   </li>
                   <li>
                     <Link
-                      to="/aide-structure"
+                      to="/nouveau-formulaire-structure"
                       className="fr-nav__link"
-                      {...(location.pathname.startsWith('/aide-structure') ? { 'aria-current': 'page' } : {})}>
-                      Recruter un conseiller num&eacute;rique
+                      {...(location.pathname.startsWith('/nouveau-formulaire-structure') ? { 'aria-current': 'page' } : {})}>
+                      Obtenir un poste de conseiller num&eacute;rique
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/nouveau-formulaire-coordinateur"
+                      className="fr-nav__link"
+                      {...(location.pathname.startsWith('/nouveau-formulaire-coordinateur') ? { 'aria-current': 'page' } : {})}>
+                      Obtenir un poste de coordinateur de conseiller num&eacute;rique
                     </Link>
                   </li>
                 </ul>
diff --git a/src/components/commun/BoutonRadio.jsx b/src/components/commun/BoutonRadio.jsx
index aaea4e0..8b29071 100644
--- a/src/components/commun/BoutonRadio.jsx
+++ b/src/components/commun/BoutonRadio.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function BoutonRadio({ children, id, nomGroupe }) {
+export default function BoutonRadio({ children, id, nomGroupe, onChange, checked }) {
   return (
     <div className="fr-fieldset__element">
       <div className="fr-radio-group">
-        <input type="radio" id={id} name={nomGroupe} value={id} required />
+        <input type="radio" id={id} name={nomGroupe} value={id} required onChange={onChange} checked={checked} />
         <label className="fr-label" htmlFor={id}>
           {children}
         </label>
@@ -18,5 +18,6 @@ BoutonRadio.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
   nomGroupe: PropTypes.string,
-  value: PropTypes.string,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
 };
diff --git a/src/components/commun/RadioGroup.jsx b/src/components/commun/RadioGroup.jsx
new file mode 100644
index 0000000..79423fb
--- /dev/null
+++ b/src/components/commun/RadioGroup.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import BoutonRadio from './BoutonRadio';
+
+export default function RadioGroup({ nomGroupe, options, tailleColonne = options.length }) {
+  const [checkedValue, setCheckedValue] = useState(options[0].id);
+
+  return (
+    <div role="radiogroup">
+      <div className="fr-grid-row">
+        <div className={`${tailleColonne === options.length ? 'fr-col-12' : 'fr-col-6'}`}>
+          {options.slice(0, tailleColonne).map(({ id, label }) => (
+            <BoutonRadio
+              id={id}
+              key={id}
+              nomGroupe={nomGroupe}
+              onChange={() => setCheckedValue(id)}
+              checked={checkedValue === id}
+            >
+              {label}
+            </BoutonRadio>
+          ))}
+        </div>
+        {options.length > tailleColonne && <div className="fr-col-6">
+          {options.slice(tailleColonne).map(({ id, label }) => (
+            <BoutonRadio
+              id={id}
+              key={id}
+              nomGroupe={nomGroupe}
+              onChange={() => setCheckedValue(id)}
+              checked={checkedValue === id}
+            >
+              {label}
+            </BoutonRadio>
+          ))}
+        </div>}
+      </div>
+    </div>
+  );
+}
+
+RadioGroup.propTypes = {
+  nomGroupe: PropTypes.string,
+  options: PropTypes.array,
+  tailleColonne: PropTypes.number
+};
diff --git a/src/views/candidature-conseiller/CandidatureConseiller.jsx b/src/views/candidature-conseiller/CandidatureConseiller.jsx
index 1ef4504..2e57ebd 100644
--- a/src/views/candidature-conseiller/CandidatureConseiller.jsx
+++ b/src/views/candidature-conseiller/CandidatureConseiller.jsx
@@ -26,6 +26,7 @@ export default function CandidatureConseiller() {
   const [dateDisponibilite, setDateDisponibilite] = useState('');
   const [isSituationValid, setIsSituationValid] = useState(true);
   const [validationError, setValidationError] = useState('');
+  const [isSending, setIsSending] = useState(false);
   const [errors, setErrors] = useState({});
   const [widgetId, setWidgetId] = useState(null);
   const { buildConseillerData, creerCandidatureConseiller } = useApiAdmin();
@@ -48,6 +49,7 @@ export default function CandidatureConseiller() {
   };
 
   const validerLaCandidature = async event => {
+    setIsSending(true);
     event.preventDefault();
 
     const formData = new FormData(event.currentTarget);
@@ -71,6 +73,7 @@ export default function CandidatureConseiller() {
         navigate('/candidature-validee-conseiller');
       }
     }
+    setIsSending(false);
   };
 
   return (
@@ -103,8 +106,12 @@ export default function CandidatureConseiller() {
             <div className="fr-mt-2w fr-mb-2w">
               <Captcha setWidgetId={setWidgetId} widgetId={widgetId} />
             </div>
-            <button className="fr-btn cc-envoyer" type="submit" onClick={() => checkValidity(ref, setErrors)}>
-              Envoyer votre candidature
+            <button
+              className="fr-btn cc-envoyer"
+              type="submit"
+              onClick={() => checkValidity(ref, setErrors)}
+              disabled={isSending}>
+              {isSending ? 'Envoi en cours...' : 'Envoyer votre candidature'}
             </button>
           </form>
         </div>
diff --git a/src/views/candidature-conseiller/CandidatureConseiller.test.jsx b/src/views/candidature-conseiller/CandidatureConseiller.test.jsx
index f938bc1..4c8fc9e 100644
--- a/src/views/candidature-conseiller/CandidatureConseiller.test.jsx
+++ b/src/views/candidature-conseiller/CandidatureConseiller.test.jsx
@@ -392,6 +392,8 @@ describe('candidature conseiller', () => {
     fireEvent.click(envoyer);
 
     // THEN
+    const envoiEnCours = screen.getByRole('button', { name: 'Envoi en cours...' });
+    expect(envoiEnCours).toBeInTheDocument();
     const erreurCheckboxes = screen.queryByText('Vous devez cocher au moins une case', { selector: 'p' });
     expect(erreurCheckboxes).not.toBeInTheDocument();
     vi.useRealTimers();
diff --git a/src/views/candidature-conseiller/Disponibilite.jsx b/src/views/candidature-conseiller/Disponibilite.jsx
index 9b90545..6f85dc1 100644
--- a/src/views/candidature-conseiller/Disponibilite.jsx
+++ b/src/views/candidature-conseiller/Disponibilite.jsx
@@ -1,7 +1,38 @@
 import React from 'react';
-import BoutonRadio from '../../components/commun/BoutonRadio';
 import Datepicker from '../../components/commun/Datepicker';
 import PropTypes from 'prop-types';
+import RadioGroup from '../../components/commun/RadioGroup';
+
+const distances = [
+  {
+    id: '5',
+    label: '5 km'
+  },
+  {
+    id: '10',
+    label: '10 km'
+  },
+  {
+    id: '15',
+    label: '15 km'
+  },
+  {
+    id: '20',
+    label: '20 km'
+  },
+  {
+    id: '40',
+    label: '40 km'
+  },
+  {
+    id: '100',
+    label: '100 km'
+  },
+  {
+    id: '2000',
+    label: 'France entière'
+  },
+];
 
 export default function Disponibilite({ setDateDisponibilite, errors }) {
   const dateDuJour = new Date().toISOString().slice(0, 10);
@@ -24,33 +55,7 @@ export default function Disponibilite({ setDateDisponibilite, errors }) {
         Pour un emploi et une formation de conseiller numérique, vous êtes prêt(e) à vous déplacer à : <span className="cc-obligatoire">*</span>
       </p>
       <p className="fr-text--sm fr-hint-text">Distance à partir de votre lieu d’habitation</p>
-      <div className="fr-grid-row">
-        <div className="fr-col-6">
-          <BoutonRadio id="5" nomGroupe="distanceMax">
-            5 km
-          </BoutonRadio>
-          <BoutonRadio id="10" nomGroupe="distanceMax">
-            10 km
-          </BoutonRadio>
-          <BoutonRadio id="15" nomGroupe="distanceMax">
-            15 km
-          </BoutonRadio>
-          <BoutonRadio id="20" nomGroupe="distanceMax">
-            20 km
-          </BoutonRadio>
-        </div>
-        <div className="fr-col-6">
-          <BoutonRadio id="40" nomGroupe="distanceMax">
-            40 km
-          </BoutonRadio>
-          <BoutonRadio id="100" nomGroupe="distanceMax">
-            100 km
-          </BoutonRadio>
-          <BoutonRadio id="2000" nomGroupe="distanceMax">
-            France entière
-          </BoutonRadio>
-        </div>
-      </div>
+      <RadioGroup nomGroupe="distanceMax" options={distances} tailleColonne={4} />
     </fieldset>
   );
 }
diff --git a/src/views/candidature-conseiller/SituationEtExperience.jsx b/src/views/candidature-conseiller/SituationEtExperience.jsx
index 83d5c73..664a8a2 100644
--- a/src/views/candidature-conseiller/SituationEtExperience.jsx
+++ b/src/views/candidature-conseiller/SituationEtExperience.jsx
@@ -1,9 +1,20 @@
 import React, { useState } from 'react';
 import Checkbox from '../../components/commun/Checkbox';
-import BoutonRadio from '../../components/commun/BoutonRadio';
 import Input from '../../components/commun/Input';
 import { situations } from './situations';
 import PropTypes from 'prop-types';
+import RadioGroup from '../../components/commun/RadioGroup';
+
+const options = [
+  {
+    id: 'oui',
+    label: 'Oui'
+  },
+  {
+    id: 'non',
+    label: 'Non'
+  },
+];
 
 export default function SituationEtExperience({ isSituationValid }) {
   const [isDiplomeSelected, setIsDiplomeSelected] = useState(false);
@@ -41,12 +52,7 @@ export default function SituationEtExperience({ isSituationValid }) {
         Avez-vous une expérience professionnelle de médiation numérique ? <span className="cc-obligatoire">*</span>
       </p>
       <p className="fr-text--sm fr-hint-text">Accompagnement de personnes vers l’autonomie dans leurs usages de technologies, services et médias numériques.</p>
-      <BoutonRadio id="oui" nomGroupe="aUneExperienceMedNum">
-        Oui
-      </BoutonRadio>
-      <BoutonRadio id="non" nomGroupe="aUneExperienceMedNum">
-        Non
-      </BoutonRadio>
+      <RadioGroup nomGroupe="aUneExperienceMedNum" options={options} />
     </fieldset >
   );
 }
diff --git a/src/views/candidature-conseiller/useApiAdmin.js b/src/views/candidature-conseiller/useApiAdmin.js
index a427800..ad11eef 100644
--- a/src/views/candidature-conseiller/useApiAdmin.js
+++ b/src/views/candidature-conseiller/useApiAdmin.js
@@ -112,12 +112,21 @@ export const useApiAdmin = () => {
     return structureData;
   };
 
+  const handleRidetSiret = structureData => {
+    structureData.ridet = null;
+    if (structureData.siret.length < 14) {
+      structureData.ridet = structureData.siret;
+      structureData.siret = null;
+    }
+  };
+
   const buildStructureData = async (formData, geoLocation, codeCommune) => {
     const structureData = Object.fromEntries(formData);
     structureData.location = geoLocation;
     convertValueToBoolean(structureData, 'aIdentifieCandidat');
     handleContact(structureData);
     handleInformationsStructure(structureData);
+    handleRidetSiret(structureData);
     await handleAdresse(structureData, codeCommune);
     convertValueToBoolean(structureData, 'confirmationEngagement');
     delete structureData['g-recaptcha-response'];
@@ -128,6 +137,7 @@ export const useApiAdmin = () => {
     const coordinateurData = Object.fromEntries(formData);
     handleContact(coordinateurData);
     handleInformationsStructure(coordinateurData);
+    handleRidetSiret(coordinateurData);
     await handleAdresse(coordinateurData, codeCommune);
     convertValueToBoolean(coordinateurData, 'aIdentifieCoordinateur');
     convertValueToBoolean(coordinateurData, 'confirmationEngagement');
diff --git a/src/views/candidature-coordinateur/BesoinEnCoordinateur.jsx b/src/views/candidature-coordinateur/BesoinEnCoordinateur.jsx
index f09eb12..aec1f6b 100644
--- a/src/views/candidature-coordinateur/BesoinEnCoordinateur.jsx
+++ b/src/views/candidature-coordinateur/BesoinEnCoordinateur.jsx
@@ -1,7 +1,29 @@
 import React from 'react';
-import BoutonRadio from '../../components/commun/BoutonRadio';
 import Datepicker from '../../components/commun/Datepicker';
 import PropTypes from 'prop-types';
+import RadioGroup from '../../components/commun/RadioGroup';
+
+const ouiOuNOn = [
+  {
+    id: 'oui',
+    label: 'Oui'
+  },
+  {
+    id: 'non',
+    label: 'Non'
+  },
+];
+
+const typeContrat = [
+  {
+    id: 'FT',
+    label: 'Effectuera uniquement des missions de coordination'
+  },
+  {
+    id: 'PT',
+    label: 'Accompagnera également des publics'
+  },
+];
 
 export default function BesoinEnCoordinateur({ errors }) {
   const dateDuJour = new Date().toISOString().slice(0, 10);
@@ -14,19 +36,9 @@ export default function BesoinEnCoordinateur({ errors }) {
         Avez-vous déjà identifié un candidat pour le poste de coordinateur de conseiller numérique ? <span className="cc-obligatoire">*</span>
       </p>
       <p className="fr-text--sm fr-hint-text">Si oui, merci d’inviter ce candidat à s’inscrire sur la plateforme Conseiller numérique</p>
-      <BoutonRadio id="oui" nomGroupe="aIdentifieCoordinateur">
-        Oui
-      </BoutonRadio>
-      <BoutonRadio id="non" nomGroupe="aIdentifieCoordinateur">
-        Non
-      </BoutonRadio>
+      <RadioGroup nomGroupe="aIdentifieCoordinateur" options={ouiOuNOn} />
       <p className="fr-mt-4w fr-mb-3w cc-bold">Le coordinateur<span className="cc-obligatoire">*</span></p>
-      <BoutonRadio id="FT" nomGroupe="coordinateurTypeContrat">
-        Effectuera uniquement des missions de coordination
-      </BoutonRadio>
-      <BoutonRadio id="PT" nomGroupe="coordinateurTypeContrat">
-        Accompagnera également des publics
-      </BoutonRadio>
+      <RadioGroup nomGroupe="coordinateurTypeContrat" options={typeContrat} />
       <hr />
       <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre coordinateur ? <span className="cc-obligatoire">*</span></p>
       <Datepicker id="dateDebutMission" min={dateDuJour} error={errors.dateDebutMission}>
diff --git a/src/views/candidature-coordinateur/CandidatureCoordinateur.jsx b/src/views/candidature-coordinateur/CandidatureCoordinateur.jsx
index 27f82c7..2a68aae 100644
--- a/src/views/candidature-coordinateur/CandidatureCoordinateur.jsx
+++ b/src/views/candidature-coordinateur/CandidatureCoordinateur.jsx
@@ -26,6 +26,7 @@ export default function CandidatureCoordinateur() {
   const [geoLocation, setGeoLocation] = useState(null);
   const [validationError, setValidationError] = useState('');
   const [widgetId, setWidgetId] = useState(null);
+  const [isSending, setIsSending] = useState(false);
   const [codeCommune, setCodeCommune] = useState('');
   const [errors, setErrors] = useState({});
   const navigate = useNavigate();
@@ -38,6 +39,7 @@ export default function CandidatureCoordinateur() {
   }, []);
 
   const validerLaCandidature = async event => {
+    setIsSending(true);
     event.preventDefault();
 
     const formData = new FormData(event.currentTarget);
@@ -55,6 +57,7 @@ export default function CandidatureCoordinateur() {
     } else {
       navigate('/candidature-validee-structure');
     }
+    setIsSending(false);
   };
 
   return (
@@ -82,7 +85,10 @@ export default function CandidatureCoordinateur() {
               setGeoLocation={setGeoLocation}
               geoLocation={geoLocation}
               setCodeCommune={setCodeCommune}
-              errors={errors} />
+              errors={errors}
+              setErrors={setErrors}
+              formRef={ref}
+            />
             <InformationsDeContact errors={errors} />
             <BesoinEnCoordinateur errors={errors} />
             <Motivation errors={errors} />
@@ -90,8 +96,12 @@ export default function CandidatureCoordinateur() {
             <div className="fr-mt-2w fr-mb-2w">
               <Captcha setWidgetId={setWidgetId} widgetId={widgetId} />
             </div>
-            <button className="fr-btn cc-envoyer" type="submit" onClick={() => checkValidity(ref, setErrors)}>
-              Envoyer votre candidature
+            <button
+              className="fr-btn cc-envoyer"
+              type="submit"
+              onClick={() => checkValidity(ref, setErrors)}
+              disabled={isSending}>
+              {isSending ? 'Envoi en cours...' : 'Envoyer votre candidature'}
             </button>
           </form>
         </div>
diff --git a/src/views/candidature-coordinateur/CandidatureCoordinateur.test.jsx b/src/views/candidature-coordinateur/CandidatureCoordinateur.test.jsx
index 05b1c30..04ef50a 100644
--- a/src/views/candidature-coordinateur/CandidatureCoordinateur.test.jsx
+++ b/src/views/candidature-coordinateur/CandidatureCoordinateur.test.jsx
@@ -51,6 +51,7 @@ describe('candidature coordinateur', () => {
 
     const siretOuRidet = within(etapeInformationsDeStructure).getByLabelText('SIRET / RIDET * Format attendu : SIRET (12345678901234) ou RIDET (123456789)');
     expect(siretOuRidet).toHaveAttribute('id', 'siret');
+    expect(siretOuRidet).toHaveAttribute('pattern', '^(?:[0-9]{6,10}|[0-9]{14})$');
     expect(siretOuRidet).toBeRequired();
 
     const denomination = within(etapeInformationsDeStructure).getByLabelText('Dénomination *');
@@ -370,7 +371,7 @@ describe('candidature coordinateur', () => {
     vi.useRealTimers();
   });
 
-  it('quand je valide le formulaire alors j’envoie toute les données nescessaires', async () => {
+  it('quand je valide le formulaire alors j’envoie toute les données nescessaires en renseignant un siret', async () => {
     // GIVEN
     const formData = [
       [
@@ -466,6 +467,7 @@ describe('candidature coordinateur', () => {
         'telephone': '+33123456789'
       },
       'nom': 'AGENCE NATIONALE DE LA COHESION DES TERRITOIRES',
+      'ridet': null,
       'nomCommune': 'Paris 7e Arrondissement',
       'codePostal': '75007',
       'codeCommune': '75107',
@@ -478,6 +480,114 @@ describe('candidature coordinateur', () => {
     vi.useRealTimers();
   });
 
+  it('quand je valide le formulaire alors j’envoie toute les données nescessaires en renseignant un ridet', async () => {
+    // GIVEN
+    const formData = [
+      [
+        'siret',
+        '1234567'
+      ],
+      [
+        'denomination',
+        'AGENCE NATIONALE DE LA COHESION DES TERRITOIRES'
+      ],
+      [
+        'adresse',
+        '20 AVENUE DE SEGUR, 75007 PARIS'
+      ],
+      [
+        'type',
+        'COMMUNE'
+      ],
+      [
+        'prenom',
+        'Jean'
+      ],
+      [
+        'nom',
+        'Dupont'
+      ],
+      [
+        'fonction',
+        'Test'
+      ],
+      [
+        'email',
+        'jean.dupont@example.com'
+      ],
+      [
+        'telephone',
+        '+33123456789'
+      ],
+      [
+        'aIdentifieCoordinateur',
+        'non'
+      ],
+      [
+        'coordinateurTypeContrat',
+        'FT'
+      ],
+      [
+        'dateDebutMission',
+        '2023-12-12'
+      ],
+      [
+        'motivation',
+        'je suis motivé !'
+      ],
+      [
+        'confirmationEngagement',
+        'on'
+      ],
+      [
+        'g-recaptcha-response',
+        '1'
+      ],
+      [
+        'cf-turnstile-response',
+        '1'
+      ]
+    ];
+    const { buildCoordinateurData } = renderHook(() => useApiAdmin.useApiAdmin()).result.current;
+    const { getGeoLocationFromAddress } = renderHook(() => useEntrepriseFinder()).result.current;
+    let geoLocation;
+
+    // WHEN
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      geoLocation = await getGeoLocationFromAddress('20 AVENUE DE SEGUR, 75007 PARIS');
+    });
+    const result = await buildCoordinateurData(formData, geoLocation, '75107');
+
+    // THEN
+    expect(result).toBe(JSON.stringify({
+      'siret': null,
+      'type': 'COMMUNE',
+      'aIdentifieCoordinateur': false,
+      'coordinateurTypeContrat': 'FT',
+      'dateDebutMission': '2023-12-12',
+      'motivation': 'je suis motivé !',
+      'confirmationEngagement': true,
+      'cf-turnstile-response': '1',
+      'contact': {
+        'prenom': 'Jean', 'nom': 'Dupont',
+        'fonction': 'Test', 'email':
+          'jean.dupont@example.com',
+        'telephone': '+33123456789'
+      },
+      'nom': 'AGENCE NATIONALE DE LA COHESION DES TERRITOIRES',
+      'ridet': '1234567',
+      'nomCommune': 'Paris 7e Arrondissement',
+      'codePostal': '75007',
+      'codeCommune': '75107',
+      'location': { 'type': 'Point', 'coordinates': [2.3115, 48.8548] },
+      'codeDepartement': '75',
+      'codeRegion': '11',
+      'codeCom': null,
+    }));
+
+    vi.useRealTimers();
+  });
   it('quand je remplis le formulaire et qu’une erreur se produit alors un message d’erreur s’affiche et le captcha est rénitialisé', async () => {
     // GIVEN
     vi.useFakeTimers();
diff --git a/src/views/candidature-coordinateur/CompanyFinder.jsx b/src/views/candidature-coordinateur/CompanyFinder.jsx
index 326bf19..a56aad5 100644
--- a/src/views/candidature-coordinateur/CompanyFinder.jsx
+++ b/src/views/candidature-coordinateur/CompanyFinder.jsx
@@ -12,8 +12,8 @@ export default function CompanyFinder() {
         id="siret"
         onChange={debounce(event => search(event.target.value))}
         placeholder="N° SIRET / RIDET"
-        pattern="^[0-9]{9}|[0-9]{14}$" 
-        maxlength="14" 
+        pattern="^(?:[0-9]{6,10}|[0-9]{14})$"
+        maxlength="14"
       />
       {entreprise}
     </>
diff --git a/src/views/candidature-structure/BesoinEnConseillerNumerique.jsx b/src/views/candidature-structure/BesoinEnConseillerNumerique.jsx
index a16ff74..66f88b0 100644
--- a/src/views/candidature-structure/BesoinEnConseillerNumerique.jsx
+++ b/src/views/candidature-structure/BesoinEnConseillerNumerique.jsx
@@ -1,9 +1,20 @@
 import React from 'react';
 
-import BoutonRadio from '../../components/commun/BoutonRadio';
 import Datepicker from '../../components/commun/Datepicker';
 import Input from '../../components/commun/Input';
 import PropTypes from 'prop-types';
+import RadioGroup from '../../components/commun/RadioGroup';
+
+const ouiOuNOn = [
+  {
+    id: 'oui',
+    label: 'Oui'
+  },
+  {
+    id: 'non',
+    label: 'Non'
+  },
+];
 
 export default function BesoinEnConseillerNumerique({ errors }) {
   const dateDuJour = new Date().toISOString().slice(0, 10);
@@ -18,12 +29,7 @@ export default function BesoinEnConseillerNumerique({ errors }) {
       <hr />
       <p className="fr-mb-3w cc-bold">Avez-vous déjà identifié un candidat pour le poste de conseiller numérique ? <span className="cc-obligatoire">*</span></p>
       <p className="fr-text--sm fr-hint-text">Si oui, merci d’inviter ce candidat à s’inscrire sur la plateforme Conseiller numérique.</p>
-      <BoutonRadio id="oui" nomGroupe="aIdentifieCandidat">
-        Oui
-      </BoutonRadio>
-      <BoutonRadio id="non" nomGroupe="aIdentifieCandidat">
-        Non
-      </BoutonRadio>
+      <RadioGroup nomGroupe="aIdentifieCandidat" options={ouiOuNOn} />
       <hr />
       <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre conseiller numerique ? <span className="cc-obligatoire">*</span></p>
       <Datepicker id="dateDebutMission" min={dateDuJour} error={errors.dateDebutMission}>
diff --git a/src/views/candidature-structure/CandidatureStructure.jsx b/src/views/candidature-structure/CandidatureStructure.jsx
index b95edfa..6926403 100644
--- a/src/views/candidature-structure/CandidatureStructure.jsx
+++ b/src/views/candidature-structure/CandidatureStructure.jsx
@@ -26,6 +26,7 @@ export default function CandidatureStructure() {
   const [geoLocation, setGeoLocation] = useState(null);
   const [codeCommune, setCodeCommune] = useState('');
   const [widgetId, setWidgetId] = useState(null);
+  const [isSending, setIsSending] = useState(false);
   const [validationError, setValidationError] = useState('');
   const [errors, setErrors] = useState({});
   const navigate = useNavigate();
@@ -39,6 +40,7 @@ export default function CandidatureStructure() {
   useScrollToSection();
 
   const validerLaCandidature = async event => {
+    setIsSending(true);
     event.preventDefault();
 
     const formData = new FormData(event.currentTarget);
@@ -56,6 +58,7 @@ export default function CandidatureStructure() {
     } else {
       navigate('/candidature-validee-structure');
     }
+    setIsSending(false);
   };
 
   return (
@@ -84,7 +87,10 @@ export default function CandidatureStructure() {
               setGeoLocation={setGeoLocation}
               geoLocation={geoLocation}
               setCodeCommune={setCodeCommune}
-              errors={errors} />
+              errors={errors}
+              setErrors={setErrors}
+              formRef={ref}
+            />
             <InformationsDeContact errors={errors} />
             <BesoinEnConseillerNumerique errors={errors} />
             <Motivation errors={errors} />
@@ -92,8 +98,12 @@ export default function CandidatureStructure() {
             <div className="fr-mt-2w fr-mb-2w">
               <Captcha setWidgetId={setWidgetId} widgetId={widgetId} />
             </div>
-            <button className="fr-btn cc-envoyer" type="submit" onClick={() => checkValidity(ref, setErrors)}>
-              Envoyer votre candidature
+            <button
+              className="fr-btn cc-envoyer"
+              type="submit"
+              onClick={() => checkValidity(ref, setErrors)}
+              disabled={isSending}>
+              {isSending ? 'Envoi en cours...' : 'Envoyer votre candidature'}
             </button>
           </form>
         </div>
diff --git a/src/views/candidature-structure/CandidatureStructure.test.jsx b/src/views/candidature-structure/CandidatureStructure.test.jsx
index bca7d3b..da9f944 100644
--- a/src/views/candidature-structure/CandidatureStructure.test.jsx
+++ b/src/views/candidature-structure/CandidatureStructure.test.jsx
@@ -49,6 +49,7 @@ describe('candidature structure', () => {
     expect(etapeInformationsDeStructure).toHaveAttribute('id', 'informations-de-structure');
 
     const siretOuRidet = within(etapeInformationsDeStructure).getByLabelText('SIRET / RIDET * Format attendu : SIRET (12345678901234) ou RIDET (123456789)');
+    expect(siretOuRidet).toHaveAttribute('pattern', '^(?:[0-9]{6,10}|[0-9]{14})$');
     expect(siretOuRidet).toHaveAttribute('id', 'siret');
     expect(siretOuRidet).toBeRequired();
 
@@ -209,11 +210,10 @@ describe('candidature structure', () => {
       'montée en compétences du public (ateliers numériques, initiations au numérique), gratuites,');
     within(listDetail[1]).getByText('Qu’il consacre une partie de son temps aux rencontres locales et ' +
       'nationales organisées pour la communauté et la formation continue, etc,');
-    within(listDetail[2]).getByText('Qu’il revête une tenue vestimentaire dédiée fournie par l’Etat,');
-    within(listDetail[3]).getByText('Tout mettre en oeuvre pour sélectionner le candidat dans un délai maximum d’un mois sur la plateforme,');
-    within(listDetail[4]).getByText('Signer dans les 15 jours suivants un contrat avec ce candidat,');
-    within(listDetail[5]).getByText('Laisser partir le conseiller numérique en formation initiale ou continue,');
-    within(listDetail[6]).getByText('Mettre à sa disposition les moyens et ' +
+    within(listDetail[2]).getByText('Tout mettre en oeuvre pour sélectionner le candidat dans un délai maximum d’un mois sur la plateforme,');
+    within(listDetail[3]).getByText('Signer dans les 15 jours suivants un contrat avec ce candidat,');
+    within(listDetail[4]).getByText('Laisser partir le conseiller numérique en formation initiale ou continue,');
+    within(listDetail[5]).getByText('Mettre à sa disposition les moyens et ' +
       'équipements pour réaliser sa mission (ordinateur, téléphone portable, voiture si nécessaire),');
 
     const confirmationEngagement = screen.getByLabelText('Je confirme avoir lu et pris connaissance des conditions d’engagement.*');
@@ -459,7 +459,7 @@ describe('candidature structure', () => {
     vi.useRealTimers();
   });
 
-  it('quand je valide le formulaire alors j’envoie toute les données nescessaires', async () => {
+  it('quand je valide le formulaire alors j’envoie toute les données nescessaires en renseignant un siret', async () => {
     // GIVEN
     const formData = [
       [
@@ -557,6 +557,7 @@ describe('candidature structure', () => {
         'telephone': '+33123456789'
       },
       'nom': 'AGENCE NATIONALE DE LA COHESION DES TERRITOIRES',
+      'ridet': null,
       'nomCommune': 'Paris 7e Arrondissement',
       'codePostal': '75007',
       'codeCommune': '75107',
@@ -567,7 +568,115 @@ describe('candidature structure', () => {
 
     vi.useRealTimers();
   });
+  it('quand je valide le formulaire alors j’envoie toute les données nescessaires en renseignant un ridet', async () => {
+    // GIVEN
+    const formData = [
+      [
+        'siret',
+        '1234567'
+      ],
+      [
+        'denomination',
+        'AGENCE NATIONALE DE LA COHESION DES TERRITOIRES'
+      ],
+      [
+        'adresse',
+        '20 AVENUE DE SEGUR, 75007 PARIS'
+      ],
+      [
+        'type',
+        'COMMUNE'
+      ],
+      [
+        'prenom',
+        'Jean'
+      ],
+      [
+        'nom',
+        'Dupont'
+      ],
+      [
+        'fonction',
+        'Test'
+      ],
+      [
+        'email',
+        'jean.dupont@example.com'
+      ],
+      [
+        'telephone',
+        '+33123456789'
+      ],
+      [
+        'nombreConseillersSouhaites',
+        '1'
+      ],
+      [
+        'aIdentifieCandidat',
+        'oui'
+      ],
+      [
+        'dateDebutMission',
+        '2024-12-12'
+      ],
+      [
+        'motivation',
+        'je suis motivé !'
+      ],
+      [
+        'confirmationEngagement',
+        'on'
+      ],
+      [
+        'g-recaptcha-response',
+        '1'
+      ],
+      [
+        'cf-turnstile-response',
+        '1'
+      ]
+    ];
+
+    const { buildStructureData } = renderHook(() => useApiAdmin.useApiAdmin()).result.current;
+    const { getGeoLocationFromAddress } = renderHook(() => useEntrepriseFinder()).result.current;
+    let geoLocation;
+
+    // WHEN
+    await act(async () => {
+      geoLocation = await getGeoLocationFromAddress('20 AVENUE DE SEGUR, 75007 PARIS');
+    });
+    const result = await buildStructureData(formData, geoLocation, '75107');
+
+    // THEN
+    expect(result).toBe(JSON.stringify({
+      'siret': null,
+      'type': 'COMMUNE',
+      'nombreConseillersSouhaites': '1',
+      'aIdentifieCandidat': true,
+      'dateDebutMission': '2024-12-12',
+      'motivation': 'je suis motivé !',
+      'confirmationEngagement': true,
+      'cf-turnstile-response': '1',
+      'location': { 'type': 'Point', 'coordinates': [2.3115, 48.8548] },
+      'contact': {
+        'prenom': 'Jean',
+        'nom': 'Dupont',
+        'fonction': 'Test',
+        'email': 'jean.dupont@example.com',
+        'telephone': '+33123456789'
+      },
+      'nom': 'AGENCE NATIONALE DE LA COHESION DES TERRITOIRES',
+      'ridet': '1234567',
+      'nomCommune': 'Paris 7e Arrondissement',
+      'codePostal': '75007',
+      'codeCommune': '75107',
+      'codeDepartement': '75',
+      'codeRegion': '11',
+      'codeCom': null,
+    }));
 
+    vi.useRealTimers();
+  });
   it('quand je candidate et qu’une erreur serveur survient, alors le message d’erreur s’affiche et le captcha est rénitialisé', async () => {
     // GIVEN
     vi.useFakeTimers();
diff --git a/src/views/candidature-structure/CompanyFinder.jsx b/src/views/candidature-structure/CompanyFinder.jsx
index b72cb85..d140692 100644
--- a/src/views/candidature-structure/CompanyFinder.jsx
+++ b/src/views/candidature-structure/CompanyFinder.jsx
@@ -12,7 +12,7 @@ export default function CompanyFinder({ onSearch, errors }) {
     <Input
       id="siret"
       onChange={event => handleSearch(event.target.value)}
-      pattern="^(?:[0-9]{9}|[0-9]{14})$"
+      pattern="^(?:[0-9]{6,10}|[0-9]{14})$"
       maxlength="14"
       error={errors.siret}
     >
diff --git a/src/views/candidature-structure/Engagement.jsx b/src/views/candidature-structure/Engagement.jsx
index 94167b9..3132b58 100644
--- a/src/views/candidature-structure/Engagement.jsx
+++ b/src/views/candidature-structure/Engagement.jsx
@@ -9,7 +9,6 @@ export default function Engagement() {
       <ul data-testid="votre-engagement">
         <li>Assurer que le conseiller réalise des activités de montée en compétences du public (ateliers numériques, initiations au numérique), gratuites,</li>
         <li>Qu’il consacre une partie de son temps aux rencontres locales et nationales organisées pour la communauté et la formation continue, etc,</li>
-        <li>Qu’il revête une tenue vestimentaire dédiée fournie par l’Etat,</li>
         <li>Tout mettre en oeuvre pour sélectionner le candidat dans un délai maximum d’un mois sur la plateforme,</li>
         <li>Signer dans les 15 jours suivants un contrat avec ce candidat,</li>
         <li>Laisser partir le conseiller numérique en formation initiale ou continue,</li>
diff --git a/src/views/candidature-structure/InformationsDeStructure.jsx b/src/views/candidature-structure/InformationsDeStructure.jsx
index 1de88a8..38738a3 100644
--- a/src/views/candidature-structure/InformationsDeStructure.jsx
+++ b/src/views/candidature-structure/InformationsDeStructure.jsx
@@ -1,16 +1,48 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Input from '../../components/commun/Input';
 import CompanyFinder from './CompanyFinder';
-import BoutonRadio from '../../components/commun/BoutonRadio';
 import { useEntrepriseFinder } from './useEntrepriseFinder';
 import PropTypes from 'prop-types';
 import './CandidatureStructure.css';
+import RadioGroup from '../../components/commun/RadioGroup';
+import { checkValidity } from '../../shared/checkValidity';
 
 const TAILLE_SIRET = 14;
 const TAILLE_RIDET = [6, 7];
 const TAILLES_POSSIBLES = [...TAILLE_RIDET, TAILLE_SIRET];
 
-export default function InformationsDeStructure({ setGeoLocation, setCodeCommune, errors }) {
+const options = [
+  {
+    id: 'COMMUNE',
+    label: 'Une commune'
+  },
+  {
+    id: 'DEPARTEMENT',
+    label: 'Un département'
+  },
+  {
+    id: 'REGION',
+    label: 'Une région'
+  },
+  {
+    id: 'EPCI',
+    label: 'Un établissement public de coopération intercommunale'
+  },
+  {
+    id: 'COLLECTIVITE',
+    label: 'Une collectivité à statut particulier'
+  },
+  {
+    id: 'GIP',
+    label: 'Un GIP'
+  },
+  {
+    id: 'PRIVATE',
+    label: 'Une structure privée (association, entreprise de l’ESS, fondations)'
+  },
+];
+
+export default function InformationsDeStructure({ setGeoLocation, setCodeCommune, errors, setErrors, formRef }) {
   const {
     entreprise,
     search,
@@ -25,6 +57,12 @@ export default function InformationsDeStructure({ setGeoLocation, setCodeCommune
     setAdresse,
   } = useEntrepriseFinder(setGeoLocation, setCodeCommune);
 
+  useEffect(() => {
+    if (denomination) {
+      checkValidity(formRef, setErrors);
+    }
+  }, [denomination]);
+
   const handleSearch = value => {
     const numericValue = value.replace(/\D/g, '');
     if (TAILLES_POSSIBLES.includes(numericValue.length)) {
@@ -61,7 +99,9 @@ export default function InformationsDeStructure({ setGeoLocation, setCodeCommune
         value={denomination}
         isLoading={loading}
         ariaBusy={loading}
-        onChange={event => setDenomination(event.target.value)}
+        onChange={event => {
+          setDenomination(event.target.value);
+        }}
         error={errors.denomination}
       >
         Dénomination <span className="cc-obligatoire">*</span>
@@ -93,27 +133,7 @@ export default function InformationsDeStructure({ setGeoLocation, setCodeCommune
         Votre structure est <span className="cc-obligatoire">*</span>
       </p>
       <div className="fr-grid-row">
-        <BoutonRadio id="COMMUNE" nomGroupe="type">
-          Une commune
-        </BoutonRadio>
-        <BoutonRadio id="DEPARTEMENT" nomGroupe="type">
-          Un département
-        </BoutonRadio>
-        <BoutonRadio id="REGION" nomGroupe="type">
-          Une région
-        </BoutonRadio>
-        <BoutonRadio id="EPCI" nomGroupe="type">
-          Un établissement public de coopération intercommunale
-        </BoutonRadio>
-        <BoutonRadio id="COLLECTIVITE" nomGroupe="type">
-          Une collectivité à statut particulier
-        </BoutonRadio>
-        <BoutonRadio id="GIP" nomGroupe="type">
-          Un GIP
-        </BoutonRadio>
-        <BoutonRadio id="PRIVATE" nomGroupe="type">
-          Une structure privée (association, entreprise de l’ESS, fondations)
-        </BoutonRadio>
+        <RadioGroup nomGroupe="type" options={options} />
       </div>
     </fieldset>
   );
@@ -124,4 +144,6 @@ InformationsDeStructure.propTypes = {
   setCodeCommune: PropTypes.func.isRequired,
   geoLocation: PropTypes.object,
   errors: PropTypes.object,
+  setErrors: PropTypes.func,
+  formRef: PropTypes.object
 };
diff --git a/src/views/candidature-structure/useEntrepriseFinder.js b/src/views/candidature-structure/useEntrepriseFinder.js
index e605153..7fa5035 100644
--- a/src/views/candidature-structure/useEntrepriseFinder.js
+++ b/src/views/candidature-structure/useEntrepriseFinder.js
@@ -88,7 +88,7 @@ export const useEntrepriseFinder = (setGeoLocation, setCodeCommune) => {
       const response = await fetch(urlAPI);
       const result = await response.json();
       const suggestions = result.features.map(feature => ({
-        label: `${feature.properties.postcode} ${feature.properties.city}`,
+        label: feature.properties.label,
         codeCommune: feature.properties.citycode,
         geometry: feature.geometry,
       }));