updates
This commit is contained in:
Iliyan Angelov
@@ -75,7 +75,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
const bookingData = response.data.booking;
|
||||
setBooking(bookingData);
|
||||
|
||||
// Check for pending Stripe payment
|
||||
|
||||
if (bookingData.payment_method === 'stripe' && bookingData.payments) {
|
||||
const pendingStripePayment = bookingData.payments.find(
|
||||
(p: any) =>
|
||||
@@ -84,13 +84,13 @@ const BookingSuccessPage: React.FC = () => {
|
||||
);
|
||||
|
||||
if (pendingStripePayment) {
|
||||
// Redirect to payment page for Stripe payment
|
||||
|
||||
navigate(`/payment/${bookingId}`, { replace: true });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Redirect to deposit payment page if required and not yet paid
|
||||
|
||||
if (
|
||||
bookingData.requires_deposit &&
|
||||
!bookingData.deposit_paid
|
||||
@@ -116,7 +116,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
// Use parseDateLocal to handle date strings correctly
|
||||
|
||||
const date = parseDateLocal(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
@@ -183,13 +183,13 @@ const BookingSuccessPage: React.FC = () => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
toast.error('Please select an image file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (max 5MB)
|
||||
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
toast.error('Image size must not exceed 5MB');
|
||||
return;
|
||||
@@ -197,7 +197,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
|
||||
setSelectedFile(file);
|
||||
|
||||
// Create preview
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setPreviewUrl(reader.result as string);
|
||||
@@ -211,7 +211,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
try {
|
||||
setUploadingReceipt(true);
|
||||
|
||||
// Generate transaction ID based on booking number
|
||||
|
||||
const transactionId =
|
||||
`TXN-${booking.booking_number}-${Date.now()}`;
|
||||
|
||||
@@ -228,7 +228,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
);
|
||||
setReceiptUploaded(true);
|
||||
|
||||
// Update booking payment status locally
|
||||
|
||||
setBooking((prev) =>
|
||||
prev
|
||||
? {
|
||||
@@ -304,7 +304,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
{/* Success Header */}
|
||||
{}
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-md
|
||||
p-8 mb-6 text-center"
|
||||
@@ -328,7 +328,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
Thank you for booking with our hotel
|
||||
</p>
|
||||
|
||||
{/* Booking Number */}
|
||||
{}
|
||||
<div
|
||||
className="inline-flex items-center gap-2
|
||||
bg-indigo-50 px-6 py-3 rounded-lg"
|
||||
@@ -357,7 +357,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
{}
|
||||
<div className="mt-4">
|
||||
<span
|
||||
className={`inline-block px-4 py-2
|
||||
@@ -369,7 +369,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Booking Details */}
|
||||
{}
|
||||
<div className="bg-white rounded-lg shadow-md
|
||||
p-6 mb-6"
|
||||
>
|
||||
@@ -380,18 +380,18 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Room Information */}
|
||||
{}
|
||||
{roomType && (
|
||||
<div className="border-b pb-4">
|
||||
<div className="flex items-start gap-4">
|
||||
{((room?.images && room.images.length > 0)
|
||||
? room.images[0]
|
||||
: roomType.images?.[0]) && (
|
||||
{((room?.room_type?.images && room.room_type.images.length > 0)
|
||||
? room.room_type.images[0]
|
||||
: roomType?.images?.[0]) && (
|
||||
<img
|
||||
src={(room?.images && room.images.length > 0)
|
||||
? room.images[0]
|
||||
: (roomType.images?.[0] || '')}
|
||||
alt={roomType.name}
|
||||
src={(room?.room_type?.images && room.room_type.images.length > 0)
|
||||
? room.room_type.images[0]
|
||||
: (roomType?.images?.[0] || '')}
|
||||
alt={roomType?.name || 'Room'}
|
||||
className="w-24 h-24 object-cover
|
||||
rounded-lg"
|
||||
/>
|
||||
@@ -414,14 +414,14 @@ const BookingSuccessPage: React.FC = () => {
|
||||
<p className="text-indigo-600
|
||||
font-semibold mt-1"
|
||||
>
|
||||
{formatPrice(room?.price || roomType.base_price)}/night
|
||||
{formatPrice(room?.room_type?.base_price || roomType?.base_price || 0)}/night
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dates */}
|
||||
{}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2
|
||||
gap-4"
|
||||
>
|
||||
@@ -445,7 +445,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guest Count */}
|
||||
{}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<Users className="w-4 h-4 inline mr-1" />
|
||||
@@ -456,7 +456,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{}
|
||||
{booking.notes && (
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
@@ -469,7 +469,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment Method */}
|
||||
{}
|
||||
<div className="border-t pt-4">
|
||||
<p className="text-sm text-gray-600 mb-1">
|
||||
<CreditCard className="w-4 h-4 inline mr-1" />
|
||||
@@ -482,7 +482,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Total Price */}
|
||||
{}
|
||||
<div className="border-t pt-4">
|
||||
{booking.original_price && booking.discount_amount && booking.discount_amount > 0 ? (
|
||||
<>
|
||||
@@ -515,7 +515,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guest Information */}
|
||||
{}
|
||||
{booking.guest_info && (
|
||||
<div className="bg-white rounded-lg shadow-md
|
||||
p-6 mb-6"
|
||||
@@ -557,8 +557,8 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bank Transfer Instructions */}
|
||||
{booking.payment_method === 'bank_transfer' && (
|
||||
{}
|
||||
{(booking.payment_method === 'cash' || (booking as any).payment_method === 'bank_transfer') && (
|
||||
<div
|
||||
className="bg-blue-50 border border-blue-200
|
||||
rounded-lg p-6 mb-6"
|
||||
@@ -582,7 +582,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
<div className="grid grid-cols-1
|
||||
md:grid-cols-2 gap-4"
|
||||
>
|
||||
{/* Bank Info */}
|
||||
{}
|
||||
<div className="bg-white rounded-lg
|
||||
p-4 space-y-2"
|
||||
>
|
||||
@@ -616,7 +616,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* QR Code */}
|
||||
{}
|
||||
{qrCodeUrl && (
|
||||
<div className="bg-white rounded-lg
|
||||
p-4 flex flex-col items-center
|
||||
@@ -650,7 +650,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload Receipt Section */}
|
||||
{}
|
||||
{!receiptUploaded ? (
|
||||
<div className="border-t border-blue-200
|
||||
pt-4"
|
||||
@@ -666,7 +666,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* File Input */}
|
||||
{}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="receipt-upload"
|
||||
@@ -681,55 +681,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
<input
|
||||
id="receipt-upload"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
<div className="flex flex-col
|
||||
items-center gap-2"
|
||||
>
|
||||
{previewUrl ? (
|
||||
<>
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Preview"
|
||||
className="w-32 h-32
|
||||
object-cover rounded"
|
||||
/>
|
||||
<p className="text-sm
|
||||
text-blue-600 font-medium"
|
||||
>
|
||||
{selectedFile?.name}
|
||||
</p>
|
||||
<p className="text-xs
|
||||
text-gray-500"
|
||||
>
|
||||
Click to select another image
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileText
|
||||
className="w-8 h-8
|
||||
text-blue-400"
|
||||
/>
|
||||
<p className="text-sm
|
||||
text-blue-600 font-medium"
|
||||
>
|
||||
Select receipt image
|
||||
</p>
|
||||
<p className="text-xs
|
||||
text-gray-500"
|
||||
>
|
||||
PNG, JPG, JPEG (Max 5MB)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Upload Button */}
|
||||
accept="image}
|
||||
{selectedFile && (
|
||||
<button
|
||||
onClick={handleUploadReceipt}
|
||||
@@ -791,7 +743,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Important Notice */}
|
||||
{}
|
||||
<div
|
||||
className="bg-yellow-50 border border-yellow-200
|
||||
rounded-lg p-4 mb-6"
|
||||
@@ -813,7 +765,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
If you cancel the booking, 20% of
|
||||
the total order value will be charged
|
||||
</li>
|
||||
{booking.payment_method === 'bank_transfer' && (
|
||||
{(booking.payment_method === 'cash' || (booking as any).payment_method === 'bank_transfer') && (
|
||||
<li>
|
||||
Please transfer within 24 hours
|
||||
to secure your room
|
||||
@@ -822,7 +774,7 @@ const BookingSuccessPage: React.FC = () => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link
|
||||
to="/bookings"
|
||||
|
||||
Reference in New Issue
Block a user