feat(indépendant): met un bouton dans cessation d’activité vers le si…

…mulateur indépendant … plutôt que d’inclure de simulateur en-dessous …
betagouv · Aug 8, 2024 · 5c3be9d · 5c3be9d
1 parent b7783aa
commit 5c3be9d
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 80 deletions.
diff --git a/site/source/components/ShareSimulationBanner/index.tsx b/site/source/components/ShareSimulationBanner/index.tsx
@@ -16,14 +16,21 @@ const ButtonLabel = styled.span`
 	margin-left: 1rem;
 `
 
+export interface CustomSimulationButton {
+	href: string
+	title: string
+}
+
 export default function ShareOrSaveSimulationBanner({
 	share,
 	print,
 	conseillersEntreprises,
+	customSimulationbutton,
 }: {
 	share?: boolean
 	print?: boolean
 	conseillersEntreprises?: boolean
+	customSimulationbutton?: CustomSimulationButton
 }) {
 	const { t } = useTranslation()
 	const tracker = useContext(TrackingContext)
@@ -64,6 +71,14 @@ export default function ShareOrSaveSimulationBanner({
 					justifyContent: 'center',
 				}}
 			>
+				{customSimulationbutton && (
+					<Grid item xs={12} sm="auto">
+						<Button light size="XS" href={customSimulationbutton.href}>
+							{customSimulationbutton.title}
+						</Button>
+					</Grid>
+				)}
+
 				{share && (
 					<Grid item xs={12} sm="auto">
 						<PopoverWithTrigger

diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx
@@ -7,7 +7,9 @@ import { useLocation } from 'react-router-dom'
 import { styled } from 'styled-components'
 
 import { ConversationProps } from '@/components/conversation/Conversation'
-import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
+import ShareOrSaveSimulationBanner, {
+	CustomSimulationButton,
+} from '@/components/ShareSimulationBanner'
 import { PopoverWithTrigger } from '@/design-system'
 import { Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
@@ -29,6 +31,16 @@ export { Questions } from './Questions'
 export { SimulationGoal } from './SimulationGoal'
 export { SimulationGoals } from './SimulationGoals'
 
+const StyledGrid = styled(Grid)`
+	width: 100%;
+	@media print {
+		max-width: initial;
+		flex-basis: initial;
+		flex-grow: 1;
+		margin: 0 1rem;
+	}
+`
+
 type SimulationProps = {
 	explanations?: React.ReactNode
 	engines?: Array<Engine<DottedName>>
@@ -40,18 +52,9 @@ type SimulationProps = {
 	customEndMessages?: ConversationProps['customEndMessages']
 	fullWidth?: boolean
 	id?: string
+	customSimulationbutton?: CustomSimulationButton
 }
 
-const StyledGrid = styled(Grid)`
-	width: 100%;
-	@media print {
-		max-width: initial;
-		flex-basis: initial;
-		flex-grow: 1;
-		margin: 0 1rem;
-	}
-`
-
 export default function Simulation({
 	explanations,
 	results,
@@ -63,6 +66,7 @@ export default function Simulation({
 	hideDetails = false,
 	fullWidth,
 	id,
+	customSimulationbutton,
 }: SimulationProps) {
 	const firstStepCompleted = useSelector(firstStepCompletedSelector)
 	const existingCompany = !!useSelector(companySituationSelector)[
@@ -122,7 +126,12 @@ export default function Simulation({
 					)}
 					{firstStepCompleted && !hideDetails && (
 						<>
-							<ShareOrSaveSimulationBanner share print conseillersEntreprises />
+							<ShareOrSaveSimulationBanner
+								share
+								print
+								conseillersEntreprises
+								customSimulationbutton={customSimulationbutton}
+							/>
 							<Spacing lg />
 						</>
 					)}

diff --git a/site/source/pages/simulateurs/cessation-activité/CessationActivité.tsx b/site/source/pages/simulateurs/cessation-activité/CessationActivité.tsx
@@ -1,21 +1,42 @@
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
 import SimulateurWarning from '@/components/SimulateurWarning'
 import Simulation from '@/components/Simulation'
-import { Message } from '@/design-system/message'
+import { useParamsFromSituation } from '@/components/utils/useSearchParamsSimulationSharing'
+import useSimulatorsData from '@/hooks/useSimulatorsData'
+import { useSiteUrl } from '@/hooks/useSiteUrl'
 import { CessationActivitéGoals } from '@/pages/simulateurs/cessation-activité/Goals'
-import { CessationActivitéGoalsN1 } from '@/pages/simulateurs/cessation-activité/GoalsN1'
-
-const CessationActivitéExplanation = () => (
-	<>
-		<Message>Voulez-vous calculer vos cotisations pour N-1 ?</Message>
-		<Simulation hideDetails>
-			<CessationActivitéGoalsN1 />
-		</Simulation>
-	</>
-)
+import {
+	companySituationSelector,
+	situationSelector,
+	targetUnitSelector,
+} from '@/store/selectors/simulationSelectors'
+import { omit } from '@/utils'
 
 export const CessationActivitéSimulation = () => {
+	const situation = {
+		...useSelector(situationSelector),
+		...useSelector(companySituationSelector),
+	}
+	const targetUnit = useSelector(targetUnitSelector)
+	const filteredSituation = omit(situation, 'entreprise . date de radiation')
+
+	const searchParams = useParamsFromSituation(filteredSituation, targetUnit)
+
+	const path = useSimulatorsData().indépendant.path
+
+	const lien = useSiteUrl() + path + '?' + searchParams.toString()
+
+	const { t } = useTranslation()
+
 	return (
-		<Simulation explanations={<CessationActivitéExplanation />}>
+		<Simulation
+			customSimulationbutton={{
+				href: lien,
+				title: t('Calculer vos cotisations pour l’année précédente'),
+			}}
+		>
 			<SimulateurWarning simulateur="cessation-activité" />
 			<CessationActivitéGoals />
 		</Simulation>

diff --git a/site/source/pages/simulateurs/cessation-activité/GoalsN1.tsx b/site/source/pages/simulateurs/cessation-activité/GoalsN1.tsx
diff --git a/site/source/pages/simulateurs/cessation-activité/Toggles.tsx b/site/source/pages/simulateurs/cessation-activité/Toggles.tsx
@@ -1,10 +1,15 @@
 import { useDispatch } from 'react-redux'
 
+import { ExplicableRule } from '@/components/conversation/Explicable'
 import RuleInput from '@/components/conversation/RuleInput'
+import { useEngine } from '@/components/utils/EngineContext'
+import { H3 } from '@/design-system/typography/heading'
 import { updateSituation } from '@/store/actions/actions'
+import { evaluateQuestion } from '@/utils'
 
 export const CessationActivitéToggles = () => {
 	const dispatch = useDispatch()
+	const engine = useEngine()
 
 	return (
 		<div
@@ -13,17 +18,31 @@ export const CessationActivitéToggles = () => {
 				flexBasis: '100%',
 
 				display: 'flex',
-				flexDirection: 'row',
-				alignItems: 'end',
+				flexDirection: 'column',
 				justifyContent: 'space-between',
 			}}
 		>
-			<RuleInput
-				dottedName="entreprise . date de radiation"
-				onChange={(date) => {
-					dispatch(updateSituation('entreprise . date de radiation', date))
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'start',
 				}}
-			/>
+			>
+				<H3 id="questionHeader" as="h2">
+					{evaluateQuestion(
+						engine,
+						engine.getRule('entreprise . date de radiation')
+					)}
+					<ExplicableRule light dottedName={'entreprise . date de radiation'} />
+				</H3>
+				<RuleInput
+					dottedName="entreprise . date de radiation"
+					onChange={(date) => {
+						dispatch(updateSituation('entreprise . date de radiation', date))
+					}}
+				/>
+			</div>
 
 			<RuleInput
 				inputType="toggle"

diff --git a/site/source/pages/simulateurs/cessation-activité/config.ts b/site/source/pages/simulateurs/cessation-activité/config.ts
@@ -44,5 +44,5 @@ export function cessationActivitéConfig({
 		path: sitePaths.simulateurs['cessation-activité'],
 		simulation: configCessationActivité,
 		component: CessationActivitéSimulation,
-	})
+	} as const)
 }