Skip to content

Commit

Permalink
feat(route): replace modal eligibility with dedicated page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rebeccadumazert
rebeccadumazert committed Aug 14, 2024
1 parent a43279e commit 41b28da
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 114 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
27 changes: 4 additions & 23 deletions src/Pages/Eligibility/EligibilityTest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 4 additions & 0 deletions src/Pages/Eligibility/eligibility.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@
padding: 20px;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 18, 0.16);
}

.bold {
font-weight: bold;
}
155 changes: 65 additions & 90 deletions src/Pages/HomeLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 />}
Expand Down
5 changes: 5 additions & 0 deletions src/Pages/SiteMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions src/routes/Router.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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([
{
Expand All @@ -26,6 +27,14 @@ const router = createBrowserRouter([
</WrapperLayout>
),
},
{
path: '/eligibilite',
element: (
<WrapperLayout>
<EligibilityTest></EligibilityTest>
</WrapperLayout>
),
},
{
path: '/feuille-de-route',
element: (
Expand Down

0 comments on commit 41b28da

Please sign in to comment.