@wasto/cms-components 1.5.18 → 1.5.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wasto/cms-components",
-  "version": "1.5.18",
+  "version": "1.5.19",
   "description": "Wast'O CMS React Native components",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -92,7 +92,7 @@
     "react-native-reanimated": "~4.1.1",
     "tsup": "^8.5.1",
     "typescript": "^6.0.2",
-    "@wasto/sdk": "1.0.5"
+    "@wasto/sdk": "1.0.6"
   },
   "keywords": [],
   "author": "",

package/src/components/announcement-modal/AnnouncementModal.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Image, Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import { X } from "lucide-react-native";
 import { useAnnouncements } from "../../contexts/AnnouncementsContext";
 import { useTheme } from "../../contexts/ThemeContext";
@@ -9,6 +9,7 @@ import { getContrastColor } from "../../helpers/getContrastColor";
 import { Button } from "../button/Button";
 import { hapticLight } from "../../helpers/haptics";
 import { SPACE } from "../../helpers/layout";
+import { useOptionalAppNavigation } from "../../navigation/NavigationContext";
 
 /** Oversized circle (relative to sheet width) → gentle convex arc. */
 const CIRCLE_WIDTH_PCT = "500%";
@@ -22,16 +23,25 @@ export function AnnouncementModal(): ReactNode {
     const t = resolveTheme(theme);
     const topInset = useSafeAreaPadding(["top"]);
     const bottomInset = useSafeAreaPadding(["bottom"]);
+    const navigation = useOptionalAppNavigation();
 
     const visible = forceVisible && !!announcement;
     const contrast = getContrastColor(theme.colors.primary);
     const sheetColor = theme.colors.surface;
+    const redirectHref = announcement?.redirectHref?.trim() || null;
 
     const handleDismiss = async () => {
         await hapticLight();
         await dismiss();
     };
 
+    const handleOpen = async () => {
+        if (!redirectHref) return;
+        await hapticLight();
+        navigation?.push(redirectHref);
+        await dismiss();
+    };
+
     return (
         <Modal visible={visible} animationType="slide" onRequestClose={handleDismiss}>
             <View style={[styles.root, { backgroundColor: theme.colors.primary }]}>
@@ -93,16 +103,35 @@ export function AnnouncementModal(): ReactNode {
                             bounces={false}
                             showsVerticalScrollIndicator={false}
                         >
+                            {announcement?.imageUrl ? (
+                                <Image
+                                    source={{ uri: announcement.imageUrl }}
+                                    style={styles.image}
+                                    resizeMode="cover"
+                                    accessibilityLabel="Illustration de l'annonce"
+                                />
+                            ) : null}
                             <Text style={[styles.bodyText, { color: t.colors.muted }]}>
                                 {announcement?.body}
                             </Text>
                         </ScrollView>
-                        <Button
-                            onPress={handleDismiss}
-                            style={[styles.cta, { borderRadius: t.radii.pill }]}
-                        >
-                            C'est compris !
-                        </Button>
+                        <View style={styles.actions}>
+                            {redirectHref ? (
+                                <Button
+                                    onPress={handleOpen}
+                                    style={[styles.cta, { borderRadius: t.radii.pill }]}
+                                >
+                                    Ouvrir
+                                </Button>
+                            ) : null}
+                            <Button
+                                onPress={handleDismiss}
+                                variant={redirectHref ? "outline" : "primary"}
+                                style={[styles.cta, { borderRadius: t.radii.pill }]}
+                            >
+                                C'est compris !
+                            </Button>
+                        </View>
                     </View>
                 </View>
             </View>
@@ -172,10 +201,20 @@ const styles = StyleSheet.create({
     bodyScrollContent: {
         paddingBottom: 8,
     },
+    image: {
+        width: "100%",
+        aspectRatio: 16 / 9,
+        borderRadius: 12,
+        marginBottom: 16,
+    },
     bodyText: {
         fontSize: 16,
         lineHeight: 24,
     },
+    actions: {
+        gap: 12,
+        alignSelf: "stretch",
+    },
     cta: {
         height: 52,
         alignSelf: "stretch",

package/src/components/collection-calendar/CollectionCalendar.tsx

@@ -1,6 +1,10 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
-import { useCollectionCalendar, type WasteTypeInfoForDay } from "../../hooks/useCollectionCalendar";
-import { StyleSheet, Text, View } from "react-native";
+import {
+    useCollectionCalendar,
+    type CalendarDayCell,
+    type WasteTypeInfoForDay,
+} from "../../hooks/useCollectionCalendar";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { NavButton } from "../nav-button/NavButton";
 import { ContentInset } from "../content-inset/ContentInset";
@@ -11,6 +15,7 @@ import { NextCollection } from "../next-collection/NextCollection";
 import { hapticSelection } from "../../helpers/haptics";
 import { SPACE } from "../../helpers/layout";
 import { useState, type ReactNode } from "react";
+import { CollectionDayModal } from "./CollectionDayModal";
 
 export type CollectionCalendarProps = {};
 
@@ -47,6 +52,7 @@ export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
         weekDays,
         weeks,
         monthLabel,
+        wasteTypes,
         goToNextMonth,
         goToPrevMonth,
     } = useCollectionCalendar();
@@ -54,6 +60,7 @@ export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
     const t = resolveTheme(theme);
     const themedStyles = createThemedStyles(theme);
     const [monthKey, setMonthKey] = useState(0);
+    const [selectedDay, setSelectedDay] = useState<CalendarDayCell | null>(null);
     const today = new Date();
     const todayDay = today.getDate();
     const todayMonth = today.getMonth();
@@ -62,14 +69,20 @@ export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
 
     const prev = async () => {
         await hapticSelection();
+        setSelectedDay(null);
         goToPrevMonth();
         setMonthKey((k) => k - 1);
     };
     const next = async () => {
         await hapticSelection();
+        setSelectedDay(null);
         goToNextMonth();
         setMonthKey((k) => k + 1);
     };
+    const openDay = async (day: CalendarDayCell) => {
+        await hapticSelection();
+        setSelectedDay(day);
+    };
 
     return (
         <View style={styles.collectionCalendar}>
@@ -128,9 +141,19 @@ export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
                                     day.year === todayYear;
                                 const isException = day.exceptions.length > 0;
 
+                                const collectionCount = day.wasteTypesForDay.length;
+                                const dayLabel = `${day.day} ${monthLabel}${
+                                    collectionCount > 0
+                                        ? `, ${collectionCount} collecte${collectionCount > 1 ? "s" : ""}`
+                                        : ", aucune collecte"
+                                }`;
+
                                 return (
-                                    <View
+                                    <Pressable
                                         key={cellIndex}
+                                        onPress={() => void openDay(day)}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={dayLabel}
                                         style={[
                                             styles.calendarBodyCell,
                                             !day.inCurrentMonth && styles.notCurrentMonth,
@@ -169,7 +192,7 @@ export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
                                             {day.day}
                                         </Text>
                                         <WasteTypePins types={day.wasteTypesForDay} />
-                                    </View>
+                                    </Pressable>
                                 );
                             })}
                         </View>
@@ -178,6 +201,11 @@ export function CollectionCalendar({}: CollectionCalendarProps): ReactNode {
             </Animated.View>
 
             <NextCollection showCalendarCta={false} />
+            <CollectionDayModal
+                day={selectedDay}
+                wasteTypes={wasteTypes}
+                onClose={() => setSelectedDay(null)}
+            />
         </View>
     );
 }

package/src/components/collection-calendar/CollectionDayModal.tsx

@@ -0,0 +1,286 @@
+import { useState, type ReactNode } from "react";
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Image } from "expo-image";
+import { X } from "lucide-react-native";
+import type { CalendarDayCell } from "../../hooks/useCollectionCalendar";
+import type { WasteType } from "../../helpers/nextCollection";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
+import { hapticLight, hapticSelection } from "../../helpers/haptics";
+import { SPACE } from "../../helpers/layout";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { ConsignesModal } from "../consignes-modal/ConsignesModal";
+
+export type CollectionDayModalProps = {
+    day: CalendarDayCell | null;
+    wasteTypes: WasteType[];
+    onClose: () => void;
+};
+
+function formatDayTitle(year: number, month: number, day: number): string {
+    const label = new Date(year, month, day).toLocaleDateString("fr-FR", {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+    });
+    return label.charAt(0).toUpperCase() + label.slice(1);
+}
+
+export function CollectionDayModal({
+    day,
+    wasteTypes,
+    onClose,
+}: CollectionDayModalProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const { apiUrl } = useWasto();
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+    const [consignesId, setConsignesId] = useState<string | null>(null);
+
+    const close = async () => {
+        await hapticLight();
+        setConsignesId(null);
+        onClose();
+    };
+
+    const rows = (day?.wasteTypesForDay ?? []).map((info) => {
+        const wasteType = wasteTypes.find((wt) => wt.id === info.wasteTypeId);
+        return {
+            id: info.wasteTypeId,
+            name: wasteType?.name?.trim() || "Collecte",
+            color: info.color,
+            imageUrl: resolveApiAssetUrl(apiUrl, wasteType?.imageUrl),
+            isException: Boolean(info.isException),
+        };
+    });
+    const hasException = (day?.exceptions.length ?? 0) > 0;
+
+    return (
+        <>
+            <Modal
+                visible={day != null && !consignesId}
+                transparent
+                animationType="fade"
+                onRequestClose={() => {
+                    void close();
+                }}
+            >
+                <View style={styles.root}>
+                    <Pressable
+                        style={styles.backdrop}
+                        onPress={() => {
+                            void close();
+                        }}
+                        accessibilityLabel="Fermer le détail du jour"
+                    />
+                    <View
+                        style={[
+                            styles.sheet,
+                            cardStyle(theme),
+                            { borderRadius: t.radii.lg, backgroundColor: theme.colors.surface },
+                            bottomInset,
+                        ]}
+                    >
+                        <View style={styles.head}>
+                            <View style={styles.headText}>
+                                <Text style={[styles.eyebrow, { color: t.colors.muted }]}>
+                                    COLLECTE
+                                </Text>
+                                <Text style={[styles.title, { color: theme.colors.onSurface }]}>
+                                    {day
+                                        ? formatDayTitle(day.year, day.month, day.day)
+                                        : ""}
+                                </Text>
+                            </View>
+                            <Pressable
+                                onPress={() => {
+                                    void close();
+                                }}
+                                style={[
+                                    styles.closeBtn,
+                                    {
+                                        backgroundColor: theme.colors.background,
+                                        borderRadius: t.radii.pill,
+                                    },
+                                ]}
+                                accessibilityRole="button"
+                                accessibilityLabel="Fermer"
+                            >
+                                <X size={18} color={theme.colors.onSurface} />
+                            </Pressable>
+                        </View>
+
+                        {hasException ? (
+                            <Text style={[styles.exception, { color: theme.colors.error }]}>
+                                Une exception de collecte s’applique à cette date.
+                            </Text>
+                        ) : null}
+
+                        {rows.length === 0 ? (
+                            <Text style={[styles.empty, { color: t.colors.muted }]}>
+                                Aucune collecte prévue ce jour.
+                            </Text>
+                        ) : (
+                            <ScrollView
+                                style={styles.list}
+                                contentContainerStyle={styles.listContent}
+                                bounces={false}
+                            >
+                                {rows.map((row) => (
+                                    <Pressable
+                                        key={row.id}
+                                        onPress={() => {
+                                            void (async () => {
+                                                await hapticSelection();
+                                                setConsignesId(row.id);
+                                            })();
+                                        }}
+                                        style={[
+                                            styles.row,
+                                            {
+                                                backgroundColor: theme.colors.background,
+                                                borderRadius: t.radii.md,
+                                            },
+                                        ]}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={row.name}
+                                    >
+                                        {row.imageUrl ? (
+                                            <Image
+                                                source={row.imageUrl}
+                                                style={styles.thumb}
+                                                contentFit="contain"
+                                            />
+                                        ) : (
+                                            <View
+                                                style={[
+                                                    styles.swatch,
+                                                    { backgroundColor: row.color },
+                                                ]}
+                                            />
+                                        )}
+                                        <View style={styles.rowText}>
+                                            <Text
+                                                style={[
+                                                    styles.rowTitle,
+                                                    { color: theme.colors.onSurface },
+                                                ]}
+                                            >
+                                                {row.name}
+                                            </Text>
+                                            <Text style={[styles.rowHint, { color: t.colors.muted }]}>
+                                                {row.isException
+                                                    ? "Reprise après exception"
+                                                    : "Voir les consignes"}
+                                            </Text>
+                                        </View>
+                                        <View
+                                            style={[styles.pin, { backgroundColor: row.color }]}
+                                        />
+                                    </Pressable>
+                                ))}
+                            </ScrollView>
+                        )}
+                    </View>
+                </View>
+            </Modal>
+            <ConsignesModal
+                visible={!!consignesId}
+                wasteTypeId={consignesId ?? ""}
+                onClose={() => setConsignesId(null)}
+            />
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        justifyContent: "flex-end",
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(15, 23, 42, 0.45)",
+    },
+    sheet: {
+        marginHorizontal: SPACE.pageX,
+        marginBottom: SPACE.sectionY,
+        padding: SPACE.cardPad,
+        gap: 12,
+        maxHeight: "70%",
+    },
+    head: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 12,
+    },
+    headText: {
+        flex: 1,
+        gap: 2,
+    },
+    eyebrow: {
+        fontSize: 12,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: "700",
+    },
+    closeBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    exception: {
+        fontSize: 14,
+        fontWeight: "600",
+        lineHeight: 20,
+    },
+    empty: {
+        fontSize: 15,
+        lineHeight: 22,
+        paddingBottom: 8,
+    },
+    list: {
+        flexGrow: 0,
+    },
+    listContent: {
+        gap: 8,
+        paddingBottom: 4,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        padding: 12,
+    },
+    thumb: {
+        width: 40,
+        height: 40,
+    },
+    swatch: {
+        width: 40,
+        height: 40,
+        borderRadius: 12,
+    },
+    rowText: {
+        flex: 1,
+        gap: 2,
+    },
+    rowTitle: {
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    rowHint: {
+        fontSize: 13,
+    },
+    pin: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+    },
+});

package/src/components/header/Header.tsx

@@ -100,8 +100,18 @@ export type HeaderProps = {
      * il faut l’inset). Passer `false` seulement si le parent inset déjà.
      */
     readonly safeTop?: boolean;
+    /**
+     * Logo + titre de la collectivité. Défaut : masqué sur les écrans
+     * notifications et profil.
+     */
+    readonly showCityIdentity?: boolean;
 };
 
+function isIdentityFreeRoute(name: string): boolean {
+    const leaf = name.split("/").pop()?.toLowerCase() ?? "";
+    return leaf === "notifications" || leaf === "profile";
+}
+
 function resolveLogoUri(
     apiUrl: string,
     el: AppHeaderLogoElement,
@@ -194,6 +204,7 @@ export function Header({
     overlay = false,
     headerConfig,
     safeTop,
+    showCityIdentity,
 }: HeaderProps): ReactNode {
     const { theme } = useTheme();
     const t = resolveTheme(theme);
@@ -209,6 +220,8 @@ export function Header({
         () => options.title ?? route.name,
         [options.title, route.name],
     );
+    const showIdentity =
+        showCityIdentity ?? !isIdentityFreeRoute(route.name);
 
     /** Config explicite → navbar (logo/actions), jamais le fallback titre d’écran. */
     const hasExplicitConfig = headerConfig != null;
@@ -350,7 +363,9 @@ export function Header({
                                 </HeaderActionButton>
                             ) : null}
                             {bySlot.left.map(renderElement)}
-                            {!hasResolvableLogo ? <CityLogoFallback /> : null}
+                            {showIdentity && !hasResolvableLogo ? (
+                                <CityLogoFallback />
+                            ) : null}
                         </View>
                         <View
                             style={styles.slotCenter}
@@ -379,8 +394,12 @@ export function Header({
                                     />
                                 </HeaderActionButton>
                             ) : null}
-                            <CityLogoFallback />
-                            <Title text={screenTitle} level="1" />
+                            {showIdentity ? (
+                                <>
+                                    <CityLogoFallback />
+                                    <Title text={screenTitle} level="1" />
+                                </>
+                            ) : null}
                         </View>
                         <View style={styles.actions}>{defaultActions}</View>
                     </>

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

@@ -267,7 +267,7 @@ export function LocationsMapShell({
             </View>
 
             <View style={styles.topOverlay} pointerEvents="box-none">
-                {overlayHeader ? (
+                {overlayHeader === true ? (
                     <Header
                         overlay
                         options={{ headerBackVisible: false }}