[cdd] Refonte visuelle des résultats de la simulation

règles/entités/salariat/Salariat.CDD.yaml

@@ -13,9 +13,9 @@
   question: Quelle est la durée du contrat ?
   sous-question: |
     [Cliquez ici](https://www.service-public.fr/professionnels-entreprises/vosdroits/F31211) pour connaître la durée maximale d'un CDD.
-  format: période
   références:
     Durée maximale d'un CDD (service-public.fr): https://www.service-public.fr/professionnels-entreprises/vosdroits/F31211
+  format: période
   suggestions:
     18 mois: 18
     1 an: 12
@@ -28,7 +28,6 @@
   question: Quel est le motif de recours au CDD ?
   description: |
     Le CDD est un contrat d'exception: son recours doit être autorisé par l'un de ces motifs
-  langue au chat possible: non
   une possibilité:
     - saisonnier
     - jeune vacances
@@ -114,6 +113,7 @@
   description: Certains événements impactent le prix d'un CDD
   # au lieu de lister tous les cas, l'alternative est de simplement indiquer qu'ils sont exclusifs,
   # et les identifier dynamiquement par leur attribut "attache" :
+  langue au chat possible: oui
   une possibilité:
     - CDD poursuivi en CDI
     - refus CDI avantageux

règles/entités/salariat/Salariat.contrats-aidés.yaml

@@ -2,7 +2,6 @@
 - Variable: contrat aidé
   attache: Salariat
   question: Est-ce un contrat aidé ?
-  langue au chat possible: non
   une possibilité:
     - contrat unique insertion
     - emploi avenir

règles/entités/salariat/Salariat.yaml

@@ -10,8 +10,12 @@
 - Variable: congés non pris
   attache: Salariat
   question: Combien de jours de congés non pris ?
-  description: LALALA
-  format: entier positif
+  description: Combien de jours de congés ne pourront être pris par l'employé, du fait de la durée de son CDD. En jours ouvrés, donc sur 25 jours de congés légaux annuels.
+  format: nombre positif
+  suggestions:
+    3 / 25: 3
+    10 / 25: 10
+
 
 
 - Variable: salaire de base
@@ -19,6 +23,9 @@
   question: Quel est le salaire de base ?
   description: Le salaire de base est le salaire brut régulier inscrit dans le contrat. Des primes viendront éventuellement le compléter, on parlera alors de salaire brut.
   format: nombre positif
+  suggestions:
+    SMIC: 1480
+    salaire médian: 2300
 
 - Variable: Salaire brut
   formule:

règles/rémunération-travail/cdd/indemnité_compensatrice_congés_payés.yaml

@@ -1,4 +1,4 @@
-- Cotisation: Indemnité compensatrice congés payés
+- Indemnité: compensation des congés payés
   attache: Salariat . CDD
   description: |
     Le salarié en CDD bénéficie des mêmes droits à congés payés que le salarié en CDI. Il acquiert et prend ses congés payés dans les mêmes conditions.

source/components/CDD.css

@@ -50,7 +50,7 @@ p {
 
 #sim #results {
 	padding: .1em;
-	background: #4A89DC;
+	background: rgb(74, 137, 220);
 	box-shadow: 1px -7px 20px 2px #eee;
 	position: fixed;
 	bottom: 0;
@@ -58,7 +58,7 @@ p {
 	width: 100%;
 	font-size: 80%;
 	color: white;
-	height: 10em;
+	height: 12em;
 	text-align: center;
 }
 
@@ -69,9 +69,9 @@ p {
 	float: left;
 	line-height: 1.2em;
 	margin: 0;
-	margin-left: 1.5em;
+	margin-left: .5em;
 	padding: .5em;
-	font-weight: 400;
+	font-weight: 300;
 	font-size: 300%;
 }
 
@@ -80,66 +80,72 @@ p {
 	display: inline-flex;
 	justify-content: space-around;
 	height: 100%;
-	width: 70%;
+	width: 80%;
 	list-style: none;
 	margin-top: 0.4em;
+	padding-left: 0;
 }
 
 #results li {
-	color: #333;
-	background: white;
-	display: inline-block;
-	margin: 0 2em;
-	border-radius: 8px;
-	padding: .6em 2em;
+	margin: .8em 1em;
 	text-align: center;
-	border: 1px solid #333350;
 }
-#results li.unsatisfied {
-	border: 2px dashed #4A89DC;
+#results .rule-box {
+	padding: .2em 1em;
+	color: rgb(74, 137, 220);
+	background: white;
+	border-radius: 3px;
+	border: 1px solid white;
+	white-space: nowrap;
+	color: #333350;
+}
+#results li.unsatisfied .rule-box {
+	border: 2px dashed rgb(74, 137, 220);
 }
 
-#results li h3 {
-	font-size: 130%;
-	/*width: 80%;*/
-	border-bottom: 1px solid #aaa;
-	margin: .1em;
-	margin-bottom: .3em;
-	padding-bottom: .2em;
+#results .rule-type {
+	background: rgb(74, 137, 220);
+	color: white;
+	border: 1px solid;
+	font-size: 75%;
+	line-height: 2em;
+	font-weight: 800;
+}
+
+#results .rule-name {
+	font-size: 150%;
+	text-transform: capitalize;
 }
 
 #results li p {
 	margin: 0;
-	font-size: 150%;
+	padding: 1em 0;
+	font-size: 120%;
+	color: inherit;
 }
 
 #results li.unsatisfied p{
 	font-style: italic;
 }
-#results li.number p {
-	font-size: 300%;
+#results li p .figure {
+	font-size: 200%;
 }
 
-#results li:hover .understand {
-	display: inline;
-}
-
-#results li .understand {
-	display: none;
-}
-
-#results .understand button {
-	background: #4A89DC;
+#results .understand {
 	color: white;
-	font-weight: 600;
+	font-weight: 200;
 	border: none;
   padding: .3em .8em;
+	line-height: 1.8em;
+	font-style: italic;
+	text-decoration: none;
 }
 #results .understand i {
 	display: inline-block;
-	font-size: 190%;
+	font-size: 120%;
 	line-height: .2em;
-	opacity: .8
+	opacity: .3;
+	margin: 0 0 0 .6em;
 }
 #results .understand:hover i {
 	opacity: 1

source/components/CDDIntro.css

@@ -9,6 +9,7 @@
 }
 
 #CDDIntro h1 {
+	margin-top: 3%;
 	text-align: center;
 	font-size: 350%;
 	font-weight: 800;
@@ -40,7 +41,7 @@
 
 #CDDIntro #action {
 	color: white;
-	margin-top: 5%;
+	margin-top: 3%;
 	display: block;
 	text-align: center;
 }
@@ -58,3 +59,7 @@
 	box-shadow: none;
 	opacity: .95;
 }
+
+.italic {
+	font-style: italic;
+}

source/components/CDDIntro.js

@@ -28,10 +28,10 @@ export default () => (
       <p>
         Sur ce simulateur 17.0, <span className="insist">vous avez le droit de ne pas savoir</span> : certains termes utilisés dans la simulation ne sont pas évidents : cliquez simplement sur le symbôle • qui les suit pour ouvrir une aide contextuelle.
       </p>
-      <p>
-        Et n'hésitez pas à nous écrire <i style={{cursor: 'pointer'}} className="fa fa-envelope-o" /> ! La loi française est complexe, souvent à raison. Nous ne la changerons pas, mais pouvons la rendre plus transparente.
-      </p>
       <Link id="action" to="/cdd"><button>C'est parti !</button></Link>
+      <p className="italic">
+        Et n'hésitez pas à nous écrire &nbsp;<i style={{cursor: 'pointer'}} className="fa fa-envelope-o" /> ! La loi française est complexe, car très ciblée. Nous ne la changerons pas, mais pouvons la rendre plus transparente.
+      </p>
     </section>
   </div>
 )

source/components/Results.js

@@ -2,6 +2,9 @@ import React, { Component } from 'react'
 import classNames from 'classnames'
 import {Link} from 'react-router'
 
+let fmt = new Intl.NumberFormat('fr-FR').format
+let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
+
 export default class Results extends Component {
 	render() {
 		let {analysedSituation} = this.props
@@ -18,19 +21,24 @@ export default class Results extends Component {
 								irrelevant = nonApplicable === true;
 
 							<li key={name} className={classNames({unsatisfied, number: !unsatisfied && !irrelevant})}>
-								<h3>{type} {name}</h3>
-								<p>
-								{irrelevant ?
-									"Vous n'êtes pas concernés"
-									: unsatisfied ?
-										'En attente de vos réponses...'
-										:computedValue + '€'
-								}
-								</p>
+								<div className="rule-box">
+									<div className="rule-type">
+										{type}
+									</div>
+									<div className="rule-name">
+										{name}
+									</div>
+									<p>
+									{irrelevant ?
+										"Vous n'êtes pas concernés"
+										: unsatisfied ?
+											'En attente de vos réponses...'
+											: <span className="figure">{humanFigure(2)(computedValue) + '€'}</span>
+									}
+									</p>
+								</div>
 								<Link to={"/regle/" + name} className="understand">
-									<button>
-										Comprendre <i className="fa fa-cogs" aria-hidden="true"></i>
-									</button>
+									Pourquoi ? <i className="fa fa-cogs" aria-hidden="true"></i>
 								</Link>
 							</li>
 						}

source/components/Rule.js

@@ -9,20 +9,20 @@ import {connect} from 'react-redux'
 import {formValueSelector} from 'redux-form'
 
 // situationGate function useful for testing :
-let testingSituationGate = v => R.path(v.split('.'))(
-	{
-		"Salariat ":{
-			" CDD ":{
-					" événements": "_",
-					" motif":"saisonnier",
-					" engagement employeur complément formation":"non",
-					" durée contrat": 2
-				},
-			" contrat aidé":"non",
-			" salaire de base": 1481,
-			" congés non pris": 3
-		}
-	})
+let testingSituationGate = v =>
+  R.path(v.split('.'))({
+	'Salariat ': {
+		' CDD ': {
+			' événements': '_',
+			' motif': 'saisonnier',
+			' engagement employeur complément formation': 'non',
+			' durée contrat': '2',
+		},
+		' contrat aidé': 'non',
+		' salaire de base': '1481',
+		' congés non pris': '3',
+	},
+})
 
 @connect(state => ({
 	situationGate: name => formValueSelector('conversation')(state, name)
@@ -34,7 +34,7 @@ export default class Rule extends Component {
 			situationGate
 		} = this.props,
 			rule = analyseSituation(
-				testingSituationGate
+				situationGate
 			).find(R.propEq('name', name))
 
 		if (!rule) {
@@ -159,11 +159,13 @@ let Multiplication = ({base, rate}) =>
 </div>
 
 
-let Variable = ({nodeValue, variableName}) =>
+let Variable = (yo) => do {let {nodeValue, variableName} = yo;
+console.log('yo', yo);
 <span className="variable" >
 	<span className="name">{variableName}</span>
 	<NodeValue data={nodeValue}/>
 </span>
+}
 
 
 let Comparison = ({nodeValue, text}) =>

source/components/conversation/conversation.css

@@ -170,7 +170,7 @@ question : make it visible with colors */
   padding: .3em 1em;
   line-height: 1.8em;
   border-radius: .4em;
-	font-weight: 600;
+	font-weight: 500;
 	font-size: 90%;
 	border: 1px solid #ddd;
 }

source/engine/expressions.js

@@ -123,8 +123,8 @@ export let knownVariable = (situationGate, variableName) =>
 export let evaluateVariable = (situationGate, variableName) => {
 	let value = situationGate(variableName)
 
-	return R.is(Number)(value)
-    ? value
-    : value == 'oui' ||
+	return isNaN(value)
+    ? value == 'oui' ||
         situationGate(parentName(variableName)) == nameLeaf(variableName)
+		: value
 }

source/engine/variablesInDevelopment.yaml

@@ -1,4 +1,4 @@
-# - CIF CDD
-# - fin de contrat
-# - majoration chômage CDD
-- Indemnité compensatrice congés payés
+- CIF CDD
+- fin de contrat
+- majoration chômage CDD
+- compensation des congés payés

source/reducers.js

@@ -121,7 +121,7 @@ export default reduceReducers(
 											component: Question,
 											choices:
 												group['une possibilité'].concat(
-													group['langue au chat possible'] ?
+													group['langue au chat possible'] === 'oui' ?
 														[{value: '_', label: 'Aucun'}] : []
 												)
 										}