@tribe-nest/forge 3.64.0 → 3.65.0

package/src/ui/styled/EventDetail.tsx

@@ -4,7 +4,8 @@ import { usePresaleCode } from "../headless/event/usePresaleCode";
 import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
-import { PriceDisplay } from "../format/PriceDisplay";
+import { PriceDisplay, priceTaxCaption } from "../format/PriceDisplay";
+import { isSingleFreeTicketEvent, summarizeTicketPrices } from "../format/ticketPrice";
 import { describeBookingFee } from "../format/bookingFee";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
@@ -82,7 +83,9 @@ export function EventDetail({
   if (!event) return <p>{tr("forge.event_detail.not_found")}</p>;
 
   const cover = event.media?.find((m) => m.type === "image")?.url ?? event.media?.[0]?.url;
-  const minPrice = event.tickets.length ? Math.min(...event.tickets.map((t) => t.price)) : 0;
+  // "Free", "Free to $40" or "From $25": a zero-priced tier never reads "$0.00".
+  const priceSummary = summarizeTicketPrices(event.tickets);
+  const taxCaption = priceTaxCaption({ pricesIncludeTax, formatAmount: fmt });
   const feeNote = describeBookingFee(event.bookingFee, fmt);
   const locationText =
     event.type === "virtual" || !event.address
@@ -181,9 +184,24 @@ export function EventDetail({
             )}
             {event.tickets.length > 0 && (
               <>
-                <span style={{ fontWeight: 600 }}>
-                  {tr("forge.event_detail.price_from_label")}{" "}
-                  <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
+                <span data-testid="event-price-summary" style={{ fontWeight: 600 }}>
+                  {priceSummary?.kind === "free" ? (
+                    tr("forge.event_detail.price_free")
+                  ) : priceSummary?.kind === "free_to" ? (
+                    <>
+                      {tr("forge.event_detail.price_free_to", { max: fmt(priceSummary.max) })}
+                      {taxCaption && (
+                        <span style={{ fontSize: "0.72em", fontWeight: 400, marginLeft: "0.35em", whiteSpace: "nowrap", color: t.text, opacity: 0.65 }}>
+                          {taxCaption}
+                        </span>
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      {tr("forge.event_detail.price_from_label")}{" "}
+                      <PriceDisplay amount={priceSummary?.min ?? 0} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
+                    </>
+                  )}
                 </span>
                 {/* The cheapest tier is the number a buyer anchors on, and until
                     now it was the whole story they were given — the artist's
@@ -201,7 +219,12 @@ export function EventDetail({
             {event.tickets.length > 0 && (
               <EventTickets
                 slug={slug}
-                triggerText={tr("forge.event_detail.buy_tickets")}
+                // One free tier is a reservation, not a purchase.
+                triggerText={
+                  isSingleFreeTicketEvent(event.tickets)
+                    ? tr("forge.event_detail.reserve")
+                    : tr("forge.event_detail.buy_tickets")
+                }
                 formatAmount={fmt}
                 finalisePath={finalisePath}
                 onComplete={onComplete}

package/src/ui/styled/EventTickets.tsx

@@ -7,6 +7,7 @@ import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay, summarizeTaxQuote } from "../format/PriceDisplay";
 import { clampChosenAmount, isPayWhatYouWant, pwywDefaultAmount, pwywMaximum } from "../format/pwyw";
+import { isFreeTicket, isSingleFreeTicketEvent } from "../format/ticketPrice";
 import {
   maxAddableTickets,
   onSaleBadge,
@@ -119,7 +120,12 @@ export function EventTickets({
   return (
     <DialogRoot open={open} onOpenChange={tryClose}>
       <DialogTrigger asChild>
-        <button style={triggerButtonStyle(theme)}>{triggerText ?? t("forge.event_tickets.trigger")}</button>
+        <button style={triggerButtonStyle(theme)}>
+          {triggerText ??
+            (isSingleFreeTicketEvent(c.event?.tickets)
+              ? t("forge.event_tickets.reserve")
+              : t("forge.event_tickets.trigger"))}
+        </button>
       </DialogTrigger>
       <DialogPortal>
         <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
@@ -603,13 +609,19 @@ function TicketStep({
                         {t("forge.event_tickets.price_from")}
                       </span>
                     )}
-                    <PriceDisplay
-                      amount={Number(ticket.price)}
-                      pricesIncludeTax={pricesIncludeTax}
-                      formatAmount={fmt}
-                      mutedColor={theme.colors.text}
-                      captionStyle={{ opacity: 0.65 }}
-                    />
+                    {/* A zero-priced tier is free, and "$0.00" reads as a price.
+                        A PWYW tier with a zero floor keeps its "From" wording. */}
+                    {isFreeTicket(ticket) ? (
+                      <span data-testid="ticket-price-free">{t("forge.event_tickets.free")}</span>
+                    ) : (
+                      <PriceDisplay
+                        amount={Number(ticket.price)}
+                        pricesIncludeTax={pricesIncludeTax}
+                        formatAmount={fmt}
+                        mutedColor={theme.colors.text}
+                        captionStyle={{ opacity: 0.65 }}
+                      />
+                    )}
                   </div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
@@ -1024,7 +1036,7 @@ function DetailsStep({
               ? t("forge.event_tickets.request_tickets")
               : c.totalAmount > 0
                 ? t("forge.event_tickets.continue_payment")
-                : t("forge.event_tickets.confirm")
+                : t("forge.event_tickets.reserve")
         }
         nextDisabled={c.isProcessing}
       />
@@ -1132,7 +1144,7 @@ function PaymentStep({
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontSize: 16 }}>{t("forge.event_tickets.total_amount")}</span>
           <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary, textAlign: "right" }}>
-            {fmt(c.totalAmount)}
+            {totalText(c, fmt, t)}
             {taxSummary?.mode === "inclusive" && (
               <span
                 style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}
@@ -1245,6 +1257,16 @@ function BookingFeeLine({ c, fmt }: { c: Checkout; fmt: (n: number) => string })
 }
 
 // ── Shared bits ───────────────────────────────────────────────────────────────
+
+/**
+ * The order total as the buyer reads it. A selection that costs nothing (free
+ * tiers, no booking fee, no paid add-ons) says "Free" rather than "$0.00". An
+ * EMPTY selection keeps the formatted zero: on a paid event, nothing chosen yet
+ * is not the same as free.
+ */
+function totalText(c: Checkout, fmt: (n: number) => string, t: (key: string) => string): string {
+  return c.totalAmount === 0 && c.ticketCount > 0 ? t("forge.event_tickets.free") : fmt(c.totalAmount);
+}
 function ActionBar({
   c,
   fmt,
@@ -1291,7 +1313,9 @@ function ActionBar({
         <BookingFeeLine c={c} fmt={fmt} />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontWeight: 600 }}>{t("forge.event_tickets.total")}</span>
-          <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>
+          <span data-testid="tickets-total" style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>
+            {totalText(c, fmt, t)}
+          </span>
         </div>
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>

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

@@ -0,0 +1,299 @@
+// @vitest-environment jsdom
+import { act, 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";
+
+/**
+ * The booking dialog: a month calendar, day first then time, and a basket for
+ * products sold as several sessions.
+ *
+ *  1. Days with open times are enabled; the rest are not. Times are grouped by
+ *     the visitor's LOCAL day.
+ *  2. Month navigation stops at this month and at the booking window.
+ *  3. A package needs exactly its count; Continue says what is missing, then
+ *     the package price, and reserves every pick in ONE call (earliest first).
+ *  4. Per session: picks are capped at the limit and the total follows the count.
+ *  5. One session: a second pick replaces the first.
+ *  6. On a phone: the month opens first, a day opens its own screen, and the
+ *     basket rides in the bottom bar.
+ *
+ * The data hooks are mocked; the REAL hook and components are drawn.
+ */
+
+const NOW = new Date(2030, 0, 3, 9, 0, 0); // Thu 3 Jan 2030, local
+
+const at = (day: number, hour: number, minute = 0, month = 0) => new Date(2030, month, day, hour, minute, 0);
+const slot = (id: string, start: Date) => ({
+  id,
+  startTime: start.toISOString(),
+  endTime: new Date(start.getTime() + 60 * 60_000).toISOString(),
+  coachingAvailabilityDayId: "d1",
+});
+
+const SLOTS = [
+  slot("s-7-10", at(7, 10)),
+  slot("s-7-11", at(7, 11)),
+  slot("s-7-2330", at(7, 23, 30)), // late evening: must stay on the 7th locally
+  slot("s-9-14", at(9, 14)),
+  slot("s-14-09", at(14, 9)),
+  slot("s-21-16", at(21, 16)),
+  slot("s-feb-04", at(4, 10, 0, 1)),
+];
+
+let product: Record<string, unknown> = {};
+const reserveSpy = vi.fn();
+/** Every window the calendar asked for, to catch a query key that changes per render. */
+const windowsAsked: string[] = [];
+const unreserveSpy = vi.fn();
+
+vi.mock("../../../data/queries/useCoachingProducts", () => ({
+  useGetCoachingProduct: () => ({ data: product, isLoading: false }),
+}));
+vi.mock("../../../data/queries/useCoachingAvailability", () => ({
+  useCoachingAvailability: (_id: string, from: string, to: string) => {
+    windowsAsked.push(`${from}|${to}`);
+    const lo = Date.parse(from);
+    const hi = Date.parse(to);
+    const data = SLOTS.filter((s) => Date.parse(s.startTime) >= lo && Date.parse(s.startTime) <= hi);
+    return { data, isLoading: false, refetch: vi.fn().mockResolvedValue({ data }) };
+  },
+  useReserveCoachingBooking: () => ({ mutateAsync: reserveSpy, isPending: false }),
+  useUpdateCoachingBooking: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useUnreserveCoachingBooking: () => ({ mutateAsync: unreserveSpy, isPending: false }),
+}));
+vi.mock("../../../data/queries/usePaymentFlow", () => ({
+  usePaymentFlow: () => ({ start: vi.fn(), isStarting: false, result: null, clientSecret: null }),
+}));
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => ({ isAuthenticated: false, isInitialized: true, user: null }),
+}));
+vi.mock("../../payment/ForgePaymentProvider", () => ({ usePaymentRenderer: () => null }));
+vi.mock("../../../data/queries/useWebsite", () => ({
+  useSiteConfig: () => ({ data: { currency: "USD" }, isLoading: false }),
+  usePricesIncludeTax: () => false,
+}));
+
+const { CoachingBooking } = await import("../CoachingBooking");
+
+const THEME = { colors: { text: "#111111", background: "#ffffff", primary: "#0d6b5f" }, cornerRadius: 8 };
+const fmt = (n: number) => `$${n.toFixed(2)}`;
+
+const baseProduct = {
+  id: "p1",
+  slug: "vocal",
+  title: "Vocal coaching",
+  description: "",
+  price: "80",
+  durationMinutes: 60,
+  daysInFuture: 40, // last bookable day is 12 Feb 2030
+  timezone: "Africa/Lagos",
+  bufferMinutes: 0,
+  archivedAt: null,
+  availabilityDays: [],
+  blockedDates: [],
+  media: [],
+};
+
+let narrow = false;
+
+const open = () => {
+  render(
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeThemeProvider theme={THEME}>
+        <CoachingBooking slug="vocal" formatAmount={fmt} triggerText="Book" />
+      </ForgeThemeProvider>
+    </QueryClientProvider>,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Book" }));
+  return screen.getByTestId("coaching-booking-dialog");
+};
+
+const day = (dialog: HTMLElement, key: string) =>
+  within(dialog).getAllByTestId("booking-day").find((el) => el.getAttribute("data-day") === key)!;
+const timeButton = (dialog: HTMLElement, label: string) =>
+  within(dialog)
+    .getAllByTestId("booking-time")
+    .find((el) => el.textContent?.includes(label))!;
+const label = (h: number, m = 0) =>
+  new Date(2030, 0, 1, h, m).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+
+beforeEach(() => {
+  vi.useFakeTimers({ toFake: ["Date"] });
+  vi.setSystemTime(NOW);
+  narrow = false;
+  window.matchMedia = ((query: string) => ({
+    matches: narrow && query.includes("max-width"),
+    media: query,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+  })) as unknown as typeof window.matchMedia;
+  reserveSpy.mockReset().mockResolvedValue({ bookingId: "b1", bookingSecret: "x".repeat(40), sessionCount: 1 });
+  unreserveSpy.mockReset().mockResolvedValue({ success: true });
+  product = { ...baseProduct };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe("month calendar", () => {
+  it("enables only days with open times and groups times by the local day", () => {
+    const dialog = open();
+    expect(within(dialog).getByTestId("booking-month-label").textContent).toMatch(/January/);
+    expect(day(dialog, "2030-01-07").getAttribute("data-open")).toBe("true");
+    expect(day(dialog, "2030-01-08").getAttribute("data-open")).toBe("false");
+    expect((day(dialog, "2030-01-08") as HTMLButtonElement).disabled).toBe(true);
+
+    // The first open day is shown straight away on a wide screen.
+    expect(within(dialog).getByTestId("booking-day-title").textContent).toMatch(/7/);
+    const times = within(dialog).getAllByTestId("booking-time").map((b) => b.textContent);
+    expect(times).toHaveLength(3);
+    expect(times.some((t) => t?.includes(label(23, 30)))).toBe(true);
+  });
+
+  it("asks for the same window on every render while the clock moves (no refetch loop)", () => {
+    windowsAsked.length = 0;
+    const dialog = open();
+    vi.setSystemTime(new Date(NOW.getTime() + 5_000));
+    fireEvent.click(timeButton(dialog, label(10)));
+    vi.setSystemTime(new Date(NOW.getTime() + 9_000));
+    fireEvent.click(timeButton(dialog, label(11)));
+    expect(new Set(windowsAsked).size).toBe(1);
+  });
+
+  it("stops at this month and at the end of the booking window", () => {
+    const dialog = open();
+    const prev = within(dialog).getByTestId("booking-prev-month") as HTMLButtonElement;
+    const next = within(dialog).getByTestId("booking-next-month") as HTMLButtonElement;
+    expect(prev.disabled).toBe(true);
+    expect(next.disabled).toBe(false);
+    fireEvent.click(next);
+    expect(within(dialog).getByTestId("booking-month-label").textContent).toMatch(/February/);
+    expect(day(dialog, "2030-02-04").getAttribute("data-open")).toBe("true");
+    expect((within(dialog).getByTestId("booking-next-month") as HTMLButtonElement).disabled).toBe(true);
+    expect((within(dialog).getByTestId("booking-prev-month") as HTMLButtonElement).disabled).toBe(false);
+  });
+});
+
+describe("package of 3", () => {
+  beforeEach(() => {
+    product = { ...baseProduct, pricingMode: "package", packageSessionCount: 3, packagePrice: "200" };
+  });
+
+  it("needs exactly three, keeps picks across months, and reserves them in one call", async () => {
+    const dialog = open();
+    const cont = () => within(dialog).getByTestId("booking-continue") as HTMLButtonElement;
+    expect(cont().disabled).toBe(true);
+    expect(cont().textContent).toBe("Pick 3 more");
+
+    fireEvent.click(timeButton(dialog, label(11)));
+    expect(cont().textContent).toBe("Pick 2 more");
+    expect(within(day(dialog, "2030-01-07")).getByTestId("booking-day-picks").textContent).toBe("1");
+
+    fireEvent.click(day(dialog, "2030-01-14"));
+    fireEvent.click(timeButton(dialog, label(9)));
+
+    // A pick in February keeps the January ones.
+    fireEvent.click(within(dialog).getByTestId("booking-next-month"));
+    fireEvent.click(day(dialog, "2030-02-04"));
+    fireEvent.click(timeButton(dialog, label(10)));
+
+    expect(within(dialog).getAllByTestId("booking-basket-item")).toHaveLength(3);
+    expect(cont().disabled).toBe(false);
+    expect(cont().textContent).toBe("Continue, $200.00");
+    // The basket is full: a fourth time cannot be added.
+    fireEvent.click(within(dialog).getByTestId("booking-prev-month"));
+    fireEvent.click(day(dialog, "2030-01-21"));
+    expect((timeButton(dialog, label(16)) as HTMLButtonElement).disabled).toBe(true);
+
+    await act(async () => {
+      fireEvent.click(cont());
+    });
+    expect(reserveSpy).toHaveBeenCalledTimes(1);
+    expect(reserveSpy).toHaveBeenCalledWith({ slotIds: ["s-7-11", "s-14-09", "s-feb-04"] });
+  });
+
+  it("Back from the details step releases the hold WITH its secret and keeps the basket", async () => {
+    const dialog = open();
+    fireEvent.click(timeButton(dialog, label(10)));
+    fireEvent.click(timeButton(dialog, label(11)));
+    fireEvent.click(day(dialog, "2030-01-09"));
+    fireEvent.click(timeButton(dialog, label(14)));
+    await act(async () => {
+      fireEvent.click(within(dialog).getByTestId("booking-continue"));
+    });
+    await act(async () => {
+      fireEvent.click(within(dialog).getByRole("button", { name: "Back" }));
+    });
+    expect(unreserveSpy).toHaveBeenCalledWith({ bookingId: "b1", bookingSecret: "x".repeat(40) });
+    expect(within(dialog).getAllByTestId("booking-basket-item")).toHaveLength(3);
+  });
+
+  it("lets a pick be removed from the basket", () => {
+    const dialog = open();
+    fireEvent.click(timeButton(dialog, label(10)));
+    fireEvent.click(timeButton(dialog, label(11)));
+    expect(within(dialog).getAllByTestId("booking-basket-item")).toHaveLength(2);
+    const first = within(dialog).getAllByTestId("booking-basket-item")[0]!;
+    fireEvent.click(within(first).getByRole("button"));
+    expect(within(dialog).getAllByTestId("booking-basket-item")).toHaveLength(1);
+  });
+});
+
+describe("per session, up to 2", () => {
+  beforeEach(() => {
+    product = { ...baseProduct, pricingMode: "per_session", maxSessionsPerBooking: 2 };
+  });
+
+  it("caps the picks and prices by the count", () => {
+    const dialog = open();
+    const cont = () => within(dialog).getByTestId("booking-continue") as HTMLButtonElement;
+    fireEvent.click(timeButton(dialog, label(10)));
+    expect(cont().textContent).toBe("Continue, $80.00");
+    fireEvent.click(timeButton(dialog, label(11)));
+    expect(cont().textContent).toBe("Continue, $160.00");
+    expect(within(dialog).getByRole("status").textContent).toMatch(/2 session limit/);
+    expect((timeButton(dialog, label(23, 30)) as HTMLButtonElement).disabled).toBe(true);
+  });
+});
+
+describe("one session", () => {
+  it("replaces the pick and reserves the single slot as before", async () => {
+    const dialog = open();
+    fireEvent.click(timeButton(dialog, label(10)));
+    fireEvent.click(timeButton(dialog, label(11)));
+    expect(within(dialog).getAllByTestId("booking-basket-item")).toHaveLength(1);
+    await act(async () => {
+      fireEvent.click(within(dialog).getByTestId("booking-continue"));
+    });
+    expect(reserveSpy).toHaveBeenCalledWith({ slotId: "s-7-11" });
+  });
+});
+
+describe("on a phone", () => {
+  beforeEach(() => {
+    narrow = true;
+    product = { ...baseProduct, pricingMode: "package", packageSessionCount: 2, packagePrice: "150" };
+  });
+
+  it("opens on the month, gives each day its own screen and keeps the basket in the bar", () => {
+    const dialog = open();
+    expect(within(dialog).queryByTestId("booking-times")).toBeNull();
+    expect(within(dialog).getByTestId("booking-next-available").textContent).toMatch(/7/);
+
+    fireEvent.click(within(dialog).getByTestId("booking-next-available"));
+    expect(within(dialog).getByTestId("booking-day-strip")).toBeTruthy();
+    fireEvent.click(timeButton(dialog, label(10)));
+    expect(within(dialog).getByTestId("booking-basket-toggle").textContent).toMatch(/1 of 2 picked/);
+
+    fireEvent.click(within(dialog).getByTestId("booking-basket-toggle"));
+    const sheet = screen.getByTestId("booking-basket-sheet");
+    expect(within(sheet).getByText(/Not picked yet/)).toBeTruthy();
+
+    fireEvent.click(within(dialog).getByTestId("booking-back-to-month"));
+    expect(within(dialog).getByTestId("booking-calendar")).toBeTruthy();
+  });
+});