From f94623f98bc1f029279c9142d2437928db76e860 Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Tue, 3 Dec 2024 16:17:43 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20ajoute=20un=20avertissement=20lorsque?=
 =?UTF-8?q?=20la=20cat=C3=A9gorie=20juridique=20de=20l'entreprise=20s?=
 =?UTF-8?q?=C3=A9lectionn=C3=A9e=20ne=20correspond=20pas=20au=20simulateur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Simulation/EntrepriseSelection.tsx        |  2 +
 .../components/SimulationPréremplieBanner.tsx | 54 ++++++-------------
 .../components/WrongSimulateurWarning.tsx     | 42 +++++++++++++++
 3 files changed, 60 insertions(+), 38 deletions(-)
 create mode 100644 site/source/components/WrongSimulateurWarning.tsx

diff --git a/site/source/components/Simulation/EntrepriseSelection.tsx b/site/source/components/Simulation/EntrepriseSelection.tsx
index e57e328e7..dd1fb210d 100644
--- a/site/source/components/Simulation/EntrepriseSelection.tsx
+++ b/site/source/components/Simulation/EntrepriseSelection.tsx
@@ -10,6 +10,7 @@ import EntrepriseInput from '../conversation/EntrepriseInput'
 import Value from '../EngineValue/Value'
 import { Appear } from '../ui/animate'
 import { useEngine } from '../utils/EngineContext'
+import WrongSimulateurWarning from '../WrongSimulateurWarning'
 import LectureGuide from './LectureGuide'
 
 export default function EntrepriseSelection() {
@@ -57,6 +58,7 @@ export default function EntrepriseSelection() {
 						</ValueBody>
 					</Grid>
 				</Grid>
+				<WrongSimulateurWarning />
 			</EntrepriseRecap>
 			{isSearchVisible && (
 				<Appear>
diff --git a/site/source/components/SimulationPréremplieBanner.tsx b/site/source/components/SimulationPréremplieBanner.tsx
index 3ed89b558..07f4d06bc 100644
--- a/site/source/components/SimulationPréremplieBanner.tsx
+++ b/site/source/components/SimulationPréremplieBanner.tsx
@@ -1,31 +1,19 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import { styled } from 'styled-components'
 
-import { Message, PopoverWithTrigger } from '@/design-system'
-import { Spacing } from '@/design-system/layout'
-import { Strong } from '@/design-system/typography'
+import { PopoverWithTrigger } from '@/design-system'
 import { Link } from '@/design-system/typography/link'
-import { SmallBody } from '@/design-system/typography/paragraphs'
-import { useCurrentSimulatorData } from '@/hooks/useCurrentSimulatorData'
-import { PageConfig } from '@/pages/simulateurs/_configs/types'
 import { companySituationSelector } from '@/store/selectors/simulationSelectors'
 
 import Banner from './Banner'
 import AnswerList from './conversation/AnswerList'
+import WrongSimulateurWarning from './WrongSimulateurWarning'
 
 export default function SimulationPréremplieBanner() {
-	const company = useSelector(companySituationSelector)
-	const existingCompany = !!company['entreprise . SIREN']
-
-	const simulatorData = useCurrentSimulatorData().currentSimulatorData as
-		| PageConfig
-		| undefined
-	const isWrongSimulateur =
-		simulatorData &&
-		simulatorData.codesCatégorieJuridique?.length &&
-		simulatorData.codesCatégorieJuridique.indexOf(
-			company['entreprise . code catégorie juridique'] as string
-		) < 0
+	const existingCompany = !!useSelector(companySituationSelector)[
+		'entreprise . SIREN'
+	]
 
 	const { t } = useTranslation()
 
@@ -48,31 +36,21 @@ export default function SimulationPréremplieBanner() {
 							'Voir ma situation, accéder à la page de gestion de mon entreprise'
 						)}
 					>
-						<Trans i18nKey="simulationPréremplieBanner.button">Voir ma situation</Trans>
+						<Trans i18nKey="simulationPréremplieBanner.button">
+							Voir ma situation
+						</Trans>
 					</Link>
 				)}
 			>
 				{(close) => <AnswerList onClose={close} />}
 			</PopoverWithTrigger>
-			{isWrongSimulateur && (
-				<>
-					<Spacing xxs />
-					<Message type="error">
-						<SmallBody>
-							<Trans i18nKey="simulationPréremplieBanner.warning.1">
-								Votre catégorie juridique est
-							</Trans>{' '}
-							<Strong>
-								{company['entreprise . catégorie juridique'] as string}
-							</Strong>{' '}
-							<Trans i18nKey="simulationPréremplieBanner.warning.2">
-								mais vous êtes sur le simulateur pour{' '}
-							</Trans>
-								<Strong>{simulatorData.shortName}</Strong>.
-						</SmallBody>
-					</Message>
-				</>
-			)}
+			<WrongSimulateurWarningContainer>
+				<WrongSimulateurWarning />
+			</WrongSimulateurWarningContainer>
 		</Banner>
 	)
 }
+
+const WrongSimulateurWarningContainer = styled.div`
+	margin-top: ${({ theme }) => theme.spacings.xs};
+`
diff --git a/site/source/components/WrongSimulateurWarning.tsx b/site/source/components/WrongSimulateurWarning.tsx
new file mode 100644
index 000000000..95e857d67
--- /dev/null
+++ b/site/source/components/WrongSimulateurWarning.tsx
@@ -0,0 +1,42 @@
+import { Trans } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
+import { Message } from '@/design-system'
+import { Strong } from '@/design-system/typography'
+import { SmallBody } from '@/design-system/typography/paragraphs'
+import { useCurrentSimulatorData } from '@/hooks/useCurrentSimulatorData'
+import { PageConfig } from '@/pages/simulateurs/_configs/types'
+import { companySituationSelector } from '@/store/selectors/simulationSelectors'
+
+export default function WrongSimulateurWarning() {
+	const company = useSelector(companySituationSelector)
+
+	const simulatorData = useCurrentSimulatorData().currentSimulatorData as
+		| PageConfig
+		| undefined
+	const isWrongSimulateur =
+		simulatorData &&
+		simulatorData.codesCatégorieJuridique?.length &&
+		simulatorData.codesCatégorieJuridique.indexOf(
+			company['entreprise . code catégorie juridique'] as string
+		) < 0
+
+	if (!Object.keys(company).length || !isWrongSimulateur) {
+		return null
+	}
+
+	return (
+		<Message type="error">
+			<SmallBody>
+				<Trans i18nKey="simulationPréremplieBanner.warning.1">
+					Votre catégorie juridique est
+				</Trans>{' '}
+				<Strong>{company['entreprise . catégorie juridique'] as string}</Strong>{' '}
+				<Trans i18nKey="simulationPréremplieBanner.warning.2">
+					mais vous êtes sur le simulateur pour{' '}
+				</Trans>
+				<Strong>{simulatorData.shortName}</Strong>.
+			</SmallBody>
+		</Message>
+	)
+}