From dbfb97436b4f128757e81a1ddc24b5e7e772535e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Thu, 17 Mar 2022 12:46:57 +0100
Subject: [PATCH] Ajout du recap expert

---
 .../ExonerationCovid/FormulaireS1S1Bis.tsx    |  71 ++++++++--
 .../Simulateurs/ExonerationCovid/index.tsx    | 125 ++++++++++--------
 2 files changed, 127 insertions(+), 69 deletions(-)

diff --git a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
index d2c9f11dd..14c635f88 100644
--- a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
+++ b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
@@ -1,6 +1,7 @@
 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'
@@ -12,15 +13,14 @@ import Engine, {
 } from 'publicodes'
 import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Row, Table, Tbody, Th, Thead, Tr } from './Table'
 
-const Json = (props: any) => (
-	<pre css={{ overflow: 'auto' }}>{JSON.stringify(props, null, 2)}</pre>
-)
-
 const Recap = styled.div`
-	background: ${({ theme }) => theme.colors.bases.primary[600]};
+	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}
@@ -56,6 +56,14 @@ const Total = styled.div`
 	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
 
@@ -130,7 +138,6 @@ export const FormulaireS1S1Bis = ({
 	const LFSS600 = engine.evaluate('LFSS 600')
 	const LFSS300 = engine.evaluate('LFSS 300')
 	const LFR1 = engine.evaluate('LFR1')
-	const exoS2 = engine.evaluate('exonération S2')
 	const total = engine.evaluate('montant total')
 
 	const totalByMonth = getTotalByMonth(engine)
@@ -162,6 +169,15 @@ export const FormulaireS1S1Bis = ({
 			e.parents[0].name === 'mois'
 	)
 
+	const monthsCount = Object.entries(totalByMonth).reduce(
+		(acc, [, node]) => {
+			'dottedName' in node && node.dottedName?.includes('LFSS') && acc.LFSS++
+			'dottedName' in node && node.dottedName?.includes('LFR1') && acc.LFR1++
+			return acc
+		},
+		{ LFSS: 0, LFR1: 0 }
+	)
+
 	let emptyMonthIndex: number[] = []
 	let isAnyRowShowed = false
 
@@ -344,13 +360,40 @@ export const FormulaireS1S1Bis = ({
 				</Grid>
 			</Recap>
 
-			<Json
-				LFSS600={formatValue(LFSS600)}
-				LFSS300={formatValue(LFSS300)}
-				LFR1={formatValue(LFR1)}
-				exoS2={formatValue(exoS2)}
-				total={formatValue(total)}
-			/>
+			<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é
+						<Ul>
+							<Li>
+								LFSS : <Bold as="span">{monthsCount.LFSS.toString()} mois</Bold>
+							</Li>
+							<Li>
+								LFR1 : <Bold as="span">{monthsCount.LFR1.toString()} mois</Bold>
+							</Li>
+						</Ul>
+					</Li>
+				</RecapExpert>
+			</Trans>
 		</>
 	)
 }
diff --git a/site/source/pages/Simulateurs/ExonerationCovid/index.tsx b/site/source/pages/Simulateurs/ExonerationCovid/index.tsx
index 3361725cf..ea57acabd 100644
--- a/site/source/pages/Simulateurs/ExonerationCovid/index.tsx
+++ b/site/source/pages/Simulateurs/ExonerationCovid/index.tsx
@@ -64,80 +64,95 @@ export default function ExonérationCovid() {
 	const step2 = rootDottedNames.every((names) => params[names])
 
 	return (
-		<>
-			<EngineProvider value={exoCovidEngine}>
-				{step2 ? (
-					<>
-						<FormulaireS1S1Bis onChange={updateSituation} />
-					</>
-				) : (
-					<>
+		<EngineProvider value={exoCovidEngine}>
+			{step2 ? (
+				<>
+					<FormulaireS1S1Bis onChange={updateSituation} />
+				</>
+			) : (
+				<>
+					<Grid item xs={12}>
 						<H3>{exoCovidEngine.getRule('secteur').rawNode.question}</H3>
+					</Grid>
+
+					<Grid item xs={8}>
 						<RuleInput
 							dottedName={'secteur'}
 							onChange={(value) => updateSituation('secteur', value)}
 						/>
+					</Grid>
 
+					<Grid item xs={12}>
 						<H3>
 							{exoCovidEngine.getRule("début d'activité").rawNode.question}
 						</H3>
-						<Spacing sm />
+					</Grid>
 
-						<Grid item xs={12} sm={6}>
-							<RuleInput
-								dottedName="début d'activité"
-								onChange={(value) => updateSituation("début d'activité", value)}
-							/>
-						</Grid>
+					<Spacing sm />
 
+					<Grid item xs={12} sm={6}>
+						<RuleInput
+							dottedName="début d'activité"
+							onChange={(value) => updateSituation("début d'activité", value)}
+						/>
+					</Grid>
+
+					<Grid item xs={12}>
 						<H3>
 							{exoCovidEngine.getRule("lieu d'exercice").rawNode.question}
 						</H3>
+					</Grid>
+
+					<Grid item xs={12}>
 						<RuleInput
 							dottedName="lieu d'exercice"
 							onChange={(value) => updateSituation("lieu d'exercice", value)}
 						/>
-					</>
-				)}
-
-				<Spacing lg />
-
-				<Grid container justifyContent={step2 ? '' : 'end'}>
-					<Grid item xs={6} sm="auto">
-						{step2 ? (
-							<Button
-								size="XS"
-								to={{
-									pathname: location.pathname,
-									search: '',
-								}}
-								onClick={setStep1Situation}
-							>
-								← <Trans>Précédent</Trans>
-							</Button>
-						) : (
-							<Button
-								size="XS"
-								isDisabled={!rootDottedNames.every((names) => situation[names])}
-								to={() => {
-									rootDottedNames.forEach((key) =>
-										searchParams.append(key, situation[key]?.toString() ?? '')
-									)
-
-									return {
-										pathname: location.pathname,
-										search: searchParams.toString(),
-									}
-								}}
-							>
-								<Trans>Suivant</Trans> →
-							</Button>
-						)}
 					</Grid>
-				</Grid>
+				</>
+			)}
 
-				<Spacing lg />
-			</EngineProvider>
-		</>
+			<Spacing lg />
+
+			<Grid container>
+				<Grid item xs></Grid>
+			</Grid>
+
+			<Grid container justifyContent={step2 ? '' : 'end'}>
+				<Grid item xs={6} sm="auto">
+					{step2 ? (
+						<Button
+							size="XS"
+							to={{
+								pathname: location.pathname,
+								search: '',
+							}}
+							onClick={setStep1Situation}
+						>
+							← <Trans>Précédent</Trans>
+						</Button>
+					) : (
+						<Button
+							size="XS"
+							isDisabled={!rootDottedNames.every((names) => situation[names])}
+							to={() => {
+								rootDottedNames.forEach((key) =>
+									searchParams.append(key, situation[key]?.toString() ?? '')
+								)
+
+								return {
+									pathname: location.pathname,
+									search: searchParams.toString(),
+								}
+							}}
+						>
+							<Trans>Suivant</Trans> →
+						</Button>
+					)}
+				</Grid>
+			</Grid>
+
+			<Spacing lg />
+		</EngineProvider>
 	)
 }