@tribe-nest/forge 3.64.0 → 3.67.0

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

@@ -0,0 +1,242 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+
+/**
+ * Free event tickets read as free, on the event page and in the ticket modal.
+ *
+ *  1. A zero-priced tier (not PWYW) says "Free", never "$0.00".
+ *  2. The page summary: all free is "Free", free and paid is "Free to $X",
+ *     all paid keeps "From $X".
+ *  3. One free tier makes the call to action "Reserve", not "Buy tickets".
+ *  4. A selection that costs nothing totals "Free", and the details step's
+ *     final button says "Reserve" rather than "Confirm".
+ *
+ * The page reads the event through `usePresaleCode` and the modal runs on
+ * `useEventCheckout`, so both are mocked and the REAL components are drawn.
+ */
+
+type Tier = { id: string; title: string; price: number; payWhatYouWant?: boolean };
+
+const tier = (id: string, price: number, extra: Partial<Tier> = {}): Tier => ({
+  id,
+  title: `Tier ${id}`,
+  price,
+  quantity: 100,
+  sold: 0,
+  held: 0,
+  ...extra,
+}) as Tier;
+
+const eventWith = (tickets: Tier[]) => ({
+  id: "e1",
+  slug: "launch",
+  title: "Launch night",
+  dateTime: "2030-01-01T19:00:00.000Z",
+  type: "virtual",
+  status: "upcoming",
+  media: [],
+  tickets,
+});
+
+const presaleState: Record<string, unknown> = {};
+const checkoutState: Record<string, unknown> = {};
+
+vi.mock("../../headless/event/usePresaleCode", () => ({
+  usePresaleCode: () => presaleState,
+}));
+vi.mock("../../headless/event/useEventCheckout", () => ({
+  useEventCheckout: () => checkoutState,
+}));
+vi.mock("../../../data/queries/usePageActions", () => ({
+  usePageActions: () => ({ data: undefined }),
+}));
+vi.mock("../../../data/queries/useWebsite", () => ({
+  useSiteConfig: () => ({ data: { currency: "USD" }, isLoading: false }),
+  usePricesIncludeTax: () => false,
+}));
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => ({ isAuthenticated: false, isInitialized: true, user: null }),
+}));
+// Neither is about price, and both reach queries this spec has no server for.
+vi.mock("../EventWaitlist", () => ({ EventWaitlist: () => null }));
+vi.mock("../MembershipGateNotice", () => ({ MembershipGateNotice: () => null }));
+
+const { EventDetail } = await import("../EventDetail");
+
+const THEME = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+const wrap = (node: React.ReactNode) => (
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <ForgeThemeProvider theme={THEME}>{node}</ForgeThemeProvider>
+  </QueryClientProvider>
+);
+
+const fmt = (n: number) => `$${n.toFixed(2)}`;
+
+const setEvent = (tickets: Tier[]) => {
+  const event = eventWith(tickets);
+  Object.keys(presaleState).forEach((k) => delete presaleState[k]);
+  Object.assign(presaleState, {
+    event,
+    isLoading: false,
+    visible: false,
+    input: "",
+    setInput: vi.fn(),
+    code: null,
+    status: "idle",
+    message: null,
+    submit: vi.fn(),
+    clear: vi.fn(),
+    isUnlocked: false,
+  });
+  Object.keys(checkoutState).forEach((k) => delete checkoutState[k]);
+  Object.assign(checkoutState, {
+    event,
+    isLoading: false,
+    step: "tickets",
+    setStep: vi.fn(),
+    presale: presaleState,
+    seating: { availableByTier: {}, seatedTierIds: new Set(), byId: new Map() },
+    selectedTickets: {},
+    selectedSeats: {},
+    seatSummary: [],
+    reservedForYou: {},
+    pwywAmounts: {},
+    setTicketQty: vi.fn(),
+    setTicketAmount: vi.fn(),
+    isSeatedTier: () => false,
+    isTierBlockedByApprovalMix: () => false,
+    awaitingApproval: false,
+    ticketsInCart: false,
+    addTicketsToCart: vi.fn(),
+    goToDetails: vi.fn(),
+    error: null,
+    gateRefusal: null,
+    coupon: { discountAmount: 0, appliedCoupons: [], hasDiscount: false },
+    subTotal: 0,
+    totalAmount: 0,
+    ticketCount: 0,
+    bookingFeeAmount: 0,
+    firstName: "",
+    setFirstName: vi.fn(),
+    lastName: "",
+    setLastName: vi.fn(),
+    email: "",
+    setEmail: vi.fn(),
+    setQuestionnaire: vi.fn(),
+    attendeeSlots: [],
+    setAttendee: vi.fn(),
+    continueToPayment: vi.fn(),
+    isProcessing: false,
+  });
+};
+
+const draw = () => render(wrap(<EventDetail slug="launch" formatAmount={fmt} />));
+const summary = () => screen.getByTestId("event-price-summary").textContent;
+
+beforeEach(() => setEvent([tier("a", 25)]));
+afterEach(cleanup);
+
+describe("EventDetail price summary and call to action", () => {
+  it("one free tier reads Free and the button says Reserve", () => {
+    setEvent([tier("a", 0)]);
+    draw();
+    expect(summary()).toBe("Free");
+    expect(summary()).not.toContain("$0.00");
+    expect(screen.getByRole("button", { name: "Reserve" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Buy tickets" })).toBeNull();
+  });
+
+  it("free and paid tiers read Free to the dearest, and the button stays Buy tickets", () => {
+    setEvent([tier("a", 0), tier("b", 25), tier("b2", 40)]);
+    draw();
+    expect(summary()).toBe("Free to $40.00");
+    expect(screen.getByRole("button", { name: "Buy tickets" })).toBeTruthy();
+  });
+
+  it("two free tiers read Free but are still a choice: Buy tickets", () => {
+    setEvent([tier("a", 0), tier("b", 0)]);
+    draw();
+    expect(summary()).toBe("Free");
+    expect(screen.getByRole("button", { name: "Buy tickets" })).toBeTruthy();
+  });
+
+  it("all paid tiers keep From the cheapest and Buy tickets", () => {
+    setEvent([tier("a", 40), tier("b", 25)]);
+    draw();
+    expect(summary()).toBe("From $25.00");
+    expect(screen.getByRole("button", { name: "Buy tickets" })).toBeTruthy();
+  });
+
+  it("a zero-floor PWYW tier is not free: From and Buy tickets", () => {
+    setEvent([tier("a", 0, { payWhatYouWant: true })]);
+    draw();
+    expect(summary()).toBe("From $0.00");
+    expect(screen.getByRole("button", { name: "Buy tickets" })).toBeTruthy();
+  });
+});
+
+describe("EventTickets modal", () => {
+  it("labels a free tier Free and a zero-cost selection's total Free", () => {
+    setEvent([tier("a", 0)]);
+    Object.assign(checkoutState, { selectedTickets: { a: 1 }, ticketCount: 1, totalAmount: 0 });
+    draw();
+    fireEvent.click(screen.getByRole("button", { name: "Reserve" }));
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByTestId("ticket-price-free").textContent).toBe("Free");
+    expect(within(dialog).getByTestId("tickets-total").textContent).toBe("Free");
+    expect(dialog.textContent).not.toContain("$0.00");
+  });
+
+  it("keeps the formatted zero on an EMPTY selection: nothing chosen is not free", () => {
+    setEvent([tier("a", 25)]);
+    draw();
+    fireEvent.click(screen.getByRole("button", { name: "Buy tickets" }));
+    expect(within(screen.getByRole("dialog")).getByTestId("tickets-total").textContent).toBe("$0.00");
+  });
+
+  it("the details step's final button says Reserve when the total is zero", () => {
+    setEvent([tier("a", 0)]);
+    Object.assign(checkoutState, { step: "details", selectedTickets: { a: 1 }, ticketCount: 1, totalAmount: 0 });
+    draw();
+    fireEvent.click(screen.getByRole("button", { name: "Reserve" }));
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByRole("button", { name: "Reserve" })).toBeTruthy();
+    expect(within(dialog).queryByRole("button", { name: "Confirm" })).toBeNull();
+    expect(within(dialog).getByTestId("tickets-total").textContent).toBe("Free");
+  });
+
+  it("a paid selection still continues to payment with a priced total", () => {
+    setEvent([tier("a", 25)]);
+    Object.assign(checkoutState, {
+      step: "details",
+      selectedTickets: { a: 2 },
+      ticketCount: 2,
+      totalAmount: 50,
+      subTotal: 50,
+    });
+    draw();
+    fireEvent.click(screen.getByRole("button", { name: "Buy tickets" }));
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByRole("button", { name: "Continue to payment" })).toBeTruthy();
+    expect(within(dialog).getByTestId("tickets-total").textContent).toBe("$50.00");
+  });
+
+  it("a free ticket REQUEST keeps its Request tickets wording", () => {
+    setEvent([tier("a", 0)]);
+    Object.assign(checkoutState, {
+      step: "details",
+      selectedTickets: { a: 1 },
+      ticketCount: 1,
+      totalAmount: 0,
+      awaitingApproval: true,
+    });
+    draw();
+    fireEvent.click(screen.getByRole("button", { name: "Reserve" }));
+    expect(within(screen.getByRole("dialog")).getByRole("button", { name: "Request tickets" })).toBeTruthy();
+  });
+});

package/src/ui/styled/broadcast/BroadcastTicketPurchase.tsx

@@ -3,7 +3,7 @@ import { useEvent } from "../../../data/queries/useEvents";
 import { useForgeT } from "../../../i18n";
 import { useForgeTheme } from "../../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../../format/useFormatCurrency";
-import { minTicketPrice } from "../../headless/broadcast/broadcastState";
+import { isSingleFreeTicketEvent, summarizeTicketPrices } from "../../format/ticketPrice";
 import { EventTickets } from "../EventTickets";
 
 export interface BroadcastTicketPurchaseProps {
@@ -40,7 +40,9 @@ export function BroadcastTicketPurchase({
 
   if (!event) return null;
 
-  const from = minTicketPrice(broadcast);
+  // "Free", "Free to $40" or "From $25", the same wording as the event page.
+  const tickets = broadcast.events?.[0]?.eventTickets;
+  const summary = summarizeTicketPrices(tickets);
 
   return (
     <div
@@ -61,12 +63,24 @@ export function BroadcastTicketPurchase({
     >
       <EventTickets
         slug={event.slug}
-        triggerText={t("forge.broadcast_ticket_purchase.buy_tickets")}
+        triggerText={
+          isSingleFreeTicketEvent(tickets)
+            ? t("forge.broadcast_ticket_purchase.reserve")
+            : t("forge.broadcast_ticket_purchase.buy_tickets")
+        }
         formatAmount={fmt}
         finalisePath={finalisePath}
         onComplete={onComplete}
       />
-      {from !== null && <p>{t("forge.broadcast_ticket_purchase.from_price", { price: fmt(from) })}</p>}
+      {summary && (
+        <p data-testid="broadcast-ticket-price">
+          {summary.kind === "free"
+            ? t("forge.broadcast_ticket_purchase.free")
+            : summary.kind === "free_to"
+              ? t("forge.broadcast_ticket_purchase.free_to_price", { price: fmt(summary.max) })
+              : t("forge.broadcast_ticket_purchase.from_price", { price: fmt(summary.min) })}
+        </p>
+      )}
     </div>
   );
 }

package/src/ui/styled/forge-utilities.css

@@ -928,11 +928,6 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .fg\:md\:grid-cols-4 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
   .fg\:md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;

package/src/ui/styled/seating/EventSeatPicker.tsx

@@ -10,6 +10,7 @@ import { Loading } from "../Loading";
 import { SeatMapCanvas } from "./SeatMapCanvas";
 import { SeatLegend, type SeatLegendTier } from "./SeatLegend";
 import { tierColorMap } from "./paint";
+import { isFreeTicket } from "../../format/ticketPrice";
 
 export interface EventSeatPickerProps {
   /** The event whose tiers price the seats. Tier order fixes the palette. */
@@ -84,6 +85,7 @@ export function EventSeatPicker({
           id: ticket.id,
           title: ticket.title,
           price: Number(ticket.price),
+          free: isFreeTicket(ticket),
           color: tierColors[ticket.id]!,
           left: seating.availableByTier[ticket.id] ?? 0,
         })),

package/src/ui/styled/seating/SeatLegend.tsx

@@ -7,6 +7,8 @@ export interface SeatLegendTier {
   title: string;
   /** Per-unit price, in the artist's currency. */
   price: number;
+  /** A free tier (zero price, not PWYW): the chip reads "Free", not "$0.00". */
+  free?: boolean;
   /** The tier's colour on the map. */
   color: string;
   /** Seats still available on this tier. */
@@ -40,7 +42,7 @@ export function SeatLegend({ tiers, formatAmount, className }: SeatLegendProps)
         <li key={tier.id} data-testid="seat-legend-tier" className="fg:flex fg:items-center fg:gap-2">
           <Swatch color={tier.color} />
           <span style={{ fontWeight: 600 }}>{tier.title}</span>
-          <span style={{ opacity: 0.8 }}>{formatAmount(tier.price)}</span>
+          <span style={{ opacity: 0.8 }}>{tier.free ? t("forge.seat_legend.free") : formatAmount(tier.price)}</span>
           <span style={{ opacity: 0.65 }}>
             {tier.left === 0
               ? t("forge.seat_legend.sold_out")

package/src/utils/structuredData.ts

@@ -435,6 +435,9 @@ export interface ServiceSchemaSource {
   description?: string | null;
   media?: { url: string; type?: string }[] | null;
   price?: number | string | null;
+  /** A package is offered at its package price, not the single-session one. */
+  pricingMode?: string | null;
+  packagePrice?: number | string | null;
   reviewAggregate?: ReviewSchemaAggregate | null;
 }
 
@@ -444,7 +447,7 @@ export function buildServiceSchema(
   options: SellableSchemaOptions = {},
 ): Record<string, unknown> | null {
   if (!service?.title) return null;
-  const price = toPrice(service.price);
+  const price = toPrice(service.pricingMode === "package" ? service.packagePrice : service.price);
   return buildEntitySchema({
     type: "Service",
     name: service.title,