From 41b28da0732337fda14f3fafb286e398b1fd48f0 Mon Sep 17 00:00:00 2001
From: rebeccadumazert <rebeccadumazert@hotmail.fr>
Date: Wed, 14 Aug 2024 11:49:07 +0200
Subject: [PATCH] feat(route): replace modal eligibility with dedicated page

---
 index.html                                |   2 +-
 src/Pages/Eligibility/EligibilityTest.tsx |  27 +---
 src/Pages/Eligibility/eligibility.css     |   4 +
 src/Pages/HomeLayout.tsx                  | 155 +++++++++-------------
 src/Pages/SiteMap.tsx                     |   5 +
 src/routes/Router.tsx                     |   9 ++
 6 files changed, 88 insertions(+), 114 deletions(-)

diff --git a/index.html b/index.html
index b3c9489..83e1006 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
             crossorigin="use-credentials"
         />
 
-        <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=b9c27aa0" />
+        <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=30e8456" />
         <link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
         <!-- Matomo -->
         <script>
diff --git a/src/Pages/Eligibility/EligibilityTest.tsx b/src/Pages/Eligibility/EligibilityTest.tsx
index 06fa45c..5f575ca 100644
--- a/src/Pages/Eligibility/EligibilityTest.tsx
+++ b/src/Pages/Eligibility/EligibilityTest.tsx
@@ -9,7 +9,7 @@ import Lottie from 'react-lottie';
 import notEligible from '../../assets/notEligible.svg';
 import eligibleAnimation from '../../assets/Success.json';
 
-function EligibilityTest({ closeTestEligibility }: any) {
+function EligibilityTest() {
     const [selectedOption, setSelectedOption] = useState<
         | 'asso_entreprise_prive'
         | 'autre_structure_public'
@@ -30,26 +30,11 @@ function EligibilityTest({ closeTestEligibility }: any) {
         },
     };
 
-    const closeTest = (
-        <Button
-            className="fr-mt-2w"
-            iconId="ri-close-large-line"
-            onClick={function noRefCheck() {
-                closeTestEligibility(false);
-            }}
-            priority="tertiary no outline"
-            title="Label button"
-        >
-            Fermer
-        </Button>
-    );
-
     return (
         <div className="fr-container" id="componentStart">
             {!showResponse ? (
                 <React.Fragment>
-                    {closeTest}
-                    <div className="container fr-mt-1w">
+                    <div className="container fr-mt-8w">
                         <div className="fr-container fr-py-3w">
                             <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
                                 <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
@@ -135,10 +120,7 @@ function EligibilityTest({ closeTestEligibility }: any) {
                                     <img src={coding} alt="" />
                                 </div>
                                 <div className="fr-ml-3w">
-                                    <p
-                                        style={{ fontWeight: 'bold' }}
-                                        className="centered-content delete-margin-bottom"
-                                    >
+                                    <p className="centered-content delete-margin-bottom bold">
                                         Vous voulez intégrer AgentConnect sur votre site ?
                                     </p>
                                 </div>
@@ -166,8 +148,7 @@ function EligibilityTest({ closeTestEligibility }: any) {
                 </React.Fragment>
             ) : (
                 <React.Fragment>
-                    {closeTest}
-                    <div className="container fr-mt-1w fr-mb-8w">
+                    <div className="container fr-my-8w">
                         {selectedOption !== 'asso_entreprise_prive' ? (
                             <div className="fr-container fr-py-3w">
                                 <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
diff --git a/src/Pages/Eligibility/eligibility.css b/src/Pages/Eligibility/eligibility.css
index fe0847b..5338e46 100644
--- a/src/Pages/Eligibility/eligibility.css
+++ b/src/Pages/Eligibility/eligibility.css
@@ -5,3 +5,7 @@
     padding: 20px;
     box-shadow: 0px 2px 6px 0px rgba(0, 0, 18, 0.16);
 }
+
+.bold {
+    font-weight: bold;
+}
diff --git a/src/Pages/HomeLayout.tsx b/src/Pages/HomeLayout.tsx
index c5d36f2..14111cd 100644
--- a/src/Pages/HomeLayout.tsx
+++ b/src/Pages/HomeLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import welcome from '../assets/welcome.svg';
 // import PrivateProfessional from './PrivateProfessional';
 import './layout.css';
@@ -7,113 +7,88 @@ import Button from '@codegouvfr/react-dsfr/Button';
 import whatService from '../assets/quelService.svg';
 import HowDoesItWork from '../components/HowDoesItWork/HowDoesItWork';
 import { tilesData } from '../Datas';
-import EligibilityTest from './Eligibility/EligibilityTest';
 
 // type ComponentType = 'publicMember' | 'privateProfessional';
 
 function HomeLayout() {
-    const [showedEligibilityComponent, setShowedEligibilityComponent] = useState<boolean>(false);
-
-    const handleClick = () => {
-        setShowedEligibilityComponent(true);
-    };
-
-    useEffect(() => {
-        if (showedEligibilityComponent) {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth',
-            });
-        }
-    }, [showedEligibilityComponent]);
-
     return (
         <React.Fragment>
-            {showedEligibilityComponent ? (
-                <EligibilityTest
-                    closeTestEligibility={setShowedEligibilityComponent}
-                ></EligibilityTest>
-            ) : (
-                <React.Fragment>
-                    <div className="fr-container--fluid background-welcome-page">
-                        <div className="fr-container fr-py-4w fr-py-md-8w">
-                            <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
-                                <div className="fr-col-12 fr-col-md-6">
-                                    <h1 className="fr-h2">
-                                        Avec le bouton
-                                        <span className="blue-france">AgentConnect</span>
-                                        ,
-                                        <br />
-                                        nous vous identifions <br />
-                                        sur les sites de l'administration.
-                                    </h1>
-                                    {/* <p>Vous êtes :</p> */}
-                                    <Button
-                                        onClick={() => handleClick()}
-                                        // isSelected={selectedComponent === 'publicMember'}
-                                    >
-                                        <i className={fr.cx('ri-user-star-line') + ' fr-pr-2w'} />
-                                        Testez votre éligibilité
-                                    </Button>
-                                    {/* <ButtonRadius
+            <div className="fr-container--fluid background-welcome-page">
+                <div className="fr-container fr-py-4w fr-py-md-8w">
+                    <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+                        <div className="fr-col-12 fr-col-md-6">
+                            <h1 className="fr-h2">
+                                Avec le bouton
+                                <span className="blue-france">AgentConnect</span>
+                                ,
+                                <br />
+                                nous vous identifions <br />
+                                sur les sites de l'administration.
+                            </h1>
+                            {/* <p>Vous êtes :</p> */}
+                            <a className="fr-raw-link" href="/eligibilite">
+                                <Button
+                                // isSelected={selectedComponent === 'publicMember'}
+                                >
+                                    <i className={fr.cx('ri-user-star-line') + ' fr-pr-2w'} />
+                                    Testez votre éligibilité
+                                </Button>
+                            </a>
+                            {/* <ButtonRadius
                                 onClick={() => handleButtonClick('privateProfessional')}
                                 isSelected={selectedComponent === 'privateProfessional'}
                             >
                                 Professionnel du privé
                             </ButtonRadius> */}
-                                </div>
-                                <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
-                                    <img src={welcome} alt="" />
-                                </div>
-                            </div>
+                        </div>
+                        <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
+                            <img src={welcome} alt="" />
                         </div>
                     </div>
+                </div>
+            </div>
+            <div className="fr-container">
+                <HowDoesItWork tiles={tilesData}></HowDoesItWork>
+                <div className="fr-container--fluid">
+                    <div className="fr-container fr-py-4w fr-py-md-8w">
+                        <div className="fr-grid-row fr-grid-row--gutters">
+                            <div className="fr-col-12 fr-col-md-7 fr-pt-0">
+                                <h1 className="fr-h3">
+                                    A quels services en ligne pouvez-vous vous connecter ?
+                                </h1>
+                                <p>
+                                    Grâce au bouton AgentConnect, accédez à tous les outils de la
+                                    DINUM,
+                                    <br />à la Suite Numérique et à tous les services
+                                    interministériels de nos partenaires.
+                                </p>
+                                <a href="/services" className="blue-france fr-mb-5w">
+                                    Découvrez l’annuaire des services&nbsp;
+                                    <span
+                                        className="fr-icon-arrow-right-line"
+                                        aria-hidden="true"
+                                    ></span>
+                                </a>
+                            </div>
+                            <div className="fr-col-4 fr-col-offset-1 fr-p-4w fr-hidden fr-unhidden-md centered-content card-radius">
+                                <div className="display-column">
+                                    <img src={whatService} className="fr-mb-2w" alt="" />
 
-                    <div className="fr-container">
-                        <HowDoesItWork tiles={tilesData}></HowDoesItWork>
-                        <div className="fr-container--fluid">
-                            <div className="fr-container fr-py-4w fr-py-md-8w">
-                                <div className="fr-grid-row fr-grid-row--gutters">
-                                    <div className="fr-col-12 fr-col-md-7 fr-pt-0">
-                                        <h1 className="fr-h3">
-                                            A quels services en ligne pouvez-vous vous connecter ?
-                                        </h1>
-                                        <p>
-                                            Grâce au bouton AgentConnect, accédez à tous les outils
-                                            de la DINUM,
-                                            <br />à la Suite Numérique et à tous les services
-                                            interministériels de nos partenaires.
-                                        </p>
-                                        <a href="/services" className="blue-france fr-mb-5w">
-                                            Découvrez l’annuaire des services&nbsp;
-                                            <span
-                                                className="fr-icon-arrow-right-line"
-                                                aria-hidden="true"
-                                            ></span>
-                                        </a>
-                                    </div>
-                                    <div className="fr-col-4 fr-col-offset-1 fr-p-4w fr-hidden fr-unhidden-md centered-content card-radius">
-                                        <div className="display-column">
-                                            <img src={whatService} className="fr-mb-2w" alt="" />
-
-                                            <h3 className="fr-text--lead centered-text">
-                                                Êtes-vous éligible <br />à AgentConnect ?
-                                            </h3>
-                                            <Button
-                                                onClick={() => setShowedEligibilityComponent(true)}
-                                            >
-                                                <i className="ri-user-star-line fr-pr-1w"></i>
-                                                Testez votre éligibilité
-                                            </Button>
-                                        </div>
-                                    </div>
+                                    <h3 className="fr-text--lead centered-text">
+                                        Êtes-vous éligible <br />à AgentConnect ?
+                                    </h3>
+                                    <a className="fr-raw-link" href="/eligibilite">
+                                        <Button>
+                                            <i className="ri-user-star-line fr-pr-1w"></i>
+                                            Testez votre éligibilité
+                                        </Button>
+                                    </a>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </React.Fragment>
-            )}
-
+                </div>
+            </div>
             {/* <Element name="componentStart">
                 {selectedComponent === 'publicMember' && <AgentPublic />}
                 {selectedComponent === 'privateProfessional' && <PrivateProfessional />}
diff --git a/src/Pages/SiteMap.tsx b/src/Pages/SiteMap.tsx
index 7f1d4c8..4750719 100644
--- a/src/Pages/SiteMap.tsx
+++ b/src/Pages/SiteMap.tsx
@@ -13,6 +13,11 @@ function SiteMap() {
                         Annuaire des services
                     </a>
                 </li>
+                <li>
+                    <a className="fr-raw-link" href="/eligibilite">
+                        Testez votre éligibilité
+                    </a>
+                </li>
                 <li>
                     <a className="fr-raw-link" href="/feuille-de-route">
                         Feuille de route
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 46596b7..b0ab50a 100644
--- a/src/routes/Router.tsx
+++ b/src/routes/Router.tsx
@@ -8,6 +8,7 @@ import InConstruction from '../Pages/InConstruction';
 import Cgu from '../Pages/Cgu';
 import LegalNotices from '../Pages/LegalNotices';
 import Stats from '../Pages/Stats';
+import EligibilityTest from '../Pages/Eligibility/EligibilityTest';
 
 const router = createBrowserRouter([
     {
@@ -26,6 +27,14 @@ const router = createBrowserRouter([
             </WrapperLayout>
         ),
     },
+    {
+        path: '/eligibilite',
+        element: (
+            <WrapperLayout>
+                <EligibilityTest></EligibilityTest>
+            </WrapperLayout>
+        ),
+    },
     {
         path: '/feuille-de-route',
         element: (