109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
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>
|
||
)
|
||
}
|