Merge pull request #188 from betagouv/alien-consolidate

Version traduite du simulateur

.prettierrc

@@ -1,3 +1,12 @@
-useTabs: true
-semi: false
-singleQuote: true
+{
+  "printWidth": 80,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "useTabs": true,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "proseWrap": "preserve",
+  "tabWidth": 2
+}

package.json

@@ -15,16 +15,18 @@
 		"not ie < 11"
 	],
 	"dependencies": {
-		"live-server": "^1.2.0",
 		"@babel/polyfill": "^7.0.0-beta.34",
 		"classnames": "^2.2.5",
 		"dedent-js": "^1.0.1",
 		"deep-assign": "^2.0.0",
 		"flow": "^0.2.3",
 		"fuse.js": "^3.2.0",
 		"global": "^4.3.2",
+		"google-translate-api": "^2.3.0",
+		"i18next": "^10.0.7",
 		"ignore-loader": "^0.1.2",
 		"js-yaml": "^3.9.1",
+		"live-server": "^1.2.0",
 		"marked": "^0.3.9",
 		"mocha": "^5.0.0",
 		"mocha-webpack": "^1.0.1",
@@ -37,6 +39,7 @@
 		"react-dom": "^16.2.0",
 		"react-helmet": "^5.2.0",
 		"react-highlight-words": "^0.10.0",
+		"react-i18next": "^7.5.0",
 		"react-redux": "^5.0.6",
 		"react-router": "^4.2.0",
 		"react-router-dom": "^4.2.2",
@@ -102,6 +105,7 @@
 	},
 	"scripts": {
 		"start": "node source/server.js",
+		"externalize": "node source/externalize.js",
 		"compile": "NODE_ENV='production' webpack --config source/webpack.config.js",
 		"test": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/**/*.test.js\"",
 		"test-watch": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/**/*.test.js\" --watch",

source/actions.js

@@ -34,3 +34,4 @@ export function changeThemeColour(colour) {
 }
 
 export const EXPLAIN_VARIABLE = 'EXPLAIN_VARIABLE'
+export const CHANGE_LANG = 'CHANGE_LANG'

source/components/Aide.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import marked from 'Engine/marked'
-import { rules, findRuleByDottedName } from 'Engine/rules'
+import { findRuleByDottedName } from 'Engine/rules'
 import { EXPLAIN_VARIABLE } from '../actions'
 
 import References from './rule/References'
@@ -11,7 +11,8 @@ import './Aide.css'
 @connect(
 	state => ({
 		explained: state.explainedVariable,
-		themeColours: state.themeColours
+		themeColours: state.themeColours,
+		flatRules: state.flatRules
 	}),
 	dispatch => ({
 		stopExplaining: () => dispatch({ type: EXPLAIN_VARIABLE })
@@ -22,11 +23,11 @@ export default class Aide extends Component {
 		return marked(`### ${term} \n\n${explanation}`)
 	}
 	render() {
-		let { explained, stopExplaining, themeColours } = this.props
+		let { flatRules, explained, stopExplaining, themeColours } = this.props
 
 		if (!explained) return <section id="helpWrapper" />
 
-		let rule = findRuleByDottedName(rules, explained),
+		let rule = findRuleByDottedName(flatRules, explained),
 			text = rule.description,
 			refs = rule.références
 

source/components/Explanation.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react'
+import { Trans, translate } from 'react-i18next'
 import ResultsGrid from 'Components/ResultsGrid'
 import { salaries } from 'Components/TargetSelection'
 import { isEmpty, intersection, head } from 'ramda'
 import Rule from 'Components/rule/Rule'
 import './Explanation.css'
 import { pluck } from 'ramda'
 
+@translate()
 export default class Explanation extends Component {
 	render() {
 		let { targetRules } = this.props
@@ -17,10 +19,12 @@ export default class Explanation extends Component {
 				{this.renderExplanation(targetRules)}
 				<div id="warning">
 					<p>
-						<i className="fa fa-info-circle" aria-hidden="true" />Le calcul ne
-						prend pas en compte les conventions et accords collectifs, et n'est
-						pas opposable à un bulletin de paie. En cas d'écart, vous pouvez en
-						discuter avec votre responsable.
+						<i className="fa fa-info-circle" aria-hidden="true" />
+						<Trans i18nKey="disclaimer">
+						Le calcul ne prend pas en compte les conventions et accords collectifs,
+						et n'est pas opposable à un bulletin de paie. En cas d'écart, vous pouvez
+						en discuter avec votre responsable.
+						</Trans>
 					</p>
 				</div>
 			</section>
@@ -32,7 +36,7 @@ export default class Explanation extends Component {
 
 		if (targetRules.length > 1)
 			return (
-				<p>Cliquez sur les lignes de résultat ci-dessus pour les comprendre</p>
+				<p><Trans i18nKey="clickForMore">Cliquez sur les lignes de résultat ci-dessus pour les comprendre</Trans></p>
 			)
 
 		return <Rule rule={head(targetRules)} />

source/components/ProgressTip.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import './ProgressTip.css'
@@ -11,6 +12,7 @@ import { Line } from 'rc-progress'
 	nextSteps: state.nextSteps,
 	colour: state.themeColours.colour
 }))
+@translate()
 export default class ProgressTip extends Component {
 	state = {
 		nbFoldedStepsForFirstEstimation: null
@@ -29,13 +31,18 @@ export default class ProgressTip extends Component {
 			<div className="tip">
 				{nbQuestions != 0 &&
 					this.state.nbFoldedStepsForFirstEstimation === foldedSteps.length && (
-						<p>Votre première estimation est disponible !</p>
+						<p><Trans i18nKey="first">Votre première estimation est disponible !</Trans></p>
 					)}
 				{nbQuestions != 0 && (
 					<p>
 						{nbQuestions === 1
-							? 'Une dernière question !'
-							: `Il reste moins de ${nbQuestions} questions`}
+							?
+							<Trans i18nKey="lastQ">Une dernière question !</Trans>
+							:
+							<Trans i18nKey="questionsLeft" count={nbQuestions}>
+							Il reste moins de {{nbQuestions}} questions.
+							</Trans>
+						}
 						<Line
 							percent={
 								100 * foldedSteps.length / (foldedSteps.length + nbQuestions)

source/components/Results.css

@@ -53,7 +53,9 @@
 	flex-wrap: wrap;
 	margin: 0 auto;
 }
-
+#results i {
+	margin-right: 0.6em;
+}
 #results li {
 	margin: 0 1.2em;
 	display: inline-block;

source/components/Results.js

@@ -1,26 +1,34 @@
 import { isEmpty, path, contains } from 'ramda'
 import React, { Component } from 'react'
+import { Trans, translate } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 
 import './Results.css'
 import RuleValueVignette from './rule/RuleValueVignette'
 import ProgressTip from 'Components/ProgressTip'
+import { findRuleByDottedName } from 'Engine/rules.js'
 
 @withRouter
 @connect(state => ({
 	analysis: state.analysis,
+	flatRules: state.flatRules,
 	targetName: state.targetName,
 	conversationStarted: !isEmpty(state.form),
 	conversationFirstAnswer: path(['form', 'conversation', 'values'])(state),
 	situationGate: state.situationGate,
 	done: state.done,
 	themeColours: state.themeColours
 }))
+@translate()
 export default class Results extends Component {
 	render() {
-		let { analysis, conversationStarted, done, themeColours } = this.props
+		let { flatRules, analysis, conversationStarted, done, themeColours } = this.props
+			let withFlatRule = rule => ({
+				...rule,
+				flatRule: findRuleByDottedName(flatRules, rule.dottedName)
+			})
 
 		if (!analysis) return null
 
@@ -36,13 +44,13 @@ export default class Results extends Component {
 						<Link className="edit" to="/" style={textStyle}>
 							<i className="fa fa-pencil" aria-hidden="true" />
 							{'  '}
-							<span>Changer d'objectif</span>
+							<span><Trans i18nKey="reset">Changer d'objectif</Trans></span>
 						</Link>
 						<ul>
 							{targets.map(rule => (
 								<li key={rule.nom} style={textStyle}>
 									<RuleValueVignette
-										{...rule}
+										{...withFlatRule(rule)}
 										conversationStarted={conversationStarted}
 									/>
 								</li>
@@ -57,7 +65,7 @@ export default class Results extends Component {
 						}}
 					>
 						<i className="fa fa-long-arrow-down" aria-hidden="true" />{' '}
-						Comprendre mes résultats
+						<Trans i18nKey="details">Comprendre mes résultats</Trans>
 					</h3>
 				</section>
 			</div>