Creation formulaire candidature structure

src/App.js

@@ -37,6 +37,7 @@ function App() {
   const CoordinationTerritoriale = lazy(() => import('./views/coordination-territoriale'));
   const CarteCoordinateur = lazy(() => import('./views/coordination-territoriale/CarteCoordinateur'));
   const PageCandidatureConseiller = lazy(() => import('./views/candidature-conseiller/PageCandidatureConseiller'));
+  const PageCandidatureStructure = lazy(() => import('./views/candidature-structure/PageCandidatureStructure'));
 
   return (
     <div className="App">
@@ -45,6 +46,7 @@ function App() {
           <Routes>
             <Route path="/accueil" element={<GestionHash />}/>
             <Route path="/nouveau-formulaire-conseiller" element={<PageCandidatureConseiller />}/>
+            <Route path="/nouveau-formulaire-structure" element={<PageCandidatureStructure />}/>
             <Route path="/kit-communication" element={<KitCommunication />}/>
             <Route path="/donnees-personnelles" element={<DonneesPersonnelles />}/>
             <Route path="/mentions-legales" element={<MentionsLegales />}/>

src/views/candidature-conseiller/Sommaire.jsx → src/components/Sommaire.jsx

@@ -1,27 +1,11 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useLocation } from 'react-router-dom';
 
-export default function Sommaire() {
-  const ancreInformationsDeContact = '#informationsDeContact';
-  const [dernierElementClique, setDernierElementClique] = useState(ancreInformationsDeContact);
+export default function Sommaire({ parties }) {
+  const { hash } = useLocation();
 
-  const partiesSommaire = [
-    {
-      ancre: ancreInformationsDeContact,
-      libelle: 'Vos informations de contact'
-    },
-    {
-      ancre: '#situationEtExperience',
-      libelle: 'Votre situation et expérience'
-    },
-    {
-      ancre: '#votreDisponibilite',
-      libelle: 'Votre disponibilité'
-    },
-    {
-      ancre: '#votreMotivation',
-      libelle: 'Votre motivation'
-    },
-  ];
+  const [dernierElementClique, setDernierElementClique] = useState(hash || parties[0].ancre);
 
   const getAriaCurrent = ancre => {
     return ancre === dernierElementClique ? 'page' : false;
@@ -30,7 +14,7 @@ export default function Sommaire() {
   return (
     <nav aria-label="Sommaire" className="fr-sidemenu fr-mt-15w fr-sidemenu--sticky-full-height">
       <ol className="fr-sidemenu__list">
-        {partiesSommaire.map(({ ancre, libelle }, index) => (
+        {parties.map(({ ancre, libelle }, index) => (
           <li className="fr-sidemenu__item" key={index} onClick={() => setDernierElementClique(ancre)}>
             <a href={ancre} className="fr-sidemenu__link" target="_self" aria-current={getAriaCurrent(ancre)}>
               {libelle}
@@ -41,3 +25,7 @@ export default function Sommaire() {
     </nav >
   );
 }
+
+Sommaire.propTypes = {
+  parties: PropTypes.array,
+};

src/hooks/useScrollToSection.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useScrollToSection = () => {
+  const { hash } = useLocation();
+
+  useEffect(() => {
+    const sectionId = hash.split('#')[1];
+    if (sectionId) {
+      document.getElementById(sectionId).scrollIntoView();
+    }
+  }, []);
+};

src/views/candidature-conseiller/CandidatureConseiller.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import Sommaire from './Sommaire';
+import SommaireConseiller from './SommaireConseiller';
 import InformationsDeContact from './InformationsDeContact';
 import SituationEtExperience from './SituationEtExperience';
 import Disponibilite from './Disponibilite';
 import Motivation from './Motivation';
 import EnResume from './EnResume';
 import { situations } from './situations';
+import { useScrollToSection } from '../../hooks/useScrollToSection';
 
 import '@gouvfr/dsfr/dist/component/form/form.min.css';
 import '@gouvfr/dsfr/dist/component/input/input.min.css';
@@ -23,6 +24,8 @@ export default function CandidatureConseiller() {
     new Array(situations.length).fill(false)
   );
 
+  useScrollToSection();
+
   const valider = () => {
     setIsSituationValid(situationChecks.some(checked => checked));
     if (!isSituationValid) {
@@ -34,7 +37,7 @@ export default function CandidatureConseiller() {
     <div className="fr-container fr-mt-5w fr-mb-5w">
       <div className="fr-grid-row">
         <div className="fr-col-12 fr-col-md-4">
-          <Sommaire />
+          <SommaireConseiller />
         </div>
         <div className="fr-col-12 fr-col-md-8 fr-py-12v">
           <h1 className="cc-titre fr-mb-5w">Je veux devenir conseiller numérique</h1>

src/views/candidature-conseiller/CandidatureConseiller.test.jsx

@@ -1,7 +1,11 @@
 import { render, screen, within, fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import CandidatureConseiller from './CandidatureConseiller';
-import { textMatcher } from './test-utils';
+import { textMatcher } from '../../../test/test-utils';
+
+vi.mock('react-router-dom', () => ({
+  useLocation: () => ({ hash: '' }),
+}));
 
 describe('candidature conseiller', () => {
   describe('étant un candidat', () => {
@@ -21,16 +25,16 @@ describe('candidature conseiller', () => {
       const menuItems = within(menu).getAllByRole('listitem');
 
       const informationsDeContact = within(menuItems[0]).getByRole('link', { name: 'Vos informations de contact' });
-      expect(informationsDeContact).toHaveAttribute('href', '#informationsDeContact');
+      expect(informationsDeContact).toHaveAttribute('href', '#informations-de-contact');
 
       const situationEtExperience = within(menuItems[1]).getByRole('link', { name: 'Votre situation et expérience' });
-      expect(situationEtExperience).toHaveAttribute('href', '#situationEtExperience');
+      expect(situationEtExperience).toHaveAttribute('href', '#situation-et-experience');
 
       const votreDisponibilite = within(menuItems[2]).getByRole('link', { name: 'Votre disponibilité' });
-      expect(votreDisponibilite).toHaveAttribute('href', '#votreDisponibilite');
+      expect(votreDisponibilite).toHaveAttribute('href', '#votre-disponibilite');
 
       const votreMotivation = within(menuItems[3]).getByRole('link', { name: 'Votre motivation' });
-      expect(votreMotivation).toHaveAttribute('href', '#votreMotivation');
+      expect(votreMotivation).toHaveAttribute('href', '#votre-motivation');
     });
   });
 
@@ -41,7 +45,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const etapeInformationsDeContact = within(formulaire).getByRole('group', { name: 'Vos informations de contact' });
-    expect(etapeInformationsDeContact).toHaveAttribute('id', 'informationsDeContact');
+    expect(etapeInformationsDeContact).toHaveAttribute('id', 'informations-de-contact');
 
     const prenom = within(etapeInformationsDeContact).getByLabelText('Prénom *');
     expect(prenom).toHaveAttribute('type', 'text');
@@ -70,7 +74,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const situationEtExperience = within(formulaire).getByRole('group', { name: 'Votre situation et expérience' });
-    expect(situationEtExperience).toHaveAttribute('id', 'situationEtExperience');
+    expect(situationEtExperience).toHaveAttribute('id', 'situation-et-experience');
 
     const situation = within(situationEtExperience).getByText(textMatcher('Êtes-vous actuellement dans l’une des situations suivantes ? *'), { selector: 'p' });
     expect(situation).toBeInTheDocument();
@@ -131,7 +135,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const votreDisponibilite = within(formulaire).getByRole('group', { name: 'Votre disponibilité' });
-    expect(votreDisponibilite).toHaveAttribute('id', 'votreDisponibilite');
+    expect(votreDisponibilite).toHaveAttribute('id', 'votre-disponibilite');
 
     const questionDisponibilite = within(votreDisponibilite).getByText(
       textMatcher('À quel moment êtes-vous prêt(e) à démarrer votre mission et la formation de conseiller numérique ? *'),
@@ -197,7 +201,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const votreMotivation = within(formulaire).getByRole('group', { name: 'Votre motivation' });
-    expect(votreMotivation).toHaveAttribute('id', 'votreMotivation');
+    expect(votreMotivation).toHaveAttribute('id', 'votre-motivation');
 
     const aideMotivation = within(votreMotivation).getByText(
       textMatcher('En quelques lignes, décrivez votre motivation personnelle pour devenir conseiller numérique ' +
@@ -234,7 +238,7 @@ describe('candidature conseiller', () => {
     expect(descriptionResume).toBeInTheDocument();
   });
 
-  it('quand je modifie la date de disponibilité, elle s’affiche dans l’encart "En résumé" est affiché', () => {
+  it('quand je modifie la date de disponibilité, alors elle s’affiche dans l’encart "En résumé"', () => {
     // GIVEN
     render(<CandidatureConseiller />);
     const dateDisponibilite = '2023-12-12';

src/views/candidature-conseiller/Disponibilite.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 export default function Disponibilite({ setDateDisponibilite }) {
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votreDisponibilite">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-disponibilite">
       <legend className="fr-h5">Votre disponibilité</legend>
       <hr />
       <p className="fr-mb-3w cc-bold">

src/views/candidature-conseiller/InformationsDeContact.jsx

@@ -4,7 +4,7 @@ import AddressChooser from './AddressChooser';
 
 export default function InformationsDeContact() {
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="informationsDeContact">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="informations-de-contact">
       <legend className="fr-h5">Vos informations de contact</legend>
       <hr />
       <Input

src/views/candidature-conseiller/Motivation.jsx

@@ -3,7 +3,7 @@ import ZoneDeTexte from '../../components/commun/ZoneDeTexte';
 
 export default function Motivation() {
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votreMotivation">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-motivation">
       <legend className="fr-h5" id="titreMotivation">Votre motivation</legend>
       <p className="fr-text--sm fr-hint-text">
         En quelques lignes, décrivez votre motivation personnelle pour devenir conseiller numérique et{' '}

src/views/candidature-conseiller/SituationEtExperience.jsx

@@ -19,7 +19,7 @@ export default function SituationEtExperience({ situationChecks, setSituationChe
   };
 
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="situationEtExperience">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="situation-et-experience">
       <legend className="fr-h5">Votre situation et expérience</legend>
       <hr />
       <p className="fr-mb-3w cc-bold">

src/views/candidature-conseiller/SommaireConseiller.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Sommaire from '../../components/Sommaire';
+
+export default function SommaireConseiller() {
+  const parties = [
+    {
+      ancre: '#informations-de-contact',
+      libelle: 'Vos informations de contact'
+    },
+    {
+      ancre: '#situation-et-experience',
+      libelle: 'Votre situation et expérience'
+    },
+    {
+      ancre: '#votre-disponibilite',
+      libelle: 'Votre disponibilité'
+    },
+    {
+      ancre: '#votre-motivation',
+      libelle: 'Votre motivation'
+    },
+  ];
+
+  return (
+    <Sommaire parties={parties} />
+  );
+}

src/views/candidature-structure/BesoinEnConseillerNumerique.jsx

@@ -0,0 +1,36 @@
+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';
+
+export default function BesoinEnConseillerNumerique({ setDateAccueilConseillerNumerique }) {
+  return (
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-besoin-en-conseiller-numerique">
+      <legend className="fr-h5">Votre besoin en conseiller(s) numérique(s)</legend>
+      <hr />
+      <Input id="nombreConseillersSouhaites" type="number">
+        Combien de conseillers numériques souhaitez-vous accueillir ?<span className="cc-obligatoire">*</span>
+      </Input>
+      <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="identificationCandidat">
+        Oui
+      </BoutonRadio>
+      <BoutonRadio id="non" nomGroupe="identificationCandidat">
+        Non
+      </BoutonRadio>
+      <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="choisir-date" onChange={event => setDateAccueilConseillerNumerique(event.target.value)}>
+        Choisir une date
+      </Datepicker>
+    </fieldset >
+  );
+}
+
+BesoinEnConseillerNumerique.propTypes = {
+  setDateAccueilConseillerNumerique: PropTypes.func,
+};

src/views/candidature-structure/CandidatureStructure.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import SommaireStructure from './SommaireStructure';
+import InformationsDeContact from './InformationsDeContact';
+import InformationsDeStructure from './InformationsDeStructure';
+import BesoinEnConseillerNumerique from './BesoinEnConseillerNumerique';
+import { useScrollToSection } from '../../hooks/useScrollToSection';
+
+import '@gouvfr/dsfr/dist/component/form/form.min.css';
+import '@gouvfr/dsfr/dist/component/input/input.min.css';
+import '@gouvfr/dsfr/dist/component/checkbox/checkbox.min.css';
+import '@gouvfr/dsfr/dist/component/radio/radio.min.css';
+import '@gouvfr/dsfr/dist/component/badge/badge.min.css';
+import '@gouvfr/dsfr/dist/component/notice/notice.min.css';
+import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.min.css';
+import '../candidature-conseiller/CandidatureConseiller.css';
+
+export default function CandidatureStructure() {
+  const [dateAccueilConseillerNumerique, setDateAccueilConseillerNumerique] = useState();
+
+  useScrollToSection();
+
+  return (
+    <div className="fr-container fr-mt-5w fr-mb-5w">
+      <div className="fr-grid-row">
+        <div className="fr-col-12 fr-col-md-4">
+          <SommaireStructure />
+        </div>
+        <div className="fr-col-12 fr-col-md-8 fr-py-12v">
+          <h1 className="cc-titre fr-mb-5w">Je souhaite engager un conseiller numérique</h1>
+          <p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p>
+          <form aria-label="Candidature structure" >
+            <InformationsDeStructure />
+            <InformationsDeContact />
+            <BesoinEnConseillerNumerique setDateAccueilConseillerNumerique={setDateAccueilConseillerNumerique} />
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}