Ajout d'un graphique répartition pour les artistes-auteurs

implémentation est hacky et il faudrait faire une refacto du système
de distribution pour pouvoir l'intégrer correctement sur l'ensemble des
simulateurs.

source/components/Distribution.tsx

@@ -1,20 +1,21 @@
+import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
 import { ThemeColoursContext } from 'Components/utils/withColours'
 import Value from 'Components/Value'
 import { findRuleByDottedName } from 'Engine/rules'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useSelector } from 'react-redux'
-import { config, animated, useSpring } from 'react-spring'
+import { animated, config, useSpring } from 'react-spring'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import répartitionSelector from 'Selectors/repartitionSelectors'
+import { Rule } from 'Types/rule'
 import { isIE } from '../utils'
 import './Distribution.css'
 import './PaySlip'
 import RuleLink from './RuleLink'
-import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
 
 export default function Distribution() {
-	const distribution = useSelector(répartitionSelector)
+	const distribution = useSelector(répartitionSelector) as any
 
 	if (!Object.values(distribution).length) {
 		return null
@@ -27,12 +28,9 @@ export default function Distribution() {
 					([brancheDottedName, { partPatronale, partSalariale }]) => (
 						<DistributionBranch
 							key={brancheDottedName}
-							{...{
-								brancheDottedName,
-								partPatronale,
-								partSalariale,
-								distribution
-							}}
+							dottedName={brancheDottedName}
+							value={partPatronale + partSalariale}
+							distribution={distribution}
 						/>
 					)
 				)}
@@ -41,34 +39,42 @@ export default function Distribution() {
 	)
 }
 
+type DistributionBranchProps = {
+	dottedName: Rule['dottedName']
+	value: number
+	distribution: { maximum: number; total: number }
+	icon?: string
+}
+
 const ANIMATION_SPRING = config.gentle
-function DistributionBranch({
-	brancheDottedName,
-	partPatronale,
-	partSalariale,
+export function DistributionBranch({
+	dottedName,
+	value,
+	icon,
 	distribution
-}) {
+}: DistributionBranchProps) {
 	const rules = useSelector(flatRulesSelector)
 	const [intersectionRef, brancheInViewport] = useDisplayOnIntersecting({
 		threshold: 0.5
 	})
 	const colours = useContext(ThemeColoursContext)
-	const branche = findRuleByDottedName(rules, brancheDottedName)
-	const montant = brancheInViewport ? partPatronale + partSalariale : 0
+	const branche = findRuleByDottedName(rules, dottedName)
+	const montant = brancheInViewport ? value : 0
 	const styles = useSpring({
 		config: ANIMATION_SPRING,
 		to: {
-			flex: montant / distribution.cotisationMaximum,
+			flex: montant / distribution.maximum,
 			opacity: montant ? 1 : 0
 		}
-	})
+	}) as { flex: number; opacity: number } // TODO: problème avec les types de react-spring ?
 
 	return (
 		<animated.div
 			ref={intersectionRef}
 			className="distribution-chart__item"
-			style={{ opacity: styles.opacity }}>
-			<BranchIcône icône={branche.icons} />
+			style={{ opacity: styles.opacity }}
+		>
+			<BranchIcône icône={icon ?? branche.icons} />
 			<div className="distribution-chart__item-content">
 				<p className="distribution-chart__counterparts">
 					<span className="distribution-chart__branche-name">
@@ -106,7 +112,8 @@ let ChartItemBar = ({ styles, colour, montant }) => (
 				font-weight: bold;
 				margin-left: 1rem;
 				color: var(--textColourOnWhite);
-			`}>
+			`}
+		>
 			<Value maximumFractionDigits={0} unit="€">
 				{montant}
 			</Value>

source/règles/base.yaml

@@ -5739,8 +5739,8 @@ dirigeant . artiste-auteur . revenus . BNC . frais réels:
   unité: €
   période: année
   par défaut: 0
-  question: Déficit
-  résumé: Le montant des frais réels
+  question: Frais réels BNC
+  résumé: Vient s'imputer aux recettes pour déterminer le bénéfice
   non applicable si: régime spécial
 
 dirigeant . artiste-auteur . revenus . BNC . charges forfaitaires:

source/selectors/repartitionSelectors.js

@@ -149,7 +149,7 @@ const répartition = (analysis): ?Répartition => {
 		// $FlowFixMe
 		total: cotisationsRule.nodeValue,
 		cotisations: cotisationsRule,
-		cotisationMaximum: compose(
+		maximum: compose(
 			reduce(max, 0),
 			map(montant => montant.partPatronale + montant.partSalariale),
 			Object.values
@@ -161,7 +161,4 @@ const répartition = (analysis): ?Répartition => {
 }
 
 // $FlowFixMe
-export default createSelector(
-	[analysisWithDefaultsSelector],
-	répartition
-)
+export default createSelector([analysisWithDefaultsSelector], répartition)

source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx

@@ -1,4 +1,5 @@
 import { updateSituation } from 'Actions/actions'
+import { DistributionBranch } from 'Components/Distribution'
 import RuleLink from 'Components/RuleLink'
 import SimulateurWarning from 'Components/SimulateurWarning'
 import { useSimulationConfig } from 'Components/simulationConfigs/useSimulationConfig'
@@ -25,7 +26,7 @@ const situation = {
 const objectifs = ['dirigeant . artiste-auteur . cotisations']
 const config = { situation, objectifs }
 
-function useRule(dottedName: DottedName) {
+export function useRule(dottedName: DottedName) {
 	const analysis = useSelector(analysisWithDefaultsSelector)
 	const getRule = getRuleFromAnalysis(analysis)
 	return getRule(dottedName)
@@ -165,7 +166,6 @@ const ResultBlock = styled.div`
 	margin-top: 30px;
 	padding: 10px;
 	background: #eee;
-	border: 2px solid grey;
 	font-size: 1.25em;
 	background: #eee;
 	display: flexbox;
@@ -205,7 +205,47 @@ function CotisationsResult() {
 						)}
 					</div>
 				</ResultBlock>
+				<RepartitionCotisations />
 			</Animate.appear>
 		)
 	)
 }
+
+const branches = [
+	{
+		dottedName: 'dirigeant . artiste-auteur . cotisations . vieillesse',
+		icon: '👵'
+	},
+	{
+		dottedName: 'dirigeant . artiste-auteur . cotisations . CSG-CRDS',
+		icon: '🏛'
+	},
+	{
+		dottedName:
+			'dirigeant . artiste-auteur . cotisations . formation profesionnelle',
+		icon: '👷‍♂️'
+	}
+]
+
+function RepartitionCotisations() {
+	const cotisations = branches.map(branch => ({
+		...branch,
+		value: useRule(branch.dottedName).nodeValue as number
+	}))
+	const maximum = Math.max(...cotisations.map(x => x.value))
+	const total = cotisations.map(x => x.value).reduce((a = 0, b) => a + b)
+	return (
+		<section>
+			<h2>À quoi servent mes cotisations ?</h2>
+			<div className="distribution-chart__container">
+				{cotisations.map(cotisation => (
+					<DistributionBranch
+						key={cotisation.dottedName}
+						distribution={{ maximum, total }}
+						{...cotisation}
+					/>
+				))}
+			</div>
+		</section>
+	)
+}