95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import Controls from 'Components/Controls'
|
|
import Conversation, {
|
|
ConversationProps
|
|
} from 'Components/conversation/Conversation'
|
|
import SeeAnswersButton from 'Components/conversation/SeeAnswersButton'
|
|
import PageFeedback from 'Components/Feedback/PageFeedback'
|
|
import SearchButton from 'Components/SearchButton'
|
|
import TargetSelection from 'Components/TargetSelection'
|
|
import React, { useEffect } from 'react'
|
|
import { Trans } from 'react-i18next'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { firstStepCompletedSelector } from 'Selectors/simulationSelectors'
|
|
import { useSimulationProgress } from 'Components/utils/useNextQuestion'
|
|
import * as Animate from 'Ui/animate'
|
|
import Progress from 'Ui/Progress'
|
|
import { setSimulationConfig } from 'Actions/actions'
|
|
import { useLocation } from 'react-router'
|
|
import { SimulationConfig } from 'Reducers/rootReducer'
|
|
|
|
type SimulationProps = {
|
|
config: SimulationConfig
|
|
explanations?: React.ReactNode
|
|
results?: React.ReactNode
|
|
customEndMessages?: ConversationProps['customEndMessages']
|
|
showPeriodSwitch?: boolean
|
|
}
|
|
|
|
export default function Simulation({
|
|
config,
|
|
explanations,
|
|
results,
|
|
customEndMessages,
|
|
showPeriodSwitch
|
|
}: SimulationProps) {
|
|
const dispatch = useDispatch()
|
|
const location = useLocation<{ fromGérer?: boolean }>()
|
|
useEffect(() => {
|
|
dispatch(setSimulationConfig(config, location.state?.fromGérer))
|
|
}, [config])
|
|
const firstStepCompleted = useSelector(firstStepCompletedSelector)
|
|
const progress = useSimulationProgress()
|
|
return (
|
|
<>
|
|
<TargetSelection showPeriodSwitch={showPeriodSwitch} />
|
|
<SearchButton invisibleButton />
|
|
{firstStepCompleted && (
|
|
<>
|
|
<Animate.fromTop>
|
|
{results}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginTop: '1.2rem',
|
|
marginBottom: '0.6rem',
|
|
alignItems: 'baseline'
|
|
}}
|
|
>
|
|
{progress < 1 ? (
|
|
<small css="padding: 0.4rem 0">
|
|
<Trans i18nKey="simulateurs.précision.défaut">
|
|
Affinez la simulation en répondant aux questions :
|
|
</Trans>
|
|
</small>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<SeeAnswersButton />
|
|
</div>
|
|
<section className="ui__ full-width lighter-bg">
|
|
<div className="ui__ container">
|
|
<Controls />
|
|
<Conversation customEndMessages={customEndMessages} />
|
|
</div>
|
|
</section>
|
|
{progress < 1 && (
|
|
<Progress progress={progress} className="ui__ full-width" />
|
|
)}
|
|
<br />
|
|
<PageFeedback
|
|
customMessage={
|
|
<Trans i18nKey="feedback.simulator">
|
|
Êtes-vous satisfait de ce simulateur ?
|
|
</Trans>
|
|
}
|
|
customEventName="rate simulator"
|
|
/>{' '}
|
|
{explanations}
|
|
</Animate.fromTop>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|