refactor: Réorganise les composants de recherche APE
Alice Dahan
liliced
parent
457f86d388
commit
52bc504c51
|
|
@ -1,9 +1,8 @@
|
|||
import { GuichetEntry } from '@/components/GuichetInfo'
|
||||
import { Message } from '@/design-system'
|
||||
import { H3 } from '@/design-system/typography/heading'
|
||||
import { Intro } from '@/design-system/typography/paragraphs'
|
||||
|
||||
import { GuichetEntry } from '../../recherche-code-ape/GuichetInfo'
|
||||
|
||||
export function estNonDisponible(guichet: GuichetEntry): boolean {
|
||||
return (
|
||||
!!guichet.caisseDeRetraiteSpéciale ||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ import { Trans, useTranslation } from 'react-i18next'
|
|||
import { useDispatch } from 'react-redux'
|
||||
import { Navigate } from 'react-router-dom'
|
||||
|
||||
import {
|
||||
getGuichetTitle,
|
||||
GuichetDescription,
|
||||
GuichetEntry,
|
||||
useGuichetInfo,
|
||||
} from '@/components/GuichetInfo'
|
||||
import Skeleton from '@/components/ui/Skeleton'
|
||||
import { useEngine } from '@/components/utils/EngineContext'
|
||||
import { Message, RadioCardGroup } from '@/design-system'
|
||||
|
|
@ -18,12 +24,6 @@ import { useSitePaths } from '@/sitePaths'
|
|||
import { batchUpdateSituation } from '@/store/actions/actions'
|
||||
import { guichetToPLMétier } from '@/utils/guichetToPLMétier'
|
||||
|
||||
import {
|
||||
getGuichetTitle,
|
||||
GuichetDescription,
|
||||
GuichetEntry,
|
||||
useGuichetInfo,
|
||||
} from '../recherche-code-ape/GuichetInfo'
|
||||
import {
|
||||
AvertissementActivitéNonDisponible,
|
||||
estNonDisponible,
|
||||
|
|
|
|||
|
|
@ -8,12 +8,11 @@ import { FromTop } from '@/components/ui/animate'
|
|||
import { usePersistingState } from '@/components/utils/persistState'
|
||||
import { Message, RadioCardGroup, SearchField } from '@/design-system'
|
||||
import { VisibleRadio } from '@/design-system/field/Radio/Radio'
|
||||
import { RadioCardSkeleton } from '@/design-system/field/Radio/RadioCard'
|
||||
import { Spacing } from '@/design-system/layout'
|
||||
import { SmallBody } from '@/design-system/typography/paragraphs'
|
||||
import { usePromise } from '@/hooks/usePromise'
|
||||
|
||||
import { Result } from './Result'
|
||||
import { Result } from './components/Result'
|
||||
|
||||
type Data = typeof import('@/public/data/ape-search.json')
|
||||
|
||||
|
|
@ -268,18 +267,12 @@ export default function SearchCodeAPE({
|
|||
{list.slice(0, 25).map(({ item, debug }) => {
|
||||
return (
|
||||
<>
|
||||
<RadioCardSkeleton
|
||||
isDisabled={disabled}
|
||||
value={item.codeApe}
|
||||
key={item.codeApe}
|
||||
visibleRadioAs="div"
|
||||
>
|
||||
<Result
|
||||
item={item}
|
||||
debug={debug}
|
||||
hideGuichetUnique={hideGuichetUnique}
|
||||
/>
|
||||
</RadioCardSkeleton>
|
||||
<Result
|
||||
item={item}
|
||||
disabled={disabled}
|
||||
hideGuichetUnique={hideGuichetUnique}
|
||||
debug={debug}
|
||||
/>
|
||||
{underSelection && selected === item.codeApe && (
|
||||
<FromTop>{underSelection}</FromTop>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import { HelpButtonWithPopover } from '@/design-system/buttons'
|
||||
import { Link } from '@/design-system/typography/link'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
|
||||
export function HelpGuichetUnique() {
|
||||
return (
|
||||
<HelpButtonWithPopover
|
||||
type="info"
|
||||
title="Qu'est-ce que le guichet unique ?"
|
||||
>
|
||||
<Body>
|
||||
Le{' '}
|
||||
<Link href="https://procedures.inpi.fr/">
|
||||
Guichet électronique des formalités d’entreprises
|
||||
</Link>{' '}
|
||||
(Guichet unique) est un portail internet sécurisé, auprès duquel toute
|
||||
entreprise est tenue de déclarer sa création, depuis le 1er janvier
|
||||
2023.
|
||||
</Body>
|
||||
<Body>
|
||||
Il utilise une classification des activités différente de celle utilisée
|
||||
par l'INSEE pour code APE.
|
||||
</Body>
|
||||
</HelpButtonWithPopover>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,17 +2,18 @@ import { useState } from 'react'
|
|||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { css, styled } from 'styled-components'
|
||||
|
||||
import GuichetInfo from '@/components/GuichetInfo'
|
||||
import { Appear } from '@/components/ui/animate'
|
||||
import { Chip } from '@/design-system'
|
||||
import { Button, HelpButtonWithPopover } from '@/design-system/buttons'
|
||||
import { Button } from '@/design-system/buttons'
|
||||
import { RadioCardSkeleton } from '@/design-system/field/Radio/RadioCard'
|
||||
import { ChevronIcon } from '@/design-system/icons'
|
||||
import { Grid } from '@/design-system/layout'
|
||||
import { H4, H5, H6 } from '@/design-system/typography/heading'
|
||||
import { Link } from '@/design-system/typography/link'
|
||||
import { Li, Ul } from '@/design-system/typography/list'
|
||||
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
|
||||
import { SmallBody } from '@/design-system/typography/paragraphs'
|
||||
|
||||
import GuichetInfo from './GuichetInfo'
|
||||
import { HelpGuichetUnique } from './HelpGuichetUnique'
|
||||
|
||||
interface ResultProps {
|
||||
debug: string | null
|
||||
|
|
@ -23,16 +24,22 @@ interface ResultProps {
|
|||
contenuAnnexe: string[]
|
||||
contenuExclu: string[]
|
||||
}
|
||||
disabled?: boolean
|
||||
hideGuichetUnique: boolean
|
||||
}
|
||||
|
||||
export const Result = ({ item, hideGuichetUnique }: ResultProps) => {
|
||||
export const Result = ({ item, disabled, hideGuichetUnique }: ResultProps) => {
|
||||
const { title, codeApe, contenuCentral, contenuAnnexe, contenuExclu } = item
|
||||
const [open, setOpen] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<RadioCardSkeleton
|
||||
isDisabled={disabled}
|
||||
value={item.codeApe}
|
||||
key={item.codeApe}
|
||||
visibleRadioAs="div"
|
||||
>
|
||||
<H5 as="h3">{title}</H5>
|
||||
<SmallBody>
|
||||
<Grid
|
||||
|
|
@ -109,7 +116,7 @@ export const Result = ({ item, hideGuichetUnique }: ResultProps) => {
|
|||
)}
|
||||
</Appear>
|
||||
)}
|
||||
</>
|
||||
</RadioCardSkeleton>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -123,26 +130,3 @@ const StyledChevron = styled(ChevronIcon)<{ $isOpen: boolean }>`
|
|||
transform: rotate(90deg);
|
||||
`}
|
||||
`
|
||||
|
||||
export function HelpGuichetUnique() {
|
||||
return (
|
||||
<HelpButtonWithPopover
|
||||
type="info"
|
||||
title="Qu'est-ce que le guichet unique ?"
|
||||
>
|
||||
<Body>
|
||||
Le{' '}
|
||||
<Link href="https://procedures.inpi.fr/">
|
||||
Guichet électronique des formalités d’entreprises
|
||||
</Link>{' '}
|
||||
(Guichet unique) est un portail internet sécurisé, auprès duquel toute
|
||||
entreprise est tenue de déclarer sa création, depuis le 1er janvier
|
||||
2023.
|
||||
</Body>
|
||||
<Body>
|
||||
Il utilise une classification des activités différente de celle utilisée
|
||||
par l'INSEE pour code APE.
|
||||
</Body>
|
||||
</HelpButtonWithPopover>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { GuichetEntry } from '@/pages/assistants/recherche-code-ape/GuichetInfo'
|
||||
import { GuichetEntry } from '@/components/GuichetInfo'
|
||||
|
||||
type PLRMétier =
|
||||
| "'rattaché CIPAV'"
|
||||
|
|
|
|||
Loading…
Reference in New Issue