diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/dnrti.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/dnrti.tsx index e151d252a..c279a7739 100644 --- a/source/sites/mon-entreprise.fr/pages/Simulateurs/dnrti.tsx +++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/dnrti.tsx @@ -1,6 +1,7 @@ import { setSimulationConfig, updateSituation } from 'Actions/actions' import RuleLink from 'Components/RuleLink' import 'Components/TargetSelection.css' +import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting' import { formatValue } from 'Engine/format' import InputComponent from 'Engine/RuleInput' import React, { useEffect, useState } from 'react' @@ -21,11 +22,14 @@ import { useRule } from './ArtisteAuteur' const simulationConfig = { objectifs: [ - 'dirigeant . indépendant . cotisations et contributions', - 'dirigeant . rémunération totale' + 'aide déclaration revenu indépendant 2019 . revenu net fiscal', + 'aide déclaration revenu indépendant 2019 . CSG déductible', + 'aide déclaration revenu indépendant 2019 . cotisations sociales déductible', + 'aide déclaration revenu indépendant 2019 . total charges sociales déductible', + 'aide déclaration revenu indépendant 2019 . assiette sociale' ], situation: { - dirigeant: 'indépendant' + 'aide déclaration revenu indépendant 2019': 'oui' }, 'unités par défaut': ['€/an'] } @@ -67,9 +71,9 @@ export default function DNRTI() {

Revenus d'activité

@@ -147,9 +151,10 @@ function SubSection({ type SimpleFieldProps = { dottedName: DottedName + summary?: Rule['summary'] question?: Rule['question'] } -function SimpleField({ dottedName, question }: SimpleFieldProps) { +function SimpleField({ dottedName, question, summary }: SimpleFieldProps) { const dispatch = useDispatch() const analysis = useSelector((state: RootState) => { return ruleAnalysisSelector(state, { dottedName }) @@ -176,16 +181,16 @@ function SimpleField({ dottedName, question }: SimpleFieldProps) { return ( -

- {question ?? analysis.question} -

+

{question ?? analysis.question}

+

{summary ?? analysis.summary}

+ useRule(objectif)) + .filter(r => r.nodeValue) - function Link({ cotisation }) { - return ( -

- - {cotisation.nodeValue - ? formatValue({ - value: cotisation.nodeValue, - language: 'fr', - unit: '€', - maximumFractionDigits: 0 - }) - : '-'} - -

- ) - } - if (!cotisationsRule.nodeValue) { + const [intersectionRef, displayResults] = useDisplayOnIntersecting({ + threshold: 0.5 + }) + + if (!results.length) { return null } + return ( - +
- Vos cotisations - - Vos revenus net - - Cotisations non déductibles -

- Ce montant doit être réintégré au revenu net dans votre déclaration - fiscale. -

- + {results.map(r => ( + <> +

+ {r.title} {r.summary} +

+ {r.description &&

{r.description}

} +

+ + {r.nodeValue + ? formatValue({ + value: r.nodeValue, + language: 'fr', + unit: '€', + maximumFractionDigits: 0 + }) + : '-'} + +

+ + ))}
- +
) } -const FormWrapper = styled.div` - display: flex; - justify-content: space-between; - align-items: flex-start; - - ul { - padding: 0; - } -` - const FormBlock = styled.section` - width: 63%; + max-width: 500px; padding: 0; h3 { @@ -269,27 +261,11 @@ const FormBlock = styled.section` font-size: 1.05em; padding: 5px 10px; } + ul { + padding: 0; + } ` const Question = styled.div` margin-top: 1em; ` - -const ResultBlock = styled.section` - position: sticky; - top: 3%; - padding: 3%; - width: 34%; - background: var(--lightestColor); -` - -const ResultSubTitle = styled.h4` - &:not(:first-child) { - margin-top: 2em; - } -` - -const ResultNumber = styled.strong` - display: block; - text-align: right; -` diff --git a/source/types/rule.ts b/source/types/rule.ts index 493b47468..b4d2f3776 100644 --- a/source/types/rule.ts +++ b/source/types/rule.ts @@ -7,6 +7,7 @@ export type Rule = { unité: string unit: string name?: string + summary?: string title?: string defaultValue: any icons: string