391 lines
17 KiB
TypeScript
391 lines
17 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useSearchParams, Link } from 'react-router-dom';
|
|
import { getRooms } from '../../features/rooms/services/roomService';
|
|
import type { Room } from '../../features/rooms/services/roomService';
|
|
import RoomFilter from '../../features/rooms/components/RoomFilter';
|
|
import RoomCard from '../../features/rooms/components/RoomCard';
|
|
import RoomCardSkeleton from '../../features/rooms/components/RoomCardSkeleton';
|
|
import Pagination from '../../shared/components/Pagination';
|
|
import { ArrowLeft, Hotel, Filter, ChevronDown, ChevronUp, Tag, X, CheckCircle } from 'lucide-react';
|
|
import { logger } from '../../shared/utils/logger';
|
|
import { toast } from 'react-toastify';
|
|
|
|
const RoomListPage: React.FC = () => {
|
|
const [searchParams] = useSearchParams();
|
|
const [rooms, setRooms] = useState<Room[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isFilterOpen, setIsFilterOpen] = useState(false);
|
|
const filterRef = useRef<HTMLDivElement>(null);
|
|
const [pagination, setPagination] = useState({
|
|
total: 0,
|
|
page: 1,
|
|
limit: 10,
|
|
totalPages: 1,
|
|
});
|
|
const abortControllerRef = useRef<AbortController | null>(null);
|
|
const [activePromotion, setActivePromotion] = useState<any>(null);
|
|
const [showPromotionBanner, setShowPromotionBanner] = useState(false);
|
|
|
|
// Check for active promotion from URL or sessionStorage
|
|
useEffect(() => {
|
|
const promoCode = searchParams.get('promo');
|
|
|
|
// Check sessionStorage first (from homepage promotion click)
|
|
try {
|
|
const storedPromotion = sessionStorage.getItem('activePromotion');
|
|
if (storedPromotion) {
|
|
const promo = JSON.parse(storedPromotion);
|
|
setActivePromotion(promo);
|
|
setShowPromotionBanner(true);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.warn('Failed to read promotion from sessionStorage:', error);
|
|
}
|
|
|
|
// Check URL params (fallback)
|
|
if (promoCode) {
|
|
setActivePromotion({
|
|
code: promoCode,
|
|
title: 'Special Offer',
|
|
discount: searchParams.get('discount') || '',
|
|
});
|
|
setShowPromotionBanner(true);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
const handleDismissPromotion = () => {
|
|
setShowPromotionBanner(false);
|
|
try {
|
|
sessionStorage.removeItem('activePromotion');
|
|
} catch (error) {
|
|
console.warn('Failed to remove promotion from sessionStorage:', error);
|
|
}
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if (isFilterOpen && filterRef.current && window.innerWidth < 1280) {
|
|
setTimeout(() => {
|
|
filterRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}, 100);
|
|
}
|
|
}, [isFilterOpen]);
|
|
|
|
|
|
useEffect(() => {
|
|
// Cancel previous request if exists
|
|
if (abortControllerRef.current) {
|
|
abortControllerRef.current.abort();
|
|
}
|
|
|
|
// Create new abort controller
|
|
abortControllerRef.current = new AbortController();
|
|
|
|
const fetchRooms = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const params = {
|
|
type: searchParams.get('type') || undefined,
|
|
minPrice: searchParams.get('minPrice')
|
|
? Number(searchParams.get('minPrice'))
|
|
: undefined,
|
|
maxPrice: searchParams.get('maxPrice')
|
|
? Number(searchParams.get('maxPrice'))
|
|
: undefined,
|
|
capacity: searchParams.get('capacity')
|
|
? Number(searchParams.get('capacity'))
|
|
: undefined,
|
|
page: searchParams.get('page')
|
|
? Number(searchParams.get('page'))
|
|
: 1,
|
|
limit: 12,
|
|
};
|
|
|
|
const response = await getRooms(params);
|
|
|
|
if ((response.status === 'success' || response.success) && response.data) {
|
|
setRooms(response.data.rooms || []);
|
|
if (response.data.pagination) {
|
|
setPagination(response.data.pagination);
|
|
}
|
|
} else {
|
|
throw new Error('Failed to fetch rooms');
|
|
}
|
|
} catch (err: any) {
|
|
// Don't show error if request was aborted
|
|
if (err.name === 'AbortError') {
|
|
return;
|
|
}
|
|
// Clear data when API connection fails
|
|
setRooms([]);
|
|
setPagination({
|
|
total: 0,
|
|
page: 1,
|
|
limit: 12,
|
|
totalPages: 0,
|
|
});
|
|
logger.error('Error fetching rooms', err);
|
|
setError('Unable to load room list. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchRooms();
|
|
|
|
// Cleanup: abort request on unmount
|
|
return () => {
|
|
if (abortControllerRef.current) {
|
|
abortControllerRef.current.abort();
|
|
}
|
|
};
|
|
}, [searchParams]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] w-full" style={{ width: '100vw', position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', marginTop: '-1.5rem', marginBottom: '-1.5rem' }}>
|
|
{}
|
|
{/* Promotion Banner */}
|
|
{showPromotionBanner && activePromotion && (
|
|
<div className="w-full bg-gradient-to-r from-[var(--luxury-gold)]/20 via-[var(--luxury-gold-light)]/15 to-[var(--luxury-gold)]/20 border-b border-[var(--luxury-gold)]/30">
|
|
<div className="w-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-12 2xl:px-16 3xl:px-20 py-4">
|
|
<div className="flex items-center justify-between gap-4 bg-gradient-to-r from-[#1a1a1a] to-[#0f0f0f] border border-[var(--luxury-gold)]/40 rounded-lg p-4 backdrop-blur-xl shadow-lg">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<div className="p-2 bg-[var(--luxury-gold)]/20 rounded-lg border border-[var(--luxury-gold)]/40">
|
|
<Tag className="w-5 h-5 text-[var(--luxury-gold)]" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<CheckCircle className="w-4 h-4 text-green-400" />
|
|
<span className="text-sm font-semibold text-[var(--luxury-gold)]">
|
|
Active Promotion: {activePromotion.code || activePromotion.title}
|
|
</span>
|
|
</div>
|
|
{activePromotion.discount && (
|
|
<p className="text-xs text-gray-300">
|
|
{activePromotion.discount} - {activePromotion.description || 'Valid on bookings'}
|
|
</p>
|
|
)}
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
The promotion code will be automatically applied when you book a room
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleDismissPromotion}
|
|
className="p-2 hover:bg-[var(--luxury-gold)]/10 rounded-lg transition-colors"
|
|
aria-label="Dismiss promotion"
|
|
>
|
|
<X className="w-5 h-5 text-gray-400 hover:text-white" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="w-full bg-gradient-to-br from-[#1a1a1a] via-[#0f0f0f] to-[#1a1a1a] border-b border-[var(--luxury-gold)]/10 pt-6 sm:pt-7 md:pt-8">
|
|
<div className="w-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-12 2xl:px-16 3xl:px-20 py-6 sm:py-7 md:py-8 lg:py-10">
|
|
{}
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center gap-2
|
|
bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)]
|
|
text-[#0f0f0f] hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)]
|
|
active:scale-95
|
|
mb-4 sm:mb-5 md:mb-6 transition-all duration-300
|
|
group font-medium tracking-wide text-sm
|
|
px-4 py-2 rounded-sm
|
|
shadow-lg shadow-[var(--luxury-gold)]/30 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/40
|
|
touch-manipulation"
|
|
>
|
|
<ArrowLeft className="w-4 h-4 sm:w-4 sm:h-4 group-hover:-translate-x-1 transition-transform" />
|
|
<span>Back to home</span>
|
|
</Link>
|
|
|
|
{}
|
|
<div className="text-center max-w-3xl mx-auto px-2">
|
|
<div className="inline-flex items-center justify-center gap-2 mb-3 sm:mb-4">
|
|
<div className="p-2 sm:p-2.5 bg-[var(--luxury-gold)]/10 rounded-lg border border-[var(--luxury-gold)]/30 backdrop-blur-sm">
|
|
<Hotel className="w-5 h-5 sm:w-5 sm:h-5 text-[var(--luxury-gold)]" />
|
|
</div>
|
|
</div>
|
|
<h1 className="text-2xl xs:text-3xl sm:text-4xl md:text-5xl font-serif font-semibold
|
|
text-white mb-2 sm:mb-3 tracking-tight leading-tight px-2
|
|
bg-gradient-to-r from-white via-[var(--luxury-gold)] to-white
|
|
bg-clip-text text-transparent"
|
|
>
|
|
Our Rooms & Suites
|
|
</h1>
|
|
<p className="text-gray-400 font-light tracking-wide text-xs sm:text-sm md:text-base max-w-xl mx-auto px-2 sm:px-4 leading-relaxed">
|
|
Discover our collection of luxurious accommodations,
|
|
each designed to provide an exceptional stay
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="w-full py-4 sm:py-5 md:py-6 lg:py-8">
|
|
<div className="w-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-12 2xl:px-16 3xl:px-20">
|
|
<div className="grid grid-cols-1 xl:grid-cols-12 gap-3 sm:gap-4 md:gap-5 lg:gap-6 xl:gap-7">
|
|
{}
|
|
<div className="xl:hidden order-1 mb-4">
|
|
<button
|
|
onClick={() => setIsFilterOpen(!isFilterOpen)}
|
|
className="w-full bg-gradient-to-br from-[#1a1a1a] to-[#0a0a0a]
|
|
border border-[var(--luxury-gold)]/30 rounded-xl p-4
|
|
backdrop-blur-xl shadow-lg shadow-[var(--luxury-gold)]/10
|
|
flex items-center justify-between gap-3
|
|
hover:border-[var(--luxury-gold)]/50 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/20
|
|
transition-all duration-300 touch-manipulation"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-[var(--luxury-gold)]/10 rounded-lg border border-[var(--luxury-gold)]/30">
|
|
<Filter className="w-5 h-5 text-[var(--luxury-gold)]" />
|
|
</div>
|
|
<span className="text-white font-medium tracking-wide text-base">
|
|
Filters
|
|
</span>
|
|
</div>
|
|
{isFilterOpen ? (
|
|
<ChevronUp className="w-5 h-5 text-[var(--luxury-gold)]" />
|
|
) : (
|
|
<ChevronDown className="w-5 h-5 text-[var(--luxury-gold)]" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{}
|
|
<aside
|
|
ref={filterRef}
|
|
className={`xl:col-span-3 order-2 xl:order-1 mb-4 sm:mb-5 md:mb-6 xl:mb-0 transition-all duration-300 ${
|
|
isFilterOpen ? 'block' : 'hidden xl:block'
|
|
}`}
|
|
>
|
|
<div className="xl:sticky xl:top-4 xl:max-h-[calc(100vh-2rem)] xl:overflow-y-auto">
|
|
<RoomFilter />
|
|
</div>
|
|
</aside>
|
|
|
|
{}
|
|
<main className="xl:col-span-9 order-3 xl:order-2">
|
|
{loading && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3
|
|
gap-3 sm:gap-4 md:gap-5 lg:gap-6"
|
|
>
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<RoomCardSkeleton key={index} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error && !loading && (
|
|
<div className="bg-gradient-to-br from-red-900/20 to-red-800/10
|
|
border border-red-500/30 rounded-xl p-6 sm:p-8 md:p-12 text-center
|
|
backdrop-blur-xl shadow-2xl shadow-red-500/10"
|
|
>
|
|
<div className="inline-flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20
|
|
bg-red-500/20 rounded-full mb-4 sm:mb-5 md:mb-6 border border-red-500/30"
|
|
>
|
|
<svg
|
|
className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 text-red-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0
|
|
9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p className="text-red-300 font-light text-sm sm:text-base md:text-lg mb-4 sm:mb-5 md:mb-6 tracking-wide px-2">{error}</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)]
|
|
text-[#0f0f0f] rounded-sm font-medium tracking-wide text-sm sm:text-base
|
|
hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] active:scale-95
|
|
transition-all duration-300 shadow-lg shadow-[var(--luxury-gold)]/30
|
|
touch-manipulation min-h-[44px]"
|
|
>
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && rooms.length === 0 && (
|
|
<div className="bg-gradient-to-br from-[#1a1a1a] to-[#0a0a0a]
|
|
border border-[var(--luxury-gold)]/20 rounded-xl p-8 sm:p-10 md:p-12 lg:p-16 text-center
|
|
backdrop-blur-xl shadow-2xl shadow-[var(--luxury-gold)]/5"
|
|
>
|
|
<div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24
|
|
bg-[var(--luxury-gold)]/10 rounded-2xl mb-4 sm:mb-5 md:mb-6 lg:mb-8 border border-[var(--luxury-gold)]/30"
|
|
>
|
|
<Hotel className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-[var(--luxury-gold)]" />
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl md:text-2xl font-serif font-semibold
|
|
text-white mb-3 sm:mb-4 tracking-wide px-2"
|
|
>
|
|
No matching rooms found
|
|
</h3>
|
|
<p className="text-gray-400 font-light tracking-wide mb-5 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg px-2">
|
|
Please try adjusting the filters or search differently
|
|
</p>
|
|
<button
|
|
onClick={() => window.location.href = '/rooms'}
|
|
className="px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)]
|
|
text-[#0f0f0f] rounded-sm font-medium tracking-wide text-sm sm:text-base
|
|
hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] active:scale-95
|
|
transition-all duration-300 shadow-lg shadow-[var(--luxury-gold)]/30
|
|
touch-manipulation min-h-[44px]"
|
|
>
|
|
Clear Filters
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && rooms.length > 0 && (
|
|
<>
|
|
{}
|
|
<div className="mb-3 sm:mb-4 md:mb-5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-3">
|
|
<p className="text-gray-400 font-light tracking-wide text-xs sm:text-sm md:text-base">
|
|
Showing <span className="text-[var(--luxury-gold)] font-medium">{rooms.length}</span> of{' '}
|
|
<span className="text-[var(--luxury-gold)] font-medium">{pagination.total}</span> rooms
|
|
</p>
|
|
</div>
|
|
|
|
{}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3
|
|
gap-3 sm:gap-4 md:gap-5 lg:gap-6 mb-4 sm:mb-5 md:mb-6"
|
|
>
|
|
{rooms.map((room) => (
|
|
<RoomCard key={room.id} room={room} />
|
|
))}
|
|
</div>
|
|
|
|
{pagination.totalPages > 1 && (
|
|
<div className="mt-4 sm:mt-5 md:mt-6 pt-3 sm:pt-4 border-t border-[var(--luxury-gold)]/20">
|
|
<Pagination
|
|
currentPage={pagination.page}
|
|
totalPages={pagination.totalPages}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RoomListPage;
|