Multi-step Wizard

Onboarding wizard with step navigation, validation gating, and review step. AI output lost data on back navigation, had no progress indicator, no edit buttons on review, and no submit loading state. The production version fixes all six issues found in review.

AI Generated

1export function WizardLayout() {
2  const currentStep = useAppSelector((state) => state.wizard.currentStep);
3
4  return (
5    <div className="mx-auto w-full max-w-3xl px-4 py-8">
6      <Card>
7        <CardHeader>
8          <CardTitle>
9            {currentStep === 1 && "Personal Information"}
10            {currentStep === 2 && "Preferences"}
11            {currentStep === 3 && "Select a Plan"}
12            {currentStep === 4 && "Review & Submit"}
13          </CardTitle>
14        </CardHeader>
15        <CardContent>
16          {currentStep === 1 && <PersonalInfoStep />}
17          {currentStep === 2 && <PreferencesStep />}
18          {currentStep === 3 && <PlanSelectionStep />}
19          {currentStep === 4 && <ReviewStep />}
20        </CardContent>
21      </Card>
22    </div>
23  );
24}

Production

1const STEP_META = [
2  { title: "Personal Information", description: "Tell us about yourself" },
3  { title: "Preferences", description: "Help us customize your experience" },
4  { title: "Select a Plan", description: "Choose the plan that fits your needs" },
5  { title: "Review & Submit", description: "Confirm your details and submit" },
6];
7
8export function WizardLayout() {
9  const currentStep = useAppSelector((state) => state.wizard.currentStep);
10  const meta = STEP_META[currentStep - 1];
11  const title = meta?.title ?? "Step";
12  const description = meta?.description ?? "";
13
14  return (
15    <div className="mx-auto w-full max-w-3xl px-4 py-8">
16      <StepIndicator currentStep={currentStep} />
17
18      <Card>
19        <CardHeader>
20          <CardTitle>{title}</CardTitle>
21          <CardDescription>{description}</CardDescription>
22        </CardHeader>
23        <CardContent>
24          {currentStep === 1 && <PersonalInfoStep />}
25          {currentStep === 2 && <PreferencesStep />}
26          {currentStep === 3 && <PlanSelectionStep />}
27          {currentStep === 4 && <ReviewStep />}
28        </CardContent>
29      </Card>
30    </div>
31  );
32}

AI Generated

1export function WizardLayout() {
2  const currentStep = useAppSelector((state) => state.wizard.currentStep);
3
4  return (
5    <div className="mx-auto w-full max-w-3xl px-4 py-8">
6      <Card>
7        <CardHeader>
8          <CardTitle>
9            {currentStep === 1 && "Personal Information"}
10            {currentStep === 2 && "Preferences"}
11            {currentStep === 3 && "Select a Plan"}
12            {currentStep === 4 && "Review & Submit"}
13          </CardTitle>
14        </CardHeader>
15        <CardContent>
16          {currentStep === 1 && <PersonalInfoStep />}
17          {currentStep === 2 && <PreferencesStep />}
18          {currentStep === 3 && <PlanSelectionStep />}
19          {currentStep === 4 && <ReviewStep />}
20        </CardContent>
21      </Card>
22    </div>
23  );
24}

fixNo progress indicatorL1–5

The wizard has no visual indicator of the current step or total steps. Users have no context for how far they are in the flow or how many steps remain.

improvementInline title strings instead of metadata arrayL7–12

Step titles are hardcoded inline with && chains. The production version extracts a STEP_META array with titles and descriptions, making it easier to maintain and enabling the CardDescription subtitle.

fixStepIndicator renders progressL17

A dedicated StepIndicator component shows numbered circles with connecting lines. Completed steps show checkmarks and the current step is highlighted, giving users orientation within the wizard.

improvementStep metadata extracted to arrayL1–6

Titles and descriptions are stored in a STEP_META array. This centralizes step information and enables CardDescription subtitles that give users context about each step.