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;
+`