🔥 enlève les fichiers de l'ancienne vue de comparaison
Johan Girod
parent
d9355f4d79
commit
c2758e7ccf
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 = () => (
|
||||
<div className="ui__ full-width">
|
||||
<div className="comparaison-grid ">
|
||||
<h2 className="AS">
|
||||
☂ Assimilé salarié
|
||||
<small>Le régime tout compris</small>
|
||||
</h2>
|
||||
<h2 className="indep">
|
||||
👩🔧 Indépendant
|
||||
<small>La protection à la carte</small>
|
||||
</h2>
|
||||
<h2 className="auto">
|
||||
🚶♂️ Auto-entrepreneur
|
||||
<small>Pour les petites activités</small>
|
||||
</h2>
|
||||
|
||||
<div className="legend">Sécurité sociale</div>
|
||||
<div className="AS">Régime général</div>
|
||||
<div className="indep-et-auto">
|
||||
Sécurité sociale des indépendants (SSI)
|
||||
</div>
|
||||
|
||||
<div className="legend">Retraite</div>
|
||||
<div className="green AS">++</div>
|
||||
<div className="green indep">+</div>
|
||||
<div className="red auto">−</div>
|
||||
|
||||
<div className="legend">Assurance maladie</div>
|
||||
<div className="green AS">++</div>
|
||||
<div className="green indep-et-auto">+</div>
|
||||
|
||||
<div className="legend">Indémnités journalières</div>
|
||||
<div className="green AS">++</div>
|
||||
<div className="indep-et-auto green">+</div>
|
||||
|
||||
<div className="legend">Accidents du travail </div>
|
||||
<div className="AS">Couverts</div>
|
||||
<div className="indep-et-auto">Non couverts</div>
|
||||
<div className="all">
|
||||
<h3>Comparez vos revenus et votre retraite en 1 minute</h3>
|
||||
<button className="ui__ cta plain button">Commencer</button>
|
||||
</div>
|
||||
<div className="legend">Paiment des cotisations</div>
|
||||
<div className="AS">Mensuel (à la source)</div>
|
||||
<div className="indep">Annuel avec deux ans de décalage</div>
|
||||
<div className="auto">Mensuel ou trimestriel</div>
|
||||
|
||||
<div className="legend">ACCRE</div>
|
||||
<div className="AS-et-indep">Une année, plafonné</div>
|
||||
<div className="auto">3 années, progressif, non plafonné</div>
|
||||
|
||||
<div className="legend">Déduction des charges</div>
|
||||
<div className="AS-et-indep">Régime réel </div>
|
||||
<div className="auto">Abattement forfaitaire </div>
|
||||
|
||||
<div className="legend">Comptabilité</div>
|
||||
<div className="AS">Expert 😩</div>
|
||||
<div className="indep">Compliquée 😔</div>
|
||||
<div className="auto">Simplifiée 😌</div>
|
||||
|
||||
<div className="legend">
|
||||
Complémentaires retraite et santé déductibles
|
||||
</div>
|
||||
<div className="AS">Oui (jusqu'à 50%)</div>
|
||||
<div className="indep">Oui (Loi Madelin)</div>
|
||||
<div className="auto">Non</div>
|
||||
|
||||
<button className="AS ui__ button">Choisir ce régime</button>
|
||||
<button className="indep ui__ button">Choisir ce régime</button>
|
||||
<button className="auto ui__ button">Choisir ce régime</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
// const Indépendant = connectRègles('Indépendant')(
|
||||
// ({
|
||||
// revenuDisponible,
|
||||
// branchIndex,
|
||||
// setSituationBranch,
|
||||
// defineDirectorStatus,
|
||||
// retraite,
|
||||
// isAutoentrepreneur
|
||||
// }) => (
|
||||
// <SchemeCard
|
||||
// title="Indépendant"
|
||||
// subtitle="La protection à la carte"
|
||||
// onAmountClick={() => setSituationBranch(branchIndex)}
|
||||
// amount={revenuDisponible.montant}
|
||||
// icon="👩🔧"
|
||||
// amountDesc={<RuleLink {...revenuDisponible} />}
|
||||
// features={[
|
||||
// retraite.montant && (
|
||||
// <>
|
||||
// <RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
|
||||
// </>
|
||||
// ),
|
||||
// 'Régime des indépendants',
|
||||
// 'Complémentaire santé et prévoyance non incluses',
|
||||
// 'Accidents du travail non couverts',
|
||||
// 'Retraite faible (41% du dernier brut)',
|
||||
// 'Indemnités journalières plus faibles',
|
||||
// 'Montant minimum de cotisations',
|
||||
// 'Cotisations en décalage de deux ans'
|
||||
// ].filter(Boolean)}
|
||||
// onSchemeChoice={() => {
|
||||
// defineDirectorStatus('SELF_EMPLOYED')
|
||||
// isAutoentrepreneur(false)
|
||||
// }}
|
||||
// />
|
||||
// )
|
||||
// )
|
||||
|
||||
// const AssimiléSalarié = connectRègles('Assimilé salarié')(
|
||||
// ({
|
||||
// revenuDisponible,
|
||||
// branchIndex,
|
||||
// setSituationBranch,
|
||||
// defineDirectorStatus,
|
||||
// retraite
|
||||
// }) => (
|
||||
// <SchemeCard
|
||||
// title="Assimilé salarié"
|
||||
// onAmountClick={() => setSituationBranch(branchIndex)}
|
||||
// subtitle="Le régime tout compris"
|
||||
// amount={revenuDisponible.montant}
|
||||
// featured="Le choix de 58% des dirigeants de sociétés"
|
||||
// icon="☂"
|
||||
// amountDesc={<RuleLink {...revenuDisponible} />}
|
||||
// features={[
|
||||
// retraite.montant && (
|
||||
// <>
|
||||
// <RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
|
||||
// </>
|
||||
// ),
|
||||
// 'Régime général',
|
||||
// 'Complémentaires santé et prévoyance incluses',
|
||||
// 'Accidents du travail couverts',
|
||||
// 'Retraite élevée (62 % du dernier brut)',
|
||||
// 'Pas de cotisations minimales',
|
||||
// "Seuil pour l'activation des droits (4000€/an)",
|
||||
// 'Fiches de paie mensuelles',
|
||||
// 'Prélèvement des cotisations à la source'
|
||||
// ].filter(Boolean)}
|
||||
// onSchemeChoice={() => {
|
||||
// defineDirectorStatus('SALARIED')
|
||||
// isAutoentrepreneur(false)
|
||||
// }}
|
||||
// />
|
||||
// )
|
||||
// )
|
||||
|
||||
// const AutoEntrepreneur = connectRègles('Auto-entrepreneur')(
|
||||
// ({
|
||||
// revenuDisponible,
|
||||
// setSituationBranch,
|
||||
// isAutoentrepreneur,
|
||||
// retraite,
|
||||
// branchIndex,
|
||||
// plafondDépassé
|
||||
// }) => {
|
||||
// return (
|
||||
// <SchemeCard
|
||||
// title="Auto-entrepreneur"
|
||||
// subtitle="Pour les petites activités"
|
||||
// onAmountClick={() => setSituationBranch(branchIndex)}
|
||||
// disabled={plafondDépassé}
|
||||
// amountDesc={<RuleLink {...revenuDisponible} />}
|
||||
// icon="🚶♂️"
|
||||
// amount={revenuDisponible.montant}
|
||||
// features={[
|
||||
// retraite.montant && (
|
||||
// <>
|
||||
// <RuleLink {...retraite} /> : <Montant>{retraite.montant}</Montant>
|
||||
// </>
|
||||
// ),
|
||||
// 'Régime des indépendants',
|
||||
// 'Pas de déduction des charges',
|
||||
// 'Pas de déduction fiscale pour la mutuelle (Madelin)',
|
||||
// "Chiffre d'affaires plafonné",
|
||||
// "Durée de l'ACRE plus élevée",
|
||||
// 'Comptabilité réduite au minimum'
|
||||
// ].filter(Boolean)}
|
||||
// onSchemeChoice={() => {
|
||||
// defineDirectorStatus('SELF_EMPLOYED')
|
||||
// isAutoentrepreneur(true)
|
||||
// }}
|
||||
// />
|
||||
// )
|
||||
// }
|
||||
// )
|
||||
|
||||
export default ComparativeTargets
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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<Node>,
|
||||
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 (
|
||||
<div
|
||||
className={classnames('scheme-card__container', {
|
||||
'ui__ card disabled scheme-card__container--disabled': disabled,
|
||||
'ui__ card coloured scheme-card__container--featured': featured,
|
||||
'is-IE': isIE()
|
||||
})}>
|
||||
<div
|
||||
className={`scheme-card__top-text scheme-card__top-text--${
|
||||
featured ? 'featured' : disabled ? 'disabled' : 'hidden'
|
||||
}`}
|
||||
style={{ visibility: featured || disabled ? 'visible' : 'hidden' }}>
|
||||
{featured || disabled || 'nop'}
|
||||
</div>
|
||||
<div
|
||||
className={classnames('scheme-card__inside', {
|
||||
'ui__ card': !featured && !disabled,
|
||||
'is-IE': isIE()
|
||||
})}>
|
||||
<header
|
||||
className="scheme-card__header"
|
||||
onClick={toggleDescriptionVisibility}>
|
||||
<span className="scheme-card__icon">{emoji(icon)} </span>
|
||||
<h3
|
||||
className={
|
||||
'scheme-card__title ' +
|
||||
(descriptionVisibility ? 'scheme-card__title--unfold' : '')
|
||||
}>
|
||||
{title}
|
||||
</h3>
|
||||
<h4 className="scheme-card__subtitle">{subtitle}</h4>
|
||||
</header>
|
||||
{!isNil(amount) && (
|
||||
<Animate.appear style={{ alignSelf: 'stretch' }}>
|
||||
<div
|
||||
className={
|
||||
'ui__ card scheme-card__amount plain ' +
|
||||
(Number.isNaN(amount) ? 'disabled' : '')
|
||||
}
|
||||
onClick={onAmountClick}>
|
||||
{amountDesc} :
|
||||
<span className="scheme-card__amount-separator" />
|
||||
<p className="ui__ lead">
|
||||
{disabled ? (
|
||||
'CA dépassé'
|
||||
) : (
|
||||
<AnimatedTargetValue value={amount} />
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</Animate.appear>
|
||||
)}
|
||||
<ul
|
||||
className={
|
||||
'scheme-card__content ' +
|
||||
(descriptionVisibility ? 'scheme-card__content--visible' : '')
|
||||
}>
|
||||
{features.map((feature, index) => (
|
||||
<li key={index}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
<p
|
||||
className={
|
||||
'scheme-card__cta ' +
|
||||
(descriptionVisibility ? 'scheme-card__cta--visible' : '')
|
||||
}>
|
||||
<button onClick={onSchemeChoice} className={'ui__ button'}>
|
||||
Choisir ce régime
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SchemeCard
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
/>
|
||||
</Helmet>
|
||||
<h1>Quel régime choisir pour l'indépendant ?</h1>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div className="ui__ full-width">
|
||||
<div className="comparaison-grid">
|
||||
<h2 className="AS">
|
||||
|
|
@ -160,9 +171,11 @@ const SchemeComparaisonPage = ({
|
|||
<div className="auto big">
|
||||
{autoEntrepreneur && (
|
||||
<Animate.appear className="ui__ plain card">
|
||||
<AnimatedTargetValue
|
||||
value={autoEntrepreneur.revenuNet.montant}
|
||||
/>
|
||||
<Link to={autoEntrepreneur.revenuNet.lien}>
|
||||
<AnimatedTargetValue
|
||||
value={autoEntrepreneur.revenuNet.montant}
|
||||
/>
|
||||
</Link>
|
||||
</Animate.appear>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -206,11 +219,6 @@ const SchemeComparaisonPage = ({
|
|||
<div className="AS-et-indep">Régime réel </div>
|
||||
<div className="auto">Abattement forfaitaire </div>
|
||||
|
||||
<h3 className="legend">Comptabilité</h3>
|
||||
<div className="AS">Expert</div>
|
||||
<div className="indep">Compliquée</div>
|
||||
<div className="auto">Simplifiée</div>
|
||||
|
||||
<h3 className="legend">Paiment des cotisations</h3>
|
||||
<div className="AS">Mensuel (à la source)</div>
|
||||
<div className="indep">Annuel avec deux ans de décalage</div>
|
||||
|
|
@ -245,14 +253,39 @@ const SchemeComparaisonPage = ({
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<h3 className="legend">Comptabilité</h3>
|
||||
<div className="AS">Expert</div>
|
||||
<div className="indep">Compliquée</div>
|
||||
<div className="auto">Simplifiée</div>
|
||||
|
||||
<h3 className="legend">Statuts juridiques</h3>
|
||||
<h3 className="legend">Statuts juridiques possibles</h3>
|
||||
<div className="AS">SAS, SASU, SARL minoritaire</div>
|
||||
<div className="indep">EI, EURL, SARL majoritaire</div>
|
||||
<div className="auto">Micro-entreprise</div>
|
||||
<button className="AS ui__ button">Choisir</button>
|
||||
<button className="indep ui__ button">Choisir</button>
|
||||
<button className="auto ui__ button">Choisir</button>
|
||||
<button
|
||||
className="AS ui__ button"
|
||||
onClick={() => {
|
||||
defineDirectorStatus('SALARIED')
|
||||
isAutoentrepreneur(false)
|
||||
}}>
|
||||
Choisir
|
||||
</button>
|
||||
<button
|
||||
className="indep ui__ button"
|
||||
onClick={() => {
|
||||
defineDirectorStatus('SELF_EMPLOYED')
|
||||
isAutoentrepreneur(false)
|
||||
}}>
|
||||
Choisir
|
||||
</button>
|
||||
<button
|
||||
className="auto ui__ button"
|
||||
onClick={() => {
|
||||
defineDirectorStatus('SELF_EMPLOYED')
|
||||
isAutoentrepreneur(true)
|
||||
}}>
|
||||
Choisir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -283,7 +316,7 @@ export default (compose(
|
|||
}
|
||||
)
|
||||
}),
|
||||
{ startConversation }
|
||||
{ startConversation, defineDirectorStatus, isAutoentrepreneur }
|
||||
),
|
||||
withSimulationConfig(ComparaisonConfig)
|
||||
)(SchemeComparaisonPage): React$Component<OwnProps>)
|
||||
|
|
|
|||
Loading…
Reference in New Issue