Feat(Lodeom): Ajout de la sélection de zone

modele-social/CHANGELOG.md

@@ -144,7 +144,7 @@ Exporte les règles au format json pour optimiser le chargement
 
 Corrige des bugs dans l’implémentation de la convention collective du sport :
 
-- Enlève la boucle du calcul de la limite d’éxonération de la prévoyance
+- Enlève la boucle du calcul de la limite d’exonération de la prévoyance
 - Renomme la règle `salarié . convention collective . sport . exonération cotisation AT . refus` en `salarié . convention collective . sport . refus exonération cotisation AT`
 - Correction d’unités
 - Correction du calcul de la retraite complémenaire AGIRC-ARRCO

modele-social/règles/salarié/cotisations.publicodes

@@ -187,7 +187,8 @@ salarié . cotisations . exonérations . lodeom . secteurs d'activité éligible
     Secteurs d'activité éligibles au Lodeom: https://boss.gouv.fr/portail/accueil/exonerations/exonerations-zonees.html#titre-chapitre-5--exonerations-applica-section-2--conditions-dapplicati-b-conditions-deligibilite-liees-1-secteurs-dactivites-eligibles
 
 salarié . cotisations . exonérations . lodeom . zone un:
-  titre: Guadeloupe, Martinique, La Réunion, Guyane
+  titre: Guadeloupe, Guyane, Martinique, La Réunion
+  non applicable si: zone deux
   par défaut: non
   une de ces conditions:
     - établissement . commune . département = 'Guadeloupe'
@@ -296,6 +297,7 @@ salarié . cotisations . exonérations . lodeom . zone un:
 
 salarié . cotisations . exonérations . lodeom . zone deux:
   titre: Saint-Barthélémy, Saint-Martin
+  non applicable si: zone un
   par défaut: non
   une de ces conditions:
     - établissement . commune . département = 'Saint-Barthélemy'

site/source/components/EffectifSwitch.tsx

@@ -2,9 +2,13 @@
 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 { Strong } from '@/design-system/typography'
+import { Body } from '@/design-system/typography/paragraphs'
 import { enregistreLaRéponse } from '@/store/actions/actions'
 
 export default function EffectifSwitch() {
@@ -21,16 +25,45 @@
 	}, [currentEffectif, engineEffectif])
 
 	return (
-		<ToggleGroup
-			value={currentEffectif}
-			onChange={(value) => {
-				setCurrentEffectif(value)
-				dispatch(enregistreLaRéponse(dottedName, `'${value}'`))
-			}}
-			aria-label={t("Effectif de l'entreprise")}
-		>
-			<Radio value="10">{t('Moins de 50 salariés')}</Radio>
-			<Radio value="100">{t('Plus de 50 salariés')}</Radio>
-		</ToggleGroup>
+		<Container>
+			<StyledBody id="effectif-switch-label">
+				<Strong>{t("Effectif de l'entreprise :")}</Strong>
+			</StyledBody>
+			<StyledToggleGroup
+				value={currentEffectif}
+				onChange={(value: string) => {
+					setCurrentEffectif(value)
+					dispatch(enregistreLaRéponse(dottedName, `'${value}'`))
+				}}
+				aria-labelledby="effectif-switch-label"
+			>
+				<StyledRadio value="10">{t('Moins de 50 salariés')}</StyledRadio>
+				<StyledRadio value="100">{t('Plus de 50 salariés')}</StyledRadio>
+			</StyledToggleGroup>
+		</Container>
 	)
 }
+
+const Container = styled.div`
+	text-align: left;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	column-gap: ${({ theme }) => theme.spacings.sm};
+	width: 100%;
+`
+const StyledBody = styled(Body)`
+	margin: ${({ theme }) => theme.spacings.xxs} 0;
+`
+const StyledToggleGroup = styled(ToggleGroup)`
+	display: flex;
+	> * {
+		display: flex;
+	}
+`
+const StyledRadio = styled(Radio)`
+	white-space: nowrap;
+	> span {
+		width: 100%;
+	}
+`

site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx

@@ -1,6 +1,10 @@
 import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
 import { Radio, ToggleGroup } from '@/design-system'
+import { FlexCenter } from '@/design-system/global-style'
+import { Strong } from '@/design-system/typography'
+import { Body } from '@/design-system/typography/paragraphs'
 import { RégularisationMethod } from '@/utils/réductionDeCotisations'
 
 type Props = {
@@ -15,28 +19,59 @@
 	const { t } = useTranslation()
 
 	return (
-		<ToggleGroup
-			value={régularisationMethod}
-			onChange={(value) => {
-				setRégularisationMethod(value as RégularisationMethod)
-			}}
-			aria-label={t(
-				'pages.simulateurs.réduction-générale.régularisation.type',
-				'Type de régularisation'
-			)}
-		>
-			<Radio value="annuelle">
-				{t(
-					'pages.simulateurs.réduction-générale.régularisation.annuelle',
-					'Régularisation annuelle'
-				)}
-			</Radio>
-			<Radio value="progressive">
-				{t(
-					'pages.simulateurs.réduction-générale.régularisation.progressive',
-					'Régularisation progressive'
-				)}
-			</Radio>
-		</ToggleGroup>
+		<Container>
+			<StyledBody id="régularisation-switch-label">
+				<Strong>
+					{t(
+						'pages.simulateurs.réduction-générale.régularisation.type',
+						'Type de régularisation :'
+					)}
+				</Strong>
+			</StyledBody>
+			<StyledToggleGroup
+				value={régularisationMethod}
+				onChange={(value) => {
+					setRégularisationMethod(value as RégularisationMethod)
+				}}
+				aria-labelledby="régularisation-switch-label"
+			>
+				<StyledRadio value="annuelle">
+					{t(
+						'pages.simulateurs.réduction-générale.régularisation.annuelle',
+						'Régularisation annuelle'
+					)}
+				</StyledRadio>
+				<StyledRadio value="progressive">
+					{t(
+						'pages.simulateurs.réduction-générale.régularisation.progressive',
+						'Régularisation progressive'
+					)}
+				</StyledRadio>
+			</StyledToggleGroup>
+		</Container>
 	)
 }
+
+const Container = styled.div`
+	text-align: left;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	column-gap: ${({ theme }) => theme.spacings.sm};
+	width: 100%;
+`
+const StyledBody = styled(Body)`
+	margin: ${({ theme }) => theme.spacings.xxs} 0;
+`
+const StyledToggleGroup = styled(ToggleGroup)`
+	display: flex;
+	> * {
+		display: flex;
+	}
+`
+const StyledRadio = styled(Radio)`
+	white-space: nowrap;
+	> span {
+		width: 100%;
+	}
+`

site/source/hooks/useBarèmeLodeom.ts

@@ -0,0 +1,77 @@
+import { DottedName } from 'modele-social'
+import { useDispatch } from 'react-redux'
+
+import { useEngine } from '@/components/utils/EngineContext'
+import { toOuiNon } from '@/domaine/engine/toOuiNon'
+import {
+	batchUpdateSituation,
+	deleteFromSituation,
+} from '@/store/actions/actions'
+
+import { useZoneLodeom, ZoneLodeom as Zone } from './useZoneLodeom'
+
+const barèmes = {
+	['zone un' as Zone]: [
+		'barème compétitivité',
+		'barème compétitivité renforcée',
+		'barème innovation et croissance',
+	],
+	['zone deux' as Zone]: [
+		'barème moins de 11 salariés',
+		'barème sectoriel',
+		'barème compétitivité',
+	],
+}
+
+export type Barème = (typeof barèmes)[Zone][number]
+
+type ReturnType = {
+	barèmes: Barème[]
+	currentBarème?: Barème
+	updateBarème: (barème?: Barème) => void
+}
+
+export const useBarèmeLodeom = (): ReturnType => {
+	const dottedName = 'salarié . cotisations . exonérations . lodeom'
+	const { currentZone } = useZoneLodeom()
+	const engine = useEngine()
+	const dispatch = useDispatch()
+
+	const barèmesPossibles = currentZone ? barèmes[currentZone] : []
+
+	const currentBarème = barèmesPossibles.find((barème) => {
+		const barèmeValue = engine.evaluate(
+			`${dottedName} . ${currentZone} . ${barème}`
+		).nodeValue
+
+		return !!barèmeValue
+	})
+
+	const updateBarème = (newBarème?: Barème): void => {
+		if (!newBarème) {
+			barèmesPossibles.forEach((barème) => {
+				dispatch(
+					deleteFromSituation(
+						`${dottedName} . ${currentZone} . ${barème}` as DottedName
+					)
+				)
+			})
+		} else {
+			const newSituation = barèmesPossibles.reduce((situation, barème) => {
+				return {
+					...situation,
+					[`${dottedName} . ${currentZone} . ${barème}`]: toOuiNon(
+						barème === newBarème
+					),
+				}
+			}, {})
+			dispatch(batchUpdateSituation(newSituation))
+		}
+	}
+
+	return {
+		barèmes: barèmesPossibles,
+		currentBarème,
+		updateBarème,
+	}
+}

site/source/hooks/useZoneLodeom.ts

@@ -0,0 +1,38 @@
+import { useDispatch } from 'react-redux'
+
+import { useEngine } from '@/components/utils/EngineContext'
+import { toOuiNon } from '@/domaine/engine/toOuiNon'
+import { batchUpdateSituation } from '@/store/actions/actions'
+
+const zones = ['zone un', 'zone deux']
+
+export type ZoneLodeom = (typeof zones)[number]
+
+type ReturnType = {
+	currentZone?: ZoneLodeom
+	updateZone: (zone: ZoneLodeom) => void
+}
+
+export const useZoneLodeom = (): ReturnType => {
+	const engine = useEngine()
+	const dispatch = useDispatch()
+	const dottedName = 'salarié . cotisations . exonérations . lodeom'
+
+	const currentZone = zones.find((zone) => {
+		const zoneValue = engine.evaluate(`${dottedName} . ${zone}`).nodeValue
+
+		return !!zoneValue
+	})
+
+	const updateZone = (newZone: ZoneLodeom): void => {
+		const newSituation = zones.reduce((situation, zone) => {
+			return {
+				...situation,
+				[`${dottedName} . ${zone}`]: toOuiNon(zone === newZone),
+			}
+		}, {})
+		dispatch(batchUpdateSituation(newSituation))
+	}
+
+	return { currentZone, updateZone }
+}