fix(my-space): update side panel step colors and second-round choice state (#3207)

Viczei · Viczei · commit 5c4144627776 · 2026-04-21T16:41:09.000+02:00
- Current step circle now uses `--background-action-high-info` (#0063CB) instead of `--blue-france-main-525`
- Upcoming step title renders in `--text-mention-grey` (#666666) via a shared `StepTitle` helper
- `evaluation` variant now distinguishes the second-round choice state (corrective_action + 2nd declaration submitted, no committed next path) from the active joint_evaluation flow: the first shows the transmitted row + `decl2JustificationDeadline` with no bullet, matching the new Figma "Choix d'un parcours de mise en conformité 2" panel
- Second declaration transmitted row is now only rendered when a 2nd declaration was actually submitted, fixing a latent mismatch when joint_evaluation is picked directly
diff --git a/packages/app/src/e2e/declaration-process-panel.e2e.ts b/packages/app/src/e2e/declaration-process-panel.e2e.ts
@@ -95,6 +95,35 @@ test.describe("Declaration process panel", () => {
 		});
 	});
 
+	test.describe("Variant: evaluation (corrective_action, 2nd decl submitted, second-round choice pending)", () => {
+		test.beforeAll(async () => {
+			await setDeclarationComplianceState({
+				compliancePath: "corrective_action",
+				secondDeclarationStatus: "submitted",
+			});
+		});
+
+		test("shows second declaration transmitted without evaluation conjointe bullet", async ({
+			page,
+		}) => {
+			await page.context().clearCookies();
+			await loginWithProConnect(page);
+			await waitForDsfrModal(page, PANEL_ID);
+
+			const panel = page.locator(`#${PANEL_ID}`);
+			const remuButton = page.getByRole("button", { name: "Rémunération" });
+			await expect(remuButton.first()).toBeVisible();
+			await clickAndExpectDialogOpen(page, remuButton.first(), PANEL_ID);
+
+			await expect(
+				panel.getByText("Votre seconde déclaration a été transmise"),
+			).toBeVisible();
+			await expect(
+				panel.getByText("Évaluation conjointe des rémunérations"),
+			).toHaveCount(0);
+		});
+	});
+
 	test.describe("Variant: evaluation (joint_evaluation path, file not uploaded)", () => {
 		test.beforeAll(async () => {
 			await setDeclarationComplianceState({
diff --git a/packages/app/src/modules/my-space/DeclarationProcessPanel.module.scss b/packages/app/src/modules/my-space/DeclarationProcessPanel.module.scss
@@ -64,7 +64,7 @@
 }
 
 .stepCircleCurrent {
-	background-color: var(--blue-france-main-525);
+	background-color: var(--background-action-high-info);
 }
 
 .stepCirclePending {
diff --git a/packages/app/src/modules/my-space/VerticalStepper.tsx b/packages/app/src/modules/my-space/VerticalStepper.tsx
@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 import type { CampaignDeadlines } from "~/modules/domain";
 import { formatLongDate, isDeadlinePassed } from "~/modules/domain";
 import type { PanelVariant } from "./DeclarationProcessPanel";
@@ -63,18 +65,39 @@ export function VerticalStepper({
 					compliancePath={compliancePath}
 					secondDeclarationSubmitted={secondDeclarationSubmitted}
 					siren={siren}
+					status={step2}
 					variant={variant}
 				/>
 			</div>
 			<div className={styles.stepLine} />
 			<div className={styles.stepRow}>
 				<StepCircle number={3} status={step3} />
-				<Step3Content campaignDeadlines={campaignDeadlines} variant={variant} />
+				<Step3Content
+					campaignDeadlines={campaignDeadlines}
+					status={step3}
+					variant={variant}
+				/>
 			</div>
 		</div>
 	);
 }
 
+function StepTitle({
+	children,
+	status,
+}: {
+	children: ReactNode;
+	status: StepStatus;
+}) {
+	return (
+		<p
+			className={`fr-text--bold fr-mb-0 ${status === "pending" ? "fr-text-mention--grey" : ""}`.trim()}
+		>
+			{children}
+		</p>
+	);
+}
+
 function StepCircle({
 	status,
 	number,
@@ -122,14 +145,17 @@ function Step1Content({
 	year: number;
 }) {
 	const refYear = year - 1;
+	const title = (
+		<StepTitle status={status}>
+			Déclaration des indicateurs de rémunération
+		</StepTitle>
+	);
 
 	if (variant === "start") {
 		return (
 			<div className={styles.stepContent}>
 				<div>
-					<p className="fr-text--bold fr-mb-0">
-						Déclaration des indicateurs de rémunération
-					</p>
+					{title}
 					<p className="fr-text--sm fr-text-mention--grey fr-mb-0">
 						Période de référence : 01/01/{refYear} - 31/12/{refYear}.
 					</p>
@@ -155,9 +181,7 @@ function Step1Content({
 	if (status === "complete") {
 		return (
 			<div className={styles.stepContent}>
-				<p className="fr-text--bold fr-mb-0">
-					Déclaration des indicateurs de rémunération
-				</p>
+				{title}
 				{variant !== "closed" && (
 					<TransmittedRow
 						downloadHref="/api/declaration-pdf"
@@ -170,31 +194,29 @@ function Step1Content({
 		);
 	}
 
-	return (
-		<p className="fr-text--bold fr-mb-0">
-			Déclaration des indicateurs de rémunération
-		</p>
-	);
+	return title;
 }
 
 function Step2Content({
 	campaignDeadlines,
 	compliancePath,
 	secondDeclarationSubmitted,
 	siren,
+	status,
 	variant,
 }: {
 	campaignDeadlines: CampaignDeadlines;
 	compliancePath: string | null;
 	secondDeclarationSubmitted: boolean;
 	siren: string;
+	status: StepStatus;
 	variant: PanelVariant;
 }) {
 	const title = (
-		<p className="fr-text--bold fr-mb-0">
+		<StepTitle status={status}>
 			Parcours de mise en conformité pour l'indicateur par catégorie de salariés
 			si écarts &ge; 5&nbsp;%
-		</p>
+		</StepTitle>
 	);
 
 	if (variant === "closed" || variant === "start") {
@@ -219,15 +241,32 @@ function Step2Content({
 	}
 
 	if (variant === "evaluation") {
+		const secondDeclTransmittedRow = secondDeclarationSubmitted ? (
+			<TransmittedRow
+				downloadHref="/api/declaration-pdf?type=correction"
+				label="Votre seconde déclaration a été transmise"
+				modifiableUntil={campaignDeadlines.decl2ModificationDeadline}
+				modifyHref={`/declaration-remuneration/parcours-conformite/etape/1?siren=${siren}`}
+			/>
+		) : null;
+
+		// Second-round choice pending: user did corrective_action + 2nd declaration
+		// but has not committed to joint evaluation yet. Show transmitted row +
+		// choice deadline, no "Évaluation conjointe" bullet.
+		if (compliancePath === "corrective_action") {
+			return (
+				<div className={styles.stepContent}>
+					{title}
+					{secondDeclTransmittedRow}
+					<DeadlineRow date={campaignDeadlines.decl2JustificationDeadline} />
+				</div>
+			);
+		}
+
 		return (
 			<div className={styles.stepContent}>
 				{title}
-				<TransmittedRow
-					downloadHref="/api/declaration-pdf?type=correction"
-					label="Votre seconde déclaration a été transmise"
-					modifiableUntil={campaignDeadlines.decl2ModificationDeadline}
-					modifyHref={`/declaration-remuneration/parcours-conformite/etape/1?siren=${siren}`}
-				/>
+				{secondDeclTransmittedRow}
 				<div className={styles.bulletItem}>
 					<span aria-hidden="true" className={styles.bullet} />
 					<p className="fr-mb-0">Évaluation conjointe des rémunérations</p>
@@ -268,13 +307,15 @@ function Step2Content({
 
 function Step3Content({
 	campaignDeadlines,
+	status,
 	variant,
 }: {
 	campaignDeadlines: CampaignDeadlines;
+	status: StepStatus;
 	variant: PanelVariant;
 }) {
 	const title = (
-		<p className="fr-text--bold fr-mb-0">Déposer le ou les avis du CSE</p>
+		<StepTitle status={status}>Déposer le ou les avis du CSE</StepTitle>
 	);
 
 	if (
diff --git a/packages/app/src/modules/my-space/__tests__/DeclarationProcessPanel.test.tsx b/packages/app/src/modules/my-space/__tests__/DeclarationProcessPanel.test.tsx
@@ -121,19 +121,50 @@ describe("DeclarationProcessPanel", () => {
 	});
 
 	describe("variant: evaluation", () => {
-		it("renders second declaration transmitted message", () => {
-			const { panel } = renderPanel("evaluation");
+		it("renders second declaration transmitted message when submitted", () => {
+			const { panel } = renderPanel("evaluation", {
+				compliancePath: "joint_evaluation",
+				secondDeclarationStatus: "submitted",
+			});
 			expect(
 				panel.getByText("Votre seconde déclaration a été transmise"),
 			).toBeInTheDocument();
 		});
 
-		it("renders evaluation conjointe bullet", () => {
-			const { panel } = renderPanel("evaluation");
+		it("does not render second declaration row when joint_evaluation chosen directly", () => {
+			const { panel } = renderPanel("evaluation", {
+				compliancePath: "joint_evaluation",
+				secondDeclarationStatus: null,
+			});
+			expect(
+				panel.queryByText("Votre seconde déclaration a été transmise"),
+			).not.toBeInTheDocument();
+			expect(
+				panel.getByText("Évaluation conjointe des rémunérations"),
+			).toBeInTheDocument();
+		});
+
+		it("renders evaluation conjointe bullet on joint_evaluation path", () => {
+			const { panel } = renderPanel("evaluation", {
+				compliancePath: "joint_evaluation",
+			});
 			expect(
 				panel.getByText("Évaluation conjointe des rémunérations"),
 			).toBeInTheDocument();
 		});
+
+		it("hides evaluation conjointe bullet in second-round choice (corrective_action + 2nd decl submitted)", () => {
+			const { panel } = renderPanel("evaluation", {
+				compliancePath: "corrective_action",
+				secondDeclarationStatus: "submitted",
+			});
+			expect(
+				panel.getByText("Votre seconde déclaration a été transmise"),
+			).toBeInTheDocument();
+			expect(
+				panel.queryByText("Évaluation conjointe des rémunérations"),
+			).not.toBeInTheDocument();
+		});
 	});
 
 	describe("variant: cse", () => {

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`.stepCircleCurrent {`
`67`		`- background-color: var(--blue-france-main-525);`
	`67`	`+ background-color: var(--background-action-high-info);`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`.stepCirclePending {`