@tribe-nest/forge 3.34.0 → 3.36.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,
@@ -18,6 +18,7 @@ import {
   useSavedPosts,
   useNotificationPreferences,
   useUpdateNotificationPreference,
+  useMyFilmRentals,
   useCancelMembership,
   useMembershipAccess,
   useOpenBillingPortal,
@@ -42,6 +43,7 @@ import { AddToCalendar } from "./AddToCalendar";
 import { WalletPassButtons } from "./WalletPassButtons";
 import { TicketTransferPanel } from "./TicketTransfer";
 import { CartLineOptions } from "./CartLineOptions";
+import { FilmRentalList } from "./FilmLibrary";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -54,6 +56,13 @@ export const ACCOUNT_TABS = [
   // "order" — the Orders tab covers product orders only — so it needs its own
   // tab or it is unreachable, which is what it was.
   "bookings",
+  // Films and series this fan has rented. Next to the other purchase surfaces
+  // because it answers the same question they do: what did I buy from this
+  // artist, and can I use it right now?
+  //
+  // Drawn only when the fan actually holds a rental (see `visibleTabs`), so the
+  // tab does not appear on the account page of every site that never sells one.
+  "rentals",
   "saved",
   "account",
   "notifications",
@@ -70,6 +79,7 @@ const TAB_LABEL_KEYS: Record<AccountTabKey, string> = {
   tickets: "forge.account_dashboard.tab_tickets",
   waitlist: "forge.account_dashboard.tab_waitlist",
   bookings: "forge.account_dashboard.tab_bookings",
+  rentals: "forge.account_dashboard.tab_rentals",
   saved: "forge.account_dashboard.tab_saved",
   account: "forge.account_dashboard.tab_account",
   notifications: "forge.account_dashboard.tab_notifications",
@@ -98,6 +108,15 @@ export interface AccountDashboardProps {
    * member a room they get bounced out of, which is worse than no link at all.
    */
   onNavigateCommunity?: () => void;
+  /**
+   * Navigate to a film route from the Rentals tab (watch, resume, rent again).
+   *
+   * Takes the href rather than being one callback per destination, because a
+   * rental row points at a title AND at the episode the fan got to, so the
+   * target is data rather than a fixed page. Left out, the row falls back to a
+   * full-page visit, which works on any site and is merely slower.
+   */
+  onNavigateFilm?: (href: string) => void;
   /**
    * Optional currency formatter override. Defaults to Forge's `useFormatCurrency`
    * (which honors the visitor's selected currency + tenant exchange rates), so the
@@ -164,6 +183,7 @@ interface TabContext {
   currency?: string;
   onNavigateMembership?: () => void;
   onNavigateCommunity?: () => void;
+  onNavigateFilm?: (href: string) => void;
 }
 
 // ---- page -------------------------------------------------------------------
@@ -178,6 +198,7 @@ export function AccountDashboard({
   onTabChange,
   onNavigateMembership,
   onNavigateCommunity,
+  onNavigateFilm,
   formatAmount,
   formatDate,
   currency,
@@ -188,6 +209,17 @@ export function AccountDashboard({
   const { t } = useCardStyles();
   const tr = useForgeT();
   const { data: siteConfig } = useSiteConfig();
+  /**
+   * Does this fan hold any rental at all? That is the whole gate on the Rentals
+   * tab, on the same principle as the community link above: the server's own
+   * answer decides, and a surface with nothing behind it is not drawn.
+   *
+   * Film rentals are off by default and per profile, so on most sites this read
+   * comes back empty for ever and the tab never appears. It is the SAME query
+   * `FilmRentalList` runs inside the tab (same key, same arguments), so
+   * react-query serves both from one request rather than two.
+   */
+  const { data: rentals } = useMyFilmRentals(user?.id);
 
   const fmtAmount = useAmountFormatter(formatAmount);
   const fmtDate = formatDate ?? defaultFormatDate;
@@ -200,8 +232,18 @@ export function AccountDashboard({
     currency: currency ?? siteConfig?.currency,
     onNavigateMembership,
     onNavigateCommunity,
+    onNavigateFilm,
   };
 
+  /**
+   * The strip hides Rentals until there is something in it. The one exception
+   * is the tab currently being shown, so a link straight to `?tab=rentals` (a
+   * receipt email, a bookmark) does not land on a page whose strip disowns the
+   * panel underneath it.
+   */
+  const hasRentals = (rentals?.total ?? 0) > 0;
+  const visibleTabs = ACCOUNT_TABS.filter((key) => key !== "rentals" || hasRentals || tab === "rentals");
+
   if (!user) return <Loading fullPage />;
 
   return (
@@ -222,7 +264,7 @@ export function AccountDashboard({
       </div>
 
       <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24 }}>
-        {ACCOUNT_TABS.map((tabKey) => (
+        {visibleTabs.map((tabKey) => (
           <button
             key={tabKey}
             onClick={() => onTabChange?.(tabKey)}
@@ -247,6 +289,7 @@ export function AccountDashboard({
       {tab === "tickets" && <TicketsTab ctx={ctx} />}
       {tab === "waitlist" && <WaitlistTab ctx={ctx} />}
       {tab === "bookings" && <BookingsTab ctx={ctx} />}
+      {tab === "rentals" && <RentalsTab ctx={ctx} />}
       {tab === "saved" && <SavedTab />}
       {tab === "account" && <AccountTab ctx={ctx} />}
       {tab === "notifications" && <NotificationsTab />}
@@ -1082,15 +1125,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 +1135,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 +1159,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 +1168,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 +1189,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>
   );
 }
@@ -1294,6 +1329,35 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
   );
 }
 
+// ---- Rentals tab ------------------------------------------------------------
+
+/**
+ * Films and series this fan has rented, live and expired.
+ *
+ * `/i/films/library` already answered this, and nothing on the account page led
+ * to it: a fan who rented a film found their tickets, their orders and their
+ * sessions here and no sign that the rental existed. This is that page's list,
+ * rendered in the tab strip where a buyer looks for a purchase.
+ *
+ * The affordance per row comes from the SERVER's `isLive`, not from arithmetic
+ * repeated here: a running window offers Watch (Resume, when there is progress
+ * to resume), and a window that has closed or been refunded offers Rent again.
+ * That decision lives in one place, `FilmRentalList`, and both surfaces read it.
+ */
+function RentalsTab({ ctx }: { ctx: TabContext }) {
+  const { t, card } = useCardStyles();
+  const tr = useForgeT();
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.rentals_title")}
+      </h2>
+      <FilmRentalList navigate={ctx.onNavigateFilm} />
+    </div>
+  );
+}
+
 // ---- Orders tab -------------------------------------------------------------
 
 function OrdersTab({ ctx }: { ctx: TabContext }) {