mirror of
https://github.com/betagouv/mon-entreprise
synced 2025-03-11 06:25:05 +00:00
refactor(site): Crée un composant indépendant pour les résultats de recherche d'entreprise
This commit is contained in:
Alice Dahan
parent
14022318ef
commit
cf40b0192c
2 changed files with 110 additions and 104 deletions
106
site/source/components/company/EntrepriseSearchResults.tsx
Normal file
106
site/source/components/company/EntrepriseSearchResults.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { styled } from 'styled-components'
|
||||
|
||||
import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
|
||||
import { Message } from '@/design-system'
|
||||
import { Card } from '@/design-system/card'
|
||||
import { FocusStyle } from '@/design-system/global-style'
|
||||
import { ChevronIcon } from '@/design-system/icons'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { StyledLink } from '@/design-system/typography/link'
|
||||
import { Li, Ul } from '@/design-system/typography/list'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { Entreprise } from '@/domain/Entreprise'
|
||||
|
||||
import { FromTop } from '../ui/animate'
|
||||
import EntrepriseSearchDetails from './SearchDetails'
|
||||
|
||||
const StyledCard = styled(Card)`
|
||||
flex-direction: row; // for Safari <= 13
|
||||
cursor: pointer;
|
||||
&:focus-visible {
|
||||
${FocusStyle}
|
||||
}
|
||||
`
|
||||
|
||||
export default function EntrepriseSearchResults({
|
||||
results,
|
||||
onSubmit,
|
||||
}: {
|
||||
results: Array<Entreprise>
|
||||
onSubmit?: (entreprise: Entreprise) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return !results.length ? (
|
||||
<FromTop>
|
||||
<Message type="info" icon>
|
||||
<Body>
|
||||
<Strong>
|
||||
<Trans>
|
||||
Nous n’avons pas trouvé de résultat pour cette entreprise.
|
||||
</Trans>
|
||||
</Strong>
|
||||
</Body>
|
||||
<Body>
|
||||
<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.
|
||||
</Body>
|
||||
</Trans>
|
||||
</Body>
|
||||
</Message>
|
||||
</FromTop>
|
||||
) : (
|
||||
<FromTop>
|
||||
<ForceThemeProvider>
|
||||
<Ul noMarker data-test-id="company-search-results">
|
||||
{results.map((entreprise) => (
|
||||
<Li key={entreprise.siren}>
|
||||
<StyledCard
|
||||
onPress={() => onSubmit?.(entreprise)}
|
||||
onClick={() => onSubmit?.(entreprise)}
|
||||
compact
|
||||
bodyAs="div"
|
||||
aria-label={`${entreprise.nom}, Selectionner cette entreprise`}
|
||||
ctaLabel={
|
||||
<ChevronIcon
|
||||
style={{
|
||||
height: '20px',
|
||||
marginTop: '5px',
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
}
|
||||
>
|
||||
<EntrepriseSearchDetails entreprise={entreprise} />
|
||||
</StyledCard>
|
||||
</Li>
|
||||
))}
|
||||
</Ul>
|
||||
</ForceThemeProvider>
|
||||
</FromTop>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,32 +1,14 @@
|
|||
import { useSearchFieldState } from '@react-stately/searchfield'
|
||||
import { ReactNode, useEffect, useRef } from 'react'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { styled } from 'styled-components'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
|
||||
import { Message } from '@/design-system'
|
||||
import { Card } from '@/design-system/card'
|
||||
import { SearchableSelectField } from '@/design-system/field/SearchableSelectField/SearchableSelectField'
|
||||
import { FocusStyle } from '@/design-system/global-style'
|
||||
import { ChevronIcon } from '@/design-system/icons'
|
||||
import { Grid } from '@/design-system/layout'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { StyledLink } from '@/design-system/typography/link'
|
||||
import { Li, Ul } from '@/design-system/typography/list'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { Entreprise } from '@/domain/Entreprise'
|
||||
import useSearchCompany from '@/hooks/useSearchCompany'
|
||||
|
||||
import { Appear, FromTop } from '../ui/animate'
|
||||
import EntrepriseSearchDetails from './SearchDetails'
|
||||
|
||||
const StyledCard = styled(Card)`
|
||||
flex-direction: row; // for Safari <= 13
|
||||
cursor: pointer;
|
||||
&:focus-visible {
|
||||
${FocusStyle}
|
||||
}
|
||||
`
|
||||
import { Appear } from '../ui/animate'
|
||||
import EntrepriseSearchResults from './EntrepriseSearchResults'
|
||||
|
||||
export function EntrepriseSearchField(props: {
|
||||
label?: ReactNode
|
||||
|
|
@ -93,92 +75,10 @@ export function EntrepriseSearchField(props: {
|
|||
<Grid item xs={12}>
|
||||
<Appear unless={searchPending || !state.value}>
|
||||
{state.value && !searchPending && !props.selectedValue && (
|
||||
<Results results={results} onSubmit={onSubmit} />
|
||||
<EntrepriseSearchResults results={results} onSubmit={onSubmit} />
|
||||
)}
|
||||
</Appear>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
function Results({
|
||||
results,
|
||||
onSubmit,
|
||||
}: {
|
||||
results: Array<Entreprise>
|
||||
onSubmit?: (entreprise: Entreprise) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return !results.length ? (
|
||||
<FromTop>
|
||||
<Message type="info" icon>
|
||||
<Body>
|
||||
<Strong>
|
||||
<Trans>
|
||||
Nous n’avons pas trouvé de résultat pour cette entreprise.
|
||||
</Trans>
|
||||
</Strong>
|
||||
</Body>
|
||||
<Body>
|
||||
<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.
|
||||
</Body>
|
||||
</Trans>
|
||||
</Body>
|
||||
</Message>
|
||||
</FromTop>
|
||||
) : (
|
||||
<FromTop>
|
||||
<ForceThemeProvider>
|
||||
<Ul noMarker data-test-id="company-search-results">
|
||||
{results.map((entreprise) => (
|
||||
<Li key={entreprise.siren}>
|
||||
<StyledCard
|
||||
onPress={() => onSubmit?.(entreprise)}
|
||||
onClick={() => onSubmit?.(entreprise)}
|
||||
compact
|
||||
bodyAs="div"
|
||||
aria-label={`${entreprise.nom}, Selectionner cette entreprise`}
|
||||
ctaLabel={
|
||||
<ChevronIcon
|
||||
style={{
|
||||
height: '20px',
|
||||
marginTop: '5px',
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
}
|
||||
>
|
||||
<EntrepriseSearchDetails entreprise={entreprise} />
|
||||
</StyledCard>
|
||||
</Li>
|
||||
))}
|
||||
</Ul>
|
||||
</ForceThemeProvider>
|
||||
</FromTop>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue