Skip to content

Commit

Permalink
refactor(routes): declare sub routes for lgbt
Browse files Browse the repository at this point in the history
  • Loading branch information
rebeccadumazert committed Aug 14, 2024
1 parent ccd9eab commit b021bc1
Show file tree
Hide file tree
Showing 6 changed files with 213 additions and 189 deletions.
192 changes: 4 additions & 188 deletions src/Pages/Eligibility/EligibilityTest.tsx
Original file line number Diff line number Diff line change
@@ -1,197 +1,13 @@
import { Outlet } from 'react-router-dom';

Check failure on line 1 in src/Pages/Eligibility/EligibilityTest.tsx

View workflow job for this annotation

GitHub Actions / test

'Outlet' is declared but its value is never read.
import './eligibility.css';
import eligibility from '../../assets/eligibility.svg';
import { RadioButtons } from '@codegouvfr/react-dsfr/RadioButtons';
import Button from '@codegouvfr/react-dsfr/Button';
import coding from '../../assets/coding.svg';
import { useState } from 'react';
import React from 'react';
import Lottie from 'react-lottie';
import notEligible from '../../assets/notEligible.svg';
import eligibleAnimation from '../../assets/Success.json';

function EligibilityTest() {
const [selectedOption, setSelectedOption] = useState<
| 'asso_entreprise_prive'
| 'autre_structure_public'
| 'operateur_etat'
| 'fonction_publique_hospitaliere'
| 'fonction_publique_territoriale'
| 'fonction_publique_etat'
| undefined
>(undefined);
const [showResponse, setShowResponse] = useState<boolean>(false);

const defaultOptions = {
loop: true,
autoplay: true,
animationData: eligibleAnimation,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
import { WhoIsYourBoss } from './WhoIsYourBoss';

function EligibilityTest() {
return (
<div className="fr-container" id="componentStart">
{!showResponse ? (
<React.Fragment>
<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">
<img src={eligibility} alt="" />
</div>
<div className="fr-col-12 fr-col-md-6">
<h1 className="fr-h2">Testez votre égibilité !</h1>
<RadioButtons
legend="Qui est votre employeur ?"
name="radio"
options={[
{
label: `Fonction publique d'État`,
nativeInputProps: {
checked:
selectedOption === 'fonction_publique_etat',
onChange: () =>
setSelectedOption('fonction_publique_etat'),
},
},
{
label: 'Fonction publique territoriale',
nativeInputProps: {
checked:
selectedOption ===
'fonction_publique_territoriale',
onChange: () =>
setSelectedOption(
'fonction_publique_territoriale',
),
},
},
{
label: 'Fonction publique hospitalière',
nativeInputProps: {
checked:
selectedOption ===
'fonction_publique_hospitaliere',
onChange: () =>
setSelectedOption(
'fonction_publique_hospitaliere',
),
},
},
{
label: `Opérateur de l'État`,
nativeInputProps: {
checked: selectedOption === 'operateur_etat',
onChange: () =>
setSelectedOption('operateur_etat'),
},
},
{
label: `Autre structure du service public`,
nativeInputProps: {
checked:
selectedOption === 'autre_structure_public',
onChange: () =>
setSelectedOption('autre_structure_public'),
},
},
{
label: `Association ou entreprise privée`,
nativeInputProps: {
checked:
selectedOption === 'asso_entreprise_prive',
onChange: () =>
setSelectedOption('asso_entreprise_prive'),
},
},
]}
state="default"
/>
<Button onClick={() => setShowResponse(true)}>Valider</Button>
</div>
</div>
</div>
</div>
<div className="fr-container fr-col-12 fr-col-md-8 fr-py-6w fr-py-md-2w fr-mt-4w fr-mb-8w card-radius">
<div className="fr-container centered-content">
<div className="fr-grid-row fr-grid-row--center fr-grid-row--middle">
<div className="fr-col-1 fr-hidden fr-unhidden-md ">
<img src={coding} alt="" />
</div>
<div className="fr-ml-3w">
<p className="centered-content delete-margin-bottom bold">
Vous voulez intégrer AgentConnect sur votre site ?
</p>
</div>
</div>
</div>
<div className="fr-container centered-text fr-my-2w">
<a
className="fr-raw-link"
href="mailto:[email protected]"
>
<Button className="fr-mr-2w fr-mb-2w" iconId="fr-icon-mail-line">
Nous écrire
</Button>
</a>
<a
className="fr-raw-link"
href="https://github.com/numerique-gouv/agentconnect-documentation/blob/main/README.md#-agentconnect---documentation"
>
<Button priority="secondary" iconId="fr-icon-code-s-slash-line">
Commencer vos tests
</Button>
</a>
</div>
</div>
</React.Fragment>
) : (
<React.Fragment>
<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">
<div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
<Lottie options={defaultOptions} height={300} width={300} />
</div>
<div className="fr-col-12 fr-col-md-6">
<h1 className="fr-h2">
Bonne nouvelle, vous êtes éligible !
</h1>
<p>
Vous pouvez dès maintenant utiliser AgentConnect pour
vous connecter à de nombreux outils et sites de
l'administration
</p>
<a className="fr-raw-link" href="/services">
<Button>Explorer l'annuaire des sites</Button>
</a>
</div>
</div>
</div>
) : (
<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">
<img src={notEligible} alt="" />
</div>
<div className="fr-col-12 fr-col-md-6">
<h1 className="fr-h2">Vous n'êtes pas éligible.</h1>
<p>
AgentConnect est réservé aux agents publics. Les
associations et entreprises privées ne peuvent pas
l'utiliser.
</p>
</div>
</div>
</div>
)}
</div>
</React.Fragment>
)}
<WhoIsYourBoss />
</div>
// </Element>
);
}
export default EligibilityTest;
38 changes: 38 additions & 0 deletions src/Pages/Eligibility/Eligible.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Button from '@codegouvfr/react-dsfr/Button';
import Lottie from 'react-lottie';
import eligibleAnimation from '../../assets/Success.json';

const defaultOptions = {
loop: true,
autoplay: true,
animationData: eligibleAnimation,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};

export function Eligible() {
return (
<div className="fr-container">
<div className="container fr-my-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">
<Lottie options={defaultOptions} height={300} width={300} />
</div>
<div className="fr-col-12 fr-col-md-6">
<h1 className="fr-h2">Bonne nouvelle, vous êtes éligible !</h1>
<p>
Vous pouvez dès maintenant utiliser AgentConnect pour vous connecter
à de nombreux outils et sites de l'administration
</p>
<a className="fr-raw-link" href="/services">
<Button>Explorer l'annuaire des sites</Button>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
24 changes: 24 additions & 0 deletions src/Pages/Eligibility/NotEligible.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import notEligible from '../../assets/notEligible.svg';

export function NotEligible() {
return (
<div className="fr-container">
<div className="container fr-my-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">
<img src={notEligible} alt="" />
</div>
<div className="fr-col-12 fr-col-md-6">
<h1 className="fr-h2">Vous n'êtes pas éligible.</h1>
<p>
AgentConnect est réservé aux agents publics. Les associations et
entreprises privées ne peuvent pas l'utiliser.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
82 changes: 82 additions & 0 deletions src/Pages/Eligibility/WhoIsYourBoss.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import eligibility from '../../assets/eligibility.svg';
import { RadioButtons } from '@codegouvfr/react-dsfr/RadioButtons';
import Button from '@codegouvfr/react-dsfr/Button';
import coding from '../../assets/coding.svg';
import { useState } from 'react';
import { bosses, bossNames, bossNameType } from './constants';

export function WhoIsYourBoss() {
const [selectedOption, setSelectedOption] = useState<bossNameType | undefined>(undefined);
return (
<>
<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">
<img src={eligibility} alt="" />
</div>
<div className="fr-col-12 fr-col-md-6">
<h1 className="fr-h2">Testez votre éligibilité !</h1>
<RadioButtons
legend="Qui est votre employeur ?"
name="radio"
options={bossNames.map((name) => {
const { label } = bosses[name];
return {
label,
nativeInputProps: {
checked: selectedOption === name,
onChange: () => setSelectedOption(name),
},
};
})}
state="default"
/>
<a
href={
selectedOption && bosses[selectedOption].isEligible
? '/eligibilite/eligible'
: '/eligibilite/non-eligible'
}
>
<Button>Valider</Button>
</a>
</div>
</div>
</div>
</div>
<div className="fr-container fr-col-12 fr-col-md-8 fr-py-6w fr-py-md-2w fr-mt-4w fr-mb-8w card-radius">
<div className="fr-container centered-content">
<div className="fr-grid-row fr-grid-row--center fr-grid-row--middle">
<div className="fr-col-1 fr-hidden fr-unhidden-md ">
<img src={coding} alt="" />
</div>
<div className="fr-ml-3w">
<p className="centered-content delete-margin-bottom bold">
Vous voulez intégrer AgentConnect sur votre site ?
</p>
</div>
</div>
</div>
<div className="fr-container centered-text fr-my-2w">
<a
className="fr-raw-link"
href="mailto:[email protected]"
>
<Button className="fr-mr-2w fr-mb-2w" iconId="fr-icon-mail-line">
Nous écrire
</Button>
</a>
<a
className="fr-raw-link"
href="https://github.com/numerique-gouv/agentconnect-documentation/blob/main/README.md#-agentconnect---documentation"
>
<Button priority="secondary" iconId="fr-icon-code-s-slash-line">
Commencer vos tests
</Button>
</a>
</div>
</div>
</>
);
}
46 changes: 46 additions & 0 deletions src/Pages/Eligibility/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
const bossNames = [
'fonction_publique_etat',
'fonction_publique_territoriale',
'fonction_publique_hospitaliere',
'operateur_etat',
'autre_structure_public',
'asso_entreprise_prive',
] as const;

type bossNameType = (typeof bossNames)[number];

const bosses: Record<
bossNameType,
{
label: string;
isEligible: boolean;
}
> = {
fonction_publique_etat: {
label: "Fonction publique d'État",
isEligible: true,
},
fonction_publique_territoriale: {
label: 'Fonction publique territoriale',
isEligible: true,
},
fonction_publique_hospitaliere: {
label: 'Fonction publique hospitalière',
isEligible: true,
},
operateur_etat: {
label: "Opérateur de l'État",
isEligible: true,
},
autre_structure_public: {
label: 'Autre structure du service public',
isEligible: true,
},
asso_entreprise_prive: {
label: 'Association ou entreprise privée',
isEligible: false,
},
};

export { bosses, bossNames };
export type { bossNameType };
Loading

0 comments on commit b021bc1

Please sign in to comment.