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.

src/features/booking/components/details-form.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState, useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { saveDetailsStepAction } from "../actions/draft";
+
+const guestFormSchema = z.object({
+  firstName: z.string().trim().min(1, "First name is required"),
+  lastName: z.string().trim().min(1, "Last name is required"),
+  email: z.email("Enter a valid email address"),
+  phone: z.string().trim().min(1, "Phone number is required"),
+  notes: z.string().max(2000).optional(),
+  policyAcknowledged: z.literal(true, { error: "Please acknowledge the cancellation policy" }),
+});
+
+const authenticatedFormSchema = z.object({
+  notes: z.string().max(2000).optional(),
+  policyAcknowledged: z.literal(true, { error: "Please acknowledge the cancellation policy" }),
+});
+
+export function DetailsForm(props: {
+  businessId: string;
+  cancellationPolicy?: string;
+  isAuthenticated: boolean;
+  prefill?: { firstName: string; lastName: string; email: string; phone: string };
+  initialNotes?: string;
+}) {
+  const { businessId, cancellationPolicy, isAuthenticated, prefill, initialNotes } = props;
+  const [serverError, setServerError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  const schema = isAuthenticated ? authenticatedFormSchema : guestFormSchema;
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } = useForm<any>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      firstName: prefill?.firstName ?? "",
+      lastName: prefill?.lastName ?? "",
+      email: prefill?.email ?? "",
+      phone: prefill?.phone ?? "",
+      notes: initialNotes ?? "",
+      policyAcknowledged: false,
+    },
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onSubmit = (data: any) => {
+    setServerError(null);
+    startTransition(async () => {
+      const result = await saveDetailsStepAction({ businessId, ...data });
+      if (!result.success) {
+        setServerError(result.error ?? "Please check the highlighted fields.");
+        if (result.fieldErrors) {
+          for (const [field, messages] of Object.entries(result.fieldErrors)) {
+            if (messages?.[0]) setError(field, { message: messages[0] });
+          }
+        }
+      }
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      noValidate
+      className="mx-auto max-w-2xl space-y-6 px-6 py-6"
+    >
+      {!isAuthenticated && (
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <Input
+              label="First Name"
+              error={errors.firstName?.message as string}
+              {...register("firstName")}
+            />
+            <Input
+              label="Last Name"
+              error={errors.lastName?.message as string}
+              {...register("lastName")}
+            />
+          </div>
+          <Input
+            label="Email Address"
+            type="email"
+            error={errors.email?.message as string}
+            {...register("email")}
+          />
+          <Input
+            label="Phone Number"
+            type="tel"
+            error={errors.phone?.message as string}
+            {...register("phone")}
+          />
+        </div>
+      )}
+
+      {isAuthenticated && prefill && (
+        <div className="rounded-jumbo border-line border bg-white p-5">
+          <p className="text-muted text-[10px] font-bold tracking-widest uppercase">Booking as</p>
+          <p className="mt-1 text-sm font-bold">
+            {prefill.firstName} {prefill.lastName}
+          </p>
+          <p className="text-muted text-xs">
+            {prefill.email}
+            {prefill.phone ? ` · ${prefill.phone}` : ""}
+          </p>
+        </div>
+      )}
+
+      <Textarea
+        label="Booking Notes (optional)"
+        placeholder="e.g. skin sensitivity, specific style requests…"
+        error={errors.notes?.message as string}
+        {...register("notes")}
+      />
+
+      {cancellationPolicy && (
+        <div className="border-line text-muted rounded-xl border bg-white p-4 text-xs">
+          {cancellationPolicy}
+        </div>
+      )}
+
+      <Checkbox label="I acknowledge the cancellation policy" {...register("policyAcknowledged")} />
+      {errors.policyAcknowledged && (
+        <p role="alert" className="text-danger -mt-4 text-xs font-medium">
+          {errors.policyAcknowledged.message as string}
+        </p>
+      )}
+
+      {serverError && (
+        <p role="alert" className="text-danger text-sm font-medium">
+          {serverError}
+        </p>
+      )}
+
+      <Button type="submit" className="w-full" isLoading={isPending}>
+        Continue to Review
+      </Button>
+    </form>
+  );
+}