mon-entreprise/source/components/PaySlip.js

import type { FicheDePaie } from 'Types/ResultViewTypes'
import withColours from 'Components/utils/withColours'
import Value from 'Components/Value'
import { findRuleByDottedName, getRuleFromAnalysis } from 'Engine/rules'
import { compose } from 'ramda'
import React, { Fragment } from 'react'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import {
	analysisWithDefaultsSelector,
	parsedRulesSelector
} from 'Selectors/analyseSelectors'
import { analysisToCotisationsSelector } from 'Selectors/ficheDePaieSelectors'
import './PaySlip.css'
import { Line, SalaireBrutSection, SalaireNetSection } from './PaySlipSections'
import RuleLink from './RuleLink'

type ConnectedPropTypes = ?FicheDePaie & {
	colours: { lightestColour: string }
}

export default compose(
	withColours,
	connect(state => ({
		cotisations: analysisToCotisationsSelector(state),
		analysis: analysisWithDefaultsSelector(state),
		parsedRules: parsedRulesSelector(state)
	}))
)(
	({
		colours: { lightestColour },
		cotisations,
		analysis,
		parsedRules
	}: ConnectedPropTypes) => {
		let getRule = getRuleFromAnalysis(analysis)

		const heuresSupplémentaires = getRule(
			'contrat salarié . temps de travail . heures supplémentaires'
		)
		return (
			<div
				className="payslip__container"
				css={`
					.value {
						display: flex;
						align-items: flex-end;
						justify-content: flex-end;
						padding-right: 0.2em;
					}
				`}
			>
				<div className="payslip__salarySection">
					<Line
						rule={getRule('contrat salarié . temps de travail')}
						unit="heures/mois"
						maximumFractionDigits={1}
					/>
					{heuresSupplémentaires?.nodeValue > 0 && (
						<Line
							rule={heuresSupplémentaires}
							unit="heures/mois"
							maximumFractionDigits={1}
						/>
					)}
				</div>

				<SalaireBrutSection getRule={getRule} />
				{/* Section cotisations */}
				<div className="payslip__cotisationsSection">
					<h4>
						<Trans>Cotisations sociales</Trans>
					</h4>
					<h4>
						<Trans>Part employeur</Trans>
					</h4>
					<h4>
						<Trans>Part salarié</Trans>
					</h4>
					{cotisations.map(([brancheDottedName, cotisationList]) => {
						let branche = findRuleByDottedName(parsedRules, brancheDottedName)
						return (
							<Fragment key={branche.dottedName}>
								<h5 className="payslip__cotisationTitle">
									<RuleLink {...branche} />
								</h5>
								{cotisationList.map(cotisation => (
									<Fragment key={cotisation.dottedName}>
										<RuleLink
											style={{ backgroundColor: lightestColour }}
											{...cotisation}
										/>
										<Value
											nilValueSymbol="—"
											unit="€"
											customCSS="background-color: var(--lightestColour)"
										>
											{cotisation.montant.partPatronale}
										</Value>
										<Value
											nilValueSymbol="—"
											unit="€"
											customCSS="background-color: var(--lightestColour)"
										>
											{cotisation.montant.partSalariale}
										</Value>
									</Fragment>
								))}
							</Fragment>
						)
					})}

					{/* Total cotisation */}
					<div className="payslip__total">
						<Trans>Total des retenues</Trans>
					</div>
					<Value
						nilValueSymbol="—"
						{...getRule('contrat salarié . cotisations . patronales')}
						unit="€"
						className="payslip__total"
					/>
					<Value
						nilValueSymbol="—"
						{...getRule('contrat salarié . cotisations . salariales')}
						unit="€"
						className="payslip__total"
					/>
					{/* Salaire chargé */}
					<Line rule={getRule('contrat salarié . rémunération . total')} />
					<span />
				</div>
				{/* Section salaire net */}
				<SalaireNetSection getRule={getRule} />
			</div>
		)
	}
)