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