\n );\n }\n \n if (error && !packageData) {\n return (\n

\n {error}\n

\n );\n }\n \n if (!packageData) {\n return (\n

\n Package not found\n

\n );\n }\n \n // Render booking details step\n const renderBookingDetails = () => {\n return (\n

Booking Details

\n \n

Package Information

\n \n

{packageData.image_url}

{packageData.title}

{packageData.destination}

\n \n

Start Date

{formatDate(packageData.start_date)}

End Date

{formatDate(packageData.end_date)}

Duration

{packageData.duration_days} days

Price per person

{formatCurrency(packageData.price, packageData.currency)}

\n \n

Traveler Information

\n \n

\n \n Number of Travelers\n \n setTravelers(parseInt(e.target.value))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {Array.from({ length: Math.min(packageData.available_spots, 8) }, (_, i) => i + 1).map((num) => (\n \n ))}\n \n

\n \n

\n \n Lead Traveler\n \n

{user.name}

{user.email}

\n This information will be shared with the travel agency\n

\n \n

Total Price

\n {formatCurrency(packageData.price * travelers, packageData.currency)}\n

\n for {travelers} {travelers === 1 ? 'traveler' : 'travelers'}\n

\n \n \n {loading ? 'Processing...' : 'Continue to Payment'}\n \n

\n );\n };\n \n // Render payment step\n const renderPayment = () => {\n if (!booking) return null;\n \n return (\n

Payment Information

\n \n {paymentError && (\n

\n {paymentError}\n

\n )}\n \n

Booking Summary

\n \n

{packageData.image_url}

{packageData.title}

{packageData.destination}

\n \n

\n Price per person\n {formatCurrency(packageData.price, packageData.currency)}\n

\n Travelers\n {booking.traveler_count}\n

\n Total\n {formatCurrency(booking.total_price, packageData.currency)}\n

\n \n

\n \n Secure payment processing\n

\n \n Your card will be charged immediately\n

\n \n Free cancellation up to 7 days before\n

\n \n

Payment Details

\n \n

\n \n Card Number\n \n setCardNumber(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n maxLength={19}\n />\n

\n For testing, use: 4242424242424242\n

\n \n

\n \n Expiry Date\n \n setExpiryDate(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n maxLength={5}\n />\n

\n \n CVV\n \n setCvv(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n maxLength={4}\n />\n

\n \n

\n \n Cardholder Name\n \n setCardholderName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n \n {processingPayment ? 'Processing...' : `Pay ${formatCurrency(booking.total_price, packageData.currency)}`}\n \n \n

\n );\n };\n \n // Render confirmation step\n const renderConfirmation = () => {\n if (!booking) return null;\n \n return (\n

✓

Booking Confirmed!

\n Your booking has been confirmed and your payment has been processed successfully.\n

\n \n

{packageData.title}

{packageData.destination}

\n \n

Booking Reference

{booking.id}

Status

Confirmed

Start Date

{formatDate(packageData.start_date)}

End Date

{formatDate(packageData.end_date)}

Travelers

{booking.traveler_count}

Total Paid

{formatCurrency(booking.total_price, packageData.currency)}

\n \n

\n A confirmation email has been sent to your email address.\n You can view your booking details in your account.\n

\n \n \n View My Bookings\n \n

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

\n {[1, 2, 3].map((step) => (\n \n

\n {step < currentStep ? (\n \n ) : (\n step\n )}\n

\n \n {step < 3 && (\n

\n )}\n \n ))}\n

\n \n

Booking Details

Payment

Confirmation

\n \n {currentStep === 1 && renderBookingDetails()}\n {currentStep === 2 && renderPayment()}\n {currentStep === 3 && renderConfirmation()}\n

\n );\n}","deleted","label",[166,167,149],"frontend","components","permalink","https://www.val.town/x/OssyNach/Appky/code/frontend/components/BookingFlow.tsx","extension","actionData","errors"]