From be9c86a437da9fbaf66187305c12c0167ce8d2fc Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Fri, 18 Oct 2024 10:46:50 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20d'une=20icone=20=C3=A0=20c?=
 =?UTF-8?q?=C3=B4t=C3=A9=20du=20montant=20RGCP=20mois=20par=20mois?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/source/locales/ui-en.yaml                |  1 +
 site/source/locales/ui-fr.yaml                |  1 +
 .../RéductionGénéraleMoisParMois.tsx          | 24 ++++++---
 .../components/Répartition.tsx                | 54 +++++++++++--------
 4 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml
index 7ae98974f..892b14b40 100644
--- a/site/source/locales/ui-en.yaml
+++ b/site/source/locales/ui-en.yaml
@@ -93,6 +93,7 @@ Décrivez votre projet ou votre problème en donnant quelques éléments de cont
     the right advisor for your request.
     He or she will contact you by telephone within 5 days, and will provide you with assistance tailored to your situation.
 Décès: Deaths
+"Détail du montant :": "Amount in detail :"
 Effacer mes réponses: Delete my answers
 Effectif de l'entreprise: Number of employees
 "En cas d’<1>accident de travail</1>, de <4>maladie professionnelle</4> ou d’un <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à hauteur de :":
diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml
index 2568ce4e4..2abf2122c 100644
--- a/site/source/locales/ui-fr.yaml
+++ b/site/source/locales/ui-fr.yaml
@@ -99,6 +99,7 @@ Décrivez votre projet ou votre problème en donnant quelques éléments de cont
     le conseiller compétent pour votre demande.
     Celui-ci vous contactera par téléphone sous 5 jours et vous accompagnera en fonction de votre situation.
 Décès: Décès
+"Détail du montant :": "Détail du montant :"
 Effacer mes réponses: Effacer mes réponses
 Effectif de l'entreprise: Effectif de l'entreprise
 "En cas d’<1>accident de travail</1>, de <4>maladie professionnelle</4> ou d’un <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à hauteur de :":
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 7f29a3a88..1bb1b8b7b 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
@@ -5,6 +5,7 @@ import { styled } from 'styled-components'
 import { ExplicableRule } from '@/components/conversation/Explicable'
 import NumberInput from '@/components/conversation/NumberInput'
 import { useEngine } from '@/components/utils/EngineContext'
+import { SearchIcon } from '@/design-system/icons'
 import { Tooltip } from '@/design-system/tooltip'
 
 import Répartition from './components/Répartition'
@@ -124,13 +125,16 @@ export default function RéductionGénéraleMoisParMois({
 									<td>
 										{data[monthIndex].réductionGénérale ? (
 											<Tooltip tooltip={tooltip}>
-												{formatValue(
-													{ nodeValue: data[monthIndex].réductionGénérale },
-													{
-														displayedUnit,
-														language,
-													}
-												)}
+												<StyledDiv>
+													{formatValue(
+														{ nodeValue: data[monthIndex].réductionGénérale },
+														{
+															displayedUnit,
+															language,
+														}
+													)}
+													<SearchIcon />
+												</StyledDiv>
 											</Tooltip>
 										) : (
 											formatValue(0, { displayedUnit, language })
@@ -168,3 +172,9 @@ const StyledTable = styled.table`
 		font-weight: normal;
 	}
 `
+
+const StyledDiv = styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${({ theme }) => theme.spacings.sm};
+`
diff --git a/site/source/pages/simulateurs/reduction-generale/components/Répartition.tsx b/site/source/pages/simulateurs/reduction-generale/components/Répartition.tsx
index 73ffbf346..61abd5895 100644
--- a/site/source/pages/simulateurs/reduction-generale/components/Répartition.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/components/Répartition.tsx
@@ -1,7 +1,10 @@
+import { Trans } from 'react-i18next'
 import { styled } from 'styled-components'
 
 import { SimulationValue } from '@/components/Simulation/SimulationValue'
+import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'
+import { Body } from '@/design-system/typography/paragraphs'
 import { Contexte } from '@/domaine/Contexte'
 
 type Props = {
@@ -10,28 +13,35 @@ type Props = {
 
 export default function Répartition({ contexte = {} }: Props) {
 	return (
-		<StyledUl>
-			<StyledLi>
-				<SimulationValue
-					dottedName="salarié . cotisations . exonérations . réduction générale . part retraite"
-					contexte={contexte}
-					round={false}
-				/>
-			</StyledLi>
-			<StyledLi>
-				<SimulationValue
-					dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf"
-					contexte={contexte}
-					round={false}
-				/>
-				<SimulationValue
-					dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf . part chômage"
-					label="dont chômage"
-					contexte={contexte}
-					round={false}
-				/>
-			</StyledLi>
-		</StyledUl>
+		<>
+			<Body>
+				<Strong>
+					<Trans>Détail du montant :</Trans>
+				</Strong>
+			</Body>
+			<StyledUl>
+				<StyledLi>
+					<SimulationValue
+						dottedName="salarié . cotisations . exonérations . réduction générale . part retraite"
+						contexte={contexte}
+						round={false}
+					/>
+				</StyledLi>
+				<StyledLi>
+					<SimulationValue
+						dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf"
+						contexte={contexte}
+						round={false}
+					/>
+					<SimulationValue
+						dottedName="salarié . cotisations . exonérations . réduction générale . part Urssaf . part chômage"
+						label="dont chômage"
+						contexte={contexte}
+						round={false}
+					/>
+				</StyledLi>
+			</StyledUl>
+		</>
 	)
 }