✨ first version

2026-08-28 10:24:15 +02:00
parent 55a51a521d
commit ecbc42846b
72 changed files with 12788 additions and 483 deletions
@@ -0,0 +1,96 @@
+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 &amp; 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 />
+    </>
+  )
+}