Explication du contrôle, 🎨

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;
 }

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>
 											)}
 										</>
 									}}

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']
 			}
 		})
 

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: