✨ 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,108 @@
+import { useEffect, useRef } from 'react'
+
+type Props = {
+  open: boolean
+  customerName: string
+  customerEmail: string
+  tableName: string
+  date: string
+  startTime: string
+  endTime: string
+  partySize: number
+  onClose: () => void
+}
+
+function FlameBadgeIcon() {
+  return (
+    <svg className="reservation-confirmed-flame" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M12 2c1 3-3 4-3 7.5A3.5 3.5 0 0 0 12 13a3.5 3.5 0 0 0 3-5.3c1.5 1 2.5 3 2.5 5a5.5 5.5 0 1 1-11 0C6.5 8.5 9.5 6 12 2Z"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ReservationConfirmedModal({
+  open,
+  customerName,
+  customerEmail,
+  tableName,
+  date,
+  startTime,
+  endTime,
+  partySize,
+  onClose,
+}: Props) {
+  const closeRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    closeRef.current?.focus()
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className="confirm-dialog-backdrop" onClick={onClose}>
+      <div
+        className="confirm-dialog reservation-confirmed-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="reservation-confirmed-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <FlameBadgeIcon />
+
+        <h2 id="reservation-confirmed-title" className="reservation-confirmed-title">
+          Tisch reserviert!
+        </h2>
+        <p className="reservation-confirmed-message">
+          Bis bald, {customerName}! Wir halten Ihnen den Platz warm und legen schon mal Kohle nach.
+        </p>
+
+        <dl className="detail-list">
+          <div>
+            <dt>Tisch</dt>
+            <dd>{tableName}</dd>
+          </div>
+          <div>
+            <dt>Datum</dt>
+            <dd>{date}</dd>
+          </div>
+          <div>
+            <dt>Uhrzeit</dt>
+            <dd>
+              {startTime} – {endTime}
+            </dd>
+          </div>
+          <div>
+            <dt>Personen</dt>
+            <dd>{partySize}</dd>
+          </div>
+        </dl>
+
+        <p className="reservation-confirmed-footnote">
+          Eine Bestätigung ist unterwegs an <strong>{customerEmail}</strong>. Dort finden Sie auch einen
+          Link, falls sich doch noch etwas ändert.
+        </p>
+
+        <div className="confirm-dialog-actions">
+          <button ref={closeRef} type="button" className="btn btn-primary" onClick={onClose}>
+            Alles klar
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}