Vula Builder
287 lines
14 KiB
TypeScript
287 lines
14 KiB
TypeScript
'use client'
|
||
import { useState, useEffect, Suspense } from 'react'
|
||
import { useParams, useSearchParams } from 'next/navigation'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
import { ArrowLeft, CalendarCheck, CircleCheck, Loader2 } 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)}`
|
||
}
|
||
|
||
interface Room {
|
||
id: string
|
||
title: string
|
||
description: string
|
||
thumbnail: string
|
||
images: { url: string }[]
|
||
variants: { id: string; prices: { amount: number; currency_code: string }[] }[]
|
||
}
|
||
|
||
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))
|
||
}
|
||
|
||
function BookingPageContent() {
|
||
const params = useParams()
|
||
const searchParams = useSearchParams()
|
||
const productId = params.productId as string
|
||
const today = new Date().toISOString().split('T')[0]
|
||
|
||
const [room, setRoom] = useState<Room | null>(null)
|
||
const [loadingRoom, setLoadingRoom] = useState(true)
|
||
const [activeImg, setActiveImg] = useState(0)
|
||
|
||
const [checkIn, setCheckIn] = useState(searchParams.get('checkIn') || '')
|
||
const [checkOut, setCheckOut] = useState(searchParams.get('checkOut') || '')
|
||
const [availability, setAvailability] = useState<{ available: boolean } | null>(null)
|
||
const [checkingAvail, setCheckingAvail] = useState(false)
|
||
|
||
const [form, setForm] = useState({ name: '', email: '', phone: '', notes: '' })
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const [success, setSuccess] = useState(false)
|
||
const [confirmNo, setConfirmNo] = useState('')
|
||
const [error, setError] = useState('')
|
||
|
||
useEffect(() => {
|
||
if (!productId) return
|
||
fetch(`/api/medusa/store/products/${productId}?fields=*variants,*images`)
|
||
.then(r => r.json())
|
||
.then(d => { setRoom(d.product ?? null); setLoadingRoom(false) })
|
||
.catch(() => setLoadingRoom(false))
|
||
}, [productId])
|
||
|
||
useEffect(() => {
|
||
if (!checkIn || !checkOut || !room) return
|
||
if (new Date(checkOut) <= new Date(checkIn)) return
|
||
setCheckingAvail(true)
|
||
setAvailability(null)
|
||
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 => { setAvailability(d.available != null ? { available: d.available } : null); setCheckingAvail(false) })
|
||
.catch(() => setCheckingAvail(false))
|
||
}, [checkIn, checkOut, room])
|
||
|
||
const nights = calcNights(checkIn, checkOut)
|
||
const variant = room?.variants?.[0]
|
||
const price = variant?.prices?.[0]
|
||
const pricePerNight = price?.amount ?? 0
|
||
const currency = price?.currency_code
|
||
const totalPrice = pricePerNight * nights
|
||
const allImages = room ? [room.thumbnail, ...(room.images?.map(i => i.url) ?? [])].filter(Boolean) : []
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (!room || !availability?.available || nights === 0) return
|
||
setSubmitting(true)
|
||
setError('')
|
||
try {
|
||
const res = await fetch('/api/medusa/store/hotel/bookings', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
room_type: room.id,
|
||
check_in: checkIn,
|
||
check_out: checkOut,
|
||
customer_name: form.name,
|
||
customer_email: form.email || null,
|
||
customer_phone: form.phone,
|
||
notes: form.notes || null,
|
||
}),
|
||
signal: AbortSignal.timeout(15000),
|
||
})
|
||
const data = await res.json()
|
||
if (!res.ok) throw new Error(data.error || 'Booking failed')
|
||
setConfirmNo(data.confirmation_number ?? '')
|
||
setSuccess(true)
|
||
} catch (err: any) {
|
||
setError(err.message === 'Room is not available for the selected dates'
|
||
? 'Sorry, those dates are no longer available. Please choose different dates.'
|
||
: 'Something went wrong. Please try again or call us directly.')
|
||
}
|
||
setSubmitting(false)
|
||
}
|
||
|
||
if (loadingRoom) return (
|
||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||
<Loader2 className="h-10 w-10 animate-spin text-primary" />
|
||
</div>
|
||
)
|
||
|
||
if (!room) return (
|
||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||
<p className="text-muted-foreground mr-4">Room not found.</p>
|
||
<Link href="/rooms" className="text-primary hover:underline">Back to Rooms</Link>
|
||
</div>
|
||
)
|
||
|
||
if (success) return (
|
||
<main className="min-h-screen bg-background flex items-center justify-center p-4">
|
||
<div className="max-w-md w-full text-center">
|
||
<div className="bg-card border border-border rounded-2xl p-10">
|
||
<CircleCheck className="h-16 w-16 text-green-500 mx-auto mb-4" />
|
||
<h1 className="text-2xl font-bold mb-1">Booking Confirmed!</h1>
|
||
{confirmNo && <p className="text-xs text-muted-foreground mb-4">Ref: {confirmNo}</p>}
|
||
<p className="font-semibold mb-1">{room.title}</p>
|
||
<p className="text-muted-foreground text-sm mb-1">Check-in: {checkIn}</p>
|
||
<p className="text-muted-foreground text-sm mb-3">Check-out: {checkOut}</p>
|
||
{nights > 0 && totalPrice > 0 && (
|
||
<p className="text-lg font-bold text-primary mb-4">{formatPrice(totalPrice, currency)} total · {nights} night{nights !== 1 ? 's' : ''}</p>
|
||
)}
|
||
<p className="text-sm text-muted-foreground mb-8">
|
||
{form.email ? `A confirmation will be sent to ${form.email}.` : `We will call ${form.phone} to confirm your reservation.`}
|
||
</p>
|
||
<Link href="/rooms" className="bg-primary text-primary-foreground px-8 py-3 rounded-lg hover:bg-primary/90 transition-colors font-medium inline-block">
|
||
Browse More Rooms
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
)
|
||
|
||
return (
|
||
<main className="min-h-screen bg-background">
|
||
<div className="container mx-auto px-4 py-10 max-w-5xl">
|
||
<Link href="/rooms" className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8 transition-colors text-sm">
|
||
<ArrowLeft className="h-4 w-4" />Back to Rooms
|
||
</Link>
|
||
<div className="grid lg:grid-cols-2 gap-10">
|
||
|
||
{/* Left — Room details */}
|
||
<div>
|
||
{allImages.length > 0 && (
|
||
<div className="mb-5">
|
||
<div className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-muted mb-3">
|
||
<Image src={allImages[activeImg]} alt={room.title} fill sizes="(max-width: 1024px) 100vw, 50vw" className="object-cover" />
|
||
</div>
|
||
{allImages.length > 1 && (
|
||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||
{allImages.map((img, i) => (
|
||
<button key={i} onClick={() => setActiveImg(i)}
|
||
className={"relative flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all " + (activeImg === i ? "border-primary" : "border-transparent opacity-60 hover:opacity-100")}>
|
||
<Image src={img} alt="" fill sizes="64px" className="object-cover" />
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
<h1 className="text-2xl font-bold mb-3">{room.title}</h1>
|
||
{room.description && <p className="text-muted-foreground leading-relaxed mb-5">{room.description}</p>}
|
||
{pricePerNight > 0 && (
|
||
<p className="text-3xl font-bold text-primary">
|
||
{formatPrice(pricePerNight, currency)}
|
||
<span className="text-base font-normal text-muted-foreground"> / night</span>
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Right — Booking form */}
|
||
<div>
|
||
<div className="bg-card border border-border rounded-2xl p-6 sticky top-6">
|
||
<h2 className="text-xl font-semibold mb-5 flex items-center gap-2">
|
||
<CalendarCheck className="h-5 w-5 text-primary" />Reserve This Room
|
||
</h2>
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
|
||
{/* Dates */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="block text-xs font-medium mb-1 text-muted-foreground uppercase tracking-wide">Check-in</label>
|
||
<input required type="date" min={today} value={checkIn}
|
||
onChange={e => { setCheckIn(e.target.value); setAvailability(null) }}
|
||
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>
|
||
<label className="block text-xs font-medium mb-1 text-muted-foreground uppercase tracking-wide">Check-out</label>
|
||
<input required type="date" min={checkIn || today} value={checkOut}
|
||
onChange={e => { setCheckOut(e.target.value); setAvailability(null) }}
|
||
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>
|
||
|
||
{/* Availability indicator */}
|
||
{checkingAvail && <p className="text-xs text-muted-foreground animate-pulse">Checking availability…</p>}
|
||
{availability && (
|
||
<div className={"text-xs font-medium px-3 py-2 rounded-lg border " + (availability.available
|
||
? "bg-green-50 text-green-700 border-green-200"
|
||
: "bg-red-50 text-red-700 border-red-200")}>
|
||
{availability.available ? "✓ Available for selected dates" : "✗ Not available for selected dates — please choose different dates"}
|
||
</div>
|
||
)}
|
||
|
||
{/* Price breakdown */}
|
||
{nights > 0 && pricePerNight > 0 && (
|
||
<div className="bg-muted/50 rounded-lg p-3 text-sm">
|
||
<div className="flex justify-between text-muted-foreground mb-1">
|
||
<span>{formatPrice(pricePerNight, currency)} × {nights} night{nights !== 1 ? 's' : ''}</span>
|
||
<span>{formatPrice(totalPrice, currency)}</span>
|
||
</div>
|
||
<div className="flex justify-between font-semibold border-t border-border pt-2 mt-1">
|
||
<span>Total</span>
|
||
<span className="text-primary">{formatPrice(totalPrice, currency)}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Guest details */}
|
||
<div className="border-t border-border pt-4 space-y-3">
|
||
<div>
|
||
<label className="block text-xs font-medium mb-1 text-muted-foreground uppercase tracking-wide">Full Name *</label>
|
||
<input required type="text" value={form.name}
|
||
onChange={e => setForm(f => ({...f, name: 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>
|
||
<label className="block text-xs font-medium mb-1 text-muted-foreground uppercase tracking-wide">Email</label>
|
||
<input type="email" value={form.email}
|
||
onChange={e => setForm(f => ({...f, email: 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>
|
||
<label className="block text-xs font-medium mb-1 text-muted-foreground uppercase tracking-wide">Phone *</label>
|
||
<input required type="tel" value={form.phone}
|
||
onChange={e => setForm(f => ({...f, phone: e.target.value}))}
|
||
placeholder="+27 "
|
||
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>
|
||
<label className="block text-xs font-medium mb-1 text-muted-foreground uppercase tracking-wide">Special Requests</label>
|
||
<textarea rows={2} value={form.notes}
|
||
onChange={e => setForm(f => ({...f, notes: 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 resize-none" />
|
||
</div>
|
||
</div>
|
||
|
||
{error && <p className="text-destructive text-sm">{error}</p>}
|
||
|
||
<button type="submit"
|
||
disabled={submitting || !availability?.available || nights === 0}
|
||
className="w-full bg-primary text-primary-foreground py-3 rounded-lg hover:bg-primary/90 transition-colors font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
|
||
{submitting ? 'Confirming…' : nights > 0 && totalPrice > 0
|
||
? `Confirm — ${formatPrice(totalPrice, currency)}`
|
||
: 'Confirm Reservation'}
|
||
</button>
|
||
<p className="text-xs text-center text-muted-foreground">Payment due at check-in · No charge now</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|
||
|
||
export default function BookingPage() {
|
||
return (
|
||
<Suspense fallback={<div className="min-h-screen flex items-center justify-center"><Loader2 className="h-10 w-10 animate-spin text-primary" /></div>}>
|
||
<BookingPageContent />
|
||
</Suspense>
|
||
)
|
||
}
|