🎨 Simulation un peu plus prête à être utilisée

Il reste encore beaucoup de boulot

source/components/ComparativeSimulation.css

@@ -0,0 +1,30 @@
+#ComparativeSimulation {
+	padding: 0 1.5em;
+}
+
+#ComparativeSimulation #simulationContent button {
+	padding: 0.6em 1em;
+	text-align: center;
+	border-radius: 6px;
+	font-weight: 500;
+}
+#ComparativeSimulation header {
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	margin: 1em 0;
+}
+#ComparativeSimulation header > h1 {
+	font-size: 120%;
+	margin: 0.3em 0;
+}
+
+#ComparativeSimulation .step-question h1 {
+	margin-top: 1rem;
+}
+
+#ComparativeSimulation .conversationContainer {
+	margin-bottom: 10%;
+}

source/components/ComparativeSimulation.js

@@ -5,7 +5,7 @@ import Answers from 'Components/AnswerList'
 import Conversation from 'Components/conversation/Conversation'
 import withColours from 'Components/utils/withColours'
 import ComparativeTargets from 'Components/ComparativeTargets'
-import './GenericSimulation.css'
+import './ComparativeSimulation.css'
 import {
 	nextStepsSelector,
 	analysisWithDefaultsSelector
@@ -34,13 +34,11 @@ export default compose(
 				analysis: { controls }
 			} = this.props
 			return (
-				<div id="GenericSimulation">
+				<div id="ComparativeSimulation" className="ui__ container">
 					<header>
-						<img src="https://images.unsplash.com/photo-1488722796624-0aa6f1bb6399?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
-						<h1>Quel revenu au régime des indépendants ?</h1>
-						<PeriodSwitch />
+						<h1>{simulationConfig.titre}</h1>
 					</header>
-					<div className="ui__ container" id="simulationContent">
+					<div id="simulationContent">
 						{!isEmpty(previousAnswers) && (
 							<button
 								style={{
@@ -68,6 +66,7 @@ export default compose(
 								<p>Vous avez atteint l'estimation la plus précise.</p>
 							</>
 						)}
+						<PeriodSwitch />
 						<ComparativeTargets />
 					</div>
 				</div>

source/components/ComparativeTargets.css

@@ -0,0 +1,32 @@
+#targets {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+#targets > .content > ul > li {
+	margin: 1em;
+	border-radius: 6px;
+	background: var(--colour);
+	padding: 1em;
+	width: 16em;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+#targets > .icon {
+	margin: 0 0.6em;
+	font-size: 200%;
+	color: var(--colour);
+}
+#targets .value {
+	font-size: 180%;
+}
+#targets .unit {
+}
+
+#targets .explanation {
+	font-size: 150%;
+	text-decoration: none;
+	line-height: 0;
+}

source/components/ComparativeTargets.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 import { connect } from 'react-redux'
-import './Targets.css'
+import './ComparativeTargets.css'
 import withColours from 'Components/utils/withColours'
 import { Link } from 'react-router-dom'
 import emoji from 'react-easy-emoji'
 import { compose } from 'ramda'
 import simulationConfig from './simulateur-rémunération-dirigeant.yaml'
+import AnimatedTargetValue from './AnimatedTargetValue'
 
 export default compose(
 	connect(state => ({
@@ -14,7 +15,7 @@ export default compose(
 	})),
 	withColours
 )(
-	class Targets extends React.Component {
+	class ComparativeTargets extends React.Component {
 		render() {
 			return (
 				<div id="targets">
@@ -23,12 +24,15 @@ export default compose(
 						style={{ color: this.props.colours.textColour }}>
 						<ul>
 							{this.props.analyses.map((analysis, i) => {
-								let { title, nodeValue, dottedName } = analysis.targets[0]
+								let { title, nodeValue, dottedName } = analysis.targets[0],
+									name = simulationConfig.branches[i].nom
 								return (
-									<li>
-										{simulationConfig.branches[i].nom}
+									<li key={name}>
+										{name}
 										<span className="figure">
-											<span className="value">{nodeValue?.toFixed(1)}</span>{' '}
+											<span className="value">
+												<AnimatedTargetValue value={nodeValue} />
+											</span>{' '}
 										</span>
 										<Link
 											title="Quel est calcul ?"

source/components/GenericSimulation.css

@@ -19,7 +19,7 @@
 }
 #GenericSimulation img {
 	max-width: 800px;
-	max-height: 24em;
+	max-height: 18em;
 }
 @media (min-width: 1200px) {
 	#GenericSimulation header > h1 {

source/components/PeriodSwitch.css

@@ -23,7 +23,7 @@ input[type='radio'] + span {
 	vertical-align: middle;
 	border-radius: 20px;
 	cursor: pointer;
-	box-shadow: 0 0 0px 1px rgb(41, 117, 209);
+	box-shadow: 0 0 0px 1px var(--colour);
 }
 input[type='radio'] ~ span {
 	cursor: pointer;

source/components/simulateur-rémunération-dirigeant.yaml

@@ -1,23 +1,25 @@
+titre: |
+  Calcul du revenu du travailleur indépendant ou dirigeant d'entreprise en fonction de son choix de régime social.
 questions: 
   - entreprise . chiffre d'affaires
   - entreprise . catégorie d'activité
 branches: 
-  - nom: Revenu en indépendant
-    situation: 
-      indépendant: oui
-      micro entreprise: non
-      contrat salarié: non
-  - nom: Revenu en micro-entreprise
+  - nom: Micro-entreprise
     situation: 
       micro entreprise: oui
       indépendant: non
       contrat salarié: non
-  - nom: Revenu au régime général
+  - nom: Indépendant (ex-RSI)
+    situation: 
+      indépendant: oui
+      micro entreprise: non
+      contrat salarié: non
+  - nom: Régime général (assimilé salarié)
     situation: 
       micro entreprise: non
       indépendant: non
       contrat salarié: oui
       contrat salarié . assimilé salarié: oui
-      contrat salarié . rémunération . total: 100000
-
+raccourcis:
+  contrat salarié . rémunération . total: entreprise . chiffre d'affaires
 

source/règles/base.yaml

@@ -2562,7 +2562,7 @@
 
 - espace: entreprise
   nom: chiffre d'affaires
-  question: Quel chiffre d'affaires ?
+  question: Quel est votre chiffre d'affaires ?
   période: flexible
   format: euros
 
@@ -2572,6 +2572,7 @@
   période: flexible
 
 - nom: entreprise . catégorie d'activité
+  question: Quelle est votre catégorie d'activité ?
   par défaut: prestation de service . libérale
   formule: 
     une possibilité: 

source/selectors/analyseSelectors.js

@@ -147,10 +147,17 @@ export let exampleAnalysisSelector = createSelector(
 
 let makeAnalysisSelector = situationSelector =>
 	createDeepEqualSelector(
-		[parsedRulesSelector, targetNamesSelector, situationSelector],
-		(parsedRules, targetNames, situations) => {
-			let analyses = situations.map(s =>
-				analyseMany(parsedRules, targetNames)(dottedName => s[dottedName])
+		[
+			parsedRulesSelector,
+			targetNamesSelector,
+			situationSelector,
+			(_, { raccourcis: valueShortcuts }) => valueShortcuts
+		],
+		(parsedRules, targetNames, situations, valueShortcuts) => {
+			let analyses = situations.map(situation =>
+				analyseMany(parsedRules, targetNames)(
+					dottedName => situation[valueShortcuts[dottedName] || dottedName]
+				)
 			)
 			return analyses
 		}