style(lodeom): style des switchs

Alice Dahan 2024-12-23 18:46:14 +01:00
parent 70538cc6dc
commit 8cfc29ac97
9 changed files with 214 additions and 77 deletions

View File

@ -81,7 +81,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
})
it('should allow to select a scale', function () {
cy.get('div[aria-label="Barème à appliquer"]')
cy.get('div[aria-labelledby="barème-switch-label"]')
.contains('Barème de compétitivité renforcée')
.click()
@ -89,7 +89,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
'p[id="salarié___cotisations___exonérations___lodeom___montant-value"]'
).should('include.text', '958,20 €')
cy.get('div[aria-label="Barème à appliquer"]')
cy.get('div[aria-labelledby="barème-switch-label"]')
.contains("Barème d'innovation et croissance")
.click()
@ -111,7 +111,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
"Le barème d'innovation et croissance concerne uniquement les salaires inférieurs à 3,5 SMIC."
)
cy.get('div[aria-label="Barème à appliquer"]')
cy.get('div[aria-labelledby="barème-switch-label"]')
.contains('Barème de compétitivité renforcée')
.click()
cy.get(inputSelector).first().type('{selectall}5000')
@ -121,7 +121,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
'Le barème de compétitivité renforcée concerne uniquement les salaires inférieurs à 2,7 SMIC.'
)
cy.get('div[aria-label="Barème à appliquer"]')
cy.get('div[aria-labelledby="barème-switch-label"]')
.contains('Barème de compétitivité')
.click()
cy.get(inputSelector).first().type('{selectall}4000')
@ -307,14 +307,14 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
cy.get('@recapTable').should('include.text', 'code 462')
cy.get('@recapTable').should('include.text', 'code 684')
cy.get('div[aria-label="Barème à appliquer"]')
cy.get('div[aria-labelledby="barème-switch-label"]')
.contains('Barème de compétitivité renforcée')
.click()
cy.get('@recapTable').should('include.text', 'code 463')
cy.get('@recapTable').should('include.text', 'code 538')
cy.get('div[aria-label="Barème à appliquer"]')
cy.get('div[aria-labelledby="barème-switch-label"]')
.contains("Barème d'innovation et croissance")
.click()

View File

@ -2,9 +2,12 @@ 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 { 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 +24,45 @@ export default function EffectifSwitch() {
}, [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%;
}
`

View File

@ -1,6 +1,9 @@
import { useTranslation } from 'react-i18next'
import { styled } from 'styled-components'
import { Radio, ToggleGroup } from '@/design-system'
import { Strong } from '@/design-system/typography'
import { Body } from '@/design-system/typography/paragraphs'
import { RégularisationMethod } from '@/utils/réductionDeCotisations'
type Props = {
@ -15,28 +18,59 @@ export default function RégularisationSwitch({
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%;
}
`

View File

@ -92,7 +92,7 @@ Décès: Deaths
Déplier: Unfold
"Détail du montant :": "Amount in detail :"
Effacer mes réponses: Delete my answers
Effectif de l'entreprise: Number of employees
"Effectif de l'entreprise :": "Number of employees :"
"En cas d<1>accident de travail</1>, de <4>maladie professionnelle</4> ou dun <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à hauteur de :":
"In the event of an<1>accident at work</1>, <4>occupational illness</4> or an
<7>accident on the way to or from work</7>, you will receive compensation of:"
@ -137,6 +137,7 @@ Graphique statistiques détaillés de la satisfaction, présence dune alterna
Graphique statistiques détaillés du nombre visites par jour, présence dune alternative accessible après limage:
Graph showing detailed statistics on the number of visits per day, with an
alternative accessible after the image
Guadeloupe, Guyane, Martinique, La Réunion: Guadeloupe, French Guiana, Martinique, Reunion Island
Habituellement: Usually
Impôt: Tax
Impôt au barème: Tax scale
@ -278,6 +279,7 @@ Répartition du chiffre d'affaires: Sales breakdown
Répondez à quelques questions additionnelles afin de préciser votre résultat.: Answer a few additional questions to clarify your result.
Résultat fiscal: Taxable income
Réussite: Success
Saint-Barthélémy, Saint-Martin: Saint-Barthélémy, Saint-Martin
Saisissez votre domaine d'activité: Enter your field of activity
Salaire brut: Gross salary
Salaire brut mensuel: Gross monthly salary
@ -1447,7 +1449,7 @@ pages:
included in the simulator.</5>
title: Corporate tax simulator
lodeom:
bareme-label: Scale to be applied
bareme-switch-label: "Scale to be applied :"
legend: Employee's gross salary and applicable Lodeom exemption
meta:
description: Estimated amount of Lodeom exemption. This exemption applies, under
@ -1484,6 +1486,7 @@ pages:
salaries below 3.5 SMIC. In other words, for 2024, total
remuneration not exceeding <1>€6,306.30</1> gross per month.
stage: The Lodeom exemption does not apply to internship bonuses.
zone-switch-label: "Company location :"
médecin:
meta:
description: Calculation of net income after deduction of contributions, based
@ -1566,7 +1569,7 @@ pages:
régularisation:
annuelle: Annual adjustment
progressive: Progressive regularization
type: Type of adjustment
type: "Type of adjustment :"
répartition:
chômage: of which unemployment
retraite: IRC

View File

@ -98,7 +98,7 @@ Décès: Décès
Déplier: Déplier
"Détail du montant :": "Détail du montant :"
Effacer mes réponses: Effacer mes réponses
Effectif de l'entreprise: Effectif de l'entreprise
"Effectif de l'entreprise :": "Effectif de l'entreprise :"
"En cas d<1>accident de travail</1>, de <4>maladie professionnelle</4> ou dun <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à hauteur de :":
"En cas d<1>accident de travail</1>, de <4>maladie professionnelle</4> ou
dun <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à
@ -146,6 +146,7 @@ Graphique statistiques détaillés de la satisfaction, présence dune alterna
Graphique statistiques détaillés du nombre visites par jour, présence dune alternative accessible après limage:
Graphique statistiques détaillés du nombre visites par jour, présence dune
alternative accessible après limage
Guadeloupe, Guyane, Martinique, La Réunion: Guadeloupe, Guyane, Martinique, La Réunion
Habituellement: Habituellement
Impôt: Impôt
Impôt au barème: Impôt au barème
@ -293,6 +294,7 @@ Répartition du chiffre d'affaires: Répartition du chiffre d'affaires
Répondez à quelques questions additionnelles afin de préciser votre résultat.: Répondez à quelques questions additionnelles afin de préciser votre résultat.
Résultat fiscal: Résultat fiscal
Réussite: Réussite
Saint-Barthélémy, Saint-Martin: Saint-Barthélémy, Saint-Martin
Saisissez votre domaine d'activité: Saisissez votre domaine d'activité
Salaire brut: Salaire brut
Salaire brut mensuel: Salaire brut mensuel
@ -1540,7 +1542,7 @@ pages:
pas intégrés dans le simulateur.</5>
title: Simulateur d'impôt sur les sociétés
lodeom:
bareme-label: Barème à appliquer
bareme-switch-label: "Barème à appliquer :"
legend: Rémunération brute du salarié et exonération Lodeom applicable
meta:
description: Estimation du montant de l'exonération Lodeom. Cette exonération
@ -1580,6 +1582,7 @@ pages:
2024, une rémunération totale qui ne dépasse pas <1>6 306,30 €</1>
bruts par mois.
stage: L'exonération Lodeom ne s'applique pas sur les gratifications de stage.
zone-switch-label: "Localisation de l'entreprise :"
médecin:
meta:
description: Calcul du revenu net après déduction des cotisations à partir du
@ -1663,7 +1666,7 @@ pages:
régularisation:
annuelle: Régularisation annuelle
progressive: Régularisation progressive
type: Type de régularisation
type: "Type de régularisation :"
répartition:
chômage: dont chômage
retraite: IRC

View File

@ -47,8 +47,6 @@ export default function LodeomSimulation() {
<>
<Simulation afterQuestionsSlot={<SelectSimulationYear />}>
<SimulateurWarning simulateur="lodeom" />
<ZoneSwitch />
<BarèmeSwitch />
<LodeomSimulationGoals
monthByMonth={monthByMonth}
legend={t(
@ -57,6 +55,8 @@ export default function LodeomSimulation() {
)}
toggles={
<>
<ZoneSwitch />
{currentZone && <BarèmeSwitch />}
{currentZone === 'zone un' && (
<>
<RégularisationSwitch

View File

@ -5,7 +5,8 @@ import { styled } from 'styled-components'
import { ExplicableRule } from '@/components/conversation/Explicable'
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 { useBarèmeLodeom } from '@/hooks/useBarèmeLodeom'
import { useZoneLodeom } from '@/hooks/useZoneLodeom'
@ -17,13 +18,18 @@ export default function BarèmeSwitch() {
return (
<Container>
<StyledBody id="barème-switch-label">
<Strong>
{t(
'pages.simulateurs.lodeom.bareme-switch-label',
'Barème à appliquer :'
)}
</Strong>
</StyledBody>
<StyledToggleGroup
value={currentBarème}
onChange={updateBarème}
aria-label={t(
'pages.simulateurs.lodeom.bareme-label',
'Barème à appliquer'
)}
aria-labelledby="barème-switch-label"
>
{barèmes.map((barème, index) => {
const dottedName =
@ -49,16 +55,21 @@ export default function BarèmeSwitch() {
}
const Container = styled.div`
${FlexCenter}
text-align: left;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
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;
flex-direction: column;
text-align: left;
}
`
const StyledRadio = styled(Radio)`

View File

@ -1,6 +1,9 @@
import { useTranslation } from 'react-i18next'
import { styled } from 'styled-components'
import { Radio, ToggleGroup } from '@/design-system'
import { Strong } from '@/design-system/typography'
import { Body } from '@/design-system/typography/paragraphs'
import { useBarèmeLodeom } from '@/hooks/useBarèmeLodeom'
import { useZoneLodeom } from '@/hooks/useZoneLodeom'
@ -10,18 +13,55 @@ export default function ZoneSwitch() {
const { t } = useTranslation()
return (
<ToggleGroup
value={currentZone}
onChange={(value) => {
updateBarème()
updateZone(value)
}}
aria-label={t("Zone de l'entreprise")}
>
<Radio value="zone un">
{t('Guadeloupe, Guyane, Martinique, La Réunion')}
</Radio>
<Radio value="zone deux">{t('Saint-Barthélémy, Saint-Martin')}</Radio>
</ToggleGroup>
<Container>
<StyledBody id="zone-switch-label">
<Strong>
{t(
'pages.simulateurs.lodeom.zone-switch-label',
"Localisation de l'entreprise :"
)}
</Strong>
</StyledBody>
<StyledToggleGroup
value={currentZone}
onChange={(value) => {
updateBarème()
updateZone(value)
}}
aria-labelledby="zone-switch"
>
<StyledRadio value="zone un">
{t('Guadeloupe, Guyane, Martinique, La Réunion')}
</StyledRadio>
<StyledRadio value="zone deux">
{t('Saint-Barthélémy, Saint-Martin')}
</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;
flex-direction: column;
}
`
const StyledRadio = styled(Radio)`
white-space: nowrap;
> span {
width: 100%;
}
`

View File

@ -6,7 +6,7 @@ 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'
import { réductionGénéraleDottedName } from '@/utils/réductionDeCotisations'
@ -30,9 +30,9 @@ export default function CongésPayésSwitch() {
return (
<Container>
<StyledBody id="caisse-congés-payés-label">
{engine.getRule(dottedName).title}
<Strong>{engine.getRule(dottedName).title} :</Strong>
</StyledBody>
<ToggleGroup
<StyledToggleGroup
value={currentCongésPayés}
onChange={(value) => {
setCurrentCongésPayés(value)
@ -40,19 +40,33 @@ export default function CongésPayésSwitch() {
}}
aria-labelledby="caisse-congés-payés-label"
>
<Radio value="oui">{t('Oui')}</Radio>
<Radio value="non">{t('Non')}</Radio>
</ToggleGroup>
<StyledRadio value="oui">{t('Oui')}</StyledRadio>
<StyledRadio value="non">{t('Non')}</StyledRadio>
</StyledToggleGroup>
</Container>
)
}
const Container = styled.div`
${FlexCenter}
text-align: left;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
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%;
}
`