Titre de la fiche de paie adapté aux périodes

source/components/PaySlip.js

@@ -40,9 +40,7 @@ const PaySlip = ({
 	return (
 		<div className="payslip__container">
 			<div className="payslip__hourSection">
-				<Trans i18nKey="payslip.heures">
-					Nombre d&apos;heures travaillées :{' '}
-				</Trans>
+				<Trans i18nKey="payslip.heures">Heures travaillées par mois : </Trans>
 				<span className="montant"> {nombreHeuresTravaillées}</span>
 			</div>
 			{/* Section salaire brut */}

source/components/Simu.js

@@ -5,7 +5,7 @@ import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
 import { compose } from 'ramda'
 import React, { Component } from 'react'
-import { Trans, withI18n } from 'react-i18next'
+import { Trans, withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Redirect, withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
@@ -27,11 +27,12 @@ import QuickLink from './QuickLink'
 import ResultView from './ResultView'
 import './Simu.css'
 import TargetSelection from './TargetSelection'
+import { formValueSelector } from 'redux-form'
 
 export default compose(
 	withRouter,
 	withColours,
-	withI18n(), // Triggers rerender when the language changes
+	withNamespaces(), // Triggers rerender when the language changes
 	connect(
 		state => ({
 			blockingInputControls: blockingInputControlsSelector(state),
@@ -39,7 +40,8 @@ export default compose(
 			validInputEntered: validInputEnteredSelector(state),
 			arePreviousAnswers: state.conversationSteps.foldedSteps.length !== 0,
 			nextSteps: state.conversationStarted && nextStepsSelector(state),
-			userInput: noUserInputSelector(state)
+			userInput: noUserInputSelector(state),
+			period: formValueSelector('conversation')(state, 'période')
 		}),
 		{
 			startConversation
@@ -62,7 +64,8 @@ export default compose(
 				displayHiringProcedures,
 				match,
 				validInputEntered,
-				location
+				location,
+				period
 			} = this.props
 			const displayConversation = conversationStarted && !blockingInputControls
 			const simulationCompleted =
@@ -205,7 +208,11 @@ export default compose(
 								</>
 							)}
 							<h2>
-								<Trans>Fiche de paie</Trans>
+								<Trans>
+									{period === 'mois'
+										? 'Fiche de paie mensuelle'
+										: 'Détail annuel des cotisations'}
+								</Trans>
 							</h2>
 							<PaySlip />
 						</Animate.fromBottom>

source/locales/en.yaml

@@ -128,12 +128,13 @@ Cotisations sociales: Social contributions
 Part employeur: Employer share
 Part salariale: Employee share
 Total des retenues: Total withheld
-Fiche de paie: Payslip
+Fiche de paie mensuelle: Monthly payslip
+Détail annuel des cotisations: Annual detail of your contributions 
 Voir la répartition des cotisations: View contribution breakdown
 Cotisations: Contributions
 payslip:
   notice: This simulation helps you understand your French payslip, but it should not be used as one. For further details, check <1>service-public.fr (French)</1>.
-  heures: 'Number of hours worked: '
+  heures: 'Hours worked per month: '
   disclaimer: It takes into account national law but not union negotiated rules. Lots of financial aids for your enterprise exist, explore them on <1>aides-entreprises.fr (French)</1>.
 A quoi servent mes cotisations ?: What's included in my contributions?
 Simulation personnalisée: Custom simulation