@wasto/cms-components 1.5.10

package/src/components/select-street-modal/SelectStreetModal.tsx

@@ -0,0 +1,475 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    KeyboardAvoidingView,
+    Modal,
+    Platform,
+    Pressable,
+    StyleSheet,
+    Text,
+    TextInput,
+    View,
+} from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { Check, MapPin, Search, X } from "lucide-react-native";
+import type { CalendarPdfSector, StreetSectorMatch } from "@wasto/sdk";
+import { useLocal } from "../../contexts/LocalContext";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { hapticLight, hapticSelection } from "../../helpers/haptics";
+import { Button } from "../button/Button";
+
+type Step = "search" | "pickSector" | "confirm";
+
+type PendingSelection = {
+    street: StreetSectorMatch;
+    sector: CalendarPdfSector;
+};
+
+export default function SelectStreetModal(): ReactNode {
+    const { hasPlaceSelected, registerDevice, isLoading } = useLocal();
+    const { cityGroupId } = useWasto();
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const client = useWastoClient();
+    const insets = useSafeAreaPadding(["top", "bottom"]);
+    const inputRef = useRef<TextInput>(null);
+
+    const [query, setQuery] = useState("");
+    const [results, setResults] = useState<StreetSectorMatch[]>([]);
+    const [searching, setSearching] = useState(false);
+    const [selectedStreet, setSelectedStreet] = useState<StreetSectorMatch | null>(null);
+    const [pending, setPending] = useState<PendingSelection | null>(null);
+    const [step, setStep] = useState<Step>("search");
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (hasPlaceSelected) return;
+        const timer = setTimeout(() => inputRef.current?.focus(), 350);
+        return () => clearTimeout(timer);
+    }, [hasPlaceSelected, step]);
+
+    useEffect(() => {
+        if (hasPlaceSelected) return;
+        const trimmed = query.trim();
+        if (trimmed.length < 2 || !cityGroupId) {
+            setResults([]);
+            setSearching(false);
+            return;
+        }
+
+        setSearching(true);
+        const handle = setTimeout(async () => {
+            try {
+                setError(null);
+                const res = await client.public.cityGroups.searchStreetSectors(cityGroupId, {
+                    q: trimmed,
+                });
+                setResults(res.data ?? []);
+            } catch (err) {
+                setError(
+                    err instanceof Error ? err.message : "Impossible de rechercher cette rue",
+                );
+                setResults([]);
+            } finally {
+                setSearching(false);
+            }
+        }, 300);
+
+        return () => clearTimeout(handle);
+    }, [cityGroupId, client.public.cityGroups, hasPlaceSelected, query]);
+
+    const resetToSearch = useCallback(() => {
+        setStep("search");
+        setSelectedStreet(null);
+        setPending(null);
+        setTimeout(() => inputRef.current?.focus(), 100);
+    }, []);
+
+    const onSelectStreet = async (street: StreetSectorMatch) => {
+        await hapticSelection();
+        setSelectedStreet(street);
+        setError(null);
+        if ((street.sectors ?? []).length === 0) {
+            setError("Aucun secteur de collecte trouvé pour cette rue.");
+        }
+    };
+
+    const onContinueFromList = async () => {
+        if (!selectedStreet) return;
+        const withSectors = (selectedStreet.sectors ?? []).filter(Boolean);
+        if (withSectors.length === 0) {
+            setError("Aucun secteur de collecte trouvé pour cette rue.");
+            return;
+        }
+        await hapticLight();
+        if (withSectors.length === 1) {
+            setPending({ street: selectedStreet, sector: withSectors[0]! });
+            setStep("confirm");
+            return;
+        }
+        setStep("pickSector");
+    };
+
+    const onSelectSector = async (sector: CalendarPdfSector) => {
+        if (!selectedStreet) return;
+        await hapticSelection();
+        setPending({ street: selectedStreet, sector });
+        setStep("confirm");
+    };
+
+    const onConfirm = async () => {
+        if (!pending) return;
+        await hapticLight();
+        await registerDevice(
+            pending.sector.cityId || pending.street.cityId,
+            pending.sector.id,
+            {
+                cityName: pending.sector.cityName || pending.street.cityName,
+                streetName: pending.street.streetName,
+                sectorName: pending.sector.name,
+            },
+        );
+    };
+
+    const showEmptyHint = query.trim().length < 2 && step === "search";
+    const showResults = step === "search" && query.trim().length >= 2;
+
+    return (
+        <Modal visible={!hasPlaceSelected} animationType="fade">
+            <KeyboardAvoidingView
+                style={[styles.root, { backgroundColor: theme.colors.background }, insets]}
+                behavior={Platform.OS === "ios" ? "padding" : undefined}
+            >
+                {step === "confirm" && pending ? (
+                    <Animated.View entering={FadeIn.duration(220)} exiting={FadeOut.duration(160)} style={styles.confirmWrap}>
+                        <View style={styles.confirmCenter}>
+                            <Text style={[styles.confirmLabel, { color: theme.colors.onBackground }]}>
+                                Votre zone est :
+                            </Text>
+                            <Text style={[styles.confirmZone, { color: theme.colors.onBackground }]}>
+                                “{pending.sector.name}” à {pending.sector.cityName || pending.street.cityName}
+                            </Text>
+                        </View>
+                        <View style={styles.confirmActions}>
+                            <Button
+                                onPress={onConfirm}
+                                loading={isLoading}
+                                style={[styles.confirmPrimaryBtn, { borderRadius: t.radii.lg }]}
+                            >
+                                Continuer
+                            </Button>
+                            <Pressable onPress={resetToSearch} hitSlop={8}>
+                                <Text style={[styles.link, { color: theme.colors.primary }]}>
+                                    Choisir une autre rue
+                                </Text>
+                            </Pressable>
+                        </View>
+                    </Animated.View>
+                ) : (
+                    <Animated.View entering={FadeIn.duration(220)} style={styles.searchWrap}>
+                        <View
+                            style={[
+                                styles.searchBar,
+                                {
+                                    backgroundColor: theme.colors.surface,
+                                    borderColor: theme.colors.border,
+                                    borderRadius: t.radii.lg,
+                                },
+                            ]}
+                        >
+                            <Search size={18} color={t.colors.muted} />
+                            <TextInput
+                                ref={inputRef}
+                                value={query}
+                                onChangeText={setQuery}
+                                placeholder="Rue de Paris, Saint Denis"
+                                placeholderTextColor={t.colors.muted}
+                                style={[styles.input, { color: theme.colors.onSurface }]}
+                                autoFocus
+                                returnKeyType="search"
+                                autoCorrect={false}
+                                autoCapitalize="words"
+                            />
+                            {query.length > 0 ? (
+                                <Pressable
+                                    onPress={() => {
+                                        setQuery("");
+                                        setSelectedStreet(null);
+                                        inputRef.current?.focus();
+                                    }}
+                                    hitSlop={8}
+                                >
+                                    <X size={16} color={t.colors.muted} />
+                                </Pressable>
+                            ) : null}
+                        </View>
+
+                        {!cityGroupId ? (
+                            <Text style={[styles.error, { color: theme.colors.error }]}>
+                                Configuration manquante : cityGroupId requis pour la recherche de rues.
+                            </Text>
+                        ) : null}
+
+                        {showEmptyHint ? (
+                            <View style={styles.hint}>
+                                <Text style={[styles.hintTitle, { color: theme.colors.onBackground }]}>
+                                    Où habitez-vous ?
+                                </Text>
+                                <Text style={[styles.hintSub, { color: t.colors.muted }]}>
+                                    Recherchez le nom de votre rue afin de définir votre secteur de collecte
+                                </Text>
+                            </View>
+                        ) : null}
+
+                        {step === "pickSector" && selectedStreet ? (
+                            <FlatList
+                                data={selectedStreet.sectors}
+                                keyExtractor={(item) => item.id}
+                                contentContainerStyle={styles.listContent}
+                                keyboardShouldPersistTaps="handled"
+                                ListHeaderComponent={
+                                    <Text style={[styles.sectionTitle, { color: t.colors.muted }]}>
+                                        Choisissez votre secteur
+                                    </Text>
+                                }
+                                renderItem={({ item }) => (
+                                    <Pressable
+                                        onPress={() => onSelectSector(item)}
+                                        style={[
+                                            styles.row,
+                                            { borderBottomColor: theme.colors.border },
+                                        ]}
+                                    >
+                                        <View style={[styles.pin, { backgroundColor: theme.colors.border }]}>
+                                            <MapPin size={16} color={t.colors.muted} />
+                                        </View>
+                                        <View style={styles.rowText}>
+                                            <Text style={[styles.rowTitle, { color: theme.colors.onSurface }]}>
+                                                {item.name}
+                                            </Text>
+                                            <Text style={[styles.rowSub, { color: t.colors.muted }]}>
+                                                {item.cityName}
+                                            </Text>
+                                        </View>
+                                    </Pressable>
+                                )}
+                            />
+                        ) : null}
+
+                        {showResults ? (
+                            <>
+                                {searching ? (
+                                    <ActivityIndicator
+                                        color={theme.colors.primary}
+                                        style={{ marginTop: 16 }}
+                                    />
+                                ) : null}
+                                {error ? (
+                                    <Text style={[styles.error, { color: theme.colors.error }]}>{error}</Text>
+                                ) : null}
+                                <FlatList
+                                    data={results}
+                                    keyExtractor={(item) => item.streetId}
+                                    keyboardShouldPersistTaps="handled"
+                                    contentContainerStyle={styles.listContent}
+                                    ListEmptyComponent={
+                                        !searching ? (
+                                            <Text style={[styles.empty, { color: t.colors.muted }]}>
+                                                Aucune rue trouvée
+                                            </Text>
+                                        ) : null
+                                    }
+                                    renderItem={({ item }) => {
+                                        const selected = selectedStreet?.streetId === item.streetId;
+                                        return (
+                                            <Pressable
+                                                onPress={() => onSelectStreet(item)}
+                                                style={[
+                                                    styles.row,
+                                                    {
+                                                        borderBottomColor: theme.colors.border,
+                                                        backgroundColor: selected
+                                                            ? theme.colors.border
+                                                            : "transparent",
+                                                    },
+                                                ]}
+                                            >
+                                                <View
+                                                    style={[
+                                                        styles.pin,
+                                                        { backgroundColor: theme.colors.border },
+                                                    ]}
+                                                >
+                                                    <MapPin size={16} color={t.colors.muted} />
+                                                </View>
+                                                <View style={styles.rowText}>
+                                                    <Text
+                                                        style={[
+                                                            styles.rowTitle,
+                                                            { color: theme.colors.onSurface },
+                                                        ]}
+                                                    >
+                                                        {item.streetName}
+                                                    </Text>
+                                                    <Text style={[styles.rowSub, { color: t.colors.muted }]}>
+                                                        {item.cityName}
+                                                    </Text>
+                                                </View>
+                                                {selected ? (
+                                                    <Check size={18} color={theme.colors.onSurface} />
+                                                ) : null}
+                                            </Pressable>
+                                        );
+                                    }}
+                                />
+                                {selectedStreet ? (
+                                    <Button
+                                        onPress={onContinueFromList}
+                                        style={[styles.primaryBtn, { borderRadius: t.radii.lg }]}
+                                    >
+                                        Continuer
+                                    </Button>
+                                ) : null}
+                            </>
+                        ) : null}
+                    </Animated.View>
+                )}
+            </KeyboardAvoidingView>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 8,
+    },
+    searchWrap: {
+        flex: 1,
+        gap: 12,
+    },
+    searchBar: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingHorizontal: 14,
+        height: 48,
+        borderWidth: 1,
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        paddingVertical: 0,
+    },
+    hint: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 24,
+        gap: 10,
+        marginBottom: 80,
+    },
+    hintTitle: {
+        fontSize: 22,
+        fontWeight: "800",
+        textAlign: "center",
+    },
+    hintSub: {
+        fontSize: 15,
+        textAlign: "center",
+        lineHeight: 22,
+    },
+    listContent: {
+        paddingBottom: 16,
+    },
+    sectionTitle: {
+        fontSize: 13,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        marginBottom: 8,
+        marginTop: 4,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        paddingVertical: 12,
+        paddingHorizontal: 8,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    pin: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    rowText: {
+        flex: 1,
+        gap: 2,
+    },
+    rowTitle: {
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    rowSub: {
+        fontSize: 13,
+    },
+    empty: {
+        textAlign: "center",
+        marginTop: 24,
+    },
+    error: {
+        marginTop: 8,
+        fontSize: 13,
+    },
+    primaryBtn: {
+        height: 52,
+        marginBottom: 8,
+    },
+    confirmWrap: {
+        flex: 1,
+        justifyContent: "space-between",
+        paddingBottom: 24,
+    },
+    confirmCenter: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 8,
+        paddingHorizontal: 24,
+    },
+    confirmLabel: {
+        fontSize: 20,
+        fontWeight: "800",
+        textAlign: "center",
+    },
+    confirmZone: {
+        fontSize: 22,
+        fontWeight: "800",
+        textAlign: "center",
+    },
+    confirmActions: {
+        gap: 16,
+        alignItems: "stretch",
+        width: "100%",
+    },
+    confirmPrimaryBtn: {
+        height: 52,
+        width: "100%",
+        alignSelf: "stretch",
+    },
+    link: {
+        fontSize: 15,
+        fontWeight: "700",
+        paddingVertical: 4,
+        textAlign: "center",
+        alignSelf: "center",
+    },
+});

package/src/components/title/Title.tsx

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+import { StyleProp, StyleSheet, Text, TextStyle, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+
+export type TitleLevel = "1" | "2" | "3";
+
+export type TextAlignHorizontal = "left" | "center" | "right";
+export type TextAlignVertical = "top" | "middle" | "bottom";
+
+export type TitleProps = {
+    text: string;
+    level: TitleLevel;
+    style?: StyleProp<TextStyle>;
+    numberOfLines?: number;
+    alignHorizontal?: TextAlignHorizontal;
+    alignVertical?: TextAlignVertical;
+};
+
+function justifyForVertical(align: TextAlignVertical | undefined): "flex-start" | "center" | "flex-end" {
+    if (align === "middle") return "center";
+    if (align === "bottom") return "flex-end";
+    return "flex-start";
+}
+
+function textAlignFor(align: TextAlignHorizontal | undefined): "left" | "center" | "right" {
+    if (align === "center" || align === "right") return align;
+    return "left";
+}
+
+export function Title({
+    text,
+    level,
+    style,
+    numberOfLines,
+    alignHorizontal,
+    alignVertical,
+}: TitleProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const levelStyles = levelsStyles[level];
+    const textAlign = textAlignFor(alignHorizontal);
+
+    const content = (
+        <Text
+            style={[styles.text, levelStyles.text, themedStyles.text, { textAlign }, style]}
+            numberOfLines={numberOfLines}
+        >
+            {text}
+        </Text>
+    );
+
+    if (!alignVertical || alignVertical === "top") {
+        return content;
+    }
+
+    return (
+        <View style={[styles.alignWrap, { justifyContent: justifyForVertical(alignVertical) }]}>
+            {content}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) => StyleSheet.create({
+    text: {
+        color: theme.colors.onBackground,
+    }
+});
+
+const levelsStyles: Record<TitleLevel, { text: TextStyle }> = {
+    "1": StyleSheet.create({
+        text: {
+            fontSize: 24,
+            fontWeight: "700",
+            letterSpacing: -0.3,
+        },
+    }),
+    "2": StyleSheet.create({
+        text: {
+            fontSize: 20,
+            fontWeight: "600",
+            letterSpacing: -0.2,
+        },
+    }),
+    "3": StyleSheet.create({
+        text: {
+            fontSize: 16,
+            fontWeight: "600",
+            letterSpacing: -0.1,
+        },
+    }),
+};
+
+const styles = StyleSheet.create({
+    text: {},
+    alignWrap: {
+        minHeight: 24,
+        width: "100%",
+    },
+});