@tribe-nest/forge 3.29.0 → 3.34.0

package/src/ui/media/index.ts

@@ -0,0 +1,135 @@
+/**
+ * Forge UI - live calls.
+ *
+ * ## Where the ONE call UI lives
+ *
+ * Here. `CallStage` is built once in this package, over the hooks in
+ * `@tribe-nest/media-client/react`, and BOTH rendering surfaces render that one
+ * component: code websites import it from `@tribe-nest/forge/media`, and admin
+ * imports the same export and feeds it the dashboard's own theme tokens through
+ * `<ForgeThemeProvider>`. A second implementation would mean every fix to the
+ * ordering rules - device before transport, attach before resume, follow the
+ * active set - had to be made twice, and the second copy would be the one that
+ * drifted.
+ *
+ * The HOOKS are still pure re-exports, because the room logic belongs to the
+ * SDK and Forge has no business owning a second copy of it.
+ *
+ * ## Why a barrel at all, rather than telling sites to import the SDK
+ *
+ * The code agent builds sites from Forge's manifest, which is generated from
+ * these barrels. An export that is not in one does not exist as far as the
+ * agent is concerned, however well documented it is elsewhere. `./media` is
+ * registered in `ENTRY_SUBPATHS` in `apps/backend/src/utils/forgeManifest.ts`
+ * for exactly that reason.
+ *
+ * ## What a site actually needs to do
+ *
+ * Wrap the call in `<MediaRoomProvider>` and give it a `getCredentials`
+ * callback that fetches a fresh join ticket. It is a CALLBACK rather than a
+ * token because a ticket expires in minutes and a call lasts an hour: a token
+ * passed once means the first reconnect presents an expired one.
+ *
+ * ```tsx
+ * <MediaRoomProvider getCredentials={() => fetchJoinTicket(bookingId)}>
+ *   <CallStage />
+ * </MediaRoomProvider>
+ * ```
+ *
+ * Inside, `useParticipants()`, `useRemoteTrack(producerId)` and
+ * `useLocalMedia()` are the whole surface. Nothing here decides what a
+ * participant is allowed to do: `useGrants()` is for RENDERING - so a button
+ * that the node would refuse is not offered - and the node enforces
+ * independently. A client-side grant check is a UI hint, never the decision.
+ */
+export {
+  MediaRoomProvider,
+  useActiveSpeakers,
+  useGrants,
+  useLocalMedia,
+  useLocalPublications,
+  useMediaRoom,
+  useParticipants,
+  useRecording,
+  useRemoteTrack,
+  useRoomState,
+  // The producers a UI should RENDER: `useRoomState().producers` is the node's
+  // full announcement history and deliberately keeps producers the current
+  // subscribe rule bars, so that a barrier which narrows can later widen.
+  useVisibleProducers,
+  type LocalMediaControls,
+  type LocalSource,
+  type MediaRoomProviderProps,
+} from "@tribe-nest/media-client/react";
+
+export type {
+  ConnectionState,
+  DisconnectCause,
+  LocalPublication,
+  MediaRoom,
+  MediaTrack,
+  // `CallTileInput` is built from these, so a site laying out its own grid over
+  // `callTiles` needs them by name.
+  ProducerEntry,
+  RoomState,
+} from "@tribe-nest/media-client";
+
+export type { MediaGrants, Peer, SubscribeRule } from "@tribe-nest/media-protocol";
+
+/**
+ * The screen itself, and the decisions behind it.
+ *
+ * `CallStage` is the whole call: participant tiles with names, the local
+ * preview, mic / camera / screenshare toggles, an active-speaker indication, a
+ * leave control and an honest connection state. Mount it inside a
+ * `<MediaRoomProvider>` (or `<BookingCallProvider>`) and behind a Join control,
+ * because the provider connects on mount.
+ *
+ * `callTiles`, `callStatus` and `canPublishSource` are exported alongside it for
+ * a surface that wants a different layout over the same decisions. They are
+ * pure and they are where the two failures worth being sure about live: a grid
+ * that keeps a tile for somebody with the camera off, and a connection state
+ * that separates "reconnecting" from "refused" rather than showing one spinner
+ * for both.
+ */
+export { CallStage, type CallStageProps } from "./CallStage";
+export { CallHelpHint, type CallHelpHintProps } from "./CallHelpHint";
+export {
+  callHeadCount,
+  callStatus,
+  callTiles,
+  canPublishSource,
+  remoteAudioProducerIds,
+  type CallStatus,
+  type CallStatusInput,
+  type CallStatusTone,
+  type CallTile,
+  type CallTileInput,
+  type PublishSource,
+} from "./callState";
+
+/**
+ * Coaching sessions held on the platform's own media network.
+ *
+ * These are the ONE thing in this barrel that is not a re-export, because they
+ * are the only part that knows about a TribeNest endpoint: `BookingCallProvider`
+ * is `MediaRoomProvider` already wired to the booking credential endpoint, so a
+ * site never has to know what a join ticket is or how often to fetch one.
+ *
+ * They live in THIS barrel rather than in `./ui` for a mechanical reason: the
+ * code agent builds sites from Forge's manifest, and the manifest is generated
+ * from the registered entry points. An export outside one of them does not
+ * exist as far as the agent is concerned, however well documented it is.
+ */
+export {
+  BOOKING_CALL_CLOSES_MINUTES_AFTER,
+  BOOKING_CALL_OPENS_MINUTES_BEFORE,
+  BookingCallProvider,
+  bookingCallWindow,
+  useBookingSessionCredentials,
+  type BookingCallProviderProps,
+  type BookingCallSubject,
+  type BookingCallWindow,
+  type BookingSessionCredentials,
+  type BookingSessionRole,
+} from "./bookingSession";

package/src/ui/styled/AccountDashboard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import {
   usePublicAuth,
   useUserOrders,
@@ -21,6 +21,7 @@ import {
   useCancelMembership,
   useMembershipAccess,
   useOpenBillingPortal,
+  useCommunitySpaces,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -35,6 +36,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useSiteConfig } from "../../data/queries/useWebsite";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
+import { bookingCallWindow } from "../media/bookingWindow";
 import { formatCountdown } from "./EventWaitlist";
 import { AddToCalendar } from "./AddToCalendar";
 import { WalletPassButtons } from "./WalletPassButtons";
@@ -85,6 +87,17 @@ export interface AccountDashboardProps {
    * this to its router (e.g. `/i/membership`).
    */
   onNavigateMembership?: () => void;
+  /**
+   * Navigate to the community spaces, the member home's Spaces tab (host maps
+   * this to its router, e.g. `/i/members/spaces`).
+   *
+   * Optional, and drawn only when the signed-in member has at least one space
+   * they can actually open: `/public/community/spaces` returns open spaces plus
+   * the spaces gated to a tier they hold, so an empty list is the server saying
+   * there is no door here. Without that check the account page would offer a
+   * member a room they get bounced out of, which is worse than no link at all.
+   */
+  onNavigateCommunity?: () => void;
   /**
    * Optional currency formatter override. Defaults to Forge's `useFormatCurrency`
    * (which honors the visitor's selected currency + tenant exchange rates), so the
@@ -150,6 +163,7 @@ interface TabContext {
   formatDate: (value: string | number | Date) => string;
   currency?: string;
   onNavigateMembership?: () => void;
+  onNavigateCommunity?: () => void;
 }
 
 // ---- page -------------------------------------------------------------------
@@ -163,6 +177,7 @@ export function AccountDashboard({
   tab,
   onTabChange,
   onNavigateMembership,
+  onNavigateCommunity,
   formatAmount,
   formatDate,
   currency,
@@ -184,6 +199,7 @@ export function AccountDashboard({
     // settlement currency (single source), unless the host overrides it.
     currency: currency ?? siteConfig?.currency,
     onNavigateMembership,
+    onNavigateCommunity,
   };
 
   if (!user) return <Loading fullPage />;
@@ -244,9 +260,23 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const { t, card, button, ghostButton } = useCardStyles();
   const tr = useForgeT();
-  const { formatAmount, formatDate, currency, onNavigateMembership } = ctx;
+  const { formatAmount, formatDate, currency, onNavigateMembership, onNavigateCommunity } = ctx;
   const cancelMembership = useCancelMembership();
+  // The way into the community, which the account page had no link to at all.
+  // The list is already access-filtered by the server (open spaces plus the
+  // ones gated to a tier this member holds), so its emptiness is the whole
+  // gate: no spaces, no link, and nobody is sent at a locked door.
+  const { data: communitySpaces } = useCommunitySpaces();
+  const canOpenCommunity = !!onNavigateCommunity && (communitySpaces?.length ?? 0) > 0;
   const [isCancelling, setIsCancelling] = useState(false);
+  /**
+   * Cancelling is destructive and irreversible from here, so it asks first.
+   * CLAUDE.md puts a destructive confirmation in the category that must stay
+   * VISIBLE rather than behind a `?`, and until now one click on Cancel simply
+   * ended the membership. The client app has always asked (`EditorModal` in
+   * `MembershipTab.tsx`); this surface was ported without it.
+   */
+  const [confirmingCancel, setConfirmingCancel] = useState(false);
   const [cancelError, setCancelError] = useState<string | null>(null);
 
   const membership = user?.membership;
@@ -348,7 +378,14 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
         <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.membership_empty")}</p>
       )}
 
-      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24 }}>
+      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24, flexWrap: "wrap" }}>
+        {/* Kept hard left, apart from the billing actions: this is the door to
+            what the membership is FOR, not another thing to do to the plan. */}
+        {canOpenCommunity && (
+          <button onClick={() => onNavigateCommunity?.()} style={{ ...ghostButton, marginRight: "auto" }}>
+            {tr("forge.account_dashboard.community_spaces")}
+          </button>
+        )}
         {message.showUpdatePayment && (
           <button onClick={onUpdatePayment} disabled={openBillingPortal.isPending} style={button}>
             {openBillingPortal.isPending
@@ -361,7 +398,7 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             but not leave. Hidden once it is already scheduled ("Ending"), where
             the only honest label would be "Cancel again". */}
         {access.hasAccess && !access.cancelAtPeriodEnd && (
-          <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
+          <button onClick={() => setConfirmingCancel(true)} disabled={isCancelling} style={ghostButton}>
             {isCancelling ? tr("forge.account_dashboard.cancelling") : tr("forge.account_dashboard.cancel")}
           </button>
         )}
@@ -371,6 +408,41 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             : tr("forge.account_dashboard.membership_join")}
         </button>
       </div>
+
+      {/* Says WHICH of the two cancellations this is. A paid membership runs to
+          the end of the period already paid for; a free one stops now. A flat
+          "are you sure" tells a member who paid this month that they have lost
+          the rest of it, which is not true and reads as a threat. */}
+      {confirmingCancel && (
+        <div role="alertdialog" aria-modal="true" style={{ ...card, marginTop: 16 }}>
+          <p style={{ fontWeight: 700 }}>{tr("forge.account_dashboard.cancel_confirm_title")}</p>
+          <p style={{ fontSize: 14, opacity: 0.85, marginTop: 8 }}>
+            {membership?.subscriptionAmount
+              ? membership.endDate
+                ? tr("forge.account_dashboard.cancel_confirm_paid_until", { date: formatDate(membership.endDate) })
+                : tr("forge.account_dashboard.cancel_confirm_paid")
+              : tr("forge.account_dashboard.cancel_confirm_free")}
+          </p>
+          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 16 }}>
+            <button onClick={() => setConfirmingCancel(false)} disabled={isCancelling} style={ghostButton}>
+              {tr("forge.account_dashboard.cancel_confirm_keep")}
+            </button>
+            <button
+              onClick={() => {
+                // Closed FIRST, so the dialog cannot be double-submitted while
+                // the request is in flight. The row behind it already renders
+                // "Cancelling" from `isCancelling`.
+                setConfirmingCancel(false);
+                void onCancel();
+              }}
+              disabled={isCancelling}
+              style={button}
+            >
+              {tr("forge.account_dashboard.cancel_confirm_confirm")}
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -858,6 +930,24 @@ function BookingLocationLine({
     );
   }
 
+  /**
+   * A call on the platform's own media network. A LINE, and the way in is the
+   * `BookingCallEntry` control the row renders below it.
+   *
+   * There is no URL to render and there never will be: entry is a ticket minted
+   * per attempt and valid for minutes, so the Join control mints one on the
+   * click and mounts the call in place (`BookingCallEntry`, loaded lazily so a
+   * site pays for the SDK only when somebody presses it).
+   */
+  if (location.type === "video") {
+    return (
+      <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
+        <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_join_label")}{" "}</span>
+        {tr("forge.account_dashboard.booking_video_call")}
+      </div>
+    );
+  }
+
   return (
     <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
       <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_where_label")}{" "}</span>
@@ -984,6 +1074,105 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       </div>
 
       {picking && <RescheduleSlotPicker booking={booking} onDone={() => setPicking(false)} />}
+
+      {/* The way INTO a video session: a Join control while the room is open,
+          the call itself once pressed. Nothing for any other kind of session. */}
+      {!cancelled && <BookingCallEntry booking={booking} />}
+    </div>
+  );
+}
+
+/**
+ * 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.
+ *
+ * The room, the hooks, the credential endpoint and `BookingCallProvider` all
+ * shipped before this control existed, and none of it was reachable from the
+ * one place a client looks: the row for their session printed "Video call on
+ * this site" and offered nothing to press. Admin's own help text told coaches
+ * 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
+ *
+ * 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.
+ *
+ * ## Why the window ticks
+ *
+ * `bookingCallWindow` takes `now` as an argument rather than reading the clock,
+ * so a portal left open across the opening minute has to be told. A minute is
+ * fine: the server applies the same window and refuses a ticket outside it,
+ * and its refusal is what `<CallStage>` shows rather than a pre-judgement here.
+ */
+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);
+    return () => clearInterval(timer);
+  }, []);
+
+  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.
+    return (
+      <div style={{ fontSize: 13, opacity: 0.7, marginTop: 12 }}>
+        {now < call.opensAt
+          ? tr("forge.account_dashboard.booking_video_opens_at", {
+              datetime: call.opensAt.toLocaleString(undefined, {
+                weekday: "short",
+                day: "numeric",
+                month: "short",
+                hour: "numeric",
+                minute: "2-digit",
+                timeZone: booking.coachingProductTimezone ?? undefined,
+              }),
+            })
+          : tr("forge.account_dashboard.booking_video_closed")}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginTop: 12 }}>
+      <button type="button" onClick={() => setJoined(true)} style={button}>
+        {tr("forge.account_dashboard.booking_join_video")}
+      </button>
     </div>
   );
 }

package/src/ui/styled/BroadcastWatch.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useBroadcastWatch } from "../headless/broadcast/useBroadcastWatch";
+import { Loading } from "./Loading";
+import { BroadcastPassValidation } from "./broadcast/BroadcastPassValidation";
+import { BroadcastTicketPurchase } from "./broadcast/BroadcastTicketPurchase";
+import { BroadcastPlayer, type BroadcastPlayerRenderProps } from "./broadcast/BroadcastPlayer";
+import { EndedBroadcast } from "./broadcast/EndedBroadcast";
+
+export interface BroadcastWatchProps {
+  broadcastId: string;
+  /** Host-owned navigation. Falls back to a full page load. */
+  navigate?: (href: string) => void;
+  /** Where leaving lands. Default `/i/live`. */
+  livePath?: string;
+  /** How to play the HLS stream. See `BroadcastPlayer` for why this is a prop. */
+  renderPlayer?: (props: BroadcastPlayerRenderProps) => ReactNode;
+  /** Format a numeric amount for display (the "from ..." line on the paywall). */
+  formatAmount?: (amount: number) => string;
+  /** Stripe return URL for a PAID ticket purchase made from the paywall. */
+  finalisePath?: (slug: string, orderId: string) => string;
+  /** Host-owned navigation on FREE ticket completion. */
+  onComplete?: (info: { slug: string; orderId: string }) => void;
+}
+
+/**
+ * The watch page for one live broadcast.
+ *
+ * What is on screen is decided entirely by `useBroadcastWatch().screen`, which
+ * is computed by a pure function. The order those states are checked in is the
+ * whole safety property of this page: a broadcast that has ENDED shows the ended
+ * screen, a broadcast that is GATED shows the ticket box, and only a viewer past
+ * both gets a component that knows the playback URL.
+ */
+export function BroadcastWatch({
+  broadcastId,
+  navigate,
+  livePath = "/i/live",
+  renderPlayer,
+  formatAmount,
+  finalisePath,
+  onComplete,
+}: BroadcastWatchProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const watch = useBroadcastWatch(broadcastId);
+  const { broadcast, screen } = watch;
+
+  const leave = () => {
+    watch.leave();
+    if (navigate) navigate(livePath);
+    else if (typeof window !== "undefined") window.location.assign(livePath);
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ padding: "0 16px 8px" }}>
+        <button
+          type="button"
+          onClick={leave}
+          data-testid="broadcast-leave"
+          aria-label={t("forge.broadcast_watch.leave")}
+          style={{ background: "transparent", border: "none", padding: 0, cursor: "pointer" }}
+        >
+          <X size={28} color={theme.colors.primary} />
+        </button>
+      </div>
+
+      {screen.showLoading && <Loading fullPage />}
+
+      {screen.view === "error" && <div data-testid="broadcast-load-error">{t("forge.broadcast_watch.load_error")}</div>}
+
+      {screen.view === "ended" && broadcast && <EndedBroadcast broadcast={broadcast} />}
+
+      {screen.view === "player" && broadcast && watch.pass && (
+        <BroadcastPlayer broadcast={broadcast} broadcastPass={watch.pass} renderPlayer={renderPlayer} />
+      )}
+
+      {screen.view === "pass" && broadcast && (
+        <BroadcastPassValidation
+          broadcast={broadcast}
+          onValidate={(ticketCode) => watch.validate(ticketCode).catch(() => undefined)}
+          isValidating={watch.isValidating}
+          error={watch.error}
+          buyTickets={
+            <BroadcastTicketPurchase
+              broadcast={broadcast}
+              formatAmount={formatAmount}
+              finalisePath={finalisePath}
+              onComplete={onComplete}
+            />
+          }
+        />
+      )}
+    </div>
+  );
+}

package/src/ui/styled/ForgotPasswordForm.tsx

@@ -21,6 +21,11 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
   const [isSuccess, setIsSuccess] = useState(false);
 
   const card: React.CSSProperties = {
+    // See `LoginForm`. The host layout is a COLUMN flex container, and an auto
+    // cross-axis margin disables `align-items: stretch`, so `maxWidth` alone
+    // leaves the card shrink-to-fit. The cap is unchanged: this fills the
+    // container UP TO 420 and no further.
+    width: "100%",
     maxWidth: 420,
     margin: "40px auto 0",
     padding: 24,