Fait en sorte que les liens rapides au dessus de la simulation amènent directement à la question concernée

source/actions/actions.js

@@ -2,7 +2,8 @@
 import type {
 	ResetSimulationAction,
 	LoadPreviousSimulationAction,
-	DeletePreviousSimulationAction
+	DeletePreviousSimulationAction,
+	StartConversationAction
 } from 'Types/ActionsTypes'
 
 export function resetSimulation(): ResetSimulationAction {
@@ -17,6 +18,13 @@ export function deletePreviousSimulation(): DeletePreviousSimulationAction {
 	}
 }
 
+export function startConversation(question: ?string): StartConversationAction {
+	return {
+		type: 'START_CONVERSATION',
+		...(question ? { question } : {})
+	}
+}
+
 // $FlowFixMe
 export function setExample(name, situation, dottedName) {
 	return { type: 'SET_EXAMPLE', name, situation, dottedName }

source/components/QuickLink.js

@@ -0,0 +1,40 @@
+/* @flow */
+import { startConversation } from 'Actions/actions'
+import React from 'react'
+import { connect } from 'react-redux'
+type Props = {
+	startConversation: (?string) => void
+}
+const QuickLink = ({ startConversation }: Props) => (
+	<>
+		<button
+			className="ui__ link-button"
+			onClick={() => startConversation('contrat salarié . type de contrat')}>
+			Permanent
+		</button>
+		<button
+			className="ui__ link-button"
+			onClick={() => startConversation('contrat salarié . type de contrat')}>
+			Fixed-term
+		</button>
+		<button
+			className="ui__ link-button"
+			onClick={() => startConversation('contrat salarié . statut cadre')}>
+			"Cadre" status
+		</button>
+		<button
+			className="ui__ link-button"
+			onClick={() => startConversation('contrat salarié . temps partiel')}>
+			Part time
+		</button>
+		<button className="ui__ link-button" onClick={startConversation}>
+			Other situations
+		</button>
+	</>
+)
+export default connect(
+	null,
+	{
+		startConversation
+	}
+)(QuickLink)

source/components/Simu.js

@@ -13,6 +13,7 @@ import * as Animate from 'Ui/animate'
 import Conversation from './conversation/Conversation'
 import Distribution from './Distribution'
 import PaySlip from './PaySlip'
+import QuickLink from './QuickLink'
 import './Simu.css'
 import TargetSelection from './TargetSelection'
 
@@ -25,7 +26,7 @@ import TargetSelection from './TargetSelection'
 		nextSteps: state.conversationStarted && nextStepsSelector(state)
 	}),
 	{
-		onSimulationContinued: () => ({ type: 'START_CONVERSATION' })
+		startConversation: () => ({ type: 'START_CONVERSATION' })
 	}
 )
 export default class Simu extends Component {
@@ -35,7 +36,7 @@ export default class Simu extends Component {
 			conversationStarted,
 			noUserInput,
 			nextSteps,
-			onSimulationContinued,
+			startConversation,
 			blockingInputControls
 		} = this.props
 		const firstValidInputEntered =
@@ -64,50 +65,23 @@ export default class Simu extends Component {
 									fontSize: '110%',
 									justifyContent: 'space-evenly'
 								}}>
-								<button
-									className="ui__ link-button"
-									onClick={onSimulationContinued}>
-									<Trans>CDD</Trans>
-								</button>
-								<button
-									className="ui__ link-button"
-									onClick={onSimulationContinued}>
-									CDI
-								</button>
-								<button
-									className="ui__ link-button"
-									onClick={onSimulationContinued}>
-									<Trans>Cadre</Trans>
-								</button>
-								<button
-									className="ui__ link-button"
-									onClick={onSimulationContinued}>
-									<Trans>Temps partiel</Trans>
-								</button>
-								<button
-									className="ui__ link-button"
-									onClick={onSimulationContinued}>
-									<Trans>Autres situations</Trans>
-								</button>
+								<QuickLink />
 							</animated.div>
 						)}
 					</Spring>
 					{conversationStarted &&
 						!nextSteps.length && (
 							<>
-								<h1>
-									<Trans>Plus de questions restantes!</Trans>
-								</h1>
+								<h1>No more questions left!</h1>
 								<p>
 									<Trans>
-										Vous avez atteint l&apos;estimation la plus précise. Vous
-										pouvez maintenant concrétiser votre projet, et apprendre les
-										démarches à suivre pour
+										You have reached the most accurate estimate. You can now
+										turn your hiring project into reality.
 									</Trans>
 								</p>
 								<div style={{ textAlign: 'center' }}>
 									<Link className="ui__ button" to="/hiring-process">
-										Connaître les démarches
+										See the procedures
 									</Link>
 								</div>
 							</>
@@ -148,7 +122,7 @@ export default class Simu extends Component {
 							hiring costs.
 						</p>
 						<p style={{ textAlign: 'center' }}>
-							<button className="ui__ button" onClick={onSimulationContinued}>
+							<button className="ui__ button" onClick={startConversation}>
 								Estimate my real costs
 							</button>
 						</p>

source/components/rule/Algorithm.css

@@ -4,6 +4,7 @@
 
 .situationValue {
 	display: none;
+	font-size: 110%;
 	border-bottom-left-radius: 3px;
 	font-weight: 400;
 	color: black;
@@ -31,7 +32,6 @@
 #rule-rules
 	.inlineExpression:not(.comparison):not(.negation)
 	> .situationValue {
-	font-size: 90%;
 	margin-left: 0.3em;
 	margin-bottom: 0.6em;
 	margin-top: 0.3em;
@@ -44,9 +44,6 @@
 	margin: 1em 0;
 }
 
-#rule-content {
-	font-size: 90%;
-}
 
 #rule-rules #ruleValue {
 	font-weight: 400;
@@ -76,7 +73,7 @@
 	display: block;
 	background: #34495e;
 	color: white !important;
-	font-weight: 600;
+	font-weight: 500;
 	border-bottom-right-radius: 3px;
 }
 .mecanism > .nodeHead .name::first-letter {
@@ -86,7 +83,7 @@
 	bottom: 0;
 	right: 0;
 	position: absolute;
-	padding: 0.2em 1em;
+	padding: 0.2rem 1rem;
 	border: 1px solid;
 	border-color: inherit;
 	font-weight: 600;
@@ -109,7 +106,6 @@
 }
 
 .mecanism .properties .key {
-	font-weight: 600;
 	display: inline-block;
 	margin-bottom: 0.6em;
 	margin-right: 0.8em;
@@ -131,7 +127,7 @@
 
 .maximum .description,
 .composanteName {
-	font-weight: 600;
+	font-weight: 500;
 	margin-bottom: 0.4em;
 	margin-left: 1em;
 }
@@ -165,8 +161,7 @@
 
 
 .percentage .name {
-	font-size: 110%;
-	font-weight: 600;
+	font-weight: 500;
 }
 
 .inlineExpression .operator {
@@ -199,7 +194,7 @@
 	padding: 0.1em 0.4em;
 }
 .barème table tr:first-child {
-	font-weight: 600;
+	font-weight: 500;
 }
 .barème table tr:nth-child(2n) {
 	background: #f1f1f1;
@@ -301,7 +296,6 @@
 .inlineExpression.comparison > .situationValue,
 .inlineExpression.negation > .situationValue {
 	order: -1;
-	font-size: 110% !important;
 }
 
 .mecanism.cond *:not(.nodeContent) > .variable .name > .situationValue,
@@ -314,6 +308,5 @@
 	> .situationValue {
 	margin-bottom: -5px;
 	background-color: white;
-	font-size: 130% !important;
 	margin-left: 0 !important;
 }

source/components/rule/Rule.css

@@ -1,5 +1,4 @@
 #rule {
-	font-size: 110%;
 	height: 100%;
 	padding-bottom: 10%;
 	max-width: 45em;

source/components/ui/Typography.css

@@ -42,6 +42,7 @@ h5,
 h6 {
 	font-family: 'IBM Plex Sans', sans-serif;
 	font-weight: normal;
+	line-height: initial;
 }
 
 h1,
@@ -54,15 +55,10 @@ button {
 	font-weight: normal;
 }
 
-p,
-ul {
+body {
 	line-height: 1.7rem;
 }
 
-li {
-	margin-bottom: 1rem;
-}
-
 a {
 	border: none;
 	display: inline-block;

source/components/ui/index.css

@@ -5,10 +5,10 @@
 body {
 	overflow-x: hidden;
 }
-.ui__.container {
-	max-width: 800px;
-	margin: 0 auto;
-	padding: 1rem;
+
+button {
+	border: none;
+	border-radius: 0;
 }
 
 .ui__.answer-group {
@@ -27,7 +27,8 @@ body {
 
 .ui__.container {
 	max-width: 45em;
-	margin: 0 auto;
+	margin-right: auto;
+	margin-left: auto;
 	padding: 0 0.6em;
 }
 

source/engine/mecanismViews/Somme.css

@@ -31,7 +31,6 @@
 	padding: 0 0.4em;
 	font-weight: 600;
 	border: none !important;
-	font-size: 120%;
 	color: black;
 }
 .somme .operator + .element {
@@ -59,56 +58,10 @@
 	border-bottom: 1px solid rgba(51, 51, 80, 0.15);
 }
 
-/* Specific to ResultsGrid.css. Somme.js and ResultsGrid.js should be merged */
-.resultsGrid table {
-	font-size: 90%;
-}
-.resultsGrid table a {
-	color: inherit;
-}
-.resultsGrid td {
-	line-height: 1.6em;
-	border: 1px solid #e3e3ee;
-}
-.resultsGrid .operator {
-	border-right-color: transparent;
-	margin-right: 0.4em;
-}
-.resultsGrid .element.category {
-	font-weight: 600;
-	font-size: 100%;
-}
-.resultsGrid .detailsRow .name {
-	padding-left: 1.2em;
-}
-.resultsGrid .detailsRow .name:hover {
-	color: #111;
-	text-decoration: underline;
-}
-
-.resultsGrid .name {
-	font-size: 90%;
-}
-.resultsGrid .value {
-	font-weight: 700;
-	color: #031bd6;
-}
 #sommeBase {
 	text-align: center;
 }
 
-.resultsGrid .annotation {
-	color: #333350;
-	border: 1px solid #333350;
-	background: #031bd61a;
-	font-weight: 600;
-	font-size: 95%;
-	padding: 0 0.6em;
-	margin-left: 0.3em;
-	border-radius: 0.2em;
-	white-space: nowrap;
-}
-
 .detailsRow {
 	background: rgba(51, 51, 80, 0.02);
 }
@@ -179,5 +132,4 @@
 .nested .mecanism-somme__row {
 	padding-left: 2em;
 	border-top: 1px dashed rgba(51, 51, 80, 0.15);
-	font-size: 90%;
 }

source/reducers/rootReducer.js

@@ -1,12 +1,17 @@
+/* @flow */
+
 import { popularTargetNames } from 'Components/TargetSelection'
 import { defaultTo, without } from 'ramda'
+// $FlowFixMe
 import reduceReducers from 'reduce-reducers'
 import { combineReducers } from 'redux'
+// $FlowFixMe
 import { reducer as formReducer } from 'redux-form'
 import computeThemeColours from 'Ui/themeColours'
 import defaultLang from '../i18n'
 import inFranceAppReducer from './inFranceAppReducer'
 import storageReducer from './storageReducer'
+import type { Action } from 'Types/ActionsTypes'
 
 // TODO : use context API instead
 function themeColours(state = computeThemeColours(), { type, colour }) {
@@ -32,8 +37,8 @@ function currentExample(state = null, { type, situation, name, dottedName }) {
 	}
 }
 
-function conversationStarted(state = false, { type }) {
-	switch (type) {
+function conversationStarted(state = false, action: Action) {
+	switch (action.type) {
 		case 'START_CONVERSATION':
 			return true
 		case 'RESET_SIMULATION':
@@ -62,13 +67,22 @@ function lang(state = defaultLang, { type, lang }) {
 	}
 }
 
-function conversationSteps(
-	state = { foldedSteps: [], currentQuestion: null },
-	{ type, name, step }
-) {
-	if (type === 'RESET_SIMULATION') return { foldedSteps: [], unfolded: null }
-	if (type !== 'STEP_ACTION') return state
+type ConversationSteps = {|
+	+foldedSteps: Array<string>,
+	+unfoldedStep: ?string
+|}
 
+function conversationSteps(
+	state: ConversationSteps = { foldedSteps: [], unfoldedStep: null },
+	action: Action
+): ConversationSteps {
+	if (action.type === 'RESET_SIMULATION')
+		return { foldedSteps: [], unfoldedStep: null }
+	if (action.type === 'START_CONVERSATION' && action.question)
+		return { foldedSteps: state.foldedSteps, unfoldedStep: action.question }
+
+	if (action.type !== 'STEP_ACTION') return state
+	const { name, step } = action
 	if (name === 'fold')
 		return { foldedSteps: [...state.foldedSteps, step], unfoldedStep: null }
 	if (name === 'unfold') {
@@ -78,9 +92,11 @@ function conversationSteps(
 				...without([step], state.foldedSteps),
 				...(state.unfoldedStep ? [state.unfoldedStep] : [])
 			],
+
 			unfoldedStep: step
 		}
 	}
+	return state
 }
 
 export default reduceReducers(

source/selectors/analyseSelectors.js

@@ -159,6 +159,6 @@ export let nextStepsSelector = createSelector(
 	getNextSteps
 )
 export let currentQuestionSelector = createSelector(
-	[nextStepsSelector],
-	nextSteps => head(nextSteps)
+	[nextStepsSelector, state => state.conversationSteps.unfoldedStep],
+	(nextSteps, unfoldedStep) => unfoldedStep || head(nextSteps)
 )

source/sites/mycompanyinfrance.fr/App.js

@@ -1,3 +1,4 @@
+import RulePage from 'Components/RulePage'
 import withTracker from 'Components/utils/withTracker'
 import React, { Component } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
@@ -26,8 +27,9 @@ class InFranceRoute extends Component {
 						{/* Passing location down to prevent update blocking */}
 						<StepsHeader location={location} />
 						<div className="ui__ container">
-							{/* <Route path="/règle/:name" component={RulePage} /> */}
 							<Route path="/register" component={CreateMyCompany} />
+							<Route path="/règle/:name" component={RulePage} />
+
 							<Route path="/social-security" component={CostsBenefits} />
 							<Route path="/hiring-process" component={HiringProcess} />
 						</div>

source/sites/mycompanyinfrance.fr/entry.js

@@ -1,47 +1,5 @@
 import React from 'react'
 import { render } from 'react-dom'
 import App from './App'
-
-// Avoid `console` errors in browsers that lack a console.
-;(function() {
-	var method
-	var noop = function() {}
-	var methods = [
-		'assert',
-		'clear',
-		'count',
-		'debug',
-		'dir',
-		'dirxml',
-		'error',
-		'exception',
-		'group',
-		'groupCollapsed',
-		'groupEnd',
-		'info',
-		'log',
-		'markTimeline',
-		'profile',
-		'profileEnd',
-		'table',
-		'time',
-		'timeEnd',
-		'timeStamp',
-		'trace',
-		'warn'
-	]
-	var length = methods.length
-	var console = (window.console = window.console || {})
-
-	while (length--) {
-		method = methods[length]
-
-		// Only stub undefined methods.
-		if (!console[method]) {
-			console[method] = noop
-		}
-	}
-})()
-
 let anchor = document.querySelector('#js')
 render(<App />, anchor)

source/sites/mycompanyinfrance.fr/pages/Header/StepsHeader.css

@@ -43,7 +43,7 @@
 }
 .steps-header a.active {
 	opacity: 1;
-	flex: 1;
+	flex-grow: 1;
 }
 /* IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

source/types/ActionsTypes.js

@@ -7,12 +7,22 @@ export type LoadPreviousSimulationAction = {
 export type ResetSimulationAction = {
 	type: 'RESET_SIMULATION'
 }
-
+export type StartConversationAction = {
+	type: 'START_CONVERSATION',
+	question?: string
+}
 export type DeletePreviousSimulationAction = {
 	type: 'DELETE_PREVIOUS_SIMULATION'
 }
+export type StepAction = {
+	type: 'STEP_ACTION',
+	name: 'fold' | 'unfold',
+	step: string
+}
 
 export type Action =
+	| StartConversationAction
 	| LoadPreviousSimulationAction
 	| ResetSimulationAction
 	| DeletePreviousSimulationAction
+	| StepAction