@tribe-nest/forge 3.57.0 → 3.59.0

package/src/ui/styled/PhoneInput.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { usePhoneInput, type UsePhoneInputOptions, type UsePhoneInputReturn } from "../headless/forms/usePhoneInput";
+
+export interface PhoneInputProps extends UsePhoneInputOptions {
+  /** Drive the field from a hook the parent already owns (checkout does this). */
+  controller?: UsePhoneInputReturn;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+}
+
+/**
+ * Country select plus a national-format number field.
+ *
+ * The visitor picks a flag and types their number the way they would say it
+ * aloud, with no country code and no `+`. The E.164 string the rest of the
+ * platform needs is derived, never typed.
+ *
+ * The hint sits in the placeholder rather than under the field. A real national
+ * example for the selected country (`07700 900123` under GB) says more than a
+ * sentence would, and a permanent muted line under every phone field is exactly
+ * the kind of copy people stop reading. The "without the country code" wording
+ * appears only when someone has typed a `+` anyway, which is the moment it is
+ * worth saying.
+ */
+export function PhoneInput({ controller, label, required, disabled, id, ...opts }: PhoneInputProps) {
+  const theme = useForgeTheme();
+  const t = useForgeT();
+  const own = usePhoneInput(opts);
+  const f = controller ?? own;
+
+  const fieldId = id ?? "forge-phone";
+  const errorId = `${fieldId}-error`;
+  const alpha = (a: number) =>
+    Math.round(a * 255)
+      .toString(16)
+      .padStart(2, "0");
+
+  const shared: React.CSSProperties = {
+    padding: "8px 12px",
+    border: `1px solid ${f.error ? "#ef4444" : `${theme.colors.primary}${alpha(0.3)}`}`,
+    backgroundColor: theme.colors.background,
+    color: theme.colors.text,
+    borderRadius: `${theme.cornerRadius}px`,
+    fontSize: 14,
+  };
+
+  const errorText =
+    f.error === "required"
+      ? t("forge.phone_input.error_required")
+      : f.error === "no_country"
+        ? t("forge.phone_input.error_no_country")
+        : f.error === "invalid"
+          ? t("forge.phone_input.error_invalid")
+          : null;
+
+  return (
+    <div className="fg:flex fg:flex-col fg:gap-1 fg:w-full">
+      {label && (
+        <label htmlFor={fieldId} style={{ color: theme.colors.text, fontSize: 14, fontWeight: 500 }}>
+          {label}
+          {required && <span style={{ color: "#ef4444" }}> *</span>}
+        </label>
+      )}
+
+      <div className="fg:flex fg:flex-row fg:gap-2 fg:w-full">
+        <select
+          aria-label={t("forge.phone_input.country_label")}
+          value={f.country ?? ""}
+          disabled={disabled || !f.isReady}
+          onChange={(e) => f.setCountry(e.target.value as never)}
+          style={{ ...shared, flex: "0 0 auto", maxWidth: 140, cursor: disabled ? "default" : "pointer" }}
+        >
+          {!f.country && <option value="">{t("forge.phone_input.country_placeholder")}</option>}
+          {f.countries.map((c) => (
+            <option key={c.country} value={c.country}>
+              {c.flag} {c.country} {c.callingCode}
+            </option>
+          ))}
+        </select>
+
+        <input
+          id={fieldId}
+          type="tel"
+          inputMode="tel"
+          autoComplete="tel-national"
+          disabled={disabled}
+          // Until the metadata lands there is no national example to show, so
+          // fall back to the generic hint rather than an empty field.
+          placeholder={f.placeholder || t("forge.phone_input.placeholder_fallback")}
+          value={f.value}
+          onChange={(e) => f.setValue(e.target.value)}
+          onBlur={f.markTouched}
+          aria-invalid={!!f.error}
+          aria-describedby={f.error ? errorId : undefined}
+          style={{ ...shared, flex: "1 1 auto", minWidth: 0 }}
+        />
+      </div>
+
+      {errorText && (
+        <p id={errorId} role="alert" style={{ color: "#ef4444", fontSize: 13 }}>
+          {errorText}
+        </p>
+      )}
+
+      {/* A landline can be delivered to by a courier but cannot receive a text.
+          Worth saying, never worth blocking on: the line type is a guess from a
+          numbering plan, and refusing a real number on a guess is worse than
+          spending one credit to find out. */}
+      {!errorText && f.warning === "landline" && (
+        <p style={{ color: theme.colors.text, opacity: 0.7, fontSize: 13 }}>
+          {t("forge.phone_input.warning_landline")}
+        </p>
+      )}
+
+      {/* Only once they have typed a country code anyway. */}
+      {!errorText && f.value.trim().startsWith("+") && (
+        <p style={{ color: theme.colors.text, opacity: 0.7, fontSize: 13 }}>
+          {t("forge.phone_input.hint_no_country_code")}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/_tests/AccountDashboardBookingCall.spec.tsx

@@ -192,3 +192,39 @@ describe("AccountDashboard: the way into a coaching video call", () => {
     expect(html).not.toContain("the room opens");
   });
 });
+
+describe("AccountDashboard: the reschedule rule a session was sold under", () => {
+  it("shows a reschedule rule of the booking's own", () => {
+    const html = render([
+      booking({
+        location: null,
+        reschedulePolicy: {
+          policy: "until",
+          cutoffHours: 12,
+          followsCancellation: false,
+          description: "You can reschedule up to 12 hours before this starts.",
+        },
+      }),
+    ]);
+    expect(html).toContain("You can reschedule up to 12 hours before this starts.");
+  });
+
+  it("repeats nothing when moves follow the cancellation window", () => {
+    const html = render([
+      booking({
+        location: null,
+        reschedulePolicy: {
+          policy: "anytime",
+          cutoffHours: null,
+          followsCancellation: true,
+          description: "You can reschedule any time before this starts.",
+        },
+      }),
+    ]);
+    expect(html).not.toContain("You can reschedule");
+  });
+
+  it("renders a row from an older API that sends no reschedule rule", () => {
+    expect(() => render([booking({ location: null })])).not.toThrow();
+  });
+});

package/src/ui/styled/_tests/CartSeats.spec.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import axios, { type AxiosAdapter, type InternalAxiosRequestConfig } from "axios";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { CartProvider, type TicketCartItem } from "../../../contexts/CartContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { Cart } from "../Cart";
+
+/**
+ * The cart drawer with reserved seats in it (seating wave 2, docs §12).
+ *
+ * What only the markup can get wrong: a seated line lists its seats by name,
+ * offers the way back to the event's picker (the map is there, not here),
+ * and a plain ticket line shows neither. jsdom, because the drawer opens on
+ * a click and the cart hydrates from `localStorage` in an effect.
+ */
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+const seatedLine: TicketCartItem = {
+  eventId: "ev-seated",
+  eventSlug: "seated-show",
+  eventTitle: "Seated show",
+  tickets: { "t-stalls": 2 },
+  ticketMeta: {
+    "t-stalls": {
+      title: "Stalls",
+      price: 40,
+      seatIds: ["es-1", "es-2"],
+      seats: [
+        { id: "es-1", label: "Stalls · Row A · Seat 1" },
+        { id: "es-2", label: "Stalls · Row A · Seat 2" },
+      ],
+    },
+  },
+  bookingFee: null,
+};
+
+const plainLine: TicketCartItem = {
+  eventId: "ev-ga",
+  eventSlug: "standing-show",
+  eventTitle: "Standing show",
+  tickets: { "t-ga": 3 },
+  ticketMeta: { "t-ga": { title: "Standing", price: 20 } },
+  bookingFee: null,
+};
+
+let realAdapter: AxiosAdapter | undefined;
+
+const draw = () => {
+  render(
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ currencies: null, userSelectedCurrency: "USD", user: null } as never}>
+          <ForgeThemeProvider theme={theme}>
+            <CartProvider>
+              <Cart formatAmount={(n) => `$${n.toFixed(2)}`} />
+            </CartProvider>
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+  fireEvent.click(screen.getByTestId("cart-button"));
+};
+
+beforeEach(() => {
+  localStorage.clear();
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = async (config: InternalAxiosRequestConfig) =>
+    ({ data: {}, status: 200, statusText: "OK", headers: {}, config }) as never;
+});
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+  localStorage.clear();
+});
+
+describe("Cart with reserved seats", () => {
+  it("lists a seated line's seats as chips and links back to the event to change them", async () => {
+    localStorage.setItem("tribenest-cart", JSON.stringify({ items: [], tickets: [seatedLine] }));
+    draw();
+
+    const line = await screen.findByTestId("cart-ticket-line");
+    expect(line.textContent).toContain("Stalls × 2");
+    const chips = within(line).getAllByTestId("cart-seat-chip");
+    expect(chips.map((chip) => chip.textContent)).toEqual(["Stalls · Row A · Seat 1", "Stalls · Row A · Seat 2"]);
+
+    const change = within(line).getByTestId("cart-change-seats");
+    expect(change.textContent).toContain("Change seats");
+    expect(change.getAttribute("href")).toBe("/i/events/seated-show");
+    // The line's price is the seat count times the tier price.
+    expect(line.textContent).toContain("$80.00");
+  });
+
+  it("a plain ticket line shows no chips and no change-seats link", async () => {
+    localStorage.setItem("tribenest-cart", JSON.stringify({ items: [], tickets: [plainLine] }));
+    draw();
+
+    const line = await screen.findByTestId("cart-ticket-line");
+    expect(line.textContent).toContain("Standing × 3");
+    expect(within(line).queryAllByTestId("cart-seat-chip")).toEqual([]);
+    expect(within(line).queryByTestId("cart-change-seats")).toBeNull();
+  });
+});

package/src/ui/styled/_tests/CheckoutSeatsConflict.spec.tsx

@@ -0,0 +1,194 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import axios, { type AxiosAdapter, type InternalAxiosRequestConfig } from "axios";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { TicketCartItem } from "../../../contexts/CartContext";
+import type { useCheckout } from "../../headless/checkout/useCheckout";
+
+/**
+ * The bundle checkout page when seats in the cart have been taken (seating
+ * wave 2, docs §12).
+ *
+ * `useCheckout` is stubbed at the module boundary: what the hook DECIDES is
+ * asserted in `headless/checkout/_tests/useCheckoutSeats.spec.tsx`. What is
+ * asserted here is the half only the markup can get wrong: the conflict is a
+ * visible alert naming the seats (state the buyer must act on, never behind
+ * a help hint), its one button prunes and navigates to the event page, and
+ * the summary prints a seated line's seats.
+ */
+
+const state = vi.hoisted(() => ({ current: null as unknown as ReturnType<typeof useCheckout> }));
+
+vi.mock("../../headless/checkout/useCheckout", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../headless/checkout/useCheckout")>()),
+  useCheckout: () => state.current,
+}));
+
+const { Checkout } = await import("../Checkout");
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+const seatedLine: TicketCartItem = {
+  eventId: "ev-seated",
+  eventSlug: "seated-show",
+  eventTitle: "Seated show",
+  tickets: { "t-stalls": 2 },
+  ticketMeta: {
+    "t-stalls": {
+      title: "Stalls",
+      price: 40,
+      seatIds: ["es-1", "es-2"],
+      seats: [
+        { id: "es-1", label: "Stalls · Row A · Seat 1" },
+        { id: "es-2", label: "Stalls · Row A · Seat 2" },
+      ],
+    },
+  },
+  bookingFee: null,
+};
+
+const noop = () => {};
+
+/** The hook's answer, defaulted to a guest on the first stage with one seated line. */
+const checkout = (overrides: Partial<ReturnType<typeof useCheckout>> = {}): ReturnType<typeof useCheckout> =>
+  ({
+    cartItems: [],
+    isCartReady: true,
+    subTotal: 80,
+    shippingCost: 0,
+    bookingFeeCost: 0,
+    discountAmount: 0,
+    hasPhysicalProduct: false,
+    isPaidCheckout: true,
+    chargedTotal: null,
+    taxQuote: null,
+    currentStage: "userDetails",
+    setCurrentStage: noop,
+    user: null,
+    guestUserData: null,
+    joinEmailList: false,
+    setJoinEmailList: noop,
+    submitGuest: noop,
+    countries: [],
+    selectedCountry: undefined,
+    shippingData: undefined,
+    submitAddress: async () => {},
+    isFetchingRates: false,
+    shippingGroups: [],
+    selections: {},
+    selectShippingRate: noop,
+    selectedShippingRates: [],
+    confirmRates: noop,
+    orderId: null,
+    checkoutId: null,
+    settledCheckoutId: null,
+    isBundle: true,
+    ticketItems: [seatedLine],
+    isCreatingOrder: false,
+    startError: "",
+    seatsConflict: null,
+    chooseOtherSeats: () => null,
+    hold: { isHeld: false, hasLapsed: false, label: null, expiresAt: null, secondsLeft: null },
+    holdExpiredError: "",
+    isHoldExpired: false,
+    retryHold: async () => {},
+    isRetryingHold: false,
+    provider: undefined,
+    isPaystack: false,
+    openPaystackCheckout: async () => {},
+    canOpenPaystack: false,
+    paymentSecret: undefined,
+    paymentId: undefined,
+    chargedAmount: 0,
+    chargedCurrency: "",
+    returnUrl: "",
+    isFreeCheckoutLoading: false,
+    freeCheckout: async () => null,
+    couponCode: "",
+    setCouponCode: noop,
+    showCouponInput: false,
+    setShowCouponInput: noop,
+    appliedCoupon: null,
+    couponError: "",
+    isApplyingCoupon: false,
+    applyCoupon: async () => {},
+    removeCoupon: async () => {},
+    isCouponEditable: true,
+    pageError: "",
+    setPageError: noop,
+    ...overrides,
+  }) as unknown as ReturnType<typeof useCheckout>;
+
+let realAdapter: AxiosAdapter | undefined;
+
+const draw = (value: ReturnType<typeof useCheckout>, onNavigate = vi.fn()) => {
+  state.current = value;
+  render(
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ currencies: null, userSelectedCurrency: "USD", user: null } as never}>
+          <ForgeThemeProvider theme={theme}>
+            <Checkout onNavigate={onNavigate} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+  return onNavigate;
+};
+
+beforeEach(() => {
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = async (config: InternalAxiosRequestConfig) =>
+    ({ data: {}, status: 200, statusText: "OK", headers: {}, config }) as never;
+});
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+describe("Checkout: seats conflict", () => {
+  it("renders a visible alert naming the taken seats, whose button prunes and goes to the event page", () => {
+    const chooseOtherSeats = vi.fn(() => "/i/events/seated-show");
+    const onNavigate = draw(
+      checkout({
+        seatsConflict: {
+          eventId: "ev-seated",
+          eventSlug: "seated-show",
+          eventTitle: "Seated show",
+          seatIds: ["es-2"],
+          labels: ["Stalls · Row A · Seat 2"],
+        },
+        chooseOtherSeats,
+      }),
+    );
+
+    const alert = screen.getByRole("alert");
+    expect(alert.textContent).toContain("Some of your seats were just taken");
+    expect(alert.textContent).toContain("Stalls · Row A · Seat 2 for Seated show went to another buyer");
+
+    fireEvent.click(screen.getByTestId("seats-conflict-choose"));
+    expect(chooseOtherSeats).toHaveBeenCalledTimes(1);
+    expect(onNavigate).toHaveBeenCalledWith("/i/events/seated-show");
+  });
+
+  it("renders no alert while every seat is still available", () => {
+    draw(checkout());
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(screen.queryByTestId("seats-conflict")).toBeNull();
+  });
+
+  it("the order summary prints a seated line's seats by name", () => {
+    draw(checkout());
+    const line = screen.getByTestId("summary-ticket-line");
+    expect(line.textContent).toContain("Stalls");
+    expect(screen.getByTestId("summary-ticket-seats").textContent).toContain(
+      "Seats: Stalls · Row A · Seat 1, Stalls · Row A · Seat 2",
+    );
+  });
+});

package/src/ui/styled/_tests/EventSeatPicker.spec.tsx

@@ -0,0 +1,199 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import type { IEvent } from "../../../types/models";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { EventSeatPicker } from "../seating/EventSeatPicker";
+import { tierColorMap } from "../seating/paint";
+import { indexEventSeats, type EventSeatingState } from "../../headless/event/useEventSeating";
+import {
+  buildLayout,
+  buildSeating,
+  seatAt,
+  seatingEvent,
+  STALLS_TIER,
+  TABLE_TIER,
+} from "../../headless/event/_tests/seatingFixture";
+
+/**
+ * The buyer's seat picker (seating wave 2), rendered from a fixture document
+ * and a hand-built seating state, so nothing here reaches the network.
+ *
+ * What is asserted is what a buyer can see and do: every kind of object in
+ * the layout is drawn, a grey seat does nothing, an available seat toggles,
+ * the legend explains the colours, and the alert that names taken seats is
+ * visible rather than behind a `?`.
+ */
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+const fmt = (n: number) => `$${n.toFixed(2)}`;
+const event = seatingEvent as unknown as IEvent;
+
+const seatingState = (unavailable: string[] = [], overrides: Partial<EventSeatingState> = {}): EventSeatingState => {
+  const seating = buildSeating(buildLayout(), unavailable);
+  const index = indexEventSeats(seating);
+  const availableByTier: Record<string, number> = {};
+  const seatedTierIds = new Set<string>();
+  for (const seat of index.seats) {
+    seatedTierIds.add(seat.eventTicketId);
+    availableByTier[seat.eventTicketId] = (availableByTier[seat.eventTicketId] ?? 0) + (seat.status === "available" ? 1 : 0);
+  }
+  return {
+    seating,
+    isLoading: false,
+    isFetched: true,
+    refetch: async () => undefined,
+    byId: index.byId,
+    bySource: index.bySource,
+    availableByTier,
+    seatedTierIds,
+    seats: index.seats,
+    ...overrides,
+  };
+};
+
+const draw = (props: Partial<Parameters<typeof EventSeatPicker>[0]> = {}) => {
+  const onToggleSeat = vi.fn(() => ({ ok: true as const, selected: true }));
+  const utils = render(
+    <ForgeThemeProvider theme={theme}>
+      <EventSeatPicker
+        event={event}
+        seating={seatingState()}
+        selectedSeats={{}}
+        onToggleSeat={onToggleSeat}
+        formatAmount={fmt}
+        {...props}
+      />
+    </ForgeThemeProvider>,
+  );
+  return { ...utils, onToggleSeat };
+};
+
+const seatElement = (state: EventSeatingState, section: string, row: string, seat: string) => {
+  const eventSeatId = seatAt(state.seating!, section, row, seat);
+  const source = state.byId.get(eventSeatId)!.sourceSeatId;
+  const element = document.querySelector(`[data-seat-source="${source}"]`);
+  if (!element) throw new Error(`seat ${source} not drawn`);
+  return { element, eventSeatId };
+};
+
+const tap = (element: Element) => {
+  fireEvent.pointerDown(element, { button: 0, pointerId: 1, clientX: 10, clientY: 10 });
+  fireEvent.pointerUp(element, { button: 0, pointerId: 1, clientX: 10, clientY: 10 });
+};
+
+afterEach(cleanup);
+
+describe("EventSeatPicker", () => {
+  it("draws every kind of object in the layout: sections, tables, GA areas, decor and text", () => {
+    draw();
+    expect(screen.getAllByTestId("seat-map-section")).toHaveLength(1);
+    expect(screen.getAllByTestId("seat-map-table")).toHaveLength(1);
+    expect(screen.getAllByTestId("seat-map-ga")).toHaveLength(1);
+    expect(screen.getAllByTestId("seat-map-decor")).toHaveLength(1);
+    expect(screen.getAllByTestId("seat-map-text")).toHaveLength(1);
+    // 8 stalls seats + 4 table seats, each a tappable control.
+    expect(screen.getAllByTestId("seat-map-seat")).toHaveLength(12);
+    expect(screen.getByText("Stage")).toBeTruthy();
+    expect(screen.getByText("Main hall")).toBeTruthy();
+    expect(screen.getByText("Standing floor")).toBeTruthy();
+    expect(screen.getByText("General admission")).toBeTruthy();
+    expect(screen.getByRole("application", { name: "Seat map" })).toBeTruthy();
+    // Zoom controls and the pan surface are there.
+    expect(screen.getByTestId("seat-map-zoom-in")).toBeTruthy();
+    expect(screen.getByTestId("seat-map-zoom-out")).toBeTruthy();
+    expect(screen.getByTestId("seat-map-fit")).toBeTruthy();
+    expect((screen.getByTestId("seat-map-canvas") as HTMLElement).style.touchAction).toBe("none");
+  });
+
+  it("colours seats by tier, with the same colour the legend chip carries", () => {
+    const state = seatingState();
+    draw({ seating: state });
+    const colors = tierColorMap(event.tickets.map((t) => t.id));
+    const { element } = seatElement(state, "Stalls", "A", "1");
+    const circle = element.querySelectorAll("circle")[1]!;
+    expect(circle.getAttribute("fill")).toBe(colors[STALLS_TIER]);
+    const { element: tableSeat } = seatElement(state, "Table 1", "", "1");
+    expect(tableSeat.querySelectorAll("circle")[1]!.getAttribute("fill")).toBe(colors[TABLE_TIER]);
+    expect(colors[STALLS_TIER]).not.toBe(colors[TABLE_TIER]);
+  });
+
+  it("calls toggle for a tap on an available seat, with the seat's tier and event id", () => {
+    const state = seatingState();
+    const { onToggleSeat } = draw({ seating: state });
+    const { element, eventSeatId } = seatElement(state, "Stalls", "B", "3");
+    expect(element.getAttribute("data-status")).toBe("available");
+    expect(element.getAttribute("aria-disabled")).toBeNull();
+    tap(element);
+    expect(onToggleSeat).toHaveBeenCalledTimes(1);
+    expect(onToggleSeat).toHaveBeenCalledWith(STALLS_TIER, eventSeatId);
+  });
+
+  it("an unavailable seat is grey, disabled, and a tap on it does nothing", () => {
+    const state = seatingState(["Stalls/A/2"]);
+    const { onToggleSeat } = draw({ seating: state });
+    const { element } = seatElement(state, "Stalls", "A", "2");
+    expect(element.getAttribute("data-status")).toBe("unavailable");
+    expect(element.getAttribute("aria-disabled")).toBe("true");
+    expect(element.getAttribute("aria-label")).toContain("unavailable");
+    expect(element.querySelectorAll("circle")[1]!.getAttribute("fill")).toBe("#cbd5e1");
+    tap(element);
+    expect(onToggleSeat).not.toHaveBeenCalled();
+  });
+
+  it("marks a selected seat pressed and lets a tap release it", () => {
+    const state = seatingState();
+    const a1 = seatAt(state.seating!, "Stalls", "A", "1");
+    const { onToggleSeat } = draw({ seating: state, selectedSeats: { [STALLS_TIER]: [a1] } });
+    const { element } = seatElement(state, "Stalls", "A", "1");
+    expect(element.getAttribute("aria-pressed")).toBe("true");
+    expect(element.getAttribute("data-status")).toBe("selected");
+    tap(element);
+    expect(onToggleSeat).toHaveBeenCalledWith(STALLS_TIER, a1);
+  });
+
+  it("the legend lists each seated tier with its price and seats left, plus the two fixed states", () => {
+    draw({ seating: seatingState(["Stalls/A/1", "Stalls/A/2"]) });
+    const legend = screen.getByTestId("seat-legend");
+    const tiers = within(legend).getAllByTestId("seat-legend-tier");
+    expect(tiers).toHaveLength(2);
+    expect(tiers[0]!.textContent).toContain("Stalls");
+    expect(tiers[0]!.textContent).toContain("$40.00");
+    expect(tiers[0]!.textContent).toContain("6 seats left".replace(" seats", ""));
+    expect(tiers[1]!.textContent).toContain("Table seat");
+    expect(tiers[1]!.textContent).toContain("$60.00");
+    expect(tiers[1]!.textContent).toContain("4 left");
+    // The GA tier sells no seat and is not in the key.
+    expect(legend.textContent).not.toContain("Standing");
+    expect(within(legend).getByText("Selected")).toBeTruthy();
+    expect(within(legend).getByText("Unavailable")).toBeTruthy();
+  });
+
+  it("shows a brief notice when a tap is refused for the per-person cap", () => {
+    const state = seatingState();
+    const onToggleSeat = vi.fn(() => ({ ok: false as const, reason: "max" as const }));
+    draw({ seating: state, onToggleSeat });
+    tap(seatElement(state, "Stalls", "A", "4").element);
+    const notice = screen.getByTestId("seat-picker-notice");
+    expect(notice.textContent).toContain("You have the most seats allowed on Stalls.");
+    expect(notice.getAttribute("role")).toBe("status");
+  });
+
+  it("renders the taken-seats alert visibly, naming the seats, with a way to dismiss it", () => {
+    const onDismiss = vi.fn();
+    draw({ seatsTaken: { labels: ["Stalls · Row A · Seat 2", "Stalls · Row A · Seat 3"] }, onDismissSeatsTaken: onDismiss });
+    const alert = screen.getByRole("alert");
+    expect(alert.textContent).toContain("Some of your seats were just taken");
+    expect(alert.textContent).toContain("Stalls · Row A · Seat 2, Stalls · Row A · Seat 3");
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows a loading state before the read lands and an empty state when there is no map", () => {
+    draw({ seating: seatingState([], { seating: undefined, isLoading: true, isFetched: false, seats: [], byId: new Map(), bySource: new Map() }) });
+    expect(screen.getByTestId("seat-picker-loading")).toBeTruthy();
+    cleanup();
+    draw({ seating: seatingState([], { seating: null, isLoading: false, seats: [], byId: new Map(), bySource: new Map() }) });
+    expect(screen.getByTestId("seat-picker-empty").textContent).toContain("no seats to choose from");
+  });
+});