From deb7e63b8b9190c3808c4f89f3912f7bb88b0f17 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Fri, 3 May 2019 17:18:06 +0200 Subject: [PATCH] =?UTF-8?q?:art:=20premi=C3=A8re=20version=20de=20la=20pag?= =?UTF-8?q?e=20de=20comparaison=20de=20r=C3=A9gime?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/ComparativeTargets.css | 73 +++- source/components/ComparativeTargets.js | 335 ++++++++++-------- source/components/ui/Button/button.css | 2 +- .../SocialSecurity/SchemeComparaison.css | 69 ++++ .../pages/SocialSecurity/SchemeComparaison.js | 85 ++++- 5 files changed, 406 insertions(+), 158 deletions(-) create mode 100644 source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css diff --git a/source/components/ComparativeTargets.css b/source/components/ComparativeTargets.css index f38ee42ff..4c1239d6b 100644 --- a/source/components/ComparativeTargets.css +++ b/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; } diff --git a/source/components/ComparativeTargets.js b/source/components/ComparativeTargets.js index 601137447..ec3fb0927 100644 --- a/source/components/ComparativeTargets.js +++ b/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) => ( - -
- -
- - - +const ComparativeTargets = () => ( +
+
+

+ ☂ Assimilé salarié + Le régime tout compris +

+

+ 👩‍🔧 Indépendant + La protection à la carte +

+

+ 🚶‍♂️ Auto-entrepreneur + Pour les petites activités +

+ +
Sécurité sociale
+
Régime général
+
+ Sécurité sociale des indépendants (SSI)
+ +
Retraite
+
++
+
+
+
−
+ +
Assurance maladie
+
++
+
+
+ +
Indémnités journalières
+
++
+
+
+ +
Accidents du travail
+
Couverts
+
Non couverts
+
+

Comparez vos revenus et votre retraite en 1 minute

+ +
+
Paiment des cotisations
+
Mensuel (à la source)
+
Annuel avec deux ans de décalage
+
Mensuel ou trimestriel
+ +
ACCRE
+
Une année, plafonné
+
3 années, progressif, non plafonné
+ +
Déduction des charges
+
Régime réel
+
Abattement forfaitaire
+ +
Comptabilité
+
Expert 😩
+
Compliquée 😔
+
Simplifiée 😌
+ +
+ Complémentaires retraite et santé déductibles +
+
Oui (jusqu'à 50%)
+
Oui (Loi Madelin)
+
Non
+ + + +
- -)) - -const Indépendant = connectRègles('Indépendant')( - ({ - revenuDisponible, - branchIndex, - setSituationBranch, - defineDirectorStatus, - retraite, - isAutoentrepreneur - }) => ( - setSituationBranch(branchIndex)} - amount={revenuDisponible.montant} - icon="👩‍🔧" - amountDesc={} - features={[ - retraite.montant && ( - <> - : {retraite.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 AssimiléSalarié = connectRègles('Assimilé salarié')( - ({ - revenuDisponible, - branchIndex, - setSituationBranch, - defineDirectorStatus, - retraite - }) => ( - setSituationBranch(branchIndex)} - subtitle="Le régime tout compris" - amount={revenuDisponible.montant} - featured="Le choix de 58% des dirigeants de sociétés" - icon="☂" - amountDesc={} - features={[ - retraite.montant && ( - <> - : {retraite.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 +// }) => ( +// setSituationBranch(branchIndex)} +// amount={revenuDisponible.montant} +// icon="👩‍🔧" +// amountDesc={} +// features={[ +// retraite.montant && ( +// <> +// : {retraite.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 ( - setSituationBranch(branchIndex)} - disabled={plafondDépassé} - amountDesc={} - icon="🚶‍♂️" - amount={revenuDisponible.montant} - features={[ - retraite.montant && ( - <> - : {retraite.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 +// }) => ( +// setSituationBranch(branchIndex)} +// subtitle="Le régime tout compris" +// amount={revenuDisponible.montant} +// featured="Le choix de 58% des dirigeants de sociétés" +// icon="☂" +// amountDesc={} +// features={[ +// retraite.montant && ( +// <> +// : {retraite.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 ( +// setSituationBranch(branchIndex)} +// disabled={plafondDépassé} +// amountDesc={} +// icon="🚶‍♂️" +// amount={revenuDisponible.montant} +// features={[ +// retraite.montant && ( +// <> +// : {retraite.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 diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css index 6bf309906..e7e31ed14 100644 --- a/source/components/ui/Button/button.css +++ b/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%; diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css new file mode 100644 index 000000000..5522585e8 --- /dev/null +++ b/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; +} diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js index edf6db09b..b740fa4c0 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js +++ b/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 = () => ( /> -

Quel revenu pour l'indépendant ?

- - } /> +

Quel régime choisir pour l'indépendant ?

+ +
+
+

+ {emoji('☂')} Assimilé salarié + Le régime tout compris +

+

+ {emoji('👩‍🔧')} Indépendant + La protection à la carte +

+

+ {emoji('🚶‍♂️')} Auto-entrepreneur + Pour les petites activités +

+ +
Sécurité sociale
+
Régime général
+
+ Sécurité sociale des indépendants (SSI) +
+ +
Assurance maladie
+
++
+
+
+ +
Indémnités journalières
+
++
+
+
+ +
Accidents du travail couverts
+
Oui
+
Non
+
Retraite
+
++
+
+
+
−
+
+

Comparez vos revenus et votre retraite en 1 minute

+ +
+
Paiment des cotisations
+
Mensuel (à la source)
+
Annuel avec deux ans de décalage
+
Mensuel ou trimestriel
+ +
ACCRE
+
Une année, plafonné
+
3 années, progressif, non plafonné
+ +
Déduction des charges
+
Régime réel
+
Abattement forfaitaire
+ +
Comptabilité
+
Expert {emoji('😩')}
+
Compliquée {emoji('😔')}
+
Simplifiée {emoji('😌')}
+ +
+ Complémentaires retraite et santé déductibles +
+
Oui (jusqu'à 50%)
+
Oui (Loi Madelin)
+
Non
+ +
Statuts juridiques
+
SAS, SASU, SARL minoritaire
+
EI, EURL, SARL majoritaire
+
Micro-entreprise
+ + + + +
+
)