Deploy

2026-07-15 09:25:22 +00:00
parent c3cfdab7f8
commit 32fe429b1e
1 changed files with 171 additions and 0 deletions
@@ -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<string, string> = { 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 (
+    <div className="bg-card rounded-2xl border border-border overflow-hidden hover:shadow-lg transition-all group">
+      {room.thumbnail && (
+        <div className="relative aspect-video overflow-hidden bg-muted">
+          <Image src={room.thumbnail} alt={room.title} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" className="object-cover group-hover:scale-105 transition-transform duration-300" />
+        </div>
+      )}
+      <div className="p-5">
+        <div className="flex items-start justify-between gap-3 mb-2">
+          <h2 className="text-lg font-semibold leading-tight">{room.title}</h2>
+          {avail.loading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground shrink-0 mt-0.5" />}
+          {!avail.loading && avail.available === true && <CircleCheck className="h-4 w-4 text-green-500 shrink-0 mt-0.5" />}
+          {!avail.loading && avail.available === false && <CircleX className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />}
+        </div>
+        {room.description && <p className="text-muted-foreground text-sm mb-4 line-clamp-2">{room.description}</p>}
+        <div className="flex items-end justify-between mb-4">
+          <div>
+            {nightly > 0 && <p className="text-xl font-bold text-primary">{formatPrice(nightly, price?.currency_code)}<span className="text-sm font-normal text-muted-foreground">/night</span></p>}
+            {nights > 0 && total > 0 && <p className="text-xs text-muted-foreground mt-0.5">{nights} night{nights !== 1 ? 's' : ''} = {formatPrice(total, price?.currency_code)} total</p>}
+          </div>
+          {avail.available === true && <span className="text-xs bg-green-50 text-green-700 border border-green-200 px-2 py-0.5 rounded-full">Available</span>}
+          {avail.available === false && <span className="text-xs bg-red-50 text-red-600 border border-red-200 px-2 py-0.5 rounded-full">Unavailable</span>}
+        </div>
+        <Link
+          href={unavailable ? '#' : href}
+          aria-disabled={unavailable}
+          className={"flex items-center justify-center gap-1.5 w-full py-2.5 rounded-xl font-medium text-sm transition-all " + (unavailable ? "bg-muted text-muted-foreground cursor-not-allowed pointer-events-none" : "bg-primary text-primary-foreground hover:bg-primary/90")}
+        >
+          {unavailable ? 'Not Available' : 'Select Room'}
+          {!unavailable && <ArrowRight className="h-3.5 w-3.5" />}
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+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<SearchRoom[]>([])
+  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 (
+    <main className="min-h-screen bg-background">
+      <div className="bg-card border-b border-border sticky top-0 z-10 shadow-sm">
+        <div className="container mx-auto px-4 py-4">
+          <form onSubmit={handleSearch} className="flex flex-wrap gap-3 items-end">
+            <div className="flex-1 min-w-[130px]">
+              <label className="block text-xs font-medium text-muted-foreground mb-1 uppercase tracking-wide">Check-in</label>
+              <input type="date" value={checkIn} min={today} onChange={e => 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" />
+            </div>
+            <div className="flex-1 min-w-[130px]">
+              <label className="block text-xs font-medium text-muted-foreground mb-1 uppercase tracking-wide">Check-out</label>
+              <input type="date" value={checkOut} min={checkIn} onChange={e => 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" />
+            </div>
+            <div className="w-24">
+              <label className="block text-xs font-medium text-muted-foreground mb-1 uppercase tracking-wide">Guests</label>
+              <select value={guests} onChange={e => setGuests(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">
+                {[1,2,3,4,5,6,7,8].map(n => <option key={n} value={n}>{n}</option>)}
+              </select>
+            </div>
+            <button type="submit" className="bg-primary text-primary-foreground px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors flex items-center gap-2">
+              <Search className="h-4 w-4" />Update
+            </button>
+          </form>
+          {nights > 0 && (
+            <p className="text-xs text-muted-foreground mt-2">
+              {nights} night{nights !== 1 ? 's' : ''} · {guests} guest{Number(guests) !== 1 ? 's' : ''} · Checking availability…
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="container mx-auto px-4 py-8">
+        {loading ? (
+          <div className="flex items-center justify-center py-24"><Loader2 className="h-10 w-10 animate-spin text-primary" /></div>
+        ) : rooms.length === 0 ? (
+          <div className="text-center py-24">
+            <BedDouble className="h-16 w-16 mx-auto mb-4 text-muted-foreground/30" />
+            <p className="text-lg font-medium mb-2">No rooms available</p>
+            <p className="text-muted-foreground text-sm">Please contact us directly to check availability.</p>
+          </div>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground mb-6">{rooms.length} room{rooms.length !== 1 ? 's' : ''} · {nights > 0 ? `${nights} night${nights !== 1 ? 's' : ''}` : 'Select dates above'}</p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {rooms.map(room => (
+                <RoomCard key={room.id} room={room} checkIn={checkIn} checkOut={checkOut} guests={guests} nights={nights} />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </main>
+  )
+}
+
+export default function BookingSearchPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen flex items-center justify-center"><Loader2 className="h-10 w-10 animate-spin text-primary" /></div>}>
+      <BookingSearchContent />
+    </Suspense>
+  )
+}