From 54fc7a6890baa0921af6bf25ef907058352dab59 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Fri, 15 Nov 2019 22:23:21 +0100 Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20graphique=20r=C3=A9partition=20p?= =?UTF-8?q?our=20les=20artistes-auteurs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../{Distribution.js => Distribution.tsx} | 49 +++++++++++-------- source/règles/base.yaml | 4 +- source/selectors/repartitionSelectors.js | 7 +-- .../pages/Simulateurs/ArtisteAuteur.tsx | 44 ++++++++++++++++- 4 files changed, 74 insertions(+), 30 deletions(-) rename source/components/{Distribution.js => Distribution.tsx} (74%) diff --git a/source/components/Distribution.js b/source/components/Distribution.tsx similarity index 74% rename from source/components/Distribution.js rename to source/components/Distribution.tsx index da764350c..0c61521fa 100644 --- a/source/components/Distribution.js +++ b/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 }]) => ( ) )} @@ -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 ( - + style={{ opacity: styles.opacity }} + > +

@@ -106,7 +112,8 @@ let ChartItemBar = ({ styles, colour, montant }) => ( font-weight: bold; margin-left: 1rem; color: var(--textColourOnWhite); - `}> + `} + > {montant} diff --git a/source/règles/base.yaml b/source/règles/base.yaml index 70791516d..df0bc2f1a 100644 --- a/source/règles/base.yaml +++ b/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: diff --git a/source/selectors/repartitionSelectors.js b/source/selectors/repartitionSelectors.js index 8a89e63fd..3c4f3b2e9 100644 --- a/source/selectors/repartitionSelectors.js +++ b/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) diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx index 723057efe..d07e093fb 100644 --- a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx +++ b/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() { )}

+ ) ) } + +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 ( +
+

À quoi servent mes cotisations ?

+
+ {cotisations.map(cotisation => ( + + ))} +
+
+ ) +}