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>)
|