Pricing Calculator Overview
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Pricing Calculator is a core feature of the Wasalny landing page, designed to provide users with accurate fare estimates for transportation services in Damietta, Egypt. It allows users to select route types (travel or internal), specify departure and destination points, choose vehicle categories, and define passenger counts and schedules. The system calculates a final price based on predefined data models and offers a seamless transition to a booking confirmation via WhatsApp.
Sources: src/components/sections/PricingCalculator.tsx:18-25, AGENTS.md:5-7, src/hooks/usePricingCalculator.ts:10-25
Architecture and Data Flow
The pricing system follows a modular architecture consisting of a React functional component for the UI, a custom hook for state management, and utility functions for heavy logic.
Component Structure
The UI is built using several specialized sub-components organized within a grid layout. The PricingCalculator section acts as a container that integrates with the usePricingCalculator hook to provide data to child components like RouteSelectionCard, VehiclePassengerCard, and DateTimeCard.
Sources: src/components/sections/PricingCalculator.tsx:12-16, src/components/sections/PricingCalculator.tsx:55-103
Logic and State Management
The usePricingCalculator hook manages the complex state of the form, including derived state for available locations and trip calculations. It implements persistence using localStorage to retain user selections across sessions.
Sources: src/hooks/usePricingCalculator.ts:11-30, src/hooks/usePricingCalculator.ts:115-128
Calculation Workflow
The following diagram illustrates the flow of data from user input to the final price breakdown and WhatsApp integration:
Data Structures and Models
The system relies on strongly typed interfaces to ensure consistency across the calculation and display layers.
Trip and Result Interfaces
| Interface | Description | Key Fields |
|---|---|---|
TripDetails | Input data for calculation | fromLocation, toLocation, vehicleCategory, passengerCount, isRoundTrip |
PriceBreakdown | Itemized price info | vehicleType, basePrice, total |
PriceCalculationResult | Final calculation output | breakdown, details, warnings |
Sources: src/utils/pricingCalculator.ts:11-35
Route and Vehicle Configuration
The system categorizes routes into travel (external) and internal (within Damietta). Vehicle categories include options like sedan, suv, and family_cruiser.
Sources: src/hooks/usePricingCalculator.ts:11-15, AGENTS.md:73-75
Calculation Logic and Utilities
The calculation logic is isolated in src/utils/pricingCalculator.ts to maintain a clean separation of concerns.
Core Calculation Function
The calculatePrice function performs the following steps:
- Route Matching: Finds the
routeGroupbased on the selected IDs. - Vehicle Validation: Retrieves pricing for the specific vehicle category.
- Passenger Checks: Validates if the passenger count is within the minimum and maximum allowed for the vehicle.
- Price Retrieval: Fetches the fixed price based on
oneWayorroundTripstatus.
Sources: src/utils/pricingCalculator.ts:37-70
WhatsApp Integration
After calculation, the system generates a pre-filled Arabic message for the user to send to the service provider.
// Example of the message generation logic
export function generateWhatsAppMessage(result: PriceCalculationResult): string {
const { details } = result;
let message = 'السلام عليكم\n\nأريد حجز رحلة مع وصلني\n\n';
message += `المسار: ${details.routeNameAr}\n`;
message += `نوع السيارة: ${details.vehicleCategoryAr}\n`;
return encodeURIComponent(message);
}
Sources: src/utils/pricingCalculator.ts:100-112
UI Components
PriceBreakdown
The PriceBreakdown.tsx component serves as the summary view. It displays the itemized list (Vehicle Type, Passenger Count, Trip Type) and the final total. It also conditionally renders warnings if the passenger count exceeds vehicle capacity.
Sources: src/components/ui/PriceBreakdown.tsx:32-60
Form Controls
The form utilizes a mix of buttons and cards:
- Route Toggle: Switches between "Travel" and "Internal Damietta" modes.
- Smart Vehicle Switch: A feature in the hook that automatically updates the vehicle category if the passenger count exceeds the current vehicle's limit.
Sources: src/components/sections/PricingCalculator.tsx:43-65, src/hooks/usePricingCalculator.ts:145-155
Persistence and Validation
| Feature | Implementation | Source |
|---|---|---|
| Persistence | localStorage key wasalny_pricing_v2 | src/hooks/usePricingCalculator.ts:127 |
| Input Validation | useMemo based errors array | src/hooks/usePricingCalculator.ts:93-109 |
| Route Detection | Auto-detects routeType based on location IDs | src/hooks/usePricingCalculator.ts:61-68 |
Conclusion
The Pricing Calculator is a sophisticated integration of React state management and static data utilities. By decoupling the calculation logic from the UI components and using a custom hook for state synchronization, the system provides a responsive and reliable user experience. The inclusion of localStorage persistence and automatic vehicle adjustment ensures high usability for potential customers.
Sources: src/App.tsx:38, src/hooks/usePricingCalculator.ts:145-160