Interrupteur mois / année

index.html

@@ -172,4 +172,4 @@
 	</script>
 </body>
 
-</html>
+</html>

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

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>

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">