From e577acbe3fc8219a238a2089408298403fd4cc9f Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Mon, 1 Jul 2019 19:14:22 +0200
Subject: [PATCH] =?UTF-8?q?Ajoute=20un=20bouton=20pour=20acc=C3=A9der=20?=
 =?UTF-8?q?=C3=A0=20la=20r=C3=A9partition=20des=20cotisations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/SalaryExplanation.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/source/components/SalaryExplanation.js b/source/components/SalaryExplanation.js
index 0408472a1..0e081125d 100644
--- a/source/components/SalaryExplanation.js
+++ b/source/components/SalaryExplanation.js
@@ -2,7 +2,8 @@ import Distribution from 'Components/Distribution'
 import PaySlip from 'Components/PaySlip'
 import withTracker from 'Components/utils/withTracker'
 import { compose } from 'ramda'
-import React from 'react'
+import React, { useRef } from 'react'
+import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
 import { connect } from 'react-redux'
 import { formValueSelector } from 'redux-form'
@@ -29,6 +30,7 @@ export default compose(
 		showDistributionFirst: !state.conversationSteps.foldedSteps.length
 	}))
 )(function SalaryExplanation({ showDistributionFirst }) {
+	const distributionRef = useRef({})
 	return (
 		<ErrorBoundary>
 			<Animate.fromTop key={showDistributionFirst}>
@@ -39,8 +41,22 @@ export default compose(
 					</>
 				) : (
 					<>
+						<div css="text-align: center">
+							<button
+								className="ui__ small simple button"
+								onClick={() =>
+									distributionRef.current.scrollIntoView({
+										behavior: 'smooth',
+										block: 'start'
+									})
+								}>
+								{emoji('📊')} Voir la répartition des cotisations
+							</button>
+						</div>
 						<PaySlipSection />
-						<DistributionSection />
+						<div ref={distributionRef}>
+							<DistributionSection />
+						</div>
 					</>
 				)}
 				<br />