feat: ajoute un avertissement lorsque la catégorie juridique de l'ent…

…reprise sélectionnée ne correspond pas au simulateur
betagouv · Dec 5, 2024 · 46370d7 · 46370d7
1 parent f7c278e
commit 46370d7
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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>
+	)
+}