Ajoute une checkbox activité mixte qui change l'interface du simulateur auto-entrepreneur

modele-social/règles/dirigeant.yaml

@@ -127,12 +127,12 @@ dirigeant . auto-entrepreneur . seuils dépassés . notification:
 
 dirigeant . auto-entrepreneur . net de cotisations:
   titre: Revenu net de cotisations
+  arrondi: oui
   identifiant court: auto-entrepreneur-net
   résumé: Avant impôt
   question: Quel revenu avant impôt voulez-vous toucher ?
   description: Il s'agit du revenu net de cotisations et de charges, avant le paiement de l'impôt sur le revenu.
   formule: entreprise . chiffre d'affaires - cotisations et contributions
-  unité: €/mois
 
 dirigeant . auto-entrepreneur . cotisations et contributions:
   unité: €/mois
@@ -236,10 +236,12 @@ dirigeant . auto-entrepreneur . chiffre d'affaires:
   question: Quel est votre chiffre d'affaires ?
   résumé: Montant total des recettes brutes
   unité: €/an
+  arrondi: oui
   non applicable si: entreprise . activité . mixte
   inversion numérique:
     avec:
       - net de cotisations
+      - net après impôt
 dirigeant . auto-entrepreneur . cotisations et contributions . cotisations:
   description: |
     Les cotisations sociales donnent à l'auto-entrepreneur accès à une
@@ -385,6 +387,7 @@ dirigeant . auto-entrepreneur . net après impôt:
   identifiant court: auto-entrepreneur-net-apres-impot
   résumé: Avant déduction des dépenses liées à l'activité
   unité: €/an
+  arrondi: oui
   question: Quel est le revenu net après impôt souhaité ?
   description: >-
     Le revenu net de l'auto-entrepreneur après déduction de l'impôt 

modele-social/règles/entreprise-établissement.yaml

@@ -56,6 +56,7 @@ entreprise . chiffre d'affaires:
   question: Quel est votre chiffre d'affaires envisagé ?
   résumé: Montant total des recettes brutes (hors taxe)
   unité: €/an
+  arrondi: oui
   somme:
     - vente restauration hébergement
     - prestations de service

mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useMemo, useRef, useState } from 'react'
 import NumberFormat, { NumberFormatProps } from 'react-number-format'
-import { debounce, currencyFormat } from '../../utils'
+import { currencyFormat, debounce } from '../../utils'
 import './CurrencyInput.css'
 
 type CurrencyInputProps = NumberFormatProps & {
@@ -13,7 +13,7 @@ type CurrencyInputProps = NumberFormatProps & {
 }
 
 export default function CurrencyInput({
-	value: valueProp = '',
+	value,
 	debounce: debounceTimeout,
 	currencySymbol = '€',
 	onChange,
@@ -21,6 +21,7 @@ export default function CurrencyInput({
 	className,
 	...forwardedProps
 }: CurrencyInputProps) {
+	const valueProp = value ?? ''
 	const [initialValue, setInitialValue] = useState(valueProp)
 	const [currentValue, setCurrentValue] = useState(valueProp)
 	const onChangeDebounced = useMemo(

mon-entreprise/source/components/SimulationGoals.tsx

@@ -1,12 +1,12 @@
 import { updateSituation } from 'Actions/actions'
+import Animate from 'Components/ui/animate'
 import { DottedName } from 'modele-social'
 import { UNSAFE_isNotApplicable } from 'publicodes'
+import { createContext, useContext, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { situationSelector } from 'Selectors/simulationSelectors'
-import RuleInput, { RuleInputProps } from './conversation/RuleInput'
+import RuleInput from './conversation/RuleInput'
 import { useEngine } from './utils/EngineContext'
-import Animate from 'Components/ui/animate'
-import { useState, useEffect, createContext, useContext } from 'react'
 
 type SimulationGoalsProps = {
 	className?: string
@@ -42,11 +42,16 @@ function useInitialRender() {
 
 type SimulationGoalProps = {
 	dottedName: DottedName
-} & Omit<RuleInputProps, 'onChange'>
+	labelWithTitle?: boolean
+	small?: boolean
+	titleLevel?: number
+}
 
 export function SimulationGoal({
 	dottedName,
-	...otherProps
+	labelWithTitle = false,
+	small = false,
+	titleLevel = 2,
 }: SimulationGoalProps) {
 	const dispatch = useDispatch()
 	const engine = useEngine()
@@ -65,13 +70,13 @@ export function SimulationGoal({
 	}
 
 	return (
-		<li>
+		<li className={small ? 'small-target' : ''}>
 			<Animate.appear unless={initialRender}>
 				<div className="main">
 					<div className="header">
 						<label htmlFor={dottedName}>
 							<span className="optionTitle">
-								{rule.rawNode.question || rule.title}
+								{(!labelWithTitle && rule.rawNode.question) || rule.title}
 							</span>
 							<p className="ui__ notice">{rule.rawNode.résumé}</p>
 						</label>

mon-entreprise/source/components/simulationExplanation/AutoEntrepreneurExplanation.tsx

@@ -1,39 +0,0 @@
-import StackedBarChart from 'Components/StackedBarChart'
-import { ThemeColorsContext } from 'Components/utils/colors'
-import { default as React, useContext } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import AidesCovid from './AidesCovid'
-
-export default function AutoEntrepreneurExplanation() {
-	const { t } = useTranslation()
-	const { palettes } = useContext(ThemeColorsContext)
-	return (
-		<section>
-			<AidesCovid />
-			<br />
-			<h2>
-				<Trans>Répartition du chiffre d'affaires</Trans>
-			</h2>
-			<StackedBarChart
-				data={[
-					{
-						dottedName: 'dirigeant . auto-entrepreneur . net après impôt',
-						title: t("Revenu (incluant les dépenses liées à l'activité)"),
-						color: palettes[0][0],
-					},
-					{
-						dottedName: 'impôt',
-						title: t('impôt'),
-						color: palettes[1][0],
-					},
-					{
-						dottedName:
-							'dirigeant . auto-entrepreneur . cotisations et contributions',
-						title: t('Cotisations'),
-						color: palettes[1][1],
-					},
-				]}
-			/>
-		</section>
-	)
-}

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

@@ -1,4 +1,3 @@
-import useSimulationConfig from 'Components/utils/useSimulationConfig'
 import { DistributionBranch } from 'Components/Distribution'
 import Value, { Condition } from 'Components/EngineValue'
 import SimulateurWarning from 'Components/SimulateurWarning'
@@ -7,10 +6,11 @@ import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals'
 import 'Components/TargetSelection.css'
 import Animate from 'Components/ui/animate'
 import { EngineContext } from 'Components/utils/EngineContext'
+import useSimulationConfig from 'Components/utils/useSimulationConfig'
 import { DottedName } from 'modele-social'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useState } from 'react'
 import { Trans } from 'react-i18next'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { situationSelector } from 'Selectors/simulationSelectors'
 import styled from 'styled-components'
 import config from './configs/artiste-auteur.yaml'

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

@@ -0,0 +1,121 @@
+import { updateSituation } from 'Actions/actions'
+import { Condition } from 'Components/EngineValue'
+import RuleLink from 'Components/RuleLink'
+import SimulateurWarning from 'Components/SimulateurWarning'
+import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals'
+import StackedBarChart from 'Components/StackedBarChart'
+import { ThemeColorsContext } from 'Components/utils/colors'
+import { useEngine } from 'Components/utils/EngineContext'
+import { default as React, useContext } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useDispatch } from 'react-redux'
+import AidesCovid from '../../components/simulationExplanation/AidesCovid'
+
+export default function AutoEntrepreneur() {
+	const dispatch = useDispatch()
+
+	return (
+		<>
+			<SimulateurWarning simulateur="auto-entrepreneur" />
+			<SimulationGoals className="plain">
+				<ActivitéMixte />
+
+				<Condition expression="entreprise . activité . mixte = non">
+					<SimulationGoal
+						labelWithTitle
+						dottedName="dirigeant . auto-entrepreneur . chiffre d'affaires"
+					/>
+				</Condition>
+				<Condition expression="entreprise . activité . mixte">
+					<h2 className="optionTitle">
+						<RuleLink dottedName="entreprise . chiffre d'affaires" />
+					</h2>
+
+					<SimulationGoal
+						small
+						labelWithTitle
+						dottedName="entreprise . chiffre d'affaires . vente restauration hébergement"
+					/>
+					<SimulationGoal
+						labelWithTitle
+						small
+						titleLevel={3}
+						dottedName="entreprise . chiffre d'affaires . prestations de service . BIC"
+					/>
+					<SimulationGoal
+						labelWithTitle
+						small
+						dottedName="entreprise . chiffre d'affaires . prestations de service . BNC"
+					/>
+				</Condition>
+
+				<SimulationGoal
+					labelWithTitle
+					dottedName="dirigeant . auto-entrepreneur . net de cotisations"
+				/>
+				<SimulationGoal
+					labelWithTitle
+					dottedName="dirigeant . auto-entrepreneur . net après impôt"
+				/>
+			</SimulationGoals>
+			<Explanation />
+		</>
+	)
+}
+
+function ActivitéMixte() {
+	const defaultCheked = !!useEngine().evaluate('entreprise . activité . mixte')
+		.nodeValue
+	const dispatch = useDispatch()
+	return (
+		<label>
+			Activité mixte{' '}
+			<input
+				type="checkbox"
+				defaultChecked={defaultCheked}
+				onChange={(evt) =>
+					dispatch(
+						updateSituation(
+							'entreprise . activité . mixte',
+							evt.target.checked ? 'oui' : 'non'
+						)
+					)
+				}
+			/>
+		</label>
+	)
+}
+
+function Explanation() {
+	const { t } = useTranslation()
+	const { palettes } = useContext(ThemeColorsContext)
+	return (
+		<section>
+			<AidesCovid />
+			<br />
+			<h2>
+				<Trans>Répartition du chiffre d'affaires</Trans>
+			</h2>
+			<StackedBarChart
+				data={[
+					{
+						dottedName: 'dirigeant . auto-entrepreneur . net après impôt',
+						title: t("Revenu (incluant les dépenses liées à l'activité)"),
+						color: palettes[0][0],
+					},
+					{
+						dottedName: 'impôt',
+						title: t('impôt'),
+						color: palettes[1][0],
+					},
+					{
+						dottedName:
+							'dirigeant . auto-entrepreneur . cotisations et contributions',
+						title: t('Cotisations'),
+						color: palettes[1][1],
+					},
+				]}
+			/>
+		</section>
+	)
+}

mon-entreprise/source/pages/Simulateurs/configs/auto-entrepreneur.yaml

@@ -1,12 +1,6 @@
 objectifs:
-  - dirigeant . auto-entrepreneur . chiffre d'affaires
-  - entreprise . chiffre d'affaires . vente restauration hébergement
-  - entreprise . chiffre d'affaires . prestations de service . BIC
-  - entreprise . chiffre d'affaires . prestations de service . BNC
   - dirigeant . auto-entrepreneur . cotisations et contributions
-  - dirigeant . auto-entrepreneur . net de cotisations
   - dirigeant . auto-entrepreneur . net après impôt . impôt
-  - dirigeant . auto-entrepreneur . net après impôt
 
 questions:
   à l'affiche:

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

@@ -1,7 +1,6 @@
 import RuleLink from 'Components/RuleLink'
 import SimulateurWarning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
-import AutoEntrepreneurExplanation from 'Components/simulationExplanation/AutoEntrepreneurExplanation'
 import SalaryExplanation from 'Components/simulationExplanation/SalaryExplanation'
 import Emoji from 'Components/utils/Emoji'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
@@ -12,7 +11,9 @@ import { constructLocalizedSitePath } from '../../sitePaths'
 import { RessourceAutoEntrepreneur } from '../Créer/CreationChecklist'
 import AideDéclarationIndépendant from '../Gérer/AideDéclarationIndépendant'
 import FormulaireMobilitéIndépendant from '../Gérer/DemandeMobilite'
+import AidesEmbauche from './AidesEmbauche'
 import ArtisteAuteur from './ArtisteAuteur'
+import AutoEntrepreneur from './AutoEntrepreneur'
 import ChômagePartielComponent from './ChômagePartiel'
 import autoEntrepreneurConfig from './configs/auto-entrepreneur.yaml'
 import chômageParielConfig from './configs/chômage-partiel.yaml'
@@ -24,19 +25,18 @@ import AutoEntrepreneurPreview from './images/AutoEntrepreneurPreview.png'
 import ChômagePartielPreview from './images/ChômagePartielPreview.png'
 import urlIllustrationNetBrutEn from './images/illustration-net-brut-en.png'
 import urlIllustrationNetBrut from './images/illustration-net-brut.png'
+import logoFranceRelance from './images/logo-france-relance.svg'
 import RémunérationSASUPreview from './images/RémunérationSASUPreview.png'
 import salaireBrutNetPreviewEN from './images/SalaireBrutNetPreviewEN.png'
 import salaireBrutNetPreviewFR from './images/SalaireBrutNetPreviewFR.png'
-import logoFranceRelance from './images/logo-france-relance.svg'
-import PAMCHome from './PAMCHome'
 import IndépendantSimulation, {
 	IndépendantPLSimulation,
 } from './IndépendantSimulation'
-import SalariéSimulation from './SalariéSimulation'
 import ISSimulation from './ISSimulation'
+import PAMCHome from './PAMCHome'
+import SalariéSimulation from './SalariéSimulation'
 import SchemeComparaisonPage from './SchemeComparaison'
 import ÉconomieCollaborative from './ÉconomieCollaborative'
-import AidesEmbauche from './AidesEmbauche'
 
 const simulateurs = [
 	'salarié',
@@ -215,14 +215,7 @@ export function getSimulatorsData({
 					'Auto-entrepreneurs : simulateur de revenus'
 				),
 			},
-			component: function AutoEntrepreneurSimulation() {
-				return (
-					<>
-						<SimulateurWarning simulateur="auto-entrepreneur" />
-						<Simulation explanations={<AutoEntrepreneurExplanation />} />
-					</>
-				)
-			},
+			component: AutoEntrepreneur,
 			path: sitePaths.simulateurs['auto-entrepreneur'],
 			shortName: t(
 				'pages.simulateurs.auto-entrepreneur.shortname',