Rend exportable l'assistant au choix du statut

site/source/design-system/answer-group/index.tsx

@@ -7,7 +7,7 @@ type AnswerGroupProps = {
 
 const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({ children }) => {
 	return (
-		<Grid container justifyContent="flex-start" spacing={1}>
+		<Grid container justifyContent="flex-start" spacing={3}>
 			{Children.map(children, (c, i) => (
 				<Grid key={`answerGroup-${i}`} item sm={12} md="auto">
 					{c}

site/source/locales/ui-en.yaml

@@ -964,6 +964,11 @@ pages:
     letter by post (free of charge, do not put a stamp on it)
     to:<1></1>Défenseur des droits<3></3>Free reply 71120<5></5>75342 Paris
     CEDEX 07</2></21><22>Updated on 29/01/2021</22>
+  choix-statut:
+    meta:
+      description: "SASU, EURL, auto-entrepreneur, EIRL: choose the status that suits
+        you best with this wizard"
+      title: Help in choosing the legal status
   common:
     ressources-auto-entrepreneur:
       FAQ:
@@ -1583,7 +1588,7 @@ pages:
       description: Airbnb, Drivy, Blablacar, Leboncoin... Find out how to be in order
         in your declarations
       title: "Online platform income tax return: interactive guide"
-    shortname: Collaborative Economy Guide
+    shortname: Legal status assistant
 par: per
 par an: per year
 par mois: per month

site/source/locales/ui-fr.yaml

@@ -708,6 +708,11 @@ pages:
     à&nbsp;:<1></1>Défenseur des droits<3></3>Libre réponse
     71120<5></5>75342&nbsp;Paris CEDEX 07</2></21><22>Mis à jour le
     29/01/2021</22>
+  choix-statut:
+    meta:
+      description: "SASU, EURL, auto-entrepreneur, EIRL : choisissez le statut qui
+        vous convient le mieux grâce à cet assistant"
+      title: Aide au choix du statut juridique
   common:
     ressources-auto-entrepreneur:
       FAQ:
@@ -1236,7 +1241,7 @@ pages:
       description: Airbnb, Drivy, Blablacar, Leboncoin... Découvrez comment être en
         règle dans vos déclarations
       title: "Déclaration des revenus des plateforme en ligne : guide intéractif"
-    shortname: Guide économie collaborative
+    shortname: Assistant statut juridique
 payslip:
   disclaimer: Il ne prend pour l'instant pas en compte les accords et conventions
     collectives, ni la myriade d'aides aux entreprises. Trouvez votre convention

site/source/pages/Simulateurs/metadata-src.js

@@ -317,7 +317,30 @@ module.exports = ({ t = (_, text) => text } = {}) => {
 			iframePath: 'economie-collaborative',
 			shortName: t(
 				'pages.économie-collaborative.shortname',
-				'Guide économie collaborative'
+				'Assistant économie collaborative'
+			),
+		},
+		'choix-statut': {
+			tracking: {
+				chapter1: 'creer',
+				chapter2: 'guide',
+			},
+			meta: {
+				title: t(
+					'pages.choix-statut.meta.title',
+					'Aide au choix du statut juridique'
+				),
+				description: t(
+					'pages.choix-statut.meta.description',
+					'SASU, EURL, auto-entrepreneur, EIRL : choisissez le statut qui vous convient le mieux grâce à cet assistant'
+				),
+			},
+			icône: '📚',
+			pathId: 'créer.guideStatut.index',
+			iframePath: '*',
+			shortName: t(
+				'pages.économie-collaborative.shortname',
+				'Assistant statut juridique'
 			),
 		},
 		'aide-déclaration-indépendant': {
@@ -581,5 +604,25 @@ module.exports = ({ t = (_, text) => text } = {}) => {
 
 			nextSteps: ['salarié', 'comparaison-statuts'],
 		},
+		dividendes: {
+			icône: '🎩',
+			tracking: 'dividendes',
+			iframePath: 'dividendes',
+			meta: {
+				title: t('pages.simulateurs.dividendes.meta.title', 'Dividendes'),
+				description: t(
+					'pages.simulateurs.dividendes.meta.description',
+					"Calculez le montant de l'impôt et des cotisations sur les dividendes versés par votre entreprise."
+				),
+				color: '#E71D66',
+			},
+			shortName: t('pages.simulateurs.dividendes.meta.title', 'Dividendes'),
+			title: t(
+				'pages.simulateurs.dividendes.title',
+				'Simulateur de versement de dividendes'
+			),
+
+			nextSteps: ['salarié', 'is', 'comparaison-statuts'],
+		},
 	}
 }

site/source/pages/Simulateurs/metadata.tsx

@@ -8,6 +8,7 @@ import React, { useContext, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { SimulationConfig } from 'Reducers/rootReducer'
 import { constructLocalizedSitePath } from '../../sitePaths'
+import Créer from '../Creer/Home'
 import AideDéclarationIndépendant from '../Gerer/AideDéclarationIndépendant'
 import FormulaireMobilitéIndépendant from '../Gerer/DemandeMobilite'
 import AidesEmbauche from './AidesEmbauche'
@@ -58,6 +59,7 @@ const simulateurs = [
 	'demande-mobilité',
 	'profession-libérale',
 	'médecin',
+	'choix-statut',
 	'pharmacien',
 	'chirurgien-dentiste',
 	'sage-femme',
@@ -72,10 +74,10 @@ const simulateurs = [
 
 export type SimulatorId = typeof simulateurs[number]
 
-export type SimulatorData = Record<
+export type PureSimulatorData = Record<
 	SimulatorId,
 	{
-		meta?: {
+		meta: {
 			title: string
 			description: string
 			ogTitle?: string
@@ -100,24 +102,35 @@ export type SimulatorData = Record<
 		config?: SimulationConfig
 		seoExplanations?: React.ReactNode
 		nextSteps?: Array<SimulatorId>
-		private?: true
-		component: () => JSX.Element
+		private?: boolean
 	}
 >
+export type SimulatorData = PureSimulatorData &
+	Record<
+		SimulatorId,
+		{
+			path?: string
+			description?: React.ReactNode
+			config?: SimulationConfig
+			seoExplanations?: React.ReactNode
+			nextSteps?: Array<SimulatorId>
+			component: () => JSX.Element
+		}
+	>
 
 export function getSimulatorsData({
 	t = (_: unknown, text: string) => text,
 	sitePaths = constructLocalizedSitePath('fr'),
 	language = 'fr',
 } = {}): SimulatorData {
-	const pureSimulatorsData = getData({ t })
+	const pureSimulatorsData: PureSimulatorData = getData({ t }) as any
 	return {
 		salarié: {
 			...pureSimulatorsData['salarié'],
 			config: salariéConfig,
 			component: SalariéSimulation,
 			meta: {
-				...pureSimulatorsData['salarié'].meta,
+				...pureSimulatorsData['salarié']?.meta,
 				ogImage:
 					language === 'fr' ? salaireBrutNetPreviewFR : salaireBrutNetPreviewEN,
 			},
@@ -194,13 +207,12 @@ export function getSimulatorsData({
 					</Body>
 				</Trans>
 			),
-			nextSteps: ['chômage-partiel', 'aides-embauche'],
 		},
 		'entreprise-individuelle': {
 			...pureSimulatorsData['entreprise-individuelle'],
 			config: entrepriseIndividuelleConfig,
 			meta: {
-				...pureSimulatorsData['entreprise-individuelle'].meta,
+				...pureSimulatorsData['entreprise-individuelle']?.meta,
 				ogImage: AutoEntrepreneurPreview,
 			},
 			component: EntrepriseIndividuelle,
@@ -270,13 +282,12 @@ export function getSimulatorsData({
 					</Body>
 				</Trans>
 			),
-			nextSteps: ['comparaison-statuts'],
 		},
 		eirl: {
 			...pureSimulatorsData['eirl'],
 			config: indépendantConfig,
 			meta: {
-				...pureSimulatorsData['eirl'].meta,
+				...pureSimulatorsData['eirl']?.meta,
 				ogImage: AutoEntrepreneurPreview,
 			},
 			component: IndépendantSimulation,
@@ -287,7 +298,7 @@ export function getSimulatorsData({
 			...pureSimulatorsData['sasu'],
 			config: sasuConfig,
 			meta: {
-				...pureSimulatorsData['sasu'].meta,
+				...pureSimulatorsData['sasu']?.meta,
 				ogImage: RémunérationSASUPreview,
 			},
 			path: sitePaths.simulateurs.sasu,
@@ -333,55 +344,28 @@ export function getSimulatorsData({
 					</Body>
 				</Trans>
 			),
-			nextSteps: ['is', 'comparaison-statuts'],
 		},
 		eurl: {
 			...pureSimulatorsData['eurl'],
 			config: eurlConfig,
 			meta: {
-				...pureSimulatorsData['eurl'].meta,
+				...pureSimulatorsData['eurl']?.meta,
 				ogImage: RémunérationSASUPreview,
 			},
 			path: sitePaths.simulateurs.eurl,
 			component: IndépendantSimulation,
-			nextSteps: ['is', 'comparaison-statuts'],
 		},
 		'auto-entrepreneur': {
 			...pureSimulatorsData['auto-entrepreneur'],
 			tracking: 'auto_entrepreneur',
 			config: autoEntrepreneurConfig,
-			icône: '🚶‍♂️',
-			iframePath: 'simulateur-autoentrepreneur',
 			meta: {
-				...pureSimulatorsData['auto-entrepreneur'].meta,
-				description: t(
-					'pages.simulateurs.auto-entrepreneur.meta.description',
-					"Calcul du revenu à partir du chiffre d'affaires, après déduction des cotisations et des impôts"
-				),
-				ogDescription: t(
-					'pages.simulateurs.auto-entrepreneur.meta.ogDescription',
-					"Grâce au simulateur de revenu auto-entrepreneur développé par l'Urssaf, vous pourrez estimer le montant de vos revenus en fonction de votre chiffre d'affaires mensuel ou annuel pour mieux gérer votre trésorerie. Ou dans le sens inverse : savoir quel montant facturer pour atteindre un certain revenu."
-				),
+				...pureSimulatorsData['auto-entrepreneur']?.meta,
 				ogImage: AutoEntrepreneurPreview,
-				ogTitle: t(
-					'pages.simulateurs.auto-entrepreneur.meta.ogTitle',
-					'Auto-entrepreneur : calculez rapidement votre revenu net à partir du CA et vice-versa'
-				),
-				title: t(
-					'pages.simulateurs.auto-entrepreneur.meta.titre',
-					'Auto-entrepreneurs : simulateur de revenus'
-				),
 			},
 			component: AutoEntrepreneur,
 			path: sitePaths.simulateurs['auto-entrepreneur'],
-			shortName: t(
-				'pages.simulateurs.auto-entrepreneur.shortname',
-				'Auto-entrepreneur'
-			),
-			title: t(
-				'pages.simulateurs.auto-entrepreneur.title',
-				'Simulateur de revenus auto-entrepreneur'
-			),
+
 			seoExplanations: (
 				<Trans i18nKey="pages.simulateurs.auto-entrepreneur.seo explanation">
 					<H2>Comment calculer le revenu net d'un auto-entrepreneur ?</H2>
@@ -447,23 +431,15 @@ export function getSimulatorsData({
 					</Body>
 				</Trans>
 			),
-			nextSteps: ['indépendant', 'comparaison-statuts'],
 		},
 		indépendant: {
 			...pureSimulatorsData['indépendant'],
 			config: indépendantConfig,
 			path: sitePaths.simulateurs.indépendant,
-			meta: {
-				...pureSimulatorsData['indépendant'].meta,
-			},
 			component: IndépendantSimulation,
-			nextSteps: ['comparaison-statuts', 'is'],
 		},
 		'artiste-auteur': {
 			...pureSimulatorsData['artiste-auteur'],
-			meta: {
-				...pureSimulatorsData['artiste-auteur'].meta,
-			},
 			path: sitePaths.simulateurs['artiste-auteur'],
 			component: ArtisteAuteur,
 		},
@@ -473,7 +449,7 @@ export function getSimulatorsData({
 			config: chômageParielConfig,
 			path: sitePaths.simulateurs['chômage-partiel'],
 			meta: {
-				...pureSimulatorsData['chômage-partiel'].meta,
+				...pureSimulatorsData['chômage-partiel']?.meta,
 				ogImage: ChômagePartielPreview,
 			},
 			seoExplanations: (
@@ -554,143 +530,83 @@ export function getSimulatorsData({
 			...pureSimulatorsData['comparaison-statuts'],
 			component: SchemeComparaisonPage,
 			path: sitePaths.simulateurs.comparaison,
-			meta: {
-				...pureSimulatorsData['comparaison-statuts'].meta,
-			},
 		},
 		'économie-collaborative': {
 			...pureSimulatorsData['économie-collaborative'],
 			component: ÉconomieCollaborative,
-			meta: {
-				...pureSimulatorsData['économie-collaborative'].meta,
-			},
 			path: sitePaths.simulateurs.économieCollaborative.index,
-			nextSteps: ['auto-entrepreneur'],
+		},
+		'choix-statut': {
+			...pureSimulatorsData['choix-statut'],
+			component: Créer,
+			path: sitePaths.créer.guideStatut.index,
 		},
 		'aide-déclaration-indépendant': {
 			...pureSimulatorsData['aide-déclaration-indépendant'],
 			component: AideDéclarationIndépendant,
-			tracking: {
-				chapter1: 'gerer',
-				chapter2: 'aide_declaration_independant',
-			},
-			meta: {
-				...pureSimulatorsData['aide-déclaration-indépendant'].meta,
-			},
 			path: sitePaths.gérer.déclarationIndépendant,
 		},
 		'demande-mobilité': {
 			...pureSimulatorsData['demande-mobilité'],
 			component: FormulaireMobilitéIndépendant,
-			private: true,
-			tracking: {
-				chapter1: 'gerer',
-				chapter2: 'demande_mobilite',
-			},
-			meta: {
-				...pureSimulatorsData['demande-mobilité'].meta,
-			},
 			path: sitePaths.gérer.formulaireMobilité,
 		},
 		pharmacien: {
 			...pureSimulatorsData['pharmacien'],
 			config: pharmacienConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'pharmacien',
-			},
 			path: sitePaths.simulateurs['profession-libérale'].pharmacien,
 			component: IndépendantPLSimulation,
 		},
 		médecin: {
 			...pureSimulatorsData['médecin'],
 			config: médecinConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'medecin',
-			},
 			path: sitePaths.simulateurs['profession-libérale'].médecin,
 			component: IndépendantPLSimulation,
 		},
 		'chirurgien-dentiste': {
 			...pureSimulatorsData['chirurgien-dentiste'],
 			config: dentisteConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'chirurgien_dentiste',
-			},
 			path: sitePaths.simulateurs['profession-libérale']['chirurgien-dentiste'],
 			component: IndépendantPLSimulation,
 		},
 		'sage-femme': {
 			...pureSimulatorsData['sage-femme'],
 			config: sageFemmeConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'sage_femme',
-			},
 			path: sitePaths.simulateurs['profession-libérale']['sage-femme'],
 			component: IndépendantPLSimulation,
 		},
 		'auxiliaire-médical': {
 			...pureSimulatorsData['auxiliaire-médical'],
 			config: auxiliaireConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'auxiliaire_medical',
-			},
 			path: sitePaths.simulateurs['profession-libérale'].auxiliaire,
 			component: IndépendantPLSimulation,
 		},
 		avocat: {
 			...pureSimulatorsData['avocat'],
 			config: avocatConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'avocat',
-			},
 			path: sitePaths.simulateurs['profession-libérale'].avocat,
 			component: IndépendantPLSimulation,
 		},
 		'expert-comptable': {
 			...pureSimulatorsData['expert-comptable'],
 			config: expertComptableConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-				chapter3: 'expert_comptable',
-			},
 			path: sitePaths.simulateurs['profession-libérale']['expert-comptable'],
 			component: IndépendantPLSimulation,
 		},
 		'profession-libérale': {
 			...pureSimulatorsData['profession-libérale'],
 			config: professionLibéraleConfig,
-			tracking: {
-				chapter2: 'profession_liberale',
-			},
-			meta: {
-				...pureSimulatorsData['profession-libérale'].meta,
-			},
 			path: sitePaths.simulateurs['profession-libérale'].index,
 			component: IndépendantPLSimulation,
 		},
 		pamc: {
 			...pureSimulatorsData['pamc'],
-			private: true,
-			tracking: {},
 			path: sitePaths.simulateurs.pamc,
 			config: professionLibéraleConfig,
-			meta: {
-				...pureSimulatorsData['pamc'].meta,
-			},
 			component: PAMCHome,
 		},
 		'aides-embauche': {
 			...pureSimulatorsData['aides-embauche'],
-			tracking: 'aides_embauche',
-			meta: {
-				...pureSimulatorsData['aides-embauche'].meta,
-			},
 			path: sitePaths.simulateurs['aides-embauche'],
 			// Cette description est surchargé car elle contient ici du JSX
 			description: (
@@ -719,15 +635,10 @@ export function getSimulatorsData({
 				</Body>
 			),
 			component: AidesEmbauche,
-			nextSteps: ['salarié'],
 		},
 		is: {
 			...pureSimulatorsData['is'],
-			tracking: 'impot-societe',
 			path: sitePaths.simulateurs.is,
-			meta: {
-				...pureSimulatorsData['is'].meta,
-			},
 			component: ISSimulation,
 			seoExplanations: (
 				<Trans i18nKey="pages.simulateurs.is.seo">
@@ -762,26 +673,10 @@ export function getSimulatorsData({
 					</Body>
 				</Trans>
 			),
-			nextSteps: ['salarié', 'dividendes', 'comparaison-statuts'],
 		},
 		dividendes: {
-			icône: '🎩',
-			tracking: 'dividendes',
+			...pureSimulatorsData['dividendes'],
 			path: sitePaths.simulateurs.dividendes,
-			iframePath: 'dividendes',
-			meta: {
-				title: t('pages.simulateurs.dividendes.meta.title', 'Dividendes'),
-				description: t(
-					'pages.simulateurs.dividendes.meta.description',
-					"Calculez le montant de l'impôt et des cotisations sur les dividendes versés par votre entreprise."
-				),
-				color: '#E71D66',
-			},
-			shortName: t('pages.simulateurs.dividendes.meta.title', 'Dividendes'),
-			title: t(
-				'pages.simulateurs.dividendes.title',
-				'Simulateur de versement de dividendes'
-			),
 			component: DividendesSimulation,
 			config: dividendesConfig,
 			seoExplanations: (
@@ -831,7 +726,6 @@ export function getSimulatorsData({
 					</Body>
 				</Trans>
 			),
-			nextSteps: ['salarié', 'is', 'comparaison-statuts'],
 		},
 	}
 }

site/source/pages/integration/Iframe.tsx

@@ -4,27 +4,21 @@ import { IsEmbeddedProvider } from 'Components/utils/embeddedContext'
 import Emoji from 'Components/utils/Emoji'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
 import { Article } from 'DesignSystem/card'
+import { Item, Select } from 'DesignSystem/field/Select'
 import { Spacing } from 'DesignSystem/layout'
 import PopoverWithTrigger from 'DesignSystem/PopoverWithTrigger'
 import { H1, H2, H3 } from 'DesignSystem/typography/heading'
 import { Link } from 'DesignSystem/typography/link'
 import { Body } from 'DesignSystem/typography/paragraphs'
 import urssafLogo from 'Images/Urssaf.svg'
-import {
-	lazy,
-	Suspense,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react'
+import { lazy, Suspense, useContext, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Route } from 'react-router'
 import { MemoryRouter, useHistory, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import { TrackPage } from '../../ATInternetTracking'
 import { hexToHSL } from '../../hexToHSL'
+import Créer from '../Creer'
 import Documentation from '../Documentation'
 import Iframes from '../Iframes'
 import Simulateurs from '../Simulateurs'
@@ -39,22 +33,18 @@ const LazyColorPicker = lazy(() => import('../Dev/ColorPicker'))
 
 function IntegrationCustomizer() {
 	const { search } = useLocation()
-	const simulators = useSimulatorsData()
+	const simulators = Object.fromEntries(
+		Object.entries(useSimulatorsData()).filter(
+			([, s]) => s.iframePath && !s.private
+		)
+	)
 	const sitePaths = useContext(SitePathsContext)
 	const history = useHistory()
-	const integrableModuleNames = useMemo(
-		() =>
-			Object.values(simulators)
-				.filter((s) => s.iframePath && !s.private)
-				.map((s) => s.iframePath),
-		[simulators]
-	)
+
 	const defaultModuleFromUrl =
 		new URLSearchParams(search ?? '').get('module') ?? ''
 	const [currentModule, setCurrentModule] = useState(
-		integrableModuleNames.includes(defaultModuleFromUrl)
-			? defaultModuleFromUrl
-			: integrableModuleNames[0]
+		simulators['defaultModuleFromUrl'] ? defaultModuleFromUrl : 'salarié'
 	)
 
 	useEffect(() => {
@@ -72,16 +62,24 @@ function IntegrationCustomizer() {
 				<Grid item lg={4}>
 					<H3>
 						<Trans i18nKey="pages.développeurs.module">Quel module ?</Trans>
-						<Emoji emoji="🚩" />
 					</H3>
-					<select
-						onChange={(event) => setCurrentModule(event.target.value)}
-						value={currentModule}
+					<Select
+						label="Assistant ou simulateur"
+						onSelectionChange={setCurrentModule as any}
+						selectedKey={currentModule}
 					>
-						{integrableModuleNames.map((name) => (
-							<option key={name}>{name}</option>
+						{Object.entries(simulators).map(([module, s]) => (
+							<Item key={module} textValue={s.shortName ?? s.title}>
+								{s.icône && (
+									<>
+										<Emoji emoji={s.icône} />
+										&nbsp;
+									</>
+								)}
+								{s.shortName ?? s.title}
+							</Item>
 						))}
-					</select>
+					</Select>
 
 					<H3>
 						<Trans i18nKey="pages.développeurs.couleur">
@@ -103,7 +101,10 @@ function IntegrationCustomizer() {
 							Voici le code à copier-coller sur votre site&nbsp;:
 						</Trans>
 					</Body>
-					<IntegrationCode color={color} module={currentModule} />
+					<IntegrationCode
+						color={color}
+						module={simulators[currentModule].iframePath}
+					/>
 				</Grid>
 				<Grid item lg={8}>
 					<H3>
@@ -112,7 +113,9 @@ function IntegrationCustomizer() {
 					<PrevisualisationContainer columns={10}>
 						<MemoryRouter
 							key={currentModule}
-							initialEntries={[`/iframes/${currentModule}`]}
+							initialEntries={[
+								`/iframes/${simulators[currentModule].iframePath}`,
+							]}
 						>
 							<ThemeColorsProvider
 								color={color == null ? color : hexToHSL(color)}
@@ -122,6 +125,7 @@ function IntegrationCustomizer() {
 										path={sitePaths.simulateurs.index}
 										component={Simulateurs}
 									/>
+									<Route path={sitePaths.créer.index} component={Créer} />
 									<Route
 										path={sitePaths.documentation.index}
 										component={Documentation}