@wasto/cms-components 1.5.18 → 1.5.19

package/src/components/push/PushNotificationNavigator.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { Platform } from "react-native";
+import { useAnnouncements } from "../../contexts/AnnouncementsContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useOptionalAppNavigation } from "../../navigation/NavigationContext";
+
+type NotificationsModule = typeof import("expo-notifications");
+
+let notificationsModule: NotificationsModule | null | undefined;
+
+function loadNotifications(): NotificationsModule | null {
+    if (notificationsModule !== undefined) return notificationsModule;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        notificationsModule = require("expo-notifications") as NotificationsModule;
+    } catch {
+        notificationsModule = null;
+    }
+    return notificationsModule;
+}
+
+type PushData = {
+    announcementId?: unknown;
+    showAsModal?: unknown;
+    href?: unknown;
+};
+
+function asPushData(data: unknown): PushData {
+    if (!data || typeof data !== "object") return {};
+    return data as PushData;
+}
+
+function extractHref(data: PushData): string | null {
+    if (typeof data.href !== "string") return null;
+    const trimmed = data.href.trim();
+    return trimmed || null;
+}
+
+function isShowAsModal(data: PushData): boolean {
+    return data.showAsModal === true || data.showAsModal === "true";
+}
+
+function extractAnnouncementId(data: PushData): string | null {
+    if (typeof data.announcementId !== "string") return null;
+    const trimmed = data.announcementId.trim();
+    return trimmed || null;
+}
+
+/**
+ * Handles Expo notification taps (warm + cold start):
+ * - showAsModal + announcementId → open AnnouncementModal
+ * - otherwise href → NavigationApi.push
+ * Mount inside AnnouncementsProvider (under NavigationProvider).
+ */
+export function PushNotificationNavigator(): ReactNode {
+    const { previewMode, reportError } = useWasto();
+    const navigation = useOptionalAppNavigation();
+    const { openFromPushPayload } = useAnnouncements();
+    const handledResponseId = useRef<string | null>(null);
+
+    useEffect(() => {
+        if (previewMode || Platform.OS === "web") return;
+
+        const Notifications = loadNotifications();
+        if (!Notifications) return;
+
+        const openFromResponse = (response: {
+            notification: {
+                request: {
+                    identifier?: string;
+                    content: {
+                        title?: string | null;
+                        body?: string | null;
+                        data?: unknown;
+                    };
+                };
+            };
+        }) => {
+            const responseId = response.notification.request.identifier ?? "";
+            if (responseId && handledResponseId.current === responseId) return;
+
+            const content = response.notification.request.content;
+            const data = asPushData(content.data);
+            const announcementId = extractAnnouncementId(data);
+            const href = extractHref(data);
+
+            const markHandled = () => {
+                if (responseId) handledResponseId.current = responseId;
+            };
+
+            void (async () => {
+                try {
+                    if (isShowAsModal(data) && announcementId) {
+                        markHandled();
+                        await openFromPushPayload({
+                            announcementId,
+                            title: content.title,
+                            body: content.body,
+                            redirectHref: href,
+                        });
+                        return;
+                    }
+
+                    if (href && navigation) {
+                        markHandled();
+                        navigation.push(href);
+                    }
+                } catch (error) {
+                    reportError(error, {
+                        source: "push",
+                        path: href ?? announcementId ?? undefined,
+                    });
+                }
+            })();
+        };
+
+        const subscription = Notifications.addNotificationResponseReceivedListener(openFromResponse);
+
+        void Notifications.getLastNotificationResponseAsync()
+            .then((response) => {
+                if (response) openFromResponse(response);
+            })
+            .catch((error) => {
+                reportError(error, { source: "push" });
+            });
+
+        return () => {
+            subscription.remove();
+        };
+    }, [navigation, openFromPushPayload, previewMode, reportError]);
+
+    return null;
+}

package/src/components/push/PushTokenRegistrar.tsx

@@ -8,12 +8,12 @@ import { registerExpoPushToken } from "../../push/registerExpoPushToken";
 /**
  * Registers the Expo push token once a deviceId exists.
  * Retries when the app comes back to the foreground (permission granted in OS settings).
- * Associates the token with the selected collection place (→ city → city group).
+ * Associates the token with cmsAppId + selected collection place (→ city → city group).
  * Renders nothing — mount inside LocalProvider.
  */
 export function PushTokenRegistrar(): ReactNode {
     const { deviceId, selectedCityId, selectedPlaceId } = useLocal();
-    const { previewMode, reportError } = useWasto();
+    const { previewMode, reportError, appId } = useWasto();
     const client = useWastoClient();
     const lastRegistered = useRef<string | null>(null);
     const inFlight = useRef(false);
@@ -25,7 +25,7 @@ export function PushTokenRegistrar(): ReactNode {
 
         const tryRegister = async () => {
             if (cancelled || inFlight.current) return;
-            const registrationKey = `${deviceId}:${selectedPlaceId ?? ""}:${selectedCityId ?? ""}`;
+            const registrationKey = `${deviceId}:${appId ?? ""}:${selectedPlaceId ?? ""}:${selectedCityId ?? ""}`;
             if (lastRegistered.current === registrationKey) return;
 
             inFlight.current = true;
@@ -35,6 +35,7 @@ export function PushTokenRegistrar(): ReactNode {
                     registerPushToken: (id: string, pushToken: string) =>
                         client.public.devices.registerPushToken(id, {
                             token: pushToken,
+                            cmsAppId: appId || null,
                             cityId: selectedCityId,
                             wasteCollectionPlaceId: selectedPlaceId,
                         }),
@@ -73,6 +74,7 @@ export function PushTokenRegistrar(): ReactNode {
             sub.remove();
         };
     }, [
+        appId,
         client.public.devices,
         deviceId,
         previewMode,

package/src/contexts/AnnouncementsContext.tsx

@@ -6,6 +6,7 @@ import {
     useContext,
     useEffect,
     useMemo,
+    useRef,
     useState,
     type ReactNode,
 } from "react";
@@ -18,6 +19,15 @@ export type PublicAnnouncement = {
     body: string;
     imageUrl?: string | null;
     sentAt?: string | null;
+    redirectHref?: string | null;
+};
+
+export type OpenFromPushPayload = {
+    announcementId: string;
+    title?: string | null;
+    body?: string | null;
+    redirectHref?: string | null;
+    imageUrl?: string | null;
 };
 
 type AnnouncementsContextType = {
@@ -28,6 +38,8 @@ type AnnouncementsContextType = {
     markAsRead: (id: string) => Promise<void>;
     /** Open the shared AnnouncementModal for a specific item (inbox). */
     openAnnouncement: (item: PublicAnnouncement) => void;
+    /** Open modal from a push notification tap (skips if already dismissed). */
+    openFromPushPayload: (payload: OpenFromPushPayload) => Promise<boolean>;
     openFromBell: () => Promise<void>;
     forceVisible: boolean;
 };
@@ -63,25 +75,33 @@ function resolveImageUrl(apiUrl: string, url?: string | null): string | null {
 
 export type AnnouncementsProviderProps = PropsWithChildren & {
     apiUrl: string;
+    appId: string;
 };
 
-export function AnnouncementsProvider({ children, apiUrl }: AnnouncementsProviderProps): ReactNode {
+export function AnnouncementsProvider({ children, apiUrl, appId }: 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[]>([]);
+    /** When true, load() must not replace the currently shown announcement. */
+    const holdingPushModalRef = useRef(false);
+    const queueRef = useRef<PublicAnnouncement[]>([]);
+    queueRef.current = queue;
 
     const load = useCallback(async (): Promise<PublicAnnouncement[]> => {
-        if (!selectedCityId || !hasPlaceSelected) {
-            setAnnouncement(null);
+        if (!selectedCityId || !hasPlaceSelected || !appId) {
+            if (!holdingPushModalRef.current) {
+                setAnnouncement(null);
+                setForceVisible(false);
+            }
             setHasUnread(false);
             setQueue([]);
             return [];
         }
         try {
-            const list = await client.public.announcements.listForCity(selectedCityId);
+            const list = await client.public.announcements.listForCity(selectedCityId, appId);
             const dismissed = await getDismissedIds();
             const pending = (list ?? [])
                 .filter((a) => a?.id && !dismissed.has(a.id))
@@ -91,18 +111,24 @@ export function AnnouncementsProvider({ children, apiUrl }: AnnouncementsProvide
                 }));
             setQueue(pending);
             setHasUnread(pending.length > 0);
-            setAnnouncement(pending[0] ?? null);
+            if (!holdingPushModalRef.current) {
+                setAnnouncement(pending[0] ?? null);
+            }
             return pending;
         } catch {
-            setAnnouncement(null);
+            if (!holdingPushModalRef.current) {
+                setAnnouncement(null);
+                setForceVisible(false);
+            }
             setHasUnread(false);
             setQueue([]);
             return [];
         }
-    }, [apiUrl, client.public.announcements, hasPlaceSelected, selectedCityId]);
+    }, [apiUrl, appId, client.public.announcements, hasPlaceSelected, selectedCityId]);
 
     useEffect(() => {
         void load().then((pending) => {
+            if (holdingPushModalRef.current) return;
             if (pending.length > 0) setForceVisible(true);
         });
     }, [load]);
@@ -118,11 +144,13 @@ export function AnnouncementsProvider({ children, apiUrl }: AnnouncementsProvide
 
     const dismiss = useCallback(async () => {
         if (!announcement) {
+            holdingPushModalRef.current = false;
             setForceVisible(false);
             return;
         }
         const id = announcement.id;
         await markDismissed(id);
+        holdingPushModalRef.current = false;
         const nextQueue = queue.filter((a) => a.id !== id);
         setQueue(nextQueue);
         setHasUnread(nextQueue.length > 0);
@@ -135,6 +163,32 @@ export function AnnouncementsProvider({ children, apiUrl }: AnnouncementsProvide
         setForceVisible(true);
     }, []);
 
+    const openFromPushPayload = useCallback(async (payload: OpenFromPushPayload) => {
+        const id = payload.announcementId?.trim();
+        if (!id) return false;
+        const dismissed = await getDismissedIds();
+        if (dismissed.has(id)) return false;
+
+        const fromQueue = queueRef.current.find((a) => a.id === id);
+        const item: PublicAnnouncement = {
+            id,
+            title: (payload.title?.trim() || fromQueue?.title || "").trim() || "Annonce",
+            body: (payload.body?.trim() || fromQueue?.body || "").trim(),
+            imageUrl: payload.imageUrl
+                ? resolveImageUrl(apiUrl, payload.imageUrl)
+                : fromQueue?.imageUrl ?? null,
+            sentAt: fromQueue?.sentAt ?? null,
+            redirectHref: payload.redirectHref?.trim() || fromQueue?.redirectHref || null,
+        };
+
+        holdingPushModalRef.current = true;
+        setQueue((prev) => prev.filter((a) => a.id !== id));
+        setAnnouncement(item);
+        setForceVisible(true);
+        setHasUnread(true);
+        return true;
+    }, [apiUrl]);
+
     const openFromBell = useCallback(async () => {
         const pending = queue.length > 0 ? queue : await load();
         if (pending.length === 0) return;
@@ -149,10 +203,20 @@ export function AnnouncementsProvider({ children, apiUrl }: AnnouncementsProvide
             dismiss,
             markAsRead,
             openAnnouncement,
+            openFromPushPayload,
             openFromBell,
             forceVisible,
         }),
-        [announcement, dismiss, forceVisible, hasUnread, markAsRead, openAnnouncement, openFromBell],
+        [
+            announcement,
+            dismiss,
+            forceVisible,
+            hasUnread,
+            markAsRead,
+            openAnnouncement,
+            openFromBell,
+            openFromPushPayload,
+        ],
     );
 
     return (

package/src/contexts/LocalContext.tsx

@@ -50,17 +50,20 @@ export type LocalContextType = {
 
 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 type LocalContextProps = PropsWithChildren & {
+    previewMode?: boolean;
+    /** CmsApp id — stored on anonymous devices for push/announcement scoping */
+    appId?: string | null;
+};
+
 export function LocalProvider({
     children,
     previewMode = false,
+    appId = null,
 }: LocalContextProps): ReactNode {
     const keys = useMemo(
         () => ({
@@ -103,6 +106,7 @@ export function LocalProvider({
                     osVersion: null,
                     appVersion: null,
                     deviceModel: null,
+                    cmsAppId: appId || null,
                 });
                 if (!existingDeviceId) {
                     await AsyncStorage.setItem(keys.device, nextDeviceId);
@@ -125,7 +129,7 @@ export function LocalProvider({
             setIsLoading(false);
             return resolvedDeviceId;
         },
-        [client.public.analytics, keys, previewMode],
+        [appId, client.public.analytics, keys, previewMode],
     );
 
     const clearPlaceSelection = useCallback(async () => {

package/src/contexts/WastoContext.tsx

@@ -16,6 +16,7 @@ import { AnnouncementsProvider } from "./AnnouncementsContext";
 import SelectStreetModal from "../components/select-street-modal/SelectStreetModal";
 import { AnnouncementModal } from "../components/announcement-modal/AnnouncementModal";
 import { PushTokenRegistrar } from "../components/push/PushTokenRegistrar";
+import { PushNotificationNavigator } from "../components/push/PushNotificationNavigator";
 import { OptionalSafeAreaProvider } from "../components/safe-area/OptionalSafeAreaProvider";
 import {
     initWastoSentry,
@@ -104,10 +105,11 @@ export function WastoProvider(props: WastoProviderProps): ReactNode {
     return (
         <WastoContext value={value}>
             <OptionalSafeAreaProvider>
-                <LocalProvider previewMode={previewMode}>
+                <LocalProvider previewMode={previewMode} appId={appId}>
                     <PushTokenRegistrar />
                     <ChallengesProvider>
-                        <AnnouncementsProvider apiUrl={apiUrl}>
+                        <AnnouncementsProvider apiUrl={apiUrl} appId={appId}>
+                            <PushNotificationNavigator />
                             <ThemeProvider theme={props.theme}>
                                 <AppDataProvider apiUrl={apiUrl}>
                                     {props.children}

package/src/hooks/useCityAnnouncements.ts

@@ -33,7 +33,7 @@ function resolveImageUrl(apiUrl: string, url?: string | null): string | null {
 }
 
 export function useCityAnnouncements() {
-    const { apiUrl } = useWasto();
+    const { apiUrl, appId } = useWasto();
     const { selectedCityId, hasPlaceSelected } = useLocal();
     const client = useWastoClient();
     const { markAsRead: contextMarkAsRead, openAnnouncement } = useAnnouncements();
@@ -44,7 +44,7 @@ export function useCityAnnouncements() {
     const [error, setError] = useState<string | null>(null);
 
     const reload = useCallback(async () => {
-        if (!selectedCityId || !hasPlaceSelected) {
+        if (!selectedCityId || !hasPlaceSelected || !appId) {
             setAll([]);
             setLoading(false);
             setError(null);
@@ -54,7 +54,7 @@ export function useCityAnnouncements() {
         setError(null);
         try {
             const [list, dismissed] = await Promise.all([
-                client.public.announcements.listForCity(selectedCityId),
+                client.public.announcements.listForCity(selectedCityId, appId),
                 readDismissedIds(),
             ]);
             const items: CityAnnouncementItem[] = (list ?? [])
@@ -77,7 +77,7 @@ export function useCityAnnouncements() {
         } finally {
             setLoading(false);
         }
-    }, [apiUrl, client.public.announcements, hasPlaceSelected, selectedCityId]);
+    }, [apiUrl, appId, client.public.announcements, hasPlaceSelected, selectedCityId]);
 
     useEffect(() => {
         void reload();

package/src/hooks/useCollectionCalendar.ts

@@ -94,6 +94,7 @@ export type UseCollectionCalendarResult = {
     weeks: CalendarDayCell[][];
 
     selectedPlaceId: string | null;
+    wasteTypes: WasteType[];
 
     /** Collectes pour une date précise (utile pour les cases en débordement). */
     getWasteTypesForDate: (year: number, month: number, day: number) => WasteTypeInfoForDay[];
@@ -413,6 +414,7 @@ export function useCollectionCalendar(options: UseCollectionCalendarOptions = {}
         weeks,
 
         selectedPlaceId: resolvedPlaceId,
+        wasteTypes,
 
         getWasteTypesForDate,
         getWasteTypesForDay,