From 12396bd9814f8a390b259198d8dd9d6c4170ed0b Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 14 Nov 2018 10:24:13 +0000
Subject: [PATCH] =?UTF-8?q?Interrupteur=20mois=20/=20ann=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           |  2 +-
 source/components/PeriodSwitch.js    | 22 ++++++++++++
 source/components/TargetSelection.js | 51 ++++++++++++----------------
 source/components/rule/Rule.js       | 10 +++---
 4 files changed, 51 insertions(+), 34 deletions(-)
 create mode 100644 source/components/PeriodSwitch.js

diff --git a/index.html b/index.html
index 0edcc1e5b..93c28637c 100644
--- a/index.html
+++ b/index.html
@@ -172,4 +172,4 @@
 	</script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/source/components/PeriodSwitch.js b/source/components/PeriodSwitch.js
new file mode 100644
index 000000000..117e9c23a
--- /dev/null
+++ b/source/components/PeriodSwitch.js
@@ -0,0 +1,22 @@
+import withColours from 'Components/utils/withColours'
+import React, { Component } from 'react'
+import { translate } from 'react-i18next'
+import { Field } from 'redux-form'
+
+export default function PeriodSwitch() {
+	return (
+		<>
+			<label>Entrez un salaire</label>
+			<>
+				<label>
+					<Field name="période" component="input" type="radio" value="mois" />
+					mensuel
+				</label>
+				<label>
+					<Field name="période" component="input" type="radio" value="année" />
+					annuel
+				</label>
+			</>
+		</>
+	)
+}
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 7c8f2921a..38ccbe172 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -24,6 +24,7 @@ import Controls from './Controls'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
 import ProgressCircle from './ProgressCircle'
 import './TargetSelection.css'
+import PeriodSwitch from './PeriodSwitch'
 
 let salaries = [
 	'contrat salarié . salaire . total',
@@ -70,14 +71,9 @@ class TargetSelection extends Component {
 		} = this.props
 		return (
 			<div id="targetSelection">
-				{noUserInput && (
-					<p className="blockingControl">
-						<Trans i18nKey="enterSalary">
-							Entrez un salaire <b>mensuel</b>
-						</Trans>
-					</p>
-				)}
+				{noUserInput && <p className="blockingControl" />}
 				<Controls {...{ blockingInputControls, controls }} />
+				<PeriodSwitch />
 				<section
 					id="targetsContainer"
 					style={{
@@ -136,16 +132,15 @@ class TargetSelection extends Component {
 									}}
 								/>
 							</div>
-							{activeInput === target.dottedName &&
-								!conversationStarted && (
-									<InputSuggestions
-										suggestions={target.suggestions}
-										onFirstClick={value =>
-											this.props.setFormValue(target.dottedName, '' + value)
-										}
-										colouredBackground={true}
-									/>
-								)}
+							{activeInput === target.dottedName && !conversationStarted && (
+								<InputSuggestions
+									suggestions={target.suggestions}
+									onFirstClick={value =>
+										this.props.setFormValue(target.dottedName, '' + value)
+									}
+									colouredBackground={true}
+								/>
+							)}
 						</li>
 					))}
 				</ul>
@@ -167,20 +162,18 @@ let Header = ({
 		encodeRuleName(target.dottedName)
 	return (
 		<span className="header">
-			{conversationStarted &&
-				!blockingInputControls && (
-					<ProgressCircle target={target} isActiveInput={isActiveInput} />
-				)}
+			{conversationStarted && !blockingInputControls && (
+				<ProgressCircle target={target} isActiveInput={isActiveInput} />
+			)}
 
 			<span className="texts">
-				{!conversationStarted &&
-					target.dottedName.includes('net après impôt') && (
-						<div>
-							<span id="labelNew">
-								<Trans>Janvier 2019</Trans>
-							</span>
-						</div>
-					)}
+				{!conversationStarted && target.dottedName.includes('net après impôt') && (
+					<div>
+						<span id="labelNew">
+							<Trans>Janvier 2019</Trans>
+						</span>
+					</div>
+				)}
 				<span className="optionTitle">
 					<Link to={ruleLink}>{target.title || target.name}</Link>
 				</span>
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index 6327c6012..34c5f143f 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -58,7 +58,6 @@ class Rule extends Component {
 			namespaceRules = findRuleByNamespace(flatRules, dottedName)
 
 		let displayedRule = analysedExample || analysedRule
-		let showValues = valuesToShow || currentExample
 
 		return (
 			<>
@@ -98,8 +97,8 @@ class Rule extends Component {
 												currency: 'EUR'
 										  }).format(displayedRule.nodeValue)
 										: typeof displayedRule.nodeValue !== 'object'
-											? displayedRule.nodeValue
-											: null}
+										? displayedRule.nodeValue
+										: null}
 								</div>
 							) : null}
 
@@ -114,7 +113,10 @@ class Rule extends Component {
 							// Fonctionnalité intéressante, à implémenter correctement
 							false && <UserInput {...{ flatRules, dottedName }} />}
 							{flatRule.ns && (
-								<Algorithm rule={displayedRule} showValues={showValues} />
+								<Algorithm
+									rule={displayedRule}
+									showValues={valuesToShow || currentExample}
+								/>
 							)}
 							{flatRule.note && (
 								<section id="notes">