fix(GRO-2105): include serviceId in BookingFlow/RescheduleFlow availability call (#46)

src/__tests__/Appointments.test.tsx

@@ -530,7 +530,7 @@ describe("RescheduleFlow dynamic time slots", () => {
     });
   });
 
-  it("calls /api/book/availability with the selected date", async () => {
+  it("calls /api/book/availability with the serviceId and selected date", async () => {
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
       json: async () => ["9:00 AM"] as string[],
@@ -544,7 +544,7 @@ describe("RescheduleFlow dynamic time slots", () => {
 
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
-        "/api/book/availability?date=2027-02-20",
+        "/api/book/availability?serviceId=service-1&date=2027-02-20",
         expect.objectContaining({
           headers: expect.objectContaining({ "X-Impersonation-Session-Id": "test-session-id" }),
         })
@@ -552,6 +552,41 @@ describe("RescheduleFlow dynamic time slots", () => {
     });
   });
 
+  it("shows error message when API returns a 4xx error object instead of an array", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: false,
+      status: 400,
+      json: async () => ({ error: "serviceId and date are required" }),
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} 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(screen.getByText(/serviceId and date are required/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows generic error when API returns 200 but body is not an array", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ error: "serviceId and date are required" }),
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} 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(screen.getByText(/Failed to load time slots/i)).toBeInTheDocument();
+    });
+  });
+
   it("re-fetches slots when date changes", async () => {
     vi.mocked(global.fetch)
       .mockResolvedValueOnce({

src/portal/sections/Appointments.tsx

@@ -2,6 +2,35 @@ import React, { useState, useEffect } from 'react';
 import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
 import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
 
+// ─── Availability fetch helper ───────────────────────────────────────────────
+// Returns ISO startTime strings for the given service/date, or an error message.
+// Validates HTTP status and that the body is actually an array — the API
+// responds with `{error: "..."}` on 4xx, and we must not treat that as slots.
+const AVAILABILITY_ERROR_MESSAGE = 'Failed to load time slots';
+
+async function fetchAvailability(
+  params: { serviceId: string; date: string },
+  sessionId: string | null,
+): Promise<{ times: string[]; error: string | null }> {
+  const url = `/api/book/availability?${new URLSearchParams(params).toString()}`;
+  const headers: Record<string, string> = {};
+  if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId;
+  try {
+    const res = await fetch(url, { headers });
+    if (!res.ok) {
+      const body = (await res.json().catch(() => ({}))) as { error?: string };
+      return { times: [], error: body.error ?? `${AVAILABILITY_ERROR_MESSAGE} (HTTP ${res.status})` };
+    }
+    const data: unknown = await res.json();
+    if (!Array.isArray(data)) {
+      return { times: [], error: AVAILABILITY_ERROR_MESSAGE };
+    }
+    return { times: data as string[], error: null };
+  } catch {
+    return { times: [], error: AVAILABILITY_ERROR_MESSAGE };
+  }
+}
+
 export interface Appointment {
   id: string;
   petId: string;
@@ -595,19 +624,29 @@ export function RescheduleFlow({
   useEffect(() => {
     if (!selectedDate || !sessionId) {
       setAvailableTimes([]);
+      setSlotsError(null);
       return;
     }
-    const params = new URLSearchParams({ date: selectedDate });
+    if (!appt.serviceId) {
+      setAvailableTimes([]);
+      setSlotsError('Failed to load time slots');
+      return;
+    }
+    let cancelled = false;
     setSlotsLoading(true);
     setSlotsError(null);
-    fetch(`/api/book/availability?${params.toString()}`, {
-      headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
-    })
-      .then((r) => r.json() as Promise<string[]>)
-      .then(setAvailableTimes)
-      .catch(() => setSlotsError('Failed to load time slots'))
-      .finally(() => setSlotsLoading(false));
-  }, [selectedDate, sessionId]);
+    fetchAvailability({ serviceId: appt.serviceId, date: selectedDate }, sessionId).then(
+      ({ times, error }) => {
+        if (cancelled) return;
+        setAvailableTimes(times);
+        setSlotsError(error);
+        setSlotsLoading(false);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDate, sessionId, appt.serviceId]);
 
   async function handleSubmit() {
     if (!selectedDate || !selectedTime) return;
@@ -766,19 +805,30 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   useEffect(() => {
     if (!selectedDate || !sessionId) {
       setAvailableTimes([]);
+      setSlotsError(null);
       return;
     }
-    const params = new URLSearchParams({ date: selectedDate });
+    const serviceId = selectedServices[0]?.id;
+    if (!serviceId) {
+      setAvailableTimes([]);
+      setSlotsError('Failed to load time slots');
+      return;
+    }
+    let cancelled = false;
     setSlotsLoading(true);
     setSlotsError(null);
-    fetch(`/api/book/availability?${params.toString()}`, {
-      headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
-    })
-      .then((r) => r.json() as Promise<string[]>)
-      .then(setAvailableTimes)
-      .catch(() => setSlotsError('Failed to load time slots'))
-      .finally(() => setSlotsLoading(false));
-  }, [selectedDate, sessionId]);
+    fetchAvailability({ serviceId, date: selectedDate }, sessionId).then(
+      ({ times, error }) => {
+        if (cancelled) return;
+        setAvailableTimes(times);
+        setSlotsError(error);
+        setSlotsLoading(false);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDate, sessionId, selectedServices]);
 
   useEffect(() => {
     const fetchData = async () => {