diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md index 089dde6..2a2faae 100644 --- a/UAT_PLAYBOOK.md +++ b/UAT_PLAYBOOK.md @@ -53,6 +53,7 @@ export const { signIn, signOut, useSession, changePassword } = authClient; | TC-WEB-5.1.2 | OIDC redirect | Click OIDC login button | Redirected to OIDC provider, then back to app with session established | | TC-WEB-5.1.3 | Logout | Click logout button | Session cleared, redirected to login page | | TC-WEB-5.1.4 | Session indicator | After successful login | User info/initials visible in UI indicating active session | +| TC-WEB-5.1.5 | Unauthenticated `/login` renders the form (GRO-2011) | In a private/incognito window with no session cookie, navigate to UAT `/login` | React root mounts; the GroomBook sign-in card with the OIDC button is visible. Network tab shows `/api/auth/get-session` 200, `/api/setup/status` 200, and the login form is rendered (NOT a blank white viewport). | ### 5.2 Authentication — VITE_API_URL Set @@ -183,6 +184,29 @@ export const { signIn, signOut, useSession, changePassword } = authClient; | TC-WEB-5.12.3 | Confirm appointment | Click confirm on pending appointment | Appointment status updated to confirmed | | TC-WEB-5.12.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled | +#### 5.12b Dynamic Portal Time Slots (GRO-1793) + +| # | Scenario | Steps | Expected | +|---|----------|-------|----------| +| TC-WEB-5.12.5 | BookingFlow dynamic slots | Open Book New, select pet and service, pick a date | Time slots fetched from API; "Checking availability…" shown while loading | +| TC-WEB-5.12.6 | BookingFlow slots match wizard | Compare BookingFlow slot times with public booking wizard for same date | Same slots displayed | +| TC-WEB-5.12.7 | BookingFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown | +| TC-WEB-5.12.8 | BookingFlow no slots | Select date with no availability | "No available slots on this date" shown | +| TC-WEB-5.12.9 | RescheduleFlow dynamic slots | Open reschedule, pick a new date | Time slots fetched from API; loading state shown | +| TC-WEB-5.12.10 | RescheduleFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown | +| TC-WEB-5.12.11 | RescheduleFlow no slots | Select date with no availability | "No available slots on this date" shown | + +#### 5.12c Waitlist/Booking Status Badges (GRO-1795) + +| # | Scenario | Steps | Expected | +|---|----------|-------|----------| +| TC-WEB-5.12.12 | Confirmed badge | View appointment card with confirmed status | Green "Confirmed" badge displayed | +| TC-WEB-5.12.13 | Pending badge | View appointment card with pending status | Amber "Pending" badge displayed | +| TC-WEB-5.12.14 | Waitlisted badge | View appointment card with waitlisted status | Blue "Waitlisted" badge displayed | +| TC-WEB-5.12.15 | Badge uses CSS classes | Inspect badge element | Badge uses CSS variable-based classes (e.g., bg-green-100, text-amber-600), not hardcoded colors | +| TC-WEB-5.12.16 | Badge status from data | Compare badge label to appointment.status field | Badge label matches the API appointment status exactly | +| TC-WEB-5.12.17 | Unknown status fallback | Render badge with unknown status value | Badge renders with the raw status string as label and fallback CSS class | + ### 5.13 Reports UI | # | Scenario | Steps | Expected | @@ -304,6 +328,66 @@ export const { signIn, signOut, useSession, changePassword } = authClient; | TC-WEB-5.23.2 | Save pet — error state | Trigger an API save failure (e.g. network error) | Error message displayed; edit form stays open; no data cleared | | TC-WEB-5.23.3 | Save pet — saving indicator | Click Save | Spinner/indicator shown while request is in flight; form controls disabled | + +### 5.24 Booking Funnel Analytics Events (GRO-1794) + + +| # | Scenario | Steps | Expected | +|---|----------|-------|----------| +| TC-WEB-5.24.1 | booking_step_service — public | Select a service in the public booking wizard | `booking_step_service` CustomEvent fires with detail.step="service" and detail.flow="public" | +| TC-WEB-5.24.2 | booking_step_time — public | Select a time slot and click Continue | `booking_step_time` fires with detail.step="time" and detail.flow="public" | +| TC-WEB-5.24.3 | booking_step_contact — public | Fill in contact/pet form, click "Review booking" | `booking_step_contact` fires with detail.step="contact" and detail.flow="public" | +| TC-WEB-5.24.4 | booking_step_submit — public | Confirm and submit the booking | `booking_step_submit` fires with detail.step="submit" and detail.flow="public" | +| TC-WEB-5.24.5 | booking_confirmed — public | Navigate to /booking-confirmed | `booking_confirmed` fires once on mount with detail.step="confirmed" and detail.flow="public" | +| TC-WEB-5.24.6 | booking_error — public | Navigate to /booking-error | `booking_error` fires once on mount with detail.step="error" and detail.flow="public" | +| TC-WEB-5.24.7 | booking_step_service — portal | Select a pet in the portal BookingFlow | `booking_step_service` fires with detail.step="service" and detail.flow="portal" | +| TC-WEB-5.24.8 | booking_step_time — portal | Pick a date and time in portal BookingFlow | `booking_step_time` fires with detail.step="time" and detail.flow="portal" | +| TC-WEB-5.24.9 | booking_step_contact — portal | Proceed from groomer selection to review screen | `booking_step_contact` fires with detail.step="groomer" and detail.flow="portal" | +| TC-WEB-5.24.10 | booking_step_submit — portal | Submit booking in portal BookingFlow | `booking_step_submit` fires with detail.step="submit" and detail.flow="portal" | +| TC-WEB-5.24.11 | booking_confirmed — portal | Portal booking request succeeds | Inline success state is shown and `booking_confirmed` fires with detail.step="confirmed" and detail.flow="portal" | +| TC-WEB-5.24.12 | No PII in analytics payloads | Fire each event and inspect detail object | Payload contains only: step, flow, timestamp — no names, emails, phone numbers, or pet names | +| TC-WEB-5.24.13 | No-op safe | Trigger analytics with window.dispatchEvent blocked (e.g. CSP) | No error thrown; booking flow completes normally | + +### 5.25 Customer Portal — Better Auth SSO Bridge (GRO-1867) + +These cases cover the `CustomerPortal` initialisation path that bridges an Authentik / Better Auth session into a portal session via `POST /api/portal/session-from-auth`. The bridge runs after the URL-impersonation (`?sessionId=`) and dev-user paths have been ruled out. + +**Pre-conditions:** + +- UAT is configured with Authentik SSO and the `seed-uat-passwords` Secret in `groombook-uat` provides the seeded customer credentials (`uat-seed-password-source` memory). +- `POST /api/portal/session-from-auth` from [GRO-1866](https://paperclip.farhoodlabs.com/GRO/issues/GRO-1866) is deployed on UAT. +- Clear cookies and localStorage between cases unless otherwise noted. + +| # | Scenario | Steps | Expected | +|---|----------|-------|----------| +| TC-WEB-5.25.1 | Authenticated customer reaches portal dashboard | 1. From clean state, navigate to UAT `/login`. 2. Click "Sign in with SSO" and complete Authentik flow with a seeded **customer** identity. 3. After callback, land on `/`. | Portal dashboard renders. No redirect to `/login`. No impersonation banner. Top-right greeting reads "Hi, <FirstName>". | +| TC-WEB-5.25.2 | Bridge call sequence | Repeat TC-WEB-5.25.1 with DevTools → Network open and the **All** tab filtered to `/api/`. | In order: `GET /api/auth/get-session` → 200. `POST /api/portal/session-from-auth` → 201 with body `{ sessionId, clientId, clientName }`. | +| TC-WEB-5.25.3 | Subsequent portal calls use the bridged session ID | After TC-WEB-5.25.1 succeeds, navigate to **Appointments**, **My Pets**, **Billing**, **Settings**. Inspect any `/api/portal/*` request in DevTools → Network. | Each portal API call carries an `X-Impersonation-Session-Id` header whose value equals the `sessionId` returned by `session-from-auth` (not a URL-param value). Each call returns 200 (or 404 for genuinely empty collections), never 401. | +| TC-WEB-5.25.4 | No impersonation chrome for the customer's own session | After TC-WEB-5.25.1, scan the portal UI. | No amber border around the page. No "STAFF VIEW" watermark. No "End Impersonation" button in the sidebar. The customer is themselves; only impersonation sessions started via `?sessionId=` show the banner. | +| TC-WEB-5.25.5 | 404 fallback for authenticated user with no client record | 1. Sign in via SSO with an Authentik account whose email is **not** present in `clients`. 2. Land on `/`. | `POST /api/portal/session-from-auth` returns 404. The portal renders a centred card titled **"Portal access not configured"** with the message about contacting the groomer and a **Sign out** button. No redirect loop, no portal chrome. | +| TC-WEB-5.25.6 | 404 fallback Sign-out escape hatch | From TC-WEB-5.25.5 click **Sign out**. | `POST /api/auth/sign-out` fires; browser navigates to `/login`; the Authentik session cookie is cleared. Reloading `/` no longer hits 404 (will show the login page). | +| TC-WEB-5.25.7 | Bridge precedence — impersonation URL wins | 1. Sign in via SSO as a customer. 2. Open a new tab to `https://uat.groombook.dev/?sessionId=`. | The impersonation path runs; the amber banner appears for the impersonated client. The Better Auth bridge is **not** called on this load (`session-from-auth` absent in Network). | +| TC-WEB-5.25.8 | Bridge precedence — dev user wins | In dev mode (e.g. local) with `localStorage["dev-user"]` set to a client persona, navigate to `/`. | The dev-session path runs (`POST /api/portal/dev-session`). The Better Auth bridge is **not** called (`session-from-auth` absent in Network). Staff dev users still redirect to `/admin`. | +| TC-WEB-5.25.9 | Staff Better Auth session does not run the customer bridge | Sign in via SSO with a staff identity. Navigate to `/`. | `App.tsx` routing redirects to `/admin`. `POST /api/portal/session-from-auth` is **not** called. | +| TC-WEB-5.25.10 | Unauthenticated user is sent to login (no infinite loop) | Without signing in, navigate directly to `/`. | `App.tsx` renders the LoginPage. `CustomerPortal` does not render. No `session-from-auth` request is made. | +| TC-WEB-5.25.11 | Session persists across reload via Better Auth cookie | After TC-WEB-5.25.1 succeeds, reload the page. | Portal dashboard re-renders. A fresh `GET /api/auth/get-session` + `POST /api/portal/session-from-auth` pair runs and yields 200/201. Greeting still reads "Hi, <FirstName>". | + +### 5.26 Customer Portal — RescheduleFlow under SSO Bridge (GRO-2012) + +These cases guard against the regression where an SSO-bridge customer (no `?sessionId=` URL param, no impersonation session) could trigger the RescheduleFlow and have `RescheduleFlow` receive `sessionId={null}`, which caused the internal `/api/book/availability` call to send `X-Impersonation-Session-Id: ` (empty) and return 401. The fix: `CustomerPortal` now passes `sessionId={session?.id ?? portalSessionId}` to `` (matching the fallback `renderSection()` already used). + +**Pre-conditions:** + +- TC-WEB-5.25.1 — TC-WEB-5.25.3 must pass on the build under test. +- The seeded customer used has at least one upcoming, non-cancelled appointment with `status` ∈ {`pending`, `confirmed`}. + +| # | Scenario | Steps | Expected | +|---|----------|-------|----------| +| TC-WEB-5.26.1 | RescheduleFlow receives portalSessionId (no 401) | 1. Complete TC-WEB-5.25.1 (SSO sign-in as a customer). 2. From the dashboard, click **Reschedule** on the next-upcoming appointment. 3. In the RescheduleFlow modal, pick a future date. 4. Open DevTools → Network and filter to `/api/`. | The `GET /api/book/availability?date=` request includes an `X-Impersonation-Session-Id` header whose value equals the `sessionId` from `session-from-auth`. The request returns 200. The time-slot list populates. No 401. | +| TC-WEB-5.26.2 | RescheduleFlow submit succeeds | From TC-WEB-5.26.1, pick a time slot and confirm. | `POST /api/portal/appointments//reschedule` (or the equivalent) includes the same `X-Impersonation-Session-Id` value. Returns 200. The modal closes and the appointment card reflects the new time. | +| TC-WEB-5.26.3 | Impersonation flow reschedule is unchanged (no regression) | 1. With an active impersonation session (`?sessionId=`), load `/`. 2. Click **Reschedule** on an appointment. 3. Pick a date. | `GET /api/book/availability` includes `X-Impersonation-Session-Id` equal to the impersonation `sessionId` (not `portalSessionId`). Returns 200. Behaves identically to the pre-fix build. | +| TC-WEB-5.26.4 | No `X-Impersonation-Session-Id` is empty / null | From TC-WEB-5.26.1, inspect every `/api/portal/*` and `/api/book/*` request. | No request has an empty or `null` `X-Impersonation-Session-Id` header. | + ## 6. Pass/Fail Criteria **Pass:** diff --git a/src/App.tsx b/src/App.tsx index ea51314..1bbb17f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -327,11 +327,16 @@ export function App() { .catch(() => setAuthDisabled(false)); }, []); - // After session is confirmed, check if setup is needed + // After session is confirmed, check if setup is needed. + // Always run the setup/status fetch as soon as the auth state is known — even for + // unauthenticated users, so the `needsSetup` value is in place if they sign in + // mid-session. The unauth branch in the render below is handled before + // `needsSetup` is consulted, so this is safe and avoids a stuck-`null` state. + // See GRO-2011. useEffect(() => { if (authDisabled === null || sessionLoading) return; - // Skip if no authenticated session (will redirect to login or dev selector) - if (!authDisabled && !session) return; + // In dev mode, only fetch when a dev user has been selected — otherwise the + // user is mid-redirect to the dev login selector and we don't need setup state. if (authDisabled && !getDevUser()) return; fetch("/api/setup/status") @@ -386,9 +391,10 @@ export function App() { return ; } - // Redirect authenticated users to /admin (but preserve impersonation flow via ?sessionId=) + // Redirect staff to /admin; allow customers to access portal (preserve impersonation via ?sessionId=) const searchParams = new URLSearchParams(location.search); - if (!authDisabled && session && !location.pathname.startsWith("/admin") && !searchParams.has("sessionId")) { + const isStaff = session?.user && (session.user as any).role === "staff"; + if (!authDisabled && session && !location.pathname.startsWith("/admin") && !searchParams.has("sessionId") && isStaff) { return ; } diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx index ea5aea8..edddc4f 100644 --- a/src/__tests__/App.test.tsx +++ b/src/__tests__/App.test.tsx @@ -121,6 +121,65 @@ describe("App navigation", () => { }); }); +describe("GRO-2011 — setup/status fetch for unauthenticated users", () => { + it("calls /api/setup/status for unauthenticated users so needsSetup is never stuck null", async () => { + const setupStatusCalls: string[] = []; + + global.fetch = vi.fn((url: string) => { + if (url === "/api/dev/config") { + return Promise.resolve({ + ok: true, + json: async () => ({ authDisabled: false }), + } as Response); + } + if (url === "/api/auth/get-session") { + // Better Auth returns 200 with null session for unauthenticated users. + return Promise.resolve({ + ok: true, + json: async () => null, + } as unknown as Response); + } + if (url === "/api/setup/status") { + setupStatusCalls.push(url); + return Promise.resolve({ + ok: true, + json: async () => ({ needsSetup: false }), + } as Response); + } + if (url === "/api/branding") { + return Promise.resolve({ + ok: true, + json: async () => ({ + businessName: "GroomBook", + primaryColor: "#4f8a6f", + accentColor: "#8b7355", + logoBase64: null, + logoMimeType: null, + }), + } as Response); + } + return Promise.resolve({ ok: true, json: async () => [] } as Response); + }) as unknown as typeof fetch; + + render( + + + + ); + + // The login page should be rendered for the unauthenticated user. + await screen.findByText("Sign in to continue"); + + // Crucially, /api/setup/status must be called even when the user is unauthenticated — + // otherwise `needsSetup` stays null and a later code path can short-circuit to a + // blank page (GRO-2011). + await waitFor(() => { + expect(setupStatusCalls.length).toBeGreaterThanOrEqual(1); + }); + expect(setupStatusCalls[0]).toBe("/api/setup/status"); + }); +}); + describe("Dev login selector", () => { it("redirects to /login when auth is disabled and no user selected", async () => { global.fetch = vi.fn((url: string) => { diff --git a/src/__tests__/Appointments.test.tsx b/src/__tests__/Appointments.test.tsx index bc42a07..0f6fd76 100644 --- a/src/__tests__/Appointments.test.tsx +++ b/src/__tests__/Appointments.test.tsx @@ -1,6 +1,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; import { render, screen, fireEvent, waitFor } from "@testing-library/react"; -import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection } from "../portal/sections/Appointments.tsx"; +import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx"; const UPCOMING_APPT = { id: "appt-1", @@ -379,4 +379,202 @@ describe("ConfirmationSection", () => { expect(screen.getByText(/Confirmed!/i)).toBeInTheDocument(); }); }); +}); + +describe("StatusBadge", () => { + it("renders Confirmed for confirmed status", () => { + render(); + expect(screen.getByText("Confirmed")).toBeInTheDocument(); + }); + + it("renders Pending for pending status", () => { + render(); + expect(screen.getByText("Pending")).toBeInTheDocument(); + }); + + it("renders Waitlisted for waitlisted status", () => { + render(); + expect(screen.getByText("Waitlisted")).toBeInTheDocument(); + }); + + it("renders Completed for completed status", () => { + render(); + expect(screen.getByText("Completed")).toBeInTheDocument(); + }); + + it("renders Cancelled for cancelled status", () => { + render(); + expect(screen.getByText("Cancelled")).toBeInTheDocument(); + }); + + it("falls back to status string for unknown status", () => { + render(); + expect(screen.getByText("custom-status")).toBeInTheDocument(); + }); + + it("uses correct CSS class for confirmed status", () => { + render(); + const badge = screen.getByText("Confirmed").closest('span'); + expect(badge?.className).toContain("bg-green-100"); + expect(badge?.className).toContain("text-green-700"); + }); + + it("uses correct CSS class for waitlisted status", () => { + render(); + const badge = screen.getByText("Waitlisted").closest('span'); + expect(badge?.className).toContain("bg-blue-100"); + expect(badge?.className).toContain("text-blue-600"); + }); + + it("uses correct CSS class for pending status", () => { + render(); + const badge = screen.getByText("Pending").closest('span'); + expect(badge?.className).toContain("bg-amber-100"); + expect(badge?.className).toContain("text-amber-600"); + }); + + it("uses fallback styling for unknown status", () => { + render(); + const badge = screen.getByText("unknown").closest('span'); + expect(badge?.className).toContain("bg-stone-100"); + expect(badge?.className).toContain("text-stone-600"); + }); +}); + +describe("RescheduleFlow dynamic time slots", () => { + beforeEach(() => { + vi.clearAllMocks(); + global.fetch = vi.fn(); + }); + + const RESCHEDULE_APPT = { + id: "appt-r1", + petId: "pet-1", + petName: "Buddy", + groomerId: "groomer-1", + groomerName: "Sarah", + services: ["Bath & Brush"], + serviceId: "service-1", + addOns: [], + date: "2027-01-01", + time: "10:00 AM", + duration: 60, + price: 50, + status: "confirmed" as const, + notes: "", + customerNotes: "", + confirmationStatus: "confirmed" as const, + }; + + it("shows loading state while fetching availability", async () => { + vi.mocked(global.fetch).mockReturnValue(new Promise(() => {})); // Never resolves + + const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx"); + render( {}} sessionId="test-session-id" />); + + const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i }); + fireEvent.change(dateInput, { target: { value: "2027-01-15" } }); + + await waitFor(() => { + expect(screen.getByText(/Checking availability/i)).toBeInTheDocument(); + }); + }); + + it("displays fetched time slots from API", async () => { + vi.mocked(global.fetch).mockResolvedValue({ + ok: true, + json: async () => ["9:00 AM", "10:00 AM", "2:00 PM"], + } as Response); + + const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx"); + render( {}} sessionId="test-session-id" />); + + const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i }); + fireEvent.change(dateInput, { target: { value: "2027-01-15" } }); + + await waitFor(() => { + expect(screen.getByText("9:00 AM")).toBeInTheDocument(); + expect(screen.getByText("10:00 AM")).toBeInTheDocument(); + expect(screen.getByText("2:00 PM")).toBeInTheDocument(); + }); + }); + + it("shows error state when availability fetch fails", async () => { + vi.mocked(global.fetch).mockRejectedValue(new Error("Network error")); + + const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx"); + render( {}} sessionId="test-session-id" />); + + const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i }); + fireEvent.change(dateInput, { target: { value: "2027-01-15" } }); + + await waitFor(() => { + expect(screen.getByText(/Failed to load time slots/i)).toBeInTheDocument(); + }); + }); + + it("shows no slots message when API returns empty array", async () => { + vi.mocked(global.fetch).mockResolvedValue({ + ok: true, + json: async () => [] as string[], + } as Response); + + const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx"); + render( {}} sessionId="test-session-id" />); + + const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i }); + fireEvent.change(dateInput, { target: { value: "2027-01-15" } }); + + await waitFor(() => { + expect(screen.getByText(/No available slots on this date/i)).toBeInTheDocument(); + }); + }); + + it("calls /api/book/availability with the selected date", async () => { + vi.mocked(global.fetch).mockResolvedValue({ + ok: true, + json: async () => ["9:00 AM"] as string[], + } as Response); + + const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx"); + render( {}} sessionId="test-session-id" />); + + const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i }); + fireEvent.change(dateInput, { target: { value: "2027-02-20" } }); + + await waitFor(() => { + expect(global.fetch).toHaveBeenCalledWith( + "/api/book/availability?date=2027-02-20", + expect.objectContaining({ + headers: expect.objectContaining({ "X-Impersonation-Session-Id": "test-session-id" }), + }) + ); + }); + }); + + it("re-fetches slots when date changes", async () => { + vi.mocked(global.fetch) + .mockResolvedValueOnce({ + ok: true, + json: async () => ["9:00 AM"] as string[], + } as Response) + .mockResolvedValueOnce({ + ok: true, + json: async () => ["11:00 AM", "1:00 PM"] as string[], + } as Response); + + const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx"); + render( {}} sessionId="test-session-id" />); + + const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i }); + + fireEvent.change(dateInput, { target: { value: "2027-01-10" } }); + await waitFor(() => expect(screen.getByText("9:00 AM")).toBeInTheDocument()); + + fireEvent.change(dateInput, { target: { value: "2027-01-15" } }); + await waitFor(() => { + expect(screen.getByText("11:00 AM")).toBeInTheDocument(); + expect(screen.getByText("1:00 PM")).toBeInTheDocument(); + }); + }); }); \ No newline at end of file diff --git a/src/__tests__/BookingCancelled.test.tsx b/src/__tests__/BookingCancelled.test.tsx new file mode 100644 index 0000000..2d6ada1 --- /dev/null +++ b/src/__tests__/BookingCancelled.test.tsx @@ -0,0 +1,27 @@ +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(); + expect(screen.getByRole("heading", { name: /Appointment Cancelled/i })).toBeInTheDocument(); + }); + + it("renders the cancelled body text", () => { + render(); + expect(screen.getByText(/Your appointment has been cancelled/i)).toBeInTheDocument(); + }); + + it("has a Book again link pointing to /admin/book", () => { + render(); + 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(); + const link = screen.getByRole("link", { name: /Back to Portal/i }); + expect(link).toHaveAttribute("href", "/"); + }); +}); diff --git a/src/__tests__/BookingError.test.tsx b/src/__tests__/BookingError.test.tsx new file mode 100644 index 0000000..24344aa --- /dev/null +++ b/src/__tests__/BookingError.test.tsx @@ -0,0 +1,38 @@ +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(); + expect(screen.getByRole("heading", { name: /Link Invalid or Expired/i })).toBeInTheDocument(); + }); + + it("renders the error body text", () => { + render(); + expect(screen.getByText(/This confirmation link is invalid/i)).toBeInTheDocument(); + }); + + it("has a Start a new booking link pointing to /admin/book", () => { + render(); + 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(); + const link = screen.getByRole("link", { name: /Back to Portal/i }); + expect(link).toHaveAttribute("href", "/"); + }); + + it("displays business contact phone", () => { + render(); + expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.phone.replace(/[()]/g, "\\$&")))).toBeInTheDocument(); + }); + + it("displays business contact email", () => { + render(); + expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.email))).toBeInTheDocument(); + }); +}); diff --git a/src/__tests__/analytics.test.ts b/src/__tests__/analytics.test.ts new file mode 100644 index 0000000..f24dd11 --- /dev/null +++ b/src/__tests__/analytics.test.ts @@ -0,0 +1,83 @@ +import { describe, it, expect, vi } from "vitest"; +import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics"; + +describe("analytics", () => { + describe("ANALYTICS_EVENTS constants", () => { + it("exports all required event names", () => { + expect(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE).toBe("booking_step_service"); + expect(ANALYTICS_EVENTS.BOOKING_STEP_TIME).toBe("booking_step_time"); + expect(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT).toBe("booking_step_contact"); + expect(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT).toBe("booking_step_submit"); + expect(ANALYTICS_EVENTS.BOOKING_CONFIRMED).toBe("booking_confirmed"); + expect(ANALYTICS_EVENTS.BOOKING_ERROR).toBe("booking_error"); + }); + + it("has no duplicate event names", () => { + const values = Object.values(ANALYTICS_EVENTS); + const unique = new Set(values); + expect(unique.size).toBe(values.length); + }); + }); + + describe("fireAnalyticsEvent", () => { + it("dispatches a CustomEvent with the correct event name", () => { + const listener = vi.fn(); + window.addEventListener(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, listener); + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "public" }); + expect(listener).toHaveBeenCalledTimes(1); + const event = listener.mock.calls[0]![0] as CustomEvent; + expect(event.type).toBe("booking_step_service"); + expect(event.detail.step).toBe("service"); + expect(event.detail.flow).toBe("public"); + expect(event.detail.timestamp).toBeDefined(); + window.removeEventListener(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, listener); + }); + + it("includes a timestamp in the event detail", () => { + const listener = vi.fn(); + window.addEventListener(ANALYTICS_EVENTS.BOOKING_CONFIRMED, listener); + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" }); + const event = listener.mock.calls[0]![0] as CustomEvent; + expect(event.detail.timestamp).toBeTruthy(); + expect(new Date(event.detail.timestamp as string)).toBeInstanceOf(Date); + window.removeEventListener(ANALYTICS_EVENTS.BOOKING_CONFIRMED, listener); + }); + + it("does not throw when called with no payload", () => { + expect(() => { + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, {}); + }).not.toThrow(); + }); + + it("does not throw when window.dispatchEvent throws", () => { + const original = window.dispatchEvent; + window.dispatchEvent = () => { + throw new Error("analytics blocked"); + }; + expect(() => { + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "public" }); + }).not.toThrow(); + window.dispatchEvent = original; + }); + + it("fires events for all event types", () => { + const events = Object.values(ANALYTICS_EVENTS); + for (const eventName of events) { + const listener = vi.fn(); + window.addEventListener(eventName, listener); + fireAnalyticsEvent(eventName as typeof events[number], { step: "test", flow: "public" }); + expect(listener).toHaveBeenCalledTimes(1); + window.removeEventListener(eventName, listener); + } + }); + + it("does not include PII in payload", () => { + // Payload only contains step, flow, and timestamp — no names, emails, or phones + const payload = { step: "contact", flow: "public" }; + const keys = Object.keys(payload); + const piish = ["name", "email", "phone", "clientName", "clientEmail", "clientPhone", "petName"]; + const hasPII = piish.some((k) => keys.includes(k)); + expect(hasPII).toBe(false); + }); + }); +}); diff --git a/src/__tests__/portal.test.tsx b/src/__tests__/portal.test.tsx index 36f04af..96f1adf 100644 --- a/src/__tests__/portal.test.tsx +++ b/src/__tests__/portal.test.tsx @@ -5,6 +5,22 @@ import { ImpersonationBanner } from "../portal/ImpersonationBanner.js"; import { AuditLogViewer } from "../portal/AuditLogViewer.js"; import type { ImpersonationSession, ImpersonationAuditLog } from "@groombook/types"; +// Spy on the RescheduleFlow so we can assert the sessionId prop it receives +// from CustomerPortal without rendering the full flow UI. The real module is +// still loaded via importActual; only RescheduleFlow is swapped. +const rescheduleFlowSpy = vi.hoisted(() => + vi.fn((_props: { sessionId: string | null; appointment: { id: string } }) => null) +); +vi.mock("../portal/sections/Appointments.js", async () => { + const actual = await vi.importActual( + "../portal/sections/Appointments.js" + ); + return { + ...actual, + RescheduleFlow: rescheduleFlowSpy, + }; +}); + const SESSION: ImpersonationSession = { id: "sess-1", staffId: "staff-1", @@ -313,3 +329,233 @@ describe("CustomerPortal session loading", () => { Object.defineProperty(window, "location", { value: originalLocation, writable: true }); }); }); + +// ─── CustomerPortal — Better Auth SSO bridge (GRO-1867) ──────────────────── + +describe("CustomerPortal SSO bridge", () => { + beforeEach(() => { + // Make sure no dev-user leaks across tests + window.localStorage.clear(); + }); + + const brandingResponse = { + ok: true, + json: async () => ({ + businessName: "GroomBook", + primaryColor: "#4f8a6f", + accentColor: "#8b7355", + logoBase64: null, + logoMimeType: null, + }), + } as Response; + + it("bridges Better Auth session via /api/portal/session-from-auth and uses returned sessionId", async () => { + global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => { + const url = typeof input === "string" ? input : input.toString(); + if (url === "/api/branding") return Promise.resolve(brandingResponse); + if (url === "/api/auth/get-session") { + return Promise.resolve({ + ok: true, + json: async () => ({ user: { email: "customer@example.com", role: "customer" } }), + } as Response); + } + if (url === "/api/portal/session-from-auth" && init?.method === "POST") { + return Promise.resolve({ + ok: true, + status: 201, + json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }), + } as Response); + } + // Subsequent portal API calls — surface them so we can assert the header + return Promise.resolve({ ok: true, json: async () => ({}) } as Response); + }) as unknown as typeof fetch; + + const { CustomerPortal } = await import("../portal/CustomerPortal.js"); + render( + + + + ); + + await waitFor(() => { + expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" })); + }); + await waitFor(() => { + expect(global.fetch).toHaveBeenCalledWith( + "/api/portal/session-from-auth", + expect.objectContaining({ method: "POST", credentials: "include" }) + ); + }); + // Client greeting reflects the bridged customer name (proof the response was consumed) + await waitFor(() => { + expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument(); + }); + // The impersonation banner must NOT appear — this is the customer themselves + expect(screen.queryByRole("button", { name: /End Session/i })).not.toBeInTheDocument(); + }); + + it("shows a friendly fallback when session-from-auth returns 404 (no client record)", async () => { + global.fetch = vi.fn((input: RequestInfo) => { + const url = typeof input === "string" ? input : input.toString(); + if (url === "/api/branding") return Promise.resolve(brandingResponse); + if (url === "/api/auth/get-session") { + return Promise.resolve({ + ok: true, + json: async () => ({ user: { email: "stranger@example.com", role: "customer" } }), + } as Response); + } + if (url === "/api/portal/session-from-auth") { + return Promise.resolve({ + ok: false, + status: 404, + json: async () => ({ error: "No client record found for this user" }), + } as Response); + } + return Promise.resolve({ ok: true, json: async () => ({}) } as Response); + }) as unknown as typeof fetch; + + const { CustomerPortal } = await import("../portal/CustomerPortal.js"); + render( + + + + ); + + await waitFor(() => { + expect(screen.getByText(/Portal access not configured/i)).toBeInTheDocument(); + }); + expect(screen.getByText(/not linked to a customer record/i)).toBeInTheDocument(); + // Sign-out escape hatch is present so the user is not stuck in a loop + expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument(); + }); + + it("does not call session-from-auth when there is no Better Auth session", async () => { + global.fetch = vi.fn((input: RequestInfo) => { + const url = typeof input === "string" ? input : input.toString(); + if (url === "/api/branding") return Promise.resolve(brandingResponse); + if (url === "/api/auth/get-session") { + return Promise.resolve({ + ok: true, + json: async () => null, + } as Response); + } + return Promise.resolve({ ok: true, json: async () => ({}) } as Response); + }) as unknown as typeof fetch; + + const { CustomerPortal } = await import("../portal/CustomerPortal.js"); + render( + + + + ); + + await waitFor(() => { + expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" })); + }); + // Wait one tick to ensure no subsequent bridge call is queued + await new Promise((r) => setTimeout(r, 30)); + const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter( + ([u]) => typeof u === "string" && u === "/api/portal/session-from-auth" + ); + expect(bridgeCalls).toHaveLength(0); + }); + + it("skips the bridge for staff Better Auth sessions", async () => { + global.fetch = vi.fn((input: RequestInfo) => { + const url = typeof input === "string" ? input : input.toString(); + if (url === "/api/branding") return Promise.resolve(brandingResponse); + if (url === "/api/auth/get-session") { + return Promise.resolve({ + ok: true, + json: async () => ({ user: { email: "staff@example.com", role: "staff" } }), + } as Response); + } + return Promise.resolve({ ok: true, json: async () => ({}) } as Response); + }) as unknown as typeof fetch; + + const { CustomerPortal } = await import("../portal/CustomerPortal.js"); + render( + + + + ); + + await waitFor(() => { + expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" })); + }); + await new Promise((r) => setTimeout(r, 30)); + const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter( + ([u]) => typeof u === "string" && u === "/api/portal/session-from-auth" + ); + expect(bridgeCalls).toHaveLength(0); + }); + + it("passes portalSessionId (not null) to RescheduleFlow for SSO bridge customers (GRO-2012)", async () => { + rescheduleFlowSpy.mockClear(); + + global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => { + const url = typeof input === "string" ? input : input.toString(); + if (url === "/api/branding") return Promise.resolve(brandingResponse); + if (url === "/api/auth/get-session") { + return Promise.resolve({ + ok: true, + json: async () => ({ user: { email: "customer@example.com", role: "customer" } }), + } as Response); + } + if (url === "/api/portal/session-from-auth" && init?.method === "POST") { + return Promise.resolve({ + ok: true, + status: 201, + json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }), + } as Response); + } + // Dashboard data — return an upcoming appointment so the Reschedule + // button is rendered on the dashboard card. + if (url === "/api/portal/appointments") { + return Promise.resolve({ + ok: true, + json: async () => ({ + appointments: [ + { + id: "appt-1", + date: "2099-01-01", + time: "10:00", + petName: "Buddy", + serviceName: "Bath & Brush", + status: "confirmed", + }, + ], + }), + } as Response); + } + if (url === "/api/portal/pets") { + return Promise.resolve({ ok: true, json: async () => ({ pets: [] }) } as Response); + } + if (url === "/api/portal/invoices") { + return Promise.resolve({ ok: true, json: async () => ({ invoices: [] }) } as Response); + } + return Promise.resolve({ ok: true, json: async () => ({}) } as Response); + }) as unknown as typeof fetch; + + const { CustomerPortal } = await import("../portal/CustomerPortal.js"); + render( + + + + ); + + // Wait for the Reschedule button to appear on the dashboard card + const rescheduleBtn = await screen.findByRole("button", { name: /^Reschedule$/i }); + fireEvent.click(rescheduleBtn); + + // RescheduleFlow should have been invoked with the bridged portalSessionId, + // NOT null. Pre-fix, the call would be sessionId={null} for SSO customers. + await waitFor(() => { + expect(rescheduleFlowSpy).toHaveBeenCalled(); + }); + const lastProps = rescheduleFlowSpy.mock.lastCall?.[0]; + expect(lastProps).toBeDefined(); + expect(lastProps!.sessionId).toBe("sso-sess-1"); + expect(lastProps!.appointment.id).toBe("appt-1"); + }); +}); diff --git a/src/index.css b/src/index.css index 61c98ed..32b3b5e 100644 --- a/src/index.css +++ b/src/index.css @@ -8,6 +8,19 @@ --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-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 { diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts new file mode 100644 index 0000000..ef3f22d --- /dev/null +++ b/src/lib/analytics.ts @@ -0,0 +1,40 @@ +// Analytics event names — single source of truth +export const ANALYTICS_EVENTS = { + BOOKING_STEP_SERVICE: "booking_step_service", + BOOKING_STEP_TIME: "booking_step_time", + BOOKING_STEP_CONTACT: "booking_step_contact", + BOOKING_STEP_SUBMIT: "booking_step_submit", + BOOKING_CONFIRMED: "booking_confirmed", + BOOKING_ERROR: "booking_error", +} as const; + +export type AnalyticsEventName = (typeof ANALYTICS_EVENTS)[keyof typeof ANALYTICS_EVENTS]; + +export type AnalyticsPayload = { + step?: string; + flow?: "public" | "portal"; + [key: string]: string | undefined; +}; + +/** + * Fires a lightweight analytics event via window.dispatchEvent. + * No-op safe: failures are swallowed so analytics never breaks the booking flow. + * Designed for later Plausible/GTM integration. + */ +export function fireAnalyticsEvent( + eventName: AnalyticsEventName, + payload: AnalyticsPayload = {} +): void { + try { + window.dispatchEvent( + new CustomEvent(eventName, { + detail: { + ...payload, + timestamp: new Date().toISOString(), + }, + }) + ); + } catch { + // no-op: analytics must never break the booking flow + } +} diff --git a/src/lib/contact.ts b/src/lib/contact.ts new file mode 100644 index 0000000..d2908cf --- /dev/null +++ b/src/lib/contact.ts @@ -0,0 +1,7 @@ +// 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; diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx index 179b0f0..a855377 100644 --- a/src/pages/Book.tsx +++ b/src/pages/Book.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; import type { Service } from "@groombook/types"; +import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics"; // ─── Types ─────────────────────────────────────────────────────────────────── @@ -193,12 +194,14 @@ export function BookPage() { setSelectedService(svc); setForm((f) => ({ ...f, serviceId: svc.id })); setStep(2); + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "public" }); } function goToStep3() { if (!selectedSlot) return; setForm((f) => ({ ...f, startTime: selectedSlot })); setStep(3); + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "public" }); } function goToStep4() { @@ -208,6 +211,7 @@ export function BookPage() { } setFormError(null); setStep(4); + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "contact", flow: "public" }); } async function submitBooking() { @@ -236,6 +240,7 @@ export function BookPage() { throw new Error(body.error ?? `HTTP ${res.status}`); } const data = (await res.json()) as BookingResult; + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "public" }); setResult(data); setStep(5); } catch (e: unknown) { diff --git a/src/pages/BookingCancelled.tsx b/src/pages/BookingCancelled.tsx index 9b2ab4a..6ded7af 100644 --- a/src/pages/BookingCancelled.tsx +++ b/src/pages/BookingCancelled.tsx @@ -1,3 +1,10 @@ +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 (
✗
-

- Appointment Cancelled +

+ {STRINGS.heading}

-

- Your appointment has been cancelled. If this was a mistake or you'd - like to rebook, please contact us. +

+ {STRINGS.body}

- - Back to Portal - + +
); diff --git a/src/pages/BookingConfirmed.tsx b/src/pages/BookingConfirmed.tsx index a56ba96..ed306fc 100644 --- a/src/pages/BookingConfirmed.tsx +++ b/src/pages/BookingConfirmed.tsx @@ -1,4 +1,11 @@ +import { useEffect } from "react"; +import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics"; + export function BookingConfirmedPage() { + useEffect(() => { + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" }); + }, []); + return (
{ + fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, { step: "error", flow: "public" }); + }, []); + return (
⚠️
-

- Link Invalid or Expired +

+ {STRINGS.heading}

-

- This confirmation link is invalid, has already been used, or your - appointment has already passed. Please contact us if you need help. +

+ {STRINGS.body}

- - Back to Portal - + + + +
+

{STRINGS.contactLabel}

+

+ {BUSINESS_CONTACT_INFO.phone} · {BUSINESS_CONTACT_INFO.email} +

+
); diff --git a/src/portal/CustomerPortal.tsx b/src/portal/CustomerPortal.tsx index a542cc0..3b284b7 100644 --- a/src/portal/CustomerPortal.tsx +++ b/src/portal/CustomerPortal.tsx @@ -43,6 +43,15 @@ export function CustomerPortal() { // Track whether an impersonation session fetch from URL param is in-flight // Dashboard will not redirect while this is true, allowing the session to load const [isImpersonating, setIsImpersonating] = useState(false); + // Portal session ID for real SSO customers (GRO-1867). Populated by the + // Better Auth → /api/portal/session-from-auth bridge below. Carries the + // X-Impersonation-Session-Id header on subsequent portal API calls without + // triggering the impersonation banner (the customer is themselves). + const [portalSessionId, setPortalSessionId] = useState(null); + // User-facing message when the SSO bridge cannot resolve a client record + // (e.g. authenticated user with no matching client row). Rendered in place + // of the portal chrome instead of bouncing back to /login. + const [authError, setAuthError] = useState(null); const { branding } = useBranding(); const [searchParams, setSearchParams] = useSearchParams(); @@ -98,10 +107,64 @@ export function CustomerPortal() { } }) .finally(() => setInitComplete(true)); - } else { - // No valid session: staff dev users and unauthenticated users fall through here - setInitComplete(true); + return; } + + if (devUser && devUser.type === "staff") { + // Staff dev user — fall through; App.tsx redirects to /admin. + setInitComplete(true); + return; + } + + // Real SSO customer (GRO-1867): bridge a Better Auth session into a portal + // session via POST /api/portal/session-from-auth. The returned session ID + // is used in the X-Impersonation-Session-Id header for portal API calls. + (async () => { + try { + const sessionResp = await fetch("/api/auth/get-session", { credentials: "include" }); + if (!sessionResp.ok) { + setInitComplete(true); + return; + } + let sessionData: { user?: { email?: string; role?: string | null } } | null = null; + try { + sessionData = (await sessionResp.json()) as { user?: { email?: string; role?: string | null } } | null; + } catch { + // Better Auth returns an empty body when there is no session + } + if (!sessionData || !sessionData.user) { + setInitComplete(true); + return; + } + // Staff are routed to /admin by App.tsx; don't run the customer bridge. + if (sessionData.user.role === "staff") { + setInitComplete(true); + return; + } + + const bridgeResp = await fetch("/api/portal/session-from-auth", { + method: "POST", + credentials: "include", + }); + + if (bridgeResp.ok) { + const data = await bridgeResp.json() as { sessionId: string; clientId: string; clientName: string }; + setPortalSessionId(data.sessionId); + setClientName(data.clientName); + } else if (bridgeResp.status === 404) { + // Authenticated but no matching client row — show a friendly message + // instead of bouncing back to /login (which would loop indefinitely). + setAuthError( + "Your account is not linked to a customer record. Please contact your groomer to set up portal access." + ); + } + // 401/other: fall through; App.tsx render guard will redirect to /login. + } catch { + // Network error — fall through; the render guard will redirect to /login. + } finally { + setInitComplete(true); + } + })(); }, []); const handleEnd = useCallback(async () => { @@ -157,7 +220,7 @@ export function CustomerPortal() { const isReadOnly = session?.status === "active"; const renderSection = () => { - const sessionId = session?.id ?? null; + const sessionId = session?.id ?? portalSessionId; switch (activeSection) { case "dashboard": return ; @@ -183,7 +246,40 @@ export function CustomerPortal() { // For client dev users, we stay on the portal even if session is null — the dev-session // response may not have id set immediately, or there may be timing issues with the // session state. Dev users are verified via localStorage and the dev-session flow. - if (initComplete && !session) { + // SSO customers are recognised by portalSessionId (set by the Better Auth bridge). + if (initComplete && !session && !portalSessionId) { + if (authError) { + // GRO-1867: graceful 404 fallback — authenticated user has no client row. + return ( +
+
+
+ +
+

Portal access not configured

+

{authError}

+ +
+
+ ); + } const devUser = getDevUser(); if (devUser && devUser.type === "staff") { return ; @@ -230,7 +326,7 @@ export function CustomerPortal() { { setShowReschedule(false); setRescheduleAppointment(null); }} - sessionId={session?.id ?? null} + sessionId={session?.id ?? portalSessionId} /> )} diff --git a/src/portal/sections/Appointments.tsx b/src/portal/sections/Appointments.tsx index f5fad62..0a86e2f 100644 --- a/src/portal/sections/Appointments.tsx +++ b/src/portal/sections/Appointments.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react'; +import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics'; export interface Appointment { id: string; @@ -82,14 +83,34 @@ export function isUpcoming(appt: Appointment): boolean { const STATUS_COLORS: Record = { confirmed: 'bg-green-100 text-green-700', - pending: 'bg-amber-100 text-amber-700', - waitlisted: 'bg-blue-100 text-blue-700', + pending: 'bg-amber-100 text-amber-600', + waitlisted: 'bg-blue-100 text-blue-600', completed: 'bg-stone-100 text-stone-600', cancelled: 'bg-red-100 text-red-600', 'no-show': 'bg-yellow-100 text-yellow-700', - scheduled: 'bg-blue-100 text-blue-700', + scheduled: 'bg-blue-100 text-blue-600', }; +const STATUS_LABELS: Record = { + confirmed: 'Confirmed', + pending: 'Pending', + waitlisted: 'Waitlisted', + completed: 'Completed', + cancelled: 'Cancelled', + 'no-show': 'No-show', + scheduled: 'Scheduled', +}; + +export function StatusBadge({ status }: { status: string }) { + const label = STATUS_LABELS[status] ?? status; + const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600'; + return ( + + {label} + + ); +} + const CONFIRMATION_STATUS_COLORS: Record = { confirmed: 'bg-green-100 text-green-700', pending: 'bg-amber-100 text-amber-700', @@ -297,13 +318,7 @@ function AppointmentCard({ with {appt.groomerName || 'First Available'}
- - {appt.status} - + {expanded ? ( ) : ( @@ -573,16 +588,26 @@ export function RescheduleFlow({ const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); + const [slotsLoading, setSlotsLoading] = useState(false); + const [slotsError, setSlotsError] = useState(null); + const [availableTimes, setAvailableTimes] = useState([]); - const availableTimes = [ - '9:00 AM', - '10:00 AM', - '11:00 AM', - '1:00 PM', - '2:00 PM', - '3:00 PM', - '4:00 PM', - ]; + useEffect(() => { + if (!selectedDate || !sessionId) { + setAvailableTimes([]); + return; + } + const params = new URLSearchParams({ date: selectedDate }); + setSlotsLoading(true); + setSlotsError(null); + fetch(`/api/book/availability?${params.toString()}`, { + headers: { "X-Impersonation-Session-Id": sessionId ?? "" }, + }) + .then((r) => r.json() as Promise) + .then(setAvailableTimes) + .catch(() => setSlotsError('Failed to load time slots')) + .finally(() => setSlotsLoading(false)); + }, [selectedDate, sessionId]); async function handleSubmit() { if (!selectedDate || !selectedTime) return; @@ -654,6 +679,7 @@ export function RescheduleFlow({

Pick a New Date & Time

setSelectedDate(e.target.value)} min={new Date().toISOString().split('T')[0]} @@ -661,7 +687,12 @@ export function RescheduleFlow({ /> {selectedDate && (
- {availableTimes.map((time) => ( + {slotsLoading &&

Checking availability…

} + {!slotsLoading && slotsError &&

{slotsError}

} + {!slotsLoading && availableTimes.length === 0 && !slotsError && ( +

No available slots on this date.

+ )} + {!slotsLoading && availableTimes.map((time) => (