Skip to content

Commit 61a2204

Browse files
LucasCharrierLucasCharrier
authored
fix: declaration process panel state management and CSE opinion year alignment (#3115)
1 parent 5aa4504 commit 61a2204

8 files changed

Lines changed: 200 additions & 48 deletions

‎packages/app/src/modules/cseOpinion/Step1Opinions.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,17 @@ export function Step1Opinions({
7979
data.secondDeclaration?.gapConsulted === true &&
8080
(!data.secondDeclaration?.gapOpinion || !data.secondDeclaration?.gapDate);
8181

82-
if (firstGapIncomplete || secondGapIncomplete) {
82+
if (firstGapIncomplete) {
83+
form.setError("firstDeclaration.gapOpinion", {
84+
message: "Veuillez remplir tous les champs de consultation.",
85+
});
86+
return;
87+
}
88+
89+
if (secondGapIncomplete) {
90+
form.setError("secondDeclaration.gapOpinion", {
91+
message: "Veuillez remplir tous les champs de consultation.",
92+
});
8393
return;
8494
}
8595

@@ -211,7 +221,8 @@ export function Step1Opinions({
211221
)}
212222

213223
<div aria-live="polite">
214-
{form.formState.errors.firstDeclaration && (
224+
{(form.formState.errors.firstDeclaration ||
225+
form.formState.errors.secondDeclaration) && (
215226
<div className="fr-alert fr-alert--error fr-mt-3w">
216227
<p>Veuillez remplir tous les champs obligatoires.</p>
217228
</div>

‎packages/app/src/modules/my-space/CompanyDeclarationsPage.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,13 @@ export function CompanyDeclarationsPage({
6868
/>
6969
)}
7070
<DeclarationProcessPanel
71+
compliancePath={currentDeclaration?.compliancePath ?? null}
7172
ctaHref={ctaHref}
7273
lastActionDate={lastActionDate}
74+
secondDeclarationStatus={
75+
currentDeclaration?.secondDeclarationStatus ?? null
76+
}
77+
siren={company.siren}
7378
variant={panelVariant}
7479
year={currentYear}
7580
/>

‎packages/app/src/modules/my-space/DeclarationProcessPanel.module.scss‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,13 @@
4040
// Vertical stepper
4141
.stepper {
4242
display: flex;
43-
gap: 1rem;
43+
flex-direction: column;
4444
}
4545

46-
.stepIndicators {
46+
.stepRow {
4747
display: flex;
48-
flex-direction: column;
49-
align-items: center;
50-
flex-shrink: 0;
48+
gap: 1rem;
49+
align-items: flex-start;
5150
}
5251

5352
.stepCircle {
@@ -78,19 +77,11 @@
7877

7978
.stepLine {
8079
width: 1px;
81-
flex: 1;
8280
min-height: 1rem;
81+
margin-left: 14px;
8382
background-color: var(--border-default-grey);
8483
}
8584

86-
.stepContents {
87-
display: flex;
88-
flex-direction: column;
89-
gap: 1.5rem;
90-
flex: 1;
91-
min-width: 0;
92-
}
93-
9485
.stepContent {
9586
display: flex;
9687
flex-direction: column;

‎packages/app/src/modules/my-space/DeclarationProcessPanel.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const PANEL_TITLE_ID = "declaration-process-panel-title";
1010

1111
export type PanelVariant =
1212
| "start"
13+
| "compliance_choice"
1314
| "compliance"
1415
| "evaluation"
1516
| "cse"
@@ -19,13 +20,19 @@ type Props = {
1920
year: number;
2021
lastActionDate: string | null;
2122
variant: PanelVariant;
23+
compliancePath: string | null;
24+
secondDeclarationStatus: string | null;
25+
siren: string;
2226
ctaHref: string;
2327
};
2428

2529
export function DeclarationProcessPanel({
2630
year,
2731
lastActionDate,
2832
variant,
33+
compliancePath,
34+
secondDeclarationStatus,
35+
siren,
2936
ctaHref,
3037
}: Props) {
3138
const dialogRef = useRef<HTMLDialogElement>(null);
@@ -54,8 +61,15 @@ export function DeclarationProcessPanel({
5461
<div className={styles.panelContent}>
5562
<div>
5663
<PanelHeader lastActionDate={lastActionDate} year={year} />
57-
{variant === "start" && <StartAlert />}
64+
{(variant === "start" || variant === "compliance_choice") && (
65+
<StartAlert />
66+
)}
5867
<VerticalStepper
68+
compliancePath={compliancePath}
69+
secondDeclarationSubmitted={
70+
secondDeclarationStatus === "submitted"
71+
}
72+
siren={siren}
5973
step1={step1}
6074
step2={step2}
6175
step3={step3}

‎packages/app/src/modules/my-space/VerticalStepper.tsx‎

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export function getStepStatuses(
99
switch (variant) {
1010
case "start":
1111
return ["current", "pending", "pending"];
12+
case "compliance_choice":
1213
case "compliance":
1314
case "evaluation":
1415
return ["complete", "current", "pending"];
@@ -20,12 +21,18 @@ export function getStepStatuses(
2021
}
2122

2223
export function VerticalStepper({
24+
compliancePath,
25+
secondDeclarationSubmitted,
26+
siren,
2327
step1,
2428
step2,
2529
step3,
2630
variant,
2731
year,
2832
}: {
33+
compliancePath: string | null;
34+
secondDeclarationSubmitted: boolean;
35+
siren: string;
2936
step1: StepStatus;
3037
step2: StepStatus;
3138
step3: StepStatus;
@@ -34,16 +41,29 @@ export function VerticalStepper({
3441
}) {
3542
return (
3643
<div className={`${styles.stepper} fr-mb-4w`}>
37-
<div className={styles.stepIndicators}>
44+
<div className={styles.stepRow}>
3845
<StepCircle number={1} status={step1} />
39-
<div className={styles.stepLine} />
46+
<Step1Content
47+
siren={siren}
48+
status={step1}
49+
variant={variant}
50+
year={year}
51+
/>
52+
</div>
53+
<div className={styles.stepLine} />
54+
<div className={styles.stepRow}>
4055
<StepCircle number={2} status={step2} />
41-
<div className={styles.stepLine} />
42-
<StepCircle number={3} status={step3} />
56+
<Step2Content
57+
compliancePath={compliancePath}
58+
secondDeclarationSubmitted={secondDeclarationSubmitted}
59+
siren={siren}
60+
variant={variant}
61+
year={year}
62+
/>
4363
</div>
44-
<div className={styles.stepContents}>
45-
<Step1Content status={step1} variant={variant} year={year} />
46-
<Step2Content variant={variant} year={year} />
64+
<div className={styles.stepLine} />
65+
<div className={styles.stepRow}>
66+
<StepCircle number={3} status={step3} />
4767
<Step3Content variant={variant} year={year} />
4868
</div>
4969
</div>
@@ -64,22 +84,32 @@ function StepCircle({
6484
? styles.stepCircleCurrent
6585
: styles.stepCirclePending;
6686

87+
const statusLabel =
88+
status === "complete"
89+
? "Étape terminée"
90+
: status === "current"
91+
? "Étape en cours"
92+
: "Étape à venir";
93+
6794
return (
6895
<div className={`${styles.stepCircle} ${statusClass}`}>
96+
<span className="fr-sr-only">{statusLabel}</span>
6997
{status === "complete" ? (
7098
<span aria-hidden="true" className="fr-icon-check-line fr-icon--sm" />
7199
) : (
72-
number
100+
<span aria-hidden="true">{number}</span>
73101
)}
74102
</div>
75103
);
76104
}
77105

78106
function Step1Content({
107+
siren,
79108
status,
80109
variant,
81110
year,
82111
}: {
112+
siren: string;
83113
status: StepStatus;
84114
variant: PanelVariant;
85115
year: number;
@@ -123,8 +153,10 @@ function Step1Content({
123153
</p>
124154
{variant !== "closed" && (
125155
<TransmittedRow
156+
downloadHref="/api/declaration-pdf"
126157
label="Votre déclaration a été transmise"
127158
modifiableUntil={`1er juin ${year}`}
159+
modifyHref={`/declaration-remuneration/etape/1?siren=${siren}`}
128160
/>
129161
)}
130162
</div>
@@ -139,9 +171,15 @@ function Step1Content({
139171
}
140172

141173
function Step2Content({
174+
compliancePath,
175+
secondDeclarationSubmitted,
176+
siren,
142177
variant,
143178
year,
144179
}: {
180+
compliancePath: string | null;
181+
secondDeclarationSubmitted: boolean;
182+
siren: string;
145183
variant: PanelVariant;
146184
year: number;
147185
}) {
@@ -156,6 +194,10 @@ function Step2Content({
156194
return title;
157195
}
158196

197+
if (variant === "compliance_choice") {
198+
return <div className={styles.stepContent}>{title}</div>;
199+
}
200+
159201
if (variant === "compliance") {
160202
return (
161203
<div className={styles.stepContent}>
@@ -174,8 +216,10 @@ function Step2Content({
174216
<div className={styles.stepContent}>
175217
{title}
176218
<TransmittedRow
219+
downloadHref="/api/declaration-pdf?type=correction"
177220
label="Votre seconde déclaration a été transmise"
178221
modifiableUntil={`1er décembre ${year}`}
222+
modifyHref={`/declaration-remuneration/parcours-conformite/etape/1?siren=${siren}`}
179223
/>
180224
<div className={styles.bulletItem}>
181225
<span aria-hidden="true" className={styles.bullet} />
@@ -186,19 +230,31 @@ function Step2Content({
186230
);
187231
}
188232

189-
// cse variant: step 2 is complete
233+
// cse variant: step 2 is complete — show what was actually done
190234
return (
191235
<div className={styles.stepContent}>
192236
{title}
193-
<TransmittedRow
194-
label="Votre seconde déclaration a été transmise"
195-
modifiableUntil={`1er décembre ${year}`}
196-
/>
197-
<TransmittedRow
198-
hideDownload
199-
label="Votre rapport de l'évaluation conjointe a été transmise"
200-
modifiableUntil={`1er décembre ${year}`}
201-
/>
237+
{secondDeclarationSubmitted && (
238+
<TransmittedRow
239+
downloadHref="/api/declaration-pdf?type=correction"
240+
label="Votre seconde déclaration a été transmise"
241+
modifiableUntil={`1er décembre ${year}`}
242+
modifyHref={`/declaration-remuneration/parcours-conformite/etape/1?siren=${siren}`}
243+
/>
244+
)}
245+
{compliancePath === "joint_evaluation" && (
246+
<TransmittedRow
247+
label="Votre rapport de l'évaluation conjointe a été transmis"
248+
modifiableUntil={`1er décembre ${year}`}
249+
modifyHref={`/declaration-remuneration/parcours-conformite/evaluation-conjointe?siren=${siren}`}
250+
/>
251+
)}
252+
{compliancePath === "justify" && (
253+
<div className={styles.bulletItem}>
254+
<span aria-hidden="true" className={styles.bullet} />
255+
<p className="fr-mb-0">Justification des écarts de rémunération</p>
256+
</div>
257+
)}
202258
</div>
203259
);
204260
}
@@ -217,6 +273,7 @@ function Step3Content({
217273
if (
218274
variant === "closed" ||
219275
variant === "start" ||
276+
variant === "compliance_choice" ||
220277
variant === "compliance" ||
221278
variant === "evaluation"
222279
) {
@@ -235,11 +292,13 @@ function Step3Content({
235292
function TransmittedRow({
236293
label,
237294
modifiableUntil,
238-
hideDownload,
295+
modifyHref,
296+
downloadHref,
239297
}: {
240298
label: string;
241299
modifiableUntil: string;
242-
hideDownload?: boolean;
300+
modifyHref: string;
301+
downloadHref?: string;
243302
}) {
244303
return (
245304
<div className={styles.transmittedRow}>
@@ -254,18 +313,19 @@ function TransmittedRow({
254313
</p>
255314
</div>
256315
<div className={styles.transmittedActions}>
257-
{!hideDownload && (
258-
<button
316+
{downloadHref && (
317+
<a
259318
className="fr-btn fr-btn--secondary fr-icon-download-line"
319+
download
320+
href={downloadHref}
260321
title="Télécharger"
261-
type="button"
262322
>
263323
Télécharger
264-
</button>
324+
</a>
265325
)}
266-
<button className="fr-btn fr-btn--secondary" type="button">
326+
<a className="fr-btn fr-btn--secondary" href={modifyHref}>
267327
Modifier
268-
</button>
328+
</a>
269329
</div>
270330
</div>
271331
);

0 commit comments

Comments
 (0)