MEP (#233)

* Optimisation du build

* build(deps): bump the minor-and-patch group with 2 updates

Bumps the minor-and-patch group with 2 updates: [@reduxjs/toolkit](https://github.com/reduxjs/redux-toolkit) and [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite).


Updates `@reduxjs/toolkit` from 2.2.6 to 2.2.7
- [Release notes](https://github.com/reduxjs/redux-toolkit/releases)
- [Commits](reduxjs/redux-toolkit@v2.2.6...v2.2.7)

Updates `vite` from 5.3.4 to 5.3.5
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.3.5/packages/vite)

---
updated-dependencies:
- dependency-name: "@reduxjs/toolkit"
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: minor-and-patch
- dependency-name: vite
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: minor-and-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

* Creation formulaire candidature structure (#196)

* :feat intialisation des tests formulaire candidature structure

* test formulaire partie 'information contact' + 'votre besoin CN'

* Retours de code review

* Ajout d'un scroll vers la bonne section du formulaire

* :feat ajout premier bloc formulaire informations contact structure

* Refacto des informations de structure

* partie Votre motivation + test

* :feat ajout premier bloc formulaire informations contact structure

* Refacto des informations de structure

* Retours de code review

* partie engagement + test

* partie submit + test + rectif lint

* :feat intialisation des tests formulaire candidature structure

* test formulaire partie 'information contact' + 'votre besoin CN'

* Retours de code review

* Ajout d'un scroll vers la bonne section du formulaire

* partie Votre motivation + test

* :feat ajout premier bloc formulaire informations contact structure

* Refacto des informations de structure

* partie engagement + test

* partie submit + test + rectif lint

* :feat ajout premier bloc formulaire informations contact structure

* Refacto des informations de structure

* Retours de code review

* Correction des tests

* quelques rectif required + config min + ponctuation

* retour commentaire , required pour la checkbox

* :feat encart information structure

* :fix refacto nommage retours commentaires

---------

Co-authored-by: dienamo <[email protected]>
Co-authored-by: Ornella Ourfi <[email protected]>

* Feat: Creation formulaire candidature structure coordo (#198)

* Refacto formulaire conseiller

* :feat intialisation des tests formulaire candidature structure

* test formulaire partie 'information contact' + 'votre besoin CN'

* Retours de code review

* Ajout d'un scroll vers la bonne section du formulaire

* partie Votre motivation + test

* :feat ajout premier bloc formulaire informations contact structure

* Refacto des informations de structure

* partie engagement + test

* :feat ajout premier bloc formulaire informations contact structure

* Refacto des informations de structure

* Correction des tests

* Ajout du formulaire coordinateur

---------

Co-authored-by: dienamo <[email protected]>
Co-authored-by: Ornella Ourfi <[email protected]>

* Modifications formulaire conseiller (#206)

* Refacto du formulaire conseiller

* Fix merge conflicts

* Fix: input date avec la règle minimum date du jour (#201)

* On ne peut pas valider le formulaire de candidature d'un conseiller si on n'a pas rempli au moins une situation

Le test n'était pas correct car il testait que la phrase s'affiche mais le formulaire se validait quand même.

* Simplification du formulaire de candidature conseiller en réduisant le nombre de rendu quand on coche une situation

* rectif formulaire CN pour règle métier minimum date du jour

* resolve test failed

* Fix tests

---------

Co-authored-by: Fabien Mercier <[email protected]>
Co-authored-by: Alezco <[email protected]>

* Appel du back-end depuis le formulaire (#207)

* Appel du back-end depuis le formulaire

* Ajout de la page de formulaire validé

* Correction des problèmes de validation

* Ajout de tests pour la candidature validée

* Retours de code review

* Retours supplémentaires de code review

* WIP : test d'erreur à faire fonctionner

* Fix test stub

* Ajout d'un test de changement de page

* Amélioration des tests (#211)

* Amélioration de npm install

* Ajout d'une vérification de captcha avec hCaptcha (#213)

* Ajout du captcha sur le formulaire coordo (#216)

* :feat recherche entreprise par siret ou ridet (#209)

* :feat rechereche entreprise par siret ou ridet

* :feat ajout du loader dans l'input

* :feat tests de recherche par siret ou ridet

* :feat refactorisation pour avoir les valeurs de formData directement

* :feat refactorisation du hook de gestion des données insee ou adresse

* :feat mise à jour des composants pour récuperation dans formdata

* :fix retours commentaires et migration scss-->css

* Feat: confirmation email (#215)

* confirmation email

* lint

* Connexion au back-end du formulaire structure (#218)

* Refacto

* Ajout des informations de la ville

* Feat: Conformation email structure (#219)

* bouton confirmation pour l'inscription structure

* renommage component pour dissocier avec celle version structure

* fix nommage

* retour commentaire

* fix lint

* fix : regex + nommage etc.. (#221)

* Ajout du lien au back-end sur le formulaire coordinateur (#220)

* Ajout du lien au back-end sur le formulaire coordinateur

* Ajout de tests

* Correction de l'appel à la GeoAPI

---------

Co-authored-by: Ornella <[email protected]>

* Fix: url api (#222)

* fix url api

* fix return function pour renvoyer les données codeCommune, codeRegon etc..

* Fix + refactor formulaire (#225)

* 1er refactor (codeCommune en paramètre + rectif de récuperation du cdde postal au lieux de code commune

* import alert dsfr

* renommage composant candidature-validee => candidature-validee-conseiller + rectif wording

* copy candidature validee conseiller en version pour structure

* resolve warning Error: Not implemented: window.scrollTo

* test pour récupérer la valeur après le build (version avant refacto api geo)

* ajout de 2 tests pour le téléphone dans le cas où c'est rempli par l'utilisateur

* refacto codeCommune + api adresse

* correction test

* fix correction required champs

* refactor window scrollTo

* retour commentaire

* refactor code commune + ajout du '*' pur l'input required à true

* fix get info commune

* fix: ajout trim + autocompletion + gestion erreur (#227)

* fix trim

* aucompletion off pour le form conseiller

* gestion dans le cas failed to fetch

* retour commentaire

* recif wording + png (#228)

* recif wording message erreur

* remplace img png par avif

* fix avif en png (#229)

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Fabien Mercier <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Morali <[email protected]>
Co-authored-by: dienamo <[email protected]>
Co-authored-by: dienamo <[email protected]>

.env

@@ -5,3 +5,4 @@ VITE_APP_CANDIDAT_URL=https://candidat.conseiller-numerique.gouv.fr/login
 VITE_APP_FORMS_URL=https://app.conseiller-numerique.gouv.fr/candidature
 VITE_APP_AIDE_URL=https://aide.conseiller-numerique.gouv.fr/fr
 VITE_APP_API_URL=http://localhost:8080
+VITE_APP_API_PILOTAGE_URL=http://localhost:8080

.github/workflows/continuous-integration.yml

@@ -12,7 +12,7 @@ jobs:
         cache: npm
         node-version-file: package.json
     - name: Install modules
-      run: npm i
+      run: npm i --no-audit --prefer-offline
     - name: Lint
       run: npm run lint
 
@@ -25,6 +25,6 @@ jobs:
         cache: npm
         node-version-file: package.json
     - name: Install modules
-      run: npm i
+      run: npm i --no-audit --prefer-offline
     - name: Test
       run: npm run test

.github/workflows/deploy-production.yml

@@ -39,6 +39,7 @@ jobs:
           envkey_VITE_APP_FORMS_URL: https://app.conseiller-numerique.gouv.fr/candidature
           envkey_VITE_APP_AIDE_URL: https://aide.conseiller-numerique.gouv.fr/fr
           envkey_VITE_APP_API_URL: ${{ secrets.REACT_APP_API_PRODUCTION }}
+          envkey_VITE_APP_API_PILOTAGE_URL: ${{ secrets.REACT_APP_API_PILOTAGE_PRODUCTION }}
           file_name: .env
       - name: Build application
         run: npm run build

.github/workflows/deploy-recette.yml

@@ -39,6 +39,7 @@ jobs:
           envkey_VITE_APP_FORMS_URL: https://uat-cnum-front.osc-fr1.scalingo.io/candidature
           envkey_VITE_APP_AIDE_URL: https://aide.conseiller-numerique.gouv.fr/fr
           envkey_VITE_APP_API_URL: ${{ secrets.REACT_APP_API_RECETTE }}
+          envkey_VITE_APP_API_PILOTAGE_URL: ${{ secrets.REACT_APP_API_PILOTAGE_RECETTE }}
           file_name: .env
       - name: Copy robots.txt
         uses: canastro/copy-file-action@master

index.html

@@ -43,5 +43,6 @@
       })();
     </script>
     <script type="module" src="/src/index.js"></script>
+    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
   </body>
 </html>

package.json

@@ -9,21 +9,21 @@
     "lint": "eslint src --max-warnings=0 --cache --cache-location node_modules/.cache/eslint",
     "start": "vite preview",
     "test": "vitest --run",
+    "test:watch": "vitest --watch",
     "test:coverage": "npm test -- --coverage"
   },
   "dependencies": {
     "@gouvfr-anct/cartographie-nationale": "^5.22.0",
     "@gouvfr/dsfr": "1.12.1",
-    "@reduxjs/toolkit": "^2.2.6",
+    "@reduxjs/toolkit": "^2.2.7",
     "dayjs": "^1.11.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.25.1",
-    "react-router-hash-link": "^2.4.3",
     "react-tooltip": "^5.27.1",
     "redux": "^5.0.1",
-    "vite": "^5.3.4",
+    "vite": "^5.3.5",
     "web-vitals": "^4.2.2"
   },
   "devDependencies": {

src/App.js

@@ -1,28 +1,28 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useParams, useLocation } from 'react-router-dom';
-import './assets/js';
-import './assets/sass/main.scss';
 import Footer from './components/Footer';
 import Accueil from './views/accueil';
 import KitCommunication from './views/kit-communication';
 import MentionsLegales from './views/MentionsLegales';
 import Accessibilite from './views/Accessibilite';
 import AideCandidat from './views/aide-candidat';
 import AideStructure from './views/aide-structure';
-import CoordinationTerritoriale from './views/coordination-territoriale';
 import Documentheque from './views/documentheque';
-import Carte from './views/Carte';
-import CarteCoordinateur from './views/coordination-territoriale/CarteCoordinateur';
 import Formation from './views/formation';
 import DonneesPersonnelles from './views/donnees-personnelles';
-import PageCandidatureConseiller from './views/candidature-conseiller/PageCandidatureConseiller';
+
+import '@gouvfr/dsfr/dist/core/core.module.min.js';
+import '@gouvfr/dsfr/dist/component/navigation/navigation.module.min.js';
+import '@gouvfr/dsfr/dist/component/modal/modal.module.min.js';
+import '@gouvfr/dsfr/dist/component/header/header.module.min.js';
+import './assets/sass/main.scss';
+import '@gouvfr/dsfr/dist/core/core.min.css';
 
 const RedirectCarto = () => {
   const { permanence } = useParams();
   return <Navigate to={`/${permanence}/details`} replace />;
 };
 
-
 const GestionHash = () => {
   const location = useLocation();
   const allowedAncres = ['#ancre-themes', '#ancre-statistiques'];
@@ -33,35 +33,56 @@ const GestionHash = () => {
 };
 
 function App() {
+  const Carte = lazy(() => import('./views/Carte'));
+  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'));
+  const PageCandidatureCoordinateur = lazy(() => import('./views/candidature-coordinateur/PageCandidatureCoordinateur'));
+  const PageCandidatureValideeConseiller = lazy(() => import('./views/candidature-validee-conseiller/PageCandidatureValideeConseiller'));
+  const PageCandidatureValideeStructure = lazy(() => import('./views/candidature-validee-structure/PageCandidatureValideeStructure'));
+  const PageConfirmationEmailCandidatureConseiller =
+  lazy(() => import('./views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller'));
+  const PageConfirmationEmailCandidatureStructure =
+  lazy(() => import('./views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure'));
+
   return (
     <div className="App">
-      <Router>
-        <Routes>
-          <Route path="/accueil" element={<GestionHash />}/>
-          <Route path="/nouveau-formulaire-conseiller" element={<PageCandidatureConseiller />}/>
-          <Route path="/kit-communication" element={<KitCommunication />}/>
-          <Route path="/donnees-personnelles" element={<DonneesPersonnelles />}/>
-          <Route path="/mentions-legales" element={<MentionsLegales />}/>
-          <Route path="/accessibilite" element={<Accessibilite />}/>
-          <Route path="/aide-candidat" element={<AideCandidat />}/>
-          <Route path="/aide-structure" element={<AideStructure />}/>
-          <Route path="/documentheque" element={<Documentheque />}/>
-          <Route path="/coordination-territoriale" element={<CoordinationTerritoriale />}/>
-          <Route path="/coordination-territoriale/:coordinateur" element={<CarteCoordinateur />}/>
-          <Route path="/coordination-territoriale/:coordinateur/details" element={<CarteCoordinateur />}/>
-          <Route path="/carte" element={<Carte />}/>
-          <Route path="/regions" element={<Carte />}/>
-          <Route path="/regions/:region" element={<Carte />}/>
-          <Route path="/regions/:region/:departement" element={<Carte />}/>
-          <Route path="/:permanence/details" element={<Carte />}/>
-          <Route path="/carte/:permanence/details" element={<RedirectCarto />}/>
-          <Route exact path="/:permanence" element={<Carte />}/>
-          <Route path="/formation" element={<Formation/>}/>
-          <Route index element={<Accueil />}/>
-          <Route path="*" element={<Navigate to="/" />}/>
-        </Routes>
-        <Footer />
-      </Router>
+      <Suspense>
+        <Router>
+          <Routes>
+            <Route path="/accueil" element={<GestionHash />}/>
+            <Route path="/nouveau-formulaire-conseiller" element={<PageCandidatureConseiller />}/>
+            <Route path="/nouveau-formulaire-structure" element={<PageCandidatureStructure />}/>
+            <Route path="/nouveau-formulaire-coordinateur" element={<PageCandidatureCoordinateur />}/>
+            <Route path="/candidature-validee-conseiller" element={<PageCandidatureValideeConseiller />}/>
+            <Route path="/candidature-validee-structure" element={<PageCandidatureValideeStructure />}/>
+            <Route path="/candidature-confirmer-conseiller/:token" element={<PageConfirmationEmailCandidatureConseiller />}/>
+            <Route path="/candidature-confirmer-structure/:token" element={<PageConfirmationEmailCandidatureStructure />}/>
+            <Route path="/kit-communication" element={<KitCommunication />}/>
+            <Route path="/donnees-personnelles" element={<DonneesPersonnelles />}/>
+            <Route path="/mentions-legales" element={<MentionsLegales />}/>
+            <Route path="/accessibilite" element={<Accessibilite />}/>
+            <Route path="/aide-candidat" element={<AideCandidat />}/>
+            <Route path="/aide-structure" element={<AideStructure />}/>
+            <Route path="/documentheque" element={<Documentheque />}/>
+            <Route path="/coordination-territoriale" element={<CoordinationTerritoriale />}/>
+            <Route path="/coordination-territoriale/:coordinateur" element={<CarteCoordinateur />}/>
+            <Route path="/coordination-territoriale/:coordinateur/details" element={<CarteCoordinateur />}/>
+            <Route path="/carte" element={<Carte />}/>
+            <Route path="/regions" element={<Carte />}/>
+            <Route path="/regions/:region" element={<Carte />}/>
+            <Route path="/regions/:region/:departement" element={<Carte />}/>
+            <Route path="/:permanence/details" element={<Carte />}/>
+            <Route path="/carte/:permanence/details" element={<RedirectCarto />}/>
+            <Route exact path="/:permanence" element={<Carte />}/>
+            <Route path="/formation" element={<Formation/>}/>
+            <Route index element={<Accueil />}/>
+            <Route path="*" element={<Navigate to="/" />}/>
+          </Routes>
+          <Footer />
+        </Router>
+      </Suspense>
     </div>
   );
 }

src/assets/sass/colors/_colors.scss

@@ -1,21 +1,12 @@
-$blue-france: #000091;
 $blue-marine:#243B7C;
 $blue-medium: #2f29ff;
 $blue-secondary: #0067E2;
-$blue-light: #0063CB;
-$blue-lighter: #E8EDFF;
 $blue-active: #6262fb;
 $yellow-light: #FFCA00;
 $yellow-dark: #987721;
 $green-transparent: #62D2C0;
 $green-pale: #09B8A6;
 $green-light: #1DD884;
-$green-dark: #297254;
 $red-dark: #FF2D2D;
-$white: #FFFFFF;
 $grey: #383838;
-$grey-light: #3A3A3A;
-$grey-background: #EEEEEE;
-$red-medium: #CE0500;
-$light-grey: #666666;
 $lighter-grey: #E6E6E6;

src/assets/sass/components/_header.scss

@@ -1,22 +1,22 @@
-@import '../colors/colors';
-
 .fr-header {
   .link-renouvellement-conventions {
-    color: $red-medium !important;
+    color: var(--error-425-625);
   }
+
   .fr-header__tools-links .fr-links-group > li {
     padding-left: 5px;
   }
+
   .fr-header__menu-links .fr-links-group > li {
     display: inline;
     line-height: 2.75rem;
     padding-bottom: 1rem;
   }
+
   .fr-header__menu-links .fr-links-group > li a {
-    font-size: 15px !important;
+    font-size: 15px;
   }
 
-  // Supprimer le picto flèche
   [target=_blank]::after {
     display: none;
   }

src/assets/sass/main.scss

@@ -7,9 +7,3 @@
 @use './views/carte';
 @use './components/footer';
 @use './components/header';
-@use '../../../public/styles-5.22.0';
-
-@import '../../../node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.min.css';
-@import '../../../node_modules/@gouvfr/dsfr/dist/utility/icons/icons-communication/icons-communication.min.css';
-@import '../../../node_modules/@gouvfr/dsfr/dist/utility/icons/icons-document/icons-document.min.css';
-@import '../../../node_modules/@gouvfr/dsfr/dist/utility/icons/icons-system/icons-system.min.css';

src/assets/sass/views/_aide.scss

@@ -1,7 +1,6 @@
 @import '../colors/colors';
 
 .aideCandidat, .aideStructure {
-
   a[target=_blank]::after {
     display: none; /* suppression du picto target blank */
   }
@@ -23,7 +22,7 @@
   }
 
   .white-text {
-    color: $white;
+    color: var(--grey-1000-50);
   }
 
   .buttonCustom {
@@ -32,7 +31,7 @@
     min-height: 2.5rem;
     line-height: 1.25rem;
     text-align: center;
-    background: $white;
+    background: var(--grey-1000-50);
     display: inline-block;
     padding: 1.5rem;
     border: none;
@@ -88,7 +87,5 @@
     .partProgram {
       flex-direction: column;
     }
-
   }
-
 }