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.
This commit is contained in:
66 files changed
+4599
-107
No files matched your search
@@ -0,0 +1,186 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/auth";
|
||||
import { TopNav } from "@/components/navigation/top-nav";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { readDraft } from "@/lib/booking-draft/cookie";
|
||||
import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
|
||||
import { prisma } from "@/lib/db/prisma";
|
||||
import { ConfirmBookingButton } from "@/features/booking/components/confirm-booking-button";
|
||||
|
||||
export const metadata: Metadata = { title: "Review Booking" };
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function BookReviewPage() {
|
||||
const business = await getPrimaryBusiness();
|
||||
const draft = await readDraft(business.id);
|
||||
|
||||
if (draft.serviceIds.length === 0) redirect("/book");
|
||||
if (!draft.startAt) redirect("/book/barber-time");
|
||||
|
||||
const session = await auth();
|
||||
if (!session?.user && !draft.guest) redirect("/book/details");
|
||||
if (!draft.policyAcknowledged) redirect("/book/details");
|
||||
|
||||
const [services, staff, customerProfile] = await Promise.all([
|
||||
prisma.service.findMany({ where: { id: { in: draft.serviceIds } } }),
|
||||
draft.staffId
|
||||
? prisma.staffProfile.findUnique({
|
||||
where: { id: draft.staffId },
|
||||
include: { user: { select: { name: true } } },
|
||||
})
|
||||
: null,
|
||||
session?.user?.id
|
||||
? prisma.customerProfile.findUnique({ where: { userId: session.user.id } })
|
||||
: null,
|
||||
]);
|
||||
|
||||
const totalDuration = services.reduce((sum, s) => sum + s.durationMinutes, 0);
|
||||
const totalPrice = services.reduce((sum, s) => sum + Number(s.price), 0);
|
||||
const startAt = new Date(draft.startAt);
|
||||
const endAt = new Date(startAt.getTime() + totalDuration * 60_000);
|
||||
|
||||
const customerName = draft.guest
|
||||
? `${draft.guest.firstName} ${draft.guest.lastName}`
|
||||
: `${customerProfile?.firstName ?? session?.user?.name ?? ""} ${customerProfile?.lastName ?? ""}`.trim();
|
||||
const customerEmail = draft.guest?.email ?? customerProfile?.email ?? session?.user?.email ?? "";
|
||||
const customerPhone = draft.guest?.phone ?? customerProfile?.phone ?? "";
|
||||
|
||||
return (
|
||||
<div className="pb-12">
|
||||
<TopNav title="Review Booking" onBack={true} sticky className="bg-stone" />
|
||||
|
||||
<main className="mx-auto max-w-2xl space-y-4 px-6 py-6">
|
||||
<Card className="space-y-6 p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<span className="text-muted text-[10px] font-bold tracking-widest uppercase">
|
||||
Business
|
||||
</span>
|
||||
<Link
|
||||
href="/home"
|
||||
className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
|
||||
>
|
||||
{business.name}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="border-line space-y-4 border-t pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Services
|
||||
</span>
|
||||
<ul className="mt-1 text-sm font-bold">
|
||||
{services.map((s) => (
|
||||
<li key={s.id}>{s.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Link
|
||||
href="/book"
|
||||
className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Barber
|
||||
</span>
|
||||
<p className="text-sm font-bold">{staff?.user.name ?? "Any available barber"}</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/book/barber-time"
|
||||
className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Date & Time
|
||||
</span>
|
||||
<p className="text-sm font-bold">
|
||||
{startAt.toLocaleDateString("en-GB", {
|
||||
weekday: "short",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
timeZone: business.timezone,
|
||||
})}
|
||||
{" · "}
|
||||
{startAt.toLocaleTimeString("en-GB", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
timeZone: business.timezone,
|
||||
})}
|
||||
{"–"}
|
||||
{endAt.toLocaleTimeString("en-GB", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
timeZone: business.timezone,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/book/barber-time"
|
||||
className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-line grid grid-cols-2 gap-6 border-t pt-6">
|
||||
<div>
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Duration
|
||||
</span>
|
||||
<p className="text-sm font-bold">{totalDuration} min</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Total
|
||||
</span>
|
||||
<p className="text-sm font-bold">£{totalPrice.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-line border-t pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Your Details
|
||||
</span>
|
||||
<Link
|
||||
href="/book/details"
|
||||
className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-1 text-sm font-bold">{customerName}</p>
|
||||
<p className="text-muted text-xs">
|
||||
{customerEmail}
|
||||
{customerPhone ? ` · ${customerPhone}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{draft.notes && (
|
||||
<div className="border-line border-t pt-6">
|
||||
<span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
|
||||
Notes
|
||||
</span>
|
||||
<p className="text-muted mt-1 text-sm italic">{draft.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<ConfirmBookingButton businessId={business.id} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user