From 28308c9a7c2b5ff5f6b40d1514972d505167926c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Thu, 17 Mar 2022 18:40:11 +0100 Subject: [PATCH] Ajout de la page S2 --- .../design-system/field/Radio/Radio.tsx | 36 +++-- .../ExonerationCovid/FormulaireS1S1Bis.tsx | 61 +------ .../ExonerationCovid/FormulaireS2.tsx | 149 ++++++++++++++++++ .../Simulateurs/ExonerationCovid/Recap.tsx | 52 ++++++ .../Simulateurs/ExonerationCovid/index.tsx | 21 +-- 5 files changed, 245 insertions(+), 74 deletions(-) create mode 100644 site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx create mode 100644 site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx diff --git a/site/source/design-system/field/Radio/Radio.tsx b/site/source/design-system/field/Radio/Radio.tsx index 823170634..c2ab853a1 100644 --- a/site/source/design-system/field/Radio/Radio.tsx +++ b/site/source/design-system/field/Radio/Radio.tsx @@ -14,9 +14,10 @@ const RadioContext = createContext(null) export function Radio( props: AriaRadioProps & { LabelBodyAs?: Parameters['0']['as'] + radioVisible?: boolean } ) { - const { LabelBodyAs: bodyType, ...ariaProps } = props + const { LabelBodyAs: bodyType, radioVisible = true, ...ariaProps } = props const { children } = ariaProps const state = useContext(RadioContext) if (!state) { @@ -26,19 +27,31 @@ export function Radio( const { inputProps } = useRadio(ariaProps, state, ref) return ( - ) } +const Label = styled.label<{ $radioVisible: boolean }>` + ${({ $radioVisible }) => + !$radioVisible && + css` + margin-top: -1px; + `} +` + const OutsideCircle = styled.span` position: absolute; border: 2px solid ${({ theme }) => theme.colors.extended.grey[600]}; @@ -155,9 +168,14 @@ export function RadioBlock({ ) } -const LabelBody = styled(Body)` +const LabelBody = styled(Body)<{ $radioVisible: boolean }>` margin: ${({ theme }) => theme.spacings.xs} 0px; margin-left: ${({ theme }) => theme.spacings.xxs}; + ${({ $radioVisible }) => + !$radioVisible && + css` + margin: 0 !important; + `} ` const InputRadio = styled.input` :focus diff --git a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx index 14c635f88..6de4832c7 100644 --- a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx +++ b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx @@ -2,7 +2,6 @@ import { EngineContext } from '@/components/utils/EngineContext' import { Spacing } from '@/design-system/layout' import { H3 } from '@/design-system/typography/heading' import { Li, Ul } from '@/design-system/typography/list' -import { baseParagraphStyle } from '@/design-system/typography/paragraphs' import { Grid } from '@mui/material' import { DottedNames } from 'exoneration-covid' import Engine, { @@ -13,57 +12,9 @@ import Engine, { } from 'publicodes' import { useContext } from 'react' import { Trans, useTranslation } from 'react-i18next' -import styled, { css } from 'styled-components' +import { Bold, GridTotal, Italic, Recap, RecapExpert, Total } from './Recap' import { Row, Table, Tbody, Th, Thead, Tr } from './Table' -const Recap = styled.div` - background: ${({ theme }) => { - const colorPalette = theme.colors.bases.primary - return css`linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[600]} 100%);` - }}; - border-radius: 0.25rem; - padding: 1.5rem; - ${baseParagraphStyle} - line-height: 1.5rem; - color: white; - - hr { - border-color: ${({ theme }) => theme.colors.bases.primary[500]}; - margin-bottom: 1rem; - width: 100%; - } -` - -const Bold = styled.div` - font-weight: 700; - margin-bottom: 0.5rem; -` - -const Italic = styled.div` - font-style: italic; - margin-bottom: 0.5rem; -` - -const GrandTotal = styled.div` - font-size: 1.25rem; - line-height: 1.5rem; - font-weight: 700; -` - -const Total = styled.div` - display: flex; - justify-content: flex-end; - margin-bottom: 0.5rem; -` - -const RecapExpert = styled(Ul)` - border-radius: 0.25rem; - padding: 1.5rem; - padding-top: 0; - ${baseParagraphStyle} - line-height: 1.5rem; -` - const getTotalByMonth = (engine: Engine) => { type ParsedSituation = typeof engine.parsedSituation @@ -344,20 +295,18 @@ export const FormulaireS1S1Bis = ({
- + - - Montant de l’exonération sociale liée à la crise sanitaire sur - l’année 2021 - + Montant de l’exonération sociale liée à la crise sanitaire sur + l’année 2021 {formatValue(total)} - + diff --git a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx new file mode 100644 index 000000000..cdb5a5314 --- /dev/null +++ b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx @@ -0,0 +1,149 @@ +import { EngineContext } from '@/components/utils/EngineContext' +import { Radio, ToggleGroup } from '@/design-system/field' +import { Spacing } from '@/design-system/layout' +import { H3 } from '@/design-system/typography/heading' +import { Li } from '@/design-system/typography/list' +import { Body } from '@/design-system/typography/paragraphs' +import { Grid } from '@mui/material' +import { DottedNames } from 'exoneration-covid' +import Engine, { + Evaluation, + formatValue, + PublicodesExpression, +} from 'publicodes' +import { useContext } from 'react' +import { Trans } from 'react-i18next' +import { Bold, GridTotal, Italic, Recap, RecapExpert, Total } from './Recap' + +export const FormulaireS2 = ({ + onChange, +}: { + onChange?: (dottedName: DottedNames, value: PublicodesExpression) => void +}) => { + const engine = useContext(EngineContext) as Engine + + const exoS2 = engine.evaluate('exonération S2') + const total = engine.evaluate('montant total') + + const toDate = (value: string) => { + const [day, month, year] = value.split('/') + return new Date(parseInt(year), parseInt(month) - 1, parseInt(day)) + } + + const firstMonth = engine.evaluate( + 'exonération S2 . mois éligibles . premier mois' + ).nodeValue as Evaluation + const lastMonth = engine.evaluate( + 'exonération S2 . mois éligibles . dernier mois' + ).nodeValue as Evaluation + + const monthCount = + lastMonth && firstMonth + ? toDate(lastMonth).getMonth() - toDate(firstMonth).getMonth() + 2 + : 0 + const radioComponents = [] + + for (let i = 0; i < monthCount; i++) { + radioComponents.push( + + {i} + + ) + } + + return ( + <> + +

+ Entre {firstMonth} et {lastMonth}, combien de mois avez-vous été + impacté par la crise sanitaire ? +

+ + Précisez le nombre de mois durant lesquels vous avez fait l’objet + d’une mesure d’interdiction affectant de manière prépondérante la + poursuite de votre activité. + + + + { + onChange?.('exonération S2 . mois éligibles', { + valeur, + unité: 'mois', + }) + }} + > + {radioComponents} + + + + + + + + + + Dispositif loi de financement de la sécurité sociale (LFSS) pour + 2021 + + + + Mesure d’interdiction affectant de manière prépondérante la + poursuite de votre activité + + + + + + {formatValue(exoS2)} + + + +
+ + + + + Montant de l’exonération sociale liée à la crise sanitaire sur + l’année 2021 + + + + + {formatValue(total)} + + + + + +

Résumé

+ + +
  • + Secteur d'activité dont relève l'activité principale :{' '} + {engine.evaluate('secteur').nodeValue} +
    • +
  • + Activité exercée en{' '} + + {engine.evaluate("lieu d'exercice").nodeValue} + +
    • +
  • + Début d'activité :{' '} + + {engine.evaluate("début d'activité").nodeValue} + +
    • +
  • + Nombres de mois pour lesquels vous remplissez les conditions + d'éligibilité :{' '} + + {formatValue(engine.evaluate('exonération S2 . mois éligibles'))} + +
    • +     +     + + ) +} diff --git a/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx b/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx new file mode 100644 index 000000000..718c84319 --- /dev/null +++ b/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx @@ -0,0 +1,52 @@ +import { Ul } from '@/design-system/typography/list' +import { baseParagraphStyle } from '@/design-system/typography/paragraphs' +import { Grid } from '@mui/material' +import styled, { css } from 'styled-components' + +export const Recap = styled.div` + background: ${({ theme }) => { + const colorPalette = theme.colors.bases.primary + return css`linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[600]} 100%);` + }}; + border-radius: 0.25rem; + padding: 1.5rem; + ${baseParagraphStyle} + line-height: 1.5rem; + color: white; + + hr { + border-color: ${({ theme }) => theme.colors.bases.primary[500]}; + margin-bottom: 1rem; + width: 100%; + } +` + +export const Bold = styled.div` + font-weight: 700; + margin-bottom: 0.5rem; +` + +export const Italic = styled.div` + font-style: italic; + margin-bottom: 0.5rem; +` + +export const GridTotal = styled(Grid)` + font-size: 1.25rem; + line-height: 1.5rem; + font-weight: 700; +` + +export const Total = styled.div` + display: flex; + justify-content: flex-end; + margin-bottom: 0.5rem; +` + +export const RecapExpert = styled(Ul)` + border-radius: 0.25rem; + padding: 1.5rem; + padding-top: 0; + ${baseParagraphStyle} + line-height: 1.5rem; +` diff --git a/site/source/pages/Simulateurs/ExonerationCovid/index.tsx b/site/source/pages/Simulateurs/ExonerationCovid/index.tsx index ea57acabd..6ae4a0deb 100644 --- a/site/source/pages/Simulateurs/ExonerationCovid/index.tsx +++ b/site/source/pages/Simulateurs/ExonerationCovid/index.tsx @@ -1,15 +1,16 @@ -import exonerationCovid, { DottedNames } from 'exoneration-covid' -import Engine, { PublicodesExpression } from 'publicodes' -import { EngineProvider } from '@/components/utils/EngineContext' import RuleInput from '@/components/conversation/RuleInput' -import { useState, useCallback, useRef, useEffect } from 'react' -import { H3 } from '@/design-system/typography/heading' -import { Trans } from 'react-i18next' -import { Grid } from '@mui/material' +import { EngineProvider } from '@/components/utils/EngineContext' import { Button } from '@/design-system/buttons' import { Spacing } from '@/design-system/layout' +import { H3 } from '@/design-system/typography/heading' +import { Grid } from '@mui/material' +import exonerationCovid, { DottedNames } from 'exoneration-covid' +import Engine, { PublicodesExpression } from 'publicodes' +import { useCallback, useEffect, useRef, useState } from 'react' +import { Trans } from 'react-i18next' import { useLocation } from 'react-router' import { FormulaireS1S1Bis } from './FormulaireS1S1Bis' +import { FormulaireS2 } from './FormulaireS2' export default function ExonérationCovid() { // Use ref to keep state with react fast refresh @@ -66,9 +67,11 @@ export default function ExonérationCovid() { return ( {step2 ? ( - <> + exoCovidEngine.evaluate('secteur').nodeValue !== 'S2' ? ( - + ) : ( + + ) ) : ( <>