Route & Date Selection

Relevant source files

The following files were used as context for generating this wiki page:

• src/hooks/usePricingCalculator.ts
• src/utils/pricingCalculator.ts
• src/components/sections/PricingCalculator.tsx
• src/components/sections/RoutesSection.tsx
• src/data/content.ts

Introduction

The Route & Date Selection system is a core functional module of the Wasalny landing page, responsible for capturing user trip preferences to calculate transportation costs. It allows users to define their starting point and destination, choose between travel or internal Damietta routes, and specify the schedule for their journey.

This system serves as the primary input layer for the Pricing Calculator, facilitating a seamless flow from route discovery to booking via WhatsApp. It integrates dynamic location filtering based on route types and provides real-time validation for user selections.

Sources: src/components/sections/PricingCalculator.tsx, src/hooks/usePricingCalculator.ts

Route Management Architecture

The system categorizes journeys into two primary types: "Travel" (long-distance) and "Internal" (within Damietta). This classification dictates the available locations and specific features like round-trip toggles.

Route Classification and Selection

Users select a RouteType which filters the available "From" and "To" locations. The system uses a detection logic to automatically switch the route type if the selected locations imply a specific category.

The logic ensures that "To" locations are dependent on the chosen "From" location to prevent invalid route combinations.
Sources: src/hooks/usePricingCalculator.ts:36-54, src/utils/pricingCalculator.ts:108

Key Data Structures

Field	Type	Description
routeType	RouteType	'travel' or 'internal' categories.
fromLocation	string	ID of the starting point.
toLocation	string	ID of the destination.
isRoundTrip	boolean	Toggle for return journeys (Travel only).

Sources: src/hooks/usePricingCalculator.ts:13-26, src/utils/pricingCalculator.ts:10-18

Scheduling and Temporal Logic

The scheduling module manages the tripDate and tripTime inputs. By default, the system initializes the trip date to the following day to encourage advance booking.

Date and Time Handling

The usePricingCalculator hook maintains the state for dates as ISO strings to ensure compatibility with standard HTML input elements, while converting them to Date objects for calculation logic.

• Default State: Initializes to tomorrow's date using tomorrow.toISOString().split('T')[0].
• Time Selection: Defaulted to 10:00.
• DateTime Construction: Combines date and time strings into a single Date object during the price calculation phase.

Data Flow and Persistence

The system employs React's useEffect and useMemo hooks to synchronize state and provide persistent user experiences.

State Synchronization

1. Type Reset: When a user changes the routeType, the fromLocation, toLocation, and isRoundTrip states are reset to prevent cross-type data corruption.
2. Validation: availableToLocations are recalculated whenever the fromLocation changes. If the current toLocation is no longer valid for the new origin, it is cleared.
3. Local Storage: The routeType, vehicleCategory, and passengerCount are persisted in localStorage under the key wasalny_pricing_v2.

Sources: src/hooks/usePricingCalculator.ts:38-47, src/hooks/usePricingCalculator.ts:105-121

User Interface Components

The route and date selection is implemented across several specialized UI components within the PricingCalculator section.

Component Breakdown

• RouteSelectionCard: Handles the geographic inputs (from and to locations).
• DateTimeCard: Manages the tripDate, tripTime, and isRoundTrip toggle. It conditionally hides the round-trip option for internal routes.
• PricingCalculator Section: Acts as the layout container, using useBatchReveal for entrance animations and managing the high-level routeType toggle (Travel vs. Internal).

Sources: src/components/sections/PricingCalculator.tsx:12-88

Conclusion

The Route & Date Selection system provides the foundational parameters required for Wasalny's pricing engine. By combining rigid data structures for locations with flexible scheduling and persistent state management, it ensures that users can accurately define their travel needs before proceeding to the final price breakdown and booking.

Sources: src/hooks/usePricingCalculator.ts, src/utils/pricingCalculator.ts