84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { BookingType, TimeSlot } from '@/types/bookings';
|
|
|
|
interface BookingSummaryProps {
|
|
selectedBookingTypeData: BookingType | undefined;
|
|
selectedDate: string;
|
|
selectedTimeSlot: string;
|
|
timeSlots: TimeSlot[];
|
|
participantsCount: number;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
const BookingSummary: React.FC<BookingSummaryProps> = ({
|
|
selectedBookingTypeData,
|
|
selectedDate,
|
|
selectedTimeSlot,
|
|
timeSlots,
|
|
participantsCount,
|
|
onSubmit,
|
|
}) => {
|
|
const selectedTimeSlotData = timeSlots.find(s => s.id === selectedTimeSlot);
|
|
|
|
// Format time to display in Tbilisi timezone (UTC+4)
|
|
const formatTime = (time: string) => {
|
|
if (time.match(/^\d{2}:\d{2}$/)) {
|
|
return time;
|
|
}
|
|
if (time.includes('T') || time.includes(' ') || time.includes('Z')) {
|
|
const date = new Date(time);
|
|
return date.toLocaleTimeString('en-US', {
|
|
timeZone: 'Asia/Tbilisi',
|
|
hour12: false,
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
return time;
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-sm">
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
|
|
|
|
<div className="space-y-3 mb-6">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Experience:</span>
|
|
<span className="font-medium">{selectedBookingTypeData?.display_name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Date:</span>
|
|
<span className="font-medium">{selectedDate}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Time:</span>
|
|
<span className="font-medium">
|
|
{selectedTimeSlotData?.start_time && selectedTimeSlotData?.end_time
|
|
? `${formatTime(selectedTimeSlotData.start_time)}—${formatTime(selectedTimeSlotData.end_time)}`
|
|
: 'Not selected'
|
|
}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Participants:</span>
|
|
<span className="font-medium">{participantsCount}</span>
|
|
</div>
|
|
{selectedBookingTypeData?.requires_payment && (
|
|
<div className="flex justify-between text-lg font-semibold border-t pt-3">
|
|
<span>Total:</span>
|
|
<span>₾{selectedBookingTypeData.price_per_person * participantsCount}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={onSubmit}
|
|
className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
|
|
>
|
|
{selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BookingSummary; |