/* BookingFlow.jsx — Unified booking + search/filter flow */ function BookingFlow() { const today = new Date().toISOString().slice(0, 10); const inThreeDays = new Date(Date.now() + 3 * 86400000).toISOString().slice(0, 10); const inWeek = new Date(Date.now() + 7 * 86400000).toISOString().slice(0, 10); // Parse URL params for pre-filled values (e.g. from homepage search) const params = new URLSearchParams(window.location.search); const [filters, setFilters] = React.useState({ checkIn: params.get('checkIn') || inThreeDays, checkOut: params.get('checkOut') || inWeek, guests: parseInt(params.get('guests') || '2'), bedrooms: params.get('bedrooms') || 'any', type: params.get('type') || 'all', neighborhood: params.get('neighborhood') || 'all', minPrice: parseInt(params.get('minPrice') || '0'), maxPrice: parseInt(params.get('maxPrice') || '5000'), amenities: [], sort: 'recommended', }); const [selected, setSelected] = React.useState(null); const [showMobileFilters, setShowMobileFilters] = React.useState(false); // Calculate nights const nights = Math.max(1, Math.ceil((new Date(filters.checkOut) - new Date(filters.checkIn)) / 86400000)); // Source properties — the LIVE catalog (real Hospitable villas) via NovusCatalog, // with a graceful fallback. Re-renders when the live catalog arrives. const [allProperties, setAllProperties] = React.useState(() => { if (typeof window === 'undefined') return []; if (window.NovusCatalog) return window.NovusCatalog.getProperties(); return window.NOVUS_PROPERTIES || []; }); React.useEffect(() => { if (window.NovusCatalog && window.NovusCatalog.load) { window.NovusCatalog.load().then((list) => { if (list && list.length) setAllProperties(list); }); } const onCatalog = (e) => { const l = e.detail && e.detail.properties; if (l && l.length) setAllProperties(l); }; window.addEventListener('novus-catalog', onCatalog); return () => window.removeEventListener('novus-catalog', onCatalog); }, []); // Lock body scroll while the mobile filter drawer is open (Airbnb behavior). React.useEffect(() => { const prev = document.body.style.overflow; if (showMobileFilters) document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [showMobileFilters]); // Keep in sync with locally-edited catalog ONLY in demo mode; in live mode the // catalog comes from NovusCatalog (above) and must not be overwritten by the // empty live-mode HostData store. React.useEffect(() => { const isLive = window.NovusCatalog && window.NovusCatalog.isLive && window.NovusCatalog.isLive(); if (isLive) return; const refresh = () => { if (window.HostData && window.HostData.getProperties) setAllProperties(window.HostData.getProperties()); }; const onStorage = (e) => { if (e.key === 'novus_properties') refresh(); }; const onLocal = (e) => { if (e.detail?.key === 'novus_properties') refresh(); }; window.addEventListener('storage', onStorage); window.addEventListener('host-data-change', onLocal); return () => { window.removeEventListener('storage', onStorage); window.removeEventListener('host-data-change', onLocal); }; }, []); // Apply filters const filtered = React.useMemo(() => { return allProperties.filter(p => { // Type if (filters.type !== 'all' && p.kind !== filters.type) return false; // Neighborhood if (filters.neighborhood !== 'all' && p.neighborhood !== filters.neighborhood) return false; // Bedrooms if (filters.bedrooms !== 'any') { const bedNum = parseInt(filters.bedrooms); const propBeds = parseInt((p.facts || []).find(f => /bedroom/i.test(f))?.match(/\d+/)?.[0] || 0); if (propBeds < bedNum) return false; } // Price range if (p.rate < filters.minPrice || p.rate > filters.maxPrice) return false; // Guests capacity const sleepsMatch = (p.facts || []).find(f => /sleep/i.test(f)); const capacity = parseInt(sleepsMatch?.match(/\d+/)?.[0] || '10'); if (filters.guests > capacity) return false; return true; }); }, [allProperties, filters]); const sorted = React.useMemo(() => { const arr = [...filtered]; switch (filters.sort) { case 'price-asc': return arr.sort((a, b) => a.rate - b.rate); case 'price-desc': return arr.sort((a, b) => b.rate - a.rate); case 'rating': return arr.sort((a, b) => (b.rating || 0) - (a.rating || 0)); default: return arr; } }, [filtered, filters.sort]); // Get unique neighborhoods const neighborhoods = ['all', ...new Set(allProperties.map(p => p.neighborhood).filter(Boolean))]; function updateFilter(key, value) { setFilters(f => ({ ...f, [key]: value })); } function resetFilters() { setFilters({ checkIn: inThreeDays, checkOut: inWeek, guests: 2, bedrooms: 'any', type: 'all', neighborhood: 'all', minPrice: 0, maxPrice: 5000, amenities: [], sort: 'recommended', }); } return ( <> {/* Booking Hero */}
Find your stay

Browse eight luxury residences

{sorted.length} {sorted.length === 1 ? 'property' : 'properties'} available · {nights} night{nights !== 1 ? 's' : ''} · {filters.guests} guest{filters.guests !== 1 ? 's' : ''}

{/* Booking Layout */}
{/* Mobile filter toggle */}
{/* Filter Sidebar */} {/* Results */}
{/* Sort + count */}
{sorted.length} properties found
Sort:
{sorted.length === 0 ? (

No properties match your filters.

Try adjusting your dates, guest count, or price range.

) : (
{sorted.map((p, i) => (
{ const url = new URL(`property-${p.id}.html`, window.location.href); url.searchParams.set('checkIn', filters.checkIn); url.searchParams.set('checkOut', filters.checkOut); url.searchParams.set('guests', filters.guests); window.location.href = url.toString(); }} />
))}
)}
); } /* Card component for booking results */ function BookingResultCard({ p, nights, onSelect }) { const total = (p.rate || 0) * nights; return (
{p.name} {p.badge && (
{p.badge}
)} {p.rating && (
★ {p.rating}
)}

{p.name}

{p.neighborhood}
{(p.facts || []).slice(0, 3).map(f => ( {f} ))}
${p.rate} / night
${total.toLocaleString()} for {nights} nights
View →
); } window.BookingFlow = BookingFlow; window.BookingResultCard = BookingResultCard;