🤩 Design du bloc explication des aides covid

pull/1231/head
Maxime Quandalle 2020-11-18 01:32:13 +01:00
parent ba2d9b3f99
commit 15eca2cdc7
5 changed files with 36 additions and 27 deletions

View File

@ -1,14 +1,12 @@
import Value, { Condition } from 'Components/EngineValue'
import React from 'react'
import emoji from 'react-easy-emoji'
import { DottedName } from 'Rules'
type AidesCovidProps = {
rule?: DottedName
rule: DottedName
}
export default function AidesCovid({rule}: AidesCovidProps) {
rule ??= "dirigeant . indépendant . cotisations et contributions . aides covid 2020"
export default function AidesCovid({ rule }: AidesCovidProps) {
return (
<div className="ui__ box-container">
<Condition expression={rule}>
@ -23,10 +21,7 @@ export default function AidesCovid({rule}: AidesCovidProps) {
Vous pouvez bénéficier de réductions de cotisations exceptionnelles.
</p>
<p className="ui__ lead">
<Value
displayedUnit="€"
expression={rule}
/>
<Value displayedUnit="€" expression={rule} />
</p>
</div>
</Condition>
@ -57,8 +52,15 @@ export default function AidesCovid({rule}: AidesCovidProps) {
flex: 1;
`}
>
Une <a>cellule de première écoute et de soutien psychologique</a> a
été mise en place pour les chefs d'entreprise fragilisés par la crise.
Une{' '}
<a
href="https://www.economie.gouv.fr/mise-en-place-cellule-ecoute-soutien-psychologique-chefs-entreprise"
target="_blank"
>
cellule de première écoute et de soutien psychologique
</a>{' '}
a été mise en place pour les chefs d'entreprise fragilisés par la
crise.
</p>
<a className="ui__ small simple button" href="tel:+33805655050">
{emoji('📞')} 08 05 65 50 50

View File

@ -17,6 +17,7 @@ import styled from 'styled-components'
import BarChartBranch from 'Components/BarChart'
import 'Components/Distribution.css'
import RuleLink from 'Components/RuleLink'
import AidesCovid from './AidesCovid'
// import Distribution from 'Components/Distribution'
export default function IndépendantExplanation() {
@ -130,6 +131,8 @@ function PLExplanation() {
</Condition>
</Animate.fromBottom>
</Trans>
<h2>Aides Covid-19</h2>
<AidesCovid rule="dirigeant . indépendant . cotisations et contributions . aides covid 2020" />
</section>
)
}

View File

@ -102,7 +102,6 @@ li {
}
a {
border: none;
display: inline-block;
font-size: inherit;
padding: none;
text-decoration: underline;

View File

@ -509,6 +509,15 @@ dirigeant . indépendant . cotisations et contributions . exonérations . ACRE .
- taux: 0%
plafond: 100%
dirigeant . indépendant . cotisations et contributions . aides covid 2020:
description: |
Le gouvernement et les organismes de sécurité sociale ont mis en place des
dispositifs de réduction de cotisation pour les indépendants impactés par la
crise du Coronavirus.
formule:
somme:
- PL . CIPAV . retraite complémentaire . réduction COVID . montant
dirigeant . indépendant . revenu net de cotisations:
synonymes:
- résultat comptable

View File

@ -3,6 +3,7 @@ import RuleInput from 'Components/conversation/RuleInput'
import { DistributionBranch } from 'Components/Distribution'
import Value, { Condition } from 'Components/EngineValue'
import SimulateurWarning from 'Components/SimulateurWarning'
import AidesCovid from 'Components/simulationExplanation/AidesCovid'
import 'Components/TargetSelection.css'
import Animate from 'Components/ui/animate'
import { EngineContext, useEvaluation } from 'Components/utils/EngineContext'
@ -139,6 +140,9 @@ function CotisationsResult() {
<ResultLine>
<ResultLabel>
<Trans>Montant des cotisations</Trans>
<p className="ui__ notice">
Incluant les réductions de cotisations liées au Covid-19
</p>
</ResultLabel>
<Value
displayedUnit="€"
@ -146,8 +150,15 @@ function CotisationsResult() {
expression="artiste-auteur . cotisations . avec réductions"
/>
</ResultLine>
<AideCovid />
</div>
<h2
css={`
margin-top: 4rem;
`}
>
<Trans>Aides Covid-19</Trans>
</h2>
<AidesCovid rule="artiste-auteur . réduction de cotisations covid 2020" />
<Condition expression="artiste-auteur . cotisations">
<RepartitionCotisations />
</Condition>
@ -194,18 +205,3 @@ function RepartitionCotisations() {
</section>
)
}
function AideCovid() {
return (
<Condition expression="artiste-auteur . réduction de cotisations covid 2020">
<ResultLine>
<ResultLabel>Dont réduction de cotisation covid</ResultLabel>
<Value
displayedUnit="€"
precision={0}
expression="artiste-auteur . réduction de cotisations covid 2020"
/>
</ResultLine>
</Condition>
)
}