Améliore la section recherche sur Landing (#2472)
* feat: Améliore intitulés recherche * feat: Modifie le bloc aucune entreprise * feat: Améliore le message * feat: Petite amélioration UX * fix: aria-labelpull/2477/head
Benjamin Arias
GitHub
parent
573b8bd2b9
commit
dfcfabf214
|
|
@ -1,15 +1,17 @@
|
|||
import { useSearchFieldState } from '@react-stately/searchfield'
|
||||
import { ReactNode, useEffect, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
|
||||
import { ForceThemeProvider, ThemeType } from '@/contexts/DarkModeContext'
|
||||
import { Message } from '@/design-system'
|
||||
import { Card } from '@/design-system/card'
|
||||
import { Emoji } from '@/design-system/emoji'
|
||||
import { SearchField } from '@/design-system/field'
|
||||
import { Grid } from '@/design-system/layout'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { StyledLink } from '@/design-system/typography/link'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import useSearchCompany from '@/hooks/useSearchCompany'
|
||||
|
||||
|
|
@ -91,15 +93,47 @@ function Results({
|
|||
results: Array<FabriqueSocialEntreprise>
|
||||
onSubmit?: (établissement: FabriqueSocialEntreprise) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return !results.length ? (
|
||||
<FromTop>
|
||||
<Message type="info" icon>
|
||||
<Body>
|
||||
<Strong>Aucune entreprise correspondante trouvée</Strong>
|
||||
<Strong>
|
||||
<Trans>
|
||||
Nous n’avons pas trouvé de résultat pour cette entreprise.
|
||||
</Trans>
|
||||
</Strong>
|
||||
</Body>
|
||||
<Body>
|
||||
Vous pouvez réessayer avec votre SIREN ou votre SIRET pour un meilleur
|
||||
résultat
|
||||
<Trans>
|
||||
Vous pouvez réessayer avec votre SIREN ou votre SIRET pour un
|
||||
meilleur résultat.
|
||||
</Trans>
|
||||
</Body>
|
||||
<Body>
|
||||
<Trans>
|
||||
Si votre entreprise n'apparait pas en utilisant votre SIREN/SIRET,
|
||||
il se peut que vous ayez opté pour que{' '}
|
||||
<Strong>
|
||||
les informations de votre entreprise ne soient pas rendues
|
||||
publiques
|
||||
</Strong>
|
||||
, auquel cas elle n'apparaitra pas dans les résultats de recherche.
|
||||
Vous pouvez le vérifier sur{' '}
|
||||
<StyledLink
|
||||
aria-label={t("l'annuaire des entreprises, nouvelle fenêtre")}
|
||||
href="https://annuaire-entreprises.data.gouv.fr/"
|
||||
>
|
||||
l'annuaire des entreprises
|
||||
</StyledLink>
|
||||
.
|
||||
<Body>
|
||||
Si tel est le cas, pas d'inquiétude, vous pouvez tout de même
|
||||
consulter et utiliser nos simulateurs ci-dessous.{' '}
|
||||
<Emoji emoji="👇" />
|
||||
</Body>
|
||||
</Trans>
|
||||
</Body>
|
||||
</Message>
|
||||
</FromTop>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { Emoji } from '@/design-system/emoji'
|
|||
import { Grid, Spacing } from '@/design-system/layout'
|
||||
import PopoverConfirm from '@/design-system/popover/PopoverConfirm'
|
||||
import { H3 } from '@/design-system/typography/heading'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { useSetEntreprise } from '@/hooks/useSetEntreprise'
|
||||
import { RootState } from '@/reducers/rootReducer'
|
||||
import { useSitePaths } from '@/sitePaths'
|
||||
|
|
@ -79,30 +80,50 @@ export default function SearchOrCreate() {
|
|||
<H3 as="h2">
|
||||
<Trans>Rechercher votre entreprise</Trans>{' '}
|
||||
</H3>
|
||||
<Body>
|
||||
Pour accéder à nos simulateurs les plus pertinents pour votre
|
||||
activité
|
||||
</Body>
|
||||
<CompanySearchField
|
||||
onSubmit={handleCompanySubmit}
|
||||
forceTheme="dark"
|
||||
/>
|
||||
<Spacing md />
|
||||
|
||||
<Button
|
||||
size="XL"
|
||||
role="link"
|
||||
to={
|
||||
statutChoisi
|
||||
? absoluteSitePaths.créer[statutChoisi]
|
||||
: absoluteSitePaths.créer.index
|
||||
}
|
||||
aria-label={t(
|
||||
'landing.choice.create.aria-label',
|
||||
"Je n'ai pas encore d'entreprise, accéder au guide de création d'entreprise."
|
||||
)}
|
||||
>
|
||||
<Emoji emoji="💡" />{' '}
|
||||
<Trans i18nKey="landing.choice.create.title">
|
||||
Je n'ai pas encore d'entreprise
|
||||
</Trans>
|
||||
</Button>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item>
|
||||
<Button
|
||||
size="XL"
|
||||
role="link"
|
||||
to={
|
||||
statutChoisi
|
||||
? absoluteSitePaths.créer[statutChoisi]
|
||||
: absoluteSitePaths.créer.index
|
||||
}
|
||||
aria-label={t(
|
||||
'landing.choice.create.aria-label',
|
||||
"J'aimerais créer mon entreprise, accéder au guide de création d'entreprise."
|
||||
)}
|
||||
>
|
||||
<Emoji emoji="💡" />{' '}
|
||||
<Trans i18nKey="landing.choice.create.title">
|
||||
J'aimerais créer mon entreprise
|
||||
</Trans>
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
size="XL"
|
||||
role="link"
|
||||
light
|
||||
to={absoluteSitePaths.simulateurs.index}
|
||||
color="secondary"
|
||||
>
|
||||
<Trans i18nKey="landing.choice.create.title">
|
||||
Consulter la liste de nos simulateurs
|
||||
</Trans>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Reference in New Issue