diff --git "a/modele-social/r\303\250gles/entreprise/cat\303\251gorie-juridique.publicodes" "b/modele-social/r\303\250gles/entreprise/cat\303\251gorie-juridique.publicodes" index d83a063d45..523248760b 100644 --- "a/modele-social/r\303\250gles/entreprise/cat\303\251gorie-juridique.publicodes" +++ "b/modele-social/r\303\250gles/entreprise/cat\303\251gorie-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 diff --git a/site/source/components/Simulation/EntrepriseSelection.tsx b/site/source/components/Simulation/EntrepriseSelection.tsx new file mode 100644 index 0000000000..dd1fb210d1 --- /dev/null +++ b/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 ( + + + + + {t('Votre entreprise')} + + + + + setSearchVisible(!isSearchVisible)}> + + {companySIREN ? ( + <> + + {isSearchVisible ? : } + + ) : ( + <> + + {t('Rechercher')} + + + + )} + + + + + + {isSearchVisible && ( + + setSearchVisible(false)} /> + + )} + + ) +} + +const ShowLessIcon = () => { + const { t } = useTranslation() + + return ( + <> + + {t("Masquer les détails de l'entreprise.")} + + + + ) +} + +const ShowMoreIcon = () => { + const { t } = useTranslation() + + return ( + <> + + {t( + "Afficher les détails de l'entreprise, la modifier ou la supprimer." + )} + + + + ) +} + +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} +` diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx index 0fa9b9b4ab..4daa929ec2 100644 --- a/site/source/components/Simulation/index.tsx +++ b/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 && } @@ -78,6 +67,7 @@ export default function Simulation({ {(firstStepCompleted || showQuestionsFromBeginning) && ( <> +
{results}
@@ -86,33 +76,14 @@ export default function Simulation({ )} + + {!showQuestionsFromBeginning && !firstStepCompleted && ( )} + {afterQuestionsSlot} - {existingCompany && ( - - - Ce simulateur a été prérempli avec la situation de votre - entreprise. - {' '} - ( - - Voir ma situation - - )} - > - {(close) => } - - - )} + {firstStepCompleted && !hideDetails && ( <> diff --git "a/site/source/components/SimulationPr\303\251remplieBanner.tsx" "b/site/source/components/SimulationPr\303\251remplieBanner.tsx" new file mode 100644 index 0000000000..07f4d06bcf --- /dev/null +++ "b/site/source/components/SimulationPr\303\251remplieBanner.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 ( + + + Ce simulateur a été prérempli avec la situation de votre entreprise. + {' '} + ( + + + Voir ma situation + + + )} + > + {(close) => } + + + + + + ) +} + +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}. + + + ) +} diff --git a/site/source/components/conversation/EntrepriseInput.tsx b/site/source/components/conversation/EntrepriseInput.tsx index bb6e47a74e..a272f4684a 100644 --- a/site/source/components/conversation/EntrepriseInput.tsx +++ b/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()) diff --git a/site/source/design-system/icons/index.stories.tsx b/site/source/design-system/icons/index.stories.tsx index 0ef8d8a590..059da693a1 100644 --- a/site/source/design-system/icons/index.stories.tsx +++ b/site/source/design-system/icons/index.stories.tsx @@ -12,6 +12,7 @@ export default meta export { ArrowRightIcon, CarretDownIcon, + CarretUpIcon, CheckmarkIcon, ChevronIcon, CircledArrowIcon, diff --git a/site/source/design-system/icons/index.tsx b/site/source/design-system/icons/index.tsx index 32a09159c2..bec9731bc0 100644 --- a/site/source/design-system/icons/index.tsx +++ b/site/source/design-system/icons/index.tsx @@ -92,6 +92,22 @@ export const CarretDownIcon = (props: HTMLAttributes) => ( ) +export const CarretUpIcon = (props: HTMLAttributes) => ( + + + +) + export function SearchIcon({ ...props }) { return (