@wasto/cms-components 1.5.11 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wasto/cms-components",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "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": "*",
@@ -51,12 +53,18 @@
     "@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
     },
@@ -69,8 +77,10 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@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",

package/src/components/header/Header.tsx

@@ -58,6 +58,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 +87,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;
 };
 
@@ -143,8 +166,13 @@ 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 bySlot = useMemo(() => {
@@ -174,11 +202,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 +283,7 @@ export function Header({
             pointerEvents="box-none"
         >
             <View style={styles.header} pointerEvents="box-none">
-                {hasCustom ? (
+                {hasExplicitConfig ? (
                     <>
                         <View style={styles.slotLeft} pointerEvents="box-none">
                             {showBack ? (

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/push/PushTokenRegistrar.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { 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.
+ * Renders nothing — mount inside LocalProvider.
+ */
+export function PushTokenRegistrar(): ReactNode {
+    const { deviceId } = useLocal();
+    const { previewMode, reportError } = useWasto();
+    const client = useWastoClient();
+    const lastRegistered = useRef<string | null>(null);
+
+    useEffect(() => {
+        if (previewMode || Platform.OS === "web" || !deviceId) return;
+        if (lastRegistered.current === deviceId) return;
+
+        let cancelled = false;
+
+        void (async () => {
+            try {
+                const token = await registerExpoPushToken({
+                    deviceId,
+                    registerPushToken: (id: string, pushToken: string) =>
+                        client.public.devices.registerPushToken(id, { token: pushToken }),
+                });
+                if (!cancelled && token) {
+                    lastRegistered.current = deviceId;
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    reportError(error, { source: "push", deviceId });
+                }
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [client.public.devices, deviceId, previewMode, reportError]);
+
+    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/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/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 {

package/src/push/registerExpoPushToken.ts

@@ -0,0 +1,133 @@
+import { Platform } from "react-native";
+
+type NotificationsModule = typeof import("expo-notifications");
+
+type ExpoConstantsLike = {
+    expoConfig?: {
+        extra?: {
+            eas?: {
+                projectId?: string;
+            };
+        };
+    } | null;
+    easConfig?: {
+        projectId?: string;
+    };
+};
+
+let notificationsModule: NotificationsModule | null | undefined;
+let constantsModule: ExpoConstantsLike | null | undefined;
+let handlerConfigured = false;
+
+function loadNotifications(): NotificationsModule | null {
+    if (notificationsModule !== undefined) return notificationsModule;
+    try {
+        // Optional peer — apps without the package still load cms-components.
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        notificationsModule = require("expo-notifications") as NotificationsModule;
+    } catch {
+        notificationsModule = null;
+    }
+    return notificationsModule;
+}
+
+function loadConstants(): ExpoConstantsLike | null {
+    if (constantsModule !== undefined) return constantsModule;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require("expo-constants") as
+            | ExpoConstantsLike
+            | { default: ExpoConstantsLike };
+        constantsModule = "default" in mod && mod.default ? mod.default : (mod as ExpoConstantsLike);
+    } catch {
+        constantsModule = null;
+    }
+    return constantsModule;
+}
+
+function resolveEasProjectId(): string | null {
+    const Constants = loadConstants();
+    const fromExtra = Constants?.expoConfig?.extra?.eas?.projectId;
+    const fromEasConfig = Constants?.easConfig?.projectId;
+    const fromEnv =
+        typeof process !== "undefined"
+            ? String(process.env.EXPO_PUBLIC_EAS_PROJECT_ID ?? "").trim()
+            : "";
+    const projectId = String(fromExtra || fromEasConfig || fromEnv || "").trim();
+    return projectId || null;
+}
+
+export type RegisterExpoPushTokenOptions = {
+    deviceId: string;
+    registerPushToken: (deviceId: string, token: string) => Promise<unknown>;
+};
+
+/**
+ * Request OS permission, fetch Expo push token, register it on the API.
+ * No-op on web, preview, missing peer, missing EAS projectId, or denied permission.
+ */
+export async function registerExpoPushToken(
+    options: RegisterExpoPushTokenOptions,
+): Promise<string | null> {
+    if (Platform.OS === "web") return null;
+
+    const deviceId = options.deviceId?.trim();
+    if (!deviceId) return null;
+
+    const Notifications = loadNotifications();
+    if (!Notifications) {
+        if (__DEV__) {
+            console.warn(
+                "[wasto] expo-notifications is not installed; push registration skipped",
+            );
+        }
+        return null;
+    }
+
+    const projectId = resolveEasProjectId();
+    if (!projectId) {
+        if (__DEV__) {
+            console.warn(
+                "[wasto] EAS projectId missing (extra.eas.projectId or EXPO_PUBLIC_EAS_PROJECT_ID); push registration skipped",
+            );
+        }
+        return null;
+    }
+
+    if (!handlerConfigured) {
+        Notifications.setNotificationHandler({
+            handleNotification: async () => ({
+                shouldShowAlert: true,
+                shouldPlaySound: true,
+                shouldSetBadge: false,
+                shouldShowBanner: true,
+                shouldShowList: true,
+            }),
+        });
+        handlerConfigured = true;
+    }
+
+    if (Platform.OS === "android") {
+        await Notifications.setNotificationChannelAsync("default", {
+            name: "default",
+            importance: Notifications.AndroidImportance.MAX,
+            vibrationPattern: [0, 250, 250, 250],
+            lightColor: "#FF231F7C",
+        });
+    }
+
+    const { status: existingStatus } = await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+    if (existingStatus !== "granted") {
+        const { status } = await Notifications.requestPermissionsAsync();
+        finalStatus = status;
+    }
+    if (finalStatus !== "granted") return null;
+
+    const push = await Notifications.getExpoPushTokenAsync({ projectId });
+    const token = push?.data?.trim();
+    if (!token) return null;
+
+    await options.registerPushToken(deviceId, token);
+    return token;
+}