diff --git a/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx b/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx index 697c7e579..8e8ee7636 100644 --- a/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx +++ b/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx @@ -6,6 +6,7 @@ import { SelectSimulationYear } from '@/components/SelectSimulationYear' import SimulateurWarning from '@/components/SimulateurWarning' import Simulation from '@/components/Simulation' +import CongésPayésSwitch from './components/CongésPayésSwitch' import EffectifSwitch from './components/EffectifSwitch' import RégularisationSwitch from './components/RégularisationSwitch' import RéductionGénéraleSimulationGoals from './Goals' @@ -61,6 +62,7 @@ export default function RéductionGénéraleSimulation() { setRégularisationMethod={setRégularisationMethod} /> + } diff --git a/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx b/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx new file mode 100644 index 000000000..87ca3e5cc --- /dev/null +++ b/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx @@ -0,0 +1,57 @@ +import { DottedName } from 'modele-social' +import { useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { useDispatch } from 'react-redux' +import { styled } from 'styled-components' + +import { useEngine } from '@/components/utils/EngineContext' +import { Radio, ToggleGroup } from '@/design-system' +import { FlexCenter } from '@/design-system/global-style' +import { Body } from '@/design-system/typography/paragraphs' +import { enregistreLaRéponse } from '@/store/actions/actions' + +export default function CongésPayésSwitch() { + const dispatch = useDispatch() + const engine = useEngine() + const dottedName = + 'salarié . cotisations . exonérations . réduction générale . caisse de congés payés' as DottedName + const engineCongésPayés = engine.evaluate(dottedName).nodeValue as boolean + const [currentCongésPayés, setCurrentCongésPayés] = useState( + engineCongésPayés ? 'oui' : 'non' + ) + const { t } = useTranslation() + + useEffect(() => { + const congésPayés = engineCongésPayés ? 'oui' : 'non' + setCurrentCongésPayés(congésPayés) + }, [currentCongésPayés, engineCongésPayés]) + + return ( + + + {engine.getRule(dottedName).title} + + { + setCurrentCongésPayés(value) + dispatch(enregistreLaRéponse(dottedName, value)) + }} + aria-labelledby="caisse-congés-payés-label" + > + {t('Oui')} + {t('Non')} + + + ) +} + +const Container = styled.div` + ${FlexCenter} + flex-wrap: wrap; + justify-content: center; + column-gap: ${({ theme }) => theme.spacings.sm}; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +`