@wasto/cms-components 1.5.10

package/src/helpers/themeStyles.ts

@@ -0,0 +1,114 @@
+import { ViewStyle } from "react-native";
+import type { ResolvedTheme, Theme, ThemeShadowStyle } from "../types/Theme";
+
+function withAlpha(hex: string, alphaHex: string): string {
+    const h = hex.replace("#", "").trim();
+    if (h.length === 3) {
+        const r = h[0];
+        const g = h[1];
+        const b = h[2];
+        return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;
+    }
+    if (h.length === 6) return `#${h}${alphaHex}`;
+    if (h.length === 8) return `#${h.slice(0, 6)}${alphaHex}`;
+    return `${hex}`;
+}
+
+const DEFAULT_SHADOW_COLOR = "#0F172A";
+
+/** Console-like shadow-sm defaults. */
+function defaultCardShadow(): ThemeShadowStyle {
+    return {
+        shadowColor: DEFAULT_SHADOW_COLOR,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.06,
+        shadowRadius: 3,
+        elevation: 1,
+    };
+}
+
+function defaultSoftShadow(): ThemeShadowStyle {
+    return {
+        shadowColor: DEFAULT_SHADOW_COLOR,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    };
+}
+
+/** Fill optional theme fields with sensible defaults (retrocompat / maquette-like). */
+export function resolveTheme(theme: Theme): ResolvedTheme {
+    // Maquette default principal radius when omitted (cards ~20).
+    const radius = theme.radius ?? 20;
+    const primary = theme.colors.primary;
+
+    return {
+        ...theme,
+        colors: {
+            ...theme.colors,
+            primarySoft: theme.colors.primarySoft ?? withAlpha(primary, "22"),
+            surfaceElevated: theme.colors.surfaceElevated ?? theme.colors.surface,
+            muted: theme.colors.muted ?? withAlpha(theme.colors.onSurface, "99"),
+        },
+        radii: theme.radii ?? {
+            sm: Math.max(12, Math.round(radius * 0.6)),
+            md: Math.max(14, Math.round(radius * 0.8)),
+            lg: Math.max(radius, Math.round(radius * 1.2)),
+            pill: 999,
+        },
+        shadow: {
+            card: theme.shadow?.card ?? defaultCardShadow(),
+            soft: theme.shadow?.soft ?? defaultSoftShadow(),
+        },
+    };
+}
+
+/**
+ * Soft elevation tinted with a brand / category color.
+ * Prefer border + category fill for cards; use sparingly (e.g. active chips).
+ */
+export function coloredShadow(hex: string, opacity = 0.12): ThemeShadowStyle {
+    return {
+        shadowColor: hex,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: opacity,
+        shadowRadius: 4,
+        elevation: 2,
+    };
+}
+
+/** Shared card: surface + border + light shadow (console / shadcn). */
+export function cardStyle(theme: Theme, opts?: { elevated?: boolean }): ViewStyle {
+    const t = resolveTheme(theme);
+    return {
+        backgroundColor: opts?.elevated ? t.colors.surfaceElevated : t.colors.surface,
+        borderRadius: t.radii.lg,
+        borderWidth: 1,
+        borderColor: t.colors.border,
+        ...t.shadow.card,
+    };
+}
+
+export function softCardStyle(theme: Theme): ViewStyle {
+    const t = resolveTheme(theme);
+    return {
+        backgroundColor: t.colors.surface,
+        borderRadius: t.radii.md,
+        borderWidth: 1,
+        borderColor: t.colors.border,
+        ...t.shadow.soft,
+    };
+}
+
+/** Inset grouped list section: one surface, rows separated by internal hairlines. */
+export function groupedSectionStyle(theme: Theme): ViewStyle {
+    const t = resolveTheme(theme);
+    return {
+        backgroundColor: t.colors.surface,
+        borderRadius: t.radii.lg,
+        borderWidth: 1,
+        borderColor: t.colors.border,
+        overflow: "hidden",
+    };
+}

package/src/helpers/useSafeAreaPadding.ts

@@ -0,0 +1,14 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export type SafeAreaEdge = "top" | "bottom" | "left" | "right";
+
+/** Padding on a regular RN `View` — avoids Fabric `SafeAreaView` / codegen in bundled libs. */
+export function useSafeAreaPadding(edges: readonly SafeAreaEdge[]) {
+    const insets = useSafeAreaInsets();
+    return {
+        ...(edges.includes("top") ? { paddingTop: insets.top } : null),
+        ...(edges.includes("bottom") ? { paddingBottom: insets.bottom } : null),
+        ...(edges.includes("left") ? { paddingLeft: insets.left } : null),
+        ...(edges.includes("right") ? { paddingRight: insets.right } : null),
+    };
+}

package/src/hooks/useBadges.ts

@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocal } from "../contexts/LocalContext";
+import { useWastoClient } from "./useWastoClient";
+
+export type Badge = {
+    id: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+    icon?: string;
+    challenge?: { id: string; name: string; order?: number };
+    [key: string]: unknown;
+};
+
+export type PaginationMeta = {
+    page: number;
+    pageSize: number;
+    total: number;
+    pageCount: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    [key: string]: unknown;
+};
+
+export type UseBadgesOptions = {
+    /** Si omis, utilise `LocalContext.selectedCityId`. */
+    cityId?: string | null;
+    page?: number;
+    pageSize?: number;
+};
+
+export type UseBadgesResult = {
+    cityId: string | null;
+    badges: Badge[];
+    meta: PaginationMeta | null;
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+    getBadgeById: (id: string) => Badge | undefined;
+};
+
+export function useBadges(options: UseBadgesOptions = {}): UseBadgesResult {
+    const { selectedCityId } = useLocal();
+
+    const resolvedCityId = options.cityId ?? selectedCityId ?? null;
+    const page = options.page ?? 1;
+    const pageSize = options.pageSize ?? 100;
+
+    const client = useWastoClient();
+
+    const [badges, setBadges] = useState<Badge[]>([]);
+    const [meta, setMeta] = useState<PaginationMeta | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchBadges = useCallback(async () => {
+        if (!resolvedCityId) {
+            setBadges([]);
+            setMeta(null);
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            setError(null);
+            const res = await client.public.cities.getBadges(resolvedCityId, { page, pageSize });
+            const data = (res as { data?: unknown })?.data;
+            const meta = (res as { meta?: unknown })?.meta;
+            setBadges(Array.isArray(data) ? (data as Badge[]) : []);
+            setMeta(meta && typeof meta === "object" ? (meta as PaginationMeta) : null);
+        } catch (err) {
+            const message =
+                err instanceof Error ? err.message : typeof err === "string" ? err : "Impossible de charger les badges";
+            setError(message);
+            setBadges([]);
+            setMeta(null);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client.public.cities, page, pageSize, resolvedCityId]);
+
+    useEffect(() => {
+        void fetchBadges();
+    }, [fetchBadges]);
+
+    const getBadgeById = useCallback((id: string) => badges.find((b) => b.id === id), [badges]);
+
+    return {
+        cityId: resolvedCityId,
+        badges,
+        meta,
+        isLoading,
+        error,
+        refetch: fetchBadges,
+        getBadgeById,
+    };
+}
+

package/src/hooks/useBlogPosts.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from "react";
+import { useNextCollection } from "./useNextCollection";
+import { useWastoClient } from "./useWastoClient";
+import { normalizeBlogPost, type BlogPost } from "../helpers/blogPost";
+
+function cityGroupIdFromCity(city: Record<string, unknown> | null): string | undefined {
+    if (!city) return undefined;
+    const raw =
+        city.cityGroupId ??
+        city.city_group_id ??
+        (city.cityGroup != null && typeof city.cityGroup === "object"
+            ? (city.cityGroup as { id?: unknown }).id
+            : undefined);
+    return typeof raw === "string" && raw.trim() ? raw.trim() : undefined;
+}
+
+export type UseBlogPostsResult = {
+    posts: BlogPost[];
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+};
+
+export function useBlogPosts(options: { pageSize?: number } = {}): UseBlogPostsResult {
+    const { city } = useNextCollection();
+    const client = useWastoClient();
+    const pageSize = options.pageSize ?? 50;
+    const cityGroupId = cityGroupIdFromCity(city as Record<string, unknown> | null);
+
+    const [posts, setPosts] = useState<BlogPost[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchPosts = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            const res = await client.public.blogPosts.list(cityGroupId, { pageSize });
+            const data = (res as { data?: unknown })?.data;
+            const list = Array.isArray(data) ? data : [];
+            setPosts(list.map(normalizeBlogPost).filter((p): p is BlogPost => p != null));
+        } catch (err) {
+            setError(
+                err instanceof Error ? err.message : "Impossible de charger les articles"
+            );
+            setPosts([]);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [cityGroupId, client.public.blogPosts, pageSize]);
+
+    useEffect(() => {
+        void fetchPosts();
+    }, [fetchPosts]);
+
+    return { posts, isLoading, error, refetch: fetchPosts };
+}
+
+export type UseBlogPostResult = {
+    post: BlogPost | null;
+    isLoading: boolean;
+    error: string | null;
+};
+
+export function useBlogPost(articleId: string): UseBlogPostResult {
+    const client = useWastoClient();
+    const [post, setPost] = useState<BlogPost | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const id = articleId.trim();
+        if (!id) {
+            setPost(null);
+            setError(null);
+            setIsLoading(false);
+            return;
+        }
+
+        let cancelled = false;
+        const run = async () => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const res = await client.public.blogPosts.getById(id);
+                if (cancelled) return;
+                const normalized = normalizeBlogPost(res);
+                setPost(normalized);
+                if (!normalized) setError("Article introuvable");
+            } catch (err) {
+                if (cancelled) return;
+                setPost(null);
+                setError(err instanceof Error ? err.message : "Impossible de charger l'article");
+            } finally {
+                if (!cancelled) setIsLoading(false);
+            }
+        };
+        void run();
+        return () => {
+            cancelled = true;
+        };
+    }, [articleId, client.public.blogPosts]);
+
+    return { post, isLoading, error };
+}

package/src/hooks/useChallenges.ts

@@ -0,0 +1,110 @@
+import { useChallengesContext } from "../contexts/ChallengesContext";
+
+export type Challenge = {
+    id: string;
+    name: string;
+    description?: string;
+    imageUrl?: string | null;
+    enabled?: boolean;
+    startDate?: string;
+    endDate?: string;
+    order?: number;
+    requiredChallengeId?: string | null;
+    requiredChallenge?: { id: string; name: string } | null;
+    series?: Array<{
+        id: string;
+        challengeId: string;
+        name: string;
+        description?: string;
+        imageUrl?: string | null;
+        order?: number;
+        quizQuestions?: Array<{
+            id: string;
+            material?: string;
+            question?: string;
+            correctWasteTypeId?: string;
+            order?: number;
+            imageUrl?: string | null;
+            kind?: string | null;
+            options?: unknown;
+            explanationText?: string | null;
+            explanationDetailId?: string | null;
+            explanationDetail?: {
+                material?: string | null;
+                description?: string | null;
+                instructions?: string | null;
+            } | null;
+        }>;
+    }>;
+    badge?: {
+        id: string;
+        challengeId: string;
+        name: string;
+        description?: string;
+        icon?: string;
+        imageUrl?: string;
+    } | null;
+};
+
+export type SeriesProgress = {
+    seriesId: string;
+    score: number;
+    completedAt: string;
+};
+
+export type ChallengeSeriesWithProgress = NonNullable<Challenge["series"]>[number] & {
+    progression?: SeriesProgress;
+};
+
+/** `Omit<Challenge, "series">` évite que `series` de `Challenge` écrase le type enrichi. */
+export type ChallengeWithProgress = Omit<Challenge, "series"> & {
+    progression?: UserProgress;
+    series?: ChallengeSeriesWithProgress[];
+};
+
+export type UserProgress = {
+    challengeId: string;
+    challengeName?: string;
+    score?: number;
+    completedAt: string;
+    badge?: Challenge["badge"];
+    series?: SeriesProgress[];
+    [key: string]: unknown;
+};
+
+export type AcquiredBadge = {
+    badgeId: string;
+    challengeId: string;
+    earnedAt: string;
+    badge?: Challenge["badge"];
+};
+
+export type UseChallengesOptions = {
+    /** Conservé pour compat ; le store partagé utilise LocalContext. */
+    cityId?: string | null;
+    pageSize?: number;
+    deviceId?: string | null;
+};
+
+export type UseChallengesResult = {
+    cityId: string | null;
+    challenges: ChallengeWithProgress[];
+    userProgress: UserProgress[];
+    /** Progression indexée par `challengeId` (pratique pour l'affichage). */
+    progressByChallengeId: Record<string, UserProgress>;
+    /** Raccourci pour récupérer la progression d'un challenge. */
+    getProgressByChallengeId: (challengeId: string) => UserProgress | undefined;
+    acquiredBadges: AcquiredBadge[];
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+    getChallengeById: (id: string) => ChallengeWithProgress | undefined;
+};
+
+/**
+ * Shared challenges store (via ChallengesProvider inside WastoProvider).
+ * Options are ignored — city/device come from LocalContext so all screens stay in sync.
+ */
+export function useChallenges(_options: UseChallengesOptions = {}): UseChallengesResult {
+    return useChallengesContext();
+}

package/src/hooks/useCities.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useWastoClient } from "./useWastoClient";
+
+export type City = {
+    id: string;
+    name: string;
+    status?: "NON_ACTIF" | "INCOMPLET" | "ACTIF" | "MAINTENANCE";
+    [key: string]: unknown;
+};
+
+export type UseCitiesResult = {
+    cities: City[];
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+    getCityById: (id: string) => City | undefined;
+};
+
+export type UseCitiesOptions = {
+    pageSize?: number;
+};
+
+export function useCities(options: UseCitiesOptions = {}): UseCitiesResult {
+    const client = useWastoClient();
+
+    const [cities, setCities] = useState<City[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const pageSize = options.pageSize ?? 100;
+
+    const fetchCities = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            const res = await client.public.cities.findAll({ pageSize });
+            const data = (res as { data?: unknown })?.data;
+            setCities(Array.isArray(data) ? (data as City[]) : []);
+        } catch (err) {
+            const message =
+                err instanceof Error ? err.message : typeof err === "string" ? err : "Impossible de charger les villes";
+            setError(message);
+            setCities([]);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client, pageSize]);
+
+    useEffect(() => {
+        void fetchCities();
+    }, [fetchCities]);
+
+    const getCityById = useCallback((id: string) => cities.find((c) => c.id === id), [cities]);
+
+    return { cities, isLoading, error, refetch: fetchCities, getCityById };
+}

package/src/hooks/useCityAnnouncements.ts

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useLocal } from "../contexts/LocalContext";
+import { useWasto } from "../contexts/WastoContext";
+import { useWastoClient } from "./useWastoClient";
+import type { PublicAnnouncement } from "../contexts/AnnouncementsContext";
+import { useAnnouncements } from "../contexts/AnnouncementsContext";
+
+const DISMISSED_KEY = "dismissed_announcements";
+const PAGE_SIZE = 20;
+
+export type CityAnnouncementItem = PublicAnnouncement & {
+    unread: boolean;
+};
+
+async function readDismissedIds(): Promise<Set<string>> {
+    try {
+        const raw = await AsyncStorage.getItem(DISMISSED_KEY);
+        if (!raw) return new Set();
+        const parsed = JSON.parse(raw) as string[];
+        return new Set(Array.isArray(parsed) ? parsed : []);
+    } catch {
+        return new Set();
+    }
+}
+
+function resolveImageUrl(apiUrl: string, url?: string | null): string | null {
+    if (!url) return null;
+    if (url.startsWith("http://") || url.startsWith("https://")) return url;
+    const base = apiUrl.replace(/\/$/, "");
+    const path = url.startsWith("/") ? url : `/${url}`;
+    return `${base}${path}`;
+}
+
+export function useCityAnnouncements() {
+    const { apiUrl } = useWasto();
+    const { selectedCityId, hasPlaceSelected } = useLocal();
+    const client = useWastoClient();
+    const { markAsRead: contextMarkAsRead, openAnnouncement } = useAnnouncements();
+
+    const [all, setAll] = useState<CityAnnouncementItem[]>([]);
+    const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const reload = useCallback(async () => {
+        if (!selectedCityId || !hasPlaceSelected) {
+            setAll([]);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const [list, dismissed] = await Promise.all([
+                client.public.announcements.listForCity(selectedCityId),
+                readDismissedIds(),
+            ]);
+            const items: CityAnnouncementItem[] = (list ?? [])
+                .filter((a) => a?.id)
+                .map((a) => ({
+                    ...a,
+                    imageUrl: resolveImageUrl(apiUrl, a.imageUrl),
+                    unread: !dismissed.has(a.id),
+                }))
+                .sort((a, b) => {
+                    const ta = a.sentAt ? new Date(a.sentAt).getTime() : 0;
+                    const tb = b.sentAt ? new Date(b.sentAt).getTime() : 0;
+                    return tb - ta;
+                });
+            setAll(items);
+            setVisibleCount(PAGE_SIZE);
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "Impossible de charger les notifications");
+            setAll([]);
+        } finally {
+            setLoading(false);
+        }
+    }, [apiUrl, client.public.announcements, hasPlaceSelected, selectedCityId]);
+
+    useEffect(() => {
+        void reload();
+    }, [reload]);
+
+    const items = all.slice(0, visibleCount);
+    const hasMore = visibleCount < all.length;
+
+    const loadMore = useCallback(() => {
+        if (!hasMore) return;
+        setVisibleCount((n) => Math.min(n + PAGE_SIZE, all.length));
+    }, [all.length, hasMore]);
+
+    const openItem = useCallback(
+        async (item: CityAnnouncementItem) => {
+            openAnnouncement(item);
+            if (item.unread) {
+                await contextMarkAsRead(item.id);
+                setAll((prev) =>
+                    prev.map((a) => (a.id === item.id ? { ...a, unread: false } : a)),
+                );
+            }
+        },
+        [contextMarkAsRead, openAnnouncement],
+    );
+
+    return {
+        items,
+        loading,
+        error,
+        hasMore,
+        loadMore,
+        reload,
+        openItem,
+        hasPlaceSelected: !!hasPlaceSelected && !!selectedCityId,
+        totalCount: all.length,
+    };
+}