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
- Commencer
-
-
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
-
-
Choisir ce régime
-
Choisir ce régime
-
Choisir ce régime
-
-
-)
-
-// 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}
- ))}
-
-
-
- Choisir ce régime
-
-
-
-
- )
-}
-
-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
-
Choisir
-
Choisir
-
Choisir
+
{
+ defineDirectorStatus('SALARIED')
+ isAutoentrepreneur(false)
+ }}>
+ Choisir
+
+
{
+ defineDirectorStatus('SELF_EMPLOYED')
+ isAutoentrepreneur(false)
+ }}>
+ Choisir
+
+
{
+ defineDirectorStatus('SELF_EMPLOYED')
+ isAutoentrepreneur(true)
+ }}>
+ Choisir
+
>
@@ -283,7 +316,7 @@ export default (compose(
}
)
}),
- { startConversation }
+ { startConversation, defineDirectorStatus, isAutoentrepreneur }
),
withSimulationConfig(ComparaisonConfig)
)(SchemeComparaisonPage): React$Component)