116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
import Distribution from 'Components/Distribution'
|
|
import PaySlip from 'Components/PaySlip'
|
|
import withTracker from 'Components/utils/withTracker'
|
|
import { compose } from 'ramda'
|
|
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'
|
|
import * as Animate from 'Ui/animate'
|
|
|
|
class ErrorBoundary extends React.Component {
|
|
state = {}
|
|
static getDerivedStateFromError() {
|
|
return {
|
|
error:
|
|
'The SalaryExplanation component triggered an error. This often happens in its subcomponents reducers'
|
|
}
|
|
}
|
|
render() {
|
|
if (this.state.error)
|
|
return <div css="background: red; ">Erreur : {this.state.error}</div>
|
|
return this.props.children
|
|
}
|
|
}
|
|
|
|
export default compose(
|
|
withTracker,
|
|
connect(state => ({
|
|
showDistributionFirst: !state.conversationSteps.foldedSteps.length
|
|
}))
|
|
)(function SalaryExplanation({ showDistributionFirst }) {
|
|
const distributionRef = useRef({})
|
|
return (
|
|
<ErrorBoundary>
|
|
<Animate.fromTop key={showDistributionFirst}>
|
|
{showDistributionFirst ? (
|
|
<>
|
|
<DistributionSection />
|
|
<PaySlipSection />
|
|
</>
|
|
) : (
|
|
<>
|
|
<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 />
|
|
<div ref={distributionRef}>
|
|
<DistributionSection />
|
|
</div>
|
|
</>
|
|
)}
|
|
<br />
|
|
<p className="ui__ notice">
|
|
<Trans i18nKey="payslip.notice">
|
|
Le simulateur vous aide à comprendre votre bulletin de paie, sans
|
|
lui être opposable. Pour plus d'informations, rendez vous
|
|
sur
|
|
<a
|
|
alt="service-public.fr"
|
|
href="https://www.service-public.fr/particuliers/vosdroits/F559">
|
|
service-public.fr
|
|
</a>
|
|
.
|
|
</Trans>
|
|
</p>
|
|
<p className="ui__ notice">
|
|
<Trans i18nKey="payslip.disclaimer">
|
|
Il ne prend pour l'instant pas en compte les accords et conventions
|
|
collectives, ni la myriade d'aides aux entreprises. Trouvez votre
|
|
convention collective{' '}
|
|
<a href="https://socialgouv.github.io/conventions-collectives">
|
|
ici
|
|
</a>
|
|
, et explorez les aides sur
|
|
<a href="https://www.aides-entreprises.fr">aides-entreprises.fr</a>.
|
|
</Trans>
|
|
</p>
|
|
</Animate.fromTop>
|
|
</ErrorBoundary>
|
|
)
|
|
})
|
|
|
|
const PaySlipSection = connect(state => ({
|
|
period: formValueSelector('conversation')(state, 'période')
|
|
}))(({ period }) => (
|
|
<section>
|
|
<h2>
|
|
<Trans>
|
|
{period === 'mois'
|
|
? 'Fiche de paie mensuelle'
|
|
: 'Détail annuel des cotisations'}
|
|
</Trans>
|
|
</h2>
|
|
<PaySlip />
|
|
</section>
|
|
))
|
|
|
|
const DistributionSection = () => (
|
|
<section>
|
|
<h2>
|
|
<Trans>À quoi servent mes cotisations ?</Trans>
|
|
</h2>
|
|
<Distribution />
|
|
</section>
|
|
)
|