diff --git a/mon-entreprise/package.json b/mon-entreprise/package.json index 3348369ad..06a6326bf 100644 --- a/mon-entreprise/package.json +++ b/mon-entreprise/package.json @@ -50,6 +50,7 @@ "react-spring": "=8.0.27", "react-syntax-highlighter": "^10.1.1", "react-transition-group": "^2.2.1", + "react-useportal": "^1.0.13", "recharts": "^1.8.5", "reduce-reducers": "^1.0.4", "redux": "^4.0.4", diff --git a/mon-entreprise/source/components/conversation/Explicable.tsx b/mon-entreprise/source/components/conversation/Explicable.tsx index 0a267ef0d..ba7ecad0b 100644 --- a/mon-entreprise/source/components/conversation/Explicable.tsx +++ b/mon-entreprise/source/components/conversation/Explicable.tsx @@ -1,18 +1,18 @@ import { explainVariable } from 'Actions/actions' -import React, { useContext } from 'react' +import Overlay from 'Components/Overlay' +import { EngineContext } from 'Components/utils/EngineContext' +import React, { useContext, useState } from 'react' import emoji from 'react-easy-emoji' -import { useDispatch, useSelector } from 'react-redux' -import { RootState } from 'Reducers/rootReducer' +import { useDispatch } from 'react-redux' import { DottedName } from 'Rules' import { TrackerContext } from '../utils/withTracker' import './Explicable.css' -import { EngineContext } from 'Components/utils/EngineContext' +import usePortal from 'react-useportal' -export default function Explicable({ dottedName }: { dottedName: DottedName }) { +export function ExplicableRule({ dottedName }: { dottedName: DottedName }) { const rules = useContext(EngineContext).getParsedRules() const tracker = useContext(TrackerContext) const dispatch = useDispatch() - const explained = useSelector((state: RootState) => state.explainedVariable) // Rien à expliquer ici, ce n'est pas une règle if (dottedName == null) return null @@ -42,3 +42,28 @@ export default function Explicable({ dottedName }: { dottedName: DottedName }) { ) } + +export function Explicable({ children }: { children: React.ReactNode }) { + const { Portal } = usePortal() + const [isOpen, setIsOpen] = useState(false) + return ( + <> + {isOpen && ( + + setIsOpen(false)}>{children} + + )} + + + ) +} diff --git a/mon-entreprise/source/components/conversation/FormDecorator.tsx b/mon-entreprise/source/components/conversation/FormDecorator.tsx index d7deb35b3..eb8057fe7 100644 --- a/mon-entreprise/source/components/conversation/FormDecorator.tsx +++ b/mon-entreprise/source/components/conversation/FormDecorator.tsx @@ -1,5 +1,5 @@ import { updateSituation, goToQuestion } from 'Actions/actions' -import Explicable from 'Components/conversation/Explicable' +import { ExplicableRule } from 'Components/conversation/Explicable' import React, { useContext } from 'react' import { useDispatch, useSelector } from 'react-redux' import { situationSelector } from 'Selectors/simulationSelectors' @@ -34,7 +34,8 @@ export default function FormDecorator(RenderField) { return (

- {rules[dottedName].question} + {rules[dottedName].question}{' '} +

diff --git a/mon-entreprise/source/components/conversation/Question.tsx b/mon-entreprise/source/components/conversation/Question.tsx index 173471472..80d0d9eb7 100644 --- a/mon-entreprise/source/components/conversation/Question.tsx +++ b/mon-entreprise/source/components/conversation/Question.tsx @@ -4,7 +4,7 @@ import { is } from 'ramda' import React, { useCallback, useContext } from 'react' import emoji from 'react-easy-emoji' import { Trans } from 'react-i18next' -import Explicable from './Explicable' +import { ExplicableRule } from './Explicable' import SendButton from './SendButton' /* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans @@ -123,7 +123,7 @@ export default function Question({ export const RadioLabel = props => ( <> - + ) diff --git a/mon-entreprise/source/locales/ui-en.yaml b/mon-entreprise/source/locales/ui-en.yaml index 41fc14f6c..eac34106b 100644 --- a/mon-entreprise/source/locales/ui-en.yaml +++ b/mon-entreprise/source/locales/ui-en.yaml @@ -163,18 +163,23 @@ Votre entreprise: Your company Votre forme juridique: Your legal status aide: aid or subsidy aide-déclaration-indépendant: - description: <0>Help with your 2019 income tax return <1>This tool is a tax - (income) and social security (ISD) declaration aid for self-employed - workers. It allows you to find out the amount of social security charges - deductible from your net fiscal result.<2><0>This tool is for you if you - are in any of the following cases :<1><0>you contribute to the general - scheme for self-employed persons<1>your business is in the actual tax - system and in accrual accounting<2>It does not concern you if you - are in one of the following cases:<3><0>you are a regulated liberal - profession<1>you are a liberal profession contributing to the - CIPAV<2>your company is domiciled in the DOMs<3>What is your - professional income in 2019?<4>Indicate your net fiscal result before - deduction of social security charges and tax exemptions. + description: <0>Help with your 2019 income tax return<1>This tool is a tax + (income) and social security<1> (ISD) declaration aid for self-employed + workers. It enables you to find out the amount of social security charges + deductible from your net tax result.<2>You remain fully responsible for + any omissions or inaccuracies in your statements.<3><0><0>This tool + concerns you if you are in any of the following cases :<1><0>you + contribute to the general scheme for self-employed persons<1>your + company is in the actual tax system and in accrual accounting<2>It + does not concern you if you are in one of the following cases:<3><0>you + are self-employed under a pension scheme for the liberal + professions<1>you are managers of companies subject to corporate income + tax<2>you have opted for the micro-fiscal regime<3>your company is + domiciled in the DOM (French Overseas Departments and + Territories)<4>What is your tax result in + 2019?<1><2>Social security charges and tax exemptions not + included<2> <5>The tax result corresponds to income less + expenses. It can be positive (profit) or negative (deficit). entreprise: description: You can fill in your company to pre-fill in the form titre: <0>Company and activity diff --git a/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx b/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx index 579924cb8..a48769303 100644 --- a/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx +++ b/mon-entreprise/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx @@ -1,6 +1,6 @@ import { setSimulationConfig, updateSituation } from 'Actions/actions' import Aide from 'Components/conversation/Aide' -import Explicable from 'Components/conversation/Explicable' +import { Explicable, ExplicableRule } from 'Components/conversation/Explicable' import 'Components/TargetSelection.css' import Warning from 'Components/ui/WarningBlock' import { useEvaluation, EngineContext } from 'Components/utils/EngineContext' @@ -21,7 +21,7 @@ import simulationConfig from './config.yaml' import { useNextQuestions } from 'Components/utils/useNextQuestion' import emoji from 'react-easy-emoji' import RuleLink from 'Components/RuleLink' -import { formatValue } from 'Engine/format' +import { formatValue } from 'publicodes' import Skeleton from 'react-loading-skeleton' export default function() { @@ -32,29 +32,23 @@ export default function() { ) useEffect(() => { dispatch(setSimulationConfig(simulationConfig, true)) - }, []) + }, [dispatch]) - const dottedName = 'dirigeant . rémunération totale' const [resultsRef, resultsInViewPort] = useDisplayOnIntersecting({ threshold: 0.5, unobserve: false }) + const dottedName = 'dirigeant . rémunération totale' const value = useSelector(situationSelector)[dottedName] const [currentIncome, setCurrentIncome] = useState(value) const displayForm = currentIncome != null - const updateIncome = useCallback( - income => { - setCurrentIncome(income) - }, - [setCurrentIncome] - ) useEffect(() => { if (resultsInViewPort && displayForm) { dispatch(updateSituation(dottedName, currentIncome)) } else { dispatch(updateSituation(dottedName, null)) } - }, [resultsInViewPort, displayForm, currentIncome]) + }, [dispatch, resultsInViewPort, displayForm, currentIncome]) return (
@@ -62,18 +56,17 @@ export default function() {

Aide à la déclaration de revenus au titre de l'année 2019

- Cet outil est une aide aux déclarations fiscale (revenu) et sociale - (DSI) à destination des travailleurs indépendants. Il vous permet de - connaître le montant des charges sociales déductibles à partir de - votre résultat net fiscal. + Cet outil est une aide aux déclarations fiscale (revenu) et sociale ( + DSI) à + destination des travailleurs indépendants. Il vous permet de connaître + le montant des charges sociales déductibles à partir de votre résultat + net fiscal.

-
+

+ Vous restez entièrement responsable d'éventuelles omissions ou + inexactitudes dans vos déclarations. +

+

Cet outil vous concerne si vous êtes dans tous les cas suivants : @@ -106,18 +99,21 @@ export default function() {

Quel est votre résultat fiscal en 2019 ?
- Charges sociales et exonérations fiscales non incluses + + Charges sociales et exonérations fiscales non incluses{' '} + +

Le résultat fiscal correspond aux produits moins les charges. Il peut - être positif (bénéfice) ou négatif (pertes). + être positif (bénéfice) ou négatif (déficit).

@@ -129,13 +125,7 @@ export default function() {

Entreprise et activité

-
+
{!company && (

@@ -200,6 +190,123 @@ type SubSectionProp = { dottedName: DottedName hideTitle?: boolean } +function ExplicationsResultatFiscal() { + return ( + + <> +

Quelles exonérations inclure ?

+

+ calculer le montant du résultat fiscal avant déduction d ations et des + charges sociales à indiquer dans ce simula s pouvez utiliser votre + liasse fiscale, en reprenant l ts indiqués dans les lignes fiscales du + tableau ci-desso nction de votre situation (imposition au réel normal + ou au réel simplifié). +

+

L’opération à effectuer est la suivante :

+
    +
  • + minez le résultat fiscal dans votre liasse, sans montant de vos + cotisations et contributions socia gimes obligatoires de sécurité + sociale. Prenez le résultat fiscal correspondant{' '} + (1) +
  • +
  • + Ajoutez les exonérations (2) +
  • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Résultat fiscal (1) + + Exonérations (2) +
Exonérations liées aux zones / activitésExonérations Madelin et plan d’épargne retraiteExonérations de plus-values à court termeSuramortissement productif
BIC réel normal + 2058-A-SD +
+ Ligne XN (bénéfice) Ligne XO (déficit) +
+ 2058-A-SD +
+ Lignes K9 / L6 / ØV / PP / L2 / 1F / L5 / PA / XC / PB +
+ 2053-SD +
+ Lignes A7 et A8 +
+ 2058-A-SD +
+ Ligne XG (montant inclus) +
+ 2058-A-SD +
+ Lignes X9 et YA +
BIC réel simplifié + 2033-B-SD +
+ Ligne 370 (bénéfice) Ligne 372 déficit) +
+ 2033 B-SD +
+ Lignes 986 / 127 / 991 / 345 / 992 / 987 / 989 / 990 / 993 +
+ 2033-SD +
+ Lignes 325 et 327 +
+ 2033 B-SD +
+ Ligne 350 (montant inclus) +
+ 2033 B-SD +
+ Lignes 655 et 643 +
+ + + ) +} + function SubSection({ dottedName: sectionDottedName, hideTitle = false @@ -275,14 +382,11 @@ function SimpleField({ dottedName, question, summary }: SimpleFieldProps) { css={` border-left: 3px solid var(--lightColor); padding-left: 0.6rem; - @media print { - padding-left: 0 !important; - } `} >

{question ?? evaluatedRule.question} - +

{summary ?? evaluatedRule.summary}

diff --git a/yarn.lock b/yarn.lock index 212a45f03..88aab3599 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9683,6 +9683,13 @@ react-transition-group@^2.2.1, react-transition-group@^2.5.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-useportal@^1.0.13: + version "1.0.13" + resolved "https://registry.yarnpkg.com/react-useportal/-/react-useportal-1.0.13.tgz#abfc29f8128756cd7382bff7c81a4f446b792199" + integrity sha512-83KpNTXUIHnRVTLeMberIblCtssvRSKCPnG/xT9NW60gDYfU13pQBNQKCVUF8MBK+7LnCQ/ZrOuXl8Mp+iXdXA== + dependencies: + use-ssr "^1.0.19" + react@^16.13.1, react@^16.3.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" @@ -11691,6 +11698,11 @@ url@0.11.0, url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-ssr@^1.0.19: + version "1.0.23" + resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.23.tgz#3bde1e10cd01b3b61ab6386d7cddb72e74828bf8" + integrity sha512-5bvlssgROgPgIrnILJe2mJch4e2Id0/bVm1SQzqvPvEAXmlsinCCVHWK3a2iHcPat7PkdJHBo0gmSmODIz6tNA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"