Ajoute la simulation à la page de comparaison des régimes

source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css

@@ -14,6 +14,7 @@
 	text-align: center;
 	flex-wrap: wrap;
 }
+
 .comparaison-grid > h2 {
 	margin: 0;
 	flex-direction: column;
@@ -38,13 +39,16 @@
 	grid-column: auto-entrepreneur;
 }
 .comparaison-grid > .all {
+	text-align: left;
 	grid-column: row-legend / end;
 	background-color: var(--lightestColour);
 }
 
 .comparaison-grid > .indep-et-auto {
 	grid-column: indépendant / end;
-	text-align: center;
+}
+.comparaison-grid > .AS-indep-et-auto {
+	grid-column: assimilé-salarié / end;
 }
 
 .comparaison-grid.hide-auto-entrepreneur {
@@ -63,6 +67,10 @@
 	font-weight: bold;
 	color: red;
 }
+.comparaison-grid > .big {
+	font-size: 110%;
+}
+
 .comparaison-grid > .ui__.button {
 	place-self: center;
 	margin: 1rem 0;

source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js

@@ -1,30 +1,63 @@
+/* @flow */
+import { startConversation } from 'Actions/actions'
+import PeriodSwitch from 'Components/PeriodSwitch'
+import Simulation from 'Components/Simulation'
 import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
+import { compose, map, tryCatch } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
+import { connect } from 'react-redux'
+import { noUserInputSelector } from 'Selectors/analyseSelectors'
+import { règleAvecMontantSelector } from 'Selectors/regleSelectors'
 import Animate from 'Ui/animate'
+import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
 import './SchemeComparaison.css'
+import type { RègleAvecMontant } from 'Types/RegleTypes'
 
-const SchemeComparaisonPage = () => (
-	<>
-		<Helmet>
-			<title>
-				Assimilé salarié, indépendant, auto-entrepreneur : comparaison des
-				régimes
-			</title>
-			<meta
-				name="description"
-				content="A partir d'un chiffre d'affaire donné, comparez le revenus net obtenu
+type OwnProps = {}
+
+type Props = OwnProps & {
+	assimiléSalarié: ?SimulationResult,
+	indépendant: ?SimulationResult,
+	autoEntrepreneur: ?SimulationResult,
+	conversationStarted: boolean,
+	noUserInput: boolean,
+	startConversation: () => void
+}
+
+type SimulationResult = {
+	retraite: RègleAvecMontant,
+	revenuNet: RègleAvecMontant
+}
+
+const SchemeComparaisonPage = ({
+	assimiléSalarié,
+	indépendant,
+	autoEntrepreneur,
+	conversationStarted,
+	noUserInput,
+	startConversation
+}: Props) => {
+	return (
+		<>
+			<Helmet>
+				<title>
+					Assimilé salarié, indépendant, auto-entrepreneur : comparaison des
+					régimes
+				</title>
+				<meta
+					name="description"
+					content="A partir d'un chiffre d'affaire donné, comparez le revenus net obtenu
 				après paiement des cotisations sociale et impôts pour les différents
 				régimes."
-			/>
-		</Helmet>
-		<Animate.fromBottom>
+				/>
+			</Helmet>
 			<h1>Quel régime choisir pour l'indépendant ?</h1>
 
 			<div className="ui__ full-width">
-				<div className="comparaison-grid ">
+				<div className="comparaison-grid">
 					<h2 className="AS">
 						{emoji('☂')} Assimilé salarié
 						<small>Le régime tout compris</small>
@@ -44,6 +77,10 @@ const SchemeComparaisonPage = () => (
 						Sécurité sociale des indépendants (SSI)
 					</div>
 
+					<div className="legend">Accidents du travail couverts</div>
+					<div className="AS">Oui</div>
+					<div className="indep-et-auto">Non</div>
+
 					<div className="legend">Assurance maladie</div>
 					<div className="green AS">++</div>
 					<div className="green indep-et-auto">+</div>
@@ -52,22 +89,99 @@ const SchemeComparaisonPage = () => (
 					<div className="green AS">++</div>
 					<div className="indep-et-auto green">+</div>
 
-					<div className="legend">Accidents du travail couverts</div>
-					<div className="AS">Oui</div>
-					<div className="indep-et-auto">Non</div>
-					<div className="legend">Retraite</div>
-					<div className="green AS">++</div>
-					<div className="green indep">+</div>
-					<div className="red auto">−</div>
-					<div className="all">
-						<h3>Comparez vos revenus et votre retraite en 1 minute</h3>
-						<button className="ui__ cta plain button">Commencer</button>
-					</div>
-					<div className="legend">Paiment des cotisations</div>
-					<div className="AS">Mensuel (à la source)</div>
-					<div className="indep">Annuel avec deux ans de décalage</div>
-					<div className="auto">Mensuel ou trimestriel</div>
+					{!conversationStarted && (
+						<>
+							<div className="legend">Retraite</div>
+							<div className="green AS">++</div>
+							<div className="green indep">+</div>
+							<div className="red auto">−</div>
+						</>
+					)}
 
+					{conversationStarted && (
+						<>
+							<div className="legend">Période</div>
+							<div className="AS-indep-et-auto">
+								<PeriodSwitch />
+							</div>
+						</>
+					)}
+					<div className="all">
+						{!conversationStarted ? (
+							<>
+								<h3>Comparez vos revenus et votre retraite en 1 minute</h3>
+								<button
+									className="ui__ cta plain button"
+									onClick={() => startConversation()}>
+									Commencer
+								</button>
+							</>
+						) : (
+							<div className="ui__ container">
+								<Simulation />
+							</div>
+						)}
+					</div>
+
+					{conversationStarted && (
+						<>
+							<div className="legend">Revenu net</div>
+							<div className="AS big">
+								{assimiléSalarié && (
+									<Animate.appear className="ui__ plain card">
+										<AnimatedTargetValue
+											value={assimiléSalarié.revenuNet.montant}
+										/>
+									</Animate.appear>
+								)}
+							</div>
+							<div className="indep big">
+								{indépendant && (
+									<Animate.appear className="ui__ plain card">
+										<AnimatedTargetValue
+											value={indépendant.revenuNet.montant}
+										/>
+									</Animate.appear>
+								)}
+							</div>
+							<div className="auto big">
+								{autoEntrepreneur && (
+									<Animate.appear className="ui__ plain card">
+										<AnimatedTargetValue
+											value={autoEntrepreneur.revenuNet.montant}
+										/>
+									</Animate.appear>
+								)}
+							</div>
+
+							<div className="legend">Retraite</div>
+							<div className="AS big">
+								{assimiléSalarié && (
+									<a>
+										<AnimatedTargetValue
+											value={assimiléSalarié.retraite.montant}
+										/>
+									</a>
+								)}
+							</div>
+							<div className="indep big">
+								{indépendant && (
+									<a>
+										<AnimatedTargetValue value={indépendant.retraite.montant} />
+									</a>
+								)}
+							</div>
+							<div className="auto big">
+								<a>
+									{autoEntrepreneur && (
+										<AnimatedTargetValue
+											value={autoEntrepreneur.retraite.montant}
+										/>
+									)}
+								</a>
+							</div>
+						</>
+					)}
 					<div className="legend">ACCRE</div>
 					<div className="AS-et-indep">Une année, plafonné</div>
 					<div className="auto">3 années, progressif, non plafonné</div>
@@ -77,9 +191,14 @@ const SchemeComparaisonPage = () => (
 					<div className="auto">Abattement forfaitaire </div>
 
 					<div className="legend">Comptabilité</div>
-					<div className="AS">Expert&nbsp;{emoji('😩')}</div>
-					<div className="indep">Compliquée&nbsp;{emoji('😔')}</div>
-					<div className="auto">Simplifiée&nbsp;{emoji('😌')}</div>
+					<div className="AS">Expert</div>
+					<div className="indep">Compliquée</div>
+					<div className="auto">Simplifiée</div>
+
+					<div className="legend">Paiment des cotisations</div>
+					<div className="AS">Mensuel (à la source)</div>
+					<div className="indep">Annuel avec deux ans de décalage</div>
+					<div className="auto">Mensuel ou trimestriel</div>
 
 					<div className="legend">
 						Complémentaires retraite et santé déductibles
@@ -98,8 +217,36 @@ const SchemeComparaisonPage = () => (
 					<button className="auto ui__ button">Choisir ce régime</button>
 				</div>
 			</div>
-		</Animate.fromBottom>
-	</>
-)
+		</>
+	)
+}
 
-export default withSimulationConfig(ComparaisonConfig)(SchemeComparaisonPage)
+export default (compose(
+	connect(
+		state => ({
+			conversationStarted: state.conversationStarted,
+			noUserInput: noUserInputSelector(state),
+			...map(
+				situationBranchName =>
+					tryCatch(
+						() => ({
+							retraite: règleAvecMontantSelector(state, {
+								situationBranchName
+							})('protection sociale . retraite'),
+							revenuNet: règleAvecMontantSelector(state, {
+								situationBranchName
+							})('revenu net')
+						}),
+						() => null
+					)(),
+				{
+					assimiléSalarié: 'Assimilé salarié',
+					indépendant: 'Indépendant',
+					autoEntrepreneur: 'Auto-entrepreneur'
+				}
+			)
+		}),
+		{ startConversation }
+	),
+	withSimulationConfig(ComparaisonConfig)
+)(SchemeComparaisonPage): React$Component<OwnProps>)