ajoute la répartition des cotisations accessible après le début de la simulation

source/components/ResultView.css

@@ -0,0 +1,31 @@
+.result-view__tabs {
+	display: flex;
+	align-items: center;
+	box-shadow: 0 -1px 0 0 #d4d4d5, 1px 0 0 0 #d4d4d5, -1px 0 0 0 #d4d4d5;
+	border-top-right-radius: 0.6em;
+	border: none;
+	border-top-left-radius: 0.6em;
+	margin-bottom: -1px;
+	border-bottom: 1px solid transparent;
+}
+.result-view__tabs button {
+	padding: 1em !important;
+	border-right: 1px solid #d4d4d5 !important;
+	text-decoration: none !important;
+}
+.result-view__tabs button.selected {
+	border-bottom: 1px solid white;
+}
+.result-view__tabs button:last-of-type {
+	border-right: none !important;
+}
+.result-view__header {
+	margin-top: 2em;
+	display: flex;
+	justify-content: space-between;
+}
+
+.result-view__body {
+	border-top-left-radius: 0;
+	margin-bottom: 2em;
+}

source/components/ResultView.js

@@ -0,0 +1,72 @@
+/* @flow */
+
+import Distribution from 'Components/Distribution'
+import PaySlip from 'Components/PaySlip'
+import SearchButton from 'Components/SearchButton'
+import withTracker from 'Components/utils/withTracker'
+import { compose } from 'ramda'
+import React, { PureComponent } from 'react'
+import { Trans } from 'react-i18next'
+import { connect } from 'react-redux'
+import Card from 'Ui/Card'
+import './ResultView.css'
+import type { Tracker } from 'Components/utils/withTracker'
+
+type State = {
+	resultView: 'distribution' | 'payslip'
+}
+type Props = {
+	conversationStarted: boolean,
+	tracker: Tracker
+}
+
+const resultViewTitle = {
+	distribution: 'Cotisations',
+	payslip: 'Fiche de paie'
+}
+
+class ResultView extends PureComponent<Props, State> {
+	state = {
+		resultView: this.props.conversationStarted ? 'payslip' : 'distribution'
+	}
+	handleClickOnTab = resultView => () => {
+		this.setState({ resultView })
+		this.props.tracker.push(['trackEvent', 'results', 'selectView', resultView])
+	}
+	render() {
+		return (
+			<>
+				<div className="result-view__header">
+					<div className="result-view__tabs">
+						{['payslip', 'distribution'].map(resultView => (
+							<button
+								key={resultView}
+								className={
+									'ui__ link-button ' +
+									(this.state.resultView === resultView ? 'selected' : '')
+								}
+								onClick={this.handleClickOnTab(resultView)}>
+								<Trans>{resultViewTitle[resultView]}</Trans>
+							</button>
+						))}
+					</div>
+					<SearchButton rulePageBasePath="./règle" />
+				</div>
+				<Card className="result-view__body">
+					{this.state.resultView === 'payslip' ? <PaySlip /> : <Distribution />}
+				</Card>
+			</>
+		)
+	}
+}
+
+export default compose(
+	withTracker,
+	connect(
+		state => ({
+			conversationStarted: state.conversationStarted,
+			key: state.conversationStarted
+		}),
+		{}
+	)
+)(ResultView)

source/components/Simu.js

@@ -17,6 +17,7 @@ import Conversation from './conversation/Conversation'
 import Distribution from './Distribution'
 import PaySlip from './PaySlip'
 import QuickLink from './QuickLink'
+import ResultView from './ResultView'
 import './Simu.css'
 import TargetSelection from './TargetSelection'
 
@@ -121,10 +122,7 @@ export default class Simu extends Component {
 					</div>
 					{conversationStarted && (
 						<Animate.fromBottom>
-							<h2>
-								<Trans>Fiche de paie</Trans>
-							</h2>
-							<PaySlip />
+							<ResultView />
 						</Animate.fromBottom>
 					)}
 					{displayPreviousAnswers && (
@@ -140,6 +138,7 @@ export default class Simu extends Component {
 							<Trans>A quoi servent mes cotisations ?</Trans>
 						</h2>
 						<Distribution />
+
 						<h2>
 							<Trans>Estimer mes coûts réels</Trans>
 						</h2>
@@ -157,6 +156,10 @@ export default class Simu extends Component {
 								<Trans>Estimer mes coûts réels</Trans>
 							</button>
 						</p>
+						<h2>
+							<Trans>Fiche de paie</Trans>
+						</h2>
+						<PaySlip />
 					</Animate.fromBottom>
 				)}
 			</>

source/locales/en.yaml

@@ -130,7 +130,7 @@ Cotisations sociales: Social contributions
 Part employeur: Employer share
 Part salariale: Employee share
 Total des retenues: Total withheld
-Fiche de paie: My payslip
+Fiche de paie: Payslip
 Voir la répartition des cotisations: View contribution breakdown
 Cotisations: Contributions
 payslip: