97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { createFileRoute, Link } from '@tanstack/react-router'
|
|
|
|
import { SiteFooter } from '#/components/site-footer'
|
|
import { SiteHeader } from '#/components/site-header'
|
|
import { cancelReservationByToken, getReservationByCancelToken } from '#/lib/reservations'
|
|
|
|
export const Route = createFileRoute('/stornieren/$token')({
|
|
component: CancelReservationPage,
|
|
loader: async ({ params }) => {
|
|
const reservation = await getReservationByCancelToken({ data: { token: params.token } })
|
|
return { reservation }
|
|
},
|
|
})
|
|
|
|
const dateTimeFormatter = new Intl.DateTimeFormat('de-DE', {
|
|
dateStyle: 'full',
|
|
timeStyle: 'short',
|
|
})
|
|
|
|
function CancelReservationPage() {
|
|
const { token } = Route.useParams()
|
|
const { reservation } = Route.useLoaderData()
|
|
|
|
const [isCancelled, setIsCancelled] = useState(false)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function handleCancel() {
|
|
setError(null)
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
await cancelReservationByToken({ data: { token } })
|
|
setIsCancelled(true)
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SiteHeader />
|
|
|
|
<main className="page">
|
|
<section className="section">
|
|
<div className="section-grid">
|
|
<div>
|
|
<span className="section-kicker">Reservierung verwalten</span>
|
|
<h1 className="section-heading">Reservierung stornieren</h1>
|
|
</div>
|
|
|
|
{!reservation ? (
|
|
<p className="empty-state">
|
|
Diese Reservierung wurde nicht gefunden oder ist bereits storniert.{' '}
|
|
<Link to="/">Zurück zur Startseite</Link>
|
|
</p>
|
|
) : isCancelled ? (
|
|
<p className="message message-success">
|
|
Ihre Reservierung wurde storniert. Wir haben Ihnen eine Bestätigung per E-Mail
|
|
gesendet. <Link to="/">Zurück zur Startseite</Link>
|
|
</p>
|
|
) : (
|
|
<div className="reservation-form">
|
|
<ul className="contact-list">
|
|
<li>
|
|
<span className="label">Tisch</span>
|
|
<span>{reservation.tableName}</span>
|
|
</li>
|
|
<li>
|
|
<span className="label">Datum & Uhrzeit</span>
|
|
<span>{dateTimeFormatter.format(new Date(reservation.reservationTime))}</span>
|
|
</li>
|
|
<li>
|
|
<span className="label">Personen</span>
|
|
<span>{reservation.partySize}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<button type="button" className="btn btn-danger" disabled={isSubmitting} onClick={handleCancel}>
|
|
{isSubmitting ? 'Wird storniert …' : 'Reservierung stornieren'}
|
|
</button>
|
|
|
|
{error && <p className="message message-error">{error}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<SiteFooter />
|
|
</>
|
|
)
|
|
}
|