347 lines
9.8 KiB
JavaScript
347 lines
9.8 KiB
JavaScript
|
/* @flow */
|
|||
|
|
import { startConversation } from 'Actions/actions'
|
|||
|
|
import {
|
|||
|
|
defineDirectorStatus,
|
|||
|
|
isAutoentrepreneur
|
|||
|
|
} from 'Actions/companyStatusActions'
|
|||
|
|
import classnames from 'classnames'
|
|||
|
|
import PeriodSwitch from 'Components/PeriodSwitch'
|
|||
|
|
import Simulation from 'Components/Simulation'
|
|||
|
|
// $FlowFixMe
|
|||
|
|
import ComparaisonConfig from 'Components/simulationConfigs/rémunération-dirigeant.yaml'
|
|||
|
|
import withSimulationConfig from 'Components/simulationConfigs/withSimulationConfig'
|
|||
|
|
import { compose, map, tryCatch } from 'ramda'
|
|||
|
|
import React, { useState } from 'react'
|
|||
|
|
import emoji from 'react-easy-emoji'
|
|||
|
|
import { connect } from 'react-redux'
|
|||
|
|
import { branchAnalyseSelector } 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'
|
|||
|
|
|
|||
|
|
type OwnProps = {
|
|||
|
|
hideAutoEntrepreneur?: boolean,
|
|||
|
|
hideAssimiléSalarié?: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type Props = OwnProps & {
|
|||
|
|
assimiléSalarié: ?SimulationResult,
|
|||
|
|
indépendant: ?SimulationResult,
|
|||
|
|
autoEntrepreneur: ?SimulationResult,
|
|||
|
|
conversationStarted: boolean,
|
|||
|
|
noUserInput: boolean,
|
|||
|
|
startConversation: () => void,
|
|||
|
|
setSituationBranch: () => void,
|
|||
|
|
defineDirectorStatus: string => void,
|
|||
|
|
isAutoentrepreneur: boolean => void,
|
|||
|
|
plafondAutoEntrepreneurDépassé: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type SimulationResult = {
|
|||
|
|
retraite: RègleAvecMontant,
|
|||
|
|
revenuNet: RègleAvecMontant
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const SchemeComparaison = ({
|
|||
|
|
/* Own Props */
|
|||
|
|
hideAutoEntrepreneur = false,
|
|||
|
|
hideAssimiléSalarié = false,
|
|||
|
|
/* Injected Props */
|
|||
|
|
assimiléSalarié,
|
|||
|
|
indépendant,
|
|||
|
|
plafondAutoEntrepreneurDépassé,
|
|||
|
|
autoEntrepreneur,
|
|||
|
|
conversationStarted,
|
|||
|
|
defineDirectorStatus,
|
|||
|
|
isAutoentrepreneur,
|
|||
|
|
// setSituationBranch,
|
|||
|
|
startConversation
|
|||
|
|
}: Props) => {
|
|||
|
|
const [showMore, setShowMore] = useState(false)
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={classnames('comparaison-grid', {
|
|||
|
|
hideAutoEntrepreneur,
|
|||
|
|
hideAssimiléSalarié
|
|||
|
|
})}>
|
|||
|
|
<h2 className="AS">
|
|||
|
|
{emoji('☂')}{' '}
|
|||
|
|
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
|||
|
|
Assimilé salarié
|
|||
|
|
</span>
|
|||
|
|
<small>Le régime tout compris</small>
|
|||
|
|
</h2>
|
|||
|
|
<h2 className="indep">
|
|||
|
|
{emoji('👩🔧')}{' '}
|
|||
|
|
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
|||
|
|
Indépendant
|
|||
|
|
</span>
|
|||
|
|
<small>La protection à la carte</small>
|
|||
|
|
</h2>
|
|||
|
|
<h2 className="auto">
|
|||
|
|
{emoji('🚶♂️')}{' '}
|
|||
|
|
<span style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
|||
|
|
Auto-entrepreneur
|
|||
|
|
</span>
|
|||
|
|
<small>Pour les petites activités</small>
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
{!hideAssimiléSalarié && (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">Sécurité sociale</h3>
|
|||
|
|
<div className="AS">Régime général</div>
|
|||
|
|
<div className="indep-et-auto">
|
|||
|
|
Sécurité sociale des indépendants (SSI)
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Accidents du travail couverts</h3>
|
|||
|
|
<div className="AS">Oui</div>
|
|||
|
|
<div className="indep-et-auto">Non</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Assurance maladie</h3>
|
|||
|
|
<div className="green AS">++</div>
|
|||
|
|
<div className="green indep-et-auto">+</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Indémnités journalières</h3>
|
|||
|
|
<div className="green AS">++</div>
|
|||
|
|
<div className="indep-et-auto green">+</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{!hideAutoEntrepreneur && (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">Plafond de chiffre d'affaire</h3>
|
|||
|
|
<div className="AS-et-indep">Non</div>
|
|||
|
|
<div className="auto" style={{ textAlign: 'left' }}>
|
|||
|
|
<ul>
|
|||
|
|
<li>70 000 € en services</li>
|
|||
|
|
<li>170 000 € en vente de biens, restauration ou hébergement</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{!conversationStarted && (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">Retraite</h3>
|
|||
|
|
<div className="green AS">++</div>
|
|||
|
|
<div className="green indep">+</div>
|
|||
|
|
<div className="red auto">−</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{conversationStarted && (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">Période</h3>
|
|||
|
|
<div className="AS-indep-et-auto">
|
|||
|
|
<PeriodSwitch />
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<div className="all">
|
|||
|
|
{!conversationStarted ? (
|
|||
|
|
<>
|
|||
|
|
<h2>Comparez vos revenus et votre retraite en 1 minute</h2>
|
|||
|
|
<button
|
|||
|
|
className="ui__ cta plain button"
|
|||
|
|
onClick={() => startConversation()}>
|
|||
|
|
Commencer
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<div className="ui__ container">
|
|||
|
|
<Simulation />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{conversationStarted && (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">Revenu net après impôts</h3>
|
|||
|
|
<div className="AS">
|
|||
|
|
{assimiléSalarié && (
|
|||
|
|
<Animate.appear className="ui__ plain card">
|
|||
|
|
<AnimatedTargetValue
|
|||
|
|
value={assimiléSalarié.revenuNet.montant}
|
|||
|
|
/>
|
|||
|
|
</Animate.appear>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="indep">
|
|||
|
|
{indépendant && (
|
|||
|
|
<Animate.appear className="ui__ plain card">
|
|||
|
|
<AnimatedTargetValue value={indépendant.revenuNet.montant} />
|
|||
|
|
</Animate.appear>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="auto">
|
|||
|
|
{autoEntrepreneur && (
|
|||
|
|
<Animate.appear
|
|||
|
|
className={classnames(
|
|||
|
|
'ui__ plain card',
|
|||
|
|
plafondAutoEntrepreneurDépassé && 'disabled'
|
|||
|
|
)}>
|
|||
|
|
{plafondAutoEntrepreneurDépassé ? (
|
|||
|
|
'Plafond de CA dépassé'
|
|||
|
|
) : (
|
|||
|
|
<AnimatedTargetValue
|
|||
|
|
value={autoEntrepreneur.revenuNet.montant}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Animate.appear>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Retraite (estimation)</h3>
|
|||
|
|
<div className="AS">
|
|||
|
|
{assimiléSalarié && (
|
|||
|
|
<AnimatedTargetValue value={assimiléSalarié.retraite.montant} />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="indep">
|
|||
|
|
{indépendant && indépendant.retraite.montant !== 0 ? (
|
|||
|
|
<AnimatedTargetValue value={indépendant.retraite.montant} />
|
|||
|
|
) : (
|
|||
|
|
<span className="ui__ notice">Pas implémenté</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="auto">
|
|||
|
|
{autoEntrepreneur && (
|
|||
|
|
<AnimatedTargetValue value={autoEntrepreneur.retraite.montant} />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showMore ? (
|
|||
|
|
<>
|
|||
|
|
{!hideAutoEntrepreneur && (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">ACCRE</h3>
|
|||
|
|
<div className="AS-et-indep">Une année, plafonné</div>
|
|||
|
|
<div className="auto">3 années, progressif, non plafonné</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Déduction des charges</h3>
|
|||
|
|
<div className="AS-et-indep">Régime réel </div>
|
|||
|
|
<div className="auto">Abattement forfaitaire </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>
|
|||
|
|
<div className="auto">Mensuel ou trimestriel</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">
|
|||
|
|
Complémentaires retraite et santé déductibles
|
|||
|
|
</h3>
|
|||
|
|
<div className="AS">Oui (jusqu'à 50%)</div>
|
|||
|
|
<div className="indep">Oui (Loi Madelin)</div>
|
|||
|
|
<div className="auto">Non</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Cotisations minimales</h3>
|
|||
|
|
<div className="AS">Non</div>
|
|||
|
|
<div className="indep">Oui</div>
|
|||
|
|
<div className="auto">Non</div>
|
|||
|
|
|
|||
|
|
<h3 className="legend">Seuil d'activation des droits</h3>
|
|||
|
|
<div className="AS">Oui</div>
|
|||
|
|
<div className="indep">Non</div>
|
|||
|
|
<div className="auto">Oui</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<h3 className="legend">Comparaison détaillée</h3>
|
|||
|
|
<div className="AS-indep-et-auto">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowMore(true)}
|
|||
|
|
className="ui__ simple small button">
|
|||
|
|
Afficher la comparaison détaillée
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<h3 className="legend">Comptabilité</h3>
|
|||
|
|
<div className="AS">Expert</div>
|
|||
|
|
<div className="indep">Compliquée</div>
|
|||
|
|
<div className="auto">Simplifiée</div>
|
|||
|
|
<div className="AS no-border">
|
|||
|
|
<button
|
|||
|
|
className="ui__ button"
|
|||
|
|
onClick={() => {
|
|||
|
|
!hideAssimiléSalarié && defineDirectorStatus('SALARIED')
|
|||
|
|
!hideAutoEntrepreneur && isAutoentrepreneur(false)
|
|||
|
|
}}>
|
|||
|
|
Choisir assimilé salarié
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="indep no-border">
|
|||
|
|
<button
|
|||
|
|
className="ui__ button"
|
|||
|
|
onClick={() => {
|
|||
|
|
!hideAssimiléSalarié && defineDirectorStatus('SELF_EMPLOYED')
|
|||
|
|
!hideAutoEntrepreneur && isAutoentrepreneur(false)
|
|||
|
|
}}>
|
|||
|
|
Choisir indépendant
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="auto no-border">
|
|||
|
|
<button
|
|||
|
|
className="ui__ button"
|
|||
|
|
onClick={() => {
|
|||
|
|
!hideAssimiléSalarié && defineDirectorStatus('SELF_EMPLOYED')
|
|||
|
|
!hideAutoEntrepreneur && isAutoentrepreneur(true)
|
|||
|
|
}}>
|
|||
|
|
Choisir auto-entrepreneur
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default (compose(
|
|||
|
|
connect(
|
|||
|
|
state => {
|
|||
|
|
const analyse = branchAnalyseSelector(state, {
|
|||
|
|
situationBranchName: 'Auto-entrepreneur'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
plafondAutoEntrepreneurDépassé:
|
|||
|
|
analyse.controls &&
|
|||
|
|
analyse.controls.find(({ test }) =>
|
|||
|
|
test.includes('base des cotisations > plafond')
|
|||
|
|
),
|
|||
|
|
conversationStarted: state.conversationStarted,
|
|||
|
|
|
|||
|
|
...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, defineDirectorStatus, isAutoentrepreneur }
|
|||
|
|
),
|
|||
|
|
withSimulationConfig(ComparaisonConfig)
|
|||
|
|
)(SchemeComparaison): React$Component<OwnProps>)
|