diff --git a/site/source/components/Simulation/EntrepriseSelection.tsx b/site/source/components/Simulation/EntrepriseSelection.tsx index e57e328e74..dd1fb210d1 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() { + {isSearchVisible && ( diff --git "a/site/source/components/SimulationPr\303\251remplieBanner.tsx" "b/site/source/components/SimulationPr\303\251remplieBanner.tsx" index 3ed89b5589..07f4d06bcf 100644 --- "a/site/source/components/SimulationPr\303\251remplieBanner.tsx" +++ "b/site/source/components/SimulationPr\303\251remplieBanner.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' )} > - Voir ma situation + + Voir ma situation + )} > {(close) => } - {isWrongSimulateur && ( - <> - - - - - Votre catégorie juridique est - {' '} - - {company['entreprise . catégorie juridique'] as string} - {' '} - - mais vous êtes sur le simulateur pour{' '} - - {simulatorData.shortName}. - - - - )} + + + ) } + +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 0000000000..95e857d671 --- /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 ( + + + + Votre catégorie juridique est + {' '} + {company['entreprise . catégorie juridique'] as string}{' '} + + mais vous êtes sur le simulateur pour{' '} + + {simulatorData.shortName}. + + + ) +}