@wasto/cms-components 1.5.11 → 1.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wasto/cms-components",
-  "version": "1.5.11",
+  "version": "1.5.14",
   "description": "Wast'O CMS React Native components",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -30,10 +30,12 @@
     "@react-navigation/bottom-tabs": "*",
     "@sentry/react-native": "*",
     "@wasto/sdk": "*",
+    "expo-constants": "*",
     "expo-haptics": "*",
     "expo-image": "*",
     "expo-image-picker": "*",
     "expo-linear-gradient": "*",
+    "expo-notifications": "*",
     "expo-router": "*",
     "lucide-react-native": "*",
     "maplibre-gl": "*",
@@ -42,21 +44,31 @@
     "react-native-gesture-handler": "*",
     "react-native-markdown-display": "*",
     "react-native-reanimated": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "@react-navigation/elements": "*"
   },
   "peerDependenciesMeta": {
     "@maplibre/maplibre-react-native": {
       "optional": true
     },
+    "@react-navigation/elements": {
+      "optional": true
+    },
     "@sentry/react-native": {
       "optional": true
     },
+    "expo-constants": {
+      "optional": true
+    },
     "expo-image-picker": {
       "optional": true
     },
     "expo-linear-gradient": {
       "optional": true
     },
+    "expo-notifications": {
+      "optional": true
+    },
     "expo-router": {
       "optional": true
     },
@@ -67,17 +79,20 @@
   "devDependencies": {
     "@maplibre/maplibre-react-native": "11.3.6",
     "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.9.10",
     "@sentry/react-native": "~6.22.0",
     "@types/react": "~19.2.2",
+    "expo-constants": "~18.0.9",
     "expo-haptics": "~15.0.7",
     "expo-linear-gradient": "~15.0.8",
+    "expo-notifications": "~0.32.17",
     "maplibre-gl": "^4.7.0",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-markdown-display": "^7.0.2",
     "react-native-reanimated": "~4.1.1",
     "tsup": "^8.5.1",
     "typescript": "^6.0.2",
-    "@wasto/sdk": "1.0.4"
+    "@wasto/sdk": "1.0.5"
   },
   "keywords": [],
   "author": "",

package/src/components/header/Header.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { useTheme } from "../../contexts/ThemeContext";
 import { useWasto } from "../../contexts/WastoContext";
+import { useOptionalAppData } from "../../contexts/AppDataContext";
 import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
 import { Title } from "../title/Title";
 import { Theme } from "../../types/Theme";
@@ -58,6 +59,26 @@ export type AppHeaderConfig = {
     elements: AppHeaderElement[];
 };
 
+/** Actions standard (notifications + profil) pour navbar sans titre. */
+export const DEFAULT_HEADER_ACTIONS: readonly AppHeaderActionElement[] = [
+    {
+        id: "notifications",
+        type: "action",
+        slot: "right",
+        icon: "bell",
+        action: "navigate",
+        href: SYSTEM_ROUTES.notifications,
+    },
+    {
+        id: "profile",
+        type: "action",
+        slot: "right",
+        icon: "person",
+        action: "navigate",
+        href: SYSTEM_ROUTES.profile,
+    },
+];
+
 export type HeaderProps = {
     readonly options: { title?: string; headerBackVisible?: boolean };
     readonly route: { name: string };
@@ -67,7 +88,10 @@ export type HeaderProps = {
     };
     /** Flotte au-dessus du contenu (ex. carte) : fond transparent. */
     readonly overlay?: boolean;
-    /** Config layout (`header.elements`) — logo / titre / actions. */
+    /**
+     * Config layout (`header.elements`) — logo / actions.
+     * Si fournie (même vide), le fallback titre d’écran ne s’applique pas.
+     */
     readonly headerConfig?: AppHeaderConfig | null;
 };
 
@@ -75,21 +99,16 @@ function resolveLogoUri(
     apiUrl: string,
     el: AppHeaderLogoElement,
 ): string | null {
-    if (el.sourceType === "media") {
+    const url = (el.url || "").trim();
+    if (url) return url;
+    // Fallback média (export parfois laisse mediaId si rewrite manqué)
+    if (el.sourceType === "media" || el.mediaId) {
         return publicMediaUrl(apiUrl, el.mediaId);
     }
-    const url = (el.url || "").trim();
-    return url || null;
+    return null;
 }
 
-function HeaderLogo({
-    element,
-}: {
-    readonly element: AppHeaderLogoElement;
-}): ReactNode {
-    const { apiUrl } = useWasto();
-    const uri = resolveLogoUri(apiUrl, element);
-    if (!uri) return null;
+function HeaderLogoImage({ uri }: { readonly uri: string }): ReactNode {
     return (
         <Image
             source={{ uri }}
@@ -100,6 +119,29 @@ function HeaderLogo({
     );
 }
 
+function HeaderLogo({
+    element,
+}: {
+    readonly element: AppHeaderLogoElement;
+}): ReactNode {
+    const { apiUrl } = useWasto();
+    const uri = resolveLogoUri(apiUrl, element);
+    if (!uri) return null;
+    return <HeaderLogoImage uri={uri} />;
+}
+
+function CityLogoFallback(): ReactNode {
+    const { apiUrl } = useWasto();
+    const appData = useOptionalAppData();
+    const logoMediaId =
+        typeof appData?.city?.logoMediaId === "string"
+            ? appData.city.logoMediaId
+            : null;
+    const uri = publicMediaUrl(apiUrl, logoMediaId);
+    if (!uri) return null;
+    return <HeaderLogoImage uri={uri} />;
+}
+
 function HeaderActionButton({
     onPress,
     accessibilityLabel,
@@ -143,9 +185,15 @@ export function Header({
         [options.title, route.name],
     );
 
-    const elements = headerConfig?.elements ?? [];
-    const hasCustom = elements.length > 0;
+    /** Config explicite → navbar (logo/actions), jamais le fallback titre d’écran. */
+    const hasExplicitConfig = headerConfig != null;
+    const elements = useMemo(() => {
+        const raw = headerConfig?.elements ?? [];
+        // `type: "title"` est déprécié (navbar uniquement).
+        return raw.filter((el) => el.type !== "title");
+    }, [headerConfig]);
     const hasCustomActions = elements.some((el) => el.type === "action");
+    const hasLogo = elements.some((el) => el.type === "logo");
 
     const bySlot = useMemo(() => {
         const left: AppHeaderElement[] = [];
@@ -174,11 +222,7 @@ export function Header({
             return <HeaderLogo key={el.id} element={el} />;
         }
         if (el.type === "title") {
-            const text =
-                el.useScreenTitle !== false
-                    ? screenTitle
-                    : (el.text || "").trim() || screenTitle;
-            return <Title key={el.id} text={text} level="1" />;
+            return null;
         }
         // action
         const onPress = async () => {
@@ -259,7 +303,7 @@ export function Header({
             pointerEvents="box-none"
         >
             <View style={styles.header} pointerEvents="box-none">
-                {hasCustom ? (
+                {hasExplicitConfig ? (
                     <>
                         <View style={styles.slotLeft} pointerEvents="box-none">
                             {showBack ? (
@@ -276,6 +320,7 @@ export function Header({
                                 </HeaderActionButton>
                             ) : null}
                             {bySlot.left.map(renderElement)}
+                            {!hasLogo ? <CityLogoFallback /> : null}
                         </View>
                         <View
                             style={styles.slotCenter}
@@ -304,6 +349,7 @@ export function Header({
                                     />
                                 </HeaderActionButton>
                             ) : null}
+                            <CityLogoFallback />
                             <Title text={screenTitle} level="1" />
                         </View>
                         <View style={styles.actions}>{defaultActions}</View>
@@ -333,9 +379,9 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "space-between",
         paddingHorizontal: SPACE.pageX,
-        paddingVertical: 12,
+        paddingVertical: 6,
         gap: 10,
-        minHeight: 56,
+        minHeight: 44,
     },
     left: {
         flexDirection: "row",

package/src/components/locations-map/LocationsMapShell.tsx

@@ -27,15 +27,22 @@ import { LocationSheet } from "./LocationSheet";
 import type { LocationsMapViewProps } from "./LocationsMapView";
 import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
 import { getContrastColor } from "../../helpers/getContrastColor";
-import { Header } from "../header/Header";
+import { Header, DEFAULT_HEADER_ACTIONS, type AppHeaderConfig } from "../header/Header";
+import { useHeaderConfig } from "../../contexts/HeaderConfigContext";
 import { SPACE } from "../../helpers/layout";
 
 export type LocationsMapProps = {
     fullScreen?: boolean;
     showFilters?: boolean;
-    /** Header flottant au-dessus de la carte (titre + cloche + profil). */
+    /** Header flottant au-dessus de la carte (même navbar que le layout, sans titre). */
     overlayHeader?: boolean;
+    /**
+     * @deprecated Ignoré — la navbar n’affiche plus de titre d’écran.
+     * Conservé pour compatibilité des configs CMS existantes.
+     */
     overlayTitle?: string;
+    /** Override optionnel ; sinon config du layout via `HeaderConfigProvider`. */
+    headerConfig?: AppHeaderConfig | null;
 };
 
 const CATEGORIES = Object.keys(LOCATION_CATEGORY_META) as LocationCategory[];
@@ -168,17 +175,28 @@ export function LocationsMapShell({
     fullScreen = false,
     showFilters = true,
     overlayHeader = false,
-    overlayTitle = "Carte",
+    headerConfig: headerConfigProp,
     MapCanvas,
 }: LocationsMapShellProps): ReactNode {
     const { theme } = useTheme();
     const t = resolveTheme(theme);
     const themedStyles = createThemedStyles(theme);
+    const layoutHeaderConfig = useHeaderConfig();
     const { locations, isLoading, error, center } = useLocations();
     const [filters, setFilters] = useState<Set<LocationCategory>>(new Set());
     const [selected, setSelected] = useState<MapLocation | null>(null);
     const [filtersOpen, setFiltersOpen] = useState(false);
 
+    const overlayHeaderConfig: AppHeaderConfig = useMemo(() => {
+        const raw = headerConfigProp ?? layoutHeaderConfig;
+        if (raw?.elements?.length) {
+            return {
+                elements: raw.elements.filter((el) => el.type !== "title"),
+            };
+        }
+        return { elements: DEFAULT_HEADER_ACTIONS.map((a) => ({ ...a })) };
+    }, [headerConfigProp, layoutHeaderConfig]);
+
     const toggle = (category: LocationCategory) => {
         setFilters((prev) => {
             const next = new Set(prev);
@@ -252,9 +270,10 @@ export function LocationsMapShell({
                 {overlayHeader ? (
                     <Header
                         overlay
-                        options={{ title: overlayTitle, headerBackVisible: false }}
-                        route={{ name: overlayTitle }}
+                        options={{ headerBackVisible: false }}
+                        route={{ name: "map" }}
                         navigation={NOOP_NAV}
+                        headerConfig={overlayHeaderConfig}
                     />
                 ) : null}
 

package/src/components/page/Page.tsx

@@ -1,5 +1,12 @@
-import { PropsWithChildren, useCallback, useState, type ReactNode } from "react";
+import {
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useState,
+    type ReactNode,
+} from "react";
 import { RefreshControl, ScrollView, StyleSheet, View } from "react-native";
+import { HeaderHeightContext } from "@react-navigation/elements";
 import { useTheme } from "../../contexts/ThemeContext";
 import { useOptionalAppData } from "../../contexts/AppDataContext";
 import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
@@ -18,7 +25,8 @@ export type PageProps = PropsWithChildren & {
 };
 
 /**
- * Page shell: top safe area + optional vertical scroll.
+ * Page shell: optional vertical scroll.
+ * Top safe area only when no navigation header (avoids a double inset band).
  * No global horizontal padding — each block uses ContentInset or is full-bleed
  * (map, calendar grid). Bottom inset is handled by BottomTab when using tabs.
  */
@@ -30,7 +38,9 @@ export function Page({
     const { theme } = useTheme();
     const t = resolveTheme(theme);
     const themedStyles = createThemedStyles(theme);
-    const topInset = useSafeAreaPadding(["top"]);
+    const headerHeight = useContext(HeaderHeightContext);
+    const hasNavHeader = typeof headerHeight === "number" && headerHeight > 0;
+    const topInset = useSafeAreaPadding(hasNavHeader ? [] : ["top"]);
     const appData = useOptionalAppData();
     const [refreshing, setRefreshing] = useState(false);
 

package/src/components/push/PushTokenRegistrar.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { AppState, Platform } from "react-native";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+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).
+ * Renders nothing — mount inside LocalProvider.
+ */
+export function PushTokenRegistrar(): ReactNode {
+    const { deviceId, selectedCityId, selectedPlaceId } = useLocal();
+    const { previewMode, reportError } = useWasto();
+    const client = useWastoClient();
+    const lastRegistered = useRef<string | null>(null);
+    const inFlight = useRef(false);
+
+    useEffect(() => {
+        if (previewMode || Platform.OS === "web" || !deviceId) return;
+
+        let cancelled = false;
+
+        const tryRegister = async () => {
+            if (cancelled || inFlight.current) return;
+            const registrationKey = `${deviceId}:${selectedPlaceId ?? ""}:${selectedCityId ?? ""}`;
+            if (lastRegistered.current === registrationKey) return;
+
+            inFlight.current = true;
+            try {
+                const token = await registerExpoPushToken({
+                    deviceId,
+                    registerPushToken: (id: string, pushToken: string) =>
+                        client.public.devices.registerPushToken(id, {
+                            token: pushToken,
+                            cityId: selectedCityId,
+                            wasteCollectionPlaceId: selectedPlaceId,
+                        }),
+                });
+                if (!cancelled && token) {
+                    lastRegistered.current = registrationKey;
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    reportError(error, { source: "push", deviceId });
+                }
+            } finally {
+                inFlight.current = false;
+            }
+        };
+
+        void tryRegister();
+
+        const sub = AppState.addEventListener("change", (state) => {
+            if (state === "active") {
+                lastRegistered.current = null;
+                void tryRegister();
+            }
+        });
+
+        return () => {
+            cancelled = true;
+            sub.remove();
+        };
+    }, [
+        client.public.devices,
+        deviceId,
+        previewMode,
+        reportError,
+        selectedCityId,
+        selectedPlaceId,
+    ]);
+
+    return null;
+}

package/src/contexts/HeaderConfigContext.tsx

@@ -0,0 +1,29 @@
+import {
+    createContext,
+    useContext,
+    type ReactNode,
+} from "react";
+import type { AppHeaderConfig } from "../components/header/Header";
+
+const HeaderConfigContext = createContext<AppHeaderConfig | null>(null);
+
+export type HeaderConfigProviderProps = {
+    readonly value: AppHeaderConfig | null;
+    readonly children: ReactNode;
+};
+
+export function HeaderConfigProvider({
+    value,
+    children,
+}: HeaderConfigProviderProps): ReactNode {
+    return (
+        <HeaderConfigContext.Provider value={value}>
+            {children}
+        </HeaderConfigContext.Provider>
+    );
+}
+
+/** Config header du layout parent (`null` si hors provider / non défini). */
+export function useHeaderConfig(): AppHeaderConfig | null {
+    return useContext(HeaderConfigContext);
+}

package/src/contexts/LocalContext.tsx

@@ -93,18 +93,22 @@ export function LocalProvider({
 
             let resolvedDeviceId: string | null = null;
             if (!previewMode) {
-                const newDeviceId = generateDeviceId();
+                const existingDeviceId = await AsyncStorage.getItem(keys.device);
+                const nextDeviceId = existingDeviceId || generateDeviceId();
                 await client.public.analytics.track({
-                    id: newDeviceId,
+                    id: nextDeviceId,
                     cityId: cityId,
+                    wasteCollectionPlaceId: placeId,
                     platform: Platform.OS,
                     osVersion: null,
                     appVersion: null,
                     deviceModel: null,
                 });
-                await AsyncStorage.setItem(keys.device, newDeviceId);
-                setDeviceId(newDeviceId);
-                resolvedDeviceId = newDeviceId;
+                if (!existingDeviceId) {
+                    await AsyncStorage.setItem(keys.device, nextDeviceId);
+                }
+                setDeviceId(nextDeviceId);
+                resolvedDeviceId = nextDeviceId;
             } else {
                 // Studio preview: never create analytics devices / persist device id.
                 setDeviceId(null);
@@ -190,6 +194,29 @@ export function LocalProvider({
         void loadLocalData();
     }, [keys, previewMode]);
 
+    useEffect(() => {
+        if (previewMode || !deviceId || !selectedCityId) return;
+        void client.public.analytics
+            .track({
+                id: deviceId,
+                cityId: selectedCityId,
+                wasteCollectionPlaceId: selectedPlaceId,
+                platform: Platform.OS,
+                osVersion: null,
+                appVersion: null,
+                deviceModel: null,
+            })
+            .catch(() => {
+                // Heartbeat best-effort: the sector is already stored locally.
+            });
+    }, [
+        client.public.analytics,
+        deviceId,
+        previewMode,
+        selectedCityId,
+        selectedPlaceId,
+    ]);
+
     return (
         <LocalContext
             value={{

package/src/contexts/WastoContext.tsx

@@ -15,6 +15,7 @@ import { ChallengesProvider } from "./ChallengesContext";
 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 { OptionalSafeAreaProvider } from "../components/safe-area/OptionalSafeAreaProvider";
 import {
     initWastoSentry,
@@ -104,6 +105,7 @@ export function WastoProvider(props: WastoProviderProps): ReactNode {
         <WastoContext value={value}>
             <OptionalSafeAreaProvider>
                 <LocalProvider previewMode={previewMode}>
+                    <PushTokenRegistrar />
                     <ChallengesProvider>
                         <AnnouncementsProvider apiUrl={apiUrl}>
                             <ThemeProvider theme={props.theme}>

package/src/helpers/nextCollection.ts

@@ -23,7 +23,7 @@ export type WasteCollectionPlace = {
         /** Ex: "Lundi", "Mardi", ... (mapping lundi=0 … dimanche=6) */
         name: string;
         wasteTypeId: string;
-        biweekly?: boolean;
+        everyWeeks?: number;
         startDate?: string;
     }>;
     /** Périodes d’exception (pas de collecte) */
@@ -90,13 +90,16 @@ export function getCollectionsForDay(
         });
         if (hasException) continue;
 
-        if (day.biweekly && day.startDate) {
+        if (day.startDate) {
             const start = new Date(day.startDate);
+            start.setHours(0, 0, 0, 0);
+            const everyWeeks = Math.max(1, Number(day.everyWeeks) || 1);
             const diffDays = Math.floor(
                 (targetDate.getTime() - start.getTime()) / (1000 * 60 * 60 * 24),
             );
             const weeks = Math.floor(diffDays / 7);
-            if (weeks < 0 || weeks % 2 !== 0) continue;
+            if (weeks < 0) continue;
+            if (everyWeeks > 1 && weeks % everyWeeks !== 0) continue;
         }
 
         const wt = wasteTypes.find((w) => w.id === day.wasteTypeId);

package/src/hooks/useCollectionCalendar.ts

@@ -31,7 +31,7 @@ export type CollectionScheduleEntry = {
     dayOfWeek: number; // lundi=0 ... dimanche=6
     wasteTypeId: string;
     color: string;
-    biweekly?: boolean;
+    everyWeeks?: number;
     startDate?: string;
 };
 
@@ -255,7 +255,7 @@ function buildSchedule(
     const rawDays = (selected.collectionDays || []) as Array<{
         name: string;
         wasteTypeId: string;
-        biweekly?: boolean;
+        everyWeeks?: number;
         startDate?: string;
     }>;
 
@@ -268,7 +268,7 @@ function buildSchedule(
             dayOfWeek: dayIndex,
             wasteTypeId: day.wasteTypeId,
             color: typeof color === "string" && color.trim().length > 0 ? color : "#7C7C7C",
-            biweekly: day.biweekly,
+            everyWeeks: Math.max(1, Number(day.everyWeeks) || 1),
             startDate: day.startDate,
         });
     }
@@ -293,14 +293,13 @@ function computeWasteTypesForDay(
 
     const wasteTypes: WasteTypeInfoForDay[] = [];
     for (const s of daySchedules) {
-        if (s.biweekly && s.startDate) {
+        const everyWeeks = Math.max(1, Number(s.everyWeeks) || 1);
+        if (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 });
+            if (weeksSinceStart < 0) continue;
+            if (everyWeeks > 1 && weeksSinceStart % everyWeeks !== 0) continue;
         }
+        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.

package/src/index.ts

@@ -63,6 +63,7 @@ export {
 } from "./components/title/Title"
 export {
     Header,
+    DEFAULT_HEADER_ACTIONS,
     type HeaderProps,
     type AppHeaderConfig,
     type AppHeaderElement,
@@ -98,6 +99,12 @@ export {
     type WastoContextType,
 } from "./contexts/WastoContext"
 
+export {
+    HeaderConfigProvider,
+    useHeaderConfig,
+    type HeaderConfigProviderProps,
+} from "./contexts/HeaderConfigContext"
+
 export {
     useAppData,
     useOptionalAppData,
@@ -114,6 +121,11 @@ export {
     type WastoErrorContext,
 } from "./sentry/initSentry"
 
+export {
+    registerExpoPushToken,
+    type RegisterExpoPushTokenOptions,
+} from "./push/registerExpoPushToken"
+
 export { useWastoClient } from "./hooks/useWastoClient"
 
 export type {