Phase 4

Seed data extended with a second barber (different hours/services), a beard-trim service + category, breaks, time off, a guest customer, and appointments in all three key states — verified against a live throwaway Postgres.
14 new integration tests (38 total with Phase 3's) covering guest/authenticated booking, any-barber assignment, slot-conflict handling, ownership enforcement, guest-data isolation, and book-again repricing.
Playwright E2E suite for the 6 required customer journeys, with its own global-setup.ts that migrates and seeds a database automatically.
Full verification pass, which caught and fixed three real bugs along the way (not just test-workarounds):
A date off-by-one bug in the calendar picker that made real weekdays show as closed for anyone in a UTC+ timezone (including the business's own).
A dialog that could vanish mid-confirmation on cancellation, before the customer could read the late-cancellation notice.
A silent test-cleanup leak in the Phase 3 fixtures that had been leaking stray businesses since Phase 3.
Plus a baseline desktop-responsive fix (centered max-w-2xl columns) across Home/Appointments/Settings/booking flow, since desktop had been effectively unstyled.
Final state: 90 unit tests, 38 integration tests, and all 6 E2E journeys passing together on a fresh database; clean tsc, eslint, and next build. Full writeup with routes, security model, guest-matching rules, known limitations, and what to check before Phase 5 is in docs/phase-4-summary.md.

e2e/customer-journeys.spec.ts

@@ -0,0 +1,154 @@
+import { expect, test } from "@playwright/test";
+import { SEEDED, completeBookingFlow, completeRescheduleFlow, findAppointmentCard, signIn, uniqueEmail } from "./helpers";
+
+/**
+ * The 6 customer journeys required by the Phase 4 brief. Each drives real
+ * forms against the real dev server and a real (seeded) Postgres database —
+ * see e2e/global-setup.ts for how that database gets prepared, and
+ * prisma/seed.ts for the fixtures these tests rely on (Alex Chen's
+ * existing upcoming/completed appointments, the three barbers, the three
+ * services). Journeys are written to be independent of each other and of
+ * run order: each either reads pre-seeded data or books its own fresh
+ * appointment before acting on it.
+ */
+
+test.describe("customer booking journeys", () => {
+  test("1. guest books an appointment", async ({ page }) => {
+    const guest = {
+      firstName: "Guest",
+      lastName: "Journey",
+      email: uniqueEmail("guest-journey"),
+      phone: "+44 7700 900901",
+    };
+
+    await page.goto("/home");
+    await page.getByRole("link", { name: "Book an Appointment" }).click();
+
+    await completeBookingFlow(page, {
+      serviceName: SEEDED.services.haircut,
+      staffName: SEEDED.owner.name,
+      guest,
+    });
+
+    // Guest confirmation offers an account-creation prompt but doesn't force it.
+    await expect(page.getByText("Want to manage this booking later?")).toBeVisible();
+    await expect(page.getByRole("link", { name: "Create an Account" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "View Appointment" })).toHaveCount(0);
+  });
+
+  test("2. registered customer books an appointment", async ({ page }) => {
+    await signIn(page, SEEDED.registeredCustomer.email, SEEDED.registeredCustomer.password);
+
+    await page.goto("/book");
+    await completeBookingFlow(page, {
+      serviceName: SEEDED.services.skinfade,
+      staffName: SEEDED.barberSkinfadeBeard.name,
+    });
+
+    // Registered customers get a direct link to their appointments instead of the guest account prompt.
+    await expect(page.getByRole("link", { name: "View Appointment" })).toBeVisible();
+
+    await page.goto("/appointments");
+    await expect(findAppointmentCard(page, SEEDED.services.skinfade, SEEDED.barberSkinfadeBeard.name).first()).toBeVisible();
+  });
+
+  test("3. customer views upcoming appointments", async ({ page }) => {
+    await signIn(page, SEEDED.registeredCustomer.email, SEEDED.registeredCustomer.password);
+    await page.goto("/appointments");
+
+    // Seeded: an upcoming CONFIRMED Haircut & Style with Marcus Reed.
+    await expect(page.getByRole("tab", { name: "Upcoming" })).toHaveAttribute("data-state", "active");
+    const upcomingSeeded = findAppointmentCard(page, SEEDED.services.haircut, SEEDED.owner.name);
+    await expect(upcomingSeeded).toBeVisible();
+    await expect(upcomingSeeded.getByText("Confirmed")).toBeVisible();
+
+    // Seeded: a COMPLETED Haircut & Style with Leo Vance.
+    await page.getByRole("tab", { name: "Past" }).click();
+    const pastSeeded = findAppointmentCard(page, SEEDED.services.haircut, SEEDED.barberHaircutOnly.name);
+    await expect(pastSeeded).toBeVisible();
+    await expect(pastSeeded.getByText("Completed")).toBeVisible();
+
+    // Alex Chen has no cancelled appointments in the seed data.
+    await page.getByRole("tab", { name: "Cancelled" }).click();
+    await expect(page.getByText("No cancelled appointments")).toBeVisible();
+  });
+
+  test("4. customer reschedules an appointment", async ({ page }) => {
+    await signIn(page, SEEDED.registeredCustomer.email, SEEDED.registeredCustomer.password);
+
+    // Book a dedicated appointment for this test so it doesn't depend on the seeded one or on other tests.
+    await page.goto("/book");
+    await completeBookingFlow(page, { serviceName: SEEDED.services.beardTrim, staffName: SEEDED.owner.name });
+
+    await page.goto("/appointments");
+    const card = findAppointmentCard(page, SEEDED.services.beardTrim, SEEDED.owner.name);
+    await expect(card).toBeVisible();
+    const originalTime = (await card.innerText()).match(/\d{1,2}:\d{2}/)?.[0];
+    expect(originalTime).toBeTruthy();
+
+    await card.getByRole("link", { name: "Reschedule" }).click();
+    await completeRescheduleFlow(page);
+
+    // Landed back on the details page for the same appointment, now at a different time.
+    await expect(page.getByRole("heading", { name: "Appointment Details" })).toBeVisible();
+    await expect(page.getByText(SEEDED.services.beardTrim)).toBeVisible();
+    const newTime = (await page.locator("main").innerText()).match(/\d{1,2}:\d{2}/)?.[0];
+    expect(newTime).toBeTruthy();
+    expect(newTime).not.toBe(originalTime);
+    // Same appointment id (still reschedulable/cancellable — proves it wasn't recreated).
+    await expect(page.getByRole("link", { name: "Reschedule" })).toBeVisible();
+  });
+
+  test("5. customer cancels an appointment", async ({ page }) => {
+    await signIn(page, SEEDED.registeredCustomer.email, SEEDED.registeredCustomer.password);
+
+    await page.goto("/book");
+    await completeBookingFlow(page, { serviceName: SEEDED.services.beardTrim, staffName: SEEDED.barberSkinfadeBeard.name });
+
+    await page.goto("/appointments");
+    const upcomingCard = findAppointmentCard(page, SEEDED.services.beardTrim, SEEDED.barberSkinfadeBeard.name);
+    await expect(upcomingCard).toBeVisible();
+
+    await upcomingCard.getByRole("button", { name: "Cancel", exact: true }).click();
+    // Scoped to the currently-open <dialog> — the Upcoming tab can have several
+    // cancellable cards, each with its own (closed) dialog in the DOM.
+    const dialog = page.locator("dialog[open]");
+    await expect(dialog.getByRole("heading", { name: "Cancel Appointment?" })).toBeVisible();
+    await dialog.getByPlaceholder("Reason (optional)").fill("E2E test cancellation");
+    await dialog.getByRole("button", { name: "Cancel it" }).click();
+
+    await expect(dialog.getByText("Your appointment has been cancelled.")).toBeVisible();
+    await dialog.getByRole("button", { name: "Done" }).click();
+
+    // Cancellation never deletes — it moves from Upcoming to the Cancelled tab.
+    await expect(findAppointmentCard(page, SEEDED.services.beardTrim, SEEDED.barberSkinfadeBeard.name)).toHaveCount(0);
+    await page.getByRole("tab", { name: "Cancelled" }).click();
+    const cancelledCard = findAppointmentCard(page, SEEDED.services.beardTrim, SEEDED.barberSkinfadeBeard.name);
+    await expect(cancelledCard).toBeVisible();
+    await expect(cancelledCard.getByText("Cancelled")).toBeVisible();
+  });
+
+  test("6. customer books again from history", async ({ page }) => {
+    await signIn(page, SEEDED.registeredCustomer.email, SEEDED.registeredCustomer.password);
+    await page.goto("/appointments");
+
+    // Seeded COMPLETED appointment (Haircut & Style with Leo Vance).
+    await page.getByRole("tab", { name: "Past" }).click();
+    const completedCard = findAppointmentCard(page, SEEDED.services.haircut, SEEDED.barberHaircutOnly.name);
+    await completedCard.getByRole("button", { name: "Book Again" }).click();
+
+    // Services (and the original barber, if still bookable) come preselected — the customer only re-confirms a fresh date/time.
+    await expect(page).toHaveURL(/\/book$/);
+    await expect(page.getByText("Booking again")).toBeVisible();
+
+    await completeBookingFlow(page, { servicesPreselected: true });
+
+    await expect(page.getByRole("link", { name: "View Appointment" })).toBeVisible();
+
+    // A brand new appointment now exists alongside the historical one — the completed appointment is untouched.
+    await page.goto("/appointments");
+    await expect(findAppointmentCard(page, SEEDED.services.haircut, SEEDED.barberHaircutOnly.name)).toBeVisible();
+    await page.getByRole("tab", { name: "Past" }).click();
+    await expect(completedCard).toBeVisible();
+  });
+});

e2e/global-setup.ts

@@ -0,0 +1,21 @@
+import { execFileSync } from "node:child_process";
+
+/**
+ * Applies migrations and loads the dev/demo seed data against whatever
+ * DATABASE_URL points at before the suite runs. Deliberately does not
+ * create or tear down the database itself — same division of
+ * responsibility as `npm run test:integration`, where the caller is
+ * responsible for pointing DATABASE_URL at a disposable Postgres.
+ */
+export default function globalSetup() {
+  if (!process.env.DATABASE_URL) {
+    throw new Error(
+      "DATABASE_URL is not set. Point it at a disposable Postgres before running the e2e suite, e.g.\n" +
+        '  DATABASE_URL="postgresql://user:pass@localhost:5432/nextchair_e2e" npm run test:e2e',
+    );
+  }
+
+  const env = { ...process.env };
+  execFileSync("npx", ["prisma", "migrate", "deploy"], { stdio: "inherit", env });
+  execFileSync("npx", ["tsx", "prisma/seed.ts"], { stdio: "inherit", env });
+}

e2e/helpers.ts

@@ -0,0 +1,117 @@
+import { expect } from "@playwright/test";
+import type { Page } from "@playwright/test";
+
+/** Seeded in prisma/seed.ts — see that file for the full fixture set this suite relies on. */
+export const SEEDED = {
+  registeredCustomer: { email: "alex.chen@example.com", password: "password123", name: "Alex Chen" },
+  owner: { email: "marcus@blakeheritage.co.uk", name: "Marcus Reed" },
+  barberHaircutOnly: { email: "leo@blakeheritage.co.uk", name: "Leo Vance" },
+  barberSkinfadeBeard: { email: "jamie@blakeheritage.co.uk", name: "Jamie Wallace" },
+  services: {
+    haircut: "Haircut & Style",
+    skinfade: "Skinfade / Taper & Style",
+    beardTrim: "Beard Trim & Shape",
+  },
+};
+
+export async function signIn(page: Page, email: string, password: string): Promise<void> {
+  await page.goto("/sign-in");
+  await page.getByLabel("Email Address").fill(email);
+  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByRole("button", { name: "Sign In", exact: true }).click();
+  await expect(page).toHaveURL(/\/home/);
+}
+
+function section(page: Page, headingName: string) {
+  return page.locator("section").filter({ has: page.getByRole("heading", { name: headingName, exact: true }) });
+}
+
+/**
+ * Drives the real /book flow end to end — every step is a genuine form
+ * submission through the actual Server Actions, matching the Phase 4
+ * brief's requirement that these journeys not rely on mocks or snapshots.
+ *
+ * Assumes the page is already on /book (or /book/barber-time if
+ * `servicesPreselected` — e.g. arriving via "Book Again", which
+ * preselects services and redirects straight past the services step).
+ */
+export async function completeBookingFlow(
+  page: Page,
+  options: {
+    serviceName?: string;
+    servicesPreselected?: boolean;
+    staffName?: string; // omit for "Anyone available"
+    guest?: { firstName: string; lastName: string; email: string; phone: string };
+  },
+): Promise<void> {
+  const { serviceName, servicesPreselected = false, staffName, guest } = options;
+
+  await expect(page).toHaveURL(/\/book$/);
+  if (!servicesPreselected) {
+    if (!serviceName) throw new Error("serviceName is required unless servicesPreselected is true");
+    await page.getByRole("button", { name: new RegExp(`^${serviceName}`) }).click();
+  }
+  // Even with services preselected (e.g. "Book Again"), the customer still confirms this step themselves.
+  await page.getByRole("button", { name: "Continue", exact: true }).click();
+
+  await expect(page).toHaveURL(/\/book\/barber-time/);
+  if (staffName) {
+    await section(page, "Barber").locator("select").selectOption({ label: staffName });
+    // Choosing a barber refetches that barber's specific availability —
+    // wait for it to settle so the date grid below reflects the right person.
+    await page.waitForLoadState("networkidle");
+  }
+  // Wait for the date grid to (re)render for the chosen barber before picking a day.
+  await expect(section(page, "Date").locator("button[aria-pressed]").first()).toBeVisible();
+  await section(page, "Date").locator("button[aria-pressed]:not([disabled])").first().click();
+  const timeSection = section(page, "Time");
+  await expect(timeSection.locator("button").first()).toBeVisible();
+  await timeSection.locator("button").first().click();
+  await page.getByRole("button", { name: "Continue", exact: true }).click();
+
+  await expect(page).toHaveURL(/\/book\/details/);
+  if (guest) {
+    await page.getByLabel("First Name").fill(guest.firstName);
+    await page.getByLabel("Last Name").fill(guest.lastName);
+    await page.getByLabel("Email Address").fill(guest.email);
+    await page.getByLabel("Phone Number").fill(guest.phone);
+  }
+  await page.getByLabel("I acknowledge the cancellation policy").check();
+  await page.getByRole("button", { name: "Continue to Review" }).click();
+
+  await expect(page).toHaveURL(/\/book\/review/);
+  await page.getByRole("button", { name: "Confirm Booking" }).click();
+
+  await expect(page).toHaveURL(/\/book\/confirmation/);
+  await expect(page.getByRole("heading", { name: "You're all set!" })).toBeVisible();
+}
+
+/** Locates a specific appointment card on /appointments by its rendered service + barber text, scoping later actions (Reschedule/Cancel/Book Again) to that one card so they can't accidentally hit a different appointment. */
+export function findAppointmentCard(page: Page, serviceName: string, staffName: string) {
+  return page.locator(".rounded-jumbo").filter({ hasText: serviceName }).filter({ hasText: `with ${staffName}` });
+}
+
+export function uniqueEmail(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 100000)}@e2e-test.local`;
+}
+
+/**
+ * Drives /appointments/[id]/reschedule — same shared BarberDateTimePicker
+ * as booking, but a single step that redirects straight to the
+ * appointment's details page. Deliberately picks the *last* available
+ * date/slot rather than the first: the original appointment's own slot
+ * becomes available again once it's excluded from the conflict check
+ * (see `excludeAppointmentId` in rescheduleBooking), so "first available"
+ * could otherwise reselect the exact same time and make the reschedule a
+ * no-op from the test's point of view.
+ */
+export async function completeRescheduleFlow(page: Page): Promise<void> {
+  await expect(page).toHaveURL(/\/reschedule/);
+  await expect(section(page, "Date").locator("button[aria-pressed]").first()).toBeVisible();
+  await section(page, "Date").locator("button[aria-pressed]:not([disabled])").last().click();
+  const timeSection = section(page, "Time");
+  await expect(timeSection.locator("button").first()).toBeVisible();
+  await timeSection.locator("button").last().click();
+  await page.getByRole("button", { name: "Confirm Reschedule", exact: true }).click();
+  await expect(page).toHaveURL(/\/appointments\/[^/]+$/);
+}