From e106915a79e6adbce1e2d67cb8ecb40031e53f71 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 2 May 2019 18:49:45 +0200 Subject: [PATCH 01/80] =?UTF-8?q?:hammer:=20Premi=C3=A8re=20version=20de?= =?UTF-8?q?=20l'estimation=20du=20montant=20de=20la=20retraite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/ComparativeTargets.js | 64 +++++-- .../rémunération-dirigeant.yaml | 3 +- source/règles/base.yaml | 160 +++++++++++++++++- 3 files changed, 207 insertions(+), 20 deletions(-) diff --git a/source/components/ComparativeTargets.js b/source/components/ComparativeTargets.js index 2aae0c470..601137447 100644 --- a/source/components/ComparativeTargets.js +++ b/source/components/ComparativeTargets.js @@ -4,13 +4,14 @@ 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 { config } from 'react-spring' 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' @@ -25,9 +26,15 @@ const connectRègles = (situationBranchName: string) => !noUserInputSelector(state) && règleAvecMontantSelector(state, { situationBranchName - })('revenu net') + })('revenu net'), + retraite: + !noUserInputSelector(state) && + règleAvecMontantSelector(state, { + situationBranchName + })('protection sociale . retraite') }: { - revenuDisponible: boolean | RègleAvecMontant + revenuDisponible: boolean | RègleAvecMontant, + retraite: boolean | RègleAvecMontant }) }, { @@ -52,17 +59,20 @@ const ComparativeTargets: React$ComponentType<{}> = connect(state => { ) } })(({ plafondAutoEntrepreneurDépassé }: ComparativeTargetsProps) => ( - -
- - - + +
+ +
+ + + +
)) @@ -73,6 +83,7 @@ const Indépendant = connectRègles('Indépendant')( branchIndex, setSituationBranch, defineDirectorStatus, + retraite, isAutoentrepreneur }) => ( } features={[ + retraite.montant && ( + <> + : {retraite.montant} + + ), 'Régime des indépendants', 'Complémentaire santé et prévoyance non incluses', 'Accidents du travail non couverts', @@ -90,7 +106,7 @@ const Indépendant = connectRègles('Indépendant')( '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) @@ -104,7 +120,8 @@ const AssimiléSalarié = connectRègles('Assimilé salarié')( revenuDisponible, branchIndex, setSituationBranch, - defineDirectorStatus + defineDirectorStatus, + retraite }) => ( } features={[ + retraite.montant && ( + <> + : {retraite.montant} + + ), 'Régime général', 'Complémentaires santé et prévoyance incluses', 'Accidents du travail couverts', @@ -123,7 +145,7 @@ const AssimiléSalarié = connectRègles('Assimilé salarié')( "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) @@ -137,6 +159,7 @@ const AutoEntrepreneur = connectRègles('Auto-entrepreneur')( revenuDisponible, setSituationBranch, isAutoentrepreneur, + retraite, branchIndex, plafondDépassé }) => { @@ -150,13 +173,18 @@ const AutoEntrepreneur = connectRègles('Auto-entrepreneur')( 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) diff --git a/source/components/simulationConfigs/rémunération-dirigeant.yaml b/source/components/simulationConfigs/rémunération-dirigeant.yaml index f032ce159..d5cedaa5f 100644 --- a/source/components/simulationConfigs/rémunération-dirigeant.yaml +++ b/source/components/simulationConfigs/rémunération-dirigeant.yaml @@ -3,13 +3,14 @@ titre: | objectifs: - revenu net + - protection sociale . retraite questions: - entreprise . chiffre d'affaires - entreprise . charges + - entreprise . année d'activité - entreprise . catégorie d'activité - entreprise . catégorie d'activité . service ou vente - entreprise . catégorie d'activité . restauration ou hébergement - - entreprise . catégorie d'activité . libérale règlementée bloquant: - entreprise . chiffre d'affaires diff --git a/source/règles/base.yaml b/source/règles/base.yaml index a0df0d09a..b95b65920 100644 --- a/source/règles/base.yaml +++ b/source/règles/base.yaml @@ -876,6 +876,14 @@ références: décret: https://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000037833206 +- espace: contrat salarié + nom: SMIC horaire + formule: 10.03 + format: euros + références: + décret: https://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000037833206 + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F2300 + - espace: contrat salarié nom: SMIC période: flexible @@ -2806,7 +2814,7 @@ nom: catégorie d'activité question: Quelle est votre catégorie d'activité ? description: Votre catégorie d'activité va déterminer une grande partie des calculs de cotisation, contribution et impôt. - par défaut: libérale + par défaut: commerciale ou industrielle formule: une possibilité: choix obligatoire: oui @@ -3598,8 +3606,158 @@ Simulez et gérez votre retraite sur [info-retraite.fr](https://www.info-retraite.fr/portail-info/home.html). références: + CNAV: https://www.lassuranceretraite.fr OCDE: https://read.oecd-ilibrary.org/social-issues-migration-health/pensions-at-a-glance-2017_pension_glance-2017-en#page135 INSEE: https://www.insee.fr/fr/statistiques/fichier/3549496/REVPMEN18_F1.21_niv-pauv-pers-agees.pdf + non applicable si: indépendant . rattachement libéral règlementé + + + format: euros + période: flexible + formule: + somme: + - base + - complémentaire salarié + - complémentaire indépendant + + note: | + Il s'agit d'une estimation a but purement indicatif, afin de comparer la retraite des différents régimes. + On se limite notamment aux hypothèses suivantes : + - On considère que le travailleur a pris sa retraite à taux plein, en cotisant le nombre de trimestre recquis (172) + - On considère que le travailleur a eu le même revenu tout au long de sa carrière + - On considère que le travailleur est resté dans le même régime tout au long de sa carrière + - On ne prends pas en compte les minorations / majorations + - On ne prends pas en compte les seuils de rémunération minimum pour la validation des trimestres + - On ne prends pas en compte les caisse de retraite particulière (CIPAV) + - On ne prends pas en compte les seuils CA minimum pour la validation des trimestres pour les auto entrepreneur + + Ces limites seront amenés à évoluer au fur et à mesure du développement du simulateur + +- nom: base + espace: protection sociale . retraite + titre: pension de retraite de base + format: euros + période: flexible + formule: + le maximum de: + - minimum contributif + - multiplication: + plafond: plafond sécurité sociale temps plein + taux: 50% + assiette: revenu annuel moyen + références: + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F21552 + +- espace: protection sociale . retraite + nom: revenu annuel moyen + format: euros + période: flexible + formule: + le maximum de : + - indépendant . revenu net de cotisations + - auto entrepreneur . impôt . revenu abattu + - contrat salarié . rémunération . brut + +- espace: protection sociale . retraite + nom: mois cotisés + formule: 172 * 3 + notes: On prends l'hypotèse d'une retraite à taux plein pour un travailleur né après + format: euros + +- espace: protection sociale . retraite . base + nom: minimum contributif + formule: 695.59 + format: euros + période: mois + notes: + On ne prends pas encore en compte la condition d'applicabilité de retraite de base + complémentaires < 1 177,44 € / mois + références: + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F15522 + +- espace: protection sociale . retraite + nom: complémentaire salarié + formule: points acquis * valeur du point + période: année + références: + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F15396 + + +- espace: protection sociale . retraite . complémentaire salarié + nom: valeur du point + formule: 1.2588 + période: année + format: euros + références: + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F15396 + agirc-arrco: https://www.agirc-arrco.fr/ressources-documentaires/chiffres-cles/ + + +- espace: protection sociale . retraite . complémentaire salarié + nom: points acquis + formule: points acquis par mois * mois cotisés + période: aucune + références: + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F15396 + +- espace: protection sociale . retraite . complémentaire salarié + nom: points acquis par mois + période: mois + formule: + contrat salarié . retraite complémentaire / prix d'achat du point + + +- espace: protection sociale . retraite . complémentaire salarié + nom: prix d'achat du point + formule: 16.7226 + période: mois + format: euros + références: + service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F15396 + + + + + + +- espace: protection sociale . retraite + nom: complémentaire indépendant + formule: points acquis * valeur du point + période: année + références: + secu-independants.fr: https://www.secu-independants.fr/retraite/calcul-retraite/retraite-complementaire/ + + +- espace: protection sociale . retraite . complémentaire indépendant + nom: valeur du point + formule: 1.187 + période: année + format: euros + références: + secu-independants.fr: https://www.secu-independants.fr/baremes/prestations-vieillesse-et-invalidite-deces + + +- espace: protection sociale . retraite . complémentaire indépendant + nom: points acquis + formule: points acquis par mois * mois cotisés + période: aucune + +- espace: protection sociale . retraite . complémentaire indépendant + nom: points acquis par mois + période: mois + formule: + indépendant . cotisations et contributions . cotisations . retraite complémentaire / prix d'achat du point + +- espace: protection sociale . retraite . complémentaire indépendant + nom: prix d'achat du point + formule: 17.456 + période: mois + format: euros + notes: il s'agit du prix d'achat 2018 (la valeur pour 2019 sur le site secu-independants.fr est marquée comme N.C) + références: + https://www.secu-independants.fr/baremes/baremes-2018/baremesprestations-maladie-maternite/?reg=ile-de-france-centre&ae=oui + + + - nom: santé espace: protection sociale From deb7e63b8b9190c3808c4f89f3912f7bb88b0f17 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Fri, 3 May 2019 17:18:06 +0200 Subject: [PATCH 02/80] =?UTF-8?q?:art:=20premi=C3=A8re=20version=20de=20la?= =?UTF-8?q?=20page=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
+ + + + +
+
) From 4b8c58d9b9ef48e6147a5318f490723627a87ac6 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 6 May 2019 17:03:04 +0200 Subject: [PATCH 03/80] =?UTF-8?q?Ajoute=20la=20simulation=20=C3=A0=20la=20?= =?UTF-8?q?page=20de=20comparaison=20des=20r=C3=A9gimes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SocialSecurity/SchemeComparaison.css | 10 +- .../pages/SocialSecurity/SchemeComparaison.js | 219 +++++++++++++++--- 2 files changed, 192 insertions(+), 37 deletions(-) diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css index 5522585e8..5711ed592 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css @@ -14,6 +14,7 @@ text-align: center; flex-wrap: wrap; } + .comparaison-grid > h2 { margin: 0; flex-direction: column; @@ -38,13 +39,16 @@ grid-column: auto-entrepreneur; } .comparaison-grid > .all { + text-align: left; grid-column: row-legend / end; background-color: var(--lightestColour); } .comparaison-grid > .indep-et-auto { grid-column: indépendant / end; - text-align: center; +} +.comparaison-grid > .AS-indep-et-auto { + grid-column: assimilé-salarié / end; } .comparaison-grid.hide-auto-entrepreneur { @@ -63,6 +67,10 @@ font-weight: bold; color: red; } +.comparaison-grid > .big { + font-size: 110%; +} + .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 b740fa4c0..67d3f47d7 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js @@ -1,30 +1,63 @@ +/* @flow */ +import { startConversation } from 'Actions/actions' +import PeriodSwitch from 'Components/PeriodSwitch' +import Simulation from 'Components/Simulation' import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml' import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig' +import { compose, map, tryCatch } from 'ramda' import React from 'react' import emoji from 'react-easy-emoji' import { Helmet } from 'react-helmet' +import { connect } from 'react-redux' +import { noUserInputSelector } from 'Selectors/analyseSelectors' +import { règleAvecMontantSelector } from 'Selectors/regleSelectors' import Animate from 'Ui/animate' +import AnimatedTargetValue from 'Ui/AnimatedTargetValue' import './SchemeComparaison.css' +import type { RègleAvecMontant } from 'Types/RegleTypes' -const SchemeComparaisonPage = () => ( - <> - - - Assimilé salarié, indépendant, auto-entrepreneur : comparaison des - régimes - - - - + /> +

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

-
+

{emoji('☂')} Assimilé salarié Le régime tout compris @@ -44,6 +77,10 @@ const SchemeComparaisonPage = () => ( Sécurité sociale des indépendants (SSI)

+
Accidents du travail couverts
+
Oui
+
Non
+
Assurance maladie
++
+
@@ -52,22 +89,99 @@ const SchemeComparaisonPage = () => (
++
+
-
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
+ {!conversationStarted && ( + <> +
Retraite
+
++
+
+
+
−
+ + )} + {conversationStarted && ( + <> +
Période
+
+ +
+ + )} +
+ {!conversationStarted ? ( + <> +

Comparez vos revenus et votre retraite en 1 minute

+ + + ) : ( +
+ +
+ )} +
+ + {conversationStarted && ( + <> +
Revenu net
+
+ {assimiléSalarié && ( + + + + )} +
+
+ {indépendant && ( + + + + )} +
+
+ {autoEntrepreneur && ( + + + + )} +
+ +
Retraite
+
+ {assimiléSalarié && ( + + + + )} +
+
+ {indépendant && ( + + + + )} +
+ + + )}
ACCRE
Une année, plafonné
3 années, progressif, non plafonné
@@ -77,9 +191,14 @@ const SchemeComparaisonPage = () => (
Abattement forfaitaire
Comptabilité
-
Expert {emoji('😩')}
-
Compliquée {emoji('😔')}
-
Simplifiée {emoji('😌')}
+
Expert
+
Compliquée
+
Simplifiée
+ +
Paiment des cotisations
+
Mensuel (à la source)
+
Annuel avec deux ans de décalage
+
Mensuel ou trimestriel
Complémentaires retraite et santé déductibles @@ -98,8 +217,36 @@ const SchemeComparaisonPage = () => (
- - -) + + ) +} -export default withSimulationConfig(ComparaisonConfig)(SchemeComparaisonPage) +export default (compose( + connect( + state => ({ + conversationStarted: state.conversationStarted, + noUserInput: noUserInputSelector(state), + ...map( + situationBranchName => + tryCatch( + () => ({ + retraite: règleAvecMontantSelector(state, { + situationBranchName + })('protection sociale . retraite'), + revenuNet: règleAvecMontantSelector(state, { + situationBranchName + })('revenu net') + }), + () => null + )(), + { + assimiléSalarié: 'Assimilé salarié', + indépendant: 'Indépendant', + autoEntrepreneur: 'Auto-entrepreneur' + } + ) + }), + { startConversation } + ), + withSimulationConfig(ComparaisonConfig) +)(SchemeComparaisonPage): React$Component) From 01a5e40c92ac808a1cde4d2283150817c710681c Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 6 May 2019 18:30:18 +0200 Subject: [PATCH 04/80] :art: Version mobile --- source/components/ui/Typography.css | 6 +- .../SocialSecurity/SchemeComparaison.css | 73 ++++++++++++- .../pages/SocialSecurity/SchemeComparaison.js | 103 +++++++++++------- 3 files changed, 138 insertions(+), 44 deletions(-) diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index 82dcf17ae..f5d0ddf9e 100644 --- a/source/components/ui/Typography.css +++ b/source/components/ui/Typography.css @@ -39,11 +39,15 @@ h2 { font-size: 1.5rem; } h3 { + margin-top: 1rem; + margin-bottom: 0rem; + font-size: 1.5rem; } h4 { margin-top: 1rem; - margin-bottom: 1rem; + margin-bottom: 0rem; + font-size: 1.3rem; } h5 { diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css index 5711ed592..1c1ba9808 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css @@ -1,9 +1,8 @@ .comparaison-grid { display: grid; justify-items: stretch; - grid-template-columns: [row-legend] 16rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 1fr [end]; + grid-template-columns: [row-legend] 16rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end]; } - .comparaison-grid > * { border-bottom: 1px solid #dfdfdf; padding: 0.6rem 1.2rem; @@ -19,6 +18,7 @@ margin: 0; flex-direction: column; border: none; + align-self: stretch; } .comparaison-grid > .legend { justify-content: flex-end; @@ -35,10 +35,12 @@ .comparaison-grid > .indep { grid-column: indépendant; } -.comparaison-grid > .auto { +.comparaison-grid > .auto:not(.button) { grid-column: auto-entrepreneur; + border-right: none; } .comparaison-grid > .all { + border-right: none; text-align: left; grid-column: row-legend / end; background-color: var(--lightestColour); @@ -46,9 +48,11 @@ .comparaison-grid > .indep-et-auto { grid-column: indépendant / end; + border-right: none; } .comparaison-grid > .AS-indep-et-auto { grid-column: assimilé-salarié / end; + border-right: none; } .comparaison-grid.hide-auto-entrepreneur { @@ -75,3 +79,66 @@ place-self: center; margin: 1rem 0; } +@media (max-width: 800px) { + .comparaison-grid { + grid-template-columns: [row-legend] 10rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end]; + } + .comparaison-grid > * { + padding: 0.6rem; + } +} +@media (max-width: 600px) { + .comparaison-grid { + display: block; + } + .comparaison-grid > h2 { + display: none; + } + .comparaison-grid > *::before { + flex: 1; + text-align: left; + flex-shrink: 0; + white-space: nowrap; + font-weight: normal; + } + .comparaison-grid > :not(.button)::before { + color: rgba(0, 0, 0, 0.6); + color: var(--lighterInverseTextColour); + } + .comparaison-grid > .AS::before { + content: 'Assimilé-salarié : '; + } + .comparaison-grid > .indep::before { + content: 'Indépendant : '; + } + .comparaison-grid > .auto::before { + content: 'Auto-entrepreneur : '; + } + .comparaison-grid > .indep-et-auto::before { + content: 'Indépendant et auto-entrepreneur : '; + } + .comparaison-grid > .AS-et-indep::before { + content: 'Assimilé salarié et indépendant : '; + } + .comparaison-grid > .legend { + text-align: left; + justify-content: left; + } + .comparaison-grid > * { + border: none; + text-align: right; + justify-content: right; + } + .comparaison-grid > :not(.all):not(.button) { + padding-left: 0; + } + .comparaison-grid > .button { + width: 100%; + } +} +@media (min-width: 600px) { + .comparaison-grid > h3 { + margin: 0; + font-size: 1.1rem; + } +} diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js index 67d3f47d7..8908187fd 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js @@ -5,11 +5,10 @@ import Simulation from 'Components/Simulation' import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml' import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig' import { compose, map, tryCatch } from 'ramda' -import React from 'react' +import React, { useState } from 'react' import emoji from 'react-easy-emoji' import { Helmet } from 'react-helmet' import { connect } from 'react-redux' -import { noUserInputSelector } from 'Selectors/analyseSelectors' import { règleAvecMontantSelector } from 'Selectors/regleSelectors' import Animate from 'Ui/animate' import AnimatedTargetValue from 'Ui/AnimatedTargetValue' @@ -37,9 +36,9 @@ const SchemeComparaisonPage = ({ indépendant, autoEntrepreneur, conversationStarted, - noUserInput, startConversation }: Props) => { + const [showMore, setShowMore] = useState(false) return ( <> @@ -59,39 +58,48 @@ const SchemeComparaisonPage = ({

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

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

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

-
Sécurité sociale
+

Sécurité sociale

Régime général
Sécurité sociale des indépendants (SSI)
-
Accidents du travail couverts
+

Accidents du travail couverts

Oui
Non
-
Assurance maladie
+

Assurance maladie

++
+
-
Indémnités journalières
+

Indémnités journalières

++
+
{!conversationStarted && ( <> -
Retraite
+

Retraite

++
+
−
@@ -100,7 +108,7 @@ const SchemeComparaisonPage = ({ {conversationStarted && ( <> -
Période
+

Période

@@ -125,7 +133,7 @@ const SchemeComparaisonPage = ({ {conversationStarted && ( <> -
Revenu net
+

Revenu net

{assimiléSalarié && ( @@ -154,7 +162,7 @@ const SchemeComparaisonPage = ({ )}
-
Retraite
+

Retraite

)} -
ACCRE
-
Une année, plafonné
-
3 années, progressif, non plafonné
-
Déduction des charges
-
Régime réel
-
Abattement forfaitaire
+ {showMore ? ( + <> +

ACCRE

+
Une année, plafonné
+
3 années, progressif, non plafonné
-
Comptabilité
-
Expert
-
Compliquée
-
Simplifiée
+

Déduction des charges

+
Régime réel
+
Abattement forfaitaire
-
Paiment des cotisations
-
Mensuel (à la source)
-
Annuel avec deux ans de décalage
-
Mensuel ou trimestriel
+

Comptabilité

+
Expert
+
Compliquée
+
Simplifiée
-
- Complémentaires retraite et santé déductibles -
-
Oui (jusqu'à 50%)
-
Oui (Loi Madelin)
-
Non
+

Paiment des cotisations

+
Mensuel (à la source)
+
Annuel avec deux ans de décalage
+
Mensuel ou trimestriel
-
Statuts juridiques
+

+ Complémentaires retraite et santé déductibles +

+
Oui (jusqu'à 50%)
+
Oui (Loi Madelin)
+
Non
+ + ) : ( + <> +

Information détaillés

+
+ +
+ + )} + +

Statuts juridiques

SAS, SASU, SARL minoritaire
EI, EURL, SARL majoritaire
Micro-entreprise
- - - - + {/* */} + + +
@@ -225,7 +249,6 @@ export default (compose( connect( state => ({ conversationStarted: state.conversationStarted, - noUserInput: noUserInputSelector(state), ...map( situationBranchName => tryCatch( From d9355f4d79c696ce376d829187382241f11ae334 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 6 May 2019 18:49:03 +0200 Subject: [PATCH 05/80] =?UTF-8?q?ajoute=20des=20suggestions=20et=20de=20no?= =?UTF-8?q?uvelles=20lignes=20=C3=A0=20la=20comparaison?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rémunération-dirigeant.yaml | 2 +- source/règles/base.yaml | 4 +++ .../pages/SocialSecurity/SchemeComparaison.js | 26 ++++++++++++++----- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/source/components/simulationConfigs/rémunération-dirigeant.yaml b/source/components/simulationConfigs/rémunération-dirigeant.yaml index d5cedaa5f..495690872 100644 --- a/source/components/simulationConfigs/rémunération-dirigeant.yaml +++ b/source/components/simulationConfigs/rémunération-dirigeant.yaml @@ -15,7 +15,7 @@ questions: bloquant: - entreprise . chiffre d'affaires situation: - période: année + période: mois branches: - nom: Auto-entrepreneur diff --git a/source/règles/base.yaml b/source/règles/base.yaml index b95b65920..f16ccf441 100644 --- a/source/règles/base.yaml +++ b/source/règles/base.yaml @@ -2718,6 +2718,10 @@ avec: - revenu net - sinon: rémunération totale du dirigeant + charges + suggestions: + 1 000 €: 1000 + 5 000 €: 5000 + 10 000 €: 10000 - espace: entreprise nom: rémunération totale du dirigeant diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js index 8908187fd..debdc360b 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js @@ -13,6 +13,7 @@ import { règleAvecMontantSelector } from 'Selectors/regleSelectors' import Animate from 'Ui/animate' import AnimatedTargetValue from 'Ui/AnimatedTargetValue' import './SchemeComparaison.css' + import type { RègleAvecMontant } from 'Types/RegleTypes' type OwnProps = {} @@ -97,6 +98,10 @@ const SchemeComparaisonPage = ({
++
+
+

Plafond de chiffre d'affaire

+
Non
+
Oui
+ {!conversationStarted && ( <>

Retraite

@@ -117,7 +122,7 @@ const SchemeComparaisonPage = ({
{!conversationStarted ? ( <> -

Comparez vos revenus et votre retraite en 1 minute

+

Comparez vos revenus et votre retraite en 1 minute

-

Retraite

+

Retraite (estimation)

 From c2758e7ccf643a28c40f71b6507db176ddd6f9dc Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Tue, 7 May 2019 11:50:32 +0200 Subject: [PATCH 06/80] =?UTF-8?q?:fire:=20enl=C3=A8ve=20les=20fichiers=20d?= =?UTF-8?q?e=20l'ancienne=20vue=20de=20comparaison?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/ComparativeTargets.css | 82 ------- source/components/ComparativeTargets.js | 232 ------------------ source/components/ui/SchemeCard.css | 141 ----------- source/components/ui/SchemeCard.js | 118 --------- .../SocialSecurity/SchemeComparaison.css | 6 +- .../pages/SocialSecurity/SchemeComparaison.js | 63 +++-- 6 files changed, 53 insertions(+), 589 deletions(-) delete mode 100644 source/components/ComparativeTargets.css delete mode 100644 source/components/ComparativeTargets.js delete mode 100644 source/components/ui/SchemeCard.css delete mode 100644 source/components/ui/SchemeCard.js diff --git a/source/components/ComparativeTargets.css b/source/components/ComparativeTargets.css deleted file mode 100644 index 4c1239d6b..000000000 --- a/source/components/ComparativeTargets.css +++ /dev/null @@ -1,82 +0,0 @@ -/* .comparative-targets { - display: flex; - flex-wrap: wrap; - justify-content: center; -} -@media (max-width: 800px) { - .comparative-targets { - 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 deleted file mode 100644 index ec3fb0927..000000000 --- a/source/components/ComparativeTargets.js +++ /dev/null @@ -1,232 +0,0 @@ -/* @flow */ -import { setSituationBranch } from 'Actions/actions' -import { - defineDirectorStatus, - isAutoentrepreneur -} from 'Actions/companyStatusActions' -import React from 'react' -import { connect } from 'react-redux' -import { règleAvecMontantSelector } from 'Selectors/regleSelectors' -import { noUserInputSelector } from '../selectors/analyseSelectors' -import './ComparativeTargets.css' - -import type { RègleAvecMontant } from 'Types/RegleTypes' - -const connectRègles = (situationBranchName: string) => - connect( - state => { - return ({ - revenuDisponible: - !noUserInputSelector(state) && - règleAvecMontantSelector(state, { - situationBranchName - })('revenu net'), - retraite: - !noUserInputSelector(state) && - règleAvecMontantSelector(state, { - situationBranchName - })('protection sociale . retraite') - }: { - revenuDisponible: boolean | RègleAvecMontant, - retraite: boolean | RègleAvecMontant - }) - }, - { - setSituationBranch, - isAutoentrepreneur, - defineDirectorStatus - } - ) - -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 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/SchemeCard.css b/source/components/ui/SchemeCard.css deleted file mode 100644 index 0981cf121..000000000 --- a/source/components/ui/SchemeCard.css +++ /dev/null @@ -1,141 +0,0 @@ -.scheme-card__container { - min-width: 20rem; - max-width: 26rem; - margin: 1rem; - flex: 1; -} -.scheme-card__container:not(.is-IE) { - display: flex; - flex-direction: column; -} - -.scheme-card__inside { - flex: 1; -} -.scheme-card__inside:not(.is-IE) { - display: flex; - align-items: center; - flex-direction: column; -} -.scheme-card__header { - text-align: center; -} -.scheme-card__icon { - font-size: 2rem; -} -.scheme-card__title { - margin: 0.5rem 0; -} -.scheme-card__subtitle { - color: var(--grayColour); - margin-top: 1rem; - margin-bottom: 1rem; -} -.scheme-card__top-text { - text-transform: uppercase; - text-align: center; - margin: -1rem -1rem 1rem; - align-self: stretch; - font-size: 0.8rem; - font-family: 'IBM Plex Sans', sans-serif; - padding: 0.5rem; -} -.scheme-card__top-text--hidden { - visibility: hidden; -} -.scheme-card__top-text--featured { - color: var(--colour); - border-bottom: 1px solid var(--colour); -} -.scheme-card__top-text--disabled { - color: var(--grayColour); - border-bottom: 1px solid #d4d4d5; -} -.scheme-card__content { - flex: 1; - align-self: stretch; - margin-top: 1rem; -} -.scheme-card__cta { - text-align: center; -} -.scheme-card__amount { - display: flex; - align-self: stretch; - align-items: center; - margin-top: 1rem; -} - -.scheme-card__amount p { - margin: 0rem; -} -.scheme-card__amount-separator { - flex: 1; -} -@media (max-width: 800px) { - .scheme-card__title::before { - content: '▶'; - font-size: 1rem; - margin-right: 0.6rem; - transition: transform 0.3s; - } - .scheme-card__title--unfold::before { - transform: rotate(90deg); - } - - .scheme-card__title { - position: relative; - display: flex; - align-items: center; - font-weight: 500; - order: -1; - } - .scheme-card__icon { - margin-left: 0.3rem; - flex: 1; - text-align: right; - font-size: 1.6rem; - } - .scheme-card__subtitle { - margin: 0; - font-size: 1.2rem; - } - .scheme-card__container { - margin: 0; - } - .scheme-card__container--featured { - order: -1; - } - .scheme-card__container--disabled { - order: 1; - margin-top: 2rem; - } - .scheme-card__header { - display: flex; - flex-wrap: wrap; - align-items: center; - cursor: pointer; - justify-content: flex-start; - font-size: 1rem; - } - .scheme-card__amount { - flex-direction: row; - display: flex; - align-items: center; - width: 100%; - } - .scheme-card__amount p { - margin: 0; - } - .scheme-card__amount + p { - margin: 0; - text-align: center; - } - .scheme-card__cta:not(.scheme-card__cta--visible) { - display: none; - } - - .scheme-card__content:not(.scheme-card__content--visible) { - display: none; - } -} diff --git a/source/components/ui/SchemeCard.js b/source/components/ui/SchemeCard.js deleted file mode 100644 index 8d9877748..000000000 --- a/source/components/ui/SchemeCard.js +++ /dev/null @@ -1,118 +0,0 @@ -/* @flow */ -import classnames from 'classnames' -import { isNil } from 'ramda' -import React, { useState } from 'react' -import emoji from 'react-easy-emoji' -import Animate from 'Ui/animate' -import { isIE } from '../../utils' -import AnimatedTargetValue from './AnimatedTargetValue' -import './SchemeCard.css' -import type { Node } from 'react' -type Props = { - title: Node, - subtitle: Node, - amount: number, - modifier?: { - stared?: boolean, - inactive?: boolean - }, - features: Array, - amountDesc: Node, - onSchemeChoice: () => void, - onAmountClick: () => void, - disabled?: ?Node, - featured?: Node, - icon: string -} -function SchemeCard({ - title, - subtitle, - amount, - amountDesc, - onSchemeChoice, - icon, - disabled, - onAmountClick, - featured, - features -}: Props) { - const [descriptionVisibility, setDescriptionVisibility] = useState(false) - const toggleDescriptionVisibility = () => - setDescriptionVisibility(!descriptionVisibility) - - return ( -
-
- {featured || disabled || 'nop'} -
-
-
- {emoji(icon)} -

- {title} -

-

{subtitle}

-
- {!isNil(amount) && ( - -
- {amountDesc} : - -

- {disabled ? ( - 'CA dépassé' - ) : ( - - )} -

-
- - )} -
    - {features.map((feature, index) => ( -
  • {feature}
    • - ))} -
-

- -

-
-
- ) -} - -export default SchemeCard diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css index 1c1ba9808..00f0ddca8 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css @@ -1,7 +1,8 @@ .comparaison-grid { display: grid; justify-items: stretch; - grid-template-columns: [row-legend] 16rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end]; + justify-content: center; + grid-template-columns: [row-legend] 15rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end]; } .comparaison-grid > * { border-bottom: 1px solid #dfdfdf; @@ -31,13 +32,16 @@ } .comparaison-grid > .AS { grid-column: assimilé-salarié; + max-width: 16rem; } .comparaison-grid > .indep { grid-column: indépendant; + max-width: 16rem; } .comparaison-grid > .auto:not(.button) { grid-column: auto-entrepreneur; border-right: none; + max-width: 16rem; } .comparaison-grid > .all { border-right: none; diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js index debdc360b..24cafebeb 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js @@ -1,5 +1,9 @@ /* @flow */ import { startConversation } from 'Actions/actions' +import { + defineDirectorStatus, + isAutoentrepreneur +} from 'Actions/companyStatusActions' import PeriodSwitch from 'Components/PeriodSwitch' import Simulation from 'Components/Simulation' import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml' @@ -9,6 +13,7 @@ import React, { useState } from 'react' import emoji from 'react-easy-emoji' import { Helmet } from 'react-helmet' import { connect } from 'react-redux' +import { Link } from 'react-router-dom' import { règleAvecMontantSelector } from 'Selectors/regleSelectors' import Animate from 'Ui/animate' import AnimatedTargetValue from 'Ui/AnimatedTargetValue' @@ -24,7 +29,8 @@ type Props = OwnProps & { autoEntrepreneur: ?SimulationResult, conversationStarted: boolean, noUserInput: boolean, - startConversation: () => void + startConversation: () => void, + setSituationBranch: () => void } type SimulationResult = { @@ -37,6 +43,7 @@ const SchemeComparaisonPage = ({ indépendant, autoEntrepreneur, conversationStarted, + setSituationBranch, startConversation }: Props) => { const [showMore, setShowMore] = useState(false) @@ -55,7 +62,11 @@ const SchemeComparaisonPage = ({ />

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

- +

+ Lorsque vous créez votre société, vous devez choisir le régime social du + dirigeant. Il en existe trois différents, avec chacun ses avantages et + inconvénients. +

@@ -160,9 +171,11 @@ const SchemeComparaisonPage = ({
{autoEntrepreneur && ( - + + + )}
@@ -206,11 +219,6 @@ const SchemeComparaisonPage = ({
Régime réel
Abattement forfaitaire
-

Comptabilité

-
Expert
-
Compliquée
-
Simplifiée
-

Paiment des cotisations

Mensuel (à la source)
Annuel avec deux ans de décalage
@@ -245,14 +253,39 @@ const SchemeComparaisonPage = ({
)} +

Comptabilité

+
Expert
+
Compliquée
+
Simplifiée
-

Statuts juridiques

+

Statuts juridiques possibles

SAS, SASU, SARL minoritaire
EI, EURL, SARL majoritaire
Micro-entreprise
- - - + + +
@@ -283,7 +316,7 @@ export default (compose( } ) }), - { startConversation } + { startConversation, defineDirectorStatus, isAutoentrepreneur } ), withSimulationConfig(ComparaisonConfig) )(SchemeComparaisonPage): React$Component) From da33a9a2c92ab6c98992c12af7248f3b4db49e84 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Tue, 7 May 2019 12:12:28 +0200 Subject: [PATCH 07/80] =?UTF-8?q?:fountain=5Fpen:=20ajoute=20une=20descrip?= =?UTF-8?q?tion=20=C3=A0=20la=20page=20de=20comparaison=20des=20r=C3=A9gim?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SocialSecurity/SchemeComparaison.css | 2 +- .../pages/SocialSecurity/SchemeComparaison.js | 40 +++++++++++-------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css index 00f0ddca8..d149b3218 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.css @@ -2,7 +2,7 @@ display: grid; justify-items: stretch; justify-content: center; - grid-template-columns: [row-legend] 15rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end]; + grid-template-columns: [row-legend] 16rem [assimilé-salarié] auto [indépendant] auto [auto-entrepreneur] auto [end]; } .comparaison-grid > * { border-bottom: 1px solid #dfdfdf; diff --git a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js index 24cafebeb..f1cc1a7e8 100644 --- a/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js +++ b/source/sites/mon-entreprise.fr/pages/SocialSecurity/SchemeComparaison.js @@ -30,7 +30,9 @@ type Props = OwnProps & { conversationStarted: boolean, noUserInput: boolean, startConversation: () => void, - setSituationBranch: () => void + setSituationBranch: () => void, + defineDirectorStatus: string => void, + isAutoentrepreneur: boolean => void } type SimulationResult = { @@ -43,7 +45,9 @@ const SchemeComparaisonPage = ({ indépendant, autoEntrepreneur, conversationStarted, - setSituationBranch, + defineDirectorStatus, + isAutoentrepreneur, + // setSituationBranch, startConversation }: Props) => { const [showMore, setShowMore] = useState(false) @@ -51,22 +55,26 @@ const SchemeComparaisonPage = ({ <> - Assimilé salarié, indépendant, auto-entrepreneur : comparaison des - régimes + Indépendant, assimilé salarié ou auto-entrepreneur : découvrez le + régime qui vous correspond le mieux -

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

+

+ Indépendant, assimilé salarié ou auto-entrepreneur : quel régime choisir + ? +

- Lorsque vous créez votre société, vous devez choisir le régime social du - dirigeant. Il en existe trois différents, avec chacun ses avantages et - inconvénients. + Lorsque vous créez votre société, le choix du statut juridique va + determiner à quel régime social le dirigeant est affilié. Il en existe + trois différents, avec chacun ses avantages et inconvénients. Grâce à ce + comparatif, vous pourrez sélectionner celui qui vous correspond le + mieux, en toute connaissance de cause.

+

@@ -91,6 +99,11 @@ const SchemeComparaisonPage = ({ Pour les petites activités

+

Statuts juridiques possibles

+
SAS, SASU, SARL minoritaire
+
EI, EURL, SARL majoritaire
+
Micro-entreprise
+

Sécurité sociale

Régime général
@@ -257,11 +270,6 @@ const SchemeComparaisonPage = ({
Expert
Compliquée
Simplifiée
- -

Statuts juridiques possibles

-
SAS, SASU, SARL minoritaire
-
EI, EURL, SARL majoritaire
-
Micro-entreprise
@@ -261,30 +265,36 @@ const SchemeComparaisonPage = ({
Expert
Compliquée
Simplifiée
- - - +
+ +
+
+ +
+
+ +
diff --git a/test/indépendants.test.js b/test/indépendants.test.js index 1196a4316..a30301ece 100644 --- a/test/indépendants.test.js +++ b/test/indépendants.test.js @@ -12,6 +12,6 @@ describe('indeps', function() { période: 'année' }) - expect(values[0]).to.be.closeTo(41513, 1) + expect(values[0]).to.be.closeTo(39764, 1) }) }) From 76e06e4a79275851988bc0e9ad104da2981a8a9d Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Tue, 7 May 2019 18:57:57 +0200 Subject: [PATCH 10/80] :art: nouveau footer --- source/components/Feedback/Feedback.css | 5 - source/components/Feedback/PageFeedback.js | 14 +-- source/components/ui/Button/button.css | 11 ++- source/components/ui/Typography.css | 2 +- source/locales/en.yaml | 2 +- .../layout/Footer/Footer.css | 38 ++++++-- .../mon-entreprise.fr/layout/Footer/Footer.js | 93 ++++++++----------- .../mon-entreprise.fr/pages/Company/Home.js | 2 + .../pages/Landing/Landing.js | 7 +- .../pages/SocialSecurity/SchemeSelection.js | 54 +++++------ .../pages/SocialSecurity/Video.js | 1 - 11 files changed, 117 insertions(+), 112 deletions(-) diff --git a/source/components/Feedback/Feedback.css b/source/components/Feedback/Feedback.css index 27ec52a9f..234cdf7eb 100644 --- a/source/components/Feedback/Feedback.css +++ b/source/components/Feedback/Feedback.css @@ -9,11 +9,6 @@ padding: 0.6rem 1rem; margin: 1rem 0; } -.feedback-page.stickToFooter { - margin-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} .feedback-page button.link-button { margin: 0 0.6rem; } diff --git a/source/components/Feedback/PageFeedback.js b/source/components/Feedback/PageFeedback.js index 29f7ee76e..a90adac4b 100644 --- a/source/components/Feedback/PageFeedback.js +++ b/source/components/Feedback/PageFeedback.js @@ -1,6 +1,5 @@ /* @flow */ -import classNames from 'classnames' import withTracker from 'Components/utils/withTracker' import React, { Component } from 'react' import { Trans, withTranslation } from 'react-i18next' @@ -16,8 +15,7 @@ import type { Node } from 'react' type OwnProps = { blacklist: Array, customMessage?: Node, - customEventName?: string, - stickToFooter: boolean + customEventName?: string } type Props = OwnProps & { location: Location, @@ -93,7 +91,6 @@ class PageFeedback extends Component { this.setState({ showForm: true }) } render() { - let { stickToFooter = false } = this.props if ( this.state.feedbackAlreadyGiven && !this.state.showForm && @@ -105,11 +102,10 @@ class PageFeedback extends Component { this.props.location.pathname === '/' ? '' : this.props.location.pathname return ( !this.props.blacklist.includes(pathname) && ( -
-
+
+
{!this.state.showForm && !this.state.showThanks && ( <>
diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css index c1693a563..c63bd74dc 100644 --- a/source/components/ui/Button/button.css +++ b/source/components/ui/Button/button.css @@ -198,7 +198,8 @@ margin-bottom: 2rem; } .ui__.button-choice { - display: block; + display: flex; + align-items: center; padding: 1rem; background: white; color: var(--darkColour); @@ -220,19 +221,21 @@ pointer-events: none; cursor: default; } + .ui__.button-choice--soon img { filter: saturate(0%); } .ui__.button-choice-label { - font-size: 66%; - padding: 0.4rem 0.8rem; + font-size: 80%; + padding: 0 0.8rem; color: white; background: gray; + font-weight: 500; opacity: 0.8; border-radius: 0.3rem; } .ui__.button-choice img { - margin-right: 1rem !important; + margin-right: 2rem !important; margin-left: 0.5rem !important; transform: scale(1.5); transition: transform 0.2s; diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index 05dbf606d..8cc0b069f 100644 --- a/source/components/ui/Typography.css +++ b/source/components/ui/Typography.css @@ -25,7 +25,7 @@ html { body { font-weight: 400; color: #040e19; - color: var(--darkestColour); + color: var(--darkColour); font-family: 'Roboto', sans-serif; } diff --git a/source/locales/en.yaml b/source/locales/en.yaml index f094cd830..892abb32e 100644 --- a/source/locales/en.yaml +++ b/source/locales/en.yaml @@ -587,7 +587,7 @@ Connaître les démarches d'embauche: Know the hiring procedures Estimer les cotisations et les taxes: Estimate contributions and taxes Créer une entreprise: Create a company in France Déclarer mon activité d'économie collaborative: Declare my activity in the sharing economy -prochainement: soon +Prochainement: Soon Estimer les cotisations sociales pour une embauche: Estimate the social security contributions for a hiring À quoi servent mes cotisations ?: How are my contributions distributed? diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Footer.css b/source/sites/mon-entreprise.fr/layout/Footer/Footer.css index 42fc78e5c..ef6448624 100644 --- a/source/sites/mon-entreprise.fr/layout/Footer/Footer.css +++ b/source/sites/mon-entreprise.fr/layout/Footer/Footer.css @@ -1,12 +1,6 @@ -.footer-container { - margin-top: 3rem; -} .footer { - background-color: rgba(41, 117, 209, 0.133); - background-color: var(--lightestColour); - padding: 1rem 0; + margin-top: 5rem; } - .footer img { height: 2.5rem; } @@ -14,7 +8,6 @@ .footer a { text-decoration: none; } - #footerIcons { display: flex; margin: 2rem 0; @@ -23,10 +16,30 @@ #footerIcons a::after { display: none; } +.footer__newsletterContainer { + display: flex; + + justify-content: center; +} +@media (max-width: 800px) { + .footer__newsletterContainer { + flex-wrap: wrap; + } + .footer__registerContainer { + margin-left: 0rem; + margin-top: 1rem; + } +} + .footer__registerContainer { display: flex; - flex-direction: column; - margin-bottom: 2rem; + margin-left: 1rem; +} +.footer__registerContainer label { + text-transform: uppercase; + font-size: 85%; + color: var(--darkColour); + font-weight: 500; } .footer__registerField { display: flex; @@ -37,6 +50,11 @@ border-radius: 0.3rem; align-self: center; } +.footer__separator { + margin: 2rem 0; + border-top: 1px solid var(--lighterColour); + border-bottom: none; +} .footer__registerField > input[type='submit'] { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Footer.js b/source/sites/mon-entreprise.fr/layout/Footer/Footer.js index 40d199ec4..276be7984 100644 --- a/source/sites/mon-entreprise.fr/layout/Footer/Footer.js +++ b/source/sites/mon-entreprise.fr/layout/Footer/Footer.js @@ -6,7 +6,6 @@ import LegalNotice from 'Components/LegalNotice' import usePersistingState from 'Components/utils/usePersistingState' import withSitePaths from 'Components/utils/withSitePaths' import withTracker from 'Components/utils/withTracker' -import urssafSvg from 'Images/urssaf.svg' import { compose, lensPath, view } from 'ramda' import React from 'react' import emoji from 'react-easy-emoji' @@ -16,7 +15,6 @@ import SocialIcon from 'Ui/SocialIcon' import i18n from '../../../../i18n' import { hrefLangLink } from '../../sitePaths' import './Footer.css' -import betaGouvSvg from './images/logo-betagouv.svg' import Integration from './Integration' import Privacy from './Privacy' @@ -60,62 +58,53 @@ const Footer = ({ tracker, t, sitePaths }) => { /> ))} - view(lens, sitePaths))} - />