@tribe-nest/forge 3.34.0 → 3.35.0

package/src/ui/media/CallWindowNotice.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+
+/**
+ * What a call page shows when there is no call to join yet, or any more.
+ *
+ * ## Why this is not the connection status
+ *
+ * A page that mounts `<CallStage>` regardless of the window tries to connect,
+ * fails, and reports the only thing it knows: "not yet connected". That is true
+ * and useless. Somebody who followed a link from their confirmation email is
+ * asking one of two questions, and the server already answered both in the same
+ * read that produced this page: WHEN can I come in, and HAVE I missed it.
+ *
+ * ## Why the times are rendered, not the raw window
+ *
+ * `opensAt` is the server's own boundary, the same one it enforces when it
+ * refuses a ticket, so what this prints is what the server will honour rather
+ * than a client-side guess. It is formatted in the reader's locale and, where
+ * the session carries one, the session's timezone: a coaching client in Lagos
+ * looking at a Berlin coach's session should be told the time they will
+ * actually be sitting at their desk.
+ *
+ * Deliberately NOT a countdown. A ticking clock invites somebody to sit and
+ * watch it, and the page is already re-fetched when they return.
+ */
+export type CallWindowNoticeProps = {
+  /** The earliest the server will mint a ticket. */
+  opensAt: string | Date;
+  /** After this it refuses new tickets; anyone already inside stays inside. */
+  closesAt: string | Date;
+  /** The call's own title, so the reader knows which session this is. */
+  title?: string;
+  /** IANA zone the session was sold in, when there is one. */
+  timeZone?: string | null;
+  /** Injected by specs; defaults to the clock. */
+  now?: Date;
+  /** A way back, rendered under the message when given. */
+  action?: ReactNode;
+};
+
+export function CallWindowNotice({ opensAt, closesAt, title, timeZone, now, action }: CallWindowNoticeProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+
+  const opens = new Date(opensAt);
+  const closes = new Date(closesAt);
+  const at = now ?? new Date();
+
+  const when = opens.toLocaleString(undefined, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZone: timeZone ?? undefined,
+  });
+
+  // Three states, and the middle one is the reason this component exists: a
+  // call that is open but unreachable is the connection status's business, not
+  // this component's, so it renders nothing and lets `<CallStage>` speak.
+  const tooEarly = at < opens;
+  const tooLate = at > closes;
+  if (!tooEarly && !tooLate) return null;
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.5rem",
+        padding: "2rem 1.5rem",
+        textAlign: "center",
+        color: tokens.text,
+        backgroundColor: tokens.background,
+        borderRadius: tokens.cornerRadius,
+      }}
+    >
+      {title && <div style={{ fontWeight: 600, fontSize: "1.125rem" }}>{title}</div>}
+      <div style={{ fontSize: "1rem" }}>
+        {tooEarly ? t("forge.call_window.not_started") : t("forge.call_window.ended")}
+      </div>
+      <div style={{ fontSize: "0.875rem", opacity: 0.7, maxWidth: "32rem" }}>
+        {tooEarly ? t("forge.call_window.opens_at", { datetime: when }) : t("forge.call_window.ended_detail")}
+      </div>
+      {action && <div style={{ marginTop: "0.75rem" }}>{action}</div>}
+    </div>
+  );
+}

package/src/ui/media/_tests/CallWindowNotice.spec.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { ForgeI18nProvider } from "../../../i18n";
+import { ForgeThemeProvider, type ForgeTheme } from "../../theme/ForgeThemeProvider";
+import { CallWindowNotice } from "../CallWindowNotice";
+
+/**
+ * The state a call page is in for most of a session's life: booked, not yet
+ * open, or long over.
+ *
+ * Every surface used to mount the call regardless and report "not yet
+ * connected", which is the connection's answer to a question nobody asked. The
+ * two questions somebody following a link from their confirmation email is
+ * actually asking are WHEN can I come in and HAVE I missed it, and the server
+ * sends both boundaries with the page.
+ */
+const theme: ForgeTheme = {
+  colors: { text: "#101010", background: "#fafafa", primary: "#0b6", surface: "#eeeeee" },
+  cornerRadius: 10,
+};
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+
+const render = (props: { opensAt: Date; closesAt: Date; now: Date; locale?: string }) =>
+  renderToStaticMarkup(
+    <ForgeI18nProvider locale={props.locale ?? "en"}>
+      <ForgeThemeProvider theme={theme}>
+        <CallWindowNotice
+          title="1:1 Coaching"
+          opensAt={props.opensAt.toISOString()}
+          closesAt={props.closesAt.toISOString()}
+          now={props.now}
+        />
+      </ForgeThemeProvider>
+    </ForgeI18nProvider>,
+  );
+
+describe("CallWindowNotice", () => {
+  const now = new Date("2026-08-23T12:00:00.000Z");
+
+  it("says the call has not started, and when to come back", () => {
+    const html = render({ opensAt: new Date(now.getTime() + 6 * HOUR), closesAt: new Date(now.getTime() + 9 * HOUR), now });
+
+    expect(html).toContain("has not started yet");
+    expect(html).toContain("You can join from");
+    // The session it belongs to, so a reader with two bookings knows which.
+    expect(html).toContain("1:1 Coaching");
+  });
+
+  it("says the call has ended once the window is past", () => {
+    const html = render({ opensAt: new Date(now.getTime() - 4 * HOUR), closesAt: new Date(now.getTime() - HOUR), now });
+
+    expect(html).toContain("has ended");
+    expect(html).not.toContain("You can join from");
+  });
+
+  it("renders NOTHING while the room is open, so the call speaks for itself", () => {
+    // The one state this component must stay out of: a call that is open but
+    // unreachable is the connection status's business.
+    const html = render({ opensAt: new Date(now.getTime() - MINUTE), closesAt: new Date(now.getTime() + HOUR), now });
+
+    // The provider still emits its own <style> tag, so this asserts the absence
+    // of the NOTICE rather than of all output.
+    expect(html).not.toContain("has not started");
+    expect(html).not.toContain("has ended");
+    expect(html).not.toContain("1:1 Coaching");
+  });
+
+  it("speaks the visitor's language", () => {
+    const html = render({
+      opensAt: new Date(now.getTime() + 6 * HOUR),
+      closesAt: new Date(now.getTime() + 9 * HOUR),
+      now,
+      locale: "de",
+    });
+
+    // The reported symptom was a German visitor being told only "noch nicht
+    // verbunden". They now get the answer, in German.
+    expect(html).toContain("noch nicht begonnen");
+  });
+});

package/src/ui/media/index.ts

@@ -93,6 +93,15 @@ export type { MediaGrants, Peer, SubscribeRule } from "@tribe-nest/media-protoco
  * for both.
  */
 export { CallStage, type CallStageProps } from "./CallStage";
+
+/**
+ * What a call page shows OUTSIDE the window, when there is nothing to connect
+ * to. Exported because all three surfaces (admin, the client portal and a
+ * creator site) reached the same dead end: they mounted the call regardless,
+ * failed to connect, and reported "not yet connected", which answers neither of
+ * the two questions somebody arriving from an email is asking.
+ */
+export { CallWindowNotice, type CallWindowNoticeProps } from "./CallWindowNotice";
 export { CallHelpHint, type CallHelpHintProps } from "./CallHelpHint";
 export {
   callHeadCount,

package/src/ui/styled/AccountDashboard.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   usePublicAuth,
   useUserOrders,
@@ -1082,15 +1082,6 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
   );
 }
 
-/**
- * The call UI, fetched on the click. `import()` splits it (and the media SDK
- * with mediasoup underneath) out of the `./ui` bundle, so a visitor who never
- * joins a call never downloads it. `bookingCallWindow` is deliberately in a
- * module with no such dependency, which is what lets the CONTROL be decided
- * here without loading the SDK.
- */
-const LazyBookingCallScreen = lazy(() => import("../media/BookingCallScreen"));
-
 /**
  * The buyer's way into a coaching video call, on a code website.
  *
@@ -1101,12 +1092,18 @@ const LazyBookingCallScreen = lazy(() => import("../media/BookingCallScreen"));
  * the client joins "from their account on your site", so this is where it has
  * to be. It renders the SAME `<CallStage>` the coach sees in admin.
  *
- * ## Why the call is mounted only after a click
+ * ## Why this is a LINK and not the call
+ *
+ * It used to mount the room inline, between two rows of a list, at whatever
+ * width the portal happened to be. A call has its own full-screen page now
+ * (`/i/video-calls/:callId`) and it is the SAME address the coach opens from
+ * the dashboard, so both sides of a session meet in the same place instead of
+ * in two different-looking products. Linking also keeps the media SDK out of
+ * this bundle without needing a lazy boundary here: the page that needs
+ * mediasoup is the only thing that loads it.
  *
- * The provider connects on mount and closes on unmount. Rendering it for every
- * row in a list of sessions would open a media connection per row, against
- * rooms the server would then have to provision. So it lives behind Join, and
- * leaving unmounts it.
+ * A plain anchor rather than a router `Link`, because this component ships to
+ * creator sites and must not assume which router mounted it.
  *
  * ## Why the window ticks
  *
@@ -1119,7 +1116,6 @@ function BookingCallEntry({ booking }: { booking: MyBooking }) {
   const { button } = useCardStyles();
   const tr = useForgeT();
   const [now, setNow] = useState(() => new Date());
-  const [joined, setJoined] = useState(false);
 
   useEffect(() => {
     const timer = setInterval(() => setNow(new Date()), 30_000);
@@ -1129,24 +1125,6 @@ function BookingCallEntry({ booking }: { booking: MyBooking }) {
   const call = bookingCallWindow(booking, now);
   if (!call.isVideo) return null;
 
-  if (joined) {
-    // The provider's lifetime is exactly the call's: unmounting this subtree is
-    // what closes the socket, stops the local tracks and puts the camera light
-    // out. Leaving therefore goes through state, not through a `close()` that
-    // leaves a live provider mounted to reconnect on its next render.
-    return (
-      <div style={{ marginTop: 12 }}>
-        <Suspense fallback={<Loading />}>
-          <LazyBookingCallScreen
-            bookingId={booking.id}
-            title={booking.coachingProductTitle}
-            onLeave={() => setJoined(false)}
-          />
-        </Suspense>
-      </div>
-    );
-  }
-
   if (!call.isOpen) {
     // State the buyer has to act on, so it is content and stays visible: the
     // room is not open yet, and this is when to come back.
@@ -1168,11 +1146,25 @@ function BookingCallEntry({ booking }: { booking: MyBooking }) {
     );
   }
 
+  /**
+   * Open, but no address: nothing to link to, so draw nothing.
+   *
+   * Deliberately AFTER the window branch, so a session that has not opened yet
+   * still says when it does. That copy is about the SESSION and must not
+   * depend on whether a room record exists.
+   *
+   * This is reachable only for a booking confirmed before calls became
+   * addressable, since a confirmation now writes the record. The row above
+   * still says the session is a video call, so the buyer is not left thinking
+   * it is somewhere else; a dead button would be worse than none.
+   */
+  if (!booking.videoCallId) return null;
+
   return (
     <div style={{ marginTop: 12 }}>
-      <button type="button" onClick={() => setJoined(true)} style={button}>
+      <a href={`/i/video-calls/${booking.videoCallId}`} style={{ ...button, display: "inline-block" }}>
         {tr("forge.account_dashboard.booking_join_video")}
-      </button>
+      </a>
     </div>
   );
 }

package/src/ui/styled/FilmCatalog.tsx

@@ -0,0 +1,278 @@
+import type { CSSProperties } from "react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useFormatCurrency } from "../format/useFormatCurrency";
+import { useFilmCatalog, type UseFilmCatalogOptions } from "../headless/film/useFilmCatalog";
+import { filmFromPriceCents, splitRentalHours, type PublicFilmSummary } from "../../data/queries/useFilms";
+import { Loading } from "./Loading";
+import { useForgeT, type ForgeT } from "../../i18n";
+
+export interface FilmCatalogProps extends UseFilmCatalogOptions {
+  /** Where a title's detail page lives. Default `/i/films`. */
+  basePath?: string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Draw the search box and the film/series filter. Default true. */
+  showFilters?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The public film and series catalogue.
+ *
+ * The state that trips people up is the third one. There is "loading", there is
+ * "this creator has no titles", and there is "film rentals are not switched on
+ * here" - and the last two are NOT the same sentence. `/i/films` ships to every
+ * site that takes a starter update, so a site whose owner has never heard of the
+ * feature will render this page; telling that owner their catalogue is empty
+ * sends them looking for a title they never created.
+ */
+export function FilmCatalog({
+  basePath = "/i/films",
+  navigate,
+  showFilters = true,
+  className,
+  style,
+  ...catalogOptions
+}: FilmCatalogProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const catalog = useFilmCatalog(catalogOptions);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  const notice: CSSProperties = {
+    padding: "28px 20px",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.surface,
+    color: tokens.muted,
+    textAlign: "center",
+    fontSize: 14,
+  };
+
+  const control: CSSProperties = {
+    padding: "10px 12px",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.background,
+    color: tokens.text,
+    fontFamily: tokens.fontFamily,
+    fontSize: 14,
+  };
+
+  if (catalog.isLoading) return <Loading fullPage />;
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 20,
+        maxWidth: 1200,
+        margin: "0 auto",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      {showFilters && catalog.enabled && (
+        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+          <input
+            type="search"
+            value={catalog.query}
+            onChange={(e) => catalog.setQuery(e.target.value)}
+            placeholder={t("forge.film_catalog.search_placeholder")}
+            aria-label={t("forge.film_catalog.search_placeholder")}
+            style={{ ...control, flex: "1 1 220px", minWidth: 0 }}
+          />
+          <select
+            value={catalog.kind ?? ""}
+            onChange={(e) => catalog.setKind((e.target.value || undefined) as "film" | "series" | undefined)}
+            aria-label={t("forge.film_catalog.filter_kind")}
+            style={control}
+          >
+            <option value="">{t("forge.film_catalog.all_kinds")}</option>
+            <option value="film">{t("forge.film_catalog.kind_films")}</option>
+            <option value="series">{t("forge.film_catalog.kind_series")}</option>
+          </select>
+        </div>
+      )}
+
+      {catalog.isError && <p style={notice}>{t("forge.film_catalog.load_error")}</p>}
+
+      {/* Not the same as "no titles". See the component docblock. */}
+      {!catalog.isError && !catalog.enabled && <p style={notice}>{t("forge.film_catalog.not_enabled")}</p>}
+
+      {!catalog.isError && catalog.isEmpty && <p style={notice}>{t("forge.film_catalog.empty")}</p>}
+
+      {catalog.films.length > 0 && (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+            gap: 20,
+          }}
+        >
+          {catalog.films.map((film) => (
+            <FilmCard key={film.id} film={film} t={t} onOpen={() => go(`${basePath}/${film.slug}`)} />
+          ))}
+        </div>
+      )}
+
+      {catalog.pageCount > 1 && (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
+          <button
+            type="button"
+            onClick={catalog.prevPage}
+            disabled={!catalog.hasPrevPage}
+            style={{
+              ...control,
+              cursor: catalog.hasPrevPage ? "pointer" : "default",
+              opacity: catalog.hasPrevPage ? 1 : 0.5,
+            }}
+          >
+            {t("forge.film_catalog.previous")}
+          </button>
+          <span style={{ fontSize: 13, color: tokens.muted }}>
+            {t("forge.film_catalog.page_of", { page: catalog.page, total: catalog.pageCount })}
+          </span>
+          <button
+            type="button"
+            onClick={catalog.nextPage}
+            disabled={!catalog.hasNextPage}
+            style={{
+              ...control,
+              cursor: catalog.hasNextPage ? "pointer" : "default",
+              opacity: catalog.hasNextPage ? 1 : 0.5,
+            }}
+          >
+            {t("forge.film_catalog.next")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FilmCard({ film, t, onOpen }: { film: PublicFilmSummary; t: ForgeT; onOpen: () => void }) {
+  const tokens = useThemeTokens();
+  const { formatCurrency } = useFormatCurrency();
+  /**
+   * A card prints ONE number, and for a title sold in several windows that
+   * number is the cheapest, said as "from".
+   *
+   * Dropping the "from" would be the mis-sell in miniature: a card reading "Rent
+   * $2" for a title whose 48-hour window is $5 has quoted a price the detail
+   * page then contradicts.
+   */
+  const priceCents = filmFromPriceCents(film);
+  const hasChoice = (film.rentalOptions?.length ?? 0) > 1;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        textAlign: "left",
+        cursor: "pointer",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          // A poster is 2:3 everywhere a poster has ever been printed; forcing
+          // 16:9 here is what makes a film catalogue look like a blog.
+          aspectRatio: "2/3",
+          borderRadius: tokens.cornerRadius,
+          overflow: "hidden",
+          // The one accepted literal: a letterbox behind artwork of unknown size.
+          background: "#000",
+          border: `1px solid ${tokens.border}`,
+        }}
+      >
+        {film.cover?.url && (
+          <img
+            src={film.cover.url}
+            alt=""
+            loading="lazy"
+            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+          />
+        )}
+        <span
+          style={{
+            position: "absolute",
+            top: 8,
+            left: 8,
+            padding: "2px 8px",
+            borderRadius: 999,
+            fontSize: 11,
+            fontWeight: 700,
+            background: tokens.primary,
+            color: tokens.textPrimary,
+          }}
+        >
+          {film.kind === "series" ? t("forge.film_catalog.badge_series") : t("forge.film_catalog.badge_film")}
+        </span>
+        {film.hasFreePreview && (
+          <span
+            style={{
+              position: "absolute",
+              bottom: 8,
+              left: 8,
+              padding: "2px 8px",
+              borderRadius: 999,
+              fontSize: 11,
+              fontWeight: 700,
+              background: tokens.surface,
+              color: tokens.text,
+              border: `1px solid ${tokens.border}`,
+            }}
+          >
+            {t("forge.film_catalog.free_preview")}
+          </span>
+        )}
+      </div>
+
+      <span style={{ fontSize: 15, fontWeight: 700, lineHeight: 1.3 }}>{film.title}</span>
+
+      <span style={{ fontSize: 12, color: tokens.muted }}>
+        {priceCents == null
+          ? t("forge.film_catalog.not_on_sale")
+          : t(hasChoice ? "forge.film_catalog.rent_from_price" : "forge.film_catalog.rent_price", {
+              price: formatCurrency(priceCents / 100, film.currency),
+            })}
+      </span>
+
+      {film.kind === "series" && (
+        <span style={{ fontSize: 12, color: tokens.muted }}>
+          {t("forge.film_catalog.episodes_available", { count: film.availableEpisodeCount })}
+        </span>
+      )}
+    </button>
+  );
+}
+
+/**
+ * "48 hours" or "2 days", from a whole-hours window.
+ *
+ * Shared by every block that has to state the window before the fan pays, which
+ * is all of them: a fan who buys a ten-episode series on a 48-hour clock and
+ * discovers it at expiry has been mis-sold.
+ */
+export function rentalWindowLabel(t: ForgeT, hours: number): string {
+  const { days, hours: rest } = splitRentalHours(hours);
+  if (days > 0 && rest === 0) return t("forge.film_detail.window_days", { days });
+  return t("forge.film_detail.window_hours", { hours });
+}
+
+export default FilmCatalog;