From e71ec202e85ee0797d301d94417462d154e5b32b Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Wed, 13 May 2020 12:13:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8A=20Ajout=20d'une=20explication=20po?=
 =?UTF-8?q?ur=20le=20formulaire=20d'aide=20=C3=A0=20la=20d=C3=A9claration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Explication fournie par la DNRTI.
---
 mon-entreprise/package.json                   |   1 +
 .../components/conversation/Explicable.tsx    |  37 +++-
 .../components/conversation/FormDecorator.tsx |   5 +-
 .../components/conversation/Question.tsx      |   4 +-
 mon-entreprise/source/locales/ui-en.yaml      |  29 +--
 .../AideDéclarationIndépendant/index.tsx      | 176 ++++++++++++++----
 yarn.lock                                     |  12 ++
 7 files changed, 206 insertions(+), 58 deletions(-)

diff --git a/mon-entreprise/package.json b/mon-entreprise/package.json
index 3348369ad..06a6326bf 100644
--- a/mon-entreprise/package.json
+++ b/mon-entreprise/package.json
@@ -50,6 +50,7 @@
 		"react-spring": "=8.0.27",
 		"react-syntax-highlighter": "^10.1.1",
 		"react-transition-group": "^2.2.1",
+		"react-useportal": "^1.0.13",
 		"recharts": "^1.8.5",
 		"reduce-reducers": "^1.0.4",
 		"redux": "^4.0.4",
diff --git a/mon-entreprise/source/components/conversation/Explicable.tsx b/mon-entreprise/source/components/conversation/Explicable.tsx
index 0a267ef0d..ba7ecad0b 100644
--- a/mon-entreprise/source/components/conversation/Explicable.tsx
+++ b/mon-entreprise/source/components/conversation/Explicable.tsx
@@ -1,18 +1,18 @@
 import { explainVariable } from 'Actions/actions'
-import React, { useContext } from 'react'
+import Overlay from 'Components/Overlay'
+import { EngineContext } from 'Components/utils/EngineContext'
+import React, { useContext, useState } from 'react'
 import emoji from 'react-easy-emoji'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from 'Reducers/rootReducer'
+import { useDispatch } from 'react-redux'
 import { DottedName } from 'Rules'
 import { TrackerContext } from '../utils/withTracker'
 import './Explicable.css'
-import { EngineContext } from 'Components/utils/EngineContext'
+import usePortal from 'react-useportal'
 
-export default function Explicable({ dottedName }: { dottedName: DottedName }) {
+export function ExplicableRule({ dottedName }: { dottedName: DottedName }) {
 	const rules = useContext(EngineContext).getParsedRules()
 	const tracker = useContext(TrackerContext)
 	const dispatch = useDispatch()
-	const explained = useSelector((state: RootState) => state.explainedVariable)
 
 	// Rien à expliquer ici, ce n'est pas une règle
 	if (dottedName == null) return null
@@ -42,3 +42,28 @@ export default function Explicable({ dottedName }: { dottedName: DottedName }) {
 		</button>
 	)
 }
+
+export function Explicable({ children }: { children: React.ReactNode }) {
+	const { Portal } = usePortal()
+	const [isOpen, setIsOpen] = useState(false)
+	return (
+		<>
+			{isOpen && (
+				<Portal>
+					<Overlay onClose={() => setIsOpen(false)}>{children}</Overlay>
+				</Portal>
+			)}
+			<button
+				className="ui__ link-button"
+				onClick={() => setIsOpen(true)}
+				css={`
+					margin-left: 0.3rem !important;
+					vertical-align: middle;
+					font-size: 110% !important;
+				`}
+			>
+				{emoji('ℹ️')}
+			</button>
+		</>
+	)
+}
diff --git a/mon-entreprise/source/components/conversation/FormDecorator.tsx b/mon-entreprise/source/components/conversation/FormDecorator.tsx
index d7deb35b3..eb8057fe7 100644
--- a/mon-entreprise/source/components/conversation/FormDecorator.tsx
+++ b/mon-entreprise/source/components/conversation/FormDecorator.tsx
@@ -1,5 +1,5 @@
 import { updateSituation, goToQuestion } from 'Actions/actions'
-import Explicable from 'Components/conversation/Explicable'
+import { ExplicableRule } from 'Components/conversation/Explicable'
 import React, { useContext } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { situationSelector } from 'Selectors/simulationSelectors'
@@ -34,7 +34,8 @@ export default function FormDecorator(RenderField) {
 		return (
 			<div className="step">
 				<h3>
-					{rules[dottedName].question} <Explicable dottedName={dottedName} />
+					{rules[dottedName].question}{' '}
+					<ExplicableRule dottedName={dottedName} />
 				</h3>
 
 				<fieldset>
diff --git a/mon-entreprise/source/components/conversation/Question.tsx b/mon-entreprise/source/components/conversation/Question.tsx
index 173471472..80d0d9eb7 100644
--- a/mon-entreprise/source/components/conversation/Question.tsx
+++ b/mon-entreprise/source/components/conversation/Question.tsx
@@ -4,7 +4,7 @@ import { is } from 'ramda'
 import React, { useCallback, useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
-import Explicable from './Explicable'
+import { ExplicableRule } from './Explicable'
 import SendButton from './SendButton'
 
 /* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans
@@ -123,7 +123,7 @@ export default function Question({
 export const RadioLabel = props => (
 	<>
 		<RadioLabelContent {...props} />
-		<Explicable dottedName={props.dottedName} />
+		<ExplicableRule dottedName={props.dottedName} />
 	</>
 )
 
diff --git a/mon-entreprise/source/locales/ui-en.yaml b/mon-entreprise/source/locales/ui-en.yaml
index 41fc14f6c..eac34106b 100644
--- a/mon-entreprise/source/locales/ui-en.yaml
+++ b/mon-entreprise/source/locales/ui-en.yaml
@@ -163,18 +163,23 @@ Votre entreprise: Your company
 Votre forme juridique: Your legal status
 aide: aid or subsidy
 aide-déclaration-indépendant:
-  description: <0>Help with your 2019 income tax return </0><1>This tool is a tax
-    (income) and social security (ISD) declaration aid for self-employed
-    workers. It allows you to find out the amount of social security charges
-    deductible from your net fiscal result.</1><2><0>This tool is for you if you
-    are in any of the following cases :</0><1><0>you contribute to the general
-    scheme for self-employed persons</0><1>your business is in the actual tax
-    system and in accrual accounting</1></1><2>It does not concern you if you
-    are in one of the following cases:</2><3><0>you are a regulated liberal
-    profession</0><1>you are a liberal profession contributing to the
-    CIPAV</1><2>your company is domiciled in the DOMs</2></3></2><3>What is your
-    professional income in 2019?</3><4>Indicate your net fiscal result before
-    deduction of social security charges and tax exemptions.</4>
+  description: <0>Help with your 2019 income tax return</0><1>This tool is a tax
+    (income) and social security<1> (ISD</1>) declaration aid for self-employed
+    workers. It enables you to find out the amount of social security charges
+    deductible from your net tax result.</1><2>You remain fully responsible for
+    any omissions or inaccuracies in your statements.</2><3><0><0>This tool
+    concerns you if you are in any of the following cases :</0><1><0>you
+    contribute to the general scheme for self-employed persons</0><1>your
+    company is in the actual tax system and in accrual accounting</1></1><2>It
+    does not concern you if you are in one of the following cases:</2><3><0>you
+    are self-employed under a pension scheme for the liberal
+    professions</0><1>you are managers of companies subject to corporate income
+    tax</1><2>you have opted for the micro-fiscal regime</2><3>your company is
+    domiciled in the DOM (French Overseas Departments and
+    Territories)</3></3></0></3><4>What is your tax result in
+    2019?<1></1><2>Social security charges and tax exemptions not
+    included<2></2></2> </4><5>The tax result corresponds to income less
+    expenses. It can be positive (profit) or negative (deficit).</5>
   entreprise:
     description: You can fill in your company to pre-fill in the form
     titre: <0>Company and activity</0>
diff --git a/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx b/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
index 579924cb8..a48769303 100644
--- a/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
+++ b/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
@@ -1,6 +1,6 @@
 import { setSimulationConfig, updateSituation } from 'Actions/actions'
 import Aide from 'Components/conversation/Aide'
-import Explicable from 'Components/conversation/Explicable'
+import { Explicable, ExplicableRule } from 'Components/conversation/Explicable'
 import 'Components/TargetSelection.css'
 import Warning from 'Components/ui/WarningBlock'
 import { useEvaluation, EngineContext } from 'Components/utils/EngineContext'
@@ -21,7 +21,7 @@ import simulationConfig from './config.yaml'
 import { useNextQuestions } from 'Components/utils/useNextQuestion'
 import emoji from 'react-easy-emoji'
 import RuleLink from 'Components/RuleLink'
-import { formatValue } from 'Engine/format'
+import { formatValue } from 'publicodes'
 import Skeleton from 'react-loading-skeleton'
 
 export default function() {
@@ -32,29 +32,23 @@ export default function() {
 	)
 	useEffect(() => {
 		dispatch(setSimulationConfig(simulationConfig, true))
-	}, [])
+	}, [dispatch])
 
-	const dottedName = 'dirigeant . rémunération totale'
 	const [resultsRef, resultsInViewPort] = useDisplayOnIntersecting({
 		threshold: 0.5,
 		unobserve: false
 	})
+	const dottedName = 'dirigeant . rémunération totale'
 	const value = useSelector(situationSelector)[dottedName]
 	const [currentIncome, setCurrentIncome] = useState(value)
 	const displayForm = currentIncome != null
-	const updateIncome = useCallback(
-		income => {
-			setCurrentIncome(income)
-		},
-		[setCurrentIncome]
-	)
 	useEffect(() => {
 		if (resultsInViewPort && displayForm) {
 			dispatch(updateSituation(dottedName, currentIncome))
 		} else {
 			dispatch(updateSituation(dottedName, null))
 		}
-	}, [resultsInViewPort, displayForm, currentIncome])
+	}, [dispatch, resultsInViewPort, displayForm, currentIncome])
 
 	return (
 		<div>
@@ -62,18 +56,17 @@ export default function() {
 			<Trans i18nKey="aide-déclaration-indépendant.description">
 				<h1>Aide à la déclaration de revenus au titre de l'année 2019</h1>
 				<p>
-					Cet outil est une aide aux déclarations fiscale (revenu) et sociale
-					(DSI) à destination des travailleurs indépendants. Il vous permet de
-					connaître le montant des charges sociales déductibles à partir de
-					votre résultat net fiscal.
+					Cet outil est une aide aux déclarations fiscale (revenu) et sociale (
+					<abbr title="Déclaration Sociale des Indépendants">DSI</abbr>) à
+					destination des travailleurs indépendants. Il vous permet de connaître
+					le montant des charges sociales déductibles à partir de votre résultat
+					net fiscal.
 				</p>
-				<div
-					css={`
-						@media print {
-							display: none;
-						}
-					`}
-				>
+				<p>
+					Vous restez entièrement responsable d'éventuelles omissions ou
+					inexactitudes dans vos déclarations.
+				</p>
+				<div>
 					<Warning localStorageKey="aide-déclaration-indépendant.warning">
 						<h3>
 							Cet outil vous concerne si vous êtes dans tous les cas suivants :
@@ -106,18 +99,21 @@ export default function() {
 				</div>
 				<h2>
 					Quel est votre résultat fiscal en 2019 ?<br />
-					<small>Charges sociales et exonérations fiscales non incluses</small>
+					<small>
+						Charges sociales et exonérations fiscales non incluses{' '}
+						<ExplicationsResultatFiscal />
+					</small>
 				</h2>
 				<p className="ui__ notice">
 					Le résultat fiscal correspond aux produits moins les charges. Il peut
-					être positif (bénéfice) ou négatif (pertes).
+					être positif (bénéfice) ou négatif (déficit).
 				</p>
 			</Trans>
 			<BigInput>
 				<RuleInput
 					rules={rules}
 					dottedName="dirigeant . rémunération totale"
-					onChange={updateIncome}
+					onChange={setCurrentIncome}
 					value={currentIncome}
 					autoFocus
 				/>
@@ -129,13 +125,7 @@ export default function() {
 							<Trans i18nKey="aide-déclaration-indépendant.entreprise.titre">
 								<h2>Entreprise et activité</h2>
 							</Trans>
-							<div
-								css={`
-									@media print {
-										display: none;
-									}
-								`}
-							>
+							<div>
 								{!company && (
 									<p className="ui__ notice">
 										<Trans i18nKey="aide-déclaration-indépendant.entreprise.description">
@@ -200,6 +190,123 @@ type SubSectionProp = {
 	dottedName: DottedName
 	hideTitle?: boolean
 }
+function ExplicationsResultatFiscal() {
+	return (
+		<Explicable>
+			<>
+				<h3>Quelles exonérations inclure ?</h3>
+				<p>
+					calculer le montant du résultat fiscal avant déduction d ations et des
+					charges sociales à indiquer dans ce simula s pouvez utiliser votre
+					liasse fiscale, en reprenant l ts indiqués dans les lignes fiscales du
+					tableau ci-desso nction de votre situation (imposition au réel normal
+					ou au réel simplifié).
+				</p>
+				<p>L’opération à effectuer est la suivante :</p>
+				<ul>
+					<li>
+						minez le résultat fiscal dans votre liasse, sans montant de vos
+						cotisations et contributions socia gimes obligatoires de sécurité
+						sociale. Prenez le résultat fiscal correspondant{' '}
+						<strong>(1)</strong>
+					</li>
+					<li>
+						Ajoutez les exonérations <strong>(2)</strong>
+					</li>
+				</ul>
+				<table
+					css={`
+						font-size: 0.85em;
+						text-align: center;
+
+						tr:nth-child(2n) {
+							background: #e5effa;
+						}
+
+						td {
+							padding: 0.5rem;
+						}
+					`}
+				>
+					<tr>
+						<td></td>
+						<td>
+							Résultat fiscal <strong>(1)</strong>
+						</td>
+						<td colSpan={4}>
+							Exonérations <strong>(2)</strong>
+						</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td></td>
+						<td>Exonérations liées aux zones / activités</td>
+						<td>Exonérations Madelin et plan d’épargne retraite</td>
+						<td>Exonérations de plus-values à court terme</td>
+						<td>Suramortissement productif</td>
+					</tr>
+					<tr>
+						<td>BIC réel normal</td>
+						<td>
+							<strong>2058-A-SD</strong>
+							<br />
+							Ligne XN (bénéfice) Ligne XO (déficit)
+						</td>
+						<td>
+							<strong>2058-A-SD</strong>
+							<br />
+							Lignes K9 / L6 / ØV / PP / L2 / 1F / L5 / PA / XC / PB
+						</td>
+						<td>
+							<strong>2053-SD</strong>
+							<br />
+							Lignes A7 et A8
+						</td>
+						<td>
+							<strong>2058-A-SD</strong>
+							<br />
+							Ligne XG (montant inclus)
+						</td>
+						<td>
+							<strong>2058-A-SD</strong>
+							<br />
+							Lignes X9 et YA
+						</td>
+					</tr>
+					<tr>
+						<td>BIC réel simplifié</td>
+						<td>
+							<strong>2033-B-SD</strong>
+							<br />
+							Ligne 370 (bénéfice) Ligne 372 déficit)
+						</td>
+						<td>
+							<strong>2033 B-SD</strong>
+							<br />
+							Lignes 986 / 127 / 991 / 345 / 992 / 987 / 989 / 990 / 993
+						</td>
+						<td>
+							<strong>2033-SD</strong>
+							<br />
+							Lignes 325 et 327
+						</td>
+						<td>
+							<strong>2033 B-SD</strong>
+							<br />
+							Ligne 350 (montant inclus)
+						</td>
+						<td>
+							<strong>2033 B-SD</strong>
+							<br />
+							Lignes 655 et 643
+						</td>
+					</tr>
+				</table>
+			</>
+		</Explicable>
+	)
+}
+
 function SubSection({
 	dottedName: sectionDottedName,
 	hideTitle = false
@@ -275,14 +382,11 @@ function SimpleField({ dottedName, question, summary }: SimpleFieldProps) {
 						css={`
 							border-left: 3px solid var(--lightColor);
 							padding-left: 0.6rem;
-							@media print {
-								padding-left: 0 !important;
-							}
 						`}
 					>
 						<p>
 							{question ?? evaluatedRule.question}
-							<Explicable dottedName={dottedName} />
+							<ExplicableRule dottedName={dottedName} />
 						</p>
 						<p className="ui__ notice">{summary ?? evaluatedRule.summary}</p>
 					</div>
diff --git a/yarn.lock b/yarn.lock
index 212a45f03..88aab3599 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9683,6 +9683,13 @@ react-transition-group@^2.2.1, react-transition-group@^2.5.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-useportal@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/react-useportal/-/react-useportal-1.0.13.tgz#abfc29f8128756cd7382bff7c81a4f446b792199"
+  integrity sha512-83KpNTXUIHnRVTLeMberIblCtssvRSKCPnG/xT9NW60gDYfU13pQBNQKCVUF8MBK+7LnCQ/ZrOuXl8Mp+iXdXA==
+  dependencies:
+    use-ssr "^1.0.19"
+
 react@^16.13.1, react@^16.3.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -11691,6 +11698,11 @@ url@0.11.0, url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-ssr@^1.0.19:
+  version "1.0.23"
+  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.23.tgz#3bde1e10cd01b3b61ab6386d7cddb72e74828bf8"
+  integrity sha512-5bvlssgROgPgIrnILJe2mJch4e2Id0/bVm1SQzqvPvEAXmlsinCCVHWK3a2iHcPat7PkdJHBo0gmSmODIz6tNA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"