142 lines
4.0 KiB
TypeScript
142 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
import { PixelAvatar } from "@/components/avatar/pixel-avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
avatarVibeOptions,
|
|
focusTopicOptions,
|
|
saveOnboardingPreferences,
|
|
} from "@/lib/profile-preferences-storage";
|
|
import { routes } from "@/lib/routes";
|
|
|
|
const questions = [
|
|
{
|
|
id: "focus",
|
|
prompt: "What habit do you most want to build first?",
|
|
options: focusTopicOptions,
|
|
},
|
|
{
|
|
id: "avatarVibe",
|
|
prompt: "Pick a starter vibe for your pet.",
|
|
options: avatarVibeOptions,
|
|
},
|
|
] as const;
|
|
|
|
export default function OnboardingQuizPage() {
|
|
const router = useRouter();
|
|
const [step, setStep] = useState(0);
|
|
const [answers, setAnswers] = useState<Record<string, string>>({});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const currentQuestion = questions[step];
|
|
const isLastStep = step === questions.length - 1;
|
|
|
|
const handleSelect = (value: string) => {
|
|
setAnswers((current) => ({
|
|
...current,
|
|
[currentQuestion.id]: value,
|
|
}));
|
|
};
|
|
|
|
const handleContinue = async () => {
|
|
if (!answers[currentQuestion.id]) {
|
|
return;
|
|
}
|
|
|
|
if (!isLastStep) {
|
|
setStep((current) => current + 1);
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
await saveOnboardingPreferences(answers.focus, answers.avatarVibe);
|
|
router.push(routes.avatar);
|
|
router.refresh();
|
|
} catch (submitError) {
|
|
setError(
|
|
submitError instanceof Error
|
|
? submitError.message
|
|
: "Could not save onboarding answers.",
|
|
);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-svh bg-background">
|
|
<main className="mx-auto flex min-h-svh max-w-lg flex-col justify-center px-5 py-10">
|
|
<div className="mb-8 flex flex-col items-center gap-4 text-center">
|
|
<PixelAvatar mood="neutral" size="md" />
|
|
<div>
|
|
<p className="text-sm uppercase tracking-[0.2em] text-muted-foreground">
|
|
Step {step + 1} of {questions.length}
|
|
</p>
|
|
<h1 className="mt-2 text-2xl font-semibold tracking-tight">
|
|
Welcome to Habit Pet
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">{currentQuestion.prompt}</CardTitle>
|
|
<CardDescription>
|
|
This helps personalize your pet and starting habits.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{currentQuestion.options.map((option) => {
|
|
const selected = answers[currentQuestion.id] === option;
|
|
|
|
return (
|
|
<button
|
|
key={option}
|
|
type="button"
|
|
onClick={() => handleSelect(option)}
|
|
className={`w-full rounded-lg border px-4 py-3 text-left text-sm transition-colors ${
|
|
selected
|
|
? "border-primary bg-primary/10"
|
|
: "hover:bg-muted"
|
|
}`}
|
|
>
|
|
<Label className="cursor-pointer">{option}</Label>
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
{error ? <p className="text-sm text-red-500">{error}</p> : null}
|
|
|
|
<Button
|
|
className="w-full"
|
|
disabled={!answers[currentQuestion.id] || isSubmitting}
|
|
onClick={handleContinue}
|
|
>
|
|
{isSubmitting
|
|
? "Saving..."
|
|
: isLastStep
|
|
? "Meet your pet"
|
|
: "Continue"}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|