From 39a8f5c4a65e0b5dcedb11771eb612fc64696f31 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Tue, 31 Jul 2018 14:53:40 +0200
Subject: [PATCH] =?UTF-8?q?ajoute=20la=20r=C3=A9partition=20des=20cotisati?=
 =?UTF-8?q?ons=20accessible=20apr=C3=A8s=20le=20d=C3=A9but=20de=20la=20sim?=
 =?UTF-8?q?ulation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/ResultView.css | 31 ++++++++++++++
 source/components/ResultView.js  | 72 ++++++++++++++++++++++++++++++++
 source/components/Simu.js        | 11 +++--
 source/locales/en.yaml           |  2 +-
 4 files changed, 111 insertions(+), 5 deletions(-)
 create mode 100644 source/components/ResultView.css
 create mode 100644 source/components/ResultView.js

diff --git a/source/components/ResultView.css b/source/components/ResultView.css
new file mode 100644
index 000000000..14a9ffc70
--- /dev/null
+++ b/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;
+}
diff --git a/source/components/ResultView.js b/source/components/ResultView.js
new file mode 100644
index 000000000..c1acde54a
--- /dev/null
+++ b/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)
diff --git a/source/components/Simu.js b/source/components/Simu.js
index 0d8cc87fa..b5f0b0185 100644
--- a/source/components/Simu.js
+++ b/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>
 				)}
 			</>
diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index 3cc9c4af5..4c30ab737 100644
--- a/source/locales/en.yaml
+++ b/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: