# Event Creation Wizard

> Implement a multi-step form (3 steps) for event creation, with Zod validation, conditional navigation, and persistent form values between steps.

- Difficulty: intermediate
- Tags: useState, useEffect, useActionState, forms, react 19
- Estimated time: 60 minutes
- Tests: 15
- Requires subscription: yes

## Overview

Implement a multi-step form (3 steps) for event creation, with Zod validation, conditional navigation, and persistent form values between steps.


## Requirements

- Turn the provided static UI into a working multi-step wizard (3 steps).
- Only the **active step** should be visible.
- Persist user input when navigating Back/Next (do not clear `values` when going back).
- Each step uses its **own form** and **its own action** (one action per step).
- Use the provided **Zod schemas** for validation (`Event`, `Location`, `DateAndSettings`).
- Use the provided **`ActionState<T>` type** and the helper `createStepAction<T>` to manage form state, errors, and data.
- Actions return `{ ok, errors, values, data? }`.
- Show a success message (`data-testid="success-message"`) when the last step is successfully submitted. The success message must be its **own view**, with no form inputs or buttons rendered.
- Button labels:
  - `Next` on steps 1 and 2.
  - `Finish` on step 3.
  - `Back` on steps 2 and 3.
- Show a pending state (`Submitting...`) on the action button while the current step's action is processing.
- Navigation logic:
  - Step 1 → Step 2 if `isOnline` is false, otherwise Step 3.
  - Step 2 → Step 3.
  - Step 3 → Success.
- Show validation errors under each input with appropriate `aria` attributes and `data-testid`.


## Notes

- **Tests expect specific `data-testid` strings** for error messages and buttons; keep them unchanged.
- `FormData.get()` returns `string | File | null`; cast safely:
  - `const name = formData.get("name")?.toString() ?? ""`
  - For checkbox: `const isOnline = formData.get("isOnline") === "on"`.


## Tests

01. renders the app title
02. renders all required fields in step 1
03. shows validation errors in step 1
04. goes to step 2 after submitting step 1 when onlie event is false
05. shows validation errors in step 2
06. shows US postal code format error in step 2
07. goes directly to step 3 when event is online
08. goes to step 3 after completing step 2
09. shows success message after completing step 3
10. shows validation errors in step 3
11. returns to step 1 when going back from step 3 for online events
12. returns to step 2 when going back from step 3 for offline events
13. shows the Finish button label on step 3
14. shows a submitting state while a step is processing
15. renders the success view without form inputs or buttons