mon-entreprise/source/components/PaySlipSections.tsx

95 lines
2.9 KiB
TypeScript

import { EngineContext } from 'Components/utils/EngineContext'
import Value, { ValueProps, Condition } from 'Components/EngineValue'
import React, { useContext } from 'react'
import { Trans } from 'react-i18next'
import { DottedName } from 'Rules'
import { coerceArray } from '../utils'
import RuleLink from './RuleLink'
export let SalaireBrutSection = () => {
return (
<div className="payslip__salarySection">
<h4 className="payslip__salaryTitle">
<Trans>Salaire</Trans>
</h4>
<Line rule="contrat salarié . rémunération . brut de base" />
<Line rule="contrat salarié . rémunération . avantages en nature . montant" />
<Line rule="contrat salarié . activité partielle . retrait absence" />
<Line rule="contrat salarié . activité partielle . indemnités" />
<Line rule="contrat salarié . rémunération . heures supplémentaires" />
<Line rule="contrat salarié . rémunération . heures complémentaires" />
<Line rule="contrat salarié . rémunération . primes" />
<Line rule="contrat salarié . frais professionnels" />
<Line rule="contrat salarié . CDD . indemnités salarié" />
<Condition expression="contrat salarié . rémunération . brut de base != contrat salarié . rémunération . brut">
<Line rule="contrat salarié . rémunération . brut" />
</Condition>
</div>
)
}
export let SalaireNetSection = () => {
return (
<div className="payslip__salarySection">
<h4 className="payslip__salaryTitle">
<Trans>Salaire net</Trans>
</h4>
<Line rule="contrat salarié . rémunération . net imposable" />
<Condition
expression={[
'contrat salarié . rémunération . avantages en nature',
'contrat salarié . frais professionnels . titres-restaurant'
]}
>
<Line rule="contrat salarié . rémunération . net de cotisations" />
</Condition>
<Line
negative
rule="contrat salarié . rémunération . avantages en nature . montant"
/>
<Line
negative
rule="contrat salarié . frais professionnels . titres-restaurant . montant"
/>
<Line
rule="contrat salarié . rémunération . net"
className="payslip__total"
/>
<Condition expression="impôt">
<Line negative rule="impôt" unit="€/mois" />
<Line
className="payslip__total"
rule="contrat salarié . rémunération . net après impôt"
/>
</Condition>
</div>
)
}
type LineProps = {
rule: DottedName
negative?: boolean
} & Omit<ValueProps, 'expression'>
export function Line({
rule,
displayedUnit = '€',
negative = false,
className,
...props
}: LineProps) {
const parsedRules = useContext(EngineContext).getParsedRules()
return (
<Condition expression={rule}>
<RuleLink {...parsedRules[rule]} className={className} />
<Value
linkToRule={false}
expression={(negative ? '- ' : '') + rule}
displayedUnit={displayedUnit}
className={className}
{...props}
/>
</Condition>
)
}