[UI/UX] Create Multi-Step Device Listing Wizard (Desktop & Mobile)

[Rampop01]

Issue #65

[UI/UX] Create Multi-Step Device Listing Wizard (Desktop & Mobile)

🟡 Priority: High
Difficulty: Hard
Estimated Effort: 4 days
Relevant Files: src/app/list-device/page.tsx, src/components/listing/ListingWizard.tsx, src/components/listing/ImageUploader.tsx, src/components/listing/PricingStep.tsx
Labels: ui, forms, priority:high, figma

Requirements

1. Multi-Step Flow

   • Build the multi-step form flow for listing devices exactly as designed in Figma.
   • Required steps: (1) Device Category & Model, (2) Condition & Description, (3) Image Uploads, (4) Pricing in USDC, (5) Review & Submit.
   • Implement complex form state management using React Hook Form and Zod for per-step validation. The 'Next' button must be disabled until the current step is valid.
   • Build the drag-and-drop image upload interface with progress bars and file size limit enforcement, integrated with S3 presigned URLs.

2. Screenshot Requirement

   • Capture and commit screenshots of each of the 5 wizard steps on Desktop.
   • Include a Mobile screenshot of at least Step 3 (Image Upload) showing the full-screen mobile wizard experience.
   • Place screenshots in src/components/listing/screenshots/.

3. Testing Requirements

   • Unit test: Assert that the 'Next' button is disabled when required fields (e.g., device model) are empty, and enabled once a valid value is entered.
   • Accessibility audit: Ensure the wizard can be navigated entirely via keyboard and focus is trapped within the modal while open.

---