@wasto/cms-components 1.5.10

package/src/components/challenge/ChallengesModal.tsx

@@ -0,0 +1,243 @@
+import { Dimensions, Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { ChallengeWithProgress } from "../../hooks/useChallenges";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { Play, Trophy, XIcon } from "lucide-react-native";
+import { useEffect, useState, type ReactNode } from "react";
+import { ChallengeModal } from "./ChallengeModal";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type ChallengesModalProps = {
+    visible: boolean;
+    challenges: ChallengeWithProgress[];
+    onClose: () => void;
+};
+
+function isChallengeComplete(c: ChallengeWithProgress) {
+    return !!c.progression?.badge;
+}
+
+function progressLabel(c: ChallengeWithProgress) {
+    const series = c.series ?? [];
+    if (series.length === 0) return isChallengeComplete(c) ? "1/1" : "0/1";
+    const done = series.filter((s) => s.progression).length;
+    return `${done}/${series.length}`;
+}
+
+function progressRatio(c: ChallengeWithProgress) {
+    const series = c.series ?? [];
+    if (series.length === 0) return isChallengeComplete(c) ? 1 : 0;
+    return series.filter((s) => s.progression).length / series.length;
+}
+
+export function ChallengesModal({
+    visible,
+    challenges,
+    onClose,
+}: ChallengesModalProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+    const [selectedChallengeId, setSelectedChallengeId] = useState<string | null>(null);
+
+    const selectedChallenge =
+        selectedChallengeId != null
+            ? (challenges.find((c) => c.id === selectedChallengeId) ?? null)
+            : null;
+
+    useEffect(() => {
+        if (!visible) setSelectedChallengeId(null);
+    }, [visible]);
+
+    const handleSelectChallenge = (challenge: ChallengeWithProgress) => () => {
+        setSelectedChallengeId(challenge.id);
+    };
+
+    return <>
+        <Modal
+            visible={visible}
+            animationType="slide"
+            onRequestClose={onClose}
+        >
+            {!selectedChallenge ? (
+
+                <View style={[styles.modal, themedStyles.modal]}>
+                    <View style={topInset}>
+                        <View style={styles.header}>
+                            <Title
+                                text="Challenges"
+                                level="2"
+                            />
+                            <NavButton
+                                icon={XIcon}
+                                onPress={onClose}
+                            />
+                        </View>
+                    </View>
+                    <View style={[styles.listWrap, bottomInset]}>
+                        <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                            {challenges.map((challenge) => {
+                                const done = isChallengeComplete(challenge);
+                                const ratio = progressRatio(challenge);
+                                return (
+                                    <Pressable
+                                        key={challenge.id}
+                                        style={themedStyles.challenge}
+                                        onPress={handleSelectChallenge(challenge)}
+                                    >
+                                        <View style={styles.challengeRow}>
+                                            <View style={styles.challengeMain}>
+                                                <Title text={challenge.name} level="3" />
+                                                {challenge.description ? (
+                                                    <Text numberOfLines={1}>
+                                                        {challenge.description}
+                                                    </Text>
+                                                ) : null}
+                                                <View
+                                                    style={[
+                                                        styles.track,
+                                                        {
+                                                            backgroundColor: theme.colors.border,
+                                                            borderRadius: t.radii.pill,
+                                                        },
+                                                    ]}
+                                                >
+                                                    <View
+                                                        style={[
+                                                            styles.fill,
+                                                            {
+                                                                width: `${Math.round(ratio * 100)}%`,
+                                                                backgroundColor: done
+                                                                    ? theme.colors.success
+                                                                    : theme.colors.primary,
+                                                                borderRadius: t.radii.pill,
+                                                            },
+                                                        ]}
+                                                    >
+                                                        <Text
+                                                            style={[
+                                                                styles.fillLabel,
+                                                                {
+                                                                    color: done
+                                                                        ? theme.colors.onSuccess
+                                                                        : theme.colors.onPrimary,
+                                                                },
+                                                            ]}
+                                                        >
+                                                            {progressLabel(challenge)}
+                                                        </Text>
+                                                    </View>
+                                                </View>
+                                            </View>
+                                            <View
+                                                style={[
+                                                    styles.actionBtn,
+                                                    {
+                                                        backgroundColor: done
+                                                            ? theme.colors.success
+                                                            : theme.colors.primary,
+                                                        borderRadius: t.radii.pill,
+                                                    },
+                                                ]}
+                                            >
+                                                {done ? (
+                                                    <Trophy
+                                                        size={18}
+                                                        color={theme.colors.onSuccess}
+                                                    />
+                                                ) : (
+                                                    <Play
+                                                        size={18}
+                                                        color={theme.colors.onPrimary}
+                                                        fill={theme.colors.onPrimary}
+                                                    />
+                                                )}
+                                            </View>
+                                        </View>
+                                    </Pressable>
+                                );
+                            })}
+                        </ScrollView>
+                    </View>
+                </View>
+            ) : (
+                <ChallengeModal
+                    challenge={selectedChallenge!}
+                    onClose={() => setSelectedChallengeId(null)}
+                />
+            )}
+        </Modal>
+    </>
+}
+
+const createThemedStyles = (theme: Theme) => StyleSheet.create({
+    modal: {
+        backgroundColor: theme.colors.background,
+    },
+    challenge: {
+        backgroundColor: theme.colors.surface,
+        borderRadius: theme.radii?.lg ?? theme.radius,
+        ...(theme.shadow?.soft ?? {}),
+        paddingHorizontal: SPACE.cardPad,
+    },
+});
+
+const styles = StyleSheet.create({
+    modal: {
+        height: Dimensions.get("screen").height,
+    },
+    header: {
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    listWrap: {
+        flex: 1,
+    },
+    body: {
+        padding: 16,
+        gap: 12,
+        flexGrow: 1,
+    },
+    challengeRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+        paddingVertical: 14,
+    },
+    challengeMain: {
+        flex: 1,
+        gap: 12,
+    },
+    track: {
+        height: 16,
+        overflow: "hidden",
+        justifyContent: "center",
+    },
+    fill: {
+        height: "100%",
+        minWidth: 40,
+        justifyContent: "center",
+        paddingHorizontal: 8,
+    },
+    fillLabel: {
+        fontSize: 11,
+        fontWeight: "700",
+        textAlign: "center",
+    },
+    actionBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

package/src/components/challenge/QuizModal.tsx

@@ -0,0 +1,381 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    Dimensions,
+    Pressable,
+    ScrollView,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { Image } from "expo-image";
+import { ChallengeSeriesWithProgress, useChallenges } from "../../hooks/useChallenges";
+import { useNextCollection } from "../../hooks/useNextCollection";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { Button } from "../button/Button";
+import { ChevronLeftIcon } from "lucide-react-native";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import {
+    generateQuizQuestions,
+    type QuizAnswerOption,
+} from "../../helpers/generateQuizQuestions";
+import { ResultModal } from "./ResultModal";
+
+export interface QuizModalProps {
+    serie: ChallengeSeriesWithProgress;
+    challengeId: string;
+    onClose: () => void;
+}
+
+export function QuizModal({
+    serie,
+    challengeId,
+    onClose,
+}: QuizModalProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const { deviceId } = useLocal();
+    const { refetch } = useChallenges();
+    const { city, wasteTypes, isLoading } = useNextCollection();
+
+    const client = useWastoClient();
+
+    const questions = useMemo(
+        () => generateQuizQuestions(wasteTypes, serie),
+        [wasteTypes, serie]
+    );
+
+    const [index, setIndex] = useState(0);
+    const [selected, setSelected] = useState<QuizAnswerOption | null>(null);
+    const [correct, setCorrect] = useState(0);
+    const [incorrect, setIncorrect] = useState(0);
+    const [showResults, setShowResults] = useState(false);
+    const completedRef = useRef(false);
+
+    const question = questions[index];
+
+    useEffect(() => {
+        setIndex(0);
+        setSelected(null);
+        setCorrect(0);
+        setIncorrect(0);
+        setShowResults(false);
+        completedRef.current = false;
+    }, [serie.id]);
+
+    const persistScore = async (nextCorrect: number, total: number) => {
+        if (completedRef.current || !deviceId || !challengeId || !serie.id || total === 0) return;
+        completedRef.current = true;
+        const score = Math.round((nextCorrect / total) * 100);
+        try {
+            await client.public.challenges.complete(challengeId, {
+                deviceId,
+                score,
+                seriesId: serie.id,
+            });
+            await refetch();
+        } catch (err) {
+            console.error("QuizModal: complete challenge", err);
+        }
+    };
+
+    const handleAnswer = (answer: QuizAnswerOption) => {
+        if (selected || !question) return;
+        setSelected(answer);
+        if (answer.id === question.correctOptionId) {
+            setCorrect((n) => n + 1);
+        } else {
+            setIncorrect((n) => n + 1);
+        }
+    };
+
+    const handleNext = () => {
+        if (index < questions.length - 1) {
+            setIndex((n) => n + 1);
+            setSelected(null);
+            return;
+        }
+        // Last question: `correct`/`incorrect` may still be stale if setState has not flushed.
+        let finalCorrect = correct;
+        let finalIncorrect = incorrect;
+        if (selected && question && correct + incorrect < questions.length) {
+            if (selected.id === question.correctOptionId) {
+                finalCorrect = correct + 1;
+            } else {
+                finalIncorrect = incorrect + 1;
+            }
+        }
+        setCorrect(finalCorrect);
+        setIncorrect(finalIncorrect);
+        void persistScore(finalCorrect, questions.length);
+        setShowResults(true);
+    };
+
+    const handleFinish = () => {
+        setShowResults(false);
+        onClose();
+    };
+
+    return (
+        <View style={[styles.modal, themedStyles.modal]}>
+            <View style={topInset}>
+                <View style={styles.header}>
+                    <NavButton icon={ChevronLeftIcon} onPress={onClose} />
+                    <Title text={serie.name} level="2" numberOfLines={1} />
+                    <Text style={[styles.progress, themedStyles.muted]}>
+                        {questions.length ? `${index + 1}/${questions.length}` : "0/0"}
+                    </Text>
+                </View>
+            </View>
+
+            {isLoading && questions.length === 0 ? (
+                <View style={styles.center}>
+                    <ActivityIndicator color={theme.colors.primary} />
+                    <Text style={themedStyles.muted}>Chargement du quiz…</Text>
+                </View>
+            ) : !city ? (
+                <View style={styles.center}>
+                    <Text style={themedStyles.muted}>Aucune ville sélectionnée</Text>
+                    <Button onPress={onClose} variant="ghost">Fermer</Button>
+                </View>
+            ) : questions.length === 0 ? (
+                <View style={styles.center}>
+                    <Text style={styles.emoji}>🐸</Text>
+                    <Text style={[styles.emptyText, themedStyles.text]}>
+                        Aucun quiz disponible pour cette série
+                    </Text>
+                    <Button onPress={onClose} variant="ghost">Fermer</Button>
+                </View>
+            ) : question ? (
+                <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                    {question.kind !== "ab_image" && question.imageUrl ? (
+                        <Image
+                            source={question.imageUrl}
+                            style={[styles.questionImage, themedStyles.questionImage]}
+                            contentFit="contain"
+                        />
+                    ) : question.kind !== "ab_image" ? (
+                        <View style={[styles.mascot, themedStyles.mascot]}>
+                            <Text style={styles.emoji}>{question.material ? "♻️" : "🐸"}</Text>
+                        </View>
+                    ) : null}
+
+                    {question.material ? (
+                        <Text style={[styles.material, themedStyles.muted]}>{question.material}</Text>
+                    ) : null}
+
+                    <Title text={question.question} level="3" />
+
+                    <View
+                        style={
+                            question.kind === "ab_image" ? styles.abAnswers : styles.answers
+                        }
+                    >
+                        {question.answers.map((answer) => {
+                            const isSelected = selected?.id === answer.id;
+                            const isCorrect = answer.id === question.correctOptionId;
+                            const showState = !!selected;
+                            const stateStyle = !showState
+                                ? themedStyles.answer
+                                : isCorrect
+                                    ? themedStyles.answerCorrect
+                                    : isSelected
+                                        ? themedStyles.answerWrong
+                                        : themedStyles.answer;
+
+                            if (question.kind === "ab_image" && answer.imageUrl) {
+                                return (
+                                    <Pressable
+                                        key={answer.id}
+                                        style={[styles.abAnswer, stateStyle]}
+                                        onPress={() => handleAnswer(answer)}
+                                        disabled={!!selected}
+                                    >
+                                        <Image
+                                            source={answer.imageUrl}
+                                            style={styles.abAnswerImage}
+                                            contentFit="contain"
+                                        />
+                                        <Text style={[styles.answerText, themedStyles.answerText]}>
+                                            {answer.text}
+                                        </Text>
+                                    </Pressable>
+                                );
+                            }
+
+                            return (
+                                <Pressable
+                                    key={`${answer.id}-${answer.text}`}
+                                    style={[styles.answer, stateStyle]}
+                                    onPress={() => handleAnswer(answer)}
+                                    disabled={!!selected}
+                                >
+                                    <Text style={[styles.answerText, themedStyles.answerText]}>
+                                        {answer.text}
+                                    </Text>
+                                </Pressable>
+                            );
+                        })}
+                    </View>
+
+                    {selected ? (
+                        <View style={styles.feedbackBlock}>
+                            {question.explanation ? (
+                                <Text style={[styles.explanation, themedStyles.muted]}>
+                                    {question.explanation}
+                                </Text>
+                            ) : null}
+                            <Button onPress={handleNext}>
+                                {index < questions.length - 1 ? "Suivant" : "Voir les résultats"}
+                            </Button>
+                        </View>
+                    ) : null}
+                </ScrollView>
+            ) : null}
+
+            <ResultModal
+                visible={showResults}
+                correct={correct}
+                incorrect={incorrect}
+                total={questions.length}
+                onClose={handleFinish}
+            />
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        modal: {
+            backgroundColor: theme.colors.background,
+        },
+        muted: {
+            color: theme.colors.onBackground,
+            opacity: 0.7,
+        },
+        text: {
+            color: theme.colors.onBackground,
+        },
+        questionImage: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius,
+        },
+        mascot: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius,
+        },
+        answer: {
+            backgroundColor: theme.colors.surface,
+            borderColor: theme.colors.border,
+        },
+        answerCorrect: {
+            backgroundColor: `${theme.colors.success}22`,
+            borderColor: theme.colors.success,
+        },
+        answerWrong: {
+            backgroundColor: `${theme.colors.error}22`,
+            borderColor: theme.colors.error,
+        },
+        answerText: {
+            color: theme.colors.onSurface,
+        },
+    });
+
+const styles = StyleSheet.create({
+    modal: {
+        height: Dimensions.get("screen").height,
+    },
+    header: {
+        padding: 20,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+    },
+    progress: {
+        fontSize: 15,
+        fontWeight: "600",
+        minWidth: 48,
+        textAlign: "right",
+    },
+    center: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 24,
+        gap: 16,
+    },
+    body: {
+        padding: 20,
+        gap: 16,
+        paddingBottom: 40,
+    },
+    questionImage: {
+        width: "100%",
+        height: 180,
+    },
+    mascot: {
+        width: "100%",
+        height: 140,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    emoji: {
+        fontSize: 48,
+    },
+    material: {
+        fontSize: 13,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        letterSpacing: 0.4,
+    },
+    emptyText: {
+        textAlign: "center",
+        fontSize: 16,
+    },
+    answers: {
+        gap: 10,
+    },
+    abAnswers: {
+        flexDirection: "row",
+        gap: 12,
+    },
+    feedbackBlock: {
+        gap: 12,
+    },
+    explanation: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontWeight: "500",
+    },
+    answer: {
+        padding: 16,
+        borderWidth: 1,
+        borderRadius: 16,
+    },
+    abAnswer: {
+        flex: 1,
+        padding: 10,
+        borderWidth: 1,
+        borderRadius: 16,
+        alignItems: "center",
+        gap: 8,
+    },
+    abAnswerImage: {
+        width: "100%",
+        aspectRatio: 1,
+        borderRadius: 12,
+    },
+    answerText: {
+        fontSize: 16,
+        fontWeight: "600",
+        textAlign: "center",
+    },
+});