Listings & Bookings

Overview

This section covers how users (typically hosts) create and manage listings in a multi-step form flow and how guests initiate bookings. It combines form state management, draft persistence, Supabase-auth integration, and dynamic pricing strategies.

Listing Creation Flow

The listing creation is a multi-step process that persists progress in a draft mode. It allows hosts to:

• Save listings partially
• Preview and edit before publishing
• Resume listing creation anytime

Step Breakdown

1. Basic Info: Title, category, type
2. Location: Map pin, address, timezone
3. Details: Capacity, features, alcohol policy
4. Availability: Calendar availability or opening hours
5. Pricing Strategy: LUMPSUM, PER_HOUR, CUSTOM
6. Photos: Upload to Supabase Storage
7. Review & Publish

Drafts & State Handling

Each draft listing is saved to the database (via Prisma) as the user progresses:

model Listing {
  id           String   @id @default(uuid())
  title        String?
  type         String?
  userId       String
  isPublished  Boolean  @default(false)
  ...
}

Key Concepts

• isPublished = false marks a listing as a draft
• Drafts are retrieved when a user resumes the listing process
• Uses react-hook-form with useFieldArray for dynamic sections (e.g. multiple opening hours)

Pricing Strategy Support

Each listing supports one of three pricing strategies:

Implementation

• The form schema changes dynamically based on pricingStrategy
• Utilities like calculateLumpsumPrice() and calculatePerHourPrice() are reused in both form preview and booking logic
• Real-time feedback shows guests the estimated cost before they confirm a booking

Booking Flow

Once a listing is live, guests can view the listing page and book it using a simplified form.

Booking Flow

1. Select date/time
2. Choose options (e.g. alcohol, guest count)
3. See live price preview
4. Send booking request (message + quote)
5. Host can accept → converts to confirmed booking

Booking Model

model Booking {
  id         String   @id @default(uuid())
  listingId  String
  userId     String
  status     BookingStatus
  date       DateTime?
  from       String?
  to         String?
  ...
}

• Bookings are created with a status: PENDING, CONFIRMED, REJECTED, CANCELLED
• Hosts can manage bookings from their dashboard

Integrations

• Supabase Auth: Only logged-in users can create listings or book
• Supabase Storage: Images are uploaded per listing
• Prisma: Models include listing metadata, booking requests, and relations
• Stripe (optional): Payment on booking confirmation

Validation & UX

• Forms use zod + react-hook-form for safe validation
• MultiStepForm wrapper handles progress indicators and step transitions
• Partial data is auto-saved after each step

Potential Improvements

• Listing analytics (views, conversions)
• Booking reminders & calendar sync
• Host-level availability scheduling
• Real-time booking status updates via Supabase

File References