From 3f27902f1ea7fd10b3a80e123f7732c6fe7d47a8 Mon Sep 17 00:00:00 2001 From: Alice Dahan Date: Mon, 22 Jul 2024 18:08:18 +0200 Subject: [PATCH] =?UTF-8?q?refactor(site):=20Cr=C3=A9e=20un=20composant=20?= =?UTF-8?q?ind=C3=A9pendant=20pour=20les=20r=C3=A9sultats=20de=20recherche?= =?UTF-8?q?=20d'entreprise?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../conversation/EntrepriseInput.tsx | 4 +- .../EntrepriseDetails.tsx} | 2 +- .../EntrepriseSearchDetails.tsx} | 0 .../entreprise/EntrepriseSearchField.tsx | 84 +++++++++++++++++++ .../EntrepriseSearchResults.tsx} | 84 +------------------ .../SelectedEntrepriseDetails.tsx | 0 site/source/locales/ui-en.yaml | 10 +-- site/source/locales/ui-fr.yaml | 10 +-- site/source/pages/_landing/SearchOrCreate.tsx | 8 +- .../pages/assistants/choix-du-statut/home.tsx | 4 +- .../assistants/pour-mon-entreprise/index.tsx | 8 +- 11 files changed, 110 insertions(+), 104 deletions(-) rename site/source/components/{company/Details.tsx => entreprise/EntrepriseDetails.tsx} (98%) rename site/source/components/{company/SearchDetails.tsx => entreprise/EntrepriseSearchDetails.tsx} (100%) create mode 100644 site/source/components/entreprise/EntrepriseSearchField.tsx rename site/source/components/{company/SearchField.tsx => entreprise/EntrepriseSearchResults.tsx} (55%) rename site/source/components/{company => entreprise}/SelectedEntrepriseDetails.tsx (100%) diff --git a/site/source/components/conversation/EntrepriseInput.tsx b/site/source/components/conversation/EntrepriseInput.tsx index d6696fb740..bb6e47a74e 100644 --- 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 b/site/source/components/entreprise/EntrepriseDetails.tsx similarity index 98% rename from site/source/components/company/Details.tsx rename to site/source/components/entreprise/EntrepriseDetails.tsx index e9beff78f1..3a1a2eaaf4 100644 --- a/site/source/components/company/Details.tsx +++ b/site/source/components/entreprise/EntrepriseDetails.tsx @@ -19,7 +19,7 @@ const StyledH4 = styled(H4)` } ` -export function CompanyDetails({ +export function EntrepriseDetails({ showSituation = false, headingTag = 'h3', }: { diff --git a/site/source/components/company/SearchDetails.tsx b/site/source/components/entreprise/EntrepriseSearchDetails.tsx similarity index 100% rename from site/source/components/company/SearchDetails.tsx rename to site/source/components/entreprise/EntrepriseSearchDetails.tsx diff --git a/site/source/components/entreprise/EntrepriseSearchField.tsx b/site/source/components/entreprise/EntrepriseSearchField.tsx new file mode 100644 index 0000000000..377469ad31 --- /dev/null +++ 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(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 ( + + + + + + + + {state.value && !searchPending && !props.selectedValue && ( + + )} + + + + ) +} diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/entreprise/EntrepriseSearchResults.tsx similarity index 55% rename from site/source/components/company/SearchField.tsx rename to site/source/components/entreprise/EntrepriseSearchResults.tsx index 6fa44b24ab..787a782911 100644 --- a/site/source/components/company/SearchField.tsx +++ b/site/source/components/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(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 ( - - - - - - - - {state.value && !searchPending && !props.selectedValue && ( - - )} - - - - ) -} - -function Results({ +export default function EntrepriseSearchResults({ results, onSubmit, }: { diff --git a/site/source/components/company/SelectedEntrepriseDetails.tsx b/site/source/components/entreprise/SelectedEntrepriseDetails.tsx similarity index 100% rename from site/source/components/company/SelectedEntrepriseDetails.tsx rename to site/source/components/entreprise/SelectedEntrepriseDetails.tsx diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index a190577de3..0421e71782 100644 --- 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> et domiciliée à <6><0>: Company founded on <2><0> and domiciled at <6><0> +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 index bcf20c7b2b..b07e3119fa 100644 --- 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> et domiciliée à <6><0>: Entreprise créée le <2><0> et domiciliée à <6><0> +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 index 29a7c7b7a2..de6f3a2eab 100644 --- 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() { {companySIREN ? ( <> -

Votre entreprise

- +

{t('Votre entreprise')}

+