Add alternative info

site/source/design-system/message/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { DefaultTheme, css } from 'styled-components'
+import styled, { CSSProperties, DefaultTheme, css } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Palette, SmallPalette } from '@/types/styled'
@@ -19,6 +19,7 @@ type MessageProps = {
 	mini?: boolean
 	light?: boolean
 	className?: string
+	style?: CSSProperties
 	role?: string
 }
 
@@ -30,6 +31,7 @@ export function Message({
 	light = false,
 	children,
 	className,
+	style,
 	role = undefined,
 }: MessageProps) {
 	const { t } = useTranslation()
@@ -49,6 +51,7 @@ export function Message({
 		<ForceThemeProvider forceTheme="light">
 			<StyledMessage
 				className={className}
+				style={style}
 				messageType={type}
 				border={border}
 				mini={mini}

site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx

@@ -16,6 +16,7 @@ import { Button } from '@/design-system/buttons'
 import { Emoji } from '@/design-system/emoji'
 import { StyledRadioSkeleton } from '@/design-system/field/Radio/RadioCard'
 import { Grid, Spacing } from '@/design-system/layout'
+import { SmallBody } from '@/design-system/typography/paragraphs'
 import { useAsyncData } from '@/hooks/useAsyncData'
 
 import { Output as Data } from '../../../../../scripts/codeAPESearch/données-code-APE/reduce-json'
@@ -176,6 +177,20 @@ export default function SearchCodeAPE({ disabled }: SearchCodeApeProps) {
 		prevValue.current = job
 	}, [buildedResearch, job, lazyData])
 
+	type Alt = { match: string; proposal: string[] }
+	const [alternative, setAlternative] = useState<Alt | null>(null)
+
+	useEffect(() => {
+		const alternatives: Alt[] = [{ match: 'vente', proposal: ['commerce'] }]
+
+		setAlternative(null)
+		alternatives.forEach((alt) => {
+			if (new RegExp(alt.match, 'i').test(job)) {
+				setAlternative(alt)
+			}
+		})
+	}, [job])
+
 	const ret = (
 		<Grid container>
 			<Grid item lg={12} xl={11}>
@@ -185,7 +200,21 @@ export default function SearchCodeAPE({ disabled }: SearchCodeApeProps) {
 					label={t("Mots-clés définissants l'activité")}
 					placeholder={t('Par exemple : coiffure, boulangerie ou restauration')}
 				/>
-				<Spacing xs />
+				{alternative ? (
+					<FromTop>
+						<Message border={false} icon mini style={{ margin: '.5rem 0' }}>
+							<SmallBody>
+								<Trans i18nKey="search-code-ape.alternative" shouldUnescape>
+									Vous pouvez essayer "
+									{{ proposal: alternative.proposal.join('", "') }}" au lieu de
+									"{{ match: alternative.match }}"
+								</Trans>
+							</SmallBody>
+						</Message>
+					</FromTop>
+				) : (
+					<Spacing xs />
+				)}
 				{list.length > 0 && (
 					<FromTop>
 						<TrackPage name="recherche" />