From 6fc5c69ea7984057bbdd8c4bd9ed9fa0adad719f Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 22 Jun 2023 15:57:55 +0200 Subject: [PATCH] =?UTF-8?q?Met=20=C3=A0=20jour=20le=20comparateur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/source/components/StatutTag.tsx | 10 +- site/source/design-system/checklist/index.tsx | 6 +- site/source/locales/ui-en.yaml | 1 - .../choix-du-statut/comparateur.tsx | 66 ++++++- .../components/Comparateur.tsx | 32 +++- .../components/DetailsRowCards.tsx | 104 ++++++----- .../components/Détails.tsx | 81 +++++---- ...lusLoinRevenus.tsx => ModifierOptions.tsx} | 12 +- .../components/RevenuTable.tsx | 36 +--- .../components/Résultats.tsx | 31 ---- .../components/StatusCard.tsx | 16 +- ...{RevenuAprèsImpot.tsx => StatutChoice.tsx} | 161 ++++++++---------- 12 files changed, 293 insertions(+), 263 deletions(-) rename site/source/pages/simulateurs/comparaison-statuts/components/{AllerPlusLoinRevenus.tsx => ModifierOptions.tsx} (96%) delete mode 100644 site/source/pages/simulateurs/comparaison-statuts/components/Résultats.tsx rename site/source/pages/simulateurs/comparaison-statuts/components/{RevenuAprèsImpot.tsx => StatutChoice.tsx} (50%) diff --git a/site/source/components/StatutTag.tsx b/site/source/components/StatutTag.tsx index 401102361..67fad87ff 100644 --- a/site/source/components/StatutTag.tsx +++ b/site/source/components/StatutTag.tsx @@ -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 ( {showIcon && } - {children ?? TAG_DATA[statut][text]} + {children ?? text === 'acronym' ? ( + + {TAG_DATA[statut].acronym} + + ) : ( + TAG_DATA[statut][text] + )} ) } diff --git a/site/source/design-system/checklist/index.tsx b/site/source/design-system/checklist/index.tsx index 80cc51e89..c297bd1b5 100644 --- a/site/source/design-system/checklist/index.tsx +++ b/site/source/design-system/checklist/index.tsx @@ -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; diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index 4d3bfd4c4..45e50aa87 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -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é"' diff --git a/site/source/pages/assistants/choix-du-statut/comparateur.tsx b/site/source/pages/assistants/choix-du-statut/comparateur.tsx index 1e104725b..fb4d1c069 100644 --- a/site/source/pages/assistants/choix-du-statut/comparateur.tsx +++ b/site/source/pages/assistants/choix-du-statut/comparateur.tsx @@ -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 ( <> - + + + Bonne nouvelle : il ne reste plus que{' '} + {namedEngines.length} statuts possibles. Vous allez + maintenant pouvoir entrer dans le détail et comparer{' '} + leurs revenus, la couverture sociale{' '} + et la gestion comptable et juridique avant de faire + votre choix. + + + + + theme.darkMode + ? theme.colors.extended.dark[700] + : theme.colors.bases.primary[100] + } + css={` + padding: 2rem 0; + `} + > + + +
+ + +
+ { // 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'] } } diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx index 3b6921a7a..f16b4c147 100644 --- a/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx +++ b/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx @@ -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 @@ -56,9 +57,32 @@ function Comparateur({ namedEngines }: { namedEngines: EngineComparison }) { - - + + + theme.darkMode + ? theme.colors.extended.dark[700] + : theme.colors.bases.primary[100] + } + css={` + padding: 1rem 0; + `} + > + +
+ +
+ + - - Ne s'applique pas - + - - - - - - - - {label && ' '} - {label && label} - + Ne s'applique pas - {warning?.(statusObject.engine)} - - {evolutionDottedName && ( - - + + + + + {label && ' '} + {label && label} + + {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - + > + + + {warning?.(statusObject.engine)} + + {evolutionDottedName && ( + + {' '} + {evolutionLabel} + + )} + {!evolutionDottedName && evolutionLabel && ( + {evolutionLabel} + )} + + ) @@ -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; +` diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx index 3e9f67aac..7da7f4414 100644 --- a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx +++ b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx @@ -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 ( @@ -35,6 +39,35 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => { } isFoldable > + + Vos revenus + + } + key="revenus" + hasChildItems={false} + > + + Revenus après impôts + + + + + + + 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. + + + @@ -360,16 +393,11 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => { } /> - - - + - Pour une invalidité causée par un accident professionnel, vous - pouvez bénéficier d’une rente d’incapacité. + Pour une invalidité causée par un{' '} + accident professionnel, vous pouvez bénéficier + d’une rente d’incapacité. { namedEngines={namedEngines} /> - + En plus du capital décès, une{' '} pension de réversion peut être versée au conjoint @@ -425,14 +449,11 @@ const Détails = ({ namedEngines }: { namedEngines: EngineComparison }) => { */} - + - Pour un décès survenu dans le cadre d’un accident professionnel, - vous pouvez bénéficier d’une rente de décès. + Pour un décès survenu dans le cadre d’un{' '} + accident professionnel, vous pouvez bénéficier + d’une rente de décès. @@ -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')} /> - + - Un capital « orphelin » est versé aux enfants des - travailleurs indépendants décédés, sous certaines conditions. + Un capital « orphelin » est versé aux{' '} + enfants des travailleurs indépendants décédés, + sous certaines conditions. diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/AllerPlusLoinRevenus.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx similarity index 96% rename from site/source/pages/simulateurs/comparaison-statuts/components/AllerPlusLoinRevenus.tsx rename to site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx index d150430b7..0636fd72d 100644 --- a/site/source/pages/simulateurs/comparaison-statuts/components/AllerPlusLoinRevenus.tsx +++ b/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx @@ -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) => ( )} confirmLabel="Enregistrer les options" @@ -114,9 +111,8 @@ const AllerPlusLoinRevenus = ({ > <>

- Aller plus loin sur les revenus + Modifier mes options

- @@ -276,4 +272,4 @@ const StyledArrowRightIcon = styled(ArrowRightIcon)` margin-left: ${({ theme }) => theme.spacings.sm}; ` -export default AllerPlusLoinRevenus +export default ModifierOptions diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx index 174e6213f..45a993cf5 100644 --- a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx +++ b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx @@ -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 ( <> -

- Calculer vos revenus -

+ @@ -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; diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/Résultats.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/Résultats.tsx deleted file mode 100644 index 2358f6a03..000000000 --- a/site/source/pages/simulateurs/comparaison-statuts/components/Résultats.tsx +++ /dev/null @@ -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 ( - <> - - theme.darkMode - ? theme.colors.extended.dark[700] - : theme.colors.bases.primary[200] - } - > - - - - - - ) -} - -export default Résultats - -const StyledContainer = styled(Container)` - padding: ${({ theme }) => theme.spacings.lg}; -` diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx index 80cbc5f07..61784504f 100644 --- a/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx +++ b/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx @@ -35,8 +35,7 @@ const StatusCard = ({ ))} - - {children} + {children} {isBestOption && ( { const gridSizes = getGridSizes(1, namedEngines.length) return ( - <> +
+ - + - + - {namedEngines[2] && } + {namedEngines[2] && } - - +
) } -function RevenuBloc({ +function StatutBloc({ engine, name, + hideCTA = false, }: { engine: Engine 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 ( + !hideCTA && ( +
+ +
+ ) } > - - {' '} - - - la première année - - - - {TAG_DATA[name].longName} +
    - - +
  • + + {versementLibératoire ? ( + + Versement libératoire de l'impôt sur le revenu + + ) : imposition === 'IS' ? ( + + Impôt sur les sociétés (IS) + + ) : ( + + Impôt sur le revenu (IR) + + )} + +
    • +
  • + + Régime social des {régimeSocial}s + +
    • +
  • + {engine.evaluate({ + valeur: 'dirigeant . exonérations . ACRE', + }).nodeValue + ? t('Avec ACRE') + : t('Sans exonération ACRE')} +
    • +
) } @@ -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