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)