@tribe-nest/forge 3.54.0 → 3.58.0

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");
+  });
+});

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

@@ -79,6 +79,24 @@ function installAdapter(tiers: MembershipTier[]) {
     if (url.includes("/public/membership-tiers")) return reply(tiers);
     if (url.includes("/public/websites/site-config")) return reply({ currency: "USD" });
     if (url.includes("/public/currencies")) return reply(currencies);
+    if (url.includes("/public/membership-applications")) {
+      return reply({
+        application: {
+          id: "app-1",
+          profileId: PROFILE_ID,
+          membershipTierId: "tier-1",
+          accountId: "account-1",
+          status: "pending",
+          billingCycle: null,
+          amount: null,
+          currency: null,
+          message: null,
+          closedReason: null,
+        },
+        requiresCard: false,
+        clientSecret: null,
+      });
+    }
     if (url.includes("/public/payments/subscriptions/free")) return reply({ membershipId: "m-1" });
     if (url.includes("/public/payments/subscriptions")) {
       return reply({ membershipId: "m-1", subscriptionId: "s-1", clientSecret: "pi_secret", requiresPayment: true });
@@ -362,3 +380,91 @@ describe("the tier grid, when no tier was chosen up front", () => {
     expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
   });
 });
+
+describe("free trials", () => {
+  it("shows the trial line and Start free trial on the select step for an eligible fan", async () => {
+    mount({ tiers: [tier({ priceMonthly: 12, trialDays: 14, trialEligible: true })] });
+
+    const line = await screen.findByTestId("membership-checkout-trial-line");
+    const ends = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+    expect(line.textContent).toBe(`14-day free trial. Your first charge is on ${ends}.`);
+    expect(screen.getByRole("button", { name: "Start free trial" })).toBeTruthy();
+  });
+
+  it("shows neither to a fan who already had a trial", async () => {
+    mount({ tiers: [tier({ priceMonthly: 12, trialDays: 14, trialEligible: false })] });
+
+    await screen.findByText("Inner Circle", { exact: false });
+    expect(screen.queryByTestId("membership-checkout-trial-line")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Start free trial" })).toBeNull();
+  });
+});
+
+describe("tier questionnaires", () => {
+  const questions = [
+    { id: "q-why", question: "Why do you want to join?", type: "textarea" },
+    { id: "q-city", question: "Which city?", type: "select", options: ["Berlin", "Lagos"] },
+    { id: "q-handle", question: "Instagram handle", type: "text", optional: true },
+  ];
+  const applicationPosts = () =>
+    sent.filter((r) => r.method === "post" && r.url.includes("/public/membership-applications"));
+
+  it("renders the questions, required ones marked, and no free-text message box", async () => {
+    mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
+
+    const why = (await screen.findByLabelText(/Why do you want to join\?/)) as HTMLTextAreaElement;
+    expect(why.tagName).toBe("TEXTAREA");
+    expect(why.required).toBe(true);
+    expect((screen.getByLabelText(/Which city\?/) as HTMLSelectElement).tagName).toBe("SELECT");
+    expect((screen.getByLabelText(/Instagram handle/) as HTMLInputElement).required).toBe(false);
+    expect(screen.queryByText(/Anything you'd like us to know/i)).toBeNull();
+    expect(screen.queryByPlaceholderText(/Tell us a little about yourself/i)).toBeNull();
+  });
+
+  it("refuses a blank required answer beside the questions and sends nothing", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10, questionnaire: questions })] });
+
+    await screen.findByLabelText(/Why do you want to join\?/);
+    fireEvent.click(subscribeButton());
+
+    const refusal = await screen.findByTestId("membership-questionnaire-refusal");
+    expect(refusal.textContent).toBe("Please answer: Why do you want to join?");
+    expect(screen.getAllByText("This field is required")).toHaveLength(2);
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+
+  it("sends the answers with the paid subscription", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10, questionnaire: questions })] });
+
+    fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
+    fireEvent.change(screen.getByLabelText(/Which city\?/), { target: { value: "Berlin" } });
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body?.questionnaire).toEqual([
+      { id: "q-why", question: "Why do you want to join?", type: "textarea", answer: "Big fan" },
+      { id: "q-city", question: "Which city?", type: "select", options: ["Berlin", "Lagos"], answer: "Berlin" },
+      { id: "q-handle", question: "Instagram handle", type: "text", answer: "" },
+    ]);
+  });
+
+  it("after applying, links to the account page rather than the membership list", async () => {
+    mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
+
+    fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
+    fireEvent.change(screen.getByLabelText(/Which city\?/), { target: { value: "Lagos" } });
+    fireEvent.click(screen.getByRole("button", { name: "Apply to join" }));
+
+    await waitFor(() => expect(applicationPosts()).toHaveLength(1));
+    expect(applicationPosts()[0].body).not.toHaveProperty("message");
+    expect(applicationPosts()[0].body?.questionnaire).toHaveLength(3);
+    expect(await screen.findByText("Application received")).toBeTruthy();
+    const link = screen.getByRole("link", { name: "Go to your account" }) as HTMLAnchorElement;
+    expect(link.getAttribute("href")).toBe("/i/account");
+    expect(screen.queryByRole("link", { name: "View memberships" })).toBeNull();
+  });
+});