refactor(site): Crée un composant indépendant pour les résultats de r…

…echerche d'entreprise
betagouv · Oct 28, 2024 · 3f27902 · 3f27902
1 parent 7641976
commit 3f27902
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 104 deletions.
diff --git a/site/source/components/conversation/EntrepriseInput.tsx b/site/source/components/conversation/EntrepriseInput.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { EntrepriseSearchField } from '@/components/company/SearchField'
+import { EntrepriseSearchField } from '@/components/entreprise/EntrepriseSearchField'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Spacing } from '@/design-system/layout'
 import { Entreprise } from '@/domaine/Entreprise'
@@ -10,7 +10,7 @@ import { useSetEntreprise } from '@/hooks/useSetEntreprise'
 import { getCookieValue } from '@/storage/readCookie'
 import { resetCompany } from '@/store/actions/companyActions'
 
-import SelectedEntrepriseDetails from '../company/SelectedEntrepriseDetails'
+import SelectedEntrepriseDetails from '../entreprise/SelectedEntrepriseDetails'
 
 export default function EntrepriseInput() {
 	const companySIREN = useEngine().evaluate('entreprise . SIREN').nodeValue

diff --git a/site/source/components/company/Details.tsx → ...mponents/entreprise/EntrepriseDetails.tsx b/site/source/components/company/Details.tsx → ...mponents/entreprise/EntrepriseDetails.tsx
@@ -19,7 +19,7 @@ const StyledH4 = styled(H4)`
 	}
 `
 
-export function CompanyDetails({
+export function EntrepriseDetails({
 	showSituation = false,
 	headingTag = 'h3',
 }: {

diff --git a/...urce/components/company/SearchDetails.tsx → ...ts/entreprise/EntrepriseSearchDetails.tsx b/...urce/components/company/SearchDetails.tsx → ...ts/entreprise/EntrepriseSearchDetails.tsx
diff --git a/site/source/components/entreprise/EntrepriseSearchField.tsx b/site/source/components/entreprise/EntrepriseSearchField.tsx
@@ -0,0 +1,84 @@
+import { useSearchFieldState } from '@react-stately/searchfield'
+import { ReactNode, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { SearchableSelectField } from '@/design-system/field/SearchableSelectField/SearchableSelectField'
+import { Grid } from '@/design-system/layout'
+import { Entreprise } from '@/domaine/Entreprise'
+import useSearchCompany from '@/hooks/useSearchCompany'
+
+import { Appear } from '../ui/animate'
+import EntrepriseSearchResults from './EntrepriseSearchResults'
+
+export function EntrepriseSearchField(props: {
+	label?: ReactNode
+	selectedValue?: ReactNode | null
+	onValue?: () => void
+	onClear?: () => void
+	onSubmit?: (search: Entreprise | null) => void
+}) {
+	const { t } = useTranslation()
+	const refResults = useRef<Entreprise[] | null>(null)
+
+	const searchFieldProps = {
+		...props,
+		label:
+			!props.selectedValue &&
+			t('EntrepriseSearchField.label', "Nom de l'entreprise, SIREN ou SIRET"),
+		description:
+			!props.selectedValue &&
+			t(
+				'EntrepriseSearchField.description',
+				'Le numéro Siret est un numéro de 14 chiffres unique pour chaque entreprise. Exemple : 40123778000127'
+			),
+		onSubmit() {
+			const results = refResults.current
+			props.onSubmit?.(results?.[0] ?? null)
+		},
+		onClear() {
+			props.onClear?.()
+		},
+		placeholder: t(
+			'EntrepriseSearchField.placeholder',
+			'Exemple : Café de la gare ou 40123778000127'
+		),
+	}
+
+	const state = useSearchFieldState(searchFieldProps)
+
+	const { onSubmit } = props
+
+	const [searchPending, results] = useSearchCompany(state.value)
+
+	useEffect(() => {
+		refResults.current = results ?? null
+	}, [results])
+
+	return (
+		<Grid container>
+			<Grid item xs={12}>
+				<SearchableSelectField
+					data-test-id="company-search-input"
+					state={state}
+					isSearchStalled={searchPending}
+					aria-label={
+						searchFieldProps.label +
+						', ' +
+						t(
+							"recherche lancée automatiquement après l'entrée de caractères, les résultats s'afficheront à la suite de cet élément."
+						)
+					}
+					{...searchFieldProps}
+				/>
+			</Grid>
+
+			<Grid item xs={12}>
+				<Appear unless={searchPending || !state.value}>
+					{state.value && !searchPending && !props.selectedValue && (
+						<EntrepriseSearchResults results={results} onSubmit={onSubmit} />
+					)}
+				</Appear>
+			</Grid>
+		</Grid>
+	)
+}
diff --git a/...source/components/company/SearchField.tsx → ...ts/entreprise/EntrepriseSearchResults.tsx b/...source/components/company/SearchField.tsx → ...ts/entreprise/EntrepriseSearchResults.tsx
@@ -1,24 +1,19 @@
-import { useSearchFieldState } from '@react-stately/searchfield'
-import { ReactNode, useEffect, useRef } from 'react'
 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 { 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 '@/domaine/Entreprise'
-import useSearchCompany from '@/hooks/useSearchCompany'
 
-import { Appear, FromTop } from '../ui/animate'
-import EntrepriseSearchDetails from './SearchDetails'
+import { FromTop } from '../ui/animate'
+import EntrepriseSearchDetails from './EntrepriseSearchDetails'
 
 const StyledCard = styled(Card)`
 	flex-direction: row; // for Safari <= 13
@@ -28,80 +23,7 @@ const StyledCard = styled(Card)`
 	}
 `
 
-export function EntrepriseSearchField(props: {
-	label?: ReactNode
-	selectedValue?: ReactNode | null
-	onValue?: () => void
-	onClear?: () => void
-	onSubmit?: (search: Entreprise | null) => void
-}) {
-	const { t } = useTranslation()
-	const refResults = useRef<Entreprise[] | null>(null)
-
-	const searchFieldProps = {
-		...props,
-		label:
-			!props.selectedValue &&
-			t('CompanySearchField.label', "Nom de l'entreprise, SIREN ou SIRET"),
-		description:
-			!props.selectedValue &&
-			t(
-				'CompanySearchField.description',
-				'Le numéro Siret est un numéro de 14 chiffres unique pour chaque entreprise. Exemple : 40123778000127'
-			),
-		onSubmit() {
-			const results = refResults.current
-			props.onSubmit?.(results?.[0] ?? null)
-		},
-		onClear() {
-			props.onClear?.()
-		},
-		placeholder: t(
-			'CompanySearchField.placeholder',
-			'Exemple : Café de la gare ou 40123778000127'
-		),
-	}
-
-	const state = useSearchFieldState(searchFieldProps)
-
-	const { onSubmit } = props
-
-	const [searchPending, results] = useSearchCompany(state.value)
-
-	useEffect(() => {
-		refResults.current = results ?? null
-	}, [results])
-
-	return (
-		<Grid container>
-			<Grid item xs={12}>
-				<SearchableSelectField
-					data-test-id="company-search-input"
-					state={state}
-					isSearchStalled={searchPending}
-					aria-label={
-						searchFieldProps.label +
-						', ' +
-						t(
-							"recherche lancée automatiquement après l'entrée de caractères, les résultats s'afficheront à la suite de cet élément."
-						)
-					}
-					{...searchFieldProps}
-				/>
-			</Grid>
-
-			<Grid item xs={12}>
-				<Appear unless={searchPending || !state.value}>
-					{state.value && !searchPending && !props.selectedValue && (
-						<Results results={results} onSubmit={onSubmit} />
-					)}
-				</Appear>
-			</Grid>
-		</Grid>
-	)
-}
-
-function Results({
+export default function EntrepriseSearchResults({
 	results,
 	onSubmit,
 }: {

diff --git a/...nts/company/SelectedEntrepriseDetails.tsx → .../entreprise/SelectedEntrepriseDetails.tsx b/...nts/company/SelectedEntrepriseDetails.tsx → .../entreprise/SelectedEntrepriseDetails.tsx
diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml
@@ -72,11 +72,6 @@ Comment ça marche ? Voir la page explicative sur la page du dépôt github, nou
   How does it work? See the explanatory page on the github repository page, new
   window
 Commune ou code postal: Town or zip code
-CompanySearchField:
-  description: "The Siret number is a 14-digit number unique to each company.
-    Example: 40123778000127"
-  label: Company name, SIREN or SIRET
-  placeholder: "Example: Café de la gare or 40123778000127"
 Comparer...: Compare...
 Confirmer: Confirm
 Cotisations: Contributions
@@ -117,6 +112,11 @@ English version of the website enabled.: English version of the website enabled.
 Enregistrer et continuer: Save and continue
 Enregistrer et voir le résultat: Save and view results
 Entreprise créée le <2><0></0></2> et domiciliée à <6><0></0></6>: Company founded on <2><0></0></2> and domiciled at <6><0></0></6>
+EntrepriseSearchField:
+  description: "The Siret number is a 14-digit number unique to each company.
+    Example: 40123778000127"
+  label: Company name, SIREN or SIRET
+  placeholder: "Example: Café de la gare or 40123778000127"
 Envoyer: Send
 "Exemple : Des informations plus claires, un calcul détaillé...": "Example: clearer information, detailed calculation..."
 Exonérations: Exemptions

diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml
@@ -77,11 +77,6 @@ Comment ça marche ? Voir la page explicative sur la page du dépôt github, nou
   Comment ça marche ? Voir la page explicative sur la page du dépôt github,
   nouvelle fenêtre
 Commune ou code postal: Commune ou code postal
-CompanySearchField:
-  description: "Le numéro Siret est un numéro de 14 chiffres unique pour chaque
-    entreprise. Exemple : 40123778000127"
-  label: Nom de l'entreprise, SIREN ou SIRET
-  placeholder: "Exemple : Café de la gare ou 40123778000127"
 Comparer...: Comparer...
 Confirmer: Confirmer
 Cotisations: Cotisations
@@ -124,6 +119,11 @@ English version of the website enabled.: English version of the website enabled.
 Enregistrer et continuer: Enregistrer et continuer
 Enregistrer et voir le résultat: Enregistrer et voir le résultat
 Entreprise créée le <2><0></0></2> et domiciliée à <6><0></0></6>: Entreprise créée le <2><0></0></2> et domiciliée à <6><0></0></6>
+EntrepriseSearchField:
+  description: "Le numéro Siret est un numéro de 14 chiffres unique pour chaque
+    entreprise. Exemple : 40123778000127"
+  label: Nom de l'entreprise, SIREN ou SIRET
+  placeholder: "Exemple : Café de la gare ou 40123778000127"
 Envoyer: Envoyer
 "Exemple : Des informations plus claires, un calcul détaillé...": "Exemple : Des informations plus claires, un calcul détaillé..."
 Exonérations: Exonérations

diff --git a/site/source/pages/_landing/SearchOrCreate.tsx b/site/source/pages/_landing/SearchOrCreate.tsx
@@ -3,8 +3,8 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import { generatePath, useNavigate } from 'react-router-dom'
 
-import { CompanyDetails } from '@/components/company/Details'
-import { EntrepriseSearchField } from '@/components/company/SearchField'
+import { EntrepriseDetails } from '@/components/entreprise/EntrepriseDetails'
+import { EntrepriseSearchField } from '@/components/entreprise/EntrepriseSearchField'
 import { useEngine } from '@/components/utils/EngineContext'
 import AnswerGroup from '@/design-system/answer-group'
 import { Button } from '@/design-system/buttons'
@@ -38,8 +38,8 @@ export default function SearchOrCreate() {
 			<Grid item xl={8} lg={10} md={12}>
 				{companySIREN ? (
 					<>
-						<H3 as="h2">Votre entreprise</H3>
-						<CompanyDetails />
+						<H3 as="h2">{t('Votre entreprise')}</H3>
+						<EntrepriseDetails />
 						<Spacing md />
 						<AnswerGroup role="list">
 							<Button

diff --git a/site/source/pages/assistants/choix-du-statut/home.tsx b/site/source/pages/assistants/choix-du-statut/home.tsx
@@ -2,7 +2,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 
 import { TrackPage } from '@/components/ATInternetTracking'
-import { CompanyDetails } from '@/components/company/Details'
+import { EntrepriseDetails } from '@/components/entreprise/EntrepriseDetails'
 import PageHeader from '@/components/PageHeader'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
@@ -79,7 +79,7 @@ export default function AccueilChoixStatut() {
 								</Body>
 							</Trans>
 						</Message>
-						<CompanyDetails />
+						<EntrepriseDetails />
 						<PopoverConfirm
 							trigger={(buttonProps) => (
 								<Button

diff --git a/site/source/pages/assistants/pour-mon-entreprise/index.tsx b/site/source/pages/assistants/pour-mon-entreprise/index.tsx
@@ -15,11 +15,11 @@ import {
 import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
-import { CompanyDetails } from '@/components/company/Details'
 import { ConseillersEntreprisesButton } from '@/components/ConseillersEntreprisesButton'
 import RuleInput from '@/components/conversation/RuleInput'
 import { CurrentSimulatorCard } from '@/components/CurrentSimulatorCard'
 import { Condition } from '@/components/EngineValue/Condition'
+import { EntrepriseDetails } from '@/components/entreprise/EntrepriseDetails'
 import PageHeader from '@/components/PageHeader'
 import { SimulateurCard } from '@/components/SimulateurCard'
 import { FromTop } from '@/components/ui/animate'
@@ -242,7 +242,7 @@ function PourMonEntreprise() {
 	)
 }
 
-const configCompanyDetails: SimulationConfig = {
+const configEntrepriseDetails: SimulationConfig = {
 	questions: {
 		'liste noire': ['entreprise . imposition . régime'] as DottedName[],
 	},
@@ -269,15 +269,15 @@ const AskCompanyMissingDetails = () => {
 	const { absoluteSitePaths } = useSitePaths()
 	useSimulationConfig({
 		key: absoluteSitePaths.assistants.index,
-		config: configCompanyDetails,
+		config: configEntrepriseDetails,
 	})
 
 	const [questions, onQuestionAnswered] = useQuestionList()
 	const engine = useEngine()
 
 	return (
 		<>
-			<CompanyDetails showSituation headingTag="h2" />
+			<EntrepriseDetails showSituation headingTag="h2" />
 			{!!questions.length && (
 				<>
 					<Body