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.
• 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

1. renders the app title
2. renders all required fields in step 1
3. shows validation errors in step 1
4. goes to step 2 after submitting step 1 when onlie event is false
5. shows validation errors in step 2
6. shows US postal code format error in step 2
7. goes directly to step 3 when event is online
8. goes to step 3 after completing step 2
9. 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