From 9872dd745d9d6522ccb54a6eb02c1ffd92b63fff Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Fri, 1 Mar 2019 17:00:19 +0100
Subject: [PATCH] :art: L'avertissement se replie

Pour mobile
---
 source/components/SimulateurWarning.css       | 20 -------
 source/components/SimulateurWarning.js        | 60 ++++++++++++-------
 source/components/Simulation.js               |  3 +-
 .../simulationConfigs/withSimulationConfig.js | 14 +++--
 .../pages/SocialSecurity/AutoEntrepreneur.js  |  4 +-
 5 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/source/components/SimulateurWarning.css b/source/components/SimulateurWarning.css
index 8703643e2..e69de29bb 100644
--- a/source/components/SimulateurWarning.css
+++ b/source/components/SimulateurWarning.css
@@ -1,20 +0,0 @@
-.beta__container {
-	padding-left: 1rem;
-	border-top-left-radius: 0.3rem;
-	margin-top: 1rem;
-	border-left: 3px solid #333;
-}
-.beta__tag {
-	font-size: 80%;
-	line-height: 1rem;
-	padding: 0.4rem 0.8rem;
-	background: #333;
-	margin-left: -1rem;
-	text-transform: uppercase;
-	color: white;
-	border-bottom-right-radius: 0.3rem;
-	border-top-right-radius: 0.3rem;
-	display: inline-block;
-	margin-bottom: 0.6rem;
-	vertical-align: middle;
-}
diff --git a/source/components/SimulateurWarning.js b/source/components/SimulateurWarning.js
index d6154e4c5..8ab60330f 100644
--- a/source/components/SimulateurWarning.js
+++ b/source/components/SimulateurWarning.js
@@ -1,35 +1,51 @@
 import { T } from 'Components'
-import React from 'react'
+import React, { useState } from 'react'
 import emoji from 'react-easy-emoji'
 import './SimulateurWarning.css'
 
-export default function SimulateurWarning({ simulateur }) {
+export default function SimulateurWarning({ simulateur, autoFolded }) {
+	let [userFolded, userFold] = useState(undefined)
+
+	let folded = userFolded === undefined ? autoFolded : userFolded,
+		toggle = () => userFold(!userFolded)
+
 	return (
 		<div id="SimulateurWarning">
 			<p>
 				{emoji('🚩 ')}
-				<strong>Ce simulateur est en cours de développement</strong>
+				<strong>Outil en cours de développement </strong>
+				{folded && <a onClick={toggle}> (plus d'info)</a>}
 			</p>
-			<ul>
-				<li>Simulation pour une entreprise créée en 2019</li>
-				{simulateur !== 'auto-entreprise' && (
-					<li>
-						Le chiffre d'affaires déduit des charges va à 100% dans la
-						rémunération du dirigeant.
-					</li>
+			<div className="content">
+				{!folded && (
+					<ul style={{ marginLeft: '1em' }}>
+						<li>réservé aux entreprises créées en 2019</li>
+						{simulateur !== 'auto-entreprise' && (
+							<li>
+								Le chiffre d'affaires déduit des charges va à 100% dans la
+								rémunération du dirigeant.
+							</li>
+						)}
+						<li>
+							l'impôt sur le revenu est calculé pour un célibataire sans enfant
+							et sans autre revenu.{' '}
+							{simulateur == 'auto-entreprise' && (
+								<span>L'impôt libératoire n'est pas encore intégré.</span>
+							)}
+						</li>
+						<li>
+							les calculs sont indicatifs et ne se substituent pas aux décomptes
+							réels des URSSAF, impots.gouv.fr, etc.
+						</li>
+					</ul>
 				)}
-				<li>
-					L'impôt sur le revenu est calculé pour un célibataire sans enfant et
-					sans autre revenu.{' '}
-					{simulateur == 'auto-entreprise' && (
-						<span>L'impôt libératoire n'est pas encore intégré.</span>
-					)}
-				</li>
-				<li>
-					Les calculs sont indicatifs et ne se substituent pas aux décomptes
-					réels : URSSAF, impots.gouv.fr, etc.
-				</li>
-			</ul>
+
+				{!folded && (
+					<div style={{ textAlign: 'right', paddingRight: '1em' }}>
+						<a onClick={toggle}>J'ai compris</a>
+					</div>
+				)}
+			</div>
 		</div>
 	)
 }
diff --git a/source/components/Simulation.js b/source/components/Simulation.js
index 806de10cd..860ca6bc5 100644
--- a/source/components/Simulation.js
+++ b/source/components/Simulation.js
@@ -61,9 +61,10 @@ export default compose(
 					{this.state.displayAnswers && (
 						<Answers onClose={() => this.setState({ displayAnswers: false })} />
 					)}
-					<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+					<div style={{ display: 'flex', justifyContent: 'center' }}>
 						{arePreviousAnswers ? (
 							<button
+								style={{ marginRight: '1em' }}
 								className="ui__ small button "
 								onClick={() => this.setState({ displayAnswers: true })}>
 								<T>Voir mes réponses</T>
diff --git a/source/components/simulationConfigs/withSimulationConfig.js b/source/components/simulationConfigs/withSimulationConfig.js
index 35aa22973..703399b79 100644
--- a/source/components/simulationConfigs/withSimulationConfig.js
+++ b/source/components/simulationConfigs/withSimulationConfig.js
@@ -1,10 +1,14 @@
-import { resetSimulation, setSimulationConfig } from 'Actions/actions';
-import React from 'react';
-import { connect } from 'react-redux';
+import { resetSimulation, setSimulationConfig } from 'Actions/actions'
+import React from 'react'
+import { connect } from 'react-redux'
+import { noUserInputSelector } from 'Selectors/analyseSelectors'
 
 export default config => SimulationComponent =>
 	connect(
-		state => ({ config: state.simulation?.config }),
+		state => ({
+			config: state.simulation?.config,
+			noUserInput: noUserInputSelector(state)
+		}),
 		{
 			setSimulationConfig,
 			resetSimulation
@@ -22,7 +26,7 @@ export default config => SimulationComponent =>
 			}
 			render() {
 				if (!this.props.config) return null
-				return <SimulationComponent {...this.props}/>
+				return <SimulationComponent {...this.props} />
 			}
 		}
 	)
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AutoEntrepreneur.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AutoEntrepreneur.js
index 72ebe645d..78cc3f137 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AutoEntrepreneur.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AutoEntrepreneur.js
@@ -7,7 +7,7 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { AvertissementProtectionSocialeIndépendants } from './Indépendant'
 
-const AutoEntrepreneur = () => (
+const AutoEntrepreneur = ({ noUserInput }) => (
 	<>
 		<Helmet>
 			<title>
@@ -19,7 +19,7 @@ const AutoEntrepreneur = () => (
 			/>
 		</Helmet>
 		<h1>Simulateur auto-entrepreneur 2019</h1>
-		<Warning simulateur="auto-entreprise" />
+		<Warning autoFolded={!noUserInput} simulateur="auto-entreprise" />
 		<Simulation
 			targetsTriggerConversation={true}
 			targets={<TargetSelection />}