@wasto/cms-components 1.5.10

package/src/hooks/useCollectionCalendar.ts

@@ -0,0 +1,421 @@
+import { useCallback, useMemo, useState } from "react";
+import { useLocal } from "../contexts/LocalContext";
+import { useNextCollection, type WasteCollectionPlace, type WasteType } from "./useNextCollection";
+
+export const MONTHS = [
+    "Janvier",
+    "Février",
+    "Mars",
+    "Avril",
+    "Mai",
+    "Juin",
+    "Juillet",
+    "Août",
+    "Septembre",
+    "Octobre",
+    "Novembre",
+    "Décembre",
+] as const;
+
+const DAY_MAPPING: Record<string, number> = {
+    Dimanche: 6,
+    Lundi: 0,
+    Mardi: 1,
+    Mercredi: 2,
+    Jeudi: 3,
+    Vendredi: 4,
+    Samedi: 5,
+};
+
+export type CollectionScheduleEntry = {
+    dayOfWeek: number; // lundi=0 ... dimanche=6
+    wasteTypeId: string;
+    color: string;
+    biweekly?: boolean;
+    startDate?: string;
+};
+
+export type CalendarException = {
+    dateFrom: string;
+    dateTo: string;
+    wasteTypeId?: string;
+};
+
+export type WasteTypeInfoForDay = {
+    wasteTypeId: string;
+    color: string;
+    /** Marqueur utilisé dans l’UI historique: “retour” d’exception */
+    isException?: boolean;
+    hasActiveException?: boolean;
+};
+
+/** Coordonnées d’une case (sans données de collecte). */
+export type CalendarDayCellCore = {
+    day: number;
+    month: number;
+    year: number;
+    /** `true` si le jour appartient au mois affiché dans le titre. */
+    inCurrentMonth: boolean;
+};
+
+/** Case prête à l’affichage : planning global + exceptions **de ce jour uniquement** + collectes du jour. */
+export type CalendarDayCell = CalendarDayCellCore & {
+    schedule: CollectionScheduleEntry[];
+    exceptions: CalendarException[];
+    wasteTypesForDay: WasteTypeInfoForDay[];
+};
+
+export type UseCollectionCalendarOptions = {
+    /** Si omis, on utilise `LocalContext.selectedCityId`. */
+    cityId?: string | null;
+    /** Si omis, on utilise `LocalContext.selectedCityId` + 1er lieu disponible. */
+    selectedPlaceId?: string | null;
+    /** Mois initial (0-11). Par défaut: mois courant. */
+    initialMonth?: number;
+    /** Année initiale. Par défaut: année courante. */
+    initialYear?: number;
+};
+
+export type UseCollectionCalendarResult = {
+    cityId: string | null;
+    isLoading: boolean;
+    error: string | null;
+
+    currentMonth: number;
+    currentYear: number;
+    monthLabel: string;
+    setCurrentMonth: (m: number) => void;
+    setCurrentYear: (y: number) => void;
+    goToPrevMonth: () => void;
+    goToNextMonth: () => void;
+
+    weekDays: string[];
+    /** Semaines complètes (7 colonnes), avec jours du mois précédent / suivant pour remplir la grille. */
+    weeks: CalendarDayCell[][];
+
+    selectedPlaceId: string | null;
+
+    /** Collectes pour une date précise (utile pour les cases en débordement). */
+    getWasteTypesForDate: (year: number, month: number, day: number) => WasteTypeInfoForDay[];
+    /** Raccourci : jour du **mois affiché** uniquement (même que `getWasteTypesForDate(currentYear, currentMonth, day)`). */
+    getWasteTypesForDay: (day: number) => WasteTypeInfoForDay[];
+};
+
+function clampMonth(m: number): number {
+    if (!Number.isFinite(m)) return new Date().getMonth();
+    return Math.max(0, Math.min(11, Math.floor(m)));
+}
+
+/**
+ * Parse `dateFrom` / `dateTo` renvoyés par l’API (souvent ISO complet `...T00:00:00.000Z`).
+ * Évite `${date}T00:00:00` qui produit une chaîne invalide si la valeur contient déjà `T…`.
+ * Extrait `YYYY-MM-DD` et construit une date **locale** à minuit (alignée sur les cases du calendrier).
+ */
+function exceptionBoundaryToLocalDate(value: string): Date {
+    const trimmed = value.trim();
+    const datePart = trimmed.includes("T") ? trimmed.split("T")[0]! : trimmed;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(datePart);
+    if (m) {
+        return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 0, 0, 0, 0);
+    }
+    const d = new Date(trimmed);
+    if (!Number.isNaN(d.getTime())) {
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }
+    return new Date(NaN);
+}
+
+/**
+ * Grille calendrier : semaines de 7 jours, semaine commençant lundi.
+ * Les cases avant le 1er et après le dernier jour du mois utilisent le mois précédent / suivant.
+ */
+export function buildCalendarWeeks(year: number, month: number): CalendarDayCellCore[][] {
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const mondayOffset = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1;
+
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const cells: CalendarDayCellCore[] = [];
+
+    for (let i = 0; i < mondayOffset; i += 1) {
+        const d = daysInPrevMonth - mondayOffset + 1 + i;
+        cells.push({ day: d, month: prevMonth, year: prevYear, inCurrentMonth: false });
+    }
+
+    for (let d = 1; d <= daysInMonth; d += 1) {
+        cells.push({ day: d, month, year, inCurrentMonth: true });
+    }
+
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    let nextDay = 1;
+    while (cells.length % 7 !== 0) {
+        cells.push({ day: nextDay, month: nextMonth, year: nextYear, inCurrentMonth: false });
+        nextDay += 1;
+    }
+
+    const weeks: CalendarDayCellCore[][] = [];
+    for (let i = 0; i < cells.length; i += 7) {
+        weeks.push(cells.slice(i, i + 7));
+    }
+    return weeks;
+}
+
+/**
+ * Exceptions qui concernent la date calendaire donnée (aligné sur {@link computeWasteTypesForDay} : [dateFrom, dateTo) ;
+ * si dateFrom === dateTo, traité comme une exception d’une seule journée).
+ */
+export function exceptionsForCalendarDay(
+    day: number,
+    year: number,
+    month: number,
+    allExceptions: CalendarException[]
+): CalendarException[] {
+    const cell = new Date(year, month, day);
+    cell.setHours(0, 0, 0, 0);
+    const c = cell.getTime();
+
+    return allExceptions.filter((exc) => {
+        const from = exceptionBoundaryToLocalDate(exc.dateFrom);
+        const to = exceptionBoundaryToLocalDate(exc.dateTo);
+        const f = from.getTime();
+        const t = to.getTime();
+        if (f === t) {
+            return c === f;
+        }
+        return c >= f && c < t;
+    });
+}
+
+function enrichCalendarWeeks(
+    base: CalendarDayCellCore[][],
+    schedule: CollectionScheduleEntry[],
+    allExceptions: CalendarException[]
+): CalendarDayCell[][] {
+    return base.map((row) =>
+        row.map((cell) => {
+            const exceptionsForDay = exceptionsForCalendarDay(cell.day, cell.year, cell.month, allExceptions);
+            return {
+                ...cell,
+                schedule,
+                exceptions: exceptionsForDay,
+                wasteTypesForDay: computeWasteTypesForDay(
+                    cell.day,
+                    cell.year,
+                    cell.month,
+                    schedule,
+                    allExceptions
+                ),
+            };
+        })
+    );
+}
+
+/** @deprecated Préférer `buildCalendarWeeks` pour une grille avec débordements. */
+export function getDaysInMonth(year: number, month: number): Array<number | null> {
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const mondayBasedDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1;
+    const days: Array<number | null> = [];
+    for (let i = 0; i < mondayBasedDay; i += 1) days.push(null);
+    for (let day = 1; day <= daysInMonth; day += 1) days.push(day);
+    return days;
+}
+
+function getWeeksSinceStart(startDateStr: string, currentDate: Date): number {
+    const startDate = new Date(startDateStr);
+    const diffDays = Math.floor((currentDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+    return Math.floor(diffDays / 7);
+}
+
+function buildSchedule(
+    wasteTypes: WasteType[],
+    places: WasteCollectionPlace[],
+    selectedPlaceId?: string | null
+): { schedule: CollectionScheduleEntry[]; exceptions: CalendarException[]; resolvedPlaceId: string | null } {
+    const safePlaces = (places || []) as WasteCollectionPlace[];
+    if (!safePlaces.length) {
+        return { schedule: [], exceptions: [], resolvedPlaceId: null };
+    }
+
+    const selected =
+        (selectedPlaceId
+            ? safePlaces.find((p) => p.id === selectedPlaceId)
+            : undefined) ?? safePlaces[0];
+
+    const wasteTypeMap: Record<string, { color?: string }> = {};
+    (wasteTypes || []).forEach((wt) => {
+        if (wt?.id) wasteTypeMap[wt.id] = { color: wt.color };
+    });
+
+    const rawDays = (selected.collectionDays || []) as Array<{
+        name: string;
+        wasteTypeId: string;
+        biweekly?: boolean;
+        startDate?: string;
+    }>;
+
+    const schedule: CollectionScheduleEntry[] = [];
+    for (const day of rawDays) {
+        const dayIndex = DAY_MAPPING[day.name];
+        if (dayIndex === undefined) continue;
+        const color = wasteTypeMap[day.wasteTypeId]?.color;
+        schedule.push({
+            dayOfWeek: dayIndex,
+            wasteTypeId: day.wasteTypeId,
+            color: typeof color === "string" && color.trim().length > 0 ? color : "#7C7C7C",
+            biweekly: day.biweekly,
+            startDate: day.startDate,
+        });
+    }
+
+    const exceptions = ((selected as unknown as { exceptions?: unknown[] })?.exceptions || []) as CalendarException[];
+
+    return { schedule, exceptions, resolvedPlaceId: selected?.id ?? null };
+}
+
+function computeWasteTypesForDay(
+    day: number,
+    year: number,
+    month: number,
+    schedule: CollectionScheduleEntry[],
+    exceptions: CalendarException[]
+): WasteTypeInfoForDay[] {
+    const date = new Date(year, month, day);
+    const dayOfWeek = date.getDay();
+    const mondayBasedDay = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+
+    const daySchedules = schedule.filter((s) => s.dayOfWeek === mondayBasedDay);
+
+    const wasteTypes: WasteTypeInfoForDay[] = [];
+    for (const s of daySchedules) {
+        if (s.biweekly && s.startDate) {
+            const weeksSinceStart = getWeeksSinceStart(s.startDate, date);
+            if (weeksSinceStart >= 0 && weeksSinceStart % 2 === 0) {
+                wasteTypes.push({ wasteTypeId: s.wasteTypeId, color: s.color });
+            }
+        } else if (!s.biweekly) {
+            wasteTypes.push({ wasteTypeId: s.wasteTypeId, color: s.color });
+        }
+    }
+
+    // Filtre des exceptions: si l’exception cible un wasteTypeId précis, on ne garde pas ce type pendant la période.
+    const filtered: WasteTypeInfoForDay[] = [];
+    for (const wt of wasteTypes) {
+        const hasActiveException = exceptions.some((exc) => {
+            if (exc?.wasteTypeId && exc.wasteTypeId !== wt.wasteTypeId) return false;
+            const from = exceptionBoundaryToLocalDate(exc.dateFrom);
+            const to = exceptionBoundaryToLocalDate(exc.dateTo);
+            return date.getTime() >= from.getTime() && date.getTime() < to.getTime();
+        });
+        if (!hasActiveException) {
+            filtered.push({ ...wt, hasActiveException: false });
+        }
+    }
+
+    // “Retour” d’exception: quand on tombe exactement sur dateTo, on peut marquer le type comme exception (UI ✓).
+    for (const exc of exceptions) {
+        if (!exc?.wasteTypeId) continue;
+        const dateToBoundary = exceptionBoundaryToLocalDate(exc.dateTo);
+        if (date.getTime() !== dateToBoundary.getTime()) continue;
+        const matching = schedule.find((s) => s.wasteTypeId === exc.wasteTypeId);
+        if (!matching) continue;
+        if (!filtered.some((x) => x.wasteTypeId === matching.wasteTypeId)) {
+            filtered.push({
+                wasteTypeId: matching.wasteTypeId,
+                color: matching.color,
+                isException: true,
+                hasActiveException: false,
+            });
+        }
+    }
+
+    return filtered;
+}
+
+export function useCollectionCalendar(options: UseCollectionCalendarOptions = {}): UseCollectionCalendarResult {
+    const { selectedCityId, selectedPlaceId: localPlaceId } = useLocal();
+
+    const resolvedCityId = options.cityId ?? selectedCityId ?? null;
+    const resolvedPlaceIdOption = options.selectedPlaceId ?? localPlaceId ?? null;
+    const today = new Date();
+    const initialMonth = clampMonth(options.initialMonth ?? today.getMonth());
+    const initialYear = Number.isFinite(options.initialYear) ? (options.initialYear as number) : today.getFullYear();
+
+    const [currentMonth, setCurrentMonth] = useState<number>(initialMonth);
+    const [currentYear, setCurrentYear] = useState<number>(initialYear);
+
+    const { wasteTypes, wasteCollectionPlaces, isLoading, error } = useNextCollection({
+        cityId: resolvedCityId,
+        selectedPlaceId: resolvedPlaceIdOption,
+    });
+
+    const { schedule, exceptions, resolvedPlaceId } = useMemo(
+        () => buildSchedule(wasteTypes, wasteCollectionPlaces, resolvedPlaceIdOption),
+        [wasteTypes, wasteCollectionPlaces, resolvedPlaceIdOption]
+    );
+
+    const goToPrevMonth = useCallback(() => {
+        setCurrentMonth((m) => {
+            if (m === 0) {
+                setCurrentYear((y) => y - 1);
+                return 11;
+            }
+            return m - 1;
+        });
+    }, []);
+
+    const goToNextMonth = useCallback(() => {
+        setCurrentMonth((m) => {
+            if (m === 11) {
+                setCurrentYear((y) => y + 1);
+                return 0;
+            }
+            return m + 1;
+        });
+    }, []);
+
+    const weeks = useMemo(() => {
+        const base = buildCalendarWeeks(currentYear, currentMonth);
+        return enrichCalendarWeeks(base, schedule, exceptions);
+    }, [currentYear, currentMonth, schedule, exceptions]);
+    const weekDays = useMemo(() => ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"], []);
+
+    const getWasteTypesForDate = useCallback(
+        (y: number, m: number, d: number) => computeWasteTypesForDay(d, y, m, schedule, exceptions),
+        [schedule, exceptions]
+    );
+
+    const getWasteTypesForDay = useCallback(
+        (day: number) => computeWasteTypesForDay(day, currentYear, currentMonth, schedule, exceptions),
+        [currentYear, currentMonth, schedule, exceptions]
+    );
+
+    const monthLabel = useMemo(() => `${MONTHS[currentMonth]} ${currentYear}`, [currentMonth, currentYear]);
+
+    return {
+        cityId: resolvedCityId,
+        isLoading,
+        error,
+
+        currentMonth,
+        currentYear,
+        monthLabel,
+        setCurrentMonth,
+        setCurrentYear,
+        goToPrevMonth,
+        goToNextMonth,
+
+        weekDays,
+        weeks,
+
+        selectedPlaceId: resolvedPlaceId,
+
+        getWasteTypesForDate,
+        getWasteTypesForDay,
+    };
+}

package/src/hooks/useColumns.ts

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+
+export function useColumns<T = any>(
+    data: T[],
+    itemsPerRow: number = 4,
+): (T | null)[][] {
+    return useMemo(() => {
+        const rows: (T | null)[][] = [];
+
+        for (let i = 0; i < data.length; i += itemsPerRow) {
+            const row: (T | null)[] = data.slice(i, i + itemsPerRow);
+            while (row.length < itemsPerRow) {
+                row.push(null);
+            }
+            rows.push(row);
+        }
+
+        return rows;
+    }, [data]);
+}

package/src/hooks/useConsignes.ts

@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+import { normalizeWasteTypeToRecyclingInfo } from "../helpers/normalizeWasteTypeRecyclingInfo";
+import { useNextCollection } from "./useNextCollection";
+
+export type WasteTypeForConsignes = {
+    name: string;
+    imageUrl?: string;
+    rules?: string[];
+    color?: string;
+    details?: Array<{
+        id: string | number;
+        material?: string;
+        description?: string;
+        imageUrl?: string;
+    }>;
+};
+
+export type CityForConsignes = {
+    general_collection_rules?: Record<string, string>;
+    [key: string]: unknown;
+};
+
+export type UseConsignesResult = {
+    currentCity: CityForConsignes | null;
+    wasteType: WasteTypeForConsignes | null;
+    isLoading: boolean;
+    error: string | null;
+};
+
+/**
+ * Prépare les données pour la modale de consignes à partir de:
+ * - la ville courante (useNextCollection.city)
+ * - la liste des wasteTypes (useNextCollection.wasteTypes)
+ */
+export function useConsignes(wasteTypeId: string | null | undefined): UseConsignesResult {
+    const { city, wasteTypes, isLoading, error } = useNextCollection();
+
+    const wasteType = useMemo<WasteTypeForConsignes | null>(() => {
+        if (!wasteTypeId) return null;
+
+        const wt = (wasteTypes ?? []).find((w) => w.id === wasteTypeId);
+        if (!wt) return null;
+
+        const info = normalizeWasteTypeToRecyclingInfo(wt);
+        if (!info) return null;
+
+        return {
+            name: info.name,
+            imageUrl: info.imageUrl,
+            rules: info.rules,
+            details: info.details,
+            color: info.color
+        };
+    }, [wasteTypeId, wasteTypes]);
+
+    return {
+        currentCity: (city as any) ?? null,
+        wasteType,
+        isLoading,
+        error,
+    };
+}