@wasto/cms-components 1.5.10

package/src/components/vision/VisionTapOverlay.tsx

@@ -0,0 +1,122 @@
+import { useCallback, useState } from "react";
+import {
+    LayoutChangeEvent,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { Image } from "expo-image";
+import { Button } from "../button/Button";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type VisionTapOverlayProps = {
+    imageUri: string;
+    tap: { x: number; y: number } | null;
+    onTap: (tap: { x: number; y: number }) => void;
+    onAnalyzeFull: () => void;
+    onConfirmTap: () => void;
+    onRetake: () => void;
+    busy?: boolean;
+};
+
+export function VisionTapOverlay({
+    imageUri,
+    tap,
+    onTap,
+    onAnalyzeFull,
+    onConfirmTap,
+    onRetake,
+    busy,
+}: VisionTapOverlayProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const [size, setSize] = useState({ w: 1, h: 1 });
+
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout;
+        setSize({ w: Math.max(width, 1), h: Math.max(height, 1) });
+    }, []);
+
+    return (
+        <View style={styles.root}>
+            <Text style={[styles.hint, { color: t.colors.muted }]}>
+                Touchez le déchet sur la photo, ou analysez toute l’image.
+            </Text>
+            <Pressable
+                onLayout={onLayout}
+                onPress={(ev) => {
+                    const { locationX, locationY } = ev.nativeEvent;
+                    onTap({
+                        x: Math.min(1, Math.max(0, locationX / size.w)),
+                        y: Math.min(1, Math.max(0, locationY / size.h)),
+                    });
+                }}
+                style={[
+                    styles.imageWrap,
+                    { borderRadius: t.radii.md, backgroundColor: t.colors.onSurface },
+                ]}
+            >
+                <Image source={{ uri: imageUri }} style={styles.image} contentFit="contain" />
+                {tap ? (
+                    <View
+                        pointerEvents="none"
+                        style={[
+                            styles.halo,
+                            {
+                                left: tap.x * size.w - 18,
+                                top: tap.y * size.h - 18,
+                                borderColor: t.colors.primary,
+                            },
+                        ]}
+                    />
+                ) : null}
+            </Pressable>
+
+            <View style={styles.row}>
+                <Button variant="outline" onPress={onRetake} disabled={busy} style={styles.flexBtn}>
+                    Reprendre
+                </Button>
+                <Button
+                    variant="secondary"
+                    onPress={onAnalyzeFull}
+                    disabled={busy}
+                    style={styles.flexBtn}
+                >
+                    Toute l’image
+                </Button>
+                <Button
+                    onPress={onConfirmTap}
+                    disabled={!tap || busy}
+                    loading={busy}
+                    style={styles.flexBtn}
+                >
+                    Analyser
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { gap: SPACE.stack, flex: 1 },
+    hint: { fontSize: 14, lineHeight: 20 },
+    imageWrap: {
+        flex: 1,
+        minHeight: 280,
+        overflow: "hidden",
+    },
+    image: { width: "100%", height: "100%" },
+    halo: {
+        position: "absolute",
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        borderWidth: 3,
+        backgroundColor: "rgba(255,255,255,0.25)",
+    },
+    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    flexBtn: { flexGrow: 1, minWidth: 100 },
+});

package/src/contexts/AnnouncementsContext.tsx

@@ -0,0 +1,171 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+    createContext,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    type ReactNode,
+} from "react";
+import { useLocal } from "./LocalContext";
+import { useWastoClient } from "../hooks/useWastoClient";
+
+export type PublicAnnouncement = {
+    id: string;
+    title: string;
+    body: string;
+    imageUrl?: string | null;
+    sentAt?: string | null;
+};
+
+type AnnouncementsContextType = {
+    announcement: PublicAnnouncement | null;
+    hasUnread: boolean;
+    dismiss: () => Promise<void>;
+    /** Mark one announcement as read (inbox) and refresh unread badge. */
+    markAsRead: (id: string) => Promise<void>;
+    /** Open the shared AnnouncementModal for a specific item (inbox). */
+    openAnnouncement: (item: PublicAnnouncement) => void;
+    openFromBell: () => Promise<void>;
+    forceVisible: boolean;
+};
+
+const DISMISSED_KEY = "dismissed_announcements";
+
+const AnnouncementsContext = createContext<AnnouncementsContextType | undefined>(undefined);
+
+async function getDismissedIds(): 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();
+    }
+}
+
+async function markDismissed(id: string): Promise<void> {
+    const set = await getDismissedIds();
+    set.add(id);
+    await AsyncStorage.setItem(DISMISSED_KEY, JSON.stringify([...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 type AnnouncementsProviderProps = PropsWithChildren & {
+    apiUrl: string;
+};
+
+export function AnnouncementsProvider({ children, apiUrl }: AnnouncementsProviderProps): ReactNode {
+    const { selectedCityId, hasPlaceSelected } = useLocal();
+    const client = useWastoClient();
+    const [announcement, setAnnouncement] = useState<PublicAnnouncement | null>(null);
+    const [hasUnread, setHasUnread] = useState(false);
+    const [forceVisible, setForceVisible] = useState(false);
+    const [queue, setQueue] = useState<PublicAnnouncement[]>([]);
+
+    const load = useCallback(async (): Promise<PublicAnnouncement[]> => {
+        if (!selectedCityId || !hasPlaceSelected) {
+            setAnnouncement(null);
+            setHasUnread(false);
+            setQueue([]);
+            return [];
+        }
+        try {
+            const list = await client.public.announcements.listForCity(selectedCityId);
+            const dismissed = await getDismissedIds();
+            const pending = (list ?? [])
+                .filter((a) => a?.id && !dismissed.has(a.id))
+                .map((a) => ({
+                    ...a,
+                    imageUrl: resolveImageUrl(apiUrl, a.imageUrl),
+                }));
+            setQueue(pending);
+            setHasUnread(pending.length > 0);
+            setAnnouncement(pending[0] ?? null);
+            return pending;
+        } catch {
+            setAnnouncement(null);
+            setHasUnread(false);
+            setQueue([]);
+            return [];
+        }
+    }, [apiUrl, client.public.announcements, hasPlaceSelected, selectedCityId]);
+
+    useEffect(() => {
+        void load().then((pending) => {
+            if (pending.length > 0) setForceVisible(true);
+        });
+    }, [load]);
+
+    const markAsRead = useCallback(async (id: string) => {
+        await markDismissed(id);
+        setQueue((prev) => {
+            const next = prev.filter((a) => a.id !== id);
+            setHasUnread(next.length > 0);
+            return next;
+        });
+    }, []);
+
+    const dismiss = useCallback(async () => {
+        if (!announcement) {
+            setForceVisible(false);
+            return;
+        }
+        const id = announcement.id;
+        await markDismissed(id);
+        const nextQueue = queue.filter((a) => a.id !== id);
+        setQueue(nextQueue);
+        setHasUnread(nextQueue.length > 0);
+        setAnnouncement(nextQueue[0] ?? null);
+        setForceVisible(nextQueue.length > 0);
+    }, [announcement, queue]);
+
+    const openAnnouncement = useCallback((item: PublicAnnouncement) => {
+        setAnnouncement(item);
+        setForceVisible(true);
+    }, []);
+
+    const openFromBell = useCallback(async () => {
+        const pending = queue.length > 0 ? queue : await load();
+        if (pending.length === 0) return;
+        setAnnouncement(pending[0] ?? null);
+        setForceVisible(true);
+    }, [load, queue]);
+
+    const value = useMemo(
+        () => ({
+            announcement,
+            hasUnread,
+            dismiss,
+            markAsRead,
+            openAnnouncement,
+            openFromBell,
+            forceVisible,
+        }),
+        [announcement, dismiss, forceVisible, hasUnread, markAsRead, openAnnouncement, openFromBell],
+    );
+
+    return (
+        <AnnouncementsContext value={value}>
+            {children}
+        </AnnouncementsContext>
+    );
+}
+
+export function useAnnouncements() {
+    const ctx = useContext(AnnouncementsContext);
+    if (!ctx) {
+        throw new Error("useAnnouncements must be used within AnnouncementsProvider.");
+    }
+    return ctx;
+}

package/src/contexts/ChallengesContext.tsx

@@ -0,0 +1,182 @@
+import {
+    createContext,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    type ReactNode,
+} from "react";
+import { useLocal } from "./LocalContext";
+import { useWastoClient } from "../hooks/useWastoClient";
+import type {
+    AcquiredBadge,
+    Challenge,
+    ChallengeWithProgress,
+    UseChallengesResult,
+    UserProgress,
+} from "../hooks/useChallenges";
+
+const ChallengesContext = createContext<UseChallengesResult | undefined>(undefined);
+
+export type ChallengesProviderProps = PropsWithChildren & {
+    pageSize?: number;
+};
+
+/**
+ * Shared challenges + progress store so Challenge, ChallengeVignette and QuizModal
+ * all see the same data after a quiz completion refetch.
+ */
+export function ChallengesProvider({
+    children,
+    pageSize = 100,
+}: ChallengesProviderProps): ReactNode {
+    const { selectedCityId, deviceId } = useLocal();
+    const client = useWastoClient();
+
+    const [rawChallenges, setRawChallenges] = useState<Challenge[]>([]);
+    const [userProgress, setUserProgress] = useState<UserProgress[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchChallenges = useCallback(async () => {
+        if (!selectedCityId) {
+            setRawChallenges([]);
+            setUserProgress([]);
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            setError(null);
+            const [challengesRes, progressRes] = await Promise.all([
+                client.public.cities.getChallenges(selectedCityId, { pageSize }),
+                deviceId ? client.public.challenges.getProgress(deviceId) : Promise.resolve(null),
+            ]);
+
+            const data = (challengesRes as { data?: unknown })?.data;
+            setRawChallenges(Array.isArray(data) ? (data as Challenge[]) : []);
+
+            if (deviceId) {
+                setUserProgress(Array.isArray(progressRes) ? (progressRes as UserProgress[]) : []);
+            } else {
+                setUserProgress([]);
+            }
+        } catch (err) {
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : typeof err === "string"
+                      ? err
+                      : "Impossible de charger les challenges";
+            setError(message);
+            setRawChallenges([]);
+            setUserProgress([]);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client.public.challenges, client.public.cities, deviceId, pageSize, selectedCityId]);
+
+    useEffect(() => {
+        void fetchChallenges();
+    }, [fetchChallenges]);
+
+    const acquiredBadges = useMemo<AcquiredBadge[]>(() => {
+        const list: AcquiredBadge[] = [];
+        for (const p of userProgress) {
+            const badge = p.badge ?? undefined;
+            const badgeId = (badge as { id?: string } | undefined)?.id;
+            if (typeof badgeId !== "string" || !badgeId.trim()) continue;
+            list.push({
+                badgeId,
+                challengeId: p.challengeId,
+                earnedAt: p.completedAt,
+                badge,
+            });
+        }
+        return list;
+    }, [userProgress]);
+
+    const progressByChallengeId = useMemo<Record<string, UserProgress>>(() => {
+        const map: Record<string, UserProgress> = {};
+        for (const p of userProgress) {
+            if (p?.challengeId) {
+                map[p.challengeId] = p;
+            }
+        }
+        return map;
+    }, [userProgress]);
+
+    const getProgressByChallengeId = useCallback(
+        (challengeId: string) => progressByChallengeId[challengeId],
+        [progressByChallengeId],
+    );
+
+    const challenges = useMemo<ChallengeWithProgress[]>(() => {
+        return rawChallenges.map((c) => {
+            const progression = progressByChallengeId[c.id];
+            const seriesProgress = Array.isArray(progression?.series)
+                ? progression.series
+                : [];
+            const seriesById = new Map(
+                seriesProgress.map((s) => [s.seriesId, s]),
+            );
+            const series = c.series?.map((s) => ({
+                ...s,
+                progression: seriesById.get(s.id),
+            }));
+            return {
+                ...c,
+                progression,
+                series,
+            };
+        });
+    }, [progressByChallengeId, rawChallenges]);
+
+    const getChallengeById = useCallback(
+        (id: string) => challenges.find((c) => c.id === id),
+        [challenges],
+    );
+
+    const value = useMemo<UseChallengesResult>(
+        () => ({
+            cityId: selectedCityId,
+            challenges,
+            userProgress,
+            progressByChallengeId,
+            getProgressByChallengeId,
+            acquiredBadges,
+            isLoading,
+            error,
+            refetch: fetchChallenges,
+            getChallengeById,
+        }),
+        [
+            acquiredBadges,
+            challenges,
+            error,
+            fetchChallenges,
+            getChallengeById,
+            getProgressByChallengeId,
+            isLoading,
+            progressByChallengeId,
+            selectedCityId,
+            userProgress,
+        ],
+    );
+
+    return (
+        <ChallengesContext.Provider value={value}>{children}</ChallengesContext.Provider>
+    );
+}
+
+export function useChallengesContext(): UseChallengesResult {
+    const context = useContext(ChallengesContext);
+    if (!context) {
+        throw new Error("useChallenges must be used within a ChallengesProvider.");
+    }
+    return context;
+}

package/src/contexts/LocalContext.tsx

@@ -0,0 +1,227 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+    createContext,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    type ReactNode,
+} from "react";
+import { Platform } from "react-native";
+import { useWastoClient } from "../hooks/useWastoClient";
+
+const STORAGE_CITY_KEY = "selected_city_id";
+const STORAGE_PLACE_KEY = "selected_place_id";
+const STORAGE_PLACE_META_KEY = "selected_place_meta";
+const STORAGE_DEVICE_KEY = "wasto_device_id";
+const STORAGE_DISMISSED_ANNOUNCEMENTS_KEY = "dismissed_announcements";
+
+/** Isolate Studio preview storage from the real PWA device profile. */
+const PREVIEW_PREFIX = "wasto_preview_";
+
+export type PlaceSelectionMeta = {
+    cityName?: string | null;
+    streetName?: string | null;
+    sectorName?: string | null;
+};
+
+export type LocalContextType = {
+    isLoading: boolean;
+    /** True when both city and collection place (sector) are selected. */
+    hasPlaceSelected: boolean;
+    /** @deprecated Prefer `hasPlaceSelected`. Kept for transitional callers. */
+    hasCitySelected: boolean;
+    selectedCityId: string | null;
+    selectedPlaceId: string | null;
+    placeMeta: PlaceSelectionMeta | null;
+    deviceId: string | null;
+    registerDevice: (
+        cityId: string,
+        placeId: string,
+        meta?: PlaceSelectionMeta,
+    ) => Promise<string | null>;
+    /** Clears city/place selection (keeps deviceId) — reopen sector picker. */
+    clearPlaceSelection: () => Promise<void>;
+    /** Wipes local profile data including deviceId and dismissed announcements. */
+    clearLocalData: () => Promise<void>;
+};
+
+export const LocalContext = createContext<LocalContextType | undefined>(undefined);
+
+export type LocalContextProps = PropsWithChildren & {
+    previewMode?: boolean;
+};
+
+function storageKey(base: string, previewMode: boolean) {
+    return previewMode ? `${PREVIEW_PREFIX}${base}` : base;
+}
+
+export function LocalProvider({
+    children,
+    previewMode = false,
+}: LocalContextProps): ReactNode {
+    const keys = useMemo(
+        () => ({
+            city: storageKey(STORAGE_CITY_KEY, previewMode),
+            place: storageKey(STORAGE_PLACE_KEY, previewMode),
+            placeMeta: storageKey(STORAGE_PLACE_META_KEY, previewMode),
+            device: storageKey(STORAGE_DEVICE_KEY, previewMode),
+            dismissed: storageKey(STORAGE_DISMISSED_ANNOUNCEMENTS_KEY, previewMode),
+        }),
+        [previewMode],
+    );
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasPlaceSelected, setHasPlaceSelected] = useState(false);
+    const [selectedCityId, setSelectedCityId] = useState<string | null>(null);
+    const [selectedPlaceId, setSelectedPlaceId] = useState<string | null>(null);
+    const [placeMeta, setPlaceMeta] = useState<PlaceSelectionMeta | null>(null);
+    const [deviceId, setDeviceId] = useState<string | null>(null);
+
+    const client = useWastoClient();
+
+    const registerDevice = useCallback(
+        async (cityId: string, placeId: string, meta?: PlaceSelectionMeta) => {
+            setIsLoading(true);
+            const nextMeta: PlaceSelectionMeta = {
+                cityName: meta?.cityName?.trim() || null,
+                streetName: meta?.streetName?.trim() || null,
+                sectorName: meta?.sectorName?.trim() || null,
+            };
+
+            let resolvedDeviceId: string | null = null;
+            if (!previewMode) {
+                const newDeviceId = generateDeviceId();
+                await client.public.analytics.track({
+                    id: newDeviceId,
+                    cityId: cityId,
+                    platform: Platform.OS,
+                    osVersion: null,
+                    appVersion: null,
+                    deviceModel: null,
+                });
+                await AsyncStorage.setItem(keys.device, newDeviceId);
+                setDeviceId(newDeviceId);
+                resolvedDeviceId = newDeviceId;
+            } else {
+                // Studio preview: never create analytics devices / persist device id.
+                setDeviceId(null);
+            }
+
+            await AsyncStorage.setItem(keys.city, cityId);
+            await AsyncStorage.setItem(keys.place, placeId);
+            await AsyncStorage.setItem(keys.placeMeta, JSON.stringify(nextMeta));
+
+            setHasPlaceSelected(true);
+            setSelectedCityId(cityId);
+            setSelectedPlaceId(placeId);
+            setPlaceMeta(nextMeta);
+            setIsLoading(false);
+            return resolvedDeviceId;
+        },
+        [client.public.analytics, keys, previewMode],
+    );
+
+    const clearPlaceSelection = useCallback(async () => {
+        await AsyncStorage.multiRemove([keys.city, keys.place, keys.placeMeta]);
+        setHasPlaceSelected(false);
+        setSelectedCityId(null);
+        setSelectedPlaceId(null);
+        setPlaceMeta(null);
+    }, [keys]);
+
+    const clearLocalData = useCallback(async () => {
+        await AsyncStorage.multiRemove([
+            keys.city,
+            keys.place,
+            keys.placeMeta,
+            keys.device,
+            keys.dismissed,
+        ]);
+        setHasPlaceSelected(false);
+        setSelectedCityId(null);
+        setSelectedPlaceId(null);
+        setPlaceMeta(null);
+        setDeviceId(null);
+    }, [keys]);
+
+    useEffect(() => {
+        const loadLocalData = async () => {
+            setIsLoading(true);
+
+            const [
+                localSelectedCityId,
+                localSelectedPlaceId,
+                localPlaceMetaRaw,
+                localDeviceId,
+            ] = await Promise.all([
+                AsyncStorage.getItem(keys.city),
+                AsyncStorage.getItem(keys.place),
+                AsyncStorage.getItem(keys.placeMeta),
+                previewMode ? Promise.resolve(null) : AsyncStorage.getItem(keys.device),
+            ]);
+
+            let localPlaceMeta: PlaceSelectionMeta | null = null;
+            if (localPlaceMetaRaw) {
+                try {
+                    const parsed = JSON.parse(localPlaceMetaRaw) as PlaceSelectionMeta;
+                    localPlaceMeta = {
+                        cityName: parsed.cityName ?? null,
+                        streetName: parsed.streetName ?? null,
+                        sectorName: parsed.sectorName ?? null,
+                    };
+                } catch {
+                    localPlaceMeta = null;
+                }
+            }
+
+            const ready = Boolean(localSelectedCityId && localSelectedPlaceId);
+            setHasPlaceSelected(ready);
+            setSelectedCityId(localSelectedCityId);
+            setSelectedPlaceId(localSelectedPlaceId);
+            setPlaceMeta(localPlaceMeta);
+            setDeviceId(previewMode ? null : localDeviceId);
+
+            setIsLoading(false);
+        };
+
+        void loadLocalData();
+    }, [keys, previewMode]);
+
+    return (
+        <LocalContext
+            value={{
+                isLoading,
+                hasPlaceSelected,
+                hasCitySelected: hasPlaceSelected,
+                selectedCityId,
+                selectedPlaceId,
+                placeMeta,
+                deviceId,
+                registerDevice,
+                clearPlaceSelection,
+                clearLocalData,
+            }}
+        >
+            {children}
+        </LocalContext>
+    );
+}
+
+export function useLocal() {
+    const context = useContext(LocalContext);
+    if (!context) {
+        throw new Error("useLocal must be within a LocalProvider.");
+    }
+    return context;
+}
+
+function generateDeviceId() {
+    const randomCharacters = Array.from({ length: 8 }, () =>
+        Math.floor(Math.random() * 10),
+    ).join("");
+
+    return `device--${Date.now()}--${Platform.OS}--${randomCharacters}`;
+}