From 180fdc097ce2e43e9b570e182dfadcac94de6938 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 12 Sep 2018 15:07:46 +0200
Subject: [PATCH] =?UTF-8?q?Explication=20du=20contr=C3=B4le,=20:art:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/Controls.css | 25 +++++++++++++++++++++----
 source/components/Controls.js  | 28 ++++++++++++++++++----------
 source/engine/traverse.js      |  2 +-
 source/règles/base.yaml        |  2 +-
 4 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/source/components/Controls.css b/source/components/Controls.css
index f9e407db9..e6ef4f0cd 100644
--- a/source/components/Controls.css
+++ b/source/components/Controls.css
@@ -3,12 +3,29 @@
 	font-size: 150%;
 }
 
-#controlsBlock #control {
+#controlsBlock h3 {
+	text-align: center;
+	margin: 0 0 0.6em;
+}
+
+#controlsBlock #controlContent {
+	font-size: 90%;
 	display: flex;
 	align-items: center;
-	justify-content: space-evenly;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+/* Display the values of the variables in the explanation of the failed control */
+#controlsBlock .variable .situationValue {
+	display: inline-block;
 }
 #controlsBlock img {
-	width: 2.5em !important;
-	height: 2.5em !important;
+	width: 2em !important;
+	height: 2em !important;
+}
+
+#controlsBlock #solution {
+	display: flex;
+	align-items: center;
 }
diff --git a/source/components/Controls.js b/source/components/Controls.js
index 7472712f7..eb462fd6f 100644
--- a/source/components/Controls.js
+++ b/source/components/Controls.js
@@ -4,6 +4,7 @@ import emoji from 'react-easy-emoji'
 import { connect } from 'react-redux'
 import { startConversation } from 'Actions/actions'
 import { animated, Spring } from 'react-spring'
+import { makeJsx } from 'Engine/evaluation'
 
 function Controls({ blockingInputControls, controls, startConversation }) {
 	return (
@@ -21,19 +22,26 @@ function Controls({ blockingInputControls, controls, startConversation }) {
 					{styles =>
 						controls?.length ? (
 							<animated.div id="control" style={styles}>
-								{emoji('⚠️')}
 								<div id="controlContent">
 									{do {
-										let { test, action } = controls[0]
+										let { level, solution, evaluated } = controls[0]
 										;<>
-											<p>{test}</p>
-											{action && (
-												<button
-													key={action.cible}
-													className="ui__ link-button"
-													onClick={() => startConversation(action.cible)}>
-													{action.texte}
-												</button>
+											<h3>
+												{level === 'avertissement'
+													? 'Attention !'
+													: 'Information'}
+											</h3>
+											<p>{makeJsx(evaluated)}</p>
+											{solution && (
+												<div id="solution">
+													{emoji('💡')}
+													<button
+														key={solution.cible}
+														className="ui__ link-button"
+														onClick={() => startConversation(solution.cible)}>
+														{solution.texte}
+													</button>
+												</div>
 											)}
 										</>
 									}}
diff --git a/source/engine/traverse.js b/source/engine/traverse.js
index 5c9fc88a4..3e96f619f 100644
--- a/source/engine/traverse.js
+++ b/source/engine/traverse.js
@@ -222,7 +222,7 @@ export let treatRuleRoot = (rules, rule) => {
 				test: control['si'],
 				message: control['message'],
 				testExpression,
-				action: control['action']
+				solution: control['solution']
 			}
 		})
 
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index fe1da9e46..678b893df 100644
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@@ -709,7 +709,7 @@
       niveau: bloquant
     - si: brut de base < smic mensuel
       niveau: avertissement
-      action:
+      solution:
         cible: contrat salarié . temps partiel
         texte: Est-ce un temps partiel ?
   formule: