From 4c716132b4f7b15f8692683765b6a2354b8a917e Mon Sep 17 00:00:00 2001 From: Alice Dahan Date: Fri, 20 Sep 2024 16:25:27 +0200 Subject: [PATCH] =?UTF-8?q?refactor(salari=C3=A9):=20R=C3=A9organise=20les?= =?UTF-8?q?=20composants=20de=20fiche=20de=20paie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../règles/protection-sociale.publicodes | 106 ++++++------ .../CotisationLine.tsx} | 6 +- .../Cotisations.tsx} | 157 ++++++++---------- site/source/components/FicheDePaie/Line.tsx | 40 +++++ .../components/{ => FicheDePaie}/PaySlip.css | 0 .../source/components/FicheDePaie/PaySlip.tsx | 42 +++++ .../components/FicheDePaie/SalaireBrut.tsx | 30 ++++ .../components/FicheDePaie/SalaireNet.tsx | 49 ++++++ site/source/components/PaySlipSections.tsx | 105 ------------ .../SalaryExplanation.tsx | 4 +- 10 files changed, 287 insertions(+), 252 deletions(-) rename site/source/components/{PaySlipCotisation.tsx => FicheDePaie/CotisationLine.tsx} (95%) rename site/source/components/{PaySlip.tsx => FicheDePaie/Cotisations.tsx} (79%) create mode 100644 site/source/components/FicheDePaie/Line.tsx rename site/source/components/{ => FicheDePaie}/PaySlip.css (100%) create mode 100644 site/source/components/FicheDePaie/PaySlip.tsx create mode 100644 site/source/components/FicheDePaie/SalaireBrut.tsx create mode 100644 site/source/components/FicheDePaie/SalaireNet.tsx delete mode 100644 site/source/components/PaySlipSections.tsx diff --git a/modele-social/règles/protection-sociale.publicodes b/modele-social/règles/protection-sociale.publicodes index 785f87f88..32cf54d6b 100644 --- a/modele-social/règles/protection-sociale.publicodes +++ b/modele-social/règles/protection-sociale.publicodes @@ -687,6 +687,51 @@ protection sociale . maladie . maternité paternité adoption: références: 'Congé maternité : les indemnités journalières pour les salariées ': https://www.ameli.fr/assure/remboursements/indemnites-journalieres/conge-maternite-salariee +protection sociale . maladie . accidents du travail et maladies professionnelles: + icônes: ☣️ + résumé: Offre une couverture complète des maladies ou accidents du travail. + description: | + Vous avez subi un accident du travail ou êtes atteint d’une maladie professionnelle ? + Vos frais médicaux sont pris en charge à 100 %. + + Pour compenser votre perte de salaire, vous pouvez percevoir des indemnités journalières. + Si vous êtes déclaré inapte suite à votre accident / maladie, vous pouvez recevoir une indemnité temporaire d'inaptitude. + unité: €/jour + applicable si: salarié + + références: + "Comprendre l'assurance AT/MP": https://www.ameli.fr/entreprise/votre-entreprise/cotisation-atmp + 'Maladie professionnelle : prise en charge et indemnités journalières': https://www.ameli.fr/assure/remboursements/indemnites-journalieres/maladie-professionnelle + 'Accident du travail : prise en charge et indemnités journalières': https://www.ameli.fr/assure/remboursements/indemnites-journalieres/accident-travail + "Qu'est-ce qu'un accident de trajet ?": https://www.service-public.fr/particuliers/vosdroits/F31881 + "Qu'est-ce qu'une maladie professionnelle ?": https://www.service-public.fr/particuliers/vosdroits/F31880 + "Accident du travail : indemnités journalières pendant l'arrêt de travail": https://www.service-public.fr/particuliers/vosdroits/F175 + "Maladie professionnelle : indemnités journalières pendant l'arrêt de travail": https://www.service-public.fr/particuliers/vosdroits/F32148 + Articles R433-1 à R433-17 du Code de la Sécurité Sociale: https://www.legifrance.gouv.fr/codes/id/LEGISCTA000006156659/2020-12-10/ + + avec: + indemmnités: + produit: + - salaire journalier de référence + - 60% + + avec: + à partir du 29ème jour: + produit: + - salaire journalier de référence + - 80% + + indemmnités . salaire journalier de référence: + privé: oui + valeur: salarié . cotisations . assiette + unité: €/jour + plafond: + arrondi: 2 décimales + unité: €/jour + le minimum de: + - 0.834% * (plafond sécurité sociale * 1 an) / 1 jour + - salarié . cotisations . assiette - abattement forfaitaire salarié + protection sociale . invalidité et décès: icônes: 🦽 type: branche @@ -929,51 +974,6 @@ protection sociale . famille: Allocations destinées aux familles: https://www.service-public.fr/particuliers/vosdroits/N156 Tout savoir sur les Allocations familiales: https://www.caf.fr/nous-connaitre/qui-sommes-nous -protection sociale . maladie . accidents du travail et maladies professionnelles: - icônes: ☣️ - résumé: Offre une couverture complète des maladies ou accidents du travail. - description: | - Vous avez subi un accident du travail ou êtes atteint d’une maladie professionnelle ? - Vos frais médicaux sont pris en charge à 100 %. - - Pour compenser votre perte de salaire, vous pouvez percevoir des indemnités journalières. - Si vous êtes déclaré inapte suite à votre accident / maladie, vous pouvez recevoir une indemnité temporaire d'inaptitude. - unité: €/jour - applicable si: salarié - - références: - "Comprendre l'assurance AT/MP": https://www.ameli.fr/entreprise/votre-entreprise/cotisation-atmp - 'Maladie professionnelle : prise en charge et indemnités journalières': https://www.ameli.fr/assure/remboursements/indemnites-journalieres/maladie-professionnelle - 'Accident du travail : prise en charge et indemnités journalières': https://www.ameli.fr/assure/remboursements/indemnites-journalieres/accident-travail - "Qu'est-ce qu'un accident de trajet ?": https://www.service-public.fr/particuliers/vosdroits/F31881 - "Qu'est-ce qu'une maladie professionnelle ?": https://www.service-public.fr/particuliers/vosdroits/F31880 - "Accident du travail : indemnités journalières pendant l'arrêt de travail": https://www.service-public.fr/particuliers/vosdroits/F175 - "Maladie professionnelle : indemnités journalières pendant l'arrêt de travail": https://www.service-public.fr/particuliers/vosdroits/F32148 - Articles R433-1 à R433-17 du Code de la Sécurité Sociale: https://www.legifrance.gouv.fr/codes/id/LEGISCTA000006156659/2020-12-10/ - - avec: - indemmnités: - produit: - - salaire journalier de référence - - 60% - - avec: - à partir du 29ème jour: - produit: - - salaire journalier de référence - - 80% - - indemmnités . salaire journalier de référence: - privé: oui - valeur: salarié . cotisations . assiette - unité: €/jour - plafond: - arrondi: 2 décimales - unité: €/jour - le minimum de: - - 0.834% * (plafond sécurité sociale * 1 an) / 1 jour - - salarié . cotisations . assiette - abattement forfaitaire salarié - protection sociale . formation: icônes: 👩‍🎓 résumé: Finance la possibilité de suivre des formations professionnelles. @@ -982,14 +982,6 @@ protection sociale . formation: Pour avoir un compte-rendu personnalisé de vos droits à la formation, rendez-vous sur [www.moncompteactivite.gouv.fr](https://www.moncompteactivite.gouv.fr). -protection sociale . autres: - icônes: 🔧 - résumé: Autres contributions au système social. - description: | - Toutes les contributions transverses au système social. - - On y retrouve par exemple la CRDS (contribution pour le remboursement de la dette sociale) qui est un impôt destiné à résorber l'endettement de la Sécurité sociale, et ainsi assurer la viabilité de la protection sociale pour vos enfants et petits enfants. - protection sociale . transport: icônes: 🚌 résumé: Permet de maintenir le prix d'un billet de transport en commun à un bas prix @@ -1001,3 +993,11 @@ protection sociale . transport: - **263 € / an / habitant** de gain de pouvoir d'achat pour les habitants d'Île-de-France références: wikipedia: https://fr.wikipedia.org/wiki/Versement_transport + +protection sociale . autres: + icônes: 🔧 + résumé: Autres contributions au système social. + description: | + Toutes les contributions transverses au système social. + + On y retrouve par exemple la CRDS (contribution pour le remboursement de la dette sociale) qui est un impôt destiné à résorber l'endettement de la Sécurité sociale, et ainsi assurer la viabilité de la protection sociale pour vos enfants et petits enfants. diff --git a/site/source/components/PaySlipCotisation.tsx b/site/source/components/FicheDePaie/CotisationLine.tsx similarity index 95% rename from site/source/components/PaySlipCotisation.tsx rename to site/source/components/FicheDePaie/CotisationLine.tsx index f9e8f3da2..722eea6e9 100644 --- a/site/source/components/PaySlipCotisation.tsx +++ b/site/source/components/FicheDePaie/CotisationLine.tsx @@ -6,7 +6,11 @@ import { useTranslation } from 'react-i18next' import RuleLink from '@/components/RuleLink' import { EngineContext } from '@/components/utils/EngineContext' -export default function Cotisation({ dottedName }: { dottedName: DottedName }) { +export default function CotisationLine({ + dottedName, +}: { + dottedName: DottedName +}) { const language = useTranslation().i18n.language const engine = useContext(EngineContext) const partSalariale = engine.evaluate( diff --git a/site/source/components/PaySlip.tsx b/site/source/components/FicheDePaie/Cotisations.tsx similarity index 79% rename from site/source/components/PaySlip.tsx rename to site/source/components/FicheDePaie/Cotisations.tsx index 8903e91e7..573bcf82f 100644 --- a/site/source/components/PaySlip.tsx +++ b/site/source/components/FicheDePaie/Cotisations.tsx @@ -3,20 +3,78 @@ import { ASTNode, ParsedRules, reduceAST, Rule, RuleNode } from 'publicodes' import { Fragment } from 'react' import { Trans } from 'react-i18next' -import { useEngine } from '@/components/utils/EngineContext' +import './PaySlip.css' + import { Strong } from '@/design-system/typography' import { H4, H5 } from '@/design-system/typography/heading' import { Body } from '@/design-system/typography/paragraphs' -import { ExplicableRule } from './conversation/Explicable' -import Value from './EngineValue/Value' +import { ExplicableRule } from '../conversation/Explicable' +import Value from '../EngineValue/Value' +import { useEngine } from '../utils/EngineContext' +import CotisationLine from './CotisationLine' +import Line from './Line' -import './PaySlip.css' +export function Cotisations() { + const parsedRules = useEngine().getParsedRules() + const cotisationsBySection = getCotisationsBySection(parsedRules) -import { styled } from 'styled-components' + return ( + <> +
+

+ Cotisations sociales +

+

+ employeur +

+

+ salarié +

+ {cotisationsBySection.map(([sectionDottedName, cotisations]) => { + const section = parsedRules[sectionDottedName] -import Cotisation from './PaySlipCotisation' -import { Line, SalaireBrutSection, SalaireNetSection } from './PaySlipSections' + return ( + +
+ {section.title} + +
+ {cotisations.map((cotisation) => ( + + ))} + + ) + })} + + {/* Total cotisation */} + + + Total des retenues + + +
+ +
+
+ +
+ + {/* Salaire chargé */} + + +
+ + ) +} export const SECTION_ORDER = [ 'protection sociale . maladie', @@ -97,88 +155,3 @@ export function getCotisationsBySection( SECTION_ORDER.indexOf(b as Section) ) as Array<[Section, DottedName[]]> } - -export default function PaySlip() { - const parsedRules = useEngine().getParsedRules() - const cotisationsBySection = getCotisationsBySection(parsedRules) - - return ( - -
- - -
- - - {/* Section cotisations */} -
-

- Cotisations sociales -

-

- employeur -

-

- salarié -

- {cotisationsBySection.map(([sectionDottedName, cotisations]) => { - const section = parsedRules[sectionDottedName] - - return ( - -
- {section.title} - -
- {cotisations.map((cotisation) => ( - - ))} - - ) - })} - {/* Total cotisation */} - - - Total des retenues - - -
- -
-
- -
- {/* Salaire chargé */} - - -
- {/* Section salaire net */} - - - ) -} - -const StyledContainer = styled.div` - .value { - display: flex; - align-items: flex-end; - justify-content: flex-end; - padding-right: 0.2em; - } -` diff --git a/site/source/components/FicheDePaie/Line.tsx b/site/source/components/FicheDePaie/Line.tsx new file mode 100644 index 000000000..df8f4d1b0 --- /dev/null +++ b/site/source/components/FicheDePaie/Line.tsx @@ -0,0 +1,40 @@ +import { DottedName } from 'modele-social' + +import { ValueProps } from '@/components/EngineValue/types' +import RuleLink from '@/components/RuleLink' + +import { Condition } from '../EngineValue/Condition' +import Value from '../EngineValue/Value' +import { WhenAlreadyDefined } from '../EngineValue/WhenAlreadyDefined' +import { WhenApplicable } from '../EngineValue/WhenApplicable' + +type LineProps = { + rule: DottedName + title?: string + negative?: boolean +} & Omit, 'expression'> + +export default function Line({ + rule, + displayedUnit = '€', + negative = false, + title, + ...props +}: LineProps) { + return ( + + + 0`}> + {title} + + + + + ) +} diff --git a/site/source/components/PaySlip.css b/site/source/components/FicheDePaie/PaySlip.css similarity index 100% rename from site/source/components/PaySlip.css rename to site/source/components/FicheDePaie/PaySlip.css diff --git a/site/source/components/FicheDePaie/PaySlip.tsx b/site/source/components/FicheDePaie/PaySlip.tsx new file mode 100644 index 000000000..7e066de99 --- /dev/null +++ b/site/source/components/FicheDePaie/PaySlip.tsx @@ -0,0 +1,42 @@ +import './PaySlip.css' + +import { styled } from 'styled-components' + +import { Cotisations } from './Cotisations' +import Line from './Line' +import SalaireBrut from './SalaireBrut' +import SalaireNet from './SalaireNet' + +export default function PaySlip() { + return ( + +
+ + +
+ + + + + + ) +} + +const StyledContainer = styled.div` + line-height: 1.5rem; + + .value { + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding-right: 0.2em; + } +` diff --git a/site/source/components/FicheDePaie/SalaireBrut.tsx b/site/source/components/FicheDePaie/SalaireBrut.tsx new file mode 100644 index 000000000..cbaf674e4 --- /dev/null +++ b/site/source/components/FicheDePaie/SalaireBrut.tsx @@ -0,0 +1,30 @@ +import { Trans } from 'react-i18next' + +import { H4 } from '@/design-system/typography/heading' + +import { Condition } from '../EngineValue/Condition' +import Line from './Line' + +import './PaySlip.css' + +export default function SalaireBrut() { + return ( +
+

+ Salaire +

+ + + + + + + + + + + + +
+ ) +} diff --git a/site/source/components/FicheDePaie/SalaireNet.tsx b/site/source/components/FicheDePaie/SalaireNet.tsx new file mode 100644 index 000000000..3efadafe0 --- /dev/null +++ b/site/source/components/FicheDePaie/SalaireNet.tsx @@ -0,0 +1,49 @@ +import { Trans, useTranslation } from 'react-i18next' + +import './PaySlip.css' + +import { H4 } from '@/design-system/typography/heading' + +import { Condition } from '../EngineValue/Condition' +import Line from './Line' + +export default function SalaireNet() { + const { t } = useTranslation() + + return ( +
+

+ Salaire net +

+ + + + + + + + + + + +
+ ) +} diff --git a/site/source/components/PaySlipSections.tsx b/site/source/components/PaySlipSections.tsx deleted file mode 100644 index d20c4a999..000000000 --- a/site/source/components/PaySlipSections.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { DottedName } from 'modele-social' -import { Trans, useTranslation } from 'react-i18next' - -import { ValueProps } from '@/components/EngineValue/types' -import RuleLink from '@/components/RuleLink' -import { H4 } from '@/design-system/typography/heading' - -import { Condition } from './EngineValue/Condition' -import Value from './EngineValue/Value' -import { WhenAlreadyDefined } from './EngineValue/WhenAlreadyDefined' -import { WhenApplicable } from './EngineValue/WhenApplicable' - -export const SalaireBrutSection = () => { - return ( -
-

- Salaire -

- - - - - - - - - - - - -
- ) -} - -export const SalaireNetSection = () => { - const { t } = useTranslation() - - return ( -
-

- Salaire net -

- - - - - - - - - - - -
- ) -} - -type LineProps = { - rule: DottedName - title?: string - negative?: boolean -} & Omit, 'expression'> - -export function Line({ - rule, - displayedUnit = '€', - negative = false, - title, - ...props -}: LineProps) { - return ( - - - 0`}> - {title} - - - - - ) -} diff --git a/site/source/components/simulationExplanation/SalaryExplanation.tsx b/site/source/components/simulationExplanation/SalaryExplanation.tsx index 5db80e30b..b3f70146c 100644 --- a/site/source/components/simulationExplanation/SalaryExplanation.tsx +++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx @@ -2,7 +2,6 @@ import { useRef } from 'react' import { Trans, useTranslation } from 'react-i18next' import { useTheme } from 'styled-components' -import PaySlip, { getCotisationsBySection } from '@/components/PaySlip' import { ÀQuoiServentMesCotisationsSection } from '@/components/simulationExplanation/ÀQuoiServentMesCotisationsSection' import StackedBarChart from '@/components/StackedBarChart' import { FromTop } from '@/components/ui/animate' @@ -14,6 +13,9 @@ import { Link } from '@/design-system/typography/link' import { SmallBody } from '@/design-system/typography/paragraphs' import { useCurrentSimulatorData } from '@/hooks/useCurrentSimulatorData' +import { getCotisationsBySection } from '../FicheDePaie/Cotisations' +import PaySlip from '../FicheDePaie/PaySlip' + export default function SalaryExplanation() { const payslipRef = useRef(null)