Ajout de la page S2

2022-03-17 18:40:11 +01:00 · 2022-03-17 18:40:11 +01:00 · 28308c9a7c
parent a8e753992d
commit 28308c9a7c
5 changed files with 245 additions and 74 deletions
--- 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<RadioGroupState | null>(null)
 export function Radio(
 	props: AriaRadioProps & {
 		LabelBodyAs?: Parameters<typeof LabelBody>['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 (
-		<label>
+		<Label $radioVisible={radioVisible}>
 			<InputRadio {...inputProps} className="sr-only" ref={ref} />
 			<VisibleRadio>
-				<RadioButton aria-hidden="true">
-					<OutsideCircle />
-					<InsideCircle />
-				</RadioButton>
-				<LabelBody as={bodyType}>{children}</LabelBody>
+				{radioVisible && (
+					<RadioButton aria-hidden="true">
+						<OutsideCircle />
+						<InsideCircle />
+					</RadioButton>
+				)}
+				<LabelBody as={bodyType} $radioVisible={radioVisible}>
+					{children}
+				</LabelBody>
 			</VisibleRadio>
-		</label>
+		</Label>
 	)
 }

+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
--- 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<DottedNames>) => {
 	type ParsedSituation = typeof engine.parsedSituation

@ -344,20 +295,18 @@ export const FormulaireS1S1Bis = ({

 				<hr />

-				<Grid container>
+				<GridTotal container>
 					<Grid item xs>
 						<Trans>
-							<GrandTotal>
-								Montant de l’exonération sociale liée à la crise sanitaire sur
-								l’année 2021
-							</GrandTotal>
+							Montant de l’exonération sociale liée à la crise sanitaire sur
+							l’année 2021
 						</Trans>
 					</Grid>

 					<Grid item xs="auto" alignSelf={'end'}>
 						<Total>{formatValue(total)}</Total>
 					</Grid>
-				</Grid>
+				</GridTotal>
 			</Recap>

 			<Trans>
--- a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx
+++ 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<DottedNames>
+
+	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<string>
+	const lastMonth = engine.evaluate(
+		'exonération S2 . mois éligibles . dernier mois'
+	).nodeValue as Evaluation<string>
+
+	const monthCount =
+		lastMonth && firstMonth
+			? toDate(lastMonth).getMonth() - toDate(firstMonth).getMonth() + 2
+			: 0
+	const radioComponents = []
+
+	for (let i = 0; i < monthCount; i++) {
+		radioComponents.push(
+			<Radio radioVisible={false} key={i} value={`${i}`}>
+				{i}
+			</Radio>
+		)
+	}
+
+	return (
+		<>
+			<Trans>
+				<H3>
+					Entre {firstMonth} et {lastMonth}, combien de mois avez-vous été
+					impacté par la crise sanitaire ?
+				</H3>
+				<Body>
+					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é.
+				</Body>
+			</Trans>
+
+			<ToggleGroup
+				onChange={(valeur) => {
+					onChange?.('exonération S2 . mois éligibles', {
+						valeur,
+						unité: 'mois',
+					})
+				}}
+			>
+				{radioComponents}
+			</ToggleGroup>
+
+			<Spacing xl />
+
+			<Recap>
+				<Grid container>
+					<Grid item xs>
+						<Trans>
+							<Bold>
+								Dispositif loi de financement de la sécurité sociale (LFSS) pour
+								2021
+							</Bold>
+
+							<Italic>
+								Mesure d’interdiction affectant de manière prépondérante la
+								poursuite de votre activité
+							</Italic>
+						</Trans>
+					</Grid>
+
+					<Grid item xs="auto" alignSelf={'end'}>
+						<Total>{formatValue(exoS2)}</Total>
+					</Grid>
+				</Grid>
+
+				<hr />
+
+				<GridTotal container>
+					<Grid item xs>
+						<Trans>
+							Montant de l’exonération sociale liée à la crise sanitaire sur
+							l’année 2021
+						</Trans>
+					</Grid>
+
+					<Grid item xs="auto" alignSelf={'end'}>
+						<Total>{formatValue(total)}</Total>
+					</Grid>
+				</GridTotal>
+			</Recap>
+
+			<Trans>
+				<H3>Résumé</H3>
+
+				<RecapExpert>
+					<Li>
+						Secteur d'activité dont relève l'activité principale :{' '}
+						<Bold as="span">{engine.evaluate('secteur').nodeValue}</Bold>
+					</Li>
+					<Li>
+						Activité exercée en{' '}
+						<Bold as="span">
+							{engine.evaluate("lieu d'exercice").nodeValue}
+						</Bold>
+					</Li>
+					<Li>
+						Début d'activité :{' '}
+						<Bold as="span">
+							{engine.evaluate("début d'activité").nodeValue}
+						</Bold>
+					</Li>
+					<Li>
+						Nombres de mois pour lesquels vous remplissez les conditions
+						d'éligibilité :{' '}
+						<Bold as="span">
+							{formatValue(engine.evaluate('exonération S2 . mois éligibles'))}
+						</Bold>
+					</Li>
+				</RecapExpert>
+			</Trans>
+		</>
+	)
+}
--- a/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx
+++ 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;
+`
--- 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 (
 		<EngineProvider value={exoCovidEngine}>
 			{step2 ? (
-				<>
+				exoCovidEngine.evaluate('secteur').nodeValue !== 'S2' ? (
 					<FormulaireS1S1Bis onChange={updateSituation} />
-				</>
+				) : (
+					<FormulaireS2 onChange={updateSituation} />
+				)
 			) : (
 				<>
 					<Grid item xs={12}>