34 lines
995 B
TypeScript
34 lines
995 B
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export function CancelBookingButton({ id }: { id: string }) {
|
|
const router = useRouter();
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function cancel() {
|
|
if (!window.confirm('Cancel this booking?')) return;
|
|
setBusy(true);
|
|
setError(null);
|
|
const res = await fetch(`/api/bookings/${id}`, { method: 'DELETE' });
|
|
if (!res.ok) {
|
|
const data = (await res.json().catch(() => ({}))) as { error?: string };
|
|
setError(data.error || 'Could not cancel the booking.');
|
|
setBusy(false);
|
|
return;
|
|
}
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<div className="text-right">
|
|
<button type="button" className="btn-danger" onClick={cancel} disabled={busy}>
|
|
{busy ? 'Cancelling…' : 'Cancel'}
|
|
</button>
|
|
{error && <p className="mt-1 text-xs text-red-600">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|