\n );\n }\n\n if (bookingComplete) {\n return (\n

\n \n

Booking Confirmed!

\n Thank you for your booking. We've sent a confirmation email to {bookingData.email}.\n

\n \n

Booking Details

Booking Reference

{bookingReference}

Vehicle

{selectedCar.name}

Pickup Date

{bookingData.pickupDate}

Return Date

{bookingData.returnDate}

Pickup Location

{bookingData.pickupLocation}

Return Location

{bookingData.returnLocation}

Total Amount

${totalPrice}

Status

Confirmed

\n \n

\n \n \n

\n );\n }\n\n return (\n

Book Your Luxury Car

Complete the form below to reserve your vehicle

\n \n {/* Progress Steps */}\n

\n {[\n { step: 1, label: 'Vehicle & Dates' },\n { step: 2, label: 'Personal Details' },\n { step: 3, label: 'Review & Payment' }\n ].map((item) => (\n

= item.step \n ? 'bg-blue-600 text-white' \n : 'bg-gray-200 text-gray-600'\n }`}\n >\n {currentStep > item.step ? (\n \n ) : (\n item.step\n )}\n

\n = item.step ? 'text-blue-600 font-medium' : 'text-gray-500'}`}>\n {item.label}\n \n

\n ))}\n

\n \n

\n {/* Step 1: Vehicle & Dates */}\n {currentStep === 1 && (\n

Select Vehicle

\n \n {selectedCar ? (\n

{selectedCar.name}

{selectedCar.category} • {selectedCar.transmission} • {selectedCar.seats} Seats

${selectedCar.price}/day

\n \n

\n ) : (\n

Please select a vehicle from our fleet:

\n {availableCars.map((car) => (\n handleCarSelect(car)}\n className=\"bg-gray-50 rounded-lg p-3 flex items-center hover:bg-gray-100 transition-colors text-left\"\n >\n

{car.name}

{car.category}

${car.price}/day

\n \n ))}\n

\n {errors.car &&

{errors.car}

}\n

\n )}\n

\n \n

Rental Details

\n \n

\n \n Pickup Date*\n \n \n {errors.pickupDate &&

{errors.pickupDate}

}\n

\n \n

\n \n Return Date*\n \n \n {errors.returnDate &&

{errors.returnDate}

}\n

\n \n

\n \n Pickup Location*\n \n \n \n \n \n \n \n \n {errors.pickupLocation &&

{errors.pickupLocation}

}\n

\n \n

\n \n Return Location*\n \n \n \n \n \n \n \n \n {errors.returnLocation &&

{errors.returnLocation}

}\n

\n \n

Booking Summary

\n \n {selectedCar ? (\n

{selectedCar.name}

{selectedCar.category}

\n \n

\n Daily Rate:\n ${selectedCar.price}/day\n

\n Rental Duration:\n {days} days\n

\n Insurance:\n Included\n

\n \n

\n Total:\n ${totalPrice}\n

\n ) : (\n

\n \n

Please select a vehicle to see the booking summary

\n )}\n \n \n

\n )}\n \n {/* Step 2: Personal Details */}\n {currentStep === 2 && (\n

Personal Information

\n \n

\n \n First Name*\n \n \n {errors.firstName &&

{errors.firstName}

}\n

\n \n

\n \n Last Name*\n \n \n {errors.lastName &&

{errors.lastName}

}\n

\n \n

\n \n Email Address*\n \n \n {errors.email &&

{errors.email}

}\n

\n \n

\n \n Phone Number*\n \n \n {errors.phone &&

{errors.phone}

}\n

\n \n

\n \n Address*\n \n \n {errors.address &&

{errors.address}

}\n

\n \n

\n \n City*\n \n \n {errors.city &&

{errors.city}

}\n

\n \n

\n \n ZIP Code*\n \n \n {errors.zipCode &&

{errors.zipCode}

}\n

\n \n

\n \n Country*\n \n \n \n \n \n \n \n \n \n \n \n \n \n {errors.country &&

{errors.country}

}\n

\n \n

\n \n Special Requests (Optional)\n \n \n

\n \n

Booking Summary

\n \n {selectedCar && (\n

{selectedCar.name}

{selectedCar.category}

\n \n

\n Pickup Date:\n {bookingData.pickupDate || 'Not selected'}\n

\n Return Date:\n {bookingData.returnDate || 'Not selected'}\n

\n Pickup Location:\n {bookingData.pickupLocation || 'Not selected'}\n

\n Return Location:\n {bookingData.returnLocation || 'Not selected'}\n

\n \n

\n Daily Rate:\n ${selectedCar.price}/day\n

\n Rental Duration:\n {days} days\n

\n Insurance:\n Included\n

\n \n

\n Total:\n ${totalPrice}\n

\n )}\n \n

\n \n \n

\n )}\n \n {/* Step 3: Review & Payment */}\n {currentStep === 3 && (\n

Review Your Booking

\n \n

Vehicle Details

{selectedCar.name}

{selectedCar.category}

\n Transmission:\n {selectedCar.transmission}\n

\n Fuel Type:\n {selectedCar.fuelType}\n

\n Seats:\n {selectedCar.seats}\n

\n Daily Rate:\n ${selectedCar.price}\n

\n \n

Rental Period

\n Pickup Date:\n {bookingData.pickupDate}\n

\n Return Date:\n {bookingData.returnDate}\n

\n Pickup Location:\n {bookingData.pickupLocation}\n

\n Return Location:\n {bookingData.returnLocation}\n

\n Duration:\n {days} days\n

\n \n

Personal Information

\n Name:\n {bookingData.firstName} {bookingData.lastName}\n

\n Email:\n {bookingData.email}\n

\n Phone:\n {bookingData.phone}\n

\n Country:\n {bookingData.country}\n

\n Address:\n \n {bookingData.address}, {bookingData.city}, {bookingData.zipCode}\n \n

\n {bookingData.specialRequests && (\n

\n Special Requests:\n {bookingData.specialRequests}\n

\n )}\n

\n \n

Payment Information

\n For demo purposes, no actual payment will be processed. In a real application, a secure payment form would be displayed here.\n

\n \n

\n {['visa', 'mastercard', 'amex', 'discover'].map((card) => (\n

\n \n {card === 'visa' && 'Visa'}\n {card === 'mastercard' && 'MC'}\n {card === 'amex' && 'Amex'}\n {card === 'discover' && 'Disc'}\n \n

\n ))}\n

\n All major credit cards accepted\n

\n \n

\n \n \n \n I agree to the Terms and Conditions and Privacy Policy\n \n \n {errors.agreeToTerms &&

{errors.agreeToTerms}

}\n

\n \n

Booking Summary

\n \n

{selectedCar.name}

{selectedCar.category}

\n \n

\n Pickup:\n {bookingData.pickupDate}\n

\n Return:\n {bookingData.returnDate}\n

\n Duration:\n {days} days\n

\n \n

\n Rental Charge:\n ${selectedCar.price} × {days} days\n

\n Subtotal:\n ${selectedCar.price * days}\n

\n Insurance:\n Included\n

\n Taxes & Fees:\n Included\n

\n \n

\n Total:\n ${totalPrice}\n

\n \n

\n \n \n

\n )}\n

\n );\n};\n\nexport default Booking;","deleted","label",[170,171,153],"frontend","pages","permalink","https://www.val.town/x/Chandan5689/CarRental/code/frontend/pages/Booking.jsx","extension","actionData","errors"]