Promote dev → uat: GRO-2213 portal booking preferredTime HH:MM:SS fix (#52)

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, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -690,4 +690,115 @@ describe("RescheduleFlow dynamic time slots", () => {
       expect(screen.getByText("1:00 PM")).toBeInTheDocument();
     });
   });
-});
+});
+describe("slot helpers (GRO-2213)", () => {
+  it("formatSlotLabel formats a canonical UTC ISO slot to a UTC clock label", () => {
+    expect(formatSlotLabel("2026-06-09T10:00:00.000Z")).toBe("10:00 AM");
+    expect(formatSlotLabel("2026-06-09T14:30:00.000Z")).toBe("2:30 PM");
+    expect(formatSlotLabel("2026-06-09T09:00:00.000Z")).toBe("9:00 AM");
+  });
+
+  it("formatSlotLabel never echoes a raw ISO string", () => {
+    expect(formatSlotLabel("2026-06-09T10:00:00.000Z")).not.toMatch(/\d{4}-\d{2}-\d{2}T/);
+  });
+
+  it("formatSlotLabel passes through an already-formatted label unchanged", () => {
+    expect(formatSlotLabel("10:00 AM")).toBe("10:00 AM");
+  });
+
+  it("slotToTime extracts the UTC HH:MM:SS time component from an ISO slot", () => {
+    expect(slotToTime("2026-06-09T10:00:00.000Z")).toBe("10:00:00");
+    expect(slotToTime("2026-06-09T14:30:00.000Z")).toBe("14:30:00");
+    expect(slotToTime("2026-06-09T10:00:00.000Z")).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+  });
+
+  it("slotToTime guards a value that is already HH:MM:SS", () => {
+    expect(slotToTime("10:00:00")).toBe("10:00:00");
+  });
+
+  it("slotToTime converts a 12-hour label fallback to HH:MM:SS", () => {
+    expect(slotToTime("9:00 AM")).toBe("09:00:00");
+    expect(slotToTime("2:30 PM")).toBe("14:30:00");
+  });
+});
+
+describe("BookingFlow Book New funnel (GRO-2213)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  function routedFetch(captured: { waitlistBody?: Record<string, unknown> }) {
+    return (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url.includes("/api/portal/pets")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ pets: [{ id: "pet-1", name: "Buddy", breed: "Lab" }] }),
+        } as Response);
+      }
+      if (url.includes("/api/portal/services")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({
+            services: [{ id: "service-1", name: "Bath & Brush", isAddOn: false, duration: 60, price: 50 }],
+          }),
+        } as Response);
+      }
+      if (url.includes("/api/book/availability")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ["2026-06-09T10:00:00.000Z", "2026-06-09T14:30:00.000Z"],
+        } as Response);
+      }
+      if (url.includes("/api/portal/waitlist")) {
+        captured.waitlistBody = JSON.parse((init?.body as string) ?? "{}");
+        return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    };
+  }
+
+  it("renders formatted slot labels (not raw ISO) and submits preferredTime as HH:MM:SS", async () => {
+    const captured: { waitlistBody?: Record<string, unknown> } = {};
+    vi.mocked(global.fetch).mockImplementation(routedFetch(captured) as typeof fetch);
+
+    render(<BookingFlow onClose={() => {}} sessionId="test-session-id" />);
+
+    // Step 1 — pick pet (auto-advances to step 2)
+    await waitFor(() => expect(screen.getByText("Buddy")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Buddy"));
+
+    // Step 2 — pick service, then Next
+    await waitFor(() => expect(screen.getByText("Bath & Brush")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Bath & Brush"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 3 — groomer, Next
+    await waitFor(() => expect(screen.getByText("First Available")).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 4 — date + slot
+    await waitFor(() => expect(screen.getByLabelText(/date/i)).toBeInTheDocument());
+    fireEvent.change(screen.getByLabelText(/date/i), { target: { value: "2026-06-09" } });
+
+    // Slot button shows the formatted UTC label, never the raw ISO
+    await waitFor(() => expect(screen.getByText("10:00 AM")).toBeInTheDocument());
+    expect(screen.queryByText(/2026-06-09T10:00:00/)).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("10:00 AM"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 5 — review shows the formatted label
+    await waitFor(() => expect(screen.getByText(/Review & Confirm/i)).toBeInTheDocument());
+    expect(screen.getByText(/10:00 AM/)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Booking/i }));
+
+    await waitFor(() => expect(captured.waitlistBody).toBeDefined());
+    const body = captured.waitlistBody ?? {};
+    expect(body.preferredTime).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+    expect(body.preferredTime).toBe("10:00:00");
+    expect(body.preferredDate).toBe("2026-06-09");
+  });
+});

src/__tests__/PetForm.test.tsx

@@ -154,4 +154,12 @@ describe("PetForm", () => {
     expect(screen.getByText("Anxious")).toBeTruthy();
     expect(screen.getByText("Good with kids")).toBeTruthy();
   });
+
+  // ── Weight pre-fill from portal `weight` key (GRO-2207) ───────────────────────
+
+  it("pre-fills weight from the portal `weight` key when weightKg is absent", () => {
+    const portalPet: Pet = { ...BASE_PET, weightKg: null, weight: "12.50" };
+    render(<PetForm pet={portalPet} onSave={onSave} onCancel={onCancel} />);
+    expect(screen.getByDisplayValue(12.5)).toBeTruthy();
+  });
 });

src/__tests__/PetProfiles.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BasicInfoTab, formatSizeCategory } from "../portal/sections/PetProfiles.js";
+import type { Pet } from "@groombook/types";
+
+// The portal endpoint (GET /api/portal/pets) serializes DB columns under
+// portal-shaped keys: weightKg→weight, dateOfBirth→birthDate. The read view
+// must surface those keys (GRO-2207), not the raw staff-side weightKg/dateOfBirth.
+const PORTAL_PET: Pet = {
+  id: "pet-1",
+  clientId: "client-1",
+  name: "Pup Alpha",
+  species: "dog",
+  breed: "Poodle",
+  // Staff-shaped keys intentionally null — only the portal keys are populated,
+  // proving the read view reads `weight`/`birthDate`.
+  weightKg: null,
+  dateOfBirth: null,
+  weight: "12.50",
+  birthDate: "2022-03-10T00:00:00.000Z",
+  petSizeCategory: "extra_large",
+  healthAlerts: null,
+  groomingNotes: null,
+  cutStyle: null,
+  shampooPreference: null,
+  specialCareNotes: null,
+  customFields: {},
+  coatType: null,
+  preferredCuts: [],
+  medicalAlerts: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+describe("BasicInfoTab read view (GRO-2207)", () => {
+  it("renders Weight from the portal `weight` key", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("12.50 kg")).toBeInTheDocument();
+  });
+
+  it("renders Date of Birth from the portal `birthDate` key", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("March 10, 2022")).toBeInTheDocument();
+  });
+
+  it("renders Size Category formatted from petSizeCategory", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("Size Category")).toBeInTheDocument();
+    expect(screen.getByText("Extra Large")).toBeInTheDocument();
+  });
+
+  it("falls back to staff-shaped keys when portal keys are absent", () => {
+    const staffShaped: Pet = { ...PORTAL_PET, weight: null, birthDate: null, weightKg: 25, dateOfBirth: "2020-01-05T00:00:00.000Z" };
+    render(<BasicInfoTab pet={staffShaped} readOnly />);
+    expect(screen.getByText("25 kg")).toBeInTheDocument();
+    expect(screen.getByText("January 5, 2020")).toBeInTheDocument();
+  });
+
+  it("shows Unknown for missing weight/DoB and size", () => {
+    const empty: Pet = { ...PORTAL_PET, weight: null, birthDate: null, weightKg: null, dateOfBirth: null, petSizeCategory: null };
+    render(<BasicInfoTab pet={empty} readOnly />);
+    // Weight, Date of Birth and Size Category rows all read "Unknown".
+    expect(screen.getAllByText("Unknown").length).toBeGreaterThanOrEqual(3);
+  });
+});
+
+describe("formatSizeCategory", () => {
+  it("title-cases each underscore-separated segment", () => {
+    expect(formatSizeCategory("extra_large")).toBe("Extra Large");
+    expect(formatSizeCategory("small")).toBe("Small");
+    expect(formatSizeCategory("medium")).toBe("Medium");
+    expect(formatSizeCategory("large")).toBe("Large");
+  });
+
+  it("returns Unknown for null/undefined/empty", () => {
+    expect(formatSizeCategory(null)).toBe("Unknown");
+    expect(formatSizeCategory(undefined)).toBe("Unknown");
+    expect(formatSizeCategory("")).toBe("Unknown");
+  });
+});