feat(simulateurs): Ajoute la sélection de son entreprise en première étape des simulateurs [alt alt version]

modele-social/règles/entreprise/catégorie-juridique.publicodes

@@ -21,6 +21,11 @@ entreprise . associés:
 ### ()	La nomenclature des catégories juridiques retenue est celle du niveau III du répertoire Sirene géré par l'Insee ###
 ### https://www.insee.fr/fr/information/2028129
 
+entreprise . code catégorie juridique:
+  description: Code représentant la catégorie juridique de l'entreprise, tel que défini par l'INSEE.
+  références:
+    Liste des catégories juridique de l'INSEE: https://www.insee.fr/fr/information/2028129
+
 entreprise . catégorie juridique:
   question: Quelle est la catégorie juridique de l'entreprise ?
   note: On se base ici sur les catégories juridiques définies par l'INSEE

site/source/components/Simulation/EntrepriseSelection.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { css, styled } from 'styled-components'
+
+import { CarretDownIcon, CarretUpIcon, SearchIcon } from '@/design-system/icons'
+import { Grid } from '@/design-system/layout'
+import { Body } from '@/design-system/typography/paragraphs'
+
+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() {
+	const { t } = useTranslation()
+	const companySIREN = useEngine().evaluate('entreprise . SIREN').nodeValue
+	const [isSearchVisible, setSearchVisible] = useState(false)
+
+	return (
+		<Container>
+			<EntrepriseRecap>
+				<Grid
+					container
+					style={{
+						alignItems: 'baseline',
+						justifyContent: 'space-between',
+					}}
+					spacing={2}
+				>
+					<Grid item>
+						<TitleBody>{t('Votre entreprise')}</TitleBody>
+					</Grid>
+
+					<LectureGuide />
+
+					<Grid item onClick={() => setSearchVisible(!isSearchVisible)}>
+						<ValueBody>
+							{companySIREN ? (
+								<>
+									<Value expression="entreprise . nom" linkToRule={false} />
+									{isSearchVisible ? <ShowLessIcon /> : <ShowMoreIcon />}
+								</>
+							) : (
+								<>
+									<span
+										role="button"
+										aria-label={t(
+											"Rechercher, afficher le champ de recherche d'entreprise."
+										)}
+									>
+										{t('Rechercher')}
+									</span>
+									<SearchIcon aria-hidden />
+								</>
+							)}
+						</ValueBody>
+					</Grid>
+				</Grid>
+				<WrongSimulateurWarning />
+			</EntrepriseRecap>
+			{isSearchVisible && (
+				<Appear>
+					<EntrepriseInput onSubmit={() => setSearchVisible(false)} />
+				</Appear>
+			)}
+		</Container>
+	)
+}
+
+const ShowLessIcon = () => {
+	const { t } = useTranslation()
+
+	return (
+		<>
+			<span className="sr-only">
+				{t("Masquer les détails de l'entreprise.")}
+			</span>
+			<StyledCarretUpIcon />
+		</>
+	)
+}
+
+const ShowMoreIcon = () => {
+	const { t } = useTranslation()
+
+	return (
+		<>
+			<span className="sr-only">
+				{t(
+					"Afficher les détails de l'entreprise, la modifier ou la supprimer."
+				)}
+			</span>
+			<StyledCarretDownIcon />
+		</>
+	)
+}
+
+const Container = styled.div`
+	z-index: 2;
+	position: relative;
+	padding: ${({ theme }) => `${theme.spacings.sm} ${theme.spacings.lg}`};
+	background-color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.dark[500]
+			: theme.colors.bases.primary[100]};
+
+	@media print {
+		background: initial;
+		padding: 0;
+	}
+`
+
+const EntrepriseRecap = styled.div`
+	position: relative;
+	z-index: 1;
+`
+
+const TitleBody = styled(Body)`
+	color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.grey[100]
+			: theme.colors.bases.primary[800]};
+	font-weight: bold;
+`
+
+const ValueBody = styled(Body)`
+	cursor: pointer;
+	color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.grey[100]
+			: theme.colors.bases.primary[800]};
+	display: flex;
+	align-items: center;
+	gap: ${({ theme }) => theme.spacings.xs};
+`
+
+const IconStyle = css`
+	margin-bottom: ${({ theme }) => theme.spacings.xxxs};
+`
+const StyledCarretDownIcon = styled(CarretDownIcon)`
+	${IconStyle}
+`
+const StyledCarretUpIcon = styled(CarretUpIcon)`
+	${IconStyle}
+`

site/source/components/Simulation/index.tsx

@@ -1,26 +1,20 @@
 import React from 'react'
-import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
 import { styled } from 'styled-components'
 
 import { ConversationProps } from '@/components/conversation/Conversation'
 import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
-import { PopoverWithTrigger } from '@/design-system'
 import { Grid, Spacing } from '@/design-system/layout'
-import { Link } from '@/design-system/typography/link'
-import {
-	companySituationSelector,
-	firstStepCompletedSelector,
-} from '@/store/selectors/simulationSelectors'
+import { firstStepCompletedSelector } from '@/store/selectors/simulationSelectors'
 
 import { TrackPage } from '../ATInternetTracking'
-import Banner from '../Banner'
-import AnswerList from '../conversation/AnswerList'
 import { Feedback, getShouldAskFeedback } from '../Feedback/Feedback'
 import PrintExportRecover from '../simulationExplanation/PrintExportRecover'
+import SimulationPréremplieBanner from '../SimulationPréremplieBanner'
 import PreviousSimulationBanner from './../PreviousSimulationBanner'
 import { FromTop } from './../ui/animate'
+import EntrepriseSelection from './EntrepriseSelection'
 import { Questions } from './Questions'
 
 export { Questions } from './Questions'
@@ -61,13 +55,8 @@ export default function Simulation({
 	id,
 }: SimulationProps) {
 	const firstStepCompleted = useSelector(firstStepCompletedSelector)
-	const existingCompany = !!useSelector(companySituationSelector)[
-		'entreprise . SIREN'
-	]
 	const shouldShowFeedback = getShouldAskFeedback(useLocation().pathname)
 
-	const { t } = useTranslation()
-
 	return (
 		<>
 			{!firstStepCompleted && <TrackPage name="accueil" />}
@@ -78,6 +67,7 @@ export default function Simulation({
 				<FromTop>
 					{(firstStepCompleted || showQuestionsFromBeginning) && (
 						<>
+							<EntrepriseSelection />
 							<div className="print-hidden">
 								<FromTop>{results}</FromTop>
 							</div>
@@ -86,33 +76,14 @@ export default function Simulation({
 					)}
 					<Spacing md />
 
+					<SimulationPréremplieBanner />
+
 					{!showQuestionsFromBeginning && !firstStepCompleted && (
 						<PreviousSimulationBanner />
 					)}
+
 					{afterQuestionsSlot}
-					{existingCompany && (
-						<Banner icon="✏">
-							<Trans>
-								Ce simulateur a été prérempli avec la situation de votre
-								entreprise.
-							</Trans>{' '}
-							<PopoverWithTrigger
-								trigger={(buttonProps) => (
-									<Link
-										{...buttonProps}
-										aria-haspopup="dialog"
-										aria-label={t(
-											'Voir ma situation, accéder à la page de gestion de mon entreprise'
-										)}
-									>
-										<Trans>Voir ma situation</Trans>
-									</Link>
-								)}
-							>
-								{(close) => <AnswerList onClose={close} />}
-							</PopoverWithTrigger>
-						</Banner>
-					)}
+
 					{firstStepCompleted && !hideDetails && (
 						<>
 							<ShareOrSaveSimulationBanner share print conseillersEntreprises />

site/source/components/SimulationPréremplieBanner.tsx

@@ -0,0 +1,56 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { styled } from 'styled-components'
+
+import { PopoverWithTrigger } from '@/design-system'
+import { Link } from '@/design-system/typography/link'
+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 existingCompany = !!useSelector(companySituationSelector)[
+		'entreprise . SIREN'
+	]
+
+	const { t } = useTranslation()
+
+	if (!existingCompany) {
+		return null
+	}
+
+	return (
+		<Banner icon="✏">
+			<Trans i18nKey="simulationPréremplieBanner.info">
+				Ce simulateur a été prérempli avec la situation de votre entreprise.
+			</Trans>{' '}
+			<PopoverWithTrigger
+				trigger={(buttonProps) => (
+					<Link
+						{...buttonProps}
+						aria-haspopup="dialog"
+						aria-label={t(
+							'simulationPréremplieBanner.aria-label',
+							'Voir ma situation, accéder à la page de gestion de mon entreprise'
+						)}
+					>
+						<Trans i18nKey="simulationPréremplieBanner.button">
+							Voir ma situation
+						</Trans>
+					</Link>
+				)}
+			>
+				{(close) => <AnswerList onClose={close} />}
+			</PopoverWithTrigger>
+			<WrongSimulateurWarningContainer>
+				<WrongSimulateurWarning />
+			</WrongSimulateurWarningContainer>
+		</Banner>
+	)
+}
+
+const WrongSimulateurWarningContainer = styled.div`
+	margin-top: ${({ theme }) => theme.spacings.xs};
+`

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>
+	)
+}

site/source/components/conversation/EntrepriseInput.tsx

@@ -12,13 +12,18 @@ import { resetCompany } from '@/store/actions/companyActions'
 
 import SelectedEntrepriseDetails from '../entreprise/SelectedEntrepriseDetails'
 
-export default function EntrepriseInput() {
+type Props = {
+	onSubmit?: (établissement: Entreprise | null) => void
+}
+
+export default function EntrepriseInput({ onSubmit }: Props) {
 	const companySIREN = useEngine().evaluate('entreprise . SIREN').nodeValue
 	useSetEntrepriseFromUrssafConnection()
 	const setEntreprise = useSetEntreprise()
 	const dispatch = useDispatch()
 	const handleCompanySubmit = (établissement: Entreprise | null) => {
 		setEntreprise(établissement)
+		onSubmit?.(établissement)
 	}
 	const handleCompanyClear = () => {
 		dispatch(resetCompany())

site/source/design-system/icons/index.stories.tsx

@@ -12,6 +12,7 @@ export default meta
 export {
 	ArrowRightIcon,
 	CarretDownIcon,
+	CarretUpIcon,
 	CheckmarkIcon,
 	ChevronIcon,
 	CircledArrowIcon,