diff --git a/site/source/pages/simulateurs/reduction-generale/Goals.tsx b/site/source/pages/simulateurs/reduction-generale/Goals.tsx new file mode 100644 index 000000000..ab7a9b70c --- /dev/null +++ b/site/source/pages/simulateurs/reduction-generale/Goals.tsx @@ -0,0 +1,170 @@ +import { DottedName } from 'modele-social' +import { PublicodesExpression } from 'publicodes' +import { useCallback, useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { useDispatch, useSelector } from 'react-redux' + +import { Condition } from '@/components/EngineValue/Condition' +import { SimulationGoal, SimulationGoals } from '@/components/Simulation' +import { SimulationValue } from '@/components/Simulation/SimulationValue' +import { useEngine } from '@/components/utils/EngineContext' +import useYear from '@/components/utils/useYear' +import { Message } from '@/design-system' +import { Spacing } from '@/design-system/layout' +import { Body } from '@/design-system/typography/paragraphs' +import { SimpleRuleEvaluation } from '@/domaine/engine/SimpleRuleEvaluation' +import { ajusteLaSituation } from '@/store/actions/actions' +import { situationSelector } from '@/store/selectors/simulationSelectors' + +import Répartition from './components/Répartition' +import Warnings from './components/Warnings' +import WarningSalaireTrans from './components/WarningSalaireTrans' +import RéductionGénéraleMoisParMois from './RéductionGénéraleMoisParMois' +import { + getInitialRéductionGénéraleMoisParMois, + MonthState, + Options, + réductionGénéraleDottedName, + reevaluateRéductionGénéraleMoisParMois, + RégularisationMethod, + rémunérationBruteDottedName, +} from './utils' + +export default function RéductionGénéraleSimulationGoals({ + monthByMonth, + toggles, + legend, + régularisationMethod, +}: { + monthByMonth: boolean + toggles?: React.ReactNode + legend: string + régularisationMethod: RégularisationMethod +}) { + const engine = useEngine() + const dispatch = useDispatch() + const { t } = useTranslation() + const [réductionGénéraleMoisParMoisData, setData] = useState([]) + const year = useYear() + + const initializeRéductionGénéraleMoisParMoisData = useCallback(() => { + const data = getInitialRéductionGénéraleMoisParMois(year, engine) + setData(data) + }, [engine, year]) + + useEffect(() => { + if (réductionGénéraleMoisParMoisData.length === 0) { + initializeRéductionGénéraleMoisParMoisData() + } + }, [ + initializeRéductionGénéraleMoisParMoisData, + réductionGénéraleMoisParMoisData.length, + ]) + + const situation = useSelector(situationSelector) + useEffect(() => { + setData((previousData) => { + return reevaluateRéductionGénéraleMoisParMois( + previousData, + engine, + year, + régularisationMethod + ) + }) + }, [engine, situation, régularisationMethod, year]) + + const updateRémunérationBruteAnnuelle = (data: MonthState[]): void => { + const rémunérationBruteAnnuelle = data.reduce( + (total: number, monthState: MonthState) => + total + monthState.rémunérationBrute, + 0 + ) + dispatch( + ajusteLaSituation({ + [rémunérationBruteDottedName]: { + valeur: rémunérationBruteAnnuelle, + unité: '€/an', + } as PublicodesExpression, + } as Record) + ) + } + + const onRémunérationChange = ( + monthIndex: number, + rémunérationBrute: number + ) => { + setData((previousData) => { + const updatedData = [...previousData] + updatedData[monthIndex] = { + ...updatedData[monthIndex], + rémunérationBrute, + } + + updateRémunérationBruteAnnuelle(updatedData) + + return reevaluateRéductionGénéraleMoisParMois( + updatedData, + engine, + year, + régularisationMethod + ) + }) + } + + const onOptionsChange = (monthIndex: number, options: Options) => { + setData((previousData) => { + const updatedData = [...previousData] + updatedData[monthIndex] = { + ...updatedData[monthIndex], + options, + } + + return reevaluateRéductionGénéraleMoisParMois( + updatedData, + engine, + year, + régularisationMethod + ) + }) + } + + return ( + + {monthByMonth ? ( + + ) : ( + <> + + + + 1.6 * SMIC`}> + + + + + + + + = 0`}> + + + + + + )} + + ) +} 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 f76719521..697c7e579 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 @@ -1,42 +1,15 @@ -import { DottedName } from 'modele-social' -import { PublicodesExpression } from 'publicodes' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useDispatch, useSelector } from 'react-redux' -import { Condition } from '@/components/EngineValue/Condition' import PeriodSwitch from '@/components/PeriodSwitch' import { SelectSimulationYear } from '@/components/SelectSimulationYear' import SimulateurWarning from '@/components/SimulateurWarning' -import Simulation, { - SimulationGoal, - SimulationGoals, -} from '@/components/Simulation' -import { SimulationValue } from '@/components/Simulation/SimulationValue' -import { useEngine } from '@/components/utils/EngineContext' -import useYear from '@/components/utils/useYear' -import { Message } from '@/design-system' -import { Spacing } from '@/design-system/layout' -import { Body } from '@/design-system/typography/paragraphs' -import { SimpleRuleEvaluation } from '@/domaine/engine/SimpleRuleEvaluation' -import { ajusteLaSituation } from '@/store/actions/actions' -import { situationSelector } from '@/store/selectors/simulationSelectors' +import Simulation from '@/components/Simulation' import EffectifSwitch from './components/EffectifSwitch' import RégularisationSwitch from './components/RégularisationSwitch' -import Répartition from './components/Répartition' -import Warnings from './components/Warnings' -import WarningSalaireTrans from './components/WarningSalaireTrans' -import RéductionGénéraleMoisParMois from './RéductionGénéraleMoisParMois' -import { - getInitialRéductionGénéraleMoisParMois, - MonthState, - Options, - réductionGénéraleDottedName, - reevaluateRéductionGénéraleMoisParMois, - RégularisationMethod, - rémunérationBruteDottedName, -} from './utils' +import RéductionGénéraleSimulationGoals from './Goals' +import { RégularisationMethod } from './utils' export default function RéductionGénéraleSimulation() { const { t } = useTranslation() @@ -97,142 +70,3 @@ export default function RéductionGénéraleSimulation() { ) } - -function RéductionGénéraleSimulationGoals({ - monthByMonth, - toggles, - legend, - régularisationMethod, -}: { - monthByMonth: boolean - toggles?: React.ReactNode - legend: string - régularisationMethod: RégularisationMethod -}) { - const engine = useEngine() - const dispatch = useDispatch() - const { t } = useTranslation() - const [réductionGénéraleMoisParMoisData, setData] = useState([]) - const year = useYear() - - const initializeRéductionGénéraleMoisParMoisData = useCallback(() => { - const data = getInitialRéductionGénéraleMoisParMois(year, engine) - setData(data) - }, [engine, year]) - - useEffect(() => { - if (réductionGénéraleMoisParMoisData.length === 0) { - initializeRéductionGénéraleMoisParMoisData() - } - }, [ - initializeRéductionGénéraleMoisParMoisData, - réductionGénéraleMoisParMoisData.length, - ]) - - const situation = useSelector(situationSelector) - useEffect(() => { - setData((previousData) => { - return reevaluateRéductionGénéraleMoisParMois( - previousData, - engine, - year, - régularisationMethod - ) - }) - }, [engine, situation, régularisationMethod, year]) - - const updateRémunérationBruteAnnuelle = (data: MonthState[]): void => { - const rémunérationBruteAnnuelle = data.reduce( - (total: number, monthState: MonthState) => - total + monthState.rémunérationBrute, - 0 - ) - dispatch( - ajusteLaSituation({ - [rémunérationBruteDottedName]: { - valeur: rémunérationBruteAnnuelle, - unité: '€/an', - } as PublicodesExpression, - } as Record) - ) - } - - const onRémunérationChange = ( - monthIndex: number, - rémunérationBrute: number - ) => { - setData((previousData) => { - const updatedData = [...previousData] - updatedData[monthIndex] = { - ...updatedData[monthIndex], - rémunérationBrute, - } - - updateRémunérationBruteAnnuelle(updatedData) - - return reevaluateRéductionGénéraleMoisParMois( - updatedData, - engine, - year, - régularisationMethod - ) - }) - } - - const onOptionsChange = (monthIndex: number, options: Options) => { - setData((previousData) => { - const updatedData = [...previousData] - updatedData[monthIndex] = { - ...updatedData[monthIndex], - options, - } - - return reevaluateRéductionGénéraleMoisParMois( - updatedData, - engine, - year, - régularisationMethod - ) - }) - } - - return ( - - {monthByMonth ? ( - - ) : ( - <> - - - - 1.6 * SMIC`}> - - - - - - - - = 0`}> - - - - - - )} - - ) -}