Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8349ea00de | |||
| 0306c7fbd9 | |||
| 93da2f1dd8 | |||
| 62cbfe4e43 | |||
| db6a2a1bbf | |||
| 032a3796ba | |||
| cac8fc947e | |||
| 592be1301c |
@@ -1,27 +0,0 @@
|
|||||||
import { describe, it, expect } from "vitest";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import { BookingCancelledPage } from "../pages/BookingCancelled.tsx";
|
|
||||||
|
|
||||||
describe("BookingCancelledPage", () => {
|
|
||||||
it("renders the cancelled heading", () => {
|
|
||||||
render(<BookingCancelledPage />);
|
|
||||||
expect(screen.getByRole("heading", { name: /Appointment Cancelled/i })).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders the cancelled body text", () => {
|
|
||||||
render(<BookingCancelledPage />);
|
|
||||||
expect(screen.getByText(/Your appointment has been cancelled/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("has a Book again link pointing to /admin/book", () => {
|
|
||||||
render(<BookingCancelledPage />);
|
|
||||||
const link = screen.getByRole("link", { name: /Book again/i });
|
|
||||||
expect(link).toHaveAttribute("href", "/admin/book");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("has a Back to Portal link pointing to /", () => {
|
|
||||||
render(<BookingCancelledPage />);
|
|
||||||
const link = screen.getByRole("link", { name: /Back to Portal/i });
|
|
||||||
expect(link).toHaveAttribute("href", "/");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import { describe, it, expect } from "vitest";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import { BookingErrorPage } from "../pages/BookingError.tsx";
|
|
||||||
import { BUSINESS_CONTACT_INFO } from "../lib/contact.ts";
|
|
||||||
|
|
||||||
describe("BookingErrorPage", () => {
|
|
||||||
it("renders the error heading", () => {
|
|
||||||
render(<BookingErrorPage />);
|
|
||||||
expect(screen.getByRole("heading", { name: /Link Invalid or Expired/i })).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders the error body text", () => {
|
|
||||||
render(<BookingErrorPage />);
|
|
||||||
expect(screen.getByText(/This confirmation link is invalid/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("has a Start a new booking link pointing to /admin/book", () => {
|
|
||||||
render(<BookingErrorPage />);
|
|
||||||
const link = screen.getByRole("link", { name: /Start a new booking/i });
|
|
||||||
expect(link).toHaveAttribute("href", "/admin/book");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("has a Back to Portal link pointing to /", () => {
|
|
||||||
render(<BookingErrorPage />);
|
|
||||||
const link = screen.getByRole("link", { name: /Back to Portal/i });
|
|
||||||
expect(link).toHaveAttribute("href", "/");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("displays business contact phone", () => {
|
|
||||||
render(<BookingErrorPage />);
|
|
||||||
expect(screen.getByText(BUSINESS_CONTACT_INFO.phone)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("displays business contact email", () => {
|
|
||||||
render(<BookingErrorPage />);
|
|
||||||
expect(screen.getByText(BUSINESS_CONTACT_INFO.email)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -8,19 +8,6 @@
|
|||||||
--color-accent-dark: color-mix(in srgb, var(--color-accent) 78%, #000);
|
--color-accent-dark: color-mix(in srgb, var(--color-accent) 78%, #000);
|
||||||
--color-accent-light: color-mix(in srgb, var(--color-accent) 18%, #fff);
|
--color-accent-light: color-mix(in srgb, var(--color-accent) 18%, #fff);
|
||||||
--color-accent-lighter: color-mix(in srgb, var(--color-accent) 9%, #fff);
|
--color-accent-lighter: color-mix(in srgb, var(--color-accent) 9%, #fff);
|
||||||
|
|
||||||
/* Semantic / booking page tokens */
|
|
||||||
--color-error: #dc2626;
|
|
||||||
--color-error-dark: #b91c1c;
|
|
||||||
--color-error-bg: #fef2f2;
|
|
||||||
--color-cancelled: #ea580c;
|
|
||||||
--color-cancelled-dark: #c2410c;
|
|
||||||
--color-cancelled-bg: #fff7ed;
|
|
||||||
--color-success: #16a34a;
|
|
||||||
--color-success-dark: #15803d;
|
|
||||||
--color-success-bg: #f0fdf4;
|
|
||||||
--color-text-secondary: #4b5563;
|
|
||||||
--color-surface: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *::before, *::after {
|
*, *::before, *::after {
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
// Business contact information — update values to reflect actual business details.
|
|
||||||
// Used on error/cancellation pages to help customers reach the business.
|
|
||||||
export const BUSINESS_CONTACT_INFO = {
|
|
||||||
phone: "(555) 000-1234",
|
|
||||||
email: "hello@groombook.example.com",
|
|
||||||
address: "123 Main St, Anytown, USA",
|
|
||||||
} as const;
|
|
||||||
@@ -1,10 +1,3 @@
|
|||||||
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() {
|
export function BookingCancelledPage() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -14,12 +7,12 @@ export function BookingCancelledPage() {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
fontFamily: "system-ui, sans-serif",
|
fontFamily: "system-ui, sans-serif",
|
||||||
background: "var(--color-cancelled-bg)",
|
background: "#fff7ed",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
background: "var(--color-surface)",
|
background: "#fff",
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
padding: "2.5rem 3rem",
|
padding: "2.5rem 3rem",
|
||||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||||
@@ -28,45 +21,28 @@ export function BookingCancelledPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✗</div>
|
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✗</div>
|
||||||
<h1 style={{ color: "var(--color-cancelled-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
<h1 style={{ color: "#c2410c", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||||
{STRINGS.heading}
|
Appointment Cancelled
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
<p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
|
||||||
{STRINGS.body}
|
Your appointment has been cancelled. If this was a mistake or you'd
|
||||||
|
like to rebook, please contact us.
|
||||||
</p>
|
</p>
|
||||||
|
<a
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
|
href="/"
|
||||||
<a
|
style={{
|
||||||
href="/admin/book"
|
display: "inline-block",
|
||||||
style={{
|
padding: "0.6rem 1.5rem",
|
||||||
display: "inline-block",
|
background: "#ea580c",
|
||||||
padding: "0.6rem 1.5rem",
|
color: "#fff",
|
||||||
background: "var(--color-primary)",
|
borderRadius: 6,
|
||||||
color: "#fff",
|
textDecoration: "none",
|
||||||
borderRadius: 6,
|
fontWeight: 600,
|
||||||
textDecoration: "none",
|
fontSize: 14,
|
||||||
fontWeight: 600,
|
}}
|
||||||
fontSize: 14,
|
>
|
||||||
}}
|
Back to Portal
|
||||||
>
|
</a>
|
||||||
{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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
+22
-56
@@ -1,13 +1,3 @@
|
|||||||
import { BUSINESS_CONTACT_INFO } from "../lib/contact";
|
|
||||||
|
|
||||||
const STRINGS = {
|
|
||||||
heading: "Link Invalid or Expired",
|
|
||||||
body: "This confirmation link is invalid, has already been used, or your appointment has already passed. Please contact us if you need help.",
|
|
||||||
newBooking: "Start a new booking",
|
|
||||||
backToPortal: "Back to Portal",
|
|
||||||
contactLabel: "Need help?",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export function BookingErrorPage() {
|
export function BookingErrorPage() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -17,12 +7,12 @@ export function BookingErrorPage() {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
fontFamily: "system-ui, sans-serif",
|
fontFamily: "system-ui, sans-serif",
|
||||||
background: "var(--color-error-bg)",
|
background: "#fef2f2",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
background: "var(--color-surface)",
|
background: "#fff",
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
padding: "2.5rem 3rem",
|
padding: "2.5rem 3rem",
|
||||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||||
@@ -31,52 +21,28 @@ export function BookingErrorPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>⚠️</div>
|
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>⚠️</div>
|
||||||
<h1 style={{ color: "var(--color-error-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
|
<h1 style={{ color: "#b91c1c", fontSize: 24, margin: "0 0 0.5rem" }}>
|
||||||
{STRINGS.heading}
|
Link Invalid or Expired
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
|
<p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
|
||||||
{STRINGS.body}
|
This confirmation link is invalid, has already been used, or your
|
||||||
|
appointment has already passed. Please contact us if you need help.
|
||||||
</p>
|
</p>
|
||||||
|
<a
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
|
href="/"
|
||||||
<a
|
style={{
|
||||||
href="/admin/book"
|
display: "inline-block",
|
||||||
style={{
|
padding: "0.6rem 1.5rem",
|
||||||
display: "inline-block",
|
background: "#dc2626",
|
||||||
padding: "0.6rem 1.5rem",
|
color: "#fff",
|
||||||
background: "var(--color-primary)",
|
borderRadius: 6,
|
||||||
color: "#fff",
|
textDecoration: "none",
|
||||||
borderRadius: 6,
|
fontWeight: 600,
|
||||||
textDecoration: "none",
|
fontSize: 14,
|
||||||
fontWeight: 600,
|
}}
|
||||||
fontSize: 14,
|
>
|
||||||
}}
|
Back to Portal
|
||||||
>
|
</a>
|
||||||
{STRINGS.newBooking}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="/"
|
|
||||||
style={{
|
|
||||||
display: "inline-block",
|
|
||||||
padding: "0.6rem 1.5rem",
|
|
||||||
background: "var(--color-error)",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: 6,
|
|
||||||
textDecoration: "none",
|
|
||||||
fontWeight: 600,
|
|
||||||
fontSize: 14,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{STRINGS.backToPortal}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ marginTop: "1.5rem", paddingTop: "1rem", borderTop: "1px solid #e5e7eb", fontSize: 13, color: "var(--color-text-secondary)" }}>
|
|
||||||
<p style={{ margin: "0 0 0.25rem", fontWeight: 600 }}>{STRINGS.contactLabel}</p>
|
|
||||||
<p style={{ margin: 0 }}>
|
|
||||||
{BUSINESS_CONTACT_INFO.phone} · {BUSINESS_CONTACT_INFO.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user