Skip to content

BOOKING_FLOW_REDESIGN.md

Latest commit

 

History

History
82 lines (65 loc) · 2.62 KB

BOOKING_FLOW_REDESIGN.md

File metadata and controls

82 lines (65 loc) · 2.62 KB
Raw

Booking Flow Redesign

New Flow Structure

Based on the updated van pricing structure (basePrice150km, pricePerKmAfter150, pricePerAdditional24hr), the booking flow has been redesigned:

Old Flow (5 steps)

  1. Select Van
  2. Date & Time
  3. Your Details
  4. Payment
  5. Confirmation

New Flow (6 steps)

  1. Route & Dates - User selects pickup location, destination, and travel dates
  2. Pricing Tier - User selects category: Budget-Friendly, Premium, or Executive
  3. Van Selection - User sees available vans filtered by selected tier with calculated prices
  4. Customer Details - User enters contact information
  5. Payment - User pays via Paystack
  6. Confirmation - Booking confirmed

Key Changes

1. Route-First Approach

  • Users start by selecting pickup and destination locations
  • System calculates distance automatically using coordinates
  • Distance is used to calculate pricing for each van

2. Pricing Tier Selection

  • Three tiers: Budget-Friendly, Premium, Executive
  • Maps to van.category field
  • Filters available vans before showing selection

3. Dynamic Price Calculation

For each van, the price is calculated as:

total = van.basePrice150km
if (distanceKm > 150):
    total += (distanceKm - 150) * van.pricePerKmAfter150
if (extraDays > 0):
    total += extraDays * van.pricePerAdditional24hr

4. Van Display

  • Shows only vans matching selected pricing tier
  • Displays calculated total price for user's specific trip
  • Shows price breakdown (base + extra km + extra days)

Implementation Files

Updated Types

  • src/types/booking.types.ts - Added distanceKm, durationHours, pricingTier fields
  • src/types/van.types.ts - Already updated with new pricing fields

Components to Update

  • src/pages/BookingFlow.tsx - Main booking flow component
    • Restructure steps
    • Add pricing tier selection UI
    • Add van filtering logic
    • Update price calculation

New Components Needed

  • Pricing tier selection cards
  • Van list with price calculations
  • Distance calculator utility

Benefits

  1. User-Centric: Users know their route before selecting a van
  2. Transparent Pricing: See exact price for their specific trip
  3. Better Filtering: Only see vans in their budget range
  4. Accurate Quotes: Pricing based on actual distance and duration
  5. Flexible: Supports the new per-km and per-day pricing model

Next Steps

  1. Update BookingFlow.tsx with new step structure
  2. Create pricing tier selection UI
  3. Implement van filtering by category
  4. Add distance calculation (Google Maps Distance Matrix API)
  5. Update price display to show breakdown
  6. Test complete flow end-to-end