diff --git a/site/source/components/Simulation/EntrepriseSelection.tsx b/site/source/components/Simulation/EntrepriseSelection.tsx new file mode 100644 index 000000000..e57e328e7 --- /dev/null +++ b/site/source/components/Simulation/EntrepriseSelection.tsx @@ -0,0 +1,145 @@ +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 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 0fa9b9b4a..d2678263d 100644 --- a/site/source/components/Simulation/index.tsx +++ b/site/source/components/Simulation/index.tsx @@ -21,6 +21,7 @@ import { Feedback, getShouldAskFeedback } from '../Feedback/Feedback' import PrintExportRecover from '../simulationExplanation/PrintExportRecover' import PreviousSimulationBanner from './../PreviousSimulationBanner' import { FromTop } from './../ui/animate' +import EntrepriseSelection from './EntrepriseSelection' import { Questions } from './Questions' export { Questions } from './Questions' @@ -78,6 +79,7 @@ export default function Simulation({ {(firstStepCompleted || showQuestionsFromBeginning) && ( <> +
{results}
diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index 19b039c9c..16a861038 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -41,6 +41,7 @@ Activités relevant de l’économie collaborative, voir la page: Collaborative Adoption: Adoption Afficher le détail: Show details "Afficher les données par :": "Display data by:" +Afficher les détails de l'entreprise, la modifier ou la supprimer.: View company details, modify or delete. Aller au contenu principal: Go to main content Aller directement au pied de page: Go directly to footer Annuler: Cancel @@ -181,6 +182,7 @@ Les formalités de création d'une entreprise diffèrent selon les statuts et la Lire les précisions, ouvrir le message condensé.: Read the details, open the condensed message. Liste des intégrations: List of integrations Ma situation: My situation +Masquer les détails de l'entreprise.: Hide company details. Maternité: Maternity ward Menu de navigation: Navigation menu Message à caractère informatif: Informative message @@ -254,6 +256,7 @@ Recherche sur le site: Site search Rechercher: Search Rechercher un simulateur ou une règle: Search for a simulator or a rule Rechercher une règle dans la documentation: Search for a rule in the documentation +Rechercher, afficher le champ de recherche d'entreprise.: Search, display the company search field. Rechercher, ouvrir la boite de dialogue pour entrer vos termes de recherche.: Search, open the dialog box to enter your search terms. Remboursements et déductions diverses: Reimbursements and miscellaneous deductions Renseigner une adresse e-mail (au format nom@domaine: diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index eccf23bd7..48d4de99f 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -44,6 +44,7 @@ Activités relevant de l’économie collaborative, voir la page: Activités rel Adoption: Adoption Afficher le détail: Afficher le détail "Afficher les données par :": "Afficher les données par :" +Afficher les détails de l'entreprise, la modifier ou la supprimer.: Afficher les détails de l'entreprise, la modifier ou la supprimer. Aller au contenu principal: Aller au contenu principal Aller directement au pied de page: Aller directement au pied de page Annuler: Annuler @@ -192,6 +193,7 @@ Les formalités de création d'une entreprise diffèrent selon les statuts et la Lire les précisions, ouvrir le message condensé.: Lire les précisions, ouvrir le message condensé. Liste des intégrations: Liste des intégrations Ma situation: Ma situation +Masquer les détails de l'entreprise.: Masquer les détails de l'entreprise. Maternité: Maternité Menu de navigation: Menu de navigation Message à caractère informatif: Message à caractère informatif @@ -268,6 +270,7 @@ Recherche sur le site: Recherche sur le site Rechercher: Rechercher Rechercher un simulateur ou une règle: Rechercher un simulateur ou une règle Rechercher une règle dans la documentation: Rechercher une règle dans la documentation +Rechercher, afficher le champ de recherche d'entreprise.: Rechercher, afficher le champ de recherche d'entreprise. Rechercher, ouvrir la boite de dialogue pour entrer vos termes de recherche.: Rechercher, ouvrir la boite de dialogue pour entrer vos termes de recherche. Remboursements et déductions diverses: Remboursements et déductions diverses Renseigner une adresse e-mail (au format nom@domaine: