From e22266e3241a1a1f8423b3a845e765d5165bcd03 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 17 Jan 2019 15:34:44 +0100
Subject: [PATCH] Fusion des composants de simulation

---
 source/actions/actions.js                     |  10 +-
 .../{QuickLink.js => QuickLinks.js}           |  23 +-
 source/components/RulePage.js                 |   1 -
 ...tView.css => SalaryCompactExplanation.css} |   0
 ...ultView.js => SalaryCompactExplanation.js} |  20 +-
 source/components/SalaryExplanation.js        |  41 +++
 source/components/SalaryFirstExplanation.js   |  58 +++++
 source/components/SalarySimulation.js         | 239 ------------------
 source/components/SimpleSimulation.js         |  58 +++--
 .../{SalarySimulation.css => Simulation.css}  |   0
 source/components/Simulation.js               |  99 ++++++++
 source/components/TargetSelection.js          |   2 +
 .../simulationConfigs/assimilé.yaml           |   7 +-
 .../simulationConfigs/indépendant.yaml        |   4 +
 .../simulationConfigs/micro-entreprise.yaml   |   8 +-
 .../components/simulationConfigs/salarié.yaml |   7 +
 source/locales/en.yaml                        |   6 +-
 source/sites/embauche.gouv.fr/App.js          |   1 -
 source/sites/embauche.gouv.fr/pages/Home.js   |   4 +-
 source/sites/mycompanyinfrance.fr/config.js   |   1 -
 .../pages/HiringProcess.js                    |   2 +-
 .../pages/SocialSecurity/AssimiléSalarié.js   |  17 +-
 .../pages/SocialSecurity/Indépendant.js       |  23 +-
 .../pages/SocialSecurity/MicroEntreprise.js   |  18 +-
 .../pages/SocialSecurity/Salarié.js           |  28 +-
 .../pages/SocialSecurity/SchemeComparaison.js |  10 +-
 26 files changed, 352 insertions(+), 335 deletions(-)
 rename source/components/{QuickLink.js => QuickLinks.js} (78%)
 rename source/components/{ResultView.css => SalaryCompactExplanation.css} (100%)
 rename source/components/{ResultView.js => SalaryCompactExplanation.js} (75%)
 create mode 100644 source/components/SalaryExplanation.js
 create mode 100644 source/components/SalaryFirstExplanation.js
 delete mode 100644 source/components/SalarySimulation.js
 rename source/components/{SalarySimulation.css => Simulation.css} (100%)
 create mode 100644 source/components/Simulation.js

diff --git a/source/actions/actions.js b/source/actions/actions.js
index d78f04c07..ce67350df 100644
--- a/source/actions/actions.js
+++ b/source/actions/actions.js
@@ -9,7 +9,6 @@ import type {
 } from 'Types/ActionsTypes'
 import { reset } from 'redux-form'
 import { deletePersistedSimulation } from '../storage/persistSimulation'
-import { normalizeBasePath } from '../utils'
 
 import type { RouterHistory } from 'react-router-dom'
 
@@ -51,19 +50,12 @@ export const deletePreviousSimulation = () => (
 
 export const startConversation = (priorityNamespace: ?string) => (
 	dispatch: StartConversationAction => void,
-	_: any,
-	history: RouterHistory
+	_: any
 ) => {
 	dispatch({
 		type: 'START_CONVERSATION',
 		...(priorityNamespace ? { priorityNamespace } : {})
 	})
-	const currentPath = normalizeBasePath(history.location.pathname)
-	if (currentPath.endsWith('/simulation/')) {
-		return
-	}
-
-	history.push(currentPath + 'simulation')
 }
 
 // $FlowFixMe
diff --git a/source/components/QuickLink.js b/source/components/QuickLinks.js
similarity index 78%
rename from source/components/QuickLink.js
rename to source/components/QuickLinks.js
index 61f65780c..f8a157a95 100644
--- a/source/components/QuickLink.js
+++ b/source/components/QuickLinks.js
@@ -16,26 +16,21 @@ type Props = {
 	validInputEntered: boolean
 }
 
-let quickLinks = {
-	CDD: 'contrat salarié . CDD',
-	Cadre: 'contrat salarié . statut cadre',
-	'Temps partiel': 'contrat salarié . temps partiel',
-	Localisation: 'établissement . localisation',
-	Autres: null
-}
-
-const QuickLink = ({
+const QuickLinks = ({
 	startConversation,
 	location,
-	validInputEntered
+	validInputEntered,
+	quickLinks,
+	conversationStarted
 }: Props) => {
-	const show = !location.pathname.endsWith('/simulation') && validInputEntered
+	const show = validInputEntered && !conversationStarted
 	return (
 		<Spring
 			to={{
 				height: show ? 'auto' : 0,
 				opacity: show ? 1 : 0
 			}}
+			config={{ delay: show ? 5000 : 0 }}
 			native>
 			{styles => (
 				<animated.div
@@ -69,10 +64,12 @@ export default compose(
 	connect(
 		(state, props) => ({
 			key: props.language,
-			validInputEntered: validInputEnteredSelector(state)
+			validInputEntered: validInputEnteredSelector(state),
+			conversationStarted: state.conversationStarted,
+			quickLinks: state.simulation?.config["questions à l'affiche"]
 		}),
 		{
 			startConversation
 		}
 	)
-)(QuickLink)
+)(QuickLinks)
diff --git a/source/components/RulePage.js b/source/components/RulePage.js
index 6ad6a59d1..86b459e15 100644
--- a/source/components/RulePage.js
+++ b/source/components/RulePage.js
@@ -95,7 +95,6 @@ const BackToSimulation = compose(
 			let { goBackToSimulation } = this.props
 			return (
 				<button
-					to="../simulation"
 					className="ui__ link-button"
 					onClick={goBackToSimulation}>
 					<i
diff --git a/source/components/ResultView.css b/source/components/SalaryCompactExplanation.css
similarity index 100%
rename from source/components/ResultView.css
rename to source/components/SalaryCompactExplanation.css
diff --git a/source/components/ResultView.js b/source/components/SalaryCompactExplanation.js
similarity index 75%
rename from source/components/ResultView.js
rename to source/components/SalaryCompactExplanation.js
index 40e78c2c1..cc3dfd61b 100644
--- a/source/components/ResultView.js
+++ b/source/components/SalaryCompactExplanation.js
@@ -3,13 +3,9 @@
 import Distribution from 'Components/Distribution'
 import PaySlip from 'Components/PaySlip'
 import SearchButton from 'Components/SearchButton'
-import withTracker from 'Components/utils/withTracker'
-import { compose } from 'ramda'
 import React, { Component } from 'react'
 import { Trans } from 'react-i18next'
-import { connect } from 'react-redux'
-import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors'
-import './ResultView.css'
+import './SalaryCompactExplanation.css'
 
 import type { Tracker } from 'Components/utils/withTracker'
 
@@ -27,7 +23,7 @@ const resultViewTitle = {
 	payslip: 'Fiche de paie'
 }
 
-class ResultView extends Component<Props, State> {
+export default class SalaryCompactExplanation extends Component<Props, State> {
 	state = {
 		resultView: this.props.conversationStarted ? 'payslip' : 'distribution'
 	}
@@ -67,15 +63,3 @@ class ResultView extends Component<Props, State> {
 		)
 	}
 }
-
-export default compose(
-	withTracker,
-	connect(
-		state => ({
-			conversationStarted: state.conversationStarted,
-			key: state.conversationStarted,
-			displayResults: !!ficheDePaieSelectors(state)
-		}),
-		{}
-	)
-)(ResultView)
diff --git a/source/components/SalaryExplanation.js b/source/components/SalaryExplanation.js
new file mode 100644
index 000000000..14535b81e
--- /dev/null
+++ b/source/components/SalaryExplanation.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import withTracker from 'Components/utils/withTracker'
+import { compose } from 'ramda'
+import { connect } from 'react-redux'
+import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors'
+import './SalaryCompactExplanation.css'
+import SalaryFirstExplanation from './SalaryFirstExplanation'
+import SalaryCompactExplanation from './SalaryCompactExplanation'
+import * as Animate from 'Ui/animate'
+import { startConversation } from 'Actions/actions'
+import { formValueSelector } from 'redux-form'
+
+export default compose(
+	withTracker,
+	connect(
+		state => ({
+			conversationStarted: state.conversationStarted,
+			displayResults: !!ficheDePaieSelectors(state),
+			arePreviousAnswers: state.conversationSteps.foldedSteps.length > 0,
+			period: formValueSelector('conversation')(state, 'période')
+		}),
+		{
+			startConversation
+		}
+	)
+)(
+	class SalaryExplanation extends Component {
+		render() {
+			return (
+				<Animate.fromBottom>
+					{!this.props.conversationStarted ? (
+						<SalaryFirstExplanation {...this.props} />
+					) : (
+						<SalaryCompactExplanation {...this.props} />
+					)}
+					<div style={{ textAlign: 'center' }} />
+				</Animate.fromBottom>
+			)
+		}
+	}
+)
diff --git a/source/components/SalaryFirstExplanation.js b/source/components/SalaryFirstExplanation.js
new file mode 100644
index 000000000..5e66792d0
--- /dev/null
+++ b/source/components/SalaryFirstExplanation.js
@@ -0,0 +1,58 @@
+/* @flow */
+
+import Distribution from 'Components/Distribution'
+import PaySlip from 'Components/PaySlip'
+import SearchButton from 'Components/SearchButton'
+import withTracker from 'Components/utils/withTracker'
+import { compose } from 'ramda'
+import React, { Component } from 'react'
+import { Trans } from 'react-i18next'
+import { connect } from 'react-redux'
+import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors'
+
+import type { Tracker } from 'Components/utils/withTracker'
+
+export default class SalaryFirstExplanation extends Component<Props, State> {
+	render() {
+		return (
+			<>
+				<h2>
+					<Trans>A quoi servent mes cotisations ?</Trans>
+				</h2>
+				<Distribution />
+
+				{!(this.props.arePreviousAnswers && this.props.conversationStarted) && (
+					<>
+						<h2>
+							<Trans>Simulation personnalisée</Trans>
+						</h2>
+						<p>
+							<Trans i18nKey="custom-simulation">
+								Il s'agit pour l'instant d'une
+								<strong> première estimation</strong> sur la base d'un contrat
+								générique. La législation française prévoit une multitude de cas
+								particuliers et de règles spécifiques qui modifient
+								considérablement les montants de l'embauche.
+							</Trans>
+						</p>
+						<p style={{ textAlign: 'center' }}>
+							<button
+								className="ui__ button"
+								onClick={this.props.startConversation}>
+								<Trans>Faire une simulation personnalisée</Trans>
+							</button>
+						</p>
+					</>
+				)}
+				<h2>
+					<Trans>
+						{this.props.period === 'mois'
+							? 'Fiche de paie mensuelle'
+							: 'Détail annuel des cotisations'}
+					</Trans>
+				</h2>
+				<PaySlip />
+			</>
+		)
+	}
+}
diff --git a/source/components/SalarySimulation.js b/source/components/SalarySimulation.js
deleted file mode 100644
index a0ef16968..000000000
--- a/source/components/SalarySimulation.js
+++ /dev/null
@@ -1,239 +0,0 @@
-import { startConversation } from 'Actions/actions'
-import { Component, React, T } from 'Components'
-import AnswerList from 'Components/AnswerList'
-import Distribution from 'Components/Distribution'
-import PaySlip from 'Components/PaySlip'
-import { ScrollToTop } from 'Components/utils/Scroll'
-import withColours from 'Components/utils/withColours'
-import withLanguage from 'Components/utils/withLanguage'
-import withSitePaths from 'Components/utils/withSitePaths'
-import { compose } from 'ramda'
-import emoji from 'react-easy-emoji'
-import { Trans, withNamespaces } from 'react-i18next'
-import { connect } from 'react-redux'
-import { Redirect, withRouter } from 'react-router'
-import { Link } from 'react-router-dom'
-import { formValueSelector } from 'redux-form'
-import {
-	blockingInputControlsSelector,
-	nextStepsSelector,
-	noUserInputSelector,
-	validInputEnteredSelector
-} from 'Selectors/analyseSelectors'
-import * as Animate from 'Ui/animate'
-import { normalizeBasePath } from '../utils'
-import Conversation from './conversation/Conversation'
-import PageFeedback from './Feedback/PageFeedback'
-import QuickLink from './QuickLink'
-import ResultView from './ResultView'
-import './SalarySimulation.css'
-import TargetSelection from './TargetSelection'
-
-export default compose(
-	withRouter,
-	withColours,
-	withNamespaces(), // Triggers rerender when the language changes
-	connect(
-		state => ({
-			blockingInputControls: blockingInputControlsSelector(state),
-			conversationStarted: state.conversationStarted,
-			validInputEntered: validInputEnteredSelector(state),
-			arePreviousAnswers: state.conversationSteps.foldedSteps.length !== 0,
-			nextSteps: state.conversationStarted && nextStepsSelector(state),
-			noUserInput: noUserInputSelector(state),
-			period: formValueSelector('conversation')(state, 'période')
-		}),
-		{
-			startConversation
-		}
-	),
-	withLanguage,
-	withSitePaths
-)(
-	class Simulation extends Component {
-		state = {
-			displayPreviousAnswers: false
-		}
-		render() {
-			let {
-				colours,
-				conversationStarted,
-				arePreviousAnswers,
-				nextSteps,
-				blockingInputControls,
-				displayHiringProcedures,
-				match,
-				validInputEntered,
-
-				period,
-				location,
-				sitePaths,
-				noUserInput
-			} = this.props
-			const displayConversation = conversationStarted && !blockingInputControls
-			const simulationCompleted =
-				!blockingInputControls && conversationStarted && !nextSteps.length
-			const displayPreviousAnswers =
-				arePreviousAnswers && this.state.displayPreviousAnswers
-			const simulationHomePath = normalizeBasePath(match.path).replace(
-				/\/simulation\/$/,
-				''
-			)
-			return (
-				<>
-					<div id="simu">
-						{noUserInput && (
-							<p
-								id="updateMessage"
-								style={{ fontStyle: 'italic', textAlign: 'center' }}>
-								{emoji('🌟')}{' '}
-								<T k="maj2019">
-									Le simulateur est à jour aux taux 2019 –{' '}
-									<a href="https://github.com/betagouv/syso/issues/441">
-										détails
-									</a>
-								</T>
-							</p>
-						)}
-						<QuickLink />
-						{location.pathname.endsWith('/simulation') && (
-							<>
-								{!conversationStarted && <Redirect to={simulationHomePath} />}
-								<Link to={simulationHomePath} style={{ position: 'absolute' }}>
-									<i
-										className="fa fa-arrow-left"
-										aria-hidden="true"
-										style={{ marginRight: '0.5rem' }}
-									/>
-									<Trans>Retour</Trans>
-								</Link>
-
-								<div
-									className="change-answer-link"
-									style={{
-										visibility: arePreviousAnswers ? 'visible' : 'hidden'
-									}}>
-									<button
-										className="ui__ link-button"
-										onClick={() =>
-											this.setState({ displayPreviousAnswers: true })
-										}>
-										<Trans>Modifier mes réponses</Trans>
-									</button>
-								</div>
-								{displayPreviousAnswers && (
-									<AnswerList
-										onClose={() =>
-											this.setState({ displayPreviousAnswers: false })
-										}
-									/>
-								)}
-								{simulationCompleted && (
-									<>
-										<h1>
-											<Trans i18nKey="simulation-end.title">
-												Plus de questions !
-											</Trans>
-										</h1>
-										<p>
-											<Trans i18nKey="simulation-end.text">
-												Vous avez atteint l'estimation la plus précise. Vous
-												pouvez maintenant concrétiser votre projet d'embauche.
-											</Trans>
-										</p>
-										{displayHiringProcedures && (
-											<div style={{ textAlign: 'center' }}>
-												<Link
-													className="ui__ button"
-													to={sitePaths.démarcheEmbauche}>
-													<Trans i18nKey="simulation-end.cta">
-														Connaître les démarches
-													</Trans>
-												</Link>
-											</div>
-										)}
-										<br />
-									</>
-								)}
-								{displayConversation && (
-									<>
-										<ScrollToTop />
-										<Conversation
-											textColourOnWhite={colours.textColourOnWhite}
-										/>
-									</>
-								)}
-							</>
-						)}
-						<TargetSelection colours={colours} />
-						{location.pathname.endsWith('/simulation') && (
-							<>
-								{conversationStarted && (
-									<Animate.fromBottom>
-										<ResultView />
-										<div style={{ textAlign: 'center' }} />
-									</Animate.fromBottom>
-								)}
-							</>
-						)}
-						{validInputEntered && (
-							<PageFeedback
-								customMessage={
-									<Trans i18nKey="feedback.simulator">
-										Ce simulateur vous a plu ?
-									</Trans>
-								}
-								customEventName="rate simulator"
-							/>
-						)}
-					</div>
-					{!location.pathname.endsWith('/simulation') && validInputEntered && (
-						<Animate.fromBottom>
-							<div style={{ textAlign: 'center' }}>
-								{arePreviousAnswers && conversationStarted && (
-									<button className="ui__ button" onClick={startConversation}>
-										<Trans>Continuer la simulation</Trans>
-									</button>
-								)}
-							</div>
-							<h2>
-								<Trans>A quoi servent mes cotisations ?</Trans>
-							</h2>
-							<Distribution />
-
-							{!(arePreviousAnswers && conversationStarted) && (
-								<>
-									<h2>
-										<Trans>Simulation personnalisée</Trans>
-									</h2>
-									<p>
-										<Trans i18nKey="custom-simulation">
-											Il s'agit pour l'instant d'une
-											<strong> première estimation</strong> sur la base d'un
-											contrat générique. La législation française prévoit une
-											multitude de cas particuliers et de règles spécifiques qui
-											modifient considérablement les montants de l'embauche.
-										</Trans>
-									</p>
-									<p style={{ textAlign: 'center' }}>
-										<button className="ui__ button" onClick={startConversation}>
-											<Trans>Faire une simulation personnalisée</Trans>
-										</button>
-									</p>
-								</>
-							)}
-							<h2>
-								<Trans>
-									{period === 'mois'
-										? 'Fiche de paie mensuelle'
-										: 'Détail annuel des cotisations'}
-								</Trans>
-							</h2>
-							<PaySlip />
-						</Animate.fromBottom>
-					)}
-				</>
-			)
-		}
-	}
-)
diff --git a/source/components/SimpleSimulation.js b/source/components/SimpleSimulation.js
index a7e9cc725..5df23217e 100644
--- a/source/components/SimpleSimulation.js
+++ b/source/components/SimpleSimulation.js
@@ -7,30 +7,38 @@ import React from 'react'
 import { connect } from 'react-redux'
 import {
 	nextStepsSelector,
-	noUserInputSelector
+	noUserInputSelector,
+	blockingInputControlsSelector,
+	validInputEnteredSelector
 } from 'Selectors/analyseSelectors'
 import Animate from 'Ui/animate'
 
 export default compose(
 	withColours,
 	connect(state => ({
+		conversationStarted: state.conversationStarted,
 		previousAnswers: state.conversationSteps.foldedSteps,
 		noNextSteps: nextStepsSelector(state).length == 0,
-		noUserInput: noUserInputSelector(state)
+		noUserInput: noUserInputSelector(state),
+		blockingInputControls: blockingInputControlsSelector(state),
+		validInputEntered: validInputEnteredSelector(state)
 	}))
 )(
-	class SimpleSimulation extends React.Component {
+	class Simulation extends React.Component {
 		state = {
 			displayAnswers: false
 		}
 		render() {
 			let {
-				children,
 				noNextSteps,
 				previousAnswers,
 				noUserInput,
-				hideUntilUserInput
+				conversationStarted,
+				hideUntilUserInput,
+				blockingInputControls
 			} = this.props
+			let arePreviousAnswers = previousAnswers.length > 0,
+				displayConversation = conversationStarted && !blockingInputControls
 			return (
 				<>
 					{this.state.displayAnswers && (
@@ -39,24 +47,32 @@ export default compose(
 					{!isEmpty(previousAnswers) && (
 						<button
 							className="ui__ button small plain"
-							onClick={() => this.setState({ displayAnswers: true })}>
-							Mes réponses
+							style={{
+								visibility: arePreviousAnswers ? 'visible' : 'hidden'
+							}}>
+							onClick={() => this.setState({ displayAnswers: true })}> Mes
+							réponses
 						</button>
 					)}
-					<ScrollToElement>
-						<Conversation
-							textColourOnWhite={this.props.colours.textColourOnWhite}
-						/>
-						{noNextSteps && (
-							<>
-								<h2>Plus de questions ! </h2>
-								<p>Vous avez atteint l'estimation la plus précise.</p>
-							</>
-						)}
-						{(!hideUntilUserInput || !noUserInput) && (
-							<Animate.fromBottom>{children}</Animate.fromBottom>
-						)}
-					</ScrollToElement>
+
+					{displayConversation && (
+						<>
+							<Conversation
+								textColourOnWhite={this.props.colours.textColourOnWhite}
+							/>
+							{noNextSteps && (
+								<>
+									<h2>Plus de questions ! </h2>
+									<p>Vous avez atteint l'estimation la plus précise.</p>
+									{this.props.customEndMessage && (
+										<p>{this.props.customEndMessage}</p>
+									)}
+								</>
+							)}
+						</>
+					)}
+					<Animate.fromBottom>{this.props.targets}</Animate.fromBottom>
+					{!noUserInput && this.props.explication}
 				</>
 			)
 		}
diff --git a/source/components/SalarySimulation.css b/source/components/Simulation.css
similarity index 100%
rename from source/components/SalarySimulation.css
rename to source/components/Simulation.css
diff --git a/source/components/Simulation.js b/source/components/Simulation.js
new file mode 100644
index 000000000..c07dc74a7
--- /dev/null
+++ b/source/components/Simulation.js
@@ -0,0 +1,99 @@
+import Answers from 'Components/AnswerList'
+import Conversation from 'Components/conversation/Conversation'
+import { ScrollToElement } from 'Components/utils/Scroll'
+import withColours from 'Components/utils/withColours'
+import { compose, isEmpty } from 'ramda'
+import { React, T } from 'Components'
+import { connect } from 'react-redux'
+import {
+	nextStepsSelector,
+	noUserInputSelector,
+	blockingInputControlsSelector,
+	validInputEnteredSelector
+} from 'Selectors/analyseSelectors'
+import Animate from 'Ui/animate'
+import PageFeedback from 'Components/Feedback/PageFeedback'
+
+export default compose(
+	withColours,
+	connect(state => ({
+		conversationStarted: state.conversationStarted,
+		previousAnswers: state.conversationSteps.foldedSteps,
+		noNextSteps:
+			state.conversationStarted && nextStepsSelector(state).length == 0,
+		noUserInput: noUserInputSelector(state),
+		blockingInputControls: blockingInputControlsSelector(state),
+		validInputEntered: validInputEnteredSelector(state)
+	}))
+)(
+	class Simulation extends React.Component {
+		state = {
+			displayAnswers: false
+		}
+		render() {
+			let {
+				noNextSteps,
+				previousAnswers,
+				noUserInput,
+				conversationStarted,
+				blockingInputControls,
+				validInputEntered,
+				targetsTriggerConversation
+			} = this.props
+			let arePreviousAnswers = previousAnswers.length > 0,
+				displayConversation =
+					(!targetsTriggerConversation || conversationStarted) &&
+					!blockingInputControls,
+				showTargets = targetsTriggerConversation || !noUserInput
+			return (
+				<>
+					{this.state.displayAnswers && (
+						<Answers onClose={() => this.setState({ displayAnswers: false })} />
+					)}
+					{!isEmpty(previousAnswers) && (
+						<button
+							className="ui__ button small plain"
+							style={{
+								visibility: arePreviousAnswers ? 'visible' : 'hidden'
+							}}
+							onClick={() => this.setState({ displayAnswers: true })}>
+							{' '}
+							Mes réponses
+						</button>
+					)}
+
+					{displayConversation && (
+						<>
+							<Conversation
+								textColourOnWhite={this.props.colours.textColourOnWhite}
+							/>
+							{noNextSteps && (
+								<>
+									<h1>
+										<T k="simulation-end.title">Plus de questions !</T>
+									</h1>
+									<T k="simulation-end.text">
+										Vous avez atteint l'estimation la plus précise.
+									</T>
+									{this.props.customEndMessages}
+								</>
+							)}
+						</>
+					)}
+					{showTargets && (
+						<Animate.fromBottom>{this.props.targets}</Animate.fromBottom>
+					)}
+					{validInputEntered && (
+						<PageFeedback
+							customMessage={
+								<T k="feedback.simulator">Ce simulateur vous a plu ?</T>
+							}
+							customEventName="rate simulator"
+						/>
+					)}
+					{!noUserInput && this.props.explanation}
+				</>
+			)
+		}
+	}
+)
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 2f0a2eaf0..83e648e5f 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -22,6 +22,7 @@ import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
 import ProgressCircle from './ProgressCircle'
 import './TargetSelection.css'
+import QuickLinks from './QuickLinks'
 
 export default compose(
 	translate(),
@@ -56,6 +57,7 @@ export default compose(
 			let { colours } = this.props
 			return (
 				<div id="targetSelection">
+					<QuickLinks />
 					{/* <Controls {...{ controls }} /> */}
 					<section
 						id="targetsContainer"
diff --git a/source/components/simulationConfigs/assimilé.yaml b/source/components/simulationConfigs/assimilé.yaml
index 30014db83..3ab314aec 100644
--- a/source/components/simulationConfigs/assimilé.yaml
+++ b/source/components/simulationConfigs/assimilé.yaml
@@ -1,8 +1,13 @@
 objectifs:
   - entreprise . chiffre d'affaires
-  - entreprise . charges
   - revenu disponible
 
+questions: 
+  - entreprise . charges
+
+questions à l'affiche: 
+  Charges: entreprise . charges
+
 situation:
   micro entreprise: non
   indépendant: non
diff --git a/source/components/simulationConfigs/indépendant.yaml b/source/components/simulationConfigs/indépendant.yaml
index 66ecb19b4..f2f270c8e 100644
--- a/source/components/simulationConfigs/indépendant.yaml
+++ b/source/components/simulationConfigs/indépendant.yaml
@@ -6,6 +6,10 @@ questions:
   - entreprise . charges
   - entreprise . catégorie d'activité
 
+questions à l'affiche: 
+  Charges: entreprise . charges
+  Commerçant, artisan, ou libéral ?: entreprise . catégorie d'activité
+
 situation:
   indépendant: oui
   micro entreprise: non
diff --git a/source/components/simulationConfigs/micro-entreprise.yaml b/source/components/simulationConfigs/micro-entreprise.yaml
index 716db9f87..6a78ebd38 100644
--- a/source/components/simulationConfigs/micro-entreprise.yaml
+++ b/source/components/simulationConfigs/micro-entreprise.yaml
@@ -1,10 +1,14 @@
 objectifs:
   - entreprise . chiffre d'affaires
   - revenu disponible
-  - entreprise . charges
 
 questions: 
-  - entreprise . catégorie d'activé
+  - entreprise . catégorie d'activité
+  - entreprise . charges
+
+questions à l'affiche: 
+  Charges: entreprise . charges
+  Commerçant, artisan, ou libéral ?: entreprise . catégorie d'activité
 
 situation:
   micro entreprise: oui
diff --git a/source/components/simulationConfigs/salarié.yaml b/source/components/simulationConfigs/salarié.yaml
index 2e1edd696..83383ca43 100644
--- a/source/components/simulationConfigs/salarié.yaml
+++ b/source/components/simulationConfigs/salarié.yaml
@@ -3,6 +3,13 @@ objectifs:
   - contrat salarié . salaire . brut de base
   - contrat salarié . salaire . net
   - contrat salarié . salaire . net après impôt
+
+questions à l'affiche: 
+  CDD: contrat salarié . CDD
+  Cadre: contrat salarié . statut cadre
+  Temps partiel: contrat salarié . temps partiel
+  Localisation: établissement . localisation
+
 situation:
   contrat salarié: oui
   contrat salarié . assimilé salarié: non
diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index 64228e98a..014060ae8 100644
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@@ -123,8 +123,10 @@ Mes réponses: My answers
 Modifier mes réponses: Change my answers
 simulation-end:
   title: No more questions left!
-  text: You have reached the most accurate estimate. You can now turn your hiring project into reality.
-  cta: Know the procedures
+  text: You have reached the most accurate estimate. 
+  hiring:
+    text: You can now turn your hiring project into reality.
+    cta: Know the procedures
 feedback:
   simulator: Do you like this simulator ?
   reportError: Report an error
diff --git a/source/sites/embauche.gouv.fr/App.js b/source/sites/embauche.gouv.fr/App.js
index 245605627..a060d3ee8 100644
--- a/source/sites/embauche.gouv.fr/App.js
+++ b/source/sites/embauche.gouv.fr/App.js
@@ -73,7 +73,6 @@ class EmbaucheRoute extends Component {
 				{inIframe() && <DisableScroll />}
 				<Switch>
 					<Route exact path="/" component={Home} />
-					<Route exact path="/simulation" component={Home} />
 					<Route path="/contact" component={Contact} />
 					<Route path="/règle/:name" component={RulePage} />
 					<Redirect from="/simu/*" to="/" />
diff --git a/source/sites/embauche.gouv.fr/pages/Home.js b/source/sites/embauche.gouv.fr/pages/Home.js
index 49d5694ad..0c087da07 100644
--- a/source/sites/embauche.gouv.fr/pages/Home.js
+++ b/source/sites/embauche.gouv.fr/pages/Home.js
@@ -1,5 +1,5 @@
 import PreviousSimulationBanner from 'Components/PreviousSimulationBanner'
-import Simu from 'Components/SalarySimulation'
+import { SalarySimulation } from '../../mycompanyinfrance.fr/pages/SocialSecurity/Salarié'
 import salariéConfig from 'Components/simulationConfigs/salarié.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
 import Marianne from 'Images/marianne.svg'
@@ -12,7 +12,7 @@ import './Home.css'
 const Home = () => (
 	<div id="home" className="ui__ container">
 		<PreviousSimulationBanner />
-		<Simu />
+		<SalarySimulation />
 		<div id="logos">
 			<a
 				id="marianne"
diff --git a/source/sites/mycompanyinfrance.fr/config.js b/source/sites/mycompanyinfrance.fr/config.js
index 57b0a0255..b9b2876bf 100644
--- a/source/sites/mycompanyinfrance.fr/config.js
+++ b/source/sites/mycompanyinfrance.fr/config.js
@@ -2,5 +2,4 @@ export let feedbackBlacklist = [
 	'/',
 	'/company/legal-status',
 	'/company/legal-status/number-of-associates',
-	'/social-security/simulation'
 ]
diff --git a/source/sites/mycompanyinfrance.fr/pages/HiringProcess.js b/source/sites/mycompanyinfrance.fr/pages/HiringProcess.js
index 49811d4f6..b28c36eb4 100644
--- a/source/sites/mycompanyinfrance.fr/pages/HiringProcess.js
+++ b/source/sites/mycompanyinfrance.fr/pages/HiringProcess.js
@@ -201,7 +201,7 @@ const HiringProcess = ({
 			</ul>
 			<Link
 				className="ui__ button"
-				to={sitePaths.sécuritéSociale.index + '/simulation'}>
+				to={sitePaths.sécuritéSociale.salarié}>
 				Obtenir un exemple de fiche de paie
 			</Link>
 		</T>
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AssimiléSalarié.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AssimiléSalarié.js
index 029efe9fb..252d279bf 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AssimiléSalarié.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/AssimiléSalarié.js
@@ -1,4 +1,4 @@
-import SimpleSimulation from 'Components/SimpleSimulation'
+import Simulation from 'Components/Simulation'
 import assimiléConfig from 'Components/simulationConfigs/assimilé.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
 import TargetSelection from 'Components/TargetSelection'
@@ -24,11 +24,18 @@ const AssimiléSalarié = () => (
 			Les gérants égalitaires ou minoritaires de SARL ou les dirigeants de SA et
 			SAS sont <strong>assimilés&nbsp;salariés</strong> et relèvent du régime
 			général. Les cotisations sociales sont proches de celles des salariés, à
-			quelques exceptions près (chômage en moins).
+			quelques exceptions près (réductions employeur et chômage en moins).
 		</p>
-		<SimpleSimulation>
-			<TargetSelection />
-		</SimpleSimulation>
+		<Simulation
+			targetsTriggerConversation={true}
+			targets={<TargetSelection />}
+			explication={
+				<p>
+					Le dirigeant a la même protection sociale qu'un salarié, mis à part le
+					chômage.
+				</p>
+			}
+		/>
 	</>
 )
 export default withSimulationConfig(assimiléConfig)(AssimiléSalarié)
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Indépendant.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Indépendant.js
index b3b89e9a7..7e43cec08 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Indépendant.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Indépendant.js
@@ -1,4 +1,4 @@
-import SimpleSimulation from 'Components/SimpleSimulation'
+import Simulation from 'Components/Simulation'
 import indépendantConfig from 'Components/simulationConfigs/indépendant.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
 import TargetSelection from 'Components/TargetSelection'
@@ -26,14 +26,19 @@ const Indépendant = () => (
 			<li> gérants et associés de SNC et EURL</li>
 			<li> gérant majoritaire de SARL</li>
 		</ul>
-		<SimpleSimulation>
-			<TargetSelection keepFormValues />
-		</SimpleSimulation>
-		<p>
-			La sécurité sociale des indépendants ne couvre ni les accidents du
-			travail, ni la perte d'emploi (assurance-chômage). Pour être couvert, le
-			professionnel peut souscrire volontairement des assurances spécifiques.
-		</p>
+		<Simulation
+			targetsTriggerConversation={true}
+			targets={<TargetSelection />}
+			explication={
+				<p>
+					La sécurité sociale des indépendants ne couvre ni les accidents du
+					travail, ni la perte d'emploi (assurance-chômage), et offre une
+					retraite plus faible que celle des salariés. Pour être couvert, le
+					professionnel peut souscrire volontairement des assurances
+					spécifiques.
+				</p>
+			}
+		/>
 	</>
 )
 export default withSimulationConfig(indépendantConfig)(Indépendant)
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/MicroEntreprise.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/MicroEntreprise.js
index 8d3da14e0..048fe45b6 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/MicroEntreprise.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/MicroEntreprise.js
@@ -1,4 +1,4 @@
-import SimpleSimulation from 'Components/SimpleSimulation'
+import Simulation from 'Components/Simulation'
 import indépendantConfig from 'Components/simulationConfigs/micro-entreprise.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
 import TargetSelection from 'Components/TargetSelection'
@@ -26,9 +26,19 @@ const MicroEntreprise = () => (
 			travail, ni la perte d'emploi (assurance-chômage). Pour être couvert, le
 			professionnel peut souscrire volontairement des assurances spécifiques.
 		</p>
-		<SimpleSimulation>
-			<TargetSelection keepFormValues />
-		</SimpleSimulation>
+		<Simulation
+			targetsTriggerConversation={true}
+			targets={<TargetSelection />}
+			explication={
+				<p>
+					La sécurité sociale des indépendants ne couvre ni les accidents du
+					travail, ni la perte d'emploi (assurance-chômage), et offre une
+					retraite plus faible que celle des salariés. Pour être couvert, le
+					professionnel peut souscrire volontairement des assurances
+					spécifiques.
+				</p>
+			}
+		/>
 	</>
 )
 export default withSimulationConfig(indépendantConfig)(MicroEntreprise)
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Salarié.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Salarié.js
index 30eee6f59..6bc4684c0 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Salarié.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Salarié.js
@@ -1,8 +1,32 @@
-import SalarySimulation from 'Components/SalarySimulation'
+import Simulation from 'Components/Simulation'
 import salariéConfig from 'Components/simulationConfigs/salarié.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
-import React from 'react'
+import { React, T } from 'Components'
 import { Helmet } from 'react-helmet'
+import TargetSelection from 'Components/TargetSelection'
+import SalaryExplanation from 'Components/SalaryExplanation'
+import { Link } from 'react-router-dom'
+import withSitePaths from 'Components/utils/withSitePaths'
+
+export let SalarySimulation = withSitePaths(({ sitePaths }) => (
+	<Simulation
+		targetsTriggerConversation={true}
+		customEndMessages={
+			<>
+				<T k="simulation-end.hiring.text">
+					Vous pouvez maintenant concrétiser votre projet d'embauche.
+				</T>
+				<div style={{ textAlign: 'center' }}>
+					<Link className="ui__ button" to={sitePaths.démarcheEmbauche}>
+						<T k="simulation-end.cta">Connaître les démarches</T>
+					</Link>
+				</div>
+			</>
+		}
+		targets={<TargetSelection />}
+		explanation={<SalaryExplanation />}
+	/>
+))
 
 const Salarié = () => (
 	<>
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/SchemeComparaison.js
index 0fab7351e..a5590d085 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/SchemeComparaison.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/SchemeComparaison.js
@@ -1,5 +1,5 @@
 import ComparativeTargets from 'Components/ComparativeTargets'
-import SimpleSimulation from 'Components/SimpleSimulation'
+import Simulation from 'Components/Simulation'
 import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
 import { createMarkdownDiv } from 'Engine/marked'
@@ -19,9 +19,11 @@ const SchemeComparaisonPage = () => (
 			Comparaison des régimes <small id="betaTag">alpha</small>
 		</h1>
 		<header>{createMarkdownDiv(ComparaisonConfig.titre)}</header>
-		<SimpleSimulation hideUntilUserInput>
-			<ComparativeTargets />
-		</SimpleSimulation>
+		<Simulation
+			targetsTriggerConversation={false}
+			targets={<ComparativeTargets />}
+			explication={<p />}
+		/>
 	</>
 )