Vehicle & Passenger Configuration
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Vehicle & Passenger Configuration module is a core component of the Wasalny landing page's pricing system. It manages the selection of vehicle types and the number of passengers for a requested trip, ensuring that user selections remain within the physical constraints of the fleet. This configuration directly influences the final price calculation and the validation logic required before a booking can be finalized via WhatsApp.
The system is designed to be reactive, automatically suggesting or switching vehicle categories based on the passenger count to optimize the user experience. It serves as a bridge between the static fleet data and the dynamic pricing engine.
Sources: src/hooks/usePricingCalculator.ts, src/components/sections/PricingCalculator.tsx
Data Models and Fleet Specifications
The configuration is grounded in a structured data model that defines the capabilities of the available fleet. Each vehicle category is associated with specific passenger limits and localized naming.
Vehicle Categories
The system supports four distinct vehicle categories:
- Sedan (سيدان): Standard transport for small groups.
- SUV (دفع رباعي): Enhanced comfort and luggage space.
- Family Cruiser (عائلية): High-capacity vehicle for medium groups.
- Minibus (ميني باص): Large-scale transport for groups up to 13.
Sources: src/data/pricing.ts:145-171, src/types/index.ts:1-11
Fleet Constraints Table
The following table outlines the technical constraints defined in the pricing data:
| Category | Arabic Name | Min Passengers | Max Passengers |
|---|---|---|---|
sedan | سيدان | 1 | 3 |
suv | دفع رباعي | 1 | 4 |
family_cruiser | عائلية | 1 | 7 |
minibus | ميني باص | 1 | 13 |
Sources: src/data/pricing.ts:145-171
Selection Logic and State Management
The state of the vehicle and passenger configuration is managed primarily by the usePricingCalculator hook. This hook handles the synchronization between the user's input and the allowed constraints.
Smart Vehicle Switching
A key feature of the configuration logic is the "Smart Vehicle Switch." When a user increases the passenger count beyond the capacity of the currently selected vehicle, the system automatically iterates through the vehiclePricing data to find and select the first vehicle category that can accommodate the new count.
Validation Engine
The system performs real-time validation to prevent invalid booking requests. If the passengerCount exceeds the maxPassengers defined for the selected vehicleCategory, a validation error is generated and displayed to the user.
Sources: src/hooks/usePricingCalculator.ts:88-103
Component Architecture
The user interface for this module is encapsulated in the VehiclePassengerCard component, which is integrated into the larger PricingCalculator section.
Data Flow Sequence
The following diagram illustrates how the configuration state flows from the user interface through the hooks to the final pricing result.
Implementation Details
Price Calculation Impact
The selected vehicle and passenger count are critical inputs for the calculatePrice function. The pricing engine uses the vehicleCategory as a key to look up fixed rates within a RouteGroup.
| Data Element | Usage in Pricing |
|---|---|
vehicleCategory | Selects the price tier (e.g., pricing.sedan.oneWay) |
passengerCount | Used for validation and included in the WhatsApp booking summary |
isRoundTrip | Determines whether to use the oneWay or roundTrip rate for the selected vehicle |
Sources: src/utils/pricingCalculator.ts:55-75, src/data/pricing.ts:25-35
Persistence
The configuration state (category and count) is persisted in localStorage under the key wasalny_pricing_v2. This ensures that user selections remain intact even after page refreshes.
Sources: src/hooks/usePricingCalculator.ts:114-135
Conclusion
The Vehicle & Passenger Configuration system provides a robust framework for managing trip requirements. By combining strict data-driven constraints with "smart" UI logic, the system ensures that every booking request generated is technically feasible according to the Wasalny fleet specifications, while maintaining a seamless experience for the end-user.