From e070a1c5066d940a5d438e00c29c7fbc04c4e35d Mon Sep 17 00:00:00 2001 From: Alice Dahan Date: Mon, 18 Nov 2024 14:09:37 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20r=C3=A9duction=20g=C3=A9n=C3=A9rale?= =?UTF-8?q?=20mois=20par=20mois?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RéductionGénéraleMoisParMois.tsx | 173 ++---------------- .../RéductionGénéraleMoisParMoisRow.tsx | 168 +++++++++++++++++ 2 files changed, 186 insertions(+), 155 deletions(-) create mode 100644 site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx diff --git a/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx b/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx index 525ff510e..5d53abcba 100644 --- a/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx +++ b/site/source/pages/simulateurs/reduction-generale/RéductionGénéraleMoisParMois.tsx @@ -1,39 +1,22 @@ -import { formatValue, PublicodesExpression } from 'publicodes' import { useTranslation } from 'react-i18next' import { styled } from 'styled-components' import { ExplicableRule } from '@/components/conversation/Explicable' -import NumberInput from '@/components/conversation/NumberInput' -import { Condition } from '@/components/EngineValue/Condition' -import { useEngine } from '@/components/utils/EngineContext' -import { SearchIcon, WarningIcon } from '@/design-system/icons' -import { Tooltip } from '@/design-system/tooltip' -import Répartition from './components/Répartition' +import RéductionGénéraleMoisParMoisRow from './components/RéductionGénéraleMoisParMoisRow' import Warnings from './components/Warnings' -import WarningSalaireTrans from './components/WarningSalaireTrans' -import { - MonthState, - réductionGénéraleDottedName, - rémunérationBruteDottedName, -} from './utils' +import { MonthState, réductionGénéraleDottedName } from './utils' -type RémunérationBruteInput = { - unité: string - valeur: number +type Props = { + data: MonthState[] + onChange: (monthIndex: number, rémunérationBrute: number) => void } export default function RéductionGénéraleMoisParMois({ data, onChange, -}: { - data: MonthState[] - onChange: (monthIndex: number, rémunérationBrute: number) => void -}) { - const engine = useEngine() - const { t, i18n } = useTranslation() - const language = i18n.language - const displayedUnit = '€' +}: Props) { + const { t } = useTranslation() const months = [ t('janvier'), @@ -50,31 +33,6 @@ export default function RéductionGénéraleMoisParMois({ t('décembre'), ] - const onRémunérationChange = ( - monthIndex: number, - rémunérationBrute: RémunérationBruteInput - ) => { - onChange(monthIndex, rémunérationBrute.valeur) - } - - // TODO: enlever les 4 premières props après résolution de #3123 - const ruleInputProps = { - dottedName: rémunérationBruteDottedName, - suggestions: {}, - description: undefined, - question: undefined, - engine, - 'aria-labelledby': 'simu-update-explaining', - formatOptions: { - maximumFractionDigits: 0, - }, - displayedUnit, - unit: { - numerators: ['€'], - denominators: [], - }, - } - return ( <> @@ -95,102 +53,17 @@ export default function RéductionGénéraleMoisParMois({ {data.length > 0 && - months.map((monthName, monthIndex) => { - const tooltip = ( - - ) - - return ( - - {monthName} - - - onRémunérationChange( - monthIndex, - rémunérationBrute as RémunérationBruteInput - ) - } - value={data[monthIndex].rémunérationBrute} - formatOptions={{ - maximumFractionDigits: 2, - }} - /> - - - {data[monthIndex].réductionGénérale ? ( - - - {formatValue( - { - nodeValue: data[monthIndex].réductionGénérale, - }, - { - displayedUnit, - language, - } - )} - - - - ) : ( - - {formatValue(0, { displayedUnit, language })} - - 1.6 * SMIC`} - contexte={{ - [rémunérationBruteDottedName]: - data[monthIndex].rémunérationBrute, - }} - > - }> - {t('Attention')} - - - - - )} - - - {formatValue( - { - nodeValue: data[monthIndex].régularisation, - }, - { - displayedUnit, - language, - } - )} - - - ) - })} + months.map((monthName, monthIndex) => ( + { + onChange(monthIndex, rémunérationBrute) + }} + /> + ))} @@ -220,13 +93,3 @@ const StyledTable = styled.table` font-weight: normal; } ` - -const StyledDiv = styled.div` - display: flex; - align-items: center; - gap: ${({ theme }) => theme.spacings.sm}; -` - -const StyledWarningIcon = styled(WarningIcon)` - margin-top: ${({ theme }) => theme.spacings.xxs}; -` diff --git a/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx new file mode 100644 index 000000000..9ec86dbbf --- /dev/null +++ b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx @@ -0,0 +1,168 @@ +import { formatValue, PublicodesExpression } from 'publicodes' +import { useTranslation } from 'react-i18next' +import { styled } from 'styled-components' + +import NumberInput from '@/components/conversation/NumberInput' +import { Condition } from '@/components/EngineValue/Condition' +import { useEngine } from '@/components/utils/EngineContext' +import { SearchIcon, WarningIcon } from '@/design-system/icons' +import { Tooltip } from '@/design-system/tooltip' + +import { + MonthState, + réductionGénéraleDottedName, + rémunérationBruteDottedName, +} from '../utils' +import Répartition from './Répartition' +import WarningSalaireTrans from './WarningSalaireTrans' + +type Props = { + monthName: string + data: MonthState + index: number + onChange: (monthIndex: number, rémunérationBrute: number) => void +} + +type RémunérationBruteInput = { + unité: string + valeur: number +} + +export default function RéductionGénéraleMoisParMoisRow({ + monthName, + data, + index, + onChange, +}: Props) { + const { t, i18n } = useTranslation() + const language = i18n.language + const displayedUnit = '€' + const engine = useEngine() + + const onRémunérationChange = ( + monthIndex: number, + rémunérationBrute: RémunérationBruteInput + ) => { + onChange(monthIndex, rémunérationBrute.valeur) + } + + // TODO: enlever les 4 premières props après résolution de #3123 + const ruleInputProps = { + dottedName: rémunérationBruteDottedName, + suggestions: {}, + description: undefined, + question: undefined, + engine, + 'aria-labelledby': 'simu-update-explaining', + formatOptions: { + maximumFractionDigits: 0, + }, + displayedUnit, + unit: { + numerators: ['€'], + denominators: [], + }, + } + + const tooltip = ( + + ) + + return ( + + {monthName} + + + onRémunérationChange( + index, + rémunérationBrute as RémunérationBruteInput + ) + } + value={data.rémunérationBrute} + formatOptions={{ + maximumFractionDigits: 2, + }} + /> + + + {data.réductionGénérale ? ( + + + {formatValue( + { + nodeValue: data.réductionGénérale, + }, + { + displayedUnit, + language, + } + )} + + + + ) : ( + + {formatValue(0, { displayedUnit, language })} + + 1.6 * SMIC`} + contexte={{ + [rémunérationBruteDottedName]: data.rémunérationBrute, + }} + > + }> + {t('Attention')} + + + + + )} + + + {formatValue( + { + nodeValue: data.régularisation, + }, + { + displayedUnit, + language, + } + )} + + + ) +} + +const StyledDiv = styled.div` + display: flex; + align-items: center; + gap: ${({ theme }) => theme.spacings.sm}; +` + +const StyledWarningIcon = styled(WarningIcon)` + margin-top: ${({ theme }) => theme.spacings.xxs}; +`