Skip to content

Commit 6a4c223

Browse files
LucasCharrierLucasCharrier
committed
refactor: split DeclarationProcessPanel into two files
Extract VerticalStepper and related step components (StepCircle, Step1/2/3Content, TransmittedRow, DeadlineRow) into a dedicated file. Also remove unused `status` prop from Step2Content. DeclarationProcessPanel.tsx: 146 lines VerticalStepper.tsx: 282 lines
1 parent 070bea8 commit 6a4c223

2 files changed

Lines changed: 284 additions & 282 deletions

File tree

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

Lines changed: 1 addition & 282 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useRef } from "react";
44

55
import styles from "./DeclarationProcessPanel.module.scss";
6+
import { getStepStatuses, VerticalStepper } from "./VerticalStepper";
67

78
export const DECLARATION_PROCESS_PANEL_ID = "declaration-process-panel";
89
const PANEL_TITLE_ID = "declaration-process-panel-title";
@@ -14,31 +15,13 @@ export type PanelVariant =
1415
| "cse"
1516
| "closed";
1617

17-
type StepStatus = "pending" | "current" | "complete";
18-
1918
type Props = {
2019
year: number;
2120
lastActionDate: string | null;
2221
variant: PanelVariant;
2322
ctaHref: string;
2423
};
2524

26-
function getStepStatuses(
27-
variant: PanelVariant,
28-
): [StepStatus, StepStatus, StepStatus] {
29-
switch (variant) {
30-
case "start":
31-
return ["current", "pending", "pending"];
32-
case "compliance":
33-
case "evaluation":
34-
return ["complete", "current", "pending"];
35-
case "cse":
36-
return ["complete", "complete", "current"];
37-
case "closed":
38-
return ["complete", "complete", "complete"];
39-
}
40-
}
41-
4225
export function DeclarationProcessPanel({
4326
year,
4427
lastActionDate,
@@ -134,270 +117,6 @@ function StartAlert() {
134117
);
135118
}
136119

137-
function StepCircle({
138-
status,
139-
number,
140-
}: {
141-
status: StepStatus;
142-
number: number;
143-
}) {
144-
const statusClass =
145-
status === "complete"
146-
? styles.stepCircleComplete
147-
: status === "current"
148-
? styles.stepCircleCurrent
149-
: styles.stepCirclePending;
150-
151-
return (
152-
<div className={`${styles.stepCircle} ${statusClass}`}>
153-
{status === "complete" ? (
154-
<span aria-hidden="true" className="fr-icon-check-line fr-icon--sm" />
155-
) : (
156-
number
157-
)}
158-
</div>
159-
);
160-
}
161-
162-
function VerticalStepper({
163-
step1,
164-
step2,
165-
step3,
166-
variant,
167-
year,
168-
}: {
169-
step1: StepStatus;
170-
step2: StepStatus;
171-
step3: StepStatus;
172-
variant: PanelVariant;
173-
year: number;
174-
}) {
175-
return (
176-
<div className={`${styles.stepper} fr-mb-4w`}>
177-
<div className={styles.stepIndicators}>
178-
<StepCircle number={1} status={step1} />
179-
<div className={styles.stepLine} />
180-
<StepCircle number={2} status={step2} />
181-
<div className={styles.stepLine} />
182-
<StepCircle number={3} status={step3} />
183-
</div>
184-
<div className={styles.stepContents}>
185-
<Step1Content status={step1} variant={variant} year={year} />
186-
<Step2Content status={step2} variant={variant} year={year} />
187-
<Step3Content variant={variant} year={year} />
188-
</div>
189-
</div>
190-
);
191-
}
192-
193-
function Step1Content({
194-
status,
195-
variant,
196-
year,
197-
}: {
198-
status: StepStatus;
199-
variant: PanelVariant;
200-
year: number;
201-
}) {
202-
const refYear = year - 1;
203-
204-
if (variant === "start") {
205-
return (
206-
<div className={styles.stepContent}>
207-
<div>
208-
<p className="fr-text--bold fr-mb-0">
209-
Déclaration des indicateurs de rémunération
210-
</p>
211-
<p className="fr-text--sm fr-text-mention--grey fr-mb-0">
212-
Période de référence : 01/01/{refYear} - 31/12/{refYear}.
213-
</p>
214-
</div>
215-
<div className={styles.bulletItem}>
216-
<span aria-hidden="true" className={styles.bullet} />
217-
<p className="fr-mb-0">
218-
Indicateurs pré-remplis à vérifier et à modifier si nécessaire
219-
(issus des données DSN)
220-
</p>
221-
</div>
222-
<div className={styles.bulletItem}>
223-
<span aria-hidden="true" className={styles.bullet} />
224-
<p className="fr-mb-0">
225-
Indicateurs de rémunération par catégorie de salariés à remplir
226-
</p>
227-
</div>
228-
<DeadlineRow date={`1er juin ${year}`} />
229-
</div>
230-
);
231-
}
232-
233-
if (status === "complete") {
234-
return (
235-
<div className={styles.stepContent}>
236-
<p className="fr-text--bold fr-mb-0">
237-
Déclaration des indicateurs de rémunération
238-
</p>
239-
{variant !== "closed" && (
240-
<TransmittedRow
241-
label="Votre déclaration a été transmise"
242-
modifiableUntil={`1er juin ${year}`}
243-
/>
244-
)}
245-
</div>
246-
);
247-
}
248-
249-
return (
250-
<p className="fr-text--bold fr-mb-0">
251-
Déclaration des indicateurs de rémunération
252-
</p>
253-
);
254-
}
255-
256-
function Step2Content({
257-
variant,
258-
year,
259-
}: {
260-
status: StepStatus;
261-
variant: PanelVariant;
262-
year: number;
263-
}) {
264-
const title = (
265-
<p className="fr-text--bold fr-mb-0">
266-
Parcours de mise en conformité pour l'indicateur par catégorie de salariés
267-
si écarts &ge; 5&nbsp;%
268-
</p>
269-
);
270-
271-
if (variant === "closed" || variant === "start") {
272-
return title;
273-
}
274-
275-
if (variant === "compliance") {
276-
return (
277-
<div className={styles.stepContent}>
278-
{title}
279-
<div className={styles.bulletItem}>
280-
<span aria-hidden="true" className={styles.bullet} />
281-
<p className="fr-mb-0">Actions correctives et seconde déclaration</p>
282-
</div>
283-
<DeadlineRow date={`1er décembre ${year}`} />
284-
</div>
285-
);
286-
}
287-
288-
if (variant === "evaluation") {
289-
return (
290-
<div className={styles.stepContent}>
291-
{title}
292-
<TransmittedRow
293-
label="Votre seconde déclaration a été transmise"
294-
modifiableUntil={`1er décembre ${year}`}
295-
/>
296-
<div className={styles.bulletItem}>
297-
<span aria-hidden="true" className={styles.bullet} />
298-
<p className="fr-mb-0">Évaluation conjointe des rémunérations</p>
299-
</div>
300-
<DeadlineRow date={`1er février ${year + 1}`} />
301-
</div>
302-
);
303-
}
304-
305-
// cse variant: step 2 is complete
306-
return (
307-
<div className={styles.stepContent}>
308-
{title}
309-
<TransmittedRow
310-
label="Votre seconde déclaration a été transmise"
311-
modifiableUntil={`1er décembre ${year}`}
312-
/>
313-
<TransmittedRow
314-
hideDownload
315-
label="Votre rapport de l'évaluation conjointe a été transmise"
316-
modifiableUntil={`1er décembre ${year}`}
317-
/>
318-
</div>
319-
);
320-
}
321-
322-
function Step3Content({
323-
variant,
324-
year,
325-
}: {
326-
variant: PanelVariant;
327-
year: number;
328-
}) {
329-
const title = (
330-
<p className="fr-text--bold fr-mb-0">Déposer le ou les avis du CSE</p>
331-
);
332-
333-
if (
334-
variant === "closed" ||
335-
variant === "start" ||
336-
variant === "compliance" ||
337-
variant === "evaluation"
338-
) {
339-
return title;
340-
}
341-
342-
// cse variant
343-
return (
344-
<div className={styles.stepContent}>
345-
{title}
346-
<DeadlineRow date={`1er février ${year + 1}`} />
347-
</div>
348-
);
349-
}
350-
351-
function TransmittedRow({
352-
label,
353-
modifiableUntil,
354-
hideDownload,
355-
}: {
356-
label: string;
357-
modifiableUntil: string;
358-
hideDownload?: boolean;
359-
}) {
360-
return (
361-
<div className={styles.transmittedRow}>
362-
<span
363-
aria-hidden="true"
364-
className="fr-icon-check-line fr-icon--sm fr-mt-1v"
365-
/>
366-
<div className={styles.transmittedInfo}>
367-
<p className="fr-mb-0">{label}</p>
368-
<p className="fr-text-mention--grey fr-mb-0">
369-
Modifiable jusqu'au {modifiableUntil}
370-
</p>
371-
</div>
372-
<div className={styles.transmittedActions}>
373-
{!hideDownload && (
374-
<button
375-
className="fr-btn fr-btn--secondary fr-icon-download-line"
376-
title="Télécharger"
377-
type="button"
378-
>
379-
Télécharger
380-
</button>
381-
)}
382-
<button className="fr-btn fr-btn--secondary" type="button">
383-
Modifier
384-
</button>
385-
</div>
386-
</div>
387-
);
388-
}
389-
390-
function DeadlineRow({ date }: { date: string }) {
391-
return (
392-
<div className={styles.deadlineRow}>
393-
<span aria-hidden="true" className="fr-icon-calendar-line fr-icon--sm" />
394-
<p className="fr-text--sm fr-text-mention--grey fr-mb-0">
395-
Échéance : {date}
396-
</p>
397-
</div>
398-
);
399-
}
400-
401120
function ClosedMessage() {
402121
return (
403122
<div className={styles.closedMessage}>

0 commit comments

Comments
 (0)