80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
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 { Trans } from 'react-i18next'
|
|
import { connect } from 'react-redux'
|
|
import { formValueSelector } from 'redux-form'
|
|
import * as Animate from 'Ui/animate'
|
|
|
|
export default compose(
|
|
withTracker,
|
|
connect(state => ({
|
|
showDistributionFirst: !state.conversationSteps.foldedSteps.length
|
|
}))
|
|
)(function SalaryExplanation({ showDistributionFirst }) {
|
|
return (
|
|
<Animate.fromTop key={showDistributionFirst}>
|
|
{showDistributionFirst ? (
|
|
<>
|
|
<DistributionSection />
|
|
<PaySlipSection />
|
|
</>
|
|
) : (
|
|
<>
|
|
<PaySlipSection />
|
|
<DistributionSection />
|
|
</>
|
|
)}
|
|
<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>
|
|
)
|
|
})
|
|
|
|
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>
|
|
)
|