82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
/* @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, { Component } from 'react'
|
|
import { Trans } from 'react-i18next'
|
|
import { connect } from 'react-redux'
|
|
import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors'
|
|
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,
|
|
displayResults: boolean
|
|
}
|
|
|
|
const resultViewTitle = {
|
|
distribution: 'Cotisations',
|
|
payslip: 'Fiche de paie'
|
|
}
|
|
|
|
class ResultView extends Component<Props, State> {
|
|
state = {
|
|
resultView: this.props.conversationStarted ? 'payslip' : 'distribution'
|
|
}
|
|
handleClickOnTab = resultView => () => {
|
|
this.setState({ resultView })
|
|
this.props.tracker.push(['trackEvent', 'results', 'selectView', resultView])
|
|
}
|
|
render() {
|
|
return (
|
|
this.props.displayResults && (
|
|
<>
|
|
<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,
|
|
displayResults: !!ficheDePaieSelectors(state)
|
|
}),
|
|
{}
|
|
)
|
|
)(ResultView)
|