Met à jour le comparateur
Johan Girod
parent
2072b288d9
commit
6fc5c69ea7
|
|
@ -11,7 +11,7 @@ import {
|
|||
import { Tag } from '@/design-system/tag'
|
||||
import { Colors } from '@/design-system/theme'
|
||||
|
||||
const TAG_DATA = {
|
||||
export const TAG_DATA = {
|
||||
EI: {
|
||||
color: 'independant',
|
||||
longName: 'Entreprise individuelle',
|
||||
|
|
@ -124,7 +124,13 @@ export const StatutTag = ({
|
|||
return (
|
||||
<StyledTag color={TAG_DATA[statut].color} sm className={className}>
|
||||
{showIcon && <Icon />}
|
||||
{children ?? TAG_DATA[statut][text]}
|
||||
{children ?? text === 'acronym' ? (
|
||||
<abbr title={TAG_DATA[statut].longName}>
|
||||
{TAG_DATA[statut].acronym}
|
||||
</abbr>
|
||||
) : (
|
||||
TAG_DATA[statut][text]
|
||||
)}
|
||||
</StyledTag>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,11 @@ export const CheckList = ({
|
|||
}
|
||||
|
||||
const StyledUl = styled.ul`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
`
|
||||
|
||||
const StyledLi = styled.li<{ $isChecked?: boolean }>`
|
||||
|
|
@ -47,6 +50,7 @@ const StyledLi = styled.li<{ $isChecked?: boolean }>`
|
|||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-family: ${({ theme }) => theme.fonts.main};
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ Afficher le détail: View details
|
|||
Aller au contenu principal: Go to main content
|
||||
Aller directement au pied de page: Go directly to the footer
|
||||
Aller plus loin: Go further
|
||||
Aller plus loin sur les revenus: Going further on income
|
||||
Annuler: Cancel
|
||||
Arrêt maladie: Sick leave
|
||||
Assimilé salarié: '"Assimilé-salarié"'
|
||||
|
|
|
|||
|
|
@ -1,22 +1,73 @@
|
|||
import { useMemo } from 'react'
|
||||
import { Trans } from 'react-i18next'
|
||||
|
||||
import { EngineDocumentationRoutes } from '@/components/EngineDocumentationRoutes'
|
||||
import { StatutType } from '@/components/StatutTag'
|
||||
import { useEngine, useRawSituation } from '@/components/utils/EngineContext'
|
||||
import { Button } from '@/design-system/buttons'
|
||||
import { Container } from '@/design-system/layout'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { EngineComparison } from '@/pages/simulateurs/comparaison-statuts/components/Comparateur'
|
||||
import Détails from '@/pages/simulateurs/comparaison-statuts/components/Détails'
|
||||
import Résultats from '@/pages/simulateurs/comparaison-statuts/components/Résultats'
|
||||
import ModifierOptions from '@/pages/simulateurs/comparaison-statuts/components/ModifierOptions'
|
||||
import RevenuEstimé from '@/pages/simulateurs/comparaison-statuts/components/RevenuEstimé'
|
||||
import StatutChoice from '@/pages/simulateurs/comparaison-statuts/components/StatutChoice'
|
||||
import { useCasParticuliers } from '@/pages/simulateurs/comparaison-statuts/contexts/CasParticuliers'
|
||||
import { useSitePaths } from '@/sitePaths'
|
||||
import { Situation } from '@/store/reducers/rootReducer'
|
||||
|
||||
import { usePreviousStep } from './_components/useSteps'
|
||||
|
||||
export default function Comparateur() {
|
||||
const namedEngines = useStatutComparaison()
|
||||
const { absoluteSitePaths } = useSitePaths()
|
||||
const previousStep = usePreviousStep()
|
||||
const choixDuStatutPath = absoluteSitePaths.assistants['choix-du-statut']
|
||||
|
||||
return (
|
||||
<>
|
||||
<Résultats namedEngines={namedEngines} />
|
||||
<Trans i18nKey="choix-statut.commune.description">
|
||||
<Body>
|
||||
Bonne nouvelle : il ne reste plus que{' '}
|
||||
<Strong>{namedEngines.length} statuts possibles</Strong>. Vous allez
|
||||
maintenant pouvoir entrer dans le détail et comparer{' '}
|
||||
<Strong>leurs revenus</Strong>, la <Strong>couverture sociale</Strong>{' '}
|
||||
et la <Strong>gestion comptable et juridique</Strong> avant de faire
|
||||
votre choix.
|
||||
</Body>
|
||||
</Trans>
|
||||
|
||||
<Container
|
||||
backgroundColor={(theme) =>
|
||||
theme.darkMode
|
||||
? theme.colors.extended.dark[700]
|
||||
: theme.colors.bases.primary[100]
|
||||
}
|
||||
css={`
|
||||
padding: 2rem 0;
|
||||
`}
|
||||
>
|
||||
<RevenuEstimé />
|
||||
<StatutChoice namedEngines={namedEngines} />
|
||||
<div
|
||||
css={`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 2rem;
|
||||
`}
|
||||
>
|
||||
<Button
|
||||
light
|
||||
color={'secondary'}
|
||||
to={choixDuStatutPath[previousStep]}
|
||||
>
|
||||
{' '}
|
||||
<span aria-hidden>←</span> <Trans>Précédent</Trans>
|
||||
</Button>
|
||||
<ModifierOptions namedEngines={namedEngines} />
|
||||
</div>
|
||||
</Container>
|
||||
<Détails namedEngines={namedEngines} />
|
||||
<EngineDocumentationRoutes
|
||||
namedEngines={namedEngines}
|
||||
|
|
@ -54,12 +105,17 @@ function usePossibleStatuts(): Array<StatutType> {
|
|||
// We could do this logic by filtering the applicable status in publicodes,
|
||||
// but for now, there is only two options, so we hardcode it
|
||||
if (
|
||||
engine.evaluate('entreprise . catégorie juridique . EI = non').nodeValue ===
|
||||
engine.evaluate('entreprise . catégorie juridique . EI = non').nodeValue !==
|
||||
true
|
||||
) {
|
||||
return ['SASU', 'SARL']
|
||||
} else {
|
||||
return ['SASU', 'EI', 'AE']
|
||||
} else if (
|
||||
engine.evaluate('entreprise . catégorie juridique . SARL . EURL = non')
|
||||
.nodeValue !== true
|
||||
) {
|
||||
return ['SASU', 'EURL']
|
||||
} else {
|
||||
return ['SAS', 'SARL']
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,11 +9,12 @@ import Simulation, {
|
|||
SimulationGoals,
|
||||
} from '@/components/Simulation'
|
||||
import { StatutType } from '@/components/StatutTag'
|
||||
import { Spacing } from '@/design-system/layout'
|
||||
import { Container, Spacing } from '@/design-system/layout'
|
||||
import { useSitePaths } from '@/sitePaths'
|
||||
|
||||
import Détails from './Détails'
|
||||
import Résultats from './Résultats'
|
||||
import ModifierOptions from './ModifierOptions'
|
||||
import StatutChoice from './StatutChoice'
|
||||
|
||||
type NamedEngine = {
|
||||
engine: Engine<DottedName>
|
||||
|
|
@ -56,9 +57,32 @@ function Comparateur({ namedEngines }: { namedEngines: EngineComparison }) {
|
|||
<SimulationGoal dottedName="entreprise . charges" isInfoMode />
|
||||
</SimulationGoals>
|
||||
</Simulation>
|
||||
<Spacing md />
|
||||
<Résultats namedEngines={namedEngines} />
|
||||
<Spacing lg />
|
||||
<Container
|
||||
backgroundColor={(theme) =>
|
||||
theme.darkMode
|
||||
? theme.colors.extended.dark[700]
|
||||
: theme.colors.bases.primary[100]
|
||||
}
|
||||
css={`
|
||||
padding: 1rem 0;
|
||||
`}
|
||||
>
|
||||
<StatutChoice namedEngines={namedEngines} hideCTA />
|
||||
<div
|
||||
css={`
|
||||
text-align: right;
|
||||
padding-top: 1rem;
|
||||
`}
|
||||
>
|
||||
<ModifierOptions namedEngines={namedEngines} />
|
||||
</div>
|
||||
</Container>
|
||||
<Détails namedEngines={namedEngines} />
|
||||
<EngineDocumentationRoutes
|
||||
namedEngines={namedEngines}
|
||||
basePath={absoluteSitePaths.assistants['choix-du-statut'].comparateur}
|
||||
/>
|
||||
<EngineDocumentationRoutes
|
||||
basePath={absoluteSitePaths.simulateurs.comparaison}
|
||||
namedEngines={namedEngines}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import Value, {
|
|||
import RuleLink from '@/components/RuleLink'
|
||||
import { HelpIcon } from '@/design-system/icons'
|
||||
import { Grid } from '@/design-system/layout'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
|
||||
import { getBestOption, OptionType } from '../utils'
|
||||
import { EngineComparison } from './Comparateur'
|
||||
|
|
@ -85,9 +86,9 @@ const DetailsRowCards = ({
|
|||
|
||||
return (
|
||||
<Grid
|
||||
key={`${dottedName}-${statusObject.name}`}
|
||||
key={`${dottedName}-${statusObject.name as string}`}
|
||||
item
|
||||
{...getGridSizes(sameValueOptions.length, groupedOptions.length)}
|
||||
{...getGridSizes(sameValueOptions.length, options.length)}
|
||||
as="ul"
|
||||
>
|
||||
<StatusCard
|
||||
|
|
@ -98,60 +99,62 @@ const DetailsRowCards = ({
|
|||
bestOptionValue === statusObject.name
|
||||
}
|
||||
>
|
||||
<WhenNotApplicable
|
||||
dottedName={dottedName}
|
||||
engine={statusObject.engine}
|
||||
>
|
||||
<DisabledLabel>Ne s'applique pas</DisabledLabel>
|
||||
<StyledRuleLink
|
||||
documentationPath={`${statusObject.name}`}
|
||||
<StyledBody as="div">
|
||||
<WhenNotApplicable
|
||||
dottedName={dottedName}
|
||||
engine={statusObject.engine}
|
||||
>
|
||||
<HelpIcon />
|
||||
</StyledRuleLink>
|
||||
</WhenNotApplicable>
|
||||
<WhenApplicable
|
||||
dottedName={dottedName}
|
||||
engine={statusObject.engine}
|
||||
>
|
||||
<StyledDiv>
|
||||
<span>
|
||||
<Value
|
||||
linkToRule={false}
|
||||
expression={dottedName}
|
||||
engine={statusObject.engine}
|
||||
precision={0}
|
||||
unit={unit}
|
||||
/>
|
||||
{label && ' '}
|
||||
{label && label}
|
||||
</span>
|
||||
<DisabledLabel>Ne s'applique pas</DisabledLabel>
|
||||
<StyledRuleLink
|
||||
documentationPath={`${statusObject.name}`}
|
||||
documentationPath={`${statusObject.name as string}`}
|
||||
dottedName={dottedName}
|
||||
engine={statusObject.engine}
|
||||
>
|
||||
<HelpIcon />
|
||||
</StyledRuleLink>
|
||||
{warning?.(statusObject.engine)}
|
||||
</StyledDiv>
|
||||
{evolutionDottedName && (
|
||||
<Precisions>
|
||||
<Value
|
||||
linkToRule={false}
|
||||
expression={evolutionDottedName}
|
||||
</WhenNotApplicable>
|
||||
<WhenApplicable
|
||||
dottedName={dottedName}
|
||||
engine={statusObject.engine}
|
||||
>
|
||||
<StyledDiv>
|
||||
<span>
|
||||
<Value
|
||||
linkToRule={false}
|
||||
expression={dottedName}
|
||||
engine={statusObject.engine}
|
||||
precision={0}
|
||||
unit={unit}
|
||||
/>
|
||||
{label && ' '}
|
||||
{label && label}
|
||||
</span>
|
||||
<StyledRuleLink
|
||||
documentationPath={`${statusObject.name}`}
|
||||
dottedName={dottedName}
|
||||
engine={statusObject.engine}
|
||||
precision={0}
|
||||
unit={unit}
|
||||
/>{' '}
|
||||
{evolutionLabel}
|
||||
</Precisions>
|
||||
)}
|
||||
{!evolutionDottedName && evolutionLabel && (
|
||||
<Precisions>{evolutionLabel}</Precisions>
|
||||
)}
|
||||
</WhenApplicable>
|
||||
>
|
||||
<HelpIcon />
|
||||
</StyledRuleLink>
|
||||
{warning?.(statusObject.engine)}
|
||||
</StyledDiv>
|
||||
{evolutionDottedName && (
|
||||
<Precisions>
|
||||
<Value
|
||||
linkToRule={false}
|
||||
expression={evolutionDottedName}
|
||||
engine={statusObject.engine}
|
||||
precision={0}
|
||||
unit={unit}
|
||||
/>{' '}
|
||||
{evolutionLabel}
|
||||
</Precisions>
|
||||
)}
|
||||
{!evolutionDottedName && evolutionLabel && (
|
||||
<Precisions>{evolutionLabel}</Precisions>
|
||||
)}
|
||||
</WhenApplicable>
|
||||
</StyledBody>
|
||||
</StatusCard>
|
||||
</Grid>
|
||||
)
|
||||
|
|
@ -194,3 +197,12 @@ const StyledDiv = styled.div`
|
|||
`
|
||||
|
||||
export default DetailsRowCards
|
||||
const StyledBody = styled(Body)`
|
||||
font-size: 1.25rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
margin-top: 0.75rem;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { Trans } from 'react-i18next'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { ExplicableRule } from '@/components/conversation/Explicable'
|
||||
import Value, { Condition } from '@/components/EngineValue'
|
||||
import { ExplicableRule } from '@/components/conversation/Explicable'
|
||||
import { Accordion, Item } from '@/design-system'
|
||||
import { HelpButtonWithPopover } from '@/design-system/buttons'
|
||||
import { Emoji } from '@/design-system/emoji'
|
||||
import { ExternalLinkIcon, PlusCircleIcon } from '@/design-system/icons'
|
||||
import { Container, Spacing } from '@/design-system/layout'
|
||||
import { Container } from '@/design-system/layout'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { H2, H4 } from '@/design-system/typography/heading'
|
||||
import { StyledLink } from '@/design-system/typography/link'
|
||||
|
|
@ -15,9 +16,12 @@ import { Body } from '@/design-system/typography/paragraphs'
|
|||
import { EngineComparison } from './Comparateur'
|
||||
import DetailsRowCards from './DetailsRowCards'
|
||||
import ItemTitle from './ItemTitle'
|
||||
import RevenuTable from './RevenuTable'
|
||||
import WarningTooltip from './WarningTooltip'
|
||||
|
||||
const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<StyledContainer
|
||||
backgroundColor={(theme) =>
|
||||
|
|
@ -35,6 +39,35 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
|||
}
|
||||
isFoldable
|
||||
>
|
||||
<Item
|
||||
title={
|
||||
<ItemTitle>
|
||||
<Trans>Vos revenus</Trans> <Emoji emoji="🤑" />
|
||||
</ItemTitle>
|
||||
}
|
||||
key="revenus"
|
||||
hasChildItems={false}
|
||||
>
|
||||
<StyledH4>
|
||||
<Trans>Revenus après impôts</Trans>
|
||||
|
||||
<HelpButtonWithPopover
|
||||
type="info"
|
||||
title={t('Calculer vos revenus')}
|
||||
>
|
||||
<RevenuTable namedEngines={namedEngines} />
|
||||
</HelpButtonWithPopover>
|
||||
</StyledH4>
|
||||
<Body>
|
||||
Vos revenu après déduction de l'impôt sur le revenu, en prenant
|
||||
compte de l'ACRE si vous avez activé l'option.
|
||||
</Body>
|
||||
<DetailsRowCards
|
||||
dottedName="dirigeant . rémunération . net . après impôt"
|
||||
namedEngines={namedEngines}
|
||||
unit="€/mois"
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
title={
|
||||
<ItemTitle>
|
||||
|
|
@ -360,16 +393,11 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
|||
</span>
|
||||
}
|
||||
/>
|
||||
<Spacing md />
|
||||
|
||||
<Body
|
||||
css={`
|
||||
margin-top: 2rem;
|
||||
`}
|
||||
>
|
||||
<Body>
|
||||
<Trans>
|
||||
Pour une invalidité causée par un accident professionnel, vous
|
||||
pouvez bénéficier d’une <Strong>rente d’incapacité</Strong>.
|
||||
Pour une invalidité causée par un{' '}
|
||||
<Strong>accident professionnel</Strong>, vous pouvez bénéficier
|
||||
d’une <Strong>rente d’incapacité</Strong>.
|
||||
</Trans>
|
||||
</Body>
|
||||
<DetailsRowCards
|
||||
|
|
@ -394,11 +422,7 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
|||
namedEngines={namedEngines}
|
||||
/>
|
||||
|
||||
<Body
|
||||
css={`
|
||||
margin-top: 2rem;
|
||||
`}
|
||||
>
|
||||
<Body>
|
||||
<Trans>
|
||||
En plus du capital décès, une{' '}
|
||||
<Strong>pension de réversion</Strong> peut être versée au conjoint
|
||||
|
|
@ -425,14 +449,11 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
|||
</span>
|
||||
</StatusCard> */}
|
||||
|
||||
<Body
|
||||
css={`
|
||||
margin-top: 2rem;
|
||||
`}
|
||||
>
|
||||
<Body>
|
||||
<Trans>
|
||||
Pour un décès survenu dans le cadre d’un accident professionnel,
|
||||
vous pouvez bénéficier d’une <Strong>rente de décès</Strong>.
|
||||
Pour un décès survenu dans le cadre d’un{' '}
|
||||
<Strong>accident professionnel</Strong>, vous pouvez bénéficier
|
||||
d’une <Strong>rente de décès</Strong>.
|
||||
</Trans>
|
||||
</Body>
|
||||
|
||||
|
|
@ -440,16 +461,14 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
|||
dottedName="protection sociale . invalidité et décès . accidents du travail et maladies professionnelles . rente décès"
|
||||
namedEngines={namedEngines}
|
||||
unit="€/mois"
|
||||
label={t('pour vos proches')}
|
||||
/>
|
||||
|
||||
<Body
|
||||
css={`
|
||||
margin-top: 2rem;
|
||||
`}
|
||||
>
|
||||
<Body>
|
||||
<Trans>
|
||||
Un <Strong>capital « orphelin »</Strong> est versé aux enfants des
|
||||
travailleurs indépendants décédés, sous certaines conditions.
|
||||
Un <Strong>capital « orphelin »</Strong> est versé aux{' '}
|
||||
<Strong>enfants des travailleurs indépendants</Strong> décédés,
|
||||
sous certaines conditions.
|
||||
</Trans>
|
||||
</Body>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,14 +21,13 @@ import { answerQuestion } from '@/store/actions/actions'
|
|||
|
||||
import { useCasParticuliers } from '../contexts/CasParticuliers'
|
||||
import { EngineComparison } from './Comparateur'
|
||||
import RevenuTable from './RevenuTable'
|
||||
|
||||
const DOTTEDNAME_SOCIETE_IMPOT = 'entreprise . imposition'
|
||||
const DOTTEDNAME_SOCIETE_VERSEMENT_LIBERATOIRE =
|
||||
'dirigeant . auto-entrepreneur . impôt . versement libératoire'
|
||||
const DOTTEDNAME_ACRE = 'dirigeant . exonérations . ACRE'
|
||||
|
||||
const AllerPlusLoinRevenus = ({
|
||||
const ModifierOptions = ({
|
||||
namedEngines,
|
||||
}: {
|
||||
namedEngines: EngineComparison
|
||||
|
|
@ -70,12 +69,10 @@ const AllerPlusLoinRevenus = ({
|
|||
trigger={(buttonProps) => (
|
||||
<Button
|
||||
color="secondary"
|
||||
light
|
||||
size="XS"
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...buttonProps}
|
||||
>
|
||||
<Trans>Aller plus loin</Trans> <StyledArrowRightIcon />
|
||||
<Trans>Modifier mes options</Trans> <StyledArrowRightIcon />
|
||||
</Button>
|
||||
)}
|
||||
confirmLabel="Enregistrer les options"
|
||||
|
|
@ -114,9 +111,8 @@ const AllerPlusLoinRevenus = ({
|
|||
>
|
||||
<>
|
||||
<H2>
|
||||
<Trans>Aller plus loin sur les revenus</Trans>
|
||||
<Trans>Modifier mes options</Trans>
|
||||
</H2>
|
||||
<RevenuTable namedEngines={namedEngines} />
|
||||
|
||||
<Spacing md />
|
||||
<Flex>
|
||||
|
|
@ -276,4 +272,4 @@ const StyledArrowRightIcon = styled(ArrowRightIcon)`
|
|||
margin-left: ${({ theme }) => theme.spacings.sm};
|
||||
`
|
||||
|
||||
export default AllerPlusLoinRevenus
|
||||
export default ModifierOptions
|
||||
|
|
@ -5,7 +5,6 @@ import Value from '@/components/EngineValue'
|
|||
import { StatutTag } from '@/components/StatutTag'
|
||||
import { Tag } from '@/design-system/tag'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { H4 } from '@/design-system/typography/heading'
|
||||
|
||||
import { EngineComparison } from './Comparateur'
|
||||
|
||||
|
|
@ -18,14 +17,7 @@ export default function RevenuTable({
|
|||
|
||||
return (
|
||||
<>
|
||||
<H4
|
||||
as="h3"
|
||||
css={`
|
||||
margin-bottom: 1rem;
|
||||
`}
|
||||
>
|
||||
<Trans>Calculer vos revenus</Trans>
|
||||
</H4>
|
||||
|
||||
<WrapperTable>
|
||||
<StyledTable>
|
||||
<caption className="sr-only">
|
||||
|
|
@ -249,32 +241,6 @@ const StyledTable = styled.table`
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* color: ${({ theme }) => theme.colors.bases.secondary[600]};
|
||||
svg {
|
||||
fill: ${({ theme }) => theme.colors.bases.secondary[600]};
|
||||
margin-right: ${({ theme }) => theme.spacings.xxs};
|
||||
} */
|
||||
/* }
|
||||
.table-title-ei {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${({ theme }) => theme.colors.publics.independant[600]};
|
||||
svg {
|
||||
fill: ${({ theme }) => theme.colors.publics.independant[600]};
|
||||
margin-right: ${({ theme }) => theme.spacings.xxs};
|
||||
}
|
||||
}
|
||||
.table-title-ae {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${({ theme }) => theme.colors.bases.tertiary[500]};
|
||||
svg {
|
||||
fill: ${({ theme }) => theme.colors.bases.tertiary[500]};
|
||||
margin-right: ${({ theme }) => theme.spacings.xxs};
|
||||
}
|
||||
} */
|
||||
|
||||
tbody th {
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
import { Container, Spacing } from '@/design-system/layout'
|
||||
|
||||
import { EngineComparison } from './Comparateur'
|
||||
import RevenuAprèsImpot from './RevenuAprèsImpot'
|
||||
import RevenuEstimé from './RevenuEstimé'
|
||||
|
||||
const Résultats = ({ namedEngines }: { namedEngines: EngineComparison }) => {
|
||||
return (
|
||||
<>
|
||||
<StyledContainer
|
||||
backgroundColor={(theme) =>
|
||||
theme.darkMode
|
||||
? theme.colors.extended.dark[700]
|
||||
: theme.colors.bases.primary[200]
|
||||
}
|
||||
>
|
||||
<RevenuEstimé />
|
||||
<Spacing md />
|
||||
<RevenuAprèsImpot namedEngines={namedEngines} />
|
||||
</StyledContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Résultats
|
||||
|
||||
const StyledContainer = styled(Container)`
|
||||
padding: ${({ theme }) => theme.spacings.lg};
|
||||
`
|
||||
|
|
@ -35,8 +35,7 @@ const StatusCard = ({
|
|||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<StyledBody as="div">{children}</StyledBody>
|
||||
{children}
|
||||
</CardBody>
|
||||
{isBestOption && (
|
||||
<Tooltip
|
||||
|
|
@ -79,18 +78,11 @@ const StyledEmoji = styled(Emoji)`
|
|||
font-size: 1.5rem;
|
||||
`
|
||||
|
||||
const StyledBody = styled(Body)`
|
||||
font-size: 1.25rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
margin-top: 0.75rem;
|
||||
`
|
||||
|
||||
const CardBody = styled.div`
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,105 +1,117 @@
|
|||
import { DottedName } from 'modele-social'
|
||||
import Engine from 'publicodes'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import Value, { Condition, WhenAlreadyDefined } from '@/components/EngineValue'
|
||||
import RuleLink from '@/components/RuleLink'
|
||||
import { StatutType } from '@/components/StatutTag'
|
||||
import { CheckList } from '@/design-system'
|
||||
import { ExternalLinkIcon, HelpIcon } from '@/design-system/icons'
|
||||
import { Grid } from '@/design-system/layout'
|
||||
import { StyledLink } from '@/design-system/typography/link'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { useSitePaths } from '@/sitePaths'
|
||||
import { StatutType, TAG_DATA } from '@/components/StatutTag'
|
||||
import { Button } from '@/design-system/buttons'
|
||||
import { Grid, Spacing } from '@/design-system/layout'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { H4 } from '@/design-system/typography/heading'
|
||||
import { Li, Ul } from '@/design-system/typography/list'
|
||||
|
||||
import AllerPlusLoinRevenus from './AllerPlusLoinRevenus'
|
||||
import { EngineComparison } from './Comparateur'
|
||||
import { getGridSizes } from './DetailsRowCards'
|
||||
import StatusCard from './StatusCard'
|
||||
|
||||
const RevenuAprèsImpot = ({
|
||||
const StatutChoice = ({
|
||||
namedEngines,
|
||||
hideCTA = false,
|
||||
}: {
|
||||
namedEngines: EngineComparison
|
||||
hideCTA: boolean
|
||||
}) => {
|
||||
const gridSizes = getGridSizes(1, namedEngines.length)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Spacing lg />
|
||||
<Grid container spacing={4}>
|
||||
<Grid item {...gridSizes}>
|
||||
<RevenuBloc {...namedEngines[0]} />
|
||||
<StatutBloc {...namedEngines[0]} hideCTA />
|
||||
</Grid>
|
||||
<Grid item {...gridSizes}>
|
||||
<RevenuBloc {...namedEngines[1]} />
|
||||
<StatutBloc {...namedEngines[1]} hideCTA />
|
||||
</Grid>
|
||||
<Grid item {...gridSizes}>
|
||||
{namedEngines[2] && <RevenuBloc {...namedEngines[2]} />}
|
||||
{namedEngines[2] && <StatutBloc {...namedEngines[2]} hideCTA />}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<AllerPlusLoinRevenus namedEngines={namedEngines} />
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RevenuBloc({
|
||||
function StatutBloc({
|
||||
engine,
|
||||
name,
|
||||
hideCTA = false,
|
||||
}: {
|
||||
engine: Engine<DottedName>
|
||||
name: StatutType
|
||||
hideCTA: boolean
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const { absoluteSitePaths } = useSitePaths()
|
||||
const régimeSocial = engine.evaluate('dirigeant . régime social')
|
||||
.nodeValue as string
|
||||
const imposition = engine.evaluate('entreprise . imposition')
|
||||
.nodeValue as string
|
||||
const versementLibératoire = engine.evaluate(
|
||||
'dirigeant . auto-entrepreneur . impôt . versement libératoire'
|
||||
).nodeValue as string
|
||||
|
||||
return (
|
||||
<StatusCard
|
||||
statut={[name]}
|
||||
footerContent={
|
||||
<CheckList
|
||||
items={[
|
||||
{
|
||||
isChecked: engine.evaluate({
|
||||
valeur: 'dirigeant . exonérations . ACRE',
|
||||
}).nodeValue as boolean,
|
||||
label: engine.evaluate({
|
||||
valeur: 'dirigeant . exonérations . ACRE',
|
||||
}).nodeValue
|
||||
? t("Tient compte de l'ACRE")
|
||||
: t("Ne prend pas l'ACRE en compte"),
|
||||
},
|
||||
{
|
||||
isChecked: true,
|
||||
label: t("Choix d'imposition : impôt sur les sociétés"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
!hideCTA && (
|
||||
<div
|
||||
css={`
|
||||
text-align: center;
|
||||
`}
|
||||
>
|
||||
<Button size="XS">Choisir ce statut</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<Value
|
||||
linkToRule={false}
|
||||
expression="dirigeant . rémunération . net . après impôt"
|
||||
engine={engine}
|
||||
precision={0}
|
||||
unit="€/mois"
|
||||
/>{' '}
|
||||
<Condition engine={engine} expression="dirigeant . exonérations . ACRE">
|
||||
<WhenAlreadyDefined
|
||||
dottedName="dirigeant . rémunération . net . après impôt"
|
||||
engine={engine}
|
||||
>
|
||||
<Trans>la première année</Trans>
|
||||
</WhenAlreadyDefined>
|
||||
</Condition>
|
||||
</span>
|
||||
<StyledRuleLink
|
||||
dottedName="dirigeant . rémunération . net . après impôt"
|
||||
engine={engine}
|
||||
documentationPath={`${absoluteSitePaths.assistants['choix-du-statut'].comparateur}/{name}`}
|
||||
<H4 as="h3">{TAG_DATA[name].longName}</H4>
|
||||
<Ul
|
||||
css={`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
`}
|
||||
>
|
||||
<HelpIcon />
|
||||
</StyledRuleLink>
|
||||
<Li>
|
||||
<Trans>
|
||||
{versementLibératoire ? (
|
||||
<Trans>
|
||||
<Strong>Versement libératoire</Strong> de l'impôt sur le revenu
|
||||
</Trans>
|
||||
) : imposition === 'IS' ? (
|
||||
<Trans>
|
||||
<Strong>Impôt sur les sociétés</Strong> (IS)
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>
|
||||
<Strong>Impôt sur le revenu</Strong> (IR)
|
||||
</Trans>
|
||||
)}
|
||||
</Trans>
|
||||
</Li>
|
||||
<Li>
|
||||
<Trans>
|
||||
Régime social des <Strong>{régimeSocial}s</Strong>
|
||||
</Trans>
|
||||
</Li>
|
||||
<Li>
|
||||
{engine.evaluate({
|
||||
valeur: 'dirigeant . exonérations . ACRE',
|
||||
}).nodeValue
|
||||
? t('Avec ACRE')
|
||||
: t('Sans exonération ACRE')}
|
||||
</Li>
|
||||
</Ul>
|
||||
</StatusCard>
|
||||
)
|
||||
}
|
||||
|
|
@ -171,29 +183,4 @@ function RevenuBloc({
|
|||
/>
|
||||
*/
|
||||
|
||||
export default RevenuAprèsImpot
|
||||
|
||||
const StyledRuleLink = styled(RuleLink)`
|
||||
display: inline-flex;
|
||||
margin-left: 0.15rem;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledExternalLinkIcon = styled(ExternalLinkIcon)`
|
||||
margin-left: 0.25rem;
|
||||
`
|
||||
|
||||
const BlackColoredLink = styled(StyledLink)`
|
||||
color: ${({ theme }) => theme.colors.extended.grey[800]};
|
||||
`
|
||||
|
||||
const DivAlignRight = styled.div`
|
||||
margin-top: ${({ theme }) => theme.spacings.lg};
|
||||
text-align: right;
|
||||
`
|
||||
|
||||
const StyledBody = styled(Body)`
|
||||
color: ${({ theme }) => theme.colors.extended.grey[100]}!important;
|
||||
`
|
||||
export default StatutChoice
|
||||
Loading…
Reference in New Issue