betagouv/mon-entreprise
betagouv/mon-entreprise
1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-11 00:25:02 +00:00
Code Releases Activity

feat(rgcp): affichage au même niveau de toutes les options d'un mois

Browse source
This commit is contained in:
Alice Dahan 2025-01-21 15:29:51 +01:00 • committed by liliced
parent a2016a0e5c
commit bf3d990a2d
5 changed files with 101 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
site/cypress/integration/mon-entreprise/lodeom.ts
View file

@ -260,11 +260,6 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
cy.contains('Régularisation progressive').click()
cy.get(inputSelector).first().type('{selectall}1500')
cy.get('input[id="option-heures-sup-janvier"]').type('{selectall}5')
cy.get(
'div[id="simulator-legend"] p[aria-describedby="options-mois-incomplet-description"]'
)
.should('be.visible')
.click()
cy.get('input[id="option-rémunération-etp-janvier"]')
.should('be.visible')
.type('{selectall}3000')

8
site/cypress/integration/mon-entreprise/reduction-generale.ts
View file

@ -204,14 +204,6 @@ describe(
cy.contains('Régularisation progressive').click()
cy.get(inputSelector).first().type('{selectall}1500')
cy.get('input[id="option-heures-sup-janvier"]').type('{selectall}5')
cy.get(
'div[id="simulator-legend"] p[aria-describedby="options-mois-incomplet-description"]'
)
.should('be.visible')
.click()
// Wait for fields to appear
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500)
cy.get('input[id="option-rémunération-etp-janvier"]')
.should('be.visible')
.type('{selectall}1900')

223
site/source/components/RéductionDeCotisations/MonthOptions.tsx
View file

@ -1,4 +1,3 @@
import { useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { styled } from 'styled-components'
@ -12,7 +11,6 @@ import {
StyledSuffix,
} from '@/design-system/field/TextField'
import { FlexCenter } from '@/design-system/global-style'
import { RotatingChevronIcon } from '@/design-system/icons'
import { Grid } from '@/design-system/layout'
import { baseTheme } from '@/design-system/theme'
import { Strong } from '@/design-system/typography'
@ -36,7 +34,6 @@ export default function MonthOptions({
}: Props) {
const { t } = useTranslation()
const engine = useEngine()
const [isMoisIncompletVisible, setMoisIncompletVisible] = useState(false)
const isDesktop = useMediaQuery(
`(min-width: ${baseTheme.breakpointsWidth.md})`
)
@ -136,121 +133,104 @@ export default function MonthOptions({
</GridItemInput>
</GridContainer>
<StyledButton
role="button"
onClick={() => setMoisIncompletVisible(!isMoisIncompletVisible)}
aria-describedby="options-mois-incomplet-description"
aria-expanded={isMoisIncompletVisible}
aria-controls={`options-mois-incomplet-${month}`}
aria-label={!isMoisIncompletVisible ? t('Déplier') : t('Replier')}
>
Mois incomplet {isDesktop && '(embauche, absences, départ...)'}{' '}
<RotatingChevronIcon aria-hidden $isOpen={isMoisIncompletVisible} />
</StyledButton>
<span id="options-mois-incomplet-description" className="sr-only">
{t(
'pages.simulateurs.réduction-générale.options.mois-incomplet.description',
"Ajoute des champs pour gérer le cas d'un mois incomplet"
)}
</span>
<StyledSmallBody>
Mois incomplet {isDesktop && t('(embauche, absences, départ...)')}
{' :'}
</StyledSmallBody>
{isMoisIncompletVisible && (
<>
<GridContainer container columnSpacing={4}>
<GridItemLabel item>
<FlexDiv>
<StyledLabel id={`rémunération-etp-label`}>
{t(
'pages.simulateurs.réduction-générale.options.label.rémunération-etp',
'Rémunération de base mois complet'
)}
</StyledLabel>
<HelpButtonWithPopover
type="info"
title={t(
'pages.simulateurs.réduction-générale.options.label.rémunération-etp',
'Rémunération de base mois complet'
)}
>
<RémunérationETPPopoverContent />
</HelpButtonWithPopover>
</FlexDiv>
</GridItemLabel>
<GridItemInput item>
<NumberFieldContainer>
<NumberField
id={`option-rémunération-etp-${month}`}
small={true}
value={options.rémunérationETP}
onChange={onRémunérationETPChange}
aria-labelledby={`rémunération-etp-label`}
displayedUnit="€"
/>
</NumberFieldContainer>
</GridItemInput>
</GridContainer>
<GridContainer container columnSpacing={4}>
<GridItemLabel item>
<FlexDiv>
<StyledLabel id={`rémunération-primes-label`}>
{t(
'pages.simulateurs.réduction-générale.options.label.rémunération-primes',
'Rémunération non affectée par le mois incomplet'
)}
</StyledLabel>
<HelpButtonWithPopover
type="info"
title={t(
'pages.simulateurs.réduction-générale.options.label.rémunération-primes',
'Rémunération non affectée par le mois incomplet'
)}
>
<RémunérationPrimesPopoverContent />
</HelpButtonWithPopover>
</FlexDiv>
</GridItemLabel>
<GridItemInput item>
<NumberFieldContainer>
<NumberField
id={`option-rémunération-primes-${month}`}
small={true}
value={options.rémunérationPrimes}
onChange={onRémunérationPrimesChange}
aria-labelledby={`rémunération-primes-label`}
displayedUnit="€"
/>
</NumberFieldContainer>
</GridItemInput>
</GridContainer>
<GridContainer container columnSpacing={4}>
<GridItemLabel item>
<FlexDiv>
<StyledLabel id={`rémunération-heures-sup-label`}>
{additionalHoursRémunérationLabels[additionalHours]}
</StyledLabel>
<HelpButtonWithPopover
type="info"
title={additionalHoursRémunérationLabels[additionalHours]}
>
<RémunérationHeuresSupPopoverContent />
</HelpButtonWithPopover>
</FlexDiv>
</GridItemLabel>
<GridItemInput item>
<NumberFieldContainer>
<NumberField
id={`option-rémunération-heures-sup-${month}`}
small={true}
value={options.rémunérationHeuresSup}
onChange={onRémunérationHeuresSupChange}
aria-labelledby={`rémunération-heures-sup-label`}
displayedUnit="€"
/>
</NumberFieldContainer>
</GridItemInput>
</GridContainer>
</>
)}
<GridContainer container columnSpacing={4}>
<GridItemLabel item>
<FlexDiv>
<StyledLabel id={`rémunération-etp-label`}>
{t(
'pages.simulateurs.réduction-générale.options.label.rémunération-etp',
'Rémunération de base mois complet'
)}
</StyledLabel>
<HelpButtonWithPopover
type="info"
title={t(
'pages.simulateurs.réduction-générale.options.label.rémunération-etp',
'Rémunération de base mois complet'
)}
>
<RémunérationETPPopoverContent />
</HelpButtonWithPopover>
</FlexDiv>
</GridItemLabel>
<GridItemInput item>
<NumberFieldContainer>
<NumberField
id={`option-rémunération-etp-${month}`}
small={true}
value={options.rémunérationETP}
onChange={onRémunérationETPChange}
aria-labelledby={`rémunération-etp-label`}
displayedUnit="€"
/>
</NumberFieldContainer>
</GridItemInput>
</GridContainer>
<GridContainer container columnSpacing={4}>
<GridItemLabel item>
<FlexDiv>
<StyledLabel id={`rémunération-primes-label`}>
{t(
'pages.simulateurs.réduction-générale.options.label.rémunération-primes',
'Rémunération non affectée par le mois incomplet'
)}
</StyledLabel>
<HelpButtonWithPopover
type="info"
title={t(
'pages.simulateurs.réduction-générale.options.label.rémunération-primes',
'Rémunération non affectée par le mois incomplet'
)}
>
<RémunérationPrimesPopoverContent />
</HelpButtonWithPopover>
</FlexDiv>
</GridItemLabel>
<GridItemInput item>
<NumberFieldContainer>
<NumberField
id={`option-rémunération-primes-${month}`}
small={true}
value={options.rémunérationPrimes}
onChange={onRémunérationPrimesChange}
aria-labelledby={`rémunération-primes-label`}
displayedUnit="€"
/>
</NumberFieldContainer>
</GridItemInput>
</GridContainer>
<GridContainer container columnSpacing={4}>
<GridItemLabel item>
<FlexDiv>
<StyledLabel id={`rémunération-heures-sup-label`}>
{additionalHoursRémunérationLabels[additionalHours]}
</StyledLabel>
<HelpButtonWithPopover
type="info"
title={additionalHoursRémunérationLabels[additionalHours]}
>
<RémunérationHeuresSupPopoverContent />
</HelpButtonWithPopover>
</FlexDiv>
</GridItemLabel>
<GridItemInput item>
<NumberFieldContainer>
<NumberField
id={`option-rémunération-heures-sup-${month}`}
small={true}
value={options.rémunérationHeuresSup}
onChange={onRémunérationHeuresSupChange}
aria-labelledby={`rémunération-heures-sup-label`}
displayedUnit="€"
/>
</NumberFieldContainer>
</GridItemInput>
</GridContainer>
</Appear>
)
}
@ -333,13 +313,8 @@ const NumberFieldContainer = styled.div`
}
}
`
const StyledButton = styled(SmallBody)`
cursor: pointer;
const StyledSmallBody = styled(SmallBody)`
font-weight: bold;
color: ${({ theme }) => theme.colors.bases.primary[800]};
margin-top: ${({ theme }) => theme.spacings.xs};
margin-bottom: 0;
svg {
fill: ${({ theme }) => theme.colors.bases.primary[800]} !important;
}
margin: ${({ theme }) => theme.spacings.xs} 0;
`

3
site/source/locales/ui-en.yaml
View file

@ -1,3 +1,4 @@
(embauche, absences, départ...): (hiring, absences, departures...)
(invalidité partielle): (partial disability)
(invalidité totale): (total disability)
"404":
@ -1545,8 +1546,6 @@ pages:
rémunération-heures-complémentaires: Overtime pay
rémunération-heures-supplémentaires: Overtime pay
rémunération-primes: Remuneration not affected by the incomplete month
mois-incomplet:
description: Adds fields to handle incomplete months
rémunération-etp:
popover: <0>Indicate here the remuneration that would have been paid for a full
month, <2>excluding</2>:<4><0>bonuses and other remuneration not

3
site/source/locales/ui-fr.yaml
View file

@ -1,3 +1,4 @@
(embauche, absences, départ...): (embauche, absences, départ...)
(invalidité partielle): (invalidité partielle)
(invalidité totale): (invalidité totale)
"404":
@ -1644,8 +1645,6 @@ pages:
rémunération-heures-complémentaires: Rémunération des heures complémentaires
rémunération-heures-supplémentaires: Rémunération des heures supplémentaires
rémunération-primes: Rémunération non affectée par le mois incomplet
mois-incomplet:
description: Ajoute des champs pour gérer le cas d'un mois incomplet
rémunération-etp:
popover: <0>Indiquez ici la rémunération qui aurait été versée pour un mois
complet, <2>en excluant</2> :<4><0>les primes et autres éléments de