Barcode Betty
344a32e3e4
- Add "Start a new booking" button to BookingError linking to /admin/book - Add "Book again" button to BookingCancelled linking to /admin/book - Add business contact info section to BookingError (from BUSINESS_CONTACT_INFO constant) - Replace hardcoded colors with CSS variables (--color-error, --color-cancelled, etc.) - Add page-level string constants to eliminate hardcoded strings - Add unit tests for both pages (9 tests passing) Co-Authored-By: Paperclip <noreply@paperclip.ing>
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
const STRINGS = {
|
|
heading: "Appointment Cancelled",
|
|
body: "Your appointment has been cancelled. If this was a mistake or you'd like to rebook, please contact us.",
|
|
bookAgain: "Book again",
|
|
backToPortal: "Back to Portal",
|
|
} as const;
|
|
|
|
export function BookingCancelledPage() {
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontFamily: "system-ui, sans-serif",
|
|
background: "var(--color-cancelled-bg)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
background: "var(--color-surface)",
|
|
borderRadius: 12,
|
|
padding: "2.5rem 3rem",
|
|
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
|
textAlign: "center",
|
|
maxWidth: 420,
|
|
}}
|
|
>
|
|
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✗</div>
|
|
<h1 style={{ color: "var(--color-cancelled-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
|
{STRINGS.heading}
|
|
</h1>
|
|
<p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
|
{STRINGS.body}
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
|
|
<a
|
|
href="/admin/book"
|
|
style={{
|
|
display: "inline-block",
|
|
padding: "0.6rem 1.5rem",
|
|
background: "var(--color-primary)",
|
|
color: "#fff",
|
|
borderRadius: 6,
|
|
textDecoration: "none",
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
{STRINGS.bookAgain}
|
|
</a>
|
|
<a
|
|
href="/"
|
|
style={{
|
|
display: "inline-block",
|
|
padding: "0.6rem 1.5rem",
|
|
background: "var(--color-cancelled)",
|
|
color: "#fff",
|
|
borderRadius: 6,
|
|
textDecoration: "none",
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
{STRINGS.backToPortal}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|