refactor: crée un composant avec la répartition de la RGCP

pull/3197/head
Alice Dahan 2024-10-15 16:51:52 +02:00 committed by liliced
parent e67ced3d97
commit 94d8d197be
4 changed files with 39 additions and 37 deletions

View File

@ -596,7 +596,6 @@ design-system:
open-selector: Open date selector
prev-month: Previous month
year: Year
dont chômage: of which unemployment
décembre: December
employeur: employer
en cas d'accident pro: in the event of a professional accident

View File

@ -627,7 +627,6 @@ design-system:
open-selector: Ouvrir le sélecteur de date
prev-month: Mois précédent
year: Année
dont chômage: dont chômage
décembre: décembre
employeur: employeur
en cas d'accident pro: en cas d'accident pro

View File

@ -3,7 +3,6 @@ import { PublicodesExpression } from 'publicodes'
import { useCallback, useEffect, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { styled } from 'styled-components'
import { Condition } from '@/components/EngineValue/Condition'
import PeriodSwitch from '@/components/PeriodSwitch'
@ -17,13 +16,13 @@ import { SimulationValue } from '@/components/Simulation/SimulationValue'
import { useEngine } from '@/components/utils/EngineContext'
import { Message } from '@/design-system'
import { Spacing } from '@/design-system/layout'
import { Li, Ul } from '@/design-system/typography/list'
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 EffectifSwitch from './components/EffectifSwitch'
import Répartition from './components/Répartition'
import RéductionGénéraleMoisParMois from './RéductionGénéraleMoisParMois'
import {
getInitialRéductionGénéraleMoisParMois,
@ -73,14 +72,6 @@ export default function RéductionGénéraleSimulation() {
)
}
const StyledUl = styled(Ul)`
margin-top: 0;
`
const StyledLi = styled(Li)`
&::before {
margin-top: ${({ theme }) => theme.spacings.sm};
}
`
function RéductionGénéraleSimulationGoals({
monthByMonth,
toggles = (
@ -213,31 +204,7 @@ function RéductionGénéraleSimulationGoals({
round={false}
/>
<Spacing md />
<StyledUl>
<StyledLi>
<SimulationValue
dottedName={
'salarié . cotisations . exonérations . réduction générale . part retraite'
}
round={false}
/>
</StyledLi>
<StyledLi>
<SimulationValue
dottedName={
'salarié . cotisations . exonérations . réduction générale . part Urssaf'
}
round={false}
/>
<SimulationValue
dottedName={
'salarié . cotisations . exonérations . réduction générale . part Urssaf . part chômage'
}
round={false}
label={t('dont chômage', 'dont chômage')}
/>
</StyledLi>
</StyledUl>
<Répartition />
</Condition>
</>
)}

View File

@ -0,0 +1,37 @@
import { styled } from 'styled-components'
import { SimulationValue } from '@/components/Simulation/SimulationValue'
import { Li, Ul } from '@/design-system/typography/list'
export default function Répartition() {
return (
<StyledUl>
<StyledLi>
<SimulationValue
dottedName="salarié . cotisations . exonérations . réduction générale . part retraite"
round={false}
/>
</StyledLi>
<StyledLi>
<SimulationValue
dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf"
round={false}
/>
<SimulationValue
dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf . part chômage"
label="dont chômage"
round={false}
/>
</StyledLi>
</StyledUl>
)
}
const StyledUl = styled(Ul)`
margin-top: 0;
`
const StyledLi = styled(Li)`
&::before {
margin-top: ${({ theme }) => theme.spacings.sm};
}
`