Ajouter un paramètre "config" au composant <Simulation />

source/components/Simulation.tsx

@@ -6,15 +6,19 @@ import SeeAnswersButton from 'Components/conversation/SeeAnswersButton'
 import PageFeedback from 'Components/Feedback/PageFeedback'
 import SearchButton from 'Components/SearchButton'
 import TargetSelection from 'Components/TargetSelection'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Trans } from 'react-i18next'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import { firstStepCompletedSelector } from 'Selectors/simulationSelectors'
 import { useSimulationProgress } from 'Components/utils/useNextQuestion'
 import * as Animate from 'Ui/animate'
 import Progress from 'Ui/Progress'
+import { setSimulationConfig } from 'Actions/actions'
+import { useLocation } from 'react-router'
+import { SimulationConfig } from 'Reducers/rootReducer'
 
 type SimulationProps = {
+	config: SimulationConfig
 	explanations?: React.ReactNode
 	results?: React.ReactNode
 	customEndMessages?: ConversationProps['customEndMessages']
@@ -22,11 +26,17 @@ type SimulationProps = {
 }
 
 export default function Simulation({
+	config,
 	explanations,
 	results,
 	customEndMessages,
 	showPeriodSwitch
 }: SimulationProps) {
+	const dispatch = useDispatch()
+	const location = useLocation<{ fromGérer?: boolean }>()
+	useEffect(() => {
+		dispatch(setSimulationConfig(config, location.state?.fromGérer))
+	}, [config])
 	const firstStepCompleted = useSelector(firstStepCompletedSelector)
 	const progress = useSimulationProgress()
 	return (

source/sites/mon-entreprise.fr/pages/Coronavirus.tsx

@@ -1,4 +1,3 @@
-import { setSimulationConfig } from 'Actions/actions'
 import RuleLink from 'Components/RuleLink'
 import Simulation from 'Components/Simulation'
 import chomagePartielConfig from 'Components/simulationConfigs/chômage-partiel.yaml'
@@ -12,8 +11,6 @@ import { EvaluatedRule } from 'Engine/types'
 import React, { useContext, useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
-import { useLocation } from 'react-router'
 import { DottedName } from 'Rules'
 import styled from 'styled-components'
 import Animate from 'Ui/animate'
@@ -26,14 +23,7 @@ declare global {
 }
 
 export default function ChômagePartiel() {
-	const dispatch = useDispatch()
-	const location = useLocation<{ fromGérer?: boolean }>()
 	const inIframe = useContext(IsEmbeddedContext)
-	useEffect(() => {
-		dispatch(
-			setSimulationConfig(chomagePartielConfig, location.state?.fromGérer)
-		)
-	}, [])
 	useEffect(() => {
 		if (inIframe || !productionMode) {
 			return
@@ -100,6 +90,7 @@ export default function ChômagePartiel() {
 				</ul>
 			</Warning>
 			<Simulation
+				config={chomagePartielConfig}
 				results={<ExplanationSection />}
 				customEndMessages={
 					<span className="ui__ notice">Voir les résultats au-dessus</span>

source/sites/mon-entreprise.fr/pages/Simulateurs/AssimiléSalarié.tsx

@@ -1,22 +1,13 @@
-import { setSimulationConfig } from 'Actions/actions'
 import SalaryExplanation from 'Components/SalaryExplanation'
 import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import assimiléConfig from 'Components/simulationConfigs/assimilé.yaml'
 import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
-import { useLocation } from 'react-router'
 
 export default function AssimiléSalarié() {
-	const dispatch = useDispatch()
-	const location = useLocation<{ fromGérer?: boolean }>()
-	useEffect(() => {
-		dispatch(setSimulationConfig(assimiléConfig, location.state?.fromGérer))
-	}, [])
-
 	const { t } = useTranslation()
 	const inIframe = useContext(IsEmbeddedContext)
 
@@ -45,7 +36,10 @@ export default function AssimiléSalarié() {
 				</h1>
 			)}
 			<Warning simulateur="assimilé-salarié" />
-			<Simulation explanations={<SalaryExplanation />} />
+			<Simulation
+				config={assimiléConfig}
+				explanations={<SalaryExplanation />}
+			/>
 		</>
 	)
 }

source/sites/mon-entreprise.fr/pages/Simulateurs/AutoEntrepreneur.tsx

@@ -1,4 +1,3 @@
-import { setSimulationConfig } from 'Actions/actions'
 import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import autoEntrepreneurConfig from 'Components/simulationConfigs/auto-entrepreneur.yaml'
@@ -6,22 +5,14 @@ import StackedBarChart from 'Components/StackedBarChart'
 import { ThemeColorsContext } from 'Components/utils/colors'
 import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
 import { EngineContext } from 'Components/utils/EngineContext'
-import { default as React, useContext, useEffect } from 'react'
+import { default as React, useContext } from 'react'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
-import { useDispatch, useSelector } from 'react-redux'
-import { useLocation } from 'react-router'
+import { useSelector } from 'react-redux'
 import { targetUnitSelector } from 'Selectors/simulationSelectors'
 
 export default function AutoEntrepreneur() {
-	const dispatch = useDispatch()
-	const location = useLocation<{ fromGérer?: boolean }>()
 	const inIframe = useContext(IsEmbeddedContext)
-	useEffect(() => {
-		dispatch(
-			setSimulationConfig(autoEntrepreneurConfig, location.state?.fromGérer)
-		)
-	}, [])
 	const { t } = useTranslation()
 
 	return (
@@ -49,7 +40,10 @@ export default function AutoEntrepreneur() {
 				</h1>
 			)}
 			<Warning simulateur="auto-entrepreneur" />
-			<Simulation explanations={<ExplanationSection />} />
+			<Simulation
+				config={autoEntrepreneurConfig}
+				explanations={<ExplanationSection />}
+			/>
 		</>
 	)
 }

source/sites/mon-entreprise.fr/pages/Simulateurs/Indépendant.tsx

@@ -1,4 +1,3 @@
-import { setSimulationConfig } from 'Actions/actions'
 import Warning from 'Components/SimulateurWarning'
 import Simulation from 'Components/Simulation'
 import indépendantConfig from 'Components/simulationConfigs/indépendant.yaml'
@@ -6,18 +5,11 @@ import StackedBarChart from 'Components/StackedBarChart'
 import { ThemeColorsContext } from 'Components/utils/colors'
 import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
 import { EngineContext } from 'Components/utils/EngineContext'
-import { default as React, useContext, useEffect } from 'react'
+import { default as React, useContext } from 'react'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
-import { useLocation } from 'react-router'
 
 export default function Indépendant() {
-	const dispatch = useDispatch()
-	const location = useLocation<{ fromGérer?: boolean }>()
-	useEffect(() => {
-		dispatch(setSimulationConfig(indépendantConfig, location.state?.fromGérer))
-	}, [])
 	const { t } = useTranslation()
 	const inIframe = useContext(IsEmbeddedContext)
 
@@ -46,7 +38,10 @@ export default function Indépendant() {
 				</h1>
 			)}
 			<Warning simulateur="indépendant" />
-			<Simulation explanations={<ExplanationSection />} />
+			<Simulation
+				config={indépendantConfig}
+				explanations={<ExplanationSection />}
+			/>
 		</>
 	)
 }

source/sites/mon-entreprise.fr/pages/Simulateurs/Salarié.tsx

@@ -1,4 +1,3 @@
-import { setSimulationConfig } from 'Actions/actions'
 import Banner from 'Components/Banner'
 import PreviousSimulationBanner from 'Components/PreviousSimulationBanner'
 import SalaryExplanation from 'Components/SalaryExplanation'
@@ -8,11 +7,10 @@ import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
 import urlIllustrationNetBrutEn from 'Images/illustration-net-brut-en.png'
 import urlIllustrationNetBrut from 'Images/illustration-net-brut.png'
-import { default as React, useContext, useEffect } from 'react'
+import { default as React, useContext } from 'react'
 import { Helmet } from 'react-helmet'
 import { Trans, useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 export default function Salarié() {
 	const { t } = useTranslation()
@@ -134,15 +132,11 @@ function SeoExplanations() {
 }
 
 export let SalarySimulation = () => {
-	const dispatch = useDispatch()
-	const location = useLocation<{ fromGérer?: boolean }>()
 	const sitePaths = useContext(SitePathsContext)
-	useEffect(() => {
-		dispatch(setSimulationConfig(salariéConfig, location.state?.fromGérer))
-	}, [])
 	return (
 		<>
 			<Simulation
+				config={salariéConfig}
 				explanations={<SalaryExplanation />}
 				customEndMessages={
 					<>