feat(rgcp): Ajout d'un bouton pour caisse de congés payés

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}
 							/>
 							<EffectifSwitch />
+							<CongésPayésSwitch />
 							<PeriodSwitch periods={periods} onSwitch={onPeriodSwitch} />
 						</>
 					}

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 (
+		<Container>
+			<StyledBody id="caisse-congés-payés-label">
+				{engine.getRule(dottedName).title}
+			</StyledBody>
+			<ToggleGroup
+				value={currentCongésPayés}
+				onChange={(value) => {
+					setCurrentCongésPayés(value)
+					dispatch(enregistreLaRéponse(dottedName, value))
+				}}
+				aria-labelledby="caisse-congés-payés-label"
+			>
+				<Radio value="oui">{t('Oui')}</Radio>
+				<Radio value="non">{t('Non')}</Radio>
+			</ToggleGroup>
+		</Container>
+	)
+}
+
+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;
+`