🎨 première version de la page de comparaison de régime

source/components/ComparativeTargets.css

@@ -1,4 +1,4 @@
-.comparative-targets {
+/* .comparative-targets {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -8,4 +8,75 @@
 		flex-direction: column;
 		align-items: center;
 	}
+} */
+
+.comparaison-grid {
+	display: grid;
+	justify-items: stretch;
+	grid-template-columns: [row-legend] 15rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 1fr [end];
+}
+
+.comparaison-grid > * {
+	border-bottom: 1px solid #dfdfdf;
+	padding: 0.6rem 1.2rem;
+	border-right: 1px solid #dfdfdf;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: right;
+}
+.comparaison-grid > h2 {
+	margin: 0;
+	flex-direction: column;
+	border: none;
+}
+.comparaison-grid > .legend {
+	justify-content: flex-end;
+	grid-column: row-legend;
+}
+
+.comparaison-grid > .AS-et-indep {
+	grid-column: assimilé-salarié / auto-entrepreneur;
+}
+.comparaison-grid > .AS {
+	grid-column: assimilé-salarié;
+}
+.comparaison-grid > .indep {
+	grid-column: indépendant;
+}
+.comparaison-grid > .auto {
+	grid-column: auto-entrepreneur;
+}
+.comparaison-grid > .all {
+	grid-column: assimilé-salarié / end;
+	border-left: 1px solid #dfdfdf;
+	margin-left: -1px;
+}
+
+.comparaison-grid > .indep-et-auto {
+	grid-column: indépendant / end;
+	text-align: center;
+}
+
+.comparaison-grid.hide-auto-entrepreneur {
+	grid-template-columns: [row-legend] 15rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 0 [end];
+}
+.comparaison-grid.hide-auto-entrepreneur > .auto {
+	display: none;
+}
+
+.comparaison-grid > .green {
+	font-size: 120%;
+	font-weight: bold;
+	color: limegreen;
+}
+
+.comparaison-grid > .red {
+	font-size: 120%;
+	font-weight: bold;
+	color: red;
+}
+.comparaison-grid > .ui__.button {
+	place-self: center;
+	margin: 1rem 0;
 }

source/components/ComparativeTargets.js

@@ -4,17 +4,11 @@ import {
 	defineDirectorStatus,
 	isAutoentrepreneur
 } from 'Actions/companyStatusActions'
-import PeriodSwitch from 'Components/PeriodSwitch'
-import RuleLink from 'Components/RuleLink'
 import React from 'react'
 import { connect } from 'react-redux'
-import { branchAnalyseSelector } from 'Selectors/analyseSelectors'
 import { règleAvecMontantSelector } from 'Selectors/regleSelectors'
-import Animate from 'Ui/animate'
-import Montant from 'Ui/Montant'
 import { noUserInputSelector } from '../selectors/analyseSelectors'
 import './ComparativeTargets.css'
-import SchemeCard from './ui/SchemeCard'
 
 import type { RègleAvecMontant } from 'Types/RegleTypes'
 
@@ -44,154 +38,195 @@ const connectRègles = (situationBranchName: string) =>
 		}
 	)
 
-type ComparativeTargetsProps = {
-	plafondAutoEntrepreneurDépassé: ?{ message: string }
-}
-const ComparativeTargets: React$ComponentType<{}> = connect(state => {
-	const analyse = branchAnalyseSelector(state, {
-		situationBranchName: 'Auto-entrepreneur'
-	})
-	return {
-		plafondAutoEntrepreneurDépassé:
-			analyse.controls &&
-			analyse.controls.find(({ test }) =>
-				test.includes('base des cotisations > plafond')
-			)
-	}
-})(({ plafondAutoEntrepreneurDépassé }: ComparativeTargetsProps) => (
-	<Animate.fromBottom>
-		<div className="ui__ full-width">
-			<PeriodSwitch />
-			<div className="comparative-targets ">
-				<AutoEntrepreneur
-					branchIndex={0}
-					plafondDépassé={
-						plafondAutoEntrepreneurDépassé &&
-						plafondAutoEntrepreneurDépassé.message
-					}
-				/>
-				<AssimiléSalarié branchIndex={2} />
-				<Indépendant branchIndex={1} />
+const ComparativeTargets = () => (
+	<div className="ui__ full-width">
+		<div className="comparaison-grid ">
+			<h2 className="AS">
+				☂ Assimilé salarié
+				<small>Le régime tout compris</small>
+			</h2>
+			<h2 className="indep">
+				👩‍🔧 Indépendant
+				<small>La protection à la carte</small>
+			</h2>
+			<h2 className="auto">
+				🚶‍♂️ Auto-entrepreneur
+				<small>Pour les petites activités</small>
+			</h2>
+
+			<div className="legend">Sécurité sociale</div>
+			<div className="AS">Régime général</div>
+			<div className="indep-et-auto">
+				Sécurité sociale des indépendants (SSI)
 			</div>
+
+			<div className="legend">Retraite</div>
+			<div className="green AS">++</div>
+			<div className="green indep">+</div>
+			<div className="red auto">−</div>
+
+			<div className="legend">Assurance maladie</div>
+			<div className="green AS">++</div>
+			<div className="green indep-et-auto">+</div>
+
+			<div className="legend">Indémnités journalières</div>
+			<div className="green AS">++</div>
+			<div className="indep-et-auto green">+</div>
+
+			<div className="legend">Accidents du travail </div>
+			<div className="AS">Couverts</div>
+			<div className="indep-et-auto">Non couverts</div>
+			<div className="all">
+				<h3>Comparez vos revenus et votre retraite en 1 minute</h3>
+				<button className="ui__ cta plain button">Commencer</button>
+			</div>
+			<div className="legend">Paiment des cotisations</div>
+			<div className="AS">Mensuel (à la source)</div>
+			<div className="indep">Annuel avec deux ans de décalage</div>
+			<div className="auto">Mensuel ou trimestriel</div>
+
+			<div className="legend">ACCRE</div>
+			<div className="AS-et-indep">Une année, plafonné</div>
+			<div className="auto">3 années, progressif, non plafonné</div>
+
+			<div className="legend">Déduction des charges</div>
+			<div className="AS-et-indep">Régime réel </div>
+			<div className="auto">Abattement forfaitaire </div>
+
+			<div className="legend">Comptabilité</div>
+			<div className="AS">Expert 😩</div>
+			<div className="indep">Compliquée 😔</div>
+			<div className="auto">Simplifiée 😌</div>
+
+			<div className="legend">
+				Complémentaires retraite et santé déductibles
+			</div>
+			<div className="AS">Oui (jusqu'à 50%)</div>
+			<div className="indep">Oui (Loi Madelin)</div>
+			<div className="auto">Non</div>
+
+			<button className="AS ui__ button">Choisir ce régime</button>
+			<button className="indep ui__ button">Choisir ce régime</button>
+			<button className="auto ui__ button">Choisir ce régime</button>
 		</div>
-	</Animate.fromBottom>
-))
-
-const Indépendant = connectRègles('Indépendant')(
-	({
-		revenuDisponible,
-		branchIndex,
-		setSituationBranch,
-		defineDirectorStatus,
-		retraite,
-		isAutoentrepreneur
-	}) => (
-		<SchemeCard
-			title="Indépendant"
-			subtitle="La protection à la carte"
-			onAmountClick={() => setSituationBranch(branchIndex)}
-			amount={revenuDisponible.montant}
-			icon="👩‍🔧"
-			amountDesc={<RuleLink {...revenuDisponible} />}
-			features={[
-				retraite.montant && (
-					<>
-						<RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
-					</>
-				),
-				'Régime des indépendants',
-				'Complémentaire santé et prévoyance non incluses',
-				'Accidents du travail non couverts',
-				'Retraite faible (41% du dernier brut)',
-				'Indemnités journalières plus faibles',
-				'Montant minimum de cotisations',
-				'Cotisations en décalage de deux ans'
-			].filter(Boolean)}
-			onSchemeChoice={() => {
-				defineDirectorStatus('SELF_EMPLOYED')
-				isAutoentrepreneur(false)
-			}}
-		/>
-	)
+	</div>
 )
 
-const AssimiléSalarié = connectRègles('Assimilé salarié')(
-	({
-		revenuDisponible,
-		branchIndex,
-		setSituationBranch,
-		defineDirectorStatus,
-		retraite
-	}) => (
-		<SchemeCard
-			title="Assimilé salarié"
-			onAmountClick={() => setSituationBranch(branchIndex)}
-			subtitle="Le régime tout compris"
-			amount={revenuDisponible.montant}
-			featured="Le choix de 58% des dirigeants de sociétés"
-			icon="☂"
-			amountDesc={<RuleLink {...revenuDisponible} />}
-			features={[
-				retraite.montant && (
-					<>
-						<RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
-					</>
-				),
-				'Régime général',
-				'Complémentaires santé et prévoyance incluses',
-				'Accidents du travail couverts',
-				'Retraite élevée (62 % du dernier brut)',
-				'Pas de cotisations minimales',
-				"Seuil pour l'activation des droits (4000€/an)",
-				'Fiches de paie mensuelles',
-				'Prélèvement des cotisations à la source'
-			].filter(Boolean)}
-			onSchemeChoice={() => {
-				defineDirectorStatus('SALARIED')
-				isAutoentrepreneur(false)
-			}}
-		/>
-	)
-)
+// const Indépendant = connectRègles('Indépendant')(
+// 	({
+// 		revenuDisponible,
+// 		branchIndex,
+// 		setSituationBranch,
+// 		defineDirectorStatus,
+// 		retraite,
+// 		isAutoentrepreneur
+// 	}) => (
+// 		<SchemeCard
+// 			title="Indépendant"
+// 			subtitle="La protection à la carte"
+// 			onAmountClick={() => setSituationBranch(branchIndex)}
+// 			amount={revenuDisponible.montant}
+// 			icon="👩‍🔧"
+// 			amountDesc={<RuleLink {...revenuDisponible} />}
+// 			features={[
+// 				retraite.montant && (
+// 					<>
+// 						<RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
+// 					</>
+// 				),
+// 				'Régime des indépendants',
+// 				'Complémentaire santé et prévoyance non incluses',
+// 				'Accidents du travail non couverts',
+// 				'Retraite faible (41% du dernier brut)',
+// 				'Indemnités journalières plus faibles',
+// 				'Montant minimum de cotisations',
+// 				'Cotisations en décalage de deux ans'
+// 			].filter(Boolean)}
+// 			onSchemeChoice={() => {
+// 				defineDirectorStatus('SELF_EMPLOYED')
+// 				isAutoentrepreneur(false)
+// 			}}
+// 		/>
+// 	)
+// )
 
-const AutoEntrepreneur = connectRègles('Auto-entrepreneur')(
-	({
-		revenuDisponible,
-		setSituationBranch,
-		isAutoentrepreneur,
-		retraite,
-		branchIndex,
-		plafondDépassé
-	}) => {
-		return (
-			<SchemeCard
-				title="Auto-entrepreneur"
-				subtitle="Pour les petites activités"
-				onAmountClick={() => setSituationBranch(branchIndex)}
-				disabled={plafondDépassé}
-				amountDesc={<RuleLink {...revenuDisponible} />}
-				icon="🚶‍♂️"
-				amount={revenuDisponible.montant}
-				features={[
-					retraite.montant && (
-						<>
-							<RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
-						</>
-					),
-					'Régime des indépendants',
-					'Pas de déduction des charges',
-					'Pas de déduction fiscale pour la mutuelle (Madelin)',
-					"Chiffre d'affaires plafonné",
-					"Durée de l'ACRE plus élevée",
-					'Comptabilité réduite au minimum'
-				].filter(Boolean)}
-				onSchemeChoice={() => {
-					defineDirectorStatus('SELF_EMPLOYED')
-					isAutoentrepreneur(true)
-				}}
-			/>
-		)
-	}
-)
+// const AssimiléSalarié = connectRègles('Assimilé salarié')(
+// 	({
+// 		revenuDisponible,
+// 		branchIndex,
+// 		setSituationBranch,
+// 		defineDirectorStatus,
+// 		retraite
+// 	}) => (
+// 		<SchemeCard
+// 			title="Assimilé salarié"
+// 			onAmountClick={() => setSituationBranch(branchIndex)}
+// 			subtitle="Le régime tout compris"
+// 			amount={revenuDisponible.montant}
+// 			featured="Le choix de 58% des dirigeants de sociétés"
+// 			icon="☂"
+// 			amountDesc={<RuleLink {...revenuDisponible} />}
+// 			features={[
+// 				retraite.montant && (
+// 					<>
+// 						<RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
+// 					</>
+// 				),
+// 				'Régime général',
+// 				'Complémentaires santé et prévoyance incluses',
+// 				'Accidents du travail couverts',
+// 				'Retraite élevée (62 % du dernier brut)',
+// 				'Pas de cotisations minimales',
+// 				"Seuil pour l'activation des droits (4000€/an)",
+// 				'Fiches de paie mensuelles',
+// 				'Prélèvement des cotisations à la source'
+// 			].filter(Boolean)}
+// 			onSchemeChoice={() => {
+// 				defineDirectorStatus('SALARIED')
+// 				isAutoentrepreneur(false)
+// 			}}
+// 		/>
+// 	)
+// )
+
+// const AutoEntrepreneur = connectRègles('Auto-entrepreneur')(
+// 	({
+// 		revenuDisponible,
+// 		setSituationBranch,
+// 		isAutoentrepreneur,
+// 		retraite,
+// 		branchIndex,
+// 		plafondDépassé
+// 	}) => {
+// 		return (
+// 			<SchemeCard
+// 				title="Auto-entrepreneur"
+// 				subtitle="Pour les petites activités"
+// 				onAmountClick={() => setSituationBranch(branchIndex)}
+// 				disabled={plafondDépassé}
+// 				amountDesc={<RuleLink {...revenuDisponible} />}
+// 				icon="🚶‍♂️"
+// 				amount={revenuDisponible.montant}
+// 				features={[
+// 					retraite.montant && (
+// 						<>
+// 							<RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
+// 						</>
+// 					),
+// 					'Régime des indépendants',
+// 					'Pas de déduction des charges',
+// 					'Pas de déduction fiscale pour la mutuelle (Madelin)',
+// 					"Chiffre d'affaires plafonné",
+// 					"Durée de l'ACRE plus élevée",
+// 					'Comptabilité réduite au minimum'
+// 				].filter(Boolean)}
+// 				onSchemeChoice={() => {
+// 					defineDirectorStatus('SELF_EMPLOYED')
+// 					isAutoentrepreneur(true)
+// 				}}
+// 			/>
+// 		)
+// 	}
+// )
 
 export default ComparativeTargets

source/components/ui/Button/button.css

@@ -83,7 +83,7 @@
 }
 .ui__.button.cta,
 .ui__.inverted-button.cta {
-	margin: 3rem auto;
+	margin: 2rem;
 	display: inline-block;
 	align-self: center;
 	font-size: 120%;

source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css

@@ -0,0 +1,69 @@
+.comparaison-grid {
+	display: grid;
+	justify-items: stretch;
+	grid-template-columns: [row-legend] 16rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 1fr [end];
+}
+
+.comparaison-grid > * {
+	border-bottom: 1px solid #dfdfdf;
+	padding: 0.6rem 1.2rem;
+	border-right: 1px solid #dfdfdf;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	flex-wrap: wrap;
+}
+.comparaison-grid > h2 {
+	margin: 0;
+	flex-direction: column;
+	border: none;
+}
+.comparaison-grid > .legend {
+	justify-content: flex-end;
+	grid-column: row-legend;
+	text-align: right;
+}
+
+.comparaison-grid > .AS-et-indep {
+	grid-column: assimilé-salarié / auto-entrepreneur;
+}
+.comparaison-grid > .AS {
+	grid-column: assimilé-salarié;
+}
+.comparaison-grid > .indep {
+	grid-column: indépendant;
+}
+.comparaison-grid > .auto {
+	grid-column: auto-entrepreneur;
+}
+.comparaison-grid > .all {
+	grid-column: row-legend / end;
+	background-color: var(--lightestColour);
+}
+
+.comparaison-grid > .indep-et-auto {
+	grid-column: indépendant / end;
+	text-align: center;
+}
+
+.comparaison-grid.hide-auto-entrepreneur {
+	grid-template-columns: [row-legend] 15rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 0 [end];
+}
+.comparaison-grid.hide-auto-entrepreneur > .auto {
+	display: none;
+}
+
+.comparaison-grid > .green {
+	font-weight: bold;
+	color: limegreen;
+}
+
+.comparaison-grid > .red {
+	font-weight: bold;
+	color: red;
+}
+.comparaison-grid > .ui__.button {
+	place-self: center;
+	margin: 1rem 0;
+}

source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js

@@ -1,11 +1,10 @@
-import ComparativeTargets from 'Components/ComparativeTargets'
-import Warning from 'Components/SimulateurWarning'
-import Simulation from 'Components/Simulation'
 import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml'
 import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
 import React from 'react'
+import emoji from 'react-easy-emoji'
 import { Helmet } from 'react-helmet'
 import Animate from 'Ui/animate'
+import './SchemeComparaison.css'
 
 const SchemeComparaisonPage = () => (
 	<>
@@ -22,9 +21,83 @@ const SchemeComparaisonPage = () => (
 			/>
 		</Helmet>
 		<Animate.fromBottom>
-			<h1>Quel revenu pour l'indépendant ?</h1>
-			<Warning />
-			<Simulation showTargetsAnyway targets={<ComparativeTargets />} />
+			<h1>Quel régime choisir pour l'indépendant ?</h1>
+
+			<div className="ui__ full-width">
+				<div className="comparaison-grid ">
+					<h2 className="AS">
+						{emoji('☂')} Assimilé salarié
+						<small>Le régime tout compris</small>
+					</h2>
+					<h2 className="indep">
+						{emoji('👩‍🔧')} Indépendant
+						<small>La protection à la carte</small>
+					</h2>
+					<h2 className="auto">
+						{emoji('🚶‍♂️')} Auto-entrepreneur
+						<small>Pour les petites activités</small>
+					</h2>
+
+					<div className="legend">Sécurité sociale</div>
+					<div className="AS">Régime général</div>
+					<div className="indep-et-auto">
+						Sécurité sociale des indépendants (SSI)
+					</div>
+
+					<div className="legend">Assurance maladie</div>
+					<div className="green AS">++</div>
+					<div className="green indep-et-auto">+</div>
+
+					<div className="legend">Indémnités journalières</div>
+					<div className="green AS">++</div>
+					<div className="indep-et-auto green">+</div>
+
+					<div className="legend">Accidents du travail couverts</div>
+					<div className="AS">Oui</div>
+					<div className="indep-et-auto">Non</div>
+					<div className="legend">Retraite</div>
+					<div className="green AS">++</div>
+					<div className="green indep">+</div>
+					<div className="red auto">−</div>
+					<div className="all">
+						<h3>Comparez vos revenus et votre retraite en 1 minute</h3>
+						<button className="ui__ cta plain button">Commencer</button>
+					</div>
+					<div className="legend">Paiment des cotisations</div>
+					<div className="AS">Mensuel (à la source)</div>
+					<div className="indep">Annuel avec deux ans de décalage</div>
+					<div className="auto">Mensuel ou trimestriel</div>
+
+					<div className="legend">ACCRE</div>
+					<div className="AS-et-indep">Une année, plafonné</div>
+					<div className="auto">3 années, progressif, non plafonné</div>
+
+					<div className="legend">Déduction des charges</div>
+					<div className="AS-et-indep">Régime réel </div>
+					<div className="auto">Abattement forfaitaire </div>
+
+					<div className="legend">Comptabilité</div>
+					<div className="AS">Expert&nbsp;{emoji('😩')}</div>
+					<div className="indep">Compliquée&nbsp;{emoji('😔')}</div>
+					<div className="auto">Simplifiée&nbsp;{emoji('😌')}</div>
+
+					<div className="legend">
+						Complémentaires retraite et santé déductibles
+					</div>
+					<div className="AS">Oui (jusqu'à 50%)</div>
+					<div className="indep">Oui (Loi Madelin)</div>
+					<div className="auto">Non</div>
+
+					<div className="legend">Statuts juridiques</div>
+					<div className="AS">SAS, SASU, SARL minoritaire</div>
+					<div className="indep">EI, EURL, SARL majoritaire</div>
+					<div className="auto">Micro-entreprise</div>
+
+					<button className="AS ui__ button">Choisir ce régime</button>
+					<button className="indep ui__ button">Choisir ce régime</button>
+					<button className="auto ui__ button">Choisir ce régime</button>
+				</div>
+			</div>
 		</Animate.fromBottom>
 	</>
 )