1082 lines
49 KiB
TypeScript
1082 lines
49 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
import DatePicker from 'react-datepicker';
|
|
import 'react-datepicker/dist/react-datepicker.css';
|
|
import {
|
|
X,
|
|
Calendar,
|
|
Users,
|
|
CreditCard,
|
|
FileText,
|
|
Sparkles,
|
|
CheckCircle,
|
|
ArrowRight,
|
|
ArrowLeft,
|
|
Loader2,
|
|
Plus,
|
|
Minus,
|
|
Building2,
|
|
Receipt,
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import { getRoomById, getRoomBookedDates, type Room } from '../../services/api/roomService';
|
|
import {
|
|
createBooking,
|
|
checkRoomAvailability,
|
|
type BookingData,
|
|
} from '../../services/api/bookingService';
|
|
import { serviceService, Service, promotionService, Promotion } from '../../services/api';
|
|
import useAuthStore from '../../store/useAuthStore';
|
|
import {
|
|
bookingValidationSchema,
|
|
type BookingFormData,
|
|
} from '../../validators/bookingValidator';
|
|
import { useFormatCurrency } from '../../hooks/useFormatCurrency';
|
|
import { formatDateLocal } from '../../utils/format';
|
|
import Recaptcha from '../common/Recaptcha';
|
|
import { recaptchaService } from '../../services/api/systemSettingsService';
|
|
import StripePaymentModal from '../payments/StripePaymentModal';
|
|
import PayPalPaymentModal from '../payments/PayPalPaymentModal';
|
|
import CashPaymentModal from '../payments/CashPaymentModal';
|
|
import InvoiceInfoModal from '../booking/InvoiceInfoModal';
|
|
|
|
interface LuxuryBookingModalProps {
|
|
roomId: number;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: (bookingId: number) => void;
|
|
}
|
|
|
|
type BookingStep = 'dates' | 'guests' | 'services' | 'payment' | 'confirmation';
|
|
|
|
const LuxuryBookingModal: React.FC<LuxuryBookingModalProps> = ({
|
|
roomId,
|
|
isOpen,
|
|
onClose,
|
|
onSuccess,
|
|
}) => {
|
|
const { userInfo } = useAuthStore();
|
|
const { formatCurrency, currency } = useFormatCurrency();
|
|
const [currentStep, setCurrentStep] = useState<BookingStep>('dates');
|
|
const [room, setRoom] = useState<Room | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
|
|
const [services, setServices] = useState<Service[]>([]);
|
|
const [selectedServices, setSelectedServices] = useState<Array<{ service: Service; quantity: number }>>([]);
|
|
const [bookedDates, setBookedDates] = useState<Date[]>([]);
|
|
const [promotionCode, setPromotionCode] = useState('');
|
|
const [selectedPromotion, setSelectedPromotion] = useState<Promotion | null>(null);
|
|
const [promotionDiscount, setPromotionDiscount] = useState(0);
|
|
const [validatingPromotion, setValidatingPromotion] = useState(false);
|
|
const [promotionError, setPromotionError] = useState<string | null>(null);
|
|
const [showInvoiceModal, setShowInvoiceModal] = useState(false);
|
|
const [showPaymentModal, setShowPaymentModal] = useState(false);
|
|
const [paymentMethod, setPaymentMethod] = useState<'stripe' | 'paypal' | 'cash' | null>(null);
|
|
const [createdBookingId, setCreatedBookingId] = useState<number | null>(null);
|
|
const [totalPrice, setTotalPrice] = useState(0);
|
|
|
|
const {
|
|
control,
|
|
register,
|
|
handleSubmit,
|
|
watch,
|
|
formState: { errors },
|
|
setValue,
|
|
} = useForm<BookingFormData & { invoiceInfo?: any }>({
|
|
resolver: yupResolver(bookingValidationSchema),
|
|
defaultValues: {
|
|
checkInDate: undefined,
|
|
checkOutDate: undefined,
|
|
guestCount: 1,
|
|
notes: '',
|
|
paymentMethod: 'cash',
|
|
fullName: userInfo?.name || '',
|
|
email: userInfo?.email || '',
|
|
phone: userInfo?.phone || '',
|
|
invoiceInfo: {
|
|
company_name: '',
|
|
company_address: '',
|
|
company_tax_id: '',
|
|
customer_tax_id: '',
|
|
},
|
|
},
|
|
});
|
|
|
|
const checkInDate = watch('checkInDate');
|
|
const checkOutDate = watch('checkOutDate');
|
|
const paymentMethodForm = watch('paymentMethod');
|
|
|
|
useEffect(() => {
|
|
if (isOpen && roomId) {
|
|
fetchRoomDetails(roomId);
|
|
fetchServices();
|
|
fetchBookedDates(roomId);
|
|
}
|
|
}, [isOpen, roomId]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setCurrentStep('dates');
|
|
setSelectedServices([]);
|
|
setPromotionCode('');
|
|
setSelectedPromotion(null);
|
|
setPromotionDiscount(0);
|
|
setShowPaymentModal(false);
|
|
setPaymentMethod(null);
|
|
setCreatedBookingId(null);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const fetchBookedDates = async (roomId: number) => {
|
|
try {
|
|
const response = await getRoomBookedDates(roomId);
|
|
const isSuccess = response.success === true || (response as any).status === 'success';
|
|
if (isSuccess && response.data?.booked_dates) {
|
|
const dates = response.data.booked_dates.map((dateStr: string) => {
|
|
const [year, month, day] = dateStr.split('-').map(Number);
|
|
const date = new Date(year, month - 1, day);
|
|
date.setHours(0, 0, 0, 0);
|
|
return date;
|
|
});
|
|
setBookedDates(dates);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching booked dates:', err);
|
|
}
|
|
};
|
|
|
|
const isDateBooked = (date: Date): boolean => {
|
|
if (!date || bookedDates.length === 0) return false;
|
|
const normalizedDate = new Date(date);
|
|
normalizedDate.setHours(0, 0, 0, 0);
|
|
return bookedDates.some(bookedDate => {
|
|
const normalizedBooked = new Date(bookedDate);
|
|
normalizedBooked.setHours(0, 0, 0, 0);
|
|
return normalizedDate.getTime() === normalizedBooked.getTime();
|
|
});
|
|
};
|
|
|
|
const doesRangeIncludeBookedDates = (startDate: Date, endDate: Date): boolean => {
|
|
if (!startDate || !endDate || bookedDates.length === 0) return false;
|
|
const start = new Date(startDate);
|
|
start.setHours(0, 0, 0, 0);
|
|
const end = new Date(endDate);
|
|
end.setHours(0, 0, 0, 0);
|
|
let currentDate = new Date(start);
|
|
while (currentDate < end) {
|
|
if (isDateBooked(currentDate)) {
|
|
return true;
|
|
}
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const fetchServices = async () => {
|
|
try {
|
|
const response = await serviceService.getServices({
|
|
status: 'active',
|
|
limit: 100,
|
|
});
|
|
setServices(response.data.services || []);
|
|
} catch (err: any) {
|
|
console.error('Error fetching services:', err);
|
|
}
|
|
};
|
|
|
|
const fetchRoomDetails = async (roomId: number) => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getRoomById(roomId);
|
|
if (
|
|
(response.success || (response as any).status === 'success') &&
|
|
response.data?.room
|
|
) {
|
|
setRoom(response.data.room);
|
|
} else {
|
|
throw new Error('Unable to load room information');
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Error fetching room:', err);
|
|
toast.error(err.response?.data?.message || 'Unable to load room information');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const numberOfNights =
|
|
checkInDate && checkOutDate
|
|
? Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))
|
|
: 0;
|
|
|
|
const roomPrice = (room?.price && room.price > 0) ? room.price : (room?.room_type?.base_price || 0);
|
|
const roomTotal = numberOfNights * roomPrice;
|
|
const servicesTotal = selectedServices.reduce((sum, item) => {
|
|
return sum + (item.service.price * item.quantity);
|
|
}, 0);
|
|
const subtotal = roomTotal + servicesTotal;
|
|
const finalTotal = Math.max(0, subtotal - promotionDiscount);
|
|
|
|
useEffect(() => {
|
|
setTotalPrice(finalTotal);
|
|
}, [finalTotal]);
|
|
|
|
const handleValidatePromotion = async () => {
|
|
if (!promotionCode.trim()) {
|
|
setPromotionError('Please enter a promotion code');
|
|
return;
|
|
}
|
|
if (subtotal === 0) {
|
|
setPromotionError('Please select dates first');
|
|
return;
|
|
}
|
|
try {
|
|
setValidatingPromotion(true);
|
|
setPromotionError(null);
|
|
const response = await promotionService.validatePromotion(
|
|
promotionCode.toUpperCase().trim(),
|
|
subtotal
|
|
);
|
|
if (response.success && response.data) {
|
|
setSelectedPromotion(response.data.promotion);
|
|
setPromotionDiscount(response.data.discount);
|
|
toast.success(`Promotion "${response.data.promotion.name}" applied!`);
|
|
} else {
|
|
throw new Error(response.message || 'Invalid promotion code');
|
|
}
|
|
} catch (error: any) {
|
|
setPromotionError(error.response?.data?.message || error.message || 'Invalid promotion code');
|
|
setSelectedPromotion(null);
|
|
setPromotionDiscount(0);
|
|
toast.error(error.response?.data?.message || error.message || 'Invalid promotion code');
|
|
} finally {
|
|
setValidatingPromotion(false);
|
|
}
|
|
};
|
|
|
|
const handleRemovePromotion = () => {
|
|
setPromotionCode('');
|
|
setSelectedPromotion(null);
|
|
setPromotionDiscount(0);
|
|
setPromotionError(null);
|
|
toast.info('Promotion removed');
|
|
};
|
|
|
|
const steps: { key: BookingStep; label: string; icon: React.ReactNode }[] = [
|
|
{ key: 'dates', label: 'Dates', icon: <Calendar className="w-4 h-4" /> },
|
|
{ key: 'guests', label: 'Guests', icon: <Users className="w-4 h-4" /> },
|
|
{ key: 'services', label: 'Services', icon: <Sparkles className="w-4 h-4" /> },
|
|
{ key: 'payment', label: 'Payment', icon: <CreditCard className="w-4 h-4" /> },
|
|
];
|
|
|
|
const getCurrentStepIndex = () => {
|
|
return steps.findIndex(s => s.key === currentStep);
|
|
};
|
|
|
|
const canGoToNextStep = () => {
|
|
switch (currentStep) {
|
|
case 'dates':
|
|
return checkInDate && checkOutDate;
|
|
case 'guests':
|
|
return true;
|
|
case 'services':
|
|
return true;
|
|
case 'payment':
|
|
return paymentMethodForm;
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const handleNext = () => {
|
|
if (!canGoToNextStep()) {
|
|
toast.error('Please complete the current step');
|
|
return;
|
|
}
|
|
const currentIndex = getCurrentStepIndex();
|
|
if (currentIndex < steps.length - 1) {
|
|
setCurrentStep(steps[currentIndex + 1].key as BookingStep);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
const currentIndex = getCurrentStepIndex();
|
|
if (currentIndex > 0) {
|
|
setCurrentStep(steps[currentIndex - 1].key as BookingStep);
|
|
}
|
|
};
|
|
|
|
const onSubmit = async (data: BookingFormData) => {
|
|
console.log('Form submitted with data:', data);
|
|
console.log('Current form errors:', errors);
|
|
|
|
if (!room) {
|
|
toast.error('Room information is missing. Please try again.');
|
|
return;
|
|
}
|
|
|
|
// Verify reCAPTCHA if token is provided (reCAPTCHA is optional)
|
|
if (recaptchaToken) {
|
|
try {
|
|
const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
|
|
if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
|
|
toast.error('reCAPTCHA verification failed. Please try again.');
|
|
setRecaptchaToken(null);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
toast.error('reCAPTCHA verification failed. Please try again.');
|
|
setRecaptchaToken(null);
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
setSubmitting(true);
|
|
const checkInDateStr = formatDateLocal(data.checkInDate);
|
|
const checkOutDateStr = formatDateLocal(data.checkOutDate);
|
|
const checkIn = new Date(data.checkInDate);
|
|
checkIn.setHours(0, 0, 0, 0);
|
|
const checkOut = new Date(data.checkOutDate);
|
|
checkOut.setHours(0, 0, 0, 0);
|
|
|
|
if (isDateBooked(checkIn)) {
|
|
toast.error('Check-in date is already booked. Please select another date.');
|
|
return;
|
|
}
|
|
|
|
const availability = await checkRoomAvailability(
|
|
room.id,
|
|
checkInDateStr,
|
|
checkOutDateStr
|
|
);
|
|
|
|
if (!availability.available) {
|
|
toast.error(availability.message || 'Room is already booked during this time');
|
|
return;
|
|
}
|
|
|
|
const bookingData: BookingData & { invoice_info?: any } = {
|
|
room_id: room.id,
|
|
check_in_date: checkInDateStr,
|
|
check_out_date: checkOutDateStr,
|
|
guest_count: data.guestCount,
|
|
notes: data.notes || '',
|
|
payment_method: data.paymentMethod,
|
|
total_price: totalPrice,
|
|
guest_info: {
|
|
full_name: data.fullName,
|
|
email: data.email,
|
|
phone: data.phone,
|
|
},
|
|
services: selectedServices.map(item => ({
|
|
service_id: item.service.id,
|
|
quantity: item.quantity,
|
|
})),
|
|
promotion_code: selectedPromotion?.code || undefined,
|
|
invoice_info: (data as any).invoiceInfo ? {
|
|
company_name: (data as any).invoiceInfo.company_name || undefined,
|
|
company_address: (data as any).invoiceInfo.company_address || undefined,
|
|
company_tax_id: (data as any).invoiceInfo.company_tax_id || undefined,
|
|
customer_tax_id: (data as any).invoiceInfo.customer_tax_id || undefined,
|
|
} : undefined,
|
|
};
|
|
|
|
const response = await createBooking(bookingData);
|
|
|
|
if (response.success && response.data?.booking) {
|
|
const bookingId = response.data.booking.id;
|
|
setCreatedBookingId(bookingId);
|
|
setPaymentMethod(data.paymentMethod as 'stripe' | 'paypal' | 'cash');
|
|
setShowPaymentModal(true);
|
|
} else {
|
|
throw new Error(response.message || 'Unable to create booking');
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Error creating booking:', err);
|
|
if (err.response?.status === 409) {
|
|
toast.error('❌ Room is already booked during this time. Please select different dates.');
|
|
} else if (err.response?.status === 400) {
|
|
toast.error(err.response?.data?.message || 'Invalid booking information');
|
|
} else {
|
|
toast.error(err.response?.data?.message || 'Unable to book room. Please try again.');
|
|
}
|
|
setRecaptchaToken(null);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handlePaymentSuccess = async () => {
|
|
setShowPaymentModal(false);
|
|
if (createdBookingId) {
|
|
// Check booking status before showing success toast
|
|
try {
|
|
const { getBookingById } = await import('../../services/api/bookingService');
|
|
const bookingResponse = await getBookingById(createdBookingId);
|
|
if (bookingResponse.success && bookingResponse.data?.booking) {
|
|
const booking = bookingResponse.data.booking;
|
|
// Only show success toast if booking is not cancelled
|
|
if (booking.status !== 'cancelled') {
|
|
toast.success('🎉 Booking successful!');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
// If we can't check status, don't show toast to avoid confusion
|
|
console.error('Error checking booking status:', err);
|
|
}
|
|
if (onSuccess) {
|
|
onSuccess(createdBookingId);
|
|
}
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
const handlePaymentClose = () => {
|
|
setShowPaymentModal(false);
|
|
if (createdBookingId && onSuccess) {
|
|
onSuccess(createdBookingId);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-2 sm:p-4">
|
|
<div
|
|
className="fixed inset-0 bg-black/80 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
<div className="relative w-full max-w-4xl max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
|
|
{/* Header */}
|
|
<div className="relative px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="text-base sm:text-lg md:text-xl lg:text-2xl font-serif font-bold text-white tracking-tight truncate">
|
|
Complete Your Booking
|
|
</h2>
|
|
<p className="text-xs sm:text-sm text-gray-400 mt-0.5 sm:mt-1 font-light truncate">
|
|
{room?.room_type?.name || 'Room'} - {formatCurrency(roomPrice)}/night
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
|
|
>
|
|
<X className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Progress Steps */}
|
|
<div className="mt-3 sm:mt-4 flex items-center justify-between gap-1 sm:gap-2">
|
|
{steps.map((step, index) => {
|
|
const isActive = step.key === currentStep;
|
|
const isCompleted = getCurrentStepIndex() > index;
|
|
return (
|
|
<div key={step.key} className="flex items-center flex-1 min-w-0">
|
|
<div className="flex items-center flex-1 min-w-0">
|
|
<div
|
|
className={`flex items-center justify-center w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full border-2 transition-all flex-shrink-0 ${
|
|
isActive
|
|
? 'bg-[#d4af37] border-[#d4af37] text-black'
|
|
: isCompleted
|
|
? 'bg-green-500/20 border-green-500 text-green-400'
|
|
: 'bg-transparent border-gray-600 text-gray-500'
|
|
}`}
|
|
>
|
|
{isCompleted ? (
|
|
<CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5" />
|
|
) : (
|
|
<div className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5">
|
|
{step.icon}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span
|
|
className={`ml-1 sm:ml-2 text-[10px] sm:text-xs font-medium hidden md:block truncate ${
|
|
isActive ? 'text-[#d4af37]' : isCompleted ? 'text-green-400' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</span>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div
|
|
className={`h-0.5 flex-1 mx-1 sm:mx-2 transition-all flex-shrink ${
|
|
isCompleted ? 'bg-green-500' : 'bg-gray-700'
|
|
}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 px-4 sm:px-6 py-4 sm:py-6 overflow-hidden">
|
|
<div className="h-full overflow-y-auto">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-8 h-8 animate-spin text-[#d4af37]" />
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
{/* Step 1: Dates */}
|
|
{currentStep === 'dates' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
|
|
<Calendar className="w-5 h-5 text-[#d4af37]" />
|
|
Select Dates
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Check-in Date <span className="text-[#d4af37]">*</span>
|
|
</label>
|
|
<Controller
|
|
control={control}
|
|
name="checkInDate"
|
|
render={({ field }) => (
|
|
<DatePicker
|
|
selected={field.value}
|
|
minDate={new Date()}
|
|
selectsStart
|
|
startDate={checkInDate}
|
|
endDate={checkOutDate}
|
|
dateFormat="dd/MM/yyyy"
|
|
placeholderText="Select check-in"
|
|
excludeDates={bookedDates}
|
|
filterDate={(date) => !isDateBooked(date)}
|
|
onChange={(date) => {
|
|
if (date && isDateBooked(date)) {
|
|
toast.error('This date is already booked');
|
|
return;
|
|
}
|
|
field.onChange(date);
|
|
}}
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
wrapperClassName="w-full"
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.checkInDate && (
|
|
<p className="text-xs text-red-400 mt-1">{errors.checkInDate.message}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Check-out Date <span className="text-[#d4af37]">*</span>
|
|
</label>
|
|
<Controller
|
|
control={control}
|
|
name="checkOutDate"
|
|
render={({ field }) => (
|
|
<DatePicker
|
|
selected={field.value}
|
|
minDate={checkInDate || new Date()}
|
|
selectsEnd
|
|
startDate={checkInDate}
|
|
endDate={checkOutDate}
|
|
dateFormat="dd/MM/yyyy"
|
|
placeholderText="Select check-out"
|
|
excludeDates={bookedDates}
|
|
filterDate={(date) => {
|
|
if (!checkInDate) return !isDateBooked(date);
|
|
return !isDateBooked(date) && !doesRangeIncludeBookedDates(checkInDate, date);
|
|
}}
|
|
onChange={(date) => {
|
|
if (date && checkInDate && doesRangeIncludeBookedDates(checkInDate, date)) {
|
|
toast.error('Selected range includes booked dates');
|
|
return;
|
|
}
|
|
field.onChange(date);
|
|
}}
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
wrapperClassName="w-full"
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.checkOutDate && (
|
|
<p className="text-xs text-red-400 mt-1">{errors.checkOutDate.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{checkInDate && checkOutDate && (
|
|
<div className="mt-4 p-3 bg-[#d4af37]/10 border border-[#d4af37]/20 rounded-lg">
|
|
<p className="text-sm text-gray-300">
|
|
<span className="text-[#d4af37] font-semibold">{numberOfNights}</span> night{numberOfNights !== 1 ? 's' : ''} •
|
|
<span className="text-[#d4af37] font-semibold ml-1">{formatCurrency(roomTotal)}</span>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Guests */}
|
|
{currentStep === 'guests' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
|
|
<Users className="w-5 h-5 text-[#d4af37]" />
|
|
Guest Information
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Full Name <span className="text-[#d4af37]">*</span>
|
|
</label>
|
|
<input
|
|
{...register('fullName')}
|
|
type="text"
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
placeholder="John Doe"
|
|
/>
|
|
{errors.fullName && (
|
|
<p className="text-xs text-red-400 mt-1">{errors.fullName.message}</p>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Email <span className="text-[#d4af37]">*</span>
|
|
</label>
|
|
<input
|
|
{...register('email')}
|
|
type="email"
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
placeholder="email@example.com"
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-xs text-red-400 mt-1">{errors.email.message}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Phone <span className="text-[#d4af37]">*</span>
|
|
</label>
|
|
<input
|
|
{...register('phone')}
|
|
type="tel"
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
placeholder="0123456789"
|
|
/>
|
|
{errors.phone && (
|
|
<p className="text-xs text-red-400 mt-1">{errors.phone.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Number of Guests <span className="text-[#d4af37]">*</span>
|
|
</label>
|
|
<input
|
|
{...register('guestCount')}
|
|
type="number"
|
|
min="1"
|
|
max={room?.capacity || room?.room_type?.capacity || 10}
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
/>
|
|
{errors.guestCount && (
|
|
<p className="text-xs text-red-400 mt-1">{errors.guestCount.message}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2">
|
|
Special Requests (optional)
|
|
</label>
|
|
<textarea
|
|
{...register('notes')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] resize-none"
|
|
placeholder="Any special requests..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 3: Services */}
|
|
{currentStep === 'services' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5 text-[#d4af37]" />
|
|
Additional Services
|
|
</h3>
|
|
{services.length > 0 ? (
|
|
<div className="space-y-3 max-h-48 overflow-y-auto">
|
|
{services.map((service) => {
|
|
const selectedItem = selectedServices.find(item => item.service.id === service.id);
|
|
const quantity = selectedItem?.quantity || 0;
|
|
return (
|
|
<div
|
|
key={service.id}
|
|
className="p-3 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex-1">
|
|
<h4 className="text-sm font-semibold text-white">{service.name}</h4>
|
|
<p className="text-xs text-gray-400 mt-1">{formatCurrency(service.price)} / {service.unit || 'unit'}</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (quantity > 0) {
|
|
if (quantity === 1) {
|
|
setSelectedServices(prev => prev.filter(item => item.service.id !== service.id));
|
|
} else {
|
|
setSelectedServices(prev => prev.map(item =>
|
|
item.service.id === service.id
|
|
? { ...item, quantity: item.quantity - 1 }
|
|
: item
|
|
));
|
|
}
|
|
}
|
|
}}
|
|
disabled={quantity === 0}
|
|
className="w-7 h-7 flex items-center justify-center bg-[#1a1a1a] border border-[#d4af37]/20 rounded text-[#d4af37] hover:bg-[#d4af37]/10 disabled:opacity-50"
|
|
>
|
|
<Minus className="w-3.5 h-3.5" />
|
|
</button>
|
|
<span className="text-white font-semibold w-6 text-center text-sm">{quantity}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (quantity === 0) {
|
|
setSelectedServices(prev => [...prev, { service, quantity: 1 }]);
|
|
} else {
|
|
setSelectedServices(prev => prev.map(item =>
|
|
item.service.id === service.id
|
|
? { ...item, quantity: item.quantity + 1 }
|
|
: item
|
|
));
|
|
}
|
|
}}
|
|
className="w-7 h-7 flex items-center justify-center bg-[#1a1a1a] border border-[#d4af37]/20 rounded text-[#d4af37] hover:bg-[#d4af37]/10"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
{quantity > 0 && (
|
|
<span className="text-sm font-semibold text-[#d4af37] w-20 text-right">
|
|
{formatCurrency(service.price * quantity)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-400">No additional services available</p>
|
|
)}
|
|
|
|
{/* Promotion Code */}
|
|
<div className="mt-6 pt-6 border-t border-[#d4af37]/20">
|
|
<h4 className="text-sm font-semibold text-white mb-3">Promotion Code</h4>
|
|
{!selectedPromotion ? (
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={promotionCode}
|
|
onChange={(e) => {
|
|
setPromotionCode(e.target.value.toUpperCase());
|
|
setPromotionError(null);
|
|
}}
|
|
placeholder="Enter code"
|
|
className="flex-1 px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
|
|
disabled={validatingPromotion || subtotal === 0}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleValidatePromotion}
|
|
disabled={validatingPromotion || !promotionCode.trim() || subtotal === 0}
|
|
className="px-4 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] disabled:opacity-50 disabled:cursor-not-allowed text-sm"
|
|
>
|
|
{validatingPromotion ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Apply'}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="p-3 bg-green-500/10 border border-green-500/30 rounded-lg flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-green-400">{selectedPromotion.name}</p>
|
|
<p className="text-xs text-gray-400">Discount: -{formatCurrency(promotionDiscount)}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleRemovePromotion}
|
|
className="text-red-400 hover:text-red-300"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{promotionError && <p className="text-xs text-red-400 mt-2">{promotionError}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 4: Payment */}
|
|
{currentStep === 'payment' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-lg font-serif font-semibold text-white mb-4 flex items-center gap-2">
|
|
<CreditCard className="w-5 h-5 text-[#d4af37]" />
|
|
Payment Method
|
|
</h3>
|
|
<div className="space-y-3">
|
|
<label className="flex items-start p-4 bg-[#0a0a0a] border-2 border-[#d4af37]/20 rounded-lg cursor-pointer hover:border-[#d4af37]/40 transition-all">
|
|
<input
|
|
{...register('paymentMethod')}
|
|
type="radio"
|
|
value="cash"
|
|
className="mt-1 mr-3 w-4 h-4 text-[#d4af37] border-[#d4af37]/30 focus:ring-[#d4af37]/50"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<CreditCard className="w-4 h-4 text-[#d4af37]" />
|
|
<span className="font-semibold text-white text-sm">Pay on Arrival</span>
|
|
<span className="text-xs bg-orange-500/20 text-orange-300 px-2 py-0.5 rounded">20% deposit</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400">Pay 20% deposit now, remaining on arrival</p>
|
|
</div>
|
|
</label>
|
|
<label className="flex items-start p-4 bg-[#0a0a0a] border-2 border-[#d4af37]/20 rounded-lg cursor-pointer hover:border-[#d4af37]/40 transition-all">
|
|
<input
|
|
{...register('paymentMethod')}
|
|
type="radio"
|
|
value="stripe"
|
|
className="mt-1 mr-3 w-4 h-4 text-[#d4af37] border-[#d4af37]/30 focus:ring-[#d4af37]/50"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<CreditCard className="w-4 h-4 text-[#d4af37]" />
|
|
<span className="font-semibold text-white text-sm">Credit/Debit Card</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400">Secure payment via Stripe</p>
|
|
</div>
|
|
</label>
|
|
<label className="flex items-start p-4 bg-[#0a0a0a] border-2 border-[#d4af37]/20 rounded-lg cursor-pointer hover:border-[#d4af37]/40 transition-all">
|
|
<input
|
|
{...register('paymentMethod')}
|
|
type="radio"
|
|
value="paypal"
|
|
className="mt-1 mr-3 w-4 h-4 text-[#d4af37] border-[#d4af37]/30 focus:ring-[#d4af37]/50"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<CreditCard className="w-4 h-4 text-[#d4af37]" />
|
|
<span className="font-semibold text-white text-sm">PayPal</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400">Pay securely with PayPal</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Invoice Info Button */}
|
|
<div className="mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowInvoiceModal(true)}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm text-[#d4af37] hover:text-[#f5d76e] transition-colors"
|
|
>
|
|
<Receipt className="w-4 h-4" />
|
|
Add Invoice Information (Optional)
|
|
</button>
|
|
</div>
|
|
|
|
{/* Summary */}
|
|
<div className="mt-6 p-4 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg">
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between text-gray-300">
|
|
<span>Room ({numberOfNights} nights)</span>
|
|
<span>{formatCurrency(roomTotal)}</span>
|
|
</div>
|
|
{servicesTotal > 0 && (
|
|
<div className="flex justify-between text-gray-300">
|
|
<span>Services</span>
|
|
<span>{formatCurrency(servicesTotal)}</span>
|
|
</div>
|
|
)}
|
|
{promotionDiscount > 0 && (
|
|
<div className="flex justify-between text-green-400">
|
|
<span>Discount</span>
|
|
<span>-{formatCurrency(promotionDiscount)}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between text-lg font-bold text-[#d4af37] pt-2 border-t border-[#d4af37]/20">
|
|
<span>Total</span>
|
|
<span>{formatCurrency(totalPrice)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Validation Summary */}
|
|
{(errors.checkInDate || errors.checkOutDate || errors.fullName || errors.email || errors.phone || errors.guestCount) && (
|
|
<div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
|
<p className="text-xs text-red-400 font-medium mb-1">Please complete all required fields:</p>
|
|
<ul className="text-xs text-red-300 space-y-1">
|
|
{errors.checkInDate && <li>• Check-in date is required</li>}
|
|
{errors.checkOutDate && <li>• Check-out date is required</li>}
|
|
{errors.fullName && <li>• Full name is required</li>}
|
|
{errors.email && <li>• Email is required</li>}
|
|
{errors.phone && <li>• Phone number is required</li>}
|
|
{errors.guestCount && <li>• Number of guests is required</li>}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* reCAPTCHA */}
|
|
<div className="mt-4">
|
|
<Recaptcha
|
|
onChange={(token) => {
|
|
console.log('reCAPTCHA token received:', token ? 'Yes' : 'No');
|
|
setRecaptchaToken(token || null);
|
|
}}
|
|
onError={(error) => {
|
|
console.error('reCAPTCHA error:', error);
|
|
setRecaptchaToken(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-t border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
|
|
<div className="flex items-center justify-between gap-2 sm:gap-3">
|
|
<button
|
|
onClick={currentStep === 'dates' ? onClose : handleBack}
|
|
className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-300 hover:text-white transition-colors flex items-center gap-1.5 sm:gap-2 min-h-[44px]"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
<span className="hidden xs:inline">{currentStep === 'dates' ? 'Cancel' : 'Back'}</span>
|
|
<span className="xs:hidden">{currentStep === 'dates' ? 'Cancel' : 'Back'}</span>
|
|
</button>
|
|
{currentStep !== 'payment' ? (
|
|
<button
|
|
onClick={handleNext}
|
|
disabled={!canGoToNextStep()}
|
|
className="px-4 sm:px-6 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm sm:text-base min-h-[44px]"
|
|
>
|
|
<span>Next</span>
|
|
<ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
console.log('Complete Booking button clicked');
|
|
console.log('Payment method:', paymentMethodForm);
|
|
console.log('Form errors:', errors);
|
|
console.log('Submitting:', submitting);
|
|
handleSubmit(onSubmit, (errors) => {
|
|
console.error('Form validation errors:', errors);
|
|
// Show validation errors
|
|
if (errors.checkInDate || errors.checkOutDate) {
|
|
toast.error('Please select check-in and check-out dates');
|
|
setCurrentStep('dates');
|
|
} else if (errors.fullName || errors.email || errors.phone || errors.guestCount) {
|
|
toast.error('Please complete all guest information fields');
|
|
setCurrentStep('guests');
|
|
} else if (errors.paymentMethod) {
|
|
toast.error('Please select a payment method');
|
|
} else {
|
|
toast.error('Please complete all required fields');
|
|
}
|
|
})();
|
|
}}
|
|
disabled={submitting || !paymentMethodForm}
|
|
className="px-4 sm:px-6 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm sm:text-base min-h-[44px]"
|
|
>
|
|
{submitting ? (
|
|
<>
|
|
<Loader2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 animate-spin" />
|
|
<span className="hidden xs:inline">Processing...</span>
|
|
<span className="xs:hidden">Processing...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="hidden sm:inline">Complete Booking</span>
|
|
<span className="sm:hidden">Complete</span>
|
|
<CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invoice Info Modal */}
|
|
{showInvoiceModal && (
|
|
<InvoiceInfoModal
|
|
isOpen={showInvoiceModal}
|
|
onClose={() => setShowInvoiceModal(false)}
|
|
onSave={(invoiceInfo) => {
|
|
setValue('invoiceInfo', invoiceInfo);
|
|
setShowInvoiceModal(false);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Payment Modals */}
|
|
{showPaymentModal && createdBookingId && paymentMethod && (
|
|
<>
|
|
{paymentMethod === 'stripe' && (
|
|
<StripePaymentModal
|
|
isOpen={showPaymentModal}
|
|
bookingId={createdBookingId}
|
|
amount={totalPrice}
|
|
currency={currency || 'USD'}
|
|
onSuccess={handlePaymentSuccess}
|
|
onClose={handlePaymentClose}
|
|
/>
|
|
)}
|
|
{paymentMethod === 'paypal' && (
|
|
<PayPalPaymentModal
|
|
isOpen={showPaymentModal}
|
|
bookingId={createdBookingId}
|
|
amount={totalPrice}
|
|
currency={currency || 'USD'}
|
|
onSuccess={handlePaymentSuccess}
|
|
onClose={handlePaymentClose}
|
|
/>
|
|
)}
|
|
{paymentMethod === 'cash' && (
|
|
<CashPaymentModal
|
|
isOpen={showPaymentModal}
|
|
bookingId={createdBookingId}
|
|
amount={totalPrice}
|
|
depositAmount={totalPrice * 0.2}
|
|
onSuccess={handlePaymentSuccess}
|
|
onClose={handlePaymentClose}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LuxuryBookingModal;
|
|
|