From d88146ad0e0b03712e91fe5be478a4e56fd6872d Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Mon, 9 Mar 2020 17:46:00 +0100
Subject: [PATCH] :art: :fire: ajoute l'aide sur le formulaire dnrti
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

L'aide s'affiche désormais sous forme de modale, sur tous les simulateurs.
Cela permet d'uniformiser le comportement, et d'avoir une meilleure expérience sur mobile
---
 source/components/conversation/Aide.tsx       | 45 ++++++-------------
 .../components/conversation/Conversation.tsx  |  4 +-
 source/components/conversation/Explicable.tsx | 34 +++++++-------
 source/engine/RuleInput.tsx                   |  2 +-
 .../AideDéclarationIndépendant/index.tsx      | 14 ++++--
 .../pages/Simulateurs/ArtisteAuteur.tsx       |  4 +-
 6 files changed, 45 insertions(+), 58 deletions(-)

diff --git a/source/components/conversation/Aide.tsx b/source/components/conversation/Aide.tsx
index 9bf82f2ed..00a889c0d 100644
--- a/source/components/conversation/Aide.tsx
+++ b/source/components/conversation/Aide.tsx
@@ -1,9 +1,8 @@
 import { explainVariable } from 'Actions/actions'
-import Animate from 'Components/ui/animate'
+import Overlay from 'Components/Overlay'
 import { Markdown } from 'Components/utils/markdown'
 import { findRuleByDottedName } from 'Engine/rules'
 import React from 'react'
-import emoji from 'react-easy-emoji'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'Reducers/rootReducer'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
@@ -17,45 +16,29 @@ export default function Aide() {
 
 	const stopExplaining = () => dispatch(explainVariable())
 
-	if (!explained) return <section id="helpWrapper" />
+	if (!explained) return null
 
 	let rule = findRuleByDottedName(flatRules, explained),
 		text = rule.description,
 		refs = rule.références
 
 	return (
-		<Animate.fromTop>
+		<Overlay onClose={stopExplaining}>
 			<div
 				css={`
-					display: flex;
-					align-items: center;
-					img {
-						margin: 0 1em 0 !important;
-						width: 1.6em !important;
-						height: 1.6em !important;
-					}
+					padding: 0.6rem;
 				`}
 			>
-				{emoji('ℹ️')}
-
-				<div
-					className="controlText ui__ card"
-					css="padding: 0.6rem 0; flex: 1;"
-				>
-					<h4>{rule.title}</h4>
-					<p>
-						<Markdown source={text} />
-					</p>
-					{refs && (
-						<div>
-							<References refs={refs} />
-						</div>
-					)}
-					<button className="hide" aria-label="close" onClick={stopExplaining}>
-						×
-					</button>
-				</div>
+				<h2>{rule.title}</h2>
+				<p>
+					<Markdown source={text} />
+				</p>
+				{refs && (
+					<div>
+						<References refs={refs} />
+					</div>
+				)}
 			</div>
-		</Animate.fromTop>
+		</Overlay>
 	)
 }
diff --git a/source/components/conversation/Conversation.tsx b/source/components/conversation/Conversation.tsx
index b691d5d5d..489e71002 100644
--- a/source/components/conversation/Conversation.tsx
+++ b/source/components/conversation/Conversation.tsx
@@ -1,6 +1,6 @@
 import { goToQuestion, validateStepWithValue } from 'Actions/actions'
 import QuickLinks from 'Components/QuickLinks'
-import InputComponent from 'Engine/RuleInput'
+import RuleInput from 'Engine/RuleInput'
 import { findRuleByDottedName } from 'Engine/rules'
 import React from 'react'
 import emoji from 'react-easy-emoji'
@@ -44,7 +44,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 			setDefault()
 		}
 	}
-	const DecoratedInputComponent = FormDecorator(InputComponent)
+	const DecoratedInputComponent = FormDecorator(RuleInput)
 
 	return flatRules && nextSteps.length ? (
 		<>
diff --git a/source/components/conversation/Explicable.tsx b/source/components/conversation/Explicable.tsx
index a013e8f87..4f2d41c18 100644
--- a/source/components/conversation/Explicable.tsx
+++ b/source/components/conversation/Explicable.tsx
@@ -1,5 +1,4 @@
 import { explainVariable } from 'Actions/actions'
-import classNames from 'classnames'
 import { findRuleByDottedName } from 'Engine/rules'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
@@ -25,23 +24,22 @@ export default function Explicable({ dottedName }: { dottedName: DottedName }) {
 
 	//TODO montrer les variables de type 'une possibilité'
 
-	return dottedName === explained ? null : (
-		<span
-			className={classNames('explicable', {
-				explained: dottedName === explained
-			})}
+	return (
+		<button
+			className="ui__ link-button"
+			onClick={e => {
+				tracker.push(['trackEvent', 'help', dottedName])
+				dispatch(explainVariable(dottedName))
+				e.preventDefault()
+				e.stopPropagation()
+			}}
+			css={`
+				margin-left: 0.3rem !important;
+				vertical-align: middle;
+				font-size: 110% !important;
+			`}
 		>
-			<span
-				className="icon"
-				onClick={e => {
-					tracker.push(['trackEvent', 'help', dottedName])
-					dispatch(explainVariable(dottedName))
-					e.preventDefault()
-					e.stopPropagation()
-				}}
-			>
-				{emoji('ℹ️')}
-			</span>
-		</span>
+			{emoji('ℹ️')}
+		</button>
 	)
 }
diff --git a/source/engine/RuleInput.tsx b/source/engine/RuleInput.tsx
index 58944bd2a..c7ac8bc37 100644
--- a/source/engine/RuleInput.tsx
+++ b/source/engine/RuleInput.tsx
@@ -34,7 +34,7 @@ type Props = {
 // be displayed to get a user input through successive if statements
 // That's not great, but we won't invest more time until we have more diverse
 // input components and a better type system.
-export default function InputComponent({
+export default function RuleInput({
 	rules,
 	dottedName,
 	onChange,
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx b/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
index 2139f0cba..45065568a 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
@@ -1,9 +1,11 @@
 import { setSimulationConfig, updateSituation } from 'Actions/actions'
+import Aide from 'Components/conversation/Aide'
+import Explicable from 'Components/conversation/Explicable'
 import 'Components/TargetSelection.css'
 import Warning from 'Components/ui/WarningBlock'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
-import InputComponent from 'Engine/RuleInput'
+import RuleInput from 'Engine/RuleInput'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -122,7 +124,7 @@ export default function AideDéclarationIndépendant() {
 				</p>
 			</Trans>
 			<BigInput>
-				<InputComponent
+				<RuleInput
 					rules={rules}
 					dottedName="dirigeant . rémunération totale"
 					onChange={updateIncome}
@@ -191,6 +193,7 @@ export default function AideDéclarationIndépendant() {
 					<div ref={resultsRef}>
 						<Results componentRef={printComponentRef} />
 					</div>
+					<Aide />
 				</>
 			)}
 		</div>
@@ -279,10 +282,13 @@ function SimpleField({ dottedName, question, summary }: SimpleFieldProps) {
 							}
 						`}
 					>
-						<p>{question ?? evaluatedRule.question}</p>
+						<p>
+							{question ?? evaluatedRule.question}
+							<Explicable dottedName={dottedName} />
+						</p>
 						<p className="ui__ notice">{summary ?? evaluatedRule.summary}</p>
 					</div>
-					<InputComponent
+					<RuleInput
 						rules={rules}
 						dottedName={dottedName}
 						onChange={update}
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx
index 639bd760a..ab8532465 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx
@@ -6,7 +6,7 @@ import config from 'Components/simulationConfigs/artiste-auteur.yaml'
 import 'Components/TargetSelection.css'
 import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
 import { formatValue } from 'Engine/format'
-import InputComponent from 'Engine/RuleInput'
+import RuleInput from 'Engine/RuleInput'
 import { getRuleFromAnalysis } from 'Engine/rules'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -104,7 +104,7 @@ function SimpleField({ dottedName }: SimpleFieldProps) {
 						</label>
 					</div>
 					<div className="targetInputOrValue">
-						<InputComponent
+						<RuleInput
 							className="targetInput"
 							isTarget
 							dottedName={dottedName}