🖊 Ajout d'une explication pour le formulaire d'aide à la déclaration
Explication fournie par la DNRTI.pull/1038/head
Maxime Quandalle
parent
b6c2cedb6f
commit
e71ec202e8
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 }) {
|
|||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function Explicable({ children }: { children: React.ReactNode }) {
|
||||
const { Portal } = usePortal()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<Portal>
|
||||
<Overlay onClose={() => setIsOpen(false)}>{children}</Overlay>
|
||||
</Portal>
|
||||
)}
|
||||
<button
|
||||
className="ui__ link-button"
|
||||
onClick={() => setIsOpen(true)}
|
||||
css={`
|
||||
margin-left: 0.3rem !important;
|
||||
vertical-align: middle;
|
||||
font-size: 110% !important;
|
||||
`}
|
||||
>
|
||||
{emoji('ℹ️')}
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="step">
|
||||
<h3>
|
||||
{rules[dottedName].question} <Explicable dottedName={dottedName} />
|
||||
{rules[dottedName].question}{' '}
|
||||
<ExplicableRule dottedName={dottedName} />
|
||||
</h3>
|
||||
|
||||
<fieldset>
|
||||
|
|
|
|||
|
|
@ -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 => (
|
||||
<>
|
||||
<RadioLabelContent {...props} />
|
||||
<Explicable dottedName={props.dottedName} />
|
||||
<ExplicableRule dottedName={props.dottedName} />
|
||||
</>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -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 </0><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.</1><2><0>This tool is for you if you
|
||||
are in any of the following cases :</0><1><0>you contribute to the general
|
||||
scheme for self-employed persons</0><1>your business is in the actual tax
|
||||
system and in accrual accounting</1></1><2>It does not concern you if you
|
||||
are in one of the following cases:</2><3><0>you are a regulated liberal
|
||||
profession</0><1>you are a liberal profession contributing to the
|
||||
CIPAV</1><2>your company is domiciled in the DOMs</2></3></2><3>What is your
|
||||
professional income in 2019?</3><4>Indicate your net fiscal result before
|
||||
deduction of social security charges and tax exemptions.</4>
|
||||
description: <0>Help with your 2019 income tax return</0><1>This tool is a tax
|
||||
(income) and social security<1> (ISD</1>) declaration aid for self-employed
|
||||
workers. It enables you to find out the amount of social security charges
|
||||
deductible from your net tax result.</1><2>You remain fully responsible for
|
||||
any omissions or inaccuracies in your statements.</2><3><0><0>This tool
|
||||
concerns you if you are in any of the following cases :</0><1><0>you
|
||||
contribute to the general scheme for self-employed persons</0><1>your
|
||||
company is in the actual tax system and in accrual accounting</1></1><2>It
|
||||
does not concern you if you are in one of the following cases:</2><3><0>you
|
||||
are self-employed under a pension scheme for the liberal
|
||||
professions</0><1>you are managers of companies subject to corporate income
|
||||
tax</1><2>you have opted for the micro-fiscal regime</2><3>your company is
|
||||
domiciled in the DOM (French Overseas Departments and
|
||||
Territories)</3></3></0></3><4>What is your tax result in
|
||||
2019?<1></1><2>Social security charges and tax exemptions not
|
||||
included<2></2></2> </4><5>The tax result corresponds to income less
|
||||
expenses. It can be positive (profit) or negative (deficit).</5>
|
||||
entreprise:
|
||||
description: You can fill in your company to pre-fill in the form
|
||||
titre: <0>Company and activity</0>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div>
|
||||
|
|
@ -62,18 +56,17 @@ export default function() {
|
|||
<Trans i18nKey="aide-déclaration-indépendant.description">
|
||||
<h1>Aide à la déclaration de revenus au titre de l'année 2019</h1>
|
||||
<p>
|
||||
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 (
|
||||
<abbr title="Déclaration Sociale des Indépendants">DSI</abbr>) à
|
||||
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.
|
||||
</p>
|
||||
<div
|
||||
css={`
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<p>
|
||||
Vous restez entièrement responsable d'éventuelles omissions ou
|
||||
inexactitudes dans vos déclarations.
|
||||
</p>
|
||||
<div>
|
||||
<Warning localStorageKey="aide-déclaration-indépendant.warning">
|
||||
<h3>
|
||||
Cet outil vous concerne si vous êtes dans tous les cas suivants :
|
||||
|
|
@ -106,18 +99,21 @@ export default function() {
|
|||
</div>
|
||||
<h2>
|
||||
Quel est votre résultat fiscal en 2019 ?<br />
|
||||
<small>Charges sociales et exonérations fiscales non incluses</small>
|
||||
<small>
|
||||
Charges sociales et exonérations fiscales non incluses{' '}
|
||||
<ExplicationsResultatFiscal />
|
||||
</small>
|
||||
</h2>
|
||||
<p className="ui__ notice">
|
||||
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).
|
||||
</p>
|
||||
</Trans>
|
||||
<BigInput>
|
||||
<RuleInput
|
||||
rules={rules}
|
||||
dottedName="dirigeant . rémunération totale"
|
||||
onChange={updateIncome}
|
||||
onChange={setCurrentIncome}
|
||||
value={currentIncome}
|
||||
autoFocus
|
||||
/>
|
||||
|
|
@ -129,13 +125,7 @@ export default function() {
|
|||
<Trans i18nKey="aide-déclaration-indépendant.entreprise.titre">
|
||||
<h2>Entreprise et activité</h2>
|
||||
</Trans>
|
||||
<div
|
||||
css={`
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
{!company && (
|
||||
<p className="ui__ notice">
|
||||
<Trans i18nKey="aide-déclaration-indépendant.entreprise.description">
|
||||
|
|
@ -200,6 +190,123 @@ type SubSectionProp = {
|
|||
dottedName: DottedName
|
||||
hideTitle?: boolean
|
||||
}
|
||||
function ExplicationsResultatFiscal() {
|
||||
return (
|
||||
<Explicable>
|
||||
<>
|
||||
<h3>Quelles exonérations inclure ?</h3>
|
||||
<p>
|
||||
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é).
|
||||
</p>
|
||||
<p>L’opération à effectuer est la suivante :</p>
|
||||
<ul>
|
||||
<li>
|
||||
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{' '}
|
||||
<strong>(1)</strong>
|
||||
</li>
|
||||
<li>
|
||||
Ajoutez les exonérations <strong>(2)</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<table
|
||||
css={`
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: #e5effa;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
Résultat fiscal <strong>(1)</strong>
|
||||
</td>
|
||||
<td colSpan={4}>
|
||||
Exonérations <strong>(2)</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Exonérations liées aux zones / activités</td>
|
||||
<td>Exonérations Madelin et plan d’épargne retraite</td>
|
||||
<td>Exonérations de plus-values à court terme</td>
|
||||
<td>Suramortissement productif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BIC réel normal</td>
|
||||
<td>
|
||||
<strong>2058-A-SD</strong>
|
||||
<br />
|
||||
Ligne XN (bénéfice) Ligne XO (déficit)
|
||||
</td>
|
||||
<td>
|
||||
<strong>2058-A-SD</strong>
|
||||
<br />
|
||||
Lignes K9 / L6 / ØV / PP / L2 / 1F / L5 / PA / XC / PB
|
||||
</td>
|
||||
<td>
|
||||
<strong>2053-SD</strong>
|
||||
<br />
|
||||
Lignes A7 et A8
|
||||
</td>
|
||||
<td>
|
||||
<strong>2058-A-SD</strong>
|
||||
<br />
|
||||
Ligne XG (montant inclus)
|
||||
</td>
|
||||
<td>
|
||||
<strong>2058-A-SD</strong>
|
||||
<br />
|
||||
Lignes X9 et YA
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BIC réel simplifié</td>
|
||||
<td>
|
||||
<strong>2033-B-SD</strong>
|
||||
<br />
|
||||
Ligne 370 (bénéfice) Ligne 372 déficit)
|
||||
</td>
|
||||
<td>
|
||||
<strong>2033 B-SD</strong>
|
||||
<br />
|
||||
Lignes 986 / 127 / 991 / 345 / 992 / 987 / 989 / 990 / 993
|
||||
</td>
|
||||
<td>
|
||||
<strong>2033-SD</strong>
|
||||
<br />
|
||||
Lignes 325 et 327
|
||||
</td>
|
||||
<td>
|
||||
<strong>2033 B-SD</strong>
|
||||
<br />
|
||||
Ligne 350 (montant inclus)
|
||||
</td>
|
||||
<td>
|
||||
<strong>2033 B-SD</strong>
|
||||
<br />
|
||||
Lignes 655 et 643
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</>
|
||||
</Explicable>
|
||||
)
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<p>
|
||||
{question ?? evaluatedRule.question}
|
||||
<Explicable dottedName={dottedName} />
|
||||
<ExplicableRule dottedName={dottedName} />
|
||||
</p>
|
||||
<p className="ui__ notice">{summary ?? evaluatedRule.summary}</p>
|
||||
</div>
|
||||
|
|
|
|||
12
yarn.lock
12
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue