😍 Favorise la découverte des simulateurs connexes

mon-entreprise/source/locales/ui-en.yaml

@@ -1094,6 +1094,9 @@ pages:
     avocat:
       shortname: Lawyer
       title: Income simulator for private lawyers
+    cartes:
+      intégrer module web: <0>Integrate the web module</0><1>Add this simulator to
+        your website in one click</1>
     chirurgien-dentiste:
       shortname: Dental surgeon
       title: Income simulator for a private dental surgeon

mon-entreprise/source/pages/Simulateurs/Page.tsx

@@ -7,10 +7,11 @@ import useSearchParamsSimulationSharing from 'Components/utils/useSearchParamsSi
 import useSimulationConfig from 'Components/utils/useSimulationConfig'
 import { default as React, useContext } from 'react'
 import emoji from 'react-easy-emoji'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
 import { TrackChapter } from '../../ATInternetTracking'
-import { SimulatorData } from './metadata'
+import { SimulateurCard } from './Home'
+import useSimulatorsData, { SimulatorData, SimulatorId } from './metadata'
 
 export default function PageData({
 	meta,
@@ -22,6 +23,7 @@ export default function PageData({
 	iframe,
 	component: Component,
 	seoExplanations,
+	nextSteps,
 	path,
 }: SimulatorData[keyof SimulatorData]) {
 	const inIframe = useContext(IsEmbeddedContext)
@@ -84,7 +86,7 @@ export default function PageData({
 				{!inIframe && (
 					<>
 						{seoExplanations}
-						<NextSteps iframe={iframe} />
+						<NextSteps iframe={iframe} nextSteps={nextSteps} />
 					</>
 				)}
 			</ThemeColorsProvider>
@@ -92,29 +94,41 @@ export default function PageData({
 	)
 }
 
-function NextSteps({ iframe }: { iframe: string }) {
+type NextStepsProps = {
+	iframe?: string
+	nextSteps?: Array<SimulatorId>
+}
+
+function NextSteps({ iframe, nextSteps }: NextStepsProps) {
 	const sitePaths = useContext(SitePathsContext)
-	if (!iframe) {
+	const simulators = useSimulatorsData()
+	if (!iframe && !nextSteps) {
 		return null
 	}
 	return (
 		<section>
 			<h3>Aller plus loin</h3>
 			<div className="ui__ box-container">
-				<Link
-					className="ui__ interactive card box light-border"
-					to={{
-						pathname: sitePaths.integration.iframe,
-						search: `?module=${iframe}`,
-					}}
-				>
-					<div className="ui__ big box-icon">{emoji('📱')}</div>
-					<h3>Intégrer le module web</h3>
-					<p className="ui__ notice">
-						Ajouter ce simulateur sur votre site internet en un clic
-					</p>
-					<div className="ui__ small simple button">Découvrir</div>
-				</Link>
+				{nextSteps?.map((simulatorId) => (
+					<SimulateurCard key={simulatorId} {...simulators[simulatorId]} />
+				))}
+				{iframe && (
+					<Link
+						className="ui__ interactive card box light-border"
+						to={{
+							pathname: sitePaths.integration.iframe,
+							search: `?module=${iframe}`,
+						}}
+					>
+						<div className="ui__ big box-icon">{emoji('📱')}</div>
+						<Trans i18nKey="pages.simulateurs.cartes.intégrer module web">
+							<h3>Intégrer le module web</h3>
+							<p className="ui__ notice">
+								Ajouter ce simulateur sur votre site internet en un clic
+							</p>
+						</Trans>
+					</Link>
+				)}
 			</div>
 		</section>
 	)

mon-entreprise/source/pages/Simulateurs/metadata.tsx

@@ -61,8 +61,10 @@ const simulateurs = [
 	'aides-embauche',
 ] as const
 
+export type SimulatorId = typeof simulateurs[number]
+
 export type SimulatorData = Record<
-	typeof simulateurs[number],
+	SimulatorId,
 	{
 		meta?: {
 			title: string
@@ -88,6 +90,7 @@ export type SimulatorData = Record<
 		description?: React.ReactNode
 		config?: SimulationConfig
 		seoExplanations?: React.ReactNode
+		nextSteps?: Array<SimulatorId>
 		private?: true
 		component: () => JSX.Element
 	}
@@ -199,6 +202,7 @@ export function getSimulatorsData({
 					</p>
 				</Trans>
 			),
+			nextSteps: ['chômage-partiel', 'aides-embauche'],
 		},
 		'auto-entrepreneur': {
 			tracking: 'auto_entrepreneur',
@@ -305,6 +309,7 @@ export function getSimulatorsData({
 					</div>
 				</Trans>
 			),
+			nextSteps: ['indépendant', 'comparaison-statuts'],
 		},
 		indépendant: {
 			config: indépendantConfig,
@@ -328,6 +333,7 @@ export function getSimulatorsData({
 				),
 			},
 			component: IndépendantSimulation,
+			nextSteps: ['is', 'comparaison-statuts'],
 		},
 		sasu: {
 			config: sasuConfig,
@@ -408,6 +414,7 @@ export function getSimulatorsData({
 					</p>
 				</Trans>
 			),
+			nextSteps: ['is', 'comparaison-statuts'],
 		},
 		'artiste-auteur': {
 			icône: '👩‍🎨',
@@ -543,6 +550,7 @@ export function getSimulatorsData({
 					</p>
 				</Trans>
 			),
+			nextSteps: ['salarié', 'aides-embauche'],
 		},
 		'comparaison-statuts': {
 			component: SchemeComparaisonPage,
@@ -850,6 +858,7 @@ export function getSimulatorsData({
 				</Trans>
 			),
 			component: AidesEmbauche,
+			nextSteps: ['salarié'],
 		},
 		is: {
 			icône: '🗓',
@@ -903,6 +912,7 @@ export function getSimulatorsData({
 					</p>
 				</Trans>
 			),
+			nextSteps: ['salarié', 'comparaison-statuts'],
 		},
 	}
 }