From 1c6bcd358b558b37e501fe5cc39325a381a934ad Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Thu, 12 Dec 2024 15:40:18 +0100
Subject: [PATCH] =?UTF-8?q?feat(rgcp):=20ajout=20d'un=20r=C3=A9capitulatif?=
 =?UTF-8?q?=20trimestriel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/source/locales/ui-en.yaml                |  10 +
 site/source/locales/ui-fr.yaml                |  10 +
 .../reduction-generale/MoisParMois.tsx        | 176 +++++++++++++-----
 .../components/MontantRéduction.tsx           |  10 +-
 .../components/RécapitulatifTrimestre.tsx     | 168 +++++++++++++++++
 .../{Mois.tsx => RéductionGénéraleMois.tsx}   |   0
 6 files changed, 328 insertions(+), 46 deletions(-)
 create mode 100644 site/source/pages/simulateurs/reduction-generale/components/RécapitulatifTrimestre.tsx
 rename site/source/pages/simulateurs/reduction-generale/components/{Mois.tsx => RéductionGénéraleMois.tsx} (100%)

diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml
index fa873b375..12da894f2 100644
--- a/site/source/locales/ui-en.yaml
+++ b/site/source/locales/ui-en.yaml
@@ -330,6 +330,7 @@ Tout déplier: Unfold all
 Tout plier: Fold everything
 Tout réinitialiser: Reset all
 Travailleurs Non Salariés (TNS): Self-employed workers (TNS)
+Trimestre: Quarter
 Type: Type
 URSSAF Mon entreprise, accéder à la page d'accueil: URSSAF Mon entreprise, go to home page
 Un <1>capital « orphelin »</1> est versé aux <4>enfants des travailleurs indépendants</4> décédés, sous certaines conditions.:
@@ -1514,6 +1515,15 @@ pages:
         rémunération-primes:
           popover: <0>Indicate here any elements of remuneration not affected by the
             absence, such as bonuses.</0>
+      recap:
+        T1: 1st quarter
+        T2: 2nd quarter
+        T3: 3rd quarter
+        T4: 4th quarter
+        caption: "Quarterly summary :"
+        code671: code 671(€)
+        code801: code 801(€)
+        header: Calculated reduction
       régularisation:
         annuelle: Annual adjustment
         progressive: Progressive regularization
diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml
index 8b58c45f8..a51e1f9e9 100644
--- a/site/source/locales/ui-fr.yaml
+++ b/site/source/locales/ui-fr.yaml
@@ -345,6 +345,7 @@ Tout déplier: Tout déplier
 Tout plier: Tout plier
 Tout réinitialiser: Tout réinitialiser
 Travailleurs Non Salariés (TNS): Travailleurs Non Salariés (TNS)
+Trimestre: Trimestre
 Type: Type
 URSSAF Mon entreprise, accéder à la page d'accueil: URSSAF Mon entreprise, accéder à la page d'accueil
 Un <1>capital « orphelin »</1> est versé aux <4>enfants des travailleurs indépendants</4> décédés, sous certaines conditions.:
@@ -1608,6 +1609,15 @@ pages:
         rémunération-primes:
           popover: <0>Indiquez ici les éléments de rémunération non affectés par
             l'absence, comme les primes.</0>
+      recap:
+        T1: 1er trimestre
+        T2: 2ème trimestre
+        T3: 3ème trimestre
+        T4: 4ème trimestre
+        caption: "Récapitulatif trimestriel :"
+        code671: code 671(€)
+        code801: code 801(€)
+        header: Réduction calculée
       régularisation:
         annuelle: Régularisation annuelle
         progressive: Régularisation progressive
diff --git a/site/source/pages/simulateurs/reduction-generale/MoisParMois.tsx b/site/source/pages/simulateurs/reduction-generale/MoisParMois.tsx
index 8bca7b14d..1ffaab334 100644
--- a/site/source/pages/simulateurs/reduction-generale/MoisParMois.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/MoisParMois.tsx
@@ -2,11 +2,13 @@ import { useTranslation } from 'react-i18next'
 import { styled } from 'styled-components'
 
 import RuleLink from '@/components/RuleLink'
+import { Spacing } from '@/design-system/layout'
 import { baseTheme } from '@/design-system/theme'
 import { Body } from '@/design-system/typography/paragraphs'
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 
-import RéductionGénéraleMois from './components/Mois'
+import RécapitulatifTrimestre from './components/RécapitulatifTrimestre'
+import RéductionGénéraleMois from './components/RéductionGénéraleMois'
 import Warnings from './components/Warnings'
 import { MonthState, Options, réductionGénéraleDottedName } from './utils'
 
@@ -41,52 +43,112 @@ export default function RéductionGénéraleMoisParMois({
 		t('décembre'),
 	]
 
+	const quarters = {
+		[t('pages.simulateurs.réduction-générale.recap.T1', '1er trimestre')]:
+			data.slice(0, 3),
+		[t('pages.simulateurs.réduction-générale.recap.T2', '2ème trimestre')]:
+			data.slice(3, 6),
+		[t('pages.simulateurs.réduction-générale.recap.T3', '3ème trimestre')]:
+			data.slice(6, 9),
+		[t('pages.simulateurs.réduction-générale.recap.T4', '4ème trimestre')]:
+			data.slice(9),
+	}
+
 	return (
 		<>
 			{isDesktop ? (
-				<StyledTable>
-					<caption>
-						{t(
-							'pages.simulateurs.réduction-générale.month-by-month.caption',
-							'Réduction générale mois par mois :'
-						)}
-					</caption>
-					<thead>
-						<tr>
-							<th scope="col">{t('Mois')}</th>
-							<th scope="col">
-								{/* TODO: remplacer par rémunérationBruteDottedName lorsque ... */}
-								<RuleLink dottedName="salarié . rémunération . brut" />
-							</th>
-							<th scope="col">
-								<RuleLink dottedName={réductionGénéraleDottedName} />
-							</th>
-							<th scope="col">
-								<RuleLink dottedName="salarié . cotisations . exonérations . réduction générale . régularisation" />
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						{data.length > 0 &&
-							months.map((monthName, monthIndex) => (
-								<RéductionGénéraleMois
-									key={`month-${monthIndex}`}
-									monthName={monthName}
-									data={data[monthIndex]}
-									index={monthIndex}
-									onRémunérationChange={(
-										monthIndex: number,
-										rémunérationBrute: number
-									) => {
-										onRémunérationChange(monthIndex, rémunérationBrute)
-									}}
-									onOptionsChange={(monthIndex: number, options: Options) => {
-										onOptionsChange(monthIndex, options)
-									}}
+				<>
+					<StyledTable>
+						<caption>
+							{t(
+								'pages.simulateurs.réduction-générale.month-by-month.caption',
+								'Réduction générale mois par mois :'
+							)}
+						</caption>
+						<thead>
+							<tr>
+								<th scope="col">{t('Mois')}</th>
+								<th scope="col">
+									{/* TODO: remplacer par rémunérationBruteDottedName lorsque ... */}
+									<RuleLink dottedName="salarié . rémunération . brut" />
+								</th>
+								<th scope="col">
+									<RuleLink dottedName={réductionGénéraleDottedName} />
+								</th>
+								<th scope="col">
+									<RuleLink dottedName="salarié . cotisations . exonérations . réduction générale . régularisation" />
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.length > 0 &&
+								months.map((monthName, monthIndex) => (
+									<RéductionGénéraleMois
+										key={`month-${monthIndex}`}
+										monthName={monthName}
+										data={data[monthIndex]}
+										index={monthIndex}
+										onRémunérationChange={(
+											monthIndex: number,
+											rémunérationBrute: number
+										) => {
+											onRémunérationChange(monthIndex, rémunérationBrute)
+										}}
+										onOptionsChange={(monthIndex: number, options: Options) => {
+											onOptionsChange(monthIndex, options)
+										}}
+									/>
+								))}
+						</tbody>
+					</StyledTable>
+
+					<Spacing xxl />
+
+					<StyledRecapTable>
+						<caption>
+							{t(
+								'pages.simulateurs.réduction-générale.recap.caption',
+								'Récapitulatif trimestriel :'
+							)}
+						</caption>
+						<thead>
+							<tr>
+								<th scope="col">{t('Trimestre')}</th>
+								<th scope="col">
+									{t(
+										'pages.simulateurs.réduction-générale.recap.header',
+										'Réduction calculée'
+									)}
+									<br />
+									{t(
+										'pages.simulateurs.réduction-générale.recap.code671',
+										'code 671(€)'
+									)}
+								</th>
+								<th scope="col">
+									{t(
+										'pages.simulateurs.réduction-générale.recap.header',
+										'Réduction calculée'
+									)}
+									<br />
+									{t(
+										'pages.simulateurs.réduction-générale.recap.code801',
+										'code 801(€)'
+									)}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{Object.keys(quarters).map((label, index) => (
+								<RécapitulatifTrimestre
+									key={index}
+									label={label}
+									data={quarters[label]}
 								/>
 							))}
-					</tbody>
-				</StyledTable>
+						</tbody>
+					</StyledRecapTable>
+				</>
 			) : (
 				<>
 					<Body>
@@ -114,6 +176,23 @@ export default function RéductionGénéraleMoisParMois({
 								mobileVersion={true}
 							/>
 						))}
+
+					<Spacing xxl />
+
+					<Body>
+						{t(
+							'pages.simulateurs.réduction-générale.recap.caption',
+							'Récapitulatif trimestriel :'
+						)}
+					</Body>
+					{Object.keys(quarters).map((label, index) => (
+						<RécapitulatifTrimestre
+							key={index}
+							label={label}
+							data={quarters[label]}
+							mobileVersion={true}
+						/>
+					))}
 				</>
 			)}
 
@@ -148,3 +227,16 @@ const StyledTable = styled.table`
 		font-weight: normal;
 	}
 `
+const StyledRecapTable = styled(StyledTable)`
+	thead {
+		border-bottom: solid 1px;
+	}
+	thead th:not(:last-of-type),
+	tbody th,
+	td:not(:last-of-type) {
+		border-right: solid 1px;
+	}
+	thead th:not(:first-of-type) {
+		text-align: center;
+	}
+`
diff --git a/site/source/pages/simulateurs/reduction-generale/components/MontantRéduction.tsx b/site/source/pages/simulateurs/reduction-generale/components/MontantRéduction.tsx
index f5bb474fb..5f39630a5 100644
--- a/site/source/pages/simulateurs/reduction-generale/components/MontantRéduction.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/components/MontantRéduction.tsx
@@ -22,6 +22,7 @@ type Props = {
 	displayedUnit: string
 	language: string
 	displayNull?: boolean
+	alignment?: 'center' | 'end'
 }
 
 export default function MontantRéduction({
@@ -32,6 +33,7 @@ export default function MontantRéduction({
 	displayedUnit,
 	language,
 	displayNull = true,
+	alignment = 'end',
 }: Props) {
 	const { t } = useTranslation()
 
@@ -39,7 +41,7 @@ export default function MontantRéduction({
 
 	return réductionGénérale ? (
 		<StyledTooltip tooltip={tooltip}>
-			<FlexDiv id={id}>
+			<FlexDiv id={id} $alignment={alignment}>
 				{formatValue(
 					{
 						nodeValue: réductionGénérale,
@@ -54,7 +56,7 @@ export default function MontantRéduction({
 		</StyledTooltip>
 	) : (
 		displayNull && (
-			<FlexDiv id={id}>
+			<FlexDiv id={id} $alignment={alignment}>
 				{formatValue(0, { displayedUnit, language })}
 
 				<Condition
@@ -76,9 +78,9 @@ export default function MontantRéduction({
 const StyledTooltip = styled(Tooltip)`
 	width: 100%;
 `
-const FlexDiv = styled.div`
+const FlexDiv = styled.div<{ $alignment: 'end' | 'center' }>`
 	${FlexCenter}
-	justify-content: end;
+	justify-content: ${({ $alignment }) => $alignment};
 `
 const StyledSearchIcon = styled(SearchIcon)`
 	margin-left: ${({ theme }) => theme.spacings.sm};
diff --git a/site/source/pages/simulateurs/reduction-generale/components/RécapitulatifTrimestre.tsx b/site/source/pages/simulateurs/reduction-generale/components/RécapitulatifTrimestre.tsx
new file mode 100644
index 000000000..51e69ba35
--- /dev/null
+++ b/site/source/pages/simulateurs/reduction-generale/components/RécapitulatifTrimestre.tsx
@@ -0,0 +1,168 @@
+import { sumAll } from 'effect/Number'
+import { useTranslation } from 'react-i18next'
+import { styled } from 'styled-components'
+
+import { Grid } from '@/design-system/layout'
+import { Body } from '@/design-system/typography/paragraphs'
+
+import { MonthState } from '../utils'
+import MontantRéduction from './MontantRéduction'
+
+type Props = {
+	label: string
+	data: MonthState[]
+	mobileVersion?: boolean
+}
+
+export type RémunérationBruteInput = {
+	unité: string
+	valeur: number
+}
+
+export default function RécapitulatifTrimestre({
+	label,
+	data,
+	mobileVersion = false,
+}: Props) {
+	const { t, i18n } = useTranslation()
+	const language = i18n.language
+	const displayedUnit = '€'
+
+	const rémunération = sumAll(
+		data.map((monthData) => monthData.rémunérationBrute)
+	)
+	const répartition = {
+		IRC: sumAll(
+			data.map(
+				(monthData) =>
+					monthData.réductionGénérale.répartition.IRC +
+					monthData.régularisation.répartition.IRC
+			)
+		),
+		Urssaf: sumAll(
+			data.map(
+				(monthData) =>
+					monthData.réductionGénérale.répartition.Urssaf +
+					monthData.régularisation.répartition.Urssaf
+			)
+		),
+		chômage: sumAll(
+			data.map(
+				(monthData) =>
+					monthData.réductionGénérale.répartition.chômage +
+					monthData.régularisation.répartition.chômage
+			)
+		),
+	}
+	let réduction = sumAll(
+		data.map((monthData) => monthData.réductionGénérale.value)
+	)
+	let régularisation = sumAll(
+		data.map((monthData) => monthData.régularisation.value)
+	)
+	if (réduction + régularisation > 0) {
+		réduction += régularisation
+		régularisation = 0
+	} else {
+		régularisation += réduction
+		réduction = 0
+	}
+
+	const Montant671 = () => {
+		return (
+			<MontantRéduction
+				rémunérationBrute={rémunération}
+				réductionGénérale={réduction}
+				répartition={répartition}
+				displayedUnit={displayedUnit}
+				language={language}
+				displayNull={false}
+				alignment="center"
+			/>
+		)
+	}
+
+	const Montant801 = () => {
+		return (
+			<MontantRéduction
+				rémunérationBrute={rémunération}
+				réductionGénérale={régularisation}
+				répartition={répartition}
+				displayedUnit={displayedUnit}
+				language={language}
+				displayNull={false}
+				alignment="center"
+			/>
+		)
+	}
+
+	return mobileVersion ? (
+		<div>
+			<StyledMonth>{label}</StyledMonth>
+			<GridContainer container spacing={2}>
+				<Grid item>
+					<StyledBody>
+						{t(
+							'pages.simulateurs.réduction-générale.recap.header',
+							'Réduction calculée'
+						)}
+						<br />
+						{t(
+							'pages.simulateurs.réduction-générale.recap.code671',
+							'code 671(€)'
+						)}
+					</StyledBody>
+				</Grid>
+				<Grid item>
+					<StyledBody>
+						<Montant671 />
+					</StyledBody>
+				</Grid>
+			</GridContainer>
+
+			<GridContainer container spacing={2}>
+				<Grid item>
+					<StyledBody>
+						{t(
+							'pages.simulateurs.réduction-générale.recap.header',
+							'Réduction calculée'
+						)}
+						<br />
+						{t(
+							'pages.simulateurs.réduction-générale.recap.code801',
+							'code 801(€)'
+						)}
+					</StyledBody>
+				</Grid>
+				<Grid item>
+					<StyledBody>
+						<Montant801 />
+					</StyledBody>
+				</Grid>
+			</GridContainer>
+		</div>
+	) : (
+		<tr>
+			<th scope="row">{label}</th>
+			<td>
+				<Montant671 />
+			</td>
+			<td>
+				<Montant801 />
+			</td>
+		</tr>
+	)
+}
+
+const StyledMonth = styled(Body)`
+	font-weight: bold;
+	text-transform: capitalize;
+	border-bottom: solid 1px ${({ theme }) => theme.colors.bases.primary[100]};
+`
+const GridContainer = styled(Grid)`
+	align-items: center;
+	justify-content: space-between;
+`
+const StyledBody = styled(Body)`
+	margin-top: 0;
+`
diff --git a/site/source/pages/simulateurs/reduction-generale/components/Mois.tsx b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMois.tsx
similarity index 100%
rename from site/source/pages/simulateurs/reduction-generale/components/Mois.tsx
rename to site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMois.tsx