From 32fe429b1e433dde1a5d0a7be33076492949f474 Mon Sep 17 00:00:00 2001 From: Vula Builder Date: Wed, 15 Jul 2026 09:25:22 +0000 Subject: [PATCH] Deploy --- src/app/booking/page.tsx | 171 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 src/app/booking/page.tsx diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx new file mode 100644 index 0000000..b26ca7b --- /dev/null +++ b/src/app/booking/page.tsx @@ -0,0 +1,171 @@ +'use client' +import { useState, useEffect, Suspense } from 'react' +import { useSearchParams, useRouter } from 'next/navigation' +import Image from 'next/image' +import Link from 'next/link' +import { ArrowRight, BedDouble, CircleCheck, CircleX, Loader2, Search } from 'lucide-react' + +const CURRENCY_SYMBOLS: Record = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' } +const formatPrice = (amount: number, code?: string) => { + const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '') + return `${sym}${(amount / 100).toFixed(0)}` +} + +function calcNights(checkIn: string, checkOut: string) { + if (!checkIn || !checkOut) return 0 + return Math.max(0, Math.round((new Date(checkOut).getTime() - new Date(checkIn).getTime()) / 86400000)) +} + +interface SearchRoom { + id: string + title: string + description: string + thumbnail: string + variants: { id: string; prices: { amount: number; currency_code: string }[] }[] +} + +function RoomCard({ room, checkIn, checkOut, guests, nights }: { room: SearchRoom; checkIn: string; checkOut: string; guests: string; nights: number }) { + const [avail, setAvail] = useState<{ available: boolean | null; loading: boolean }>({ available: null, loading: false }) + const price = room.variants?.[0]?.prices?.[0] + const nightly = price?.amount ?? 0 + const total = nightly * nights + + useEffect(() => { + if (!checkIn || !checkOut || nights === 0) { setAvail({ available: null, loading: false }); return } + setAvail({ available: null, loading: true }) + const qs = new URLSearchParams({ room_type: room.id, check_in: checkIn, check_out: checkOut }).toString() + fetch(`/api/medusa/store/hotel/bookings?${qs}`) + .then(r => r.json()) + .then(d => setAvail({ available: d.available ?? null, loading: false })) + .catch(() => setAvail({ available: null, loading: false })) + }, [room.id, checkIn, checkOut, nights]) + + const unavailable = avail.available === false + const href = `/booking/${room.id}?checkIn=${checkIn}&checkOut=${checkOut}&guests=${guests}` + + return ( +
+ {room.thumbnail && ( +
+ {room.title} +
+ )} +
+
+

{room.title}

+ {avail.loading && } + {!avail.loading && avail.available === true && } + {!avail.loading && avail.available === false && } +
+ {room.description &&

{room.description}

} +
+
+ {nightly > 0 &&

{formatPrice(nightly, price?.currency_code)}/night

} + {nights > 0 && total > 0 &&

{nights} night{nights !== 1 ? 's' : ''} = {formatPrice(total, price?.currency_code)} total

} +
+ {avail.available === true && Available} + {avail.available === false && Unavailable} +
+ + {unavailable ? 'Not Available' : 'Select Room'} + {!unavailable && } + +
+
+ ) +} + +function BookingSearchContent() { + const searchParams = useSearchParams() + const router = useRouter() + const today = new Date().toISOString().split('T')[0] + const tomorrow = new Date(Date.now() + 86400000).toISOString().split('T')[0] + + const [checkIn, setCheckIn] = useState(searchParams.get('checkIn') || today) + const [checkOut, setCheckOut] = useState(searchParams.get('checkOut') || tomorrow) + const [guests, setGuests] = useState(searchParams.get('guests') || '2') + const [rooms, setRooms] = useState([]) + const [loading, setLoading] = useState(true) + + const nights = calcNights(checkIn, checkOut) + + useEffect(() => { + fetch('/api/medusa/products?limit=50') + .then(r => r.json()) + .then(d => { setRooms(d.products ?? []); setLoading(false) }) + .catch(() => setLoading(false)) + }, []) + + function handleSearch(e: React.FormEvent) { + e.preventDefault() + router.push(`/booking?checkIn=${checkIn}&checkOut=${checkOut}&guests=${guests}`) + } + + return ( +
+
+
+
+
+ + setCheckIn(e.target.value)} + className="w-full border border-border rounded-lg px-3 py-2 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary" /> +
+
+ + setCheckOut(e.target.value)} + className="w-full border border-border rounded-lg px-3 py-2 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary" /> +
+
+ + +
+ +
+ {nights > 0 && ( +

+ {nights} night{nights !== 1 ? 's' : ''} · {guests} guest{Number(guests) !== 1 ? 's' : ''} · Checking availability… +

+ )} +
+
+
+ {loading ? ( +
+ ) : rooms.length === 0 ? ( +
+ +

No rooms available

+

Please contact us directly to check availability.

+
+ ) : ( + <> +

{rooms.length} room{rooms.length !== 1 ? 's' : ''} · {nights > 0 ? `${nights} night${nights !== 1 ? 's' : ''}` : 'Select dates above'}

+
+ {rooms.map(room => ( + + ))} +
+ + )} +
+
+ ) +} + +export default function BookingSearchPage() { + return ( + }> + + + ) +}