@tribe-nest/forge 3.34.0 → 3.36.0

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

@@ -27,6 +27,7 @@ import { AccountDashboard } from "../AccountDashboard";
 const PROFILE_ID = "profile-1";
 const ACCOUNT_ID = "account-1";
 const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
 
 const member = {
   id: ACCOUNT_ID,
@@ -59,6 +60,9 @@ const booking = (overrides: Partial<MyBooking> = {}): MyBooking => {
     cancellationOutcome: null,
     createdAt: "2026-01-01T00:00:00.000Z",
     coachingBookingSlotId: "slot-1",
+    // The call's address, written when the booking was confirmed. A real
+    // confirmed video booking always carries one.
+    videoCallId: "call-1",
     sessionStartTime: start.toISOString(),
     sessionEndTime: end.toISOString(),
     coachingProductId: "product-1",
@@ -117,10 +121,34 @@ describe("AccountDashboard: the way into a coaching video call", () => {
 
     expect(html).toContain("Video session");
     expect(html).toContain("Join video call");
+    // A LINK to the call's own page, at the same address the coach opens from
+    // the dashboard. It used to mount the room inline, between two rows of a
+    // list, which is not what a call looks like anywhere else.
+    expect(html).toContain('href="/i/video-calls/call-1"');
     // The line still says where the session is; the control is in addition.
     expect(html).toContain("Video call on this site");
   });
 
+  it("draws no control for a session with no call address, but still says it is a video call", () => {
+    /**
+     * Only reachable for a booking confirmed before calls became addressable,
+     * since a confirmation now writes the record. A dead button would be worse
+     * than none, and the row above still names the session as a video call.
+     */
+    const html = render([booking({ videoCallId: null })]);
+
+    expect(html).toContain("Video call on this site");
+    expect(html).not.toContain("Join video call");
+  });
+
+  it("still says when the room opens even without a call address", () => {
+    // The window copy is about the SESSION, so it must not depend on whether a
+    // room record exists. This is the branch my first attempt broke.
+    const html = render([booking({ videoCallId: null, sessionStartTime: new Date(Date.now() + 6 * HOUR).toISOString() })]);
+
+    expect(html).toMatch(/opens|Opens/);
+  });
+
   it("says when the room opens, rather than offering a Join that would 409", () => {
     const start = new Date(Date.now() + 3 * 60 * MINUTE);
     const html = render([

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

@@ -0,0 +1,200 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { MyFilmRental } from "../../../data/queries/useFilms";
+import { AccountDashboard, type AccountTabKey } from "../AccountDashboard";
+
+/**
+ * Rentals on the account page.
+ *
+ * A fan who rented a film could find their tickets, their orders and their
+ * coaching sessions on this page and no trace of the rental - `/i/films/library`
+ * held it, and nothing on the account page pointed there. So the tab exists, and
+ * these are the two things it must get right:
+ *
+ *   LIVE     - the window is open, so the row offers the way in (Resume when
+ *              there is progress to resume, Watch otherwise).
+ *   NOT LIVE - expired or refunded, so the row offers Rent again and NOT a
+ *              Watch button that leads to a player which would refuse them.
+ *
+ * `isLive` is the SERVER's answer (`msRemaining`, `expiresAt`, `revokedAt` are
+ * all decided there). Nothing here recomputes it, and these specs assert the
+ * rendering of that flag rather than any clock arithmetic in the browser.
+ *
+ * Rendered through `react-dom/server`, like the community spec beside it: no
+ * DOM and no effects, so the rentals query is SEEDED into the react-query cache
+ * rather than mocked. That keeps the real `useMyFilmRentals` in the path, and a
+ * rename of its query key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+
+/** The key `useMyFilmRentals(accountId)` reads, at its default page and limit. */
+const RENTALS_KEY = ["my-film-rentals", ACCOUNT_ID, PROFILE_ID, 1, 20];
+
+const rental = (overrides: Partial<MyFilmRental> = {}): MyFilmRental => ({
+  id: "rental-1",
+  filmId: "film-1",
+  status: "active",
+  amountCents: 500,
+  currency: "USD",
+  rentalDurationHours: 48,
+  rentalOptionId: "option-1",
+  paidAt: "2026-08-01T00:00:00.000Z",
+  startBy: "2026-09-01T00:00:00.000Z",
+  firstPlayedAt: "2026-08-02T00:00:00.000Z",
+  expiresAt: "2026-08-04T00:00:00.000Z",
+  refundedAt: null,
+  revokedAt: null,
+  isLive: true,
+  msRemaining: 3 * 3600_000,
+  windowMs: 48 * 3600_000,
+  film: {
+    id: "film-1",
+    title: "The Long Goodbye",
+    slug: "the-long-goodbye",
+    kind: "film",
+    status: "published",
+    archivedAt: null,
+    cover: null,
+  },
+  progress: [],
+  ...overrides,
+});
+
+const fan = {
+  id: ACCOUNT_ID,
+  email: "fan@example.com",
+  firstName: "Fan",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  membership: null,
+};
+
+function render(opts: { rentals: MyFilmRental[] | null; tab?: AccountTabKey }): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.rentals) {
+    queryClient.setQueryData(RENTALS_KEY, {
+      data: opts.rentals,
+      total: opts.rentals.length,
+      page: 1,
+      limit: 20,
+    });
+  }
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={
+            {
+              user: fan,
+              isInitialized: true,
+              currencies: null,
+              userSelectedCurrency: "USD",
+              logout: () => {},
+            } as never
+          }
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountDashboard tab={opts.tab ?? "rentals"} onNavigateMembership={() => {}} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("AccountDashboard: the fan's rentals", () => {
+  it("REGRESSION: a running rental is reachable from the account page", () => {
+    // The gap this closes. The rental existed, the player existed, and the
+    // account page mentioned neither.
+    const html = render({ rentals: [rental()] });
+
+    expect(html).toContain("Rentals");
+    expect(html).toContain("The Long Goodbye");
+    expect(html).toContain("Watch");
+    // The window is state the fan acts on, so it is on the row rather than
+    // behind a `?`.
+    expect(html).toContain("3h 0m left");
+    expect(html).not.toContain("Rent again");
+  });
+
+  it("offers to resume the episode the fan stopped in the middle of", () => {
+    const html = render({
+      rentals: [rental({ progress: [{ episodeId: "episode-1", positionSec: 900, completedAt: null }] })],
+    });
+
+    expect(html).toContain("Resume");
+  });
+
+  it("REGRESSION: an expired rental offers Rent again, never Watch", () => {
+    // Drawing Watch here walks the fan into a player that refuses them: the
+    // window is the server's to judge and it has closed.
+    const html = render({
+      rentals: [rental({ isLive: false, msRemaining: 0, expiresAt: "2026-08-04T00:00:00.000Z" })],
+    });
+
+    expect(html).toContain("Rent again");
+    expect(html).toContain("Your window has closed.");
+    expect(html).not.toContain(">Watch<");
+    expect(html).not.toContain(">Resume<");
+  });
+
+  it("says a refunded rental was refunded rather than that it ran out", () => {
+    // Two different things happened, and "your window has closed" over a refund
+    // reads as the artist keeping the money.
+    const html = render({
+      rentals: [rental({ isLive: false, msRemaining: null, refundedAt: "2026-08-03T00:00:00.000Z" })],
+    });
+
+    expect(html).toContain("Refunded.");
+    expect(html).toContain("Rent again");
+  });
+
+  it("keeps a rental that has not been started apart from one that is running", () => {
+    // The clock starts at first play, so this fan has lost nothing by waiting.
+    // Saying "0m left" here would be a lie that costs them the film.
+    const html = render({ rentals: [rental({ firstPlayedAt: null, msRemaining: null, expiresAt: null })] });
+
+    expect(html).toContain("Not started.");
+    expect(html).toContain("Watch");
+  });
+
+  it("does not draw the tab on a site where this fan holds no rental", () => {
+    // Film rentals are off by default and per profile. An always-empty tab on
+    // every account page is noise on every site that never sells one.
+    const html = render({ rentals: [], tab: "membership" });
+
+    expect(html).not.toContain("Rentals");
+    // The rest of the strip is untouched, so this is the one tab missing rather
+    // than the dashboard failing to draw.
+    expect(html).toContain("Tickets");
+  });
+
+  it("stays quiet while the rentals query has not answered yet", () => {
+    // First paint has no cached answer. Drawing the tab on a guess flashes it
+    // and then withdraws it from fans who never rented anything.
+    const html = render({ rentals: null, tab: "membership" });
+
+    expect(html).not.toContain("Rentals");
+  });
+
+  it("keeps the tab drawn when it is the one being shown, even with nothing in it", () => {
+    // A receipt email links straight at `?tab=rentals`. A strip that disowns the
+    // panel underneath it is worse than an empty tab.
+    const html = render({ rentals: [], tab: "rentals" });
+
+    expect(html).toContain("Rentals");
+    expect(html).toContain("You have not rented anything yet.");
+  });
+});

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

@@ -84,6 +84,9 @@
     .order-1 {
       order: 1;
     }
+    .order-2 {
+      order: 2;
+    }
     .container {
       width: 100%;
       @media (width >= 40rem) {
@@ -204,6 +207,9 @@
     .shrink-0 {
       flex-shrink: 0;
     }
+    .grow {
+      flex-grow: 1;
+    }
     .transform {
       transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
     }

package/src/utils/_tests/paystackCheckout.spec.ts

@@ -48,7 +48,12 @@ vi.mock("@paystack/inline-js", () => {
 
 // Imported after the mock is registered (vitest hoists `vi.mock`, so a plain
 // top-level import would be fine; this is only for readability).
-import { openPaystackCheckout, paystackReturnUrl, hasPaystackSession } from "../paystackCheckout";
+import {
+  openPaystackCheckout,
+  paystackReturnUrl,
+  hasPaystackSession,
+  isPaystackPopupOpen,
+} from "../paystackCheckout";
 
 const HOSTED = "https://checkout.paystack.com/abc123";
 const RETURN = "https://artist.test/checkout/finalise?orderId=order-1";
@@ -264,3 +269,79 @@ describe("openPaystackCheckout", () => {
     expect(location.href).toBe("https://artist.test/checkout");
   });
 });
+
+/**
+ * The popup says when it is up, so the dialog it was opened from can stand
+ * down (`ui/headless/dialog.tsx`).
+ *
+ * A flag left stuck ON is worse than no flag: every dialog on the site would
+ * stay non-modal for the rest of the session. So each terminal outcome is
+ * asserted separately rather than trusting one shared teardown.
+ */
+describe("openPaystackCheckout popup state", () => {
+  it("is closed before anything is opened", () => {
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("is open while the fan is deciding, and closed again once they pay", async () => {
+    let captured: ResumeOptions = {};
+    resumeBehaviour = (_code, options) => {
+      captured = options;
+      options.onLoad?.({});
+    };
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(0);
+
+    // The card form is on screen: the dialog behind it must not be holding the
+    // page's pointer events hostage.
+    expect(isPaystackPopupOpen()).toBe(true);
+
+    captured.onSuccess?.({ reference: "pay-uuid" });
+    await pending;
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes on a dismissal, so the fan gets a normal dialog back", async () => {
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onCancel?.();
+    };
+
+    await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes on a provider failure", async () => {
+    resumeBehaviour = (_code, options) => {
+      options.onLoad?.({});
+      options.onError?.({ message: "Card declined" });
+    };
+
+    await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED }, { onError: vi.fn() });
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes when the popup never appears and the fan is sent to the hosted page", async () => {
+    resumeBehaviour = () => {};
+
+    const pending = openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+    await vi.advanceTimersByTimeAsync(5000);
+    await pending;
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+
+  it("closes when resumeTransaction throws before the popup exists", async () => {
+    resumeBehaviour = () => {
+      throw new Error("popup blew up");
+    };
+
+    await openPaystackCheckout({ accessCode: "ac_1", checkoutUrl: HOSTED, returnUrl: RETURN });
+
+    expect(isPaystackPopupOpen()).toBe(false);
+  });
+});

package/src/utils/paystackCheckout.ts

@@ -129,6 +129,45 @@ const modalIsPresent = (): boolean => {
   });
 };
 
+/**
+ * Is a Paystack popup on screen right now?
+ *
+ * Paystack appends its overlay to `document.body`, which puts it OUTSIDE any
+ * dialog the pay button was rendered in. A modal dialog is built to make
+ * exactly that unreachable: Radix sets `pointer-events: none` on the body and
+ * traps focus inside its own content, so the popup renders on top, looks
+ * usable, and swallows every click. A fan on a code website could not pay for
+ * tickets, a course, a coaching slot, a film, a donation or an offer, because
+ * all six open Paystack from inside a dialog.
+ *
+ * So the popup announces itself and the dialog primitives get out of the way
+ * (`ui/headless/dialog.tsx`). It is published from HERE rather than from a
+ * React module because this file is the one funnel every pillar already goes
+ * through, and a second place that knows when the popup is up is a second place
+ * to forget to clear it.
+ */
+let popupOpen = false;
+const popupListeners = new Set<() => void>();
+
+/** For `useSyncExternalStore`, and for anything else that needs the answer now. */
+export function isPaystackPopupOpen(): boolean {
+  return popupOpen;
+}
+
+/** Subscribe to popup open/close. Returns the unsubscribe. */
+export function subscribeToPaystackPopup(listener: () => void): () => void {
+  popupListeners.add(listener);
+  return () => {
+    popupListeners.delete(listener);
+  };
+}
+
+const setPopupOpen = (next: boolean): void => {
+  if (popupOpen === next) return;
+  popupOpen = next;
+  for (const listener of popupListeners) listener();
+};
+
 const errorMessageOf = (error: unknown): string | undefined => {
   if (typeof error === "string") return error;
   const message = (error as { message?: unknown } | null)?.message;
@@ -222,6 +261,10 @@ export async function openPaystackCheckout(
       if (settled) return false;
       settled = true;
       stopWatching();
+      // Every terminal outcome passes through here, which is what makes "the
+      // popup is up" impossible to leave stuck on: paid, dismissed, failed and
+      // fell-back-to-the-hosted-page all clear it.
+      setPopupOpen(false);
       resolve(outcome);
       return true;
     };
@@ -237,6 +280,10 @@ export async function openPaystackCheckout(
     };
 
     try {
+      // Announced BEFORE the iframe exists, not on `onLoad`. The dialog around
+      // the pay button has to have released the page by the time the popup is
+      // painted, and a fan taps the first card field the instant they see it.
+      setPopupOpen(true);
       new PaystackPop().resumeTransaction(accessCode, {
         onSuccess: (transaction) => succeed(transaction ?? {}),
         // Closing the popup leaves the charge exactly where it was. Nothing is

package/src/utils/structuredData.ts

@@ -10,22 +10,15 @@ export function buildOrganizationSchema(webPage: WebPage, origin: string) {
     "@type": "Organization",
     name: webPage.profile.name,
     url: origin,
-    ...(webPage.themeSettings.header?.logo
-      ? { logo: webPage.themeSettings.header.logo }
-      : {}),
-    ...(socialLinks.length > 0
-      ? { sameAs: socialLinks.map((l: { href: string }) => l.href).filter(Boolean) }
-      : {}),
+    ...(webPage.themeSettings.header?.logo ? { logo: webPage.themeSettings.header.logo } : {}),
+    ...(socialLinks.length > 0 ? { sameAs: socialLinks.map((l: { href: string }) => l.href).filter(Boolean) } : {}),
   };
 }
 
 /**
  * Generates WebPage JSON-LD.
  */
-export function buildWebPageSchema(
-  webPage: WebPage,
-  canonicalUrl: string,
-) {
+export function buildWebPageSchema(webPage: WebPage, canonicalUrl: string) {
   return {
     "@context": "https://schema.org",
     "@type": "WebPage",
@@ -181,10 +174,7 @@ export function buildEntitySchema(input: EntitySchemaInput): Record<string, unkn
 
   const { aggregate } = input;
   const hasRatings =
-    !!aggregate &&
-    aggregate.reviewCount > 0 &&
-    Number.isFinite(aggregate.avgRating) &&
-    aggregate.avgRating > 0;
+    !!aggregate && aggregate.reviewCount > 0 && Number.isFinite(aggregate.avgRating) && aggregate.avgRating > 0;
 
   const reviews = (input.reviews ?? [])
     .filter((r) => r.rating >= 1 && r.rating <= 5)
@@ -439,12 +429,93 @@ export function buildServiceSchema(
     aggregate: service.reviewAggregate ?? null,
     reviews: options.reviews,
     offer:
-      options.currency && price !== undefined
-        ? { currency: options.currency, price, availability: "InStock" }
-        : null,
+      options.currency && price !== undefined ? { currency: options.currency, price, availability: "InStock" } : null,
   });
 }
 
+/**
+ * Structural view of `GET /public/films/:slug`. `PublicFilmDetail` satisfies it.
+ *
+ * Deliberately narrow, and deliberately NOT the whole payload: JSON-LD is
+ * emitted into an anonymous SSR document, so anything named here is something a
+ * crawler and a signed-out visitor both get to read. Nothing about a rental,
+ * a session or an episode's storage belongs in it.
+ */
+export interface FilmSchemaSource {
+  kind: "film" | "series";
+  title: string;
+  description?: string | null;
+  cover?: { url: string } | null;
+  currency: string;
+  rentalPriceCents?: number | null;
+  publishedAt?: string | null;
+  episodes?: { durationSec?: number | null }[] | null;
+}
+
+/** ISO 8601 duration (`PT1H42M`) from whole seconds, or undefined when unknown. */
+const isoDuration = (seconds?: number | null): string | undefined => {
+  if (seconds == null || !Number.isFinite(seconds) || seconds <= 0) return undefined;
+  const whole = Math.floor(seconds);
+  const hours = Math.floor(whole / 3600);
+  const minutes = Math.round((whole % 3600) / 60);
+  if (!hours && !minutes) return undefined;
+  return `PT${hours ? `${hours}H` : ""}${minutes ? `${minutes}M` : ""}`;
+};
+
+/**
+ * schema.org/Movie or /TVSeries for a rentable title.
+ *
+ * Built by hand rather than through `buildEntitySchema`, whose `type` union is
+ * closed over the three reviewable sellables. Widening that union to carry two
+ * types that have no review surface would make every caller of it responsible
+ * for cases it can never see.
+ *
+ * The offer is the title's rental price, which is the only price there is: a
+ * rental always buys the whole title. There is no cheaper way in to quote, and
+ * a title with no price gets no `offers` node rather than a free one.
+ */
+export function buildFilmSchema(
+  film: FilmSchemaSource | null | undefined,
+  options: SellableSchemaOptions = {},
+): Record<string, unknown> | null {
+  const name = film?.title?.trim();
+  if (!film || !name) return null;
+
+  const priceCents =
+    typeof film.rentalPriceCents === "number" && Number.isFinite(film.rentalPriceCents) ? film.rentalPriceCents : null;
+  const currency = options.currency ?? film.currency;
+  const description = toSchemaText(film.description);
+  // A film's runtime is its single episode's. A series has no one runtime, so it
+  // gets none rather than an invented average.
+  const duration = film.kind === "film" ? isoDuration(film.episodes?.[0]?.durationSec) : undefined;
+
+  return {
+    "@context": "https://schema.org",
+    "@type": film.kind === "series" ? "TVSeries" : "Movie",
+    name,
+    ...(description ? { description } : {}),
+    ...(film.cover?.url ? { image: film.cover.url } : {}),
+    ...(options.url ? { url: options.url } : {}),
+    ...(options.brand ? { provider: { "@type": "Organization", name: options.brand } } : {}),
+    ...(film.publishedAt ? { datePublished: film.publishedAt } : {}),
+    ...(duration ? { duration } : {}),
+    ...(film.kind === "series" && film.episodes?.length ? { numberOfEpisodes: film.episodes.length } : {}),
+    ...(currency && priceCents != null
+      ? {
+          offers: {
+            "@type": "Offer",
+            priceCurrency: currency,
+            price: money(priceCents / 100),
+            availability: "https://schema.org/InStock",
+            // A rental, not a sale. Saying so is what keeps a $2 line from
+            // reading as the price of owning the film.
+            category: "Rental",
+          },
+        }
+      : {}),
+  };
+}
+
 /**
  * The `scripts` entry a TanStack `head()` needs for a JSON-LD node. Returns an
  * empty array for a null schema, so it can be spread unconditionally: