feat: ajout d'un bloc sélection d'entreprise à tous les simulateurs
Alice Dahan
parent
9cdd44a5e6
commit
87e7c66036
|
|
@ -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 (
|
||||
<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>
|
||||
</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}
|
||||
`
|
||||
|
|
@ -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({
|
|||
<FromTop>
|
||||
{(firstStepCompleted || showQuestionsFromBeginning) && (
|
||||
<>
|
||||
<EntrepriseSelection />
|
||||
<div className="print-hidden">
|
||||
<FromTop>{results}</FromTop>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue