👽 Menu du haut

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

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') {

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)