Feat (salarié) : Met à jour la présentation de la fiche de paie

modele-social/règles/salarié/rémunération.publicodes

@@ -394,14 +394,21 @@ salarié . rémunération . frais professionnels:
 
  avec:
  déductible:
- titre: Part déductibles
+ titre: Part déductible
  description: >-
  Part des frais déduite de l'assiette de cotisation sociale et pour le calcul
  de l'impôt sur le revenu.
  somme:
  - titres-restaurant . déductible
  - trajets domicile travail . déductible
 
+ non déductible:
+ titre: Part non déductible
+ somme:
+ - titres-restaurant . employeur
+ - trajets domicile travail . employeur
+ abattement: déductible
+
  titres-restaurant:
  icônes: 🍽️
  description: >-
@@ -424,7 +431,7 @@ salarié . rémunération . frais professionnels:
 
  avec:
  déductible:
- titre: Titre restaurant déductibles
+ titre: Part déductible
  valeur: employeur
  plafond:
  produit:
@@ -481,6 +488,10 @@ salarié . rémunération . frais professionnels:
  5 repas/semaine: 5 titres-restaurant/semaine * période . semaines par mois
  3 repas/semaine: 3 titres-restaurant/semaine * période . semaines par mois
 
+ salarié:
+ valeur: montant
+ abattement: employeur
+
  taux employeur:
  description: >-
  Part du titre-restaurant payée par l'employeur. Doit être de 50% minimum
@@ -853,8 +864,10 @@ salarié . rémunération . montant net social:
  description: |
  Le montant net social, ou MNS, correspond au montant de référence à déclarer par
  les allocataires depuis le 1er février 2024 pour bénéficier de la Prime d’activité
- et du revenu de solidarité active (RSA). Il facilite les démarches administratives, limite les
- risques d’erreur de déclaration et réduit le taux de non-recours aux droits.
+ et du revenu de solidarité active (RSA).
+
+ Le résultat affiché est une estimation qui ne tient pas compte de tous les éléments
+ de votre situation.
  unité: €/mois
  somme:
  - contrat . salaire brut

site/source/components/ChiffreAffairesActivitéMixte.tsx

@@ -8,7 +8,7 @@ import { styled } from 'styled-components'
 import { Switch } from '@/design-system/switch'
 import { batchUpdateSituation } from '@/store/actions/actions'
 import { situationSelector } from '@/store/selectors/simulationSelectors'
-import { catchDivideByZeroError } from '@/utils'
+import { catchDivideByZeroError } from '@/utils/publicodes'
 
 import { ExplicableRule } from './conversation/Explicable'
 import { Condition } from './EngineValue/Condition'

site/source/components/FicheDePaie/CotisationLine.tsx

@@ -1,10 +1,11 @@
 import { DottedName } from 'modele-social'
-import { ASTNode, formatValue, reduceAST } from 'publicodes'
+import { formatValue } from 'publicodes'
 import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import RuleLink from '@/components/RuleLink'
 import { EngineContext } from '@/components/utils/EngineContext'
+import { findReferenceInNode } from '@/utils/publicodes'
 
 export default function CotisationLine({
  dottedName,
@@ -53,24 +54,3 @@ export default function CotisationLine({
 function isExoneration(dottedName: DottedName): boolean {
  return dottedName === 'salarié . cotisations . exonérations'
 }
-
-function findReferenceInNode(
- dottedName: DottedName,
- node: ASTNode
-): string | undefined {
- return reduceAST<string | undefined>(
- (acc, node) => {
- if (
- node.nodeKind === 'reference' &&
- node.dottedName?.startsWith(dottedName) &&
- !node.dottedName.endsWith('$SITUATION')
- ) {
- return node.dottedName
- } else if (node.nodeKind === 'reference') {
- return acc
- }
- },
- undefined,
- node
- )
-}

site/source/components/FicheDePaie/Cotisations.tsx

@@ -3,102 +3,103 @@ import { ASTNode, ParsedRules, reduceAST, Rule, RuleNode } from 'publicodes'
 import { Fragment } from 'react'
 import { Trans } from 'react-i18next'
 
-import './PaySlip.css'
+import './FicheDePaie.css'
 
-import { Strong } from '@/design-system/typography'
-import { H4, H5 } from '@/design-system/typography/heading'
-import { Body } from '@/design-system/typography/paragraphs'
+import { styled } from 'styled-components'
+
+import { H3, H4 } from '@/design-system/typography/heading'
 
 import { ExplicableRule } from '../conversation/Explicable'
 import Value from '../EngineValue/Value'
 import { useEngine } from '../utils/EngineContext'
 import CotisationLine from './CotisationLine'
-import Line from './Line'
+
+const StyledH3 = styled(H3)`
+ text-align: right;
+`
+
+function CotisationLines({ cotisations }: { cotisations: Array<DottedName> }) {
+ return cotisations.map((cotisation: DottedName) => (
+ <CotisationLine key={cotisation} dottedName={cotisation} />
+ ))
+}
 
 export function Cotisations() {
  const parsedRules = useEngine().getParsedRules()
  const cotisationsBySection = getCotisationsBySection(parsedRules)
 
  return (
- <>
- <div className="payslip__cotisationsSection">
- <H4>
- <Trans>Cotisations sociales</Trans>
- </H4>
- <H4>
- <Trans>employeur</Trans>
- </H4>
- <H4>
- <Trans>salarié</Trans>
- </H4>
- {cotisationsBySection.map(([sectionDottedName, cotisations]) => {
- const section = parsedRules[sectionDottedName]
-
- return (
- <Fragment key={section.dottedName}>
- <H5 className="payslip__cotisationTitle">
- {section.title}
- <ExplicableRule light dottedName={section.dottedName} />
- </H5>
- {cotisations.map((cotisation) => (
- <CotisationLine key={cotisation} dottedName={cotisation} />
- ))}
- </Fragment>
- )
- })}
-
- {/* Total cotisation */}
- <Body className="payslip__total">
- <Strong>
- <Trans>Total des retenues</Trans>
- </Strong>
- </Body>
- <div>
- <Value
- expression="salarié . cotisations . employeur"
- displayedUnit="€"
- className="payslip__total"
- />
- </div>
- <div>
- <Value
- expression="salarié . cotisations . salarié"
- displayedUnit="€"
- className="payslip__total"
- />
- </div>
-
- {/* Salaire chargé */}
- <Line rule="salarié . coût total employeur" />
- <span />
+ <div className="payslip__cotisationsSection">
+ <H3>
+ <Trans>Cotisations sociales</Trans>
+ </H3>
+ <StyledH3>
+ <Trans>employeur</Trans>
+ </StyledH3>
+ <StyledH3>
+ <Trans>salarié</Trans>
+ </StyledH3>
+
+ {cotisationsBySection.map(([sectionDottedName, cotisations]) => {
+ const section = parsedRules[sectionDottedName]
+
+ return (
+ <Fragment key={section.dottedName}>
+ <H4 className="payslip__cotisationTitle">
+ {section.title}
+ <ExplicableRule light dottedName={section.dottedName} />
+ </H4>
+ <CotisationLines cotisations={cotisations} />
+ </Fragment>
+ )
+ })}
+
+ {/* Total cotisation */}
+ <H4 className="payslip__total">
+ <Trans>Total des cotisations et contributions</Trans>
+ <ExplicableRule light dottedName="salarié . cotisations" />
+ </H4>
+ <div>
+ <Value
+ expression="salarié . cotisations . employeur"
+ displayedUnit="€"
+ className="payslip__total"
+ />
+ </div>
+ <div>
+ <Value
+ expression="salarié . cotisations . salarié"
+ displayedUnit="€"
+ className="payslip__total"
+ />
  </div>
- </>
+ </div>
  )
 }
 
 export const SECTION_ORDER = [
- 'protection sociale . maladie',
- 'protection sociale . accidents du travail et maladies professionnelles',
- 'protection sociale . retraite',
- 'protection sociale . famille',
- 'protection sociale . assurance chômage',
- 'protection sociale . formation',
- 'protection sociale . transport',
- 'protection sociale . autres',
+ 'salarié . cotisations . catégories . maladie',
+ 'salarié . cotisations . catégories . atmp',
+ 'salarié . cotisations . catégories . retraite',
+ 'salarié . cotisations . catégories . divers',
+ 'salarié . cotisations . catégories . convention collective',
+ 'salarié . cotisations . catégories . CSG-CRDS',
+ 'salarié . cotisations . catégories . exonérations',
+ 'salarié . cotisations . catégories . facultatives',
 ] as Array<DottedName>
 
 type Section = (typeof SECTION_ORDER)[number]
 
 function getSection(rule: RuleNode): Section {
- const section = `protection sociale . ${
+ const section = `salarié . cotisations . catégories . ${
  (rule.rawNode as Rule & { cotisation?: { branche?: string } })?.cotisation
  ?.branche ?? ''
  }` as Section
  if (SECTION_ORDER.includes(section)) {
  return section
  }
 
- return 'protection sociale . autres'
+ return 'salarié . cotisations . catégories . divers'
 }
 
 export function getCotisationsBySection(

site/source/components/FicheDePaie/PaySlip.css → site/source/components/FicheDePaie/FicheDePaie.css

@@ -25,17 +25,19 @@
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
- padding-left: 0.5rem;
- align-self: flex-end;
-}
-.payslip__container h3:first-child {
  padding-left: 0;
+ align-self: flex-end;
+ width: 100%;
  font-size: 1.125rem;
 }
 
+.payslip__container h4 {
+ font-size: 1rem;
+}
+
 .payslip__total {
  font-weight: bold;
- margin-top: 1em;
+ margin-top: 1.5rem;
  background-color: transparent !important;
  color: inherit;
 }
@@ -60,9 +62,6 @@
  justify-content: flex-end;
 }
 
-.payslip__cotisationsSection h4:not(:first-child) {
- text-align: right;
-}
 .payslip__cotisationsSection a:nth-of-type(2n),
 .payslip__salarySection a:nth-of-type(2n) {
  background-color: rgba(255, 255, 255, 0.4);
@@ -95,25 +94,3 @@
 .payslip__salaireNet {
  font-weight: bold;
 }
-
-/* IE */
-@media not print and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- .payslip__cotisationsSection > h4:nth-child(1),
- .payslip__cotisationsSection > a,
- div.payslip__total {
- display: inline-block;
- }
- .payslip__cotisationsSection > h4:not(:nth-child(1)) {
- width: 25%;
- display: inline-block;
- }
- .payslip__container .montant {
- display: inline-block;
- width: 25%;
- text-align: right;
- }
- .payslip__salarySection > a {
- width: 75%;
- display: inline-block;
- }
-}

site/source/components/FicheDePaie/PaySlip.tsx → site/source/components/FicheDePaie/FicheDePaie.tsx

@@ -1,4 +1,4 @@
-import './PaySlip.css'
+import './FicheDePaie.css'
 
 import { styled } from 'styled-components'
 
@@ -7,7 +7,7 @@ import Line from './Line'
 import SalaireBrut from './SalaireBrut'
 import SalaireNet from './SalaireNet'
 
-export default function PaySlip() {
+export default function FicheDePaie() {
  return (
  <StyledContainer className="payslip__container">
  <div className="payslip__salarySection">

site/source/components/FicheDePaie/SalaireBrut.tsx

@@ -1,27 +1,27 @@
 import { Trans } from 'react-i18next'
 
-import { H4 } from '@/design-system/typography/heading'
+import { H3 } from '@/design-system/typography/heading'
 
 import { Condition } from '../EngineValue/Condition'
 import Line from './Line'
 
-import './PaySlip.css'
+import './FicheDePaie.css'
 
 export default function SalaireBrut() {
  return (
  <div className="payslip__salarySection">
- <H4 className="payslip__salaryTitle" as="h3">
- <Trans>Salaire</Trans>
- </H4>
+ <H3 className="payslip__salaryTitle">
+ <Trans>Salaire brut</Trans>
+ </H3>
  <Line rule="salarié . contrat . salaire brut" />
- <Line rule="salarié . rémunération . avantages en nature . montant" />
- <Line rule="salarié . activité partielle . retrait absence" />
- <Line rule="salarié . activité partielle . indemnités" />
  <Line rule="salarié . rémunération . heures supplémentaires" />
  <Line rule="salarié . rémunération . heures complémentaires" />
  <Line rule="salarié . rémunération . primes" />
- <Line rule="salarié . rémunération . frais professionnels" />
  <Line rule="salarié . rémunération . indemnités CDD" />
+ <Line rule="salarié . rémunération . avantages en nature . montant" />
+ <Line rule="salarié . rémunération . frais professionnels" />
+ <Line rule="salarié . activité partielle . retrait absence" />
+ <Line rule="salarié . activité partielle . indemnités" />
  <Condition expression="salarié . contrat . salaire brut != salarié . rémunération . brut">
  <Line rule="salarié . rémunération . brut" />
  </Condition>