🎨 L'avertissement se replie

Pour mobile

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;
-}

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>
 	)
 }

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>

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} />
 			}
 		}
 	)

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 />}