Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,221 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { CalendarCheck, CircleCheck, CircleX, Loader2, TriangleAlert } from 'lucide-react'
|
||||||
|
|
||||||
|
const COMMERCE_URL = process.env.NEXT_PUBLIC_VULA_COMMERCE_URL || ''
|
||||||
|
const PROJECT_ID = process.env.NEXT_PUBLIC_VULA_PROJECT_ID || ''
|
||||||
|
|
||||||
|
type Booking = {
|
||||||
|
confirmation_code: string
|
||||||
|
status: string
|
||||||
|
product_name: string | null
|
||||||
|
booking_date: string | null
|
||||||
|
check_in_date: string | null
|
||||||
|
check_out_date: string | null
|
||||||
|
time_slot: string | null
|
||||||
|
customer_name: string | null
|
||||||
|
policy_text: string | null
|
||||||
|
cancel_deadline: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
// A date column arrives as a timestamp, not a day. Appending a time to it
|
||||||
|
// gives Invalid Date, so take the first ten characters and build from those.
|
||||||
|
function prettyDay(value: string | null): string {
|
||||||
|
if (!value) return ''
|
||||||
|
const d = new Date(value.slice(0, 10) + 'T00:00:00')
|
||||||
|
if (isNaN(d.getTime())) return ''
|
||||||
|
return d.toLocaleDateString('en-ZA', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// "Tuesday 3 June, 08:30" — a moment. Working out what "three hours before"
|
||||||
|
// means is arithmetic on a phone, at the point someone is least inclined.
|
||||||
|
function prettyMoment(value: string | null): string {
|
||||||
|
if (!value) return ''
|
||||||
|
const d = new Date(value)
|
||||||
|
if (isNaN(d.getTime())) return ''
|
||||||
|
return d.toLocaleString('en-ZA', { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ManageBookingPage() {
|
||||||
|
const params = useParams()
|
||||||
|
const code = String(params?.code ?? '').toUpperCase()
|
||||||
|
|
||||||
|
const [booking, setBooking] = useState<Booking | null>(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [missing, setMissing] = useState(false)
|
||||||
|
const [confirming, setConfirming] = useState(false)
|
||||||
|
const [cancelling, setCancelling] = useState(false)
|
||||||
|
const [message, setMessage] = useState('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!code) { setLoading(false); setMissing(true); return }
|
||||||
|
fetch(COMMERCE_URL + '/api/store/' + PROJECT_ID + '/bookings/confirm/' + code)
|
||||||
|
.then(r => r.ok ? r.json() : null)
|
||||||
|
.then(d => {
|
||||||
|
if (d?.success && d.booking) setBooking(d.booking as Booking)
|
||||||
|
else setMissing(true)
|
||||||
|
})
|
||||||
|
.catch(() => setMissing(true))
|
||||||
|
.finally(() => setLoading(false))
|
||||||
|
}, [code])
|
||||||
|
|
||||||
|
// Whether cancelling now counts as late. Worked out here as well as on the
|
||||||
|
// server so the patient is told BEFORE they tap, not after — the whole
|
||||||
|
// purpose of the policy is that nobody is surprised by a charge.
|
||||||
|
const isLate = (() => {
|
||||||
|
if (!booking?.cancel_deadline) return false
|
||||||
|
const by = new Date(booking.cancel_deadline)
|
||||||
|
if (isNaN(by.getTime())) return false
|
||||||
|
return new Date() > by
|
||||||
|
})()
|
||||||
|
|
||||||
|
async function cancelBooking() {
|
||||||
|
setCancelling(true)
|
||||||
|
try {
|
||||||
|
const res = await fetch(COMMERCE_URL + '/api/store/' + PROJECT_ID + '/bookings/' + code + '/cancel', { method: 'POST' })
|
||||||
|
const d = await res.json().catch(() => ({}))
|
||||||
|
// The server's sentence goes straight through. It knows whether this was
|
||||||
|
// inside the notice period; the browser's clock is a courtesy, not the
|
||||||
|
// record.
|
||||||
|
setMessage(d?.message || d?.error || 'Your appointment is cancelled.')
|
||||||
|
setBooking(b => b ? { ...b, status: 'cancelled' } : b)
|
||||||
|
} catch {
|
||||||
|
setMessage('We could not cancel that just now — please phone us.')
|
||||||
|
} finally {
|
||||||
|
setCancelling(false)
|
||||||
|
setConfirming(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const when = booking?.check_in_date
|
||||||
|
? prettyDay(booking.check_in_date) + (booking.check_out_date ? ' to ' + prettyDay(booking.check_out_date) : '')
|
||||||
|
: prettyDay(booking?.booking_date ?? null)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-background py-16 px-4">
|
||||||
|
<div className="max-w-lg mx-auto">
|
||||||
|
{loading && (
|
||||||
|
<div className="flex items-center justify-center gap-3 py-24 text-muted-foreground">
|
||||||
|
<Loader2 className="w-5 h-5 animate-spin" aria-hidden="true" />
|
||||||
|
<span>Finding your booking…</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && missing && (
|
||||||
|
<div className="rounded-2xl border border-border bg-card p-8 text-center">
|
||||||
|
<TriangleAlert className="w-8 h-8 mx-auto mb-4 text-muted-foreground" aria-hidden="true" />
|
||||||
|
<h1 className="text-xl font-semibold mb-2">We couldn't find that booking</h1>
|
||||||
|
<p className="text-muted-foreground text-sm mb-6">
|
||||||
|
Check the reference in your confirmation message, or phone us and we'll find it for you.
|
||||||
|
</p>
|
||||||
|
<Link href="/" className="text-primary underline underline-offset-4">Back to the website</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && booking && (
|
||||||
|
<div className="rounded-2xl border border-border bg-card overflow-hidden">
|
||||||
|
<div className="px-8 pt-8 pb-6 border-b border-border">
|
||||||
|
<div className="flex items-center gap-2 mb-1 text-sm text-muted-foreground">
|
||||||
|
<CalendarCheck className="w-4 h-4" aria-hidden="true" />
|
||||||
|
<span>Your booking</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-semibold">{booking.product_name || 'Appointment'}</h1>
|
||||||
|
<p className="font-mono tracking-widest text-primary mt-2">{booking.confirmation_code}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl className="px-8 py-6 space-y-3 text-sm">
|
||||||
|
{booking.customer_name && (
|
||||||
|
<div className="flex justify-between gap-6">
|
||||||
|
<dt className="text-muted-foreground">Name</dt>
|
||||||
|
<dd className="text-right">{booking.customer_name}</dd>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-between gap-6">
|
||||||
|
<dt className="text-muted-foreground">Date</dt>
|
||||||
|
<dd className="text-right">{when || '—'}</dd>
|
||||||
|
</div>
|
||||||
|
{booking.time_slot && (
|
||||||
|
<div className="flex justify-between gap-6">
|
||||||
|
<dt className="text-muted-foreground">Time</dt>
|
||||||
|
<dd className="text-right">{booking.time_slot}</dd>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-between gap-6">
|
||||||
|
<dt className="text-muted-foreground">Status</dt>
|
||||||
|
<dd className="text-right capitalize">{booking.status}</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
{booking.status === 'cancelled' ? (
|
||||||
|
<div className="px-8 pb-8">
|
||||||
|
<div className="flex items-start gap-3 rounded-xl bg-muted p-4 text-sm">
|
||||||
|
<CircleX className="w-5 h-5 shrink-0 mt-0.5 text-muted-foreground" aria-hidden="true" />
|
||||||
|
<p>{message || 'This booking is cancelled.'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : message ? (
|
||||||
|
<div className="px-8 pb-8">
|
||||||
|
<div className="flex items-start gap-3 rounded-xl bg-muted p-4 text-sm">
|
||||||
|
<CircleCheck className="w-5 h-5 shrink-0 mt-0.5 text-primary" aria-hidden="true" />
|
||||||
|
<p>{message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="px-8 pb-8 space-y-4">
|
||||||
|
{booking.policy_text && (
|
||||||
|
<div className="rounded-xl bg-muted p-4">
|
||||||
|
<p className="font-medium text-sm mb-2">Cancellation policy</p>
|
||||||
|
<p className="text-sm text-muted-foreground whitespace-pre-line">{booking.policy_text}</p>
|
||||||
|
{booking.cancel_deadline && !isLate && (
|
||||||
|
<p className="text-sm mt-3">Free to cancel until {prettyMoment(booking.cancel_deadline)}.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isLate && (
|
||||||
|
<div className="flex items-start gap-3 rounded-xl border border-border p-4 text-sm">
|
||||||
|
<TriangleAlert className="w-5 h-5 shrink-0 mt-0.5" aria-hidden="true" />
|
||||||
|
<p>The notice period for this booking has passed. You can still cancel, and the policy above will apply.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!confirming ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setConfirming(true)}
|
||||||
|
className="w-full rounded-xl border border-border px-6 py-3 font-medium hover:bg-muted transition-colors"
|
||||||
|
>
|
||||||
|
Cancel this booking
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<p className="text-sm text-center">Cancel this booking?</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setConfirming(false)}
|
||||||
|
className="flex-1 rounded-xl border border-border px-6 py-3 font-medium hover:bg-muted transition-colors"
|
||||||
|
>
|
||||||
|
Keep it
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={cancelBooking}
|
||||||
|
disabled={cancelling}
|
||||||
|
className="flex-1 rounded-xl bg-primary text-primary-foreground px-6 py-3 font-medium disabled:opacity-60"
|
||||||
|
>
|
||||||
|
{cancelling ? 'Cancelling…' : 'Yes, cancel'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user