From ad81c3279edcd1cedf5a70c156c84cc5513aea53 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 2 Dec 2021 12:09:38 +0100 Subject: [PATCH] Rend exportable l'assistant au choix du statut --- .../design-system/answer-group/index.tsx | 2 +- site/source/locales/ui-en.yaml | 7 +- site/source/locales/ui-fr.yaml | 7 +- site/source/pages/Simulateurs/metadata-src.js | 45 ++++- site/source/pages/Simulateurs/metadata.tsx | 170 ++++-------------- site/source/pages/integration/Iframe.tsx | 62 ++++--- 6 files changed, 122 insertions(+), 171 deletions(-) diff --git a/site/source/design-system/answer-group/index.tsx b/site/source/design-system/answer-group/index.tsx index 2a0abaa02..30af82db4 100644 --- a/site/source/design-system/answer-group/index.tsx +++ b/site/source/design-system/answer-group/index.tsx @@ -7,7 +7,7 @@ type AnswerGroupProps = { const AnswerGroup: FunctionComponent = ({ children }) => { return ( - + {Children.map(children, (c, i) => ( {c} diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index 21ed1eea8..9ebc989b6 100644 --- a/site/source/locales/ui-en.yaml +++ b/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>Défenseur des droits<3>Free reply 71120<5>75342 Paris CEDEX 07<22>Updated on 29/01/2021 + 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 diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index 1feeeb17e..151b9819b 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -708,6 +708,11 @@ pages: à :<1>Défenseur des droits<3>Libre réponse 71120<5>75342 Paris CEDEX 07<22>Mis à jour le 29/01/2021 + 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 diff --git a/site/source/pages/Simulateurs/metadata-src.js b/site/source/pages/Simulateurs/metadata-src.js index 4dd848582..45af5bb90 100644 --- a/site/source/pages/Simulateurs/metadata-src.js +++ b/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'], + }, } } diff --git a/site/source/pages/Simulateurs/metadata.tsx b/site/source/pages/Simulateurs/metadata.tsx index 37bbaa5a9..e4b4e7245 100644 --- a/site/source/pages/Simulateurs/metadata.tsx +++ b/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 - 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 + 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({ ), - 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({ ), - 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({ ), - 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: (

Comment calculer le revenu net d'un auto-entrepreneur ?

@@ -447,23 +431,15 @@ export function getSimulatorsData({ ), - 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({ ), component: AidesEmbauche, - nextSteps: ['salarié'], }, is: { ...pureSimulatorsData['is'], - tracking: 'impot-societe', path: sitePaths.simulateurs.is, - meta: { - ...pureSimulatorsData['is'].meta, - }, component: ISSimulation, seoExplanations: ( @@ -762,26 +673,10 @@ export function getSimulatorsData({ ), - 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({ ), - nextSteps: ['salarié', 'is', 'comparaison-statuts'], }, } } diff --git a/site/source/pages/integration/Iframe.tsx b/site/source/pages/integration/Iframe.tsx index bf222b207..8bbe76369 100644 --- a/site/source/pages/integration/Iframe.tsx +++ b/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() {

Quel module ? -

- - {integrableModuleNames.map((name) => ( - + {Object.entries(simulators).map(([module, s]) => ( + + {s.icône && ( + <> + +   + + )} + {s.shortName ?? s.title} + ))} - +

@@ -103,7 +101,10 @@ function IntegrationCustomizer() { Voici le code à copier-coller sur votre site : - +

@@ -112,7 +113,9 @@ function IntegrationCustomizer() { +