From 36c0d217aa28d4866c2f0538e1740b345b517e50 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Tue, 6 Nov 2018 13:29:16 +0000
Subject: [PATCH] :alien: Menu du haut

---
 source/locales/en.yaml                        |  4 +-
 source/sites/mycompanyinfrance.fr/App.js      | 39 ++++++++++---------
 .../layout/ProgressHeader/ProgressHeader.js   | 21 +++++++---
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index a173bc99f..9c3cb0886 100644
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@@ -370,4 +370,6 @@ sécu: |
   <0>Social protection: costs and benefits</0><1>France has chosen to provide its citizens with a high-quality social safety net. This mandatory system is based on solidarity and designed to ensure the <strong>general welfare of its people</2>.</1><2>Easy access to health care and other services ensures that companies can put healthy, productive and highly skilled employees to work in an attractive market in the heart of Europe.</2><3>As soon as you declare and pay your employees, you automatically entitle them to the general scheme of French Social Security (health, maternity, disability, old age, occupational illness and accidents) and unemployment insurance.</3><4><0></0></4><5>How much does it cost to hire ?</5>
 
 
-  1: France has chosen to provide its citizens with a high-quality social safety net. This mandatory system is based on solidarity and designed to ensure the <strong>general welfare of its people</strong>.{' '}
+Votre entreprise: Your company
+Protection sociale: Social security
+Embaucher: Hiring process
diff --git a/source/sites/mycompanyinfrance.fr/App.js b/source/sites/mycompanyinfrance.fr/App.js
index 6d3a39160..953049e13 100644
--- a/source/sites/mycompanyinfrance.fr/App.js
+++ b/source/sites/mycompanyinfrance.fr/App.js
@@ -20,6 +20,7 @@ import CompanyIndex from './pages/Company'
 import HiringProcess from './pages/HiringProcess'
 import Landing from './pages/Landing'
 import SocialSecurity from './pages/SocialSecurity'
+import { translate } from 'react-i18next'
 
 if (process.env.NODE_ENV === 'production') {
 	Raven.config(
@@ -58,30 +59,32 @@ class InFranceRoute extends Component {
 				onStoreCreated={persistEverything}>
 				<TrackPageView />
 				<div id="content">
-					<Switch>
-						<Route exact path="/" component={Landing} />
-						<div className="app-container">
-							{/* Passing location down to prevent update blocking */}
-							<Navigation location={location} />
-							<div className="app-content">
-								<ProgressHeader />
-								<div
-									className="ui__ container"
-									style={{ flexGrow: 1, flexShrink: 0 }}>
-									<Route path="/company" component={CompanyIndex} />
-									<Route path="/social-security" component={SocialSecurity} />
-									<Route path="/hiring-process" component={HiringProcess} />
-								</div>
-								<Footer />
-							</div>
-						</div>
-					</Switch>
+					<RouterSwitch />
 				</div>
 			</Provider>
 		)
 	}
 }
 
+let RouterSwitch = translate()(() => (
+	<Switch>
+		<Route exact path="/" component={Landing} />
+		<div className="app-container">
+			{/* Passing location down to prevent update blocking */}
+			<Navigation location={location} />
+			<div className="app-content">
+				<ProgressHeader />
+				<div className="ui__ container" style={{ flexGrow: 1, flexShrink: 0 }}>
+					<Route path="/company" component={CompanyIndex} />
+					<Route path="/social-security" component={SocialSecurity} />
+					<Route path="/hiring-process" component={HiringProcess} />
+				</div>
+				<Footer />
+			</div>
+		</div>
+	</Switch>
+))
+
 let ExportedApp = InFranceRoute
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js b/source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js
index ddb884fb2..bd240752c 100644
--- a/source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js
+++ b/source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js
@@ -2,7 +2,7 @@
 
 import withTracker from 'Components/utils/withTracker'
 import { compose } from 'ramda'
-import React from 'react'
+import { React, T } from 'Components'
 import { connect } from 'react-redux'
 import { NavLink, withRouter } from 'react-router-dom'
 import selectors from 'Selectors/progressSelectors'
@@ -11,6 +11,8 @@ import estimateSvg from '../../images/estimate.svg'
 import hiringSvg from '../../images/hiring.svg'
 import './ProgressHeader.css'
 import type { Tracker } from 'Components/utils/withTracker'
+import { translate } from 'react-i18next'
+
 const Progress = ({ percent }) => (
 	<div className="progress">
 		<div
@@ -42,7 +44,9 @@ const StepsHeader = ({
 					tracker.push(['trackEvent', 'Header', 'click', 'Your company'])
 				}>
 				<img src={companySvg} />
-				<div>Your company</div>
+				<div>
+					<T>Votre entreprise</T>
+				</div>
 				<Progress percent={companyProgress} />
 			</NavLink>
 			<NavLink
@@ -52,7 +56,10 @@ const StepsHeader = ({
 					tracker.push(['trackEvent', 'Header', 'click', 'Social security'])
 				}>
 				<img src={estimateSvg} />
-				<div>Social security</div>
+				<div>
+					<T>Protection sociale</T>
+				</div>
+
 				<Progress percent={estimationProgress} />
 			</NavLink>
 			<NavLink
@@ -62,7 +69,10 @@ const StepsHeader = ({
 					tracker.push(['trackEvent', 'Header', 'click', 'Hiring process'])
 				}>
 				<img src={hiringSvg} />
-				<div>Hiring process</div>
+				<div>
+					<T>Embaucher</T>
+				</div>
+
 				<Progress percent={hiringProgress} />
 			</NavLink>
 		</nav>
@@ -75,5 +85,6 @@ export default compose(
 	connect(
 		selectors,
 		{}
-	)
+	),
+	translate()
 )(StepsHeader)