@tribe-nest/forge 3.48.0 → 3.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.48.0",
+  "version": "3.50.0",
   "publishConfig": {
     "access": "public"
   },

package/src/data/queries/useMembershipCalls.ts

@@ -2,12 +2,23 @@ import { useQuery } from "@tanstack/react-query";
 import { useForge } from "../../provider/ForgeProvider";
 
 /**
- * The member's own call calendar (`GET /public/membership-calls/mine`).
+ * The viewer's own call calendar (`GET /public/scheduled-calls/mine`).
  *
  * Lives in Forge rather than in either app because BOTH rendering surfaces need
  * exactly this - the site-starter's `/i/members/calendar` and the client app's
- * `/i/members/calendar` - and a second copy is how the two drift, as
- * `useMyTickets` and `useMyBookings` already document.
+ * `/i/members/calendar`, and now the classroom and cohort pages on both - and a
+ * second copy is how the two drift, as `useMyTickets` and `useMyBookings`
+ * already document.
+ *
+ * ## It was never only memberships
+ *
+ * The server resolves the caller through every registered audience kind, so a
+ * course enrolment and a cohort seat come back alongside membership tiers. The
+ * endpoint answered on `/public/membership-calls/mine` for a year while doing
+ * exactly that; that path is kept as an alias for sites published against older
+ * Forge builds, and this file now calls the honest one. The names here keep the
+ * `MembershipCall` spelling because they are PUBLISHED exports that a code site
+ * may import; `useMyScheduledCalls` is the alias to write new code against.
  *
  * ## What the server owns and this file does not mirror
  *
@@ -84,24 +95,49 @@ export const membershipCallKeys = {
  * @param options.from Inclusive lower bound. Absent means "from now on", which is
  * what a caller wanting only the next few calls sends.
  * @param options.to Inclusive upper bound. Absent means "however far ahead".
+ * @param options.courseId Show only calls addressed to this course. See below.
+ * @param options.cohortId Show only calls addressed to this cohort. See below.
+ *
+ * ## `courseId` / `cohortId` narrow, they do not unlock
+ *
+ * Absent, this is the viewer's whole calendar and behaves as it always has.
+ * Present, the server INTERSECTS them with the audience keys it resolved for
+ * this caller, so they can only remove rows. Passing a course the viewer has no
+ * access to returns nothing, which is the same answer a stranger gets.
+ *
+ * The classroom and the cohort page pass them because a student enrolled in two
+ * cohorts opening one of them must not be shown the other's sessions.
  */
 export function useMyMembershipCalls(options?: {
   from?: Date;
   to?: Date;
   limit?: number;
   enabled?: boolean;
+  courseId?: string | null;
+  cohortId?: string | null;
 }) {
   const { client, profileId } = useForge();
   const from = options?.from?.toISOString();
   const to = options?.to?.toISOString();
+  const courseId = options?.courseId || undefined;
+  const cohortId = options?.cohortId || undefined;
   return useQuery<MyMembershipCall[]>({
     // The WINDOW is part of the key: paging back a month is a different question
     // with a different answer, and sharing one cache entry would show February's
-    // calls in March until a refetch landed.
-    queryKey: [...membershipCallKeys.mine(profileId), from ?? "now", to ?? "open"],
+    // calls in March until a refetch landed. The SCOPE is in it for the same
+    // reason - the classroom's answer and the members calendar's answer are two
+    // different lists, and sharing one entry would put one course's sessions on
+    // another course's page for as long as the cache held.
+    queryKey: [
+      ...membershipCallKeys.mine(profileId),
+      from ?? "now",
+      to ?? "open",
+      courseId ?? "any-course",
+      cohortId ?? "any-cohort",
+    ],
     queryFn: async () => {
-      const res = await client.get("/public/membership-calls/mine", {
-        params: { profileId, from, to, limit: options?.limit },
+      const res = await client.get("/public/scheduled-calls/mine", {
+        params: { profileId, from, to, limit: options?.limit, courseId, cohortId },
       });
       return res.data;
     },
@@ -146,7 +182,7 @@ export function useMyMembershipCallRecordings(options?: { limit?: number; enable
   return useQuery<MyMembershipCallRecording[]>({
     queryKey: ["membership-calls", "recordings", profileId],
     queryFn: async () => {
-      const res = await client.get("/public/membership-calls/mine/recordings", {
+      const res = await client.get("/public/scheduled-calls/mine/recordings", {
         params: { profileId, limit: options?.limit },
       });
       return res.data;
@@ -160,3 +196,17 @@ export function useMyMembershipCallRecordings(options?: { limit?: number; enable
     refetchInterval: 120_000,
   });
 }
+
+/**
+ * The honest names for the two hooks above.
+ *
+ * Aliases rather than renames: `useMyMembershipCalls` and its types are
+ * PUBLISHED exports that a code-built site may already import, and breaking
+ * those to fix a word would cost a site owner a build for nothing. New code
+ * should reach for these; the old names stay for as long as anything imports
+ * them.
+ */
+export const useMyScheduledCalls = useMyMembershipCalls;
+export const useMyScheduledCallRecordings = useMyMembershipCallRecordings;
+export type MyScheduledCall = MyMembershipCall;
+export type MyScheduledCallRecording = MyMembershipCallRecording;

package/src/i18n/de.json

@@ -572,6 +572,7 @@
   "forge.course_access.secure_prompt_lead": "Jeder mit diesem Link kann deinen Kurs öffnen. Erstelle ein Konto mit",
   "forge.course_access.secure_prompt_tail": "damit er nur dir gehört.",
   "forge.course_access.signed_in_as": "Angemeldet als",
+  "forge.course_calls.title": "Live-Calls",
   "forge.course_checkout.aria_close": "Schließen",
   "forge.course_checkout.back": "Zurück",
   "forge.course_checkout.confirm_email_placeholder": "E-Mail bestätigen",

package/src/i18n/en.json

@@ -572,6 +572,7 @@
   "forge.course_access.secure_prompt_lead": "Anyone with this link can open your course. Create an account with",
   "forge.course_access.secure_prompt_tail": "to keep it to yourself.",
   "forge.course_access.signed_in_as": "Signed in as",
+  "forge.course_calls.title": "Live calls",
   "forge.course_checkout.aria_close": "Close",
   "forge.course_checkout.back": "Back",
   "forge.course_checkout.confirm_email_placeholder": "Confirm email",

package/src/types/models.ts

@@ -1385,8 +1385,21 @@ export type CohortPageData = {
     title: string;
     description: string | null;
     order: number;
-    releaseOffsetDays: number | null;
-    releaseAt: string | null;
+    /**
+     * The drip schedule and the answer it produces. Present only on the
+     * ENROLLED read: the marketing payload gives a browser the shape of the
+     * course, and a student its calendar.
+     *
+     * Render `locked` / `unlocksAt` / `lockReason`, not the raw offset. The
+     * server computes them with the same expression the classroom uses, so a
+     * renderer that re-derives the answer from `releaseOffsetDays` will
+     * eventually disagree with the screen the student opens next.
+     */
+    releaseOffsetDays?: number | null;
+    releaseAt?: string | null;
+    locked?: boolean;
+    unlocksAt?: string | null;
+    lockReason?: "scheduled" | "cohort_not_started" | null;
     lessons?: Array<{
       id: string;
       title: string;
@@ -1402,12 +1415,21 @@ export type CohortPageData = {
     publishedAt: string | null;
     createdAt: string;
   }>;
-  sessions: Array<{
+  /**
+   * The cohort's scheduled calls. Renamed from `sessions` when
+   * `cohort_sessions` was dropped for the unified `scheduled_calls` table.
+   *
+   * Carries NO join address on purpose. The endpoint behind this payload is
+   * anonymous, so a `callPublicId` here would be a door into a live paid room.
+   * A student joins from the classroom, where they are authenticated.
+   */
+  calls: Array<{
     id: string;
     title: string;
     description: string | null;
-    scheduledAt: string;
-    durationMinutes: number;
+    startsAt: string;
+    endsAt: string;
+    timezone: string | null;
     status: string;
   }>;
   pricingPlans: Array<{
@@ -1653,6 +1675,18 @@ export type CourseAccessRecord = {
    * value as legacy (see `isLegacyCourseAccess`).
    */
   accountId?: string | null;
+  /**
+   * The cohort this enrolment is for, or `null` for a self-paced buy.
+   *
+   * Decides which MODULES the payload carries (a cohort holds its own cloned
+   * copy) and, on the client, which live calls belong on this classroom page: a
+   * student enrolled in two cohorts of one course has two grants and two
+   * classrooms, and each must show only its own sessions.
+   *
+   * Optional on the type because sites built against an older API still get
+   * payloads without the field.
+   */
+  cohortId?: string | null;
 };
 
 export type CourseLessonProgress = {
@@ -1683,6 +1717,25 @@ export type CourseModule = {
   description: string | null;
   order: number;
   lessons: CourseLesson[];
+  /**
+   * Drip state, on a cohort course. Optional because a self-paced course never
+   * carries it and every site built before drip existed predates these fields.
+   *
+   * `locked` means the module has not been released to this student yet. The
+   * server already strips `content` and `media` from a locked module's lessons,
+   * so a renderer that ignores these fields is not a content leak. It is a
+   * BROKEN SCREEN: the lessons render as normal, clickable, and open to
+   * nothing. Render the lock.
+   *
+   * `unlocksAt` is the EFFECTIVE moment, after the cohort's start date and the
+   * module's offset have been applied. It is null when the answer is not known
+   * yet, which is what `lockReason: "cohort_not_started"` means: the creator
+   * laid out the weeks before picking a start date. Say "opens when the cohort
+   * starts" there rather than showing an empty date.
+   */
+  locked?: boolean;
+  unlocksAt?: string | null;
+  lockReason?: "scheduled" | "cohort_not_started" | null;
 };
 
 export type CourseAccessCourse = {

package/src/ui/headless/memberHome/useMemberCalls.ts

@@ -48,6 +48,17 @@ export interface UseMemberCallsOptions {
   now?: Date;
   /** Monday-first. The repo's `utils/recurrence` fixes the same convention. */
   weekStartsOn?: 0 | 1;
+  /**
+   * Narrow the month to ONE course, for a calendar rendered inside a classroom
+   * rather than in the members area.
+   *
+   * Absent on the members calendar, which is the viewer's whole schedule and
+   * must stay so. Present, the server intersects it with the audience keys it
+   * already resolved for this caller, so it can only ever remove rows.
+   */
+  courseId?: string | null;
+  /** The same, for one cohort. A student in two cohorts of one course sees only this one's sessions. */
+  cohortId?: string | null;
 }
 
 const dayKey = (date: Date): string => date.toLocaleDateString("en-CA");
@@ -90,6 +101,8 @@ export function useMemberCalls(options: UseMemberCallsOptions = {}) {
     to: gridEnd,
     limit: options.limit,
     enabled: options.enabled,
+    courseId: options.courseId,
+    cohortId: options.cohortId,
   });
 
   const days: MemberCalendarDay[] = useMemo(() => {

package/src/ui/index.ts

@@ -198,6 +198,9 @@ export { ConfirmSubscription, type ConfirmSubscriptionProps } from "./styled/Con
 export { LeadMagnet, type LeadMagnetProps } from "./styled/LeadMagnet";
 export { CohortPage, type CohortPageProps } from "./styled/CohortPage";
 export { CourseAccess, type CourseAccessProps } from "./styled/CourseAccess";
+// A student's live calls, scoped to the course or cohort the page is standing
+// on. A thin wrapper over `MemberCallsCalendar`, not a second calendar.
+export { CourseCallsSection, type CourseCallsSectionProps } from "./styled/CourseCallsSection";
 
 // Films and series (Tier 2). `FilmWatch` owns the entitlement gate, the viewer
 // overlay, the episode switcher and the clock; it takes a `renderPlayer` prop

package/src/ui/styled/CohortPage.tsx

@@ -1,6 +1,7 @@
 import { useCohortPage } from "../../data/queries/useCohortPage";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { CourseCallsSection } from "./CourseCallsSection";
 import { Loading } from "./Loading";
 
 export interface CohortPageProps {
@@ -13,7 +14,7 @@ function formatDate(value: string | number | Date): string {
   return new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
-/** Cohort landing page — structured cohort/course/curriculum data. Built on `useCohortPage`. */
+/** Cohort landing page: structured cohort/course/curriculum data. Built on `useCohortPage`. */
 export function CohortPage({ cohortId }: CohortPageProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
@@ -79,6 +80,19 @@ export function CohortPage({ cohortId }: CohortPageProps) {
           </div>
         </section>
       )}
+
+      {/* The cohort's live calls, joinable, for the student looking at them.
+          The structured `data.calls` above this page carries no join address
+          on purpose (the payload is anonymous), so the JOINABLE list is read
+          separately and only for a signed-in student. Scoped to this cohort
+          plus the course behind it: a session addressed to everyone who bought
+          the course belongs on a cohort student's schedule, a sibling cohort's
+          does not. */}
+      <CourseCallsSection
+        courseId={course?.id ?? null}
+        cohortId={cohort.id}
+        style={{ marginTop: 32 }}
+      />
     </div>
   );
 }

package/src/ui/styled/CourseAccess.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "react";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useCourseClassroom, type UseCourseClassroomOptions } from "../headless/course/useCourseClassroom";
+import { CourseCallsSection } from "./CourseCallsSection";
 import { Loading } from "./Loading";
 import { useForgeT } from "../../i18n";
 
@@ -14,20 +15,20 @@ export interface CourseAccessProps extends UseCourseClassroomOptions {
 }
 
 /**
- * Enrolled course player — module/lesson sidebar, video progress tracking, and
+ * Enrolled course player: module/lesson sidebar, video progress tracking, and
  * the account-binding gate that stands in front of both. Built on the headless
  * `useCourseClassroom`.
  *
  * The three states worth naming, because each one strands somebody if it is
  * drawn as the others:
  *
- *   - **401** — a bound grant opened with no session. Almost always the buyer,
+ *   - **401**: a bound grant opened with no session. Almost always the buyer,
  *     on an old email link, on a device that never signed in. Gets a sign-in
  *     button that returns HERE, never a dead end.
- *   - **403** — a bound grant opened as somebody else. Gets "this belongs to a
+ *   - **403**: a bound grant opened as somebody else. Gets "this belongs to a
  *     different account" and a way OUT of the current session. Never the word
  *     "sign in", which they have already done.
- *   - **legacy** — no `account_id`, so the link alone is the credential. Opens
+ *   - **legacy**: no `account_id`, so the link alone is the credential. Opens
  *     normally, with a dismissible note offering to put it behind an account.
  */
 export function CourseAccess({
@@ -82,7 +83,7 @@ export function CourseAccess({
         <p style={{ fontSize: 14, color: tokens.muted, lineHeight: 1.6 }}>{gate.body}</p>
 
         {/* Naming the session they are in is what makes "wrong account"
-            actionable — otherwise the reader has no idea which of their
+            actionable, otherwise the reader has no idea which of their
             addresses they are currently signed in with. */}
         {gate.kind === "wrong_account" && classroom.signedInEmail && (
           <p style={{ fontSize: 13, color: tokens.muted }}>
@@ -127,7 +128,7 @@ export function CourseAccess({
         ...style,
       }}
     >
-      {/* Legacy grant, opened fine. An offer, not an obstacle — inline, muted,
+      {/* Legacy grant, opened fine. An offer, not an obstacle: inline, muted,
           dismissible, and never in front of the course the reader came for. */}
       {securePrompt && (
         <div
@@ -311,6 +312,18 @@ export function CourseAccess({
           )}
         </main>
       </div>
+
+      {/* The student's live calls, where the student already is.
+          Scoped to THIS enrolment: `cohortId` is the grant's own cohort, so a
+          student holding two grants on one course opens two classrooms and each
+          shows only its own sessions. No membership href, so the empty state
+          does not sell a membership to a course buyer. */}
+      <CourseCallsSection
+        courseId={data.access.courseId}
+        cohortId={data.access.cohortId ?? null}
+        navigate={go}
+        style={{ marginTop: 32 }}
+      />
     </div>
   );
 }

package/src/ui/styled/CourseCallsSection.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from "react";
+
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { MemberCallsCalendar } from "./members/MemberCallsCalendar";
+
+export interface CourseCallsSectionProps {
+  /** The course this surface is standing on. The classroom reads it off the access row. */
+  courseId?: string | null;
+  /** The cohort this surface is standing on, when there is one. */
+  cohortId?: string | null;
+  /** Heading above the calendar. Defaults to the translated "Live calls". */
+  title?: string;
+  /**
+   * Builds the href of the call itself, from its public id. The default is the
+   * generic call page, which is where both apps mount it.
+   */
+  getCallHref?: (publicId: string) => string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A student's live calls, on the page the student is already on.
+ *
+ * ## Why this is a wrapper and not a calendar
+ *
+ * `MemberCallsCalendar` is already call-kind agnostic: it renders whatever
+ * `listForAttendee` returns, and that resolves course and cohort audiences the
+ * same way it resolves membership tiers. A classroom-specific month grid would
+ * be a second implementation of the same month, the same open/closed rule and
+ * the same join address - which is the dual-surface trap this pillar has been
+ * caught by twice. So this file adds exactly two things and nothing else: the
+ * SCOPE, and the decision to leave the membership upsell out.
+ *
+ * ## No membership href, deliberately
+ *
+ * The members calendar's empty state offers "My membership", which is right
+ * where it stands. On a classroom it would sell a membership to somebody who
+ * bought a course, so nothing is passed and the button does not render. That is
+ * the default in `MemberCallsCalendar`, not a special case here.
+ *
+ * ## Scope
+ *
+ * `courseId` and `cohortId` are intersected server-side with the audience keys
+ * the caller actually holds, so they narrow and never unlock. Passing BOTH is
+ * the classroom's case and is not redundant: a cohort student's schedule is
+ * their cohort's sessions PLUS anything addressed to everyone who bought the
+ * course. A sibling cohort's sessions are excluded because its key is not in
+ * the intersection.
+ */
+export function CourseCallsSection({
+  courseId,
+  cohortId,
+  title,
+  getCallHref,
+  navigate,
+  className,
+  style,
+}: CourseCallsSectionProps) {
+  const translate = useForgeT();
+  const t = useThemeTokens();
+  const { isAuthenticated, isInitialized } = usePublicAuth();
+
+  // Nothing to scope by means nothing to show. Rendering the calendar unscoped
+  // here would quietly put the viewer's WHOLE schedule - other courses, the
+  // membership AMA - on one course's page.
+  if (!courseId && !cohortId) return null;
+
+  /**
+   * A seat is minted against an ACCOUNT, so there is nothing to show a reader we
+   * cannot identify: the cohort page is anonymous to the public, and a legacy
+   * course grant opens for anyone holding the link. Rendering the calendar
+   * anyway would fire an authenticated read, take a 401, and put "we could not
+   * load your calls" on a page that is working perfectly.
+   *
+   * `isInitialized` as well, because the session is restored in an effect - a
+   * render before it lands looks signed-out to every child.
+   */
+  if (!isInitialized || !isAuthenticated) return null;
+
+  return (
+    <section
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 12, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>{title ?? translate("forge.course_calls.title")}</h2>
+      <MemberCallsCalendar
+        courseId={courseId}
+        cohortId={cohortId}
+        getCallHref={getCallHref}
+        navigate={navigate}
+      />
+    </section>
+  );
+}

package/src/ui/styled/FormRenderer.tsx

@@ -186,10 +186,20 @@ export function FieldInput({
     case "yes_no":
       control = (
         <div style={{ display: "flex", gap: 16 }}>
-          {["Yes", "No"].map((opt) => (
-            <label key={opt} style={{ display: "flex", alignItems: "center", gap: 6 }}>
-              <input type="radio" name={field.id} checked={value === opt} onChange={() => onChange(opt)} />
-              {opt}
+          {/* Stored value is lowercase "yes"/"no": edge conditions, quiz grading and
+              the automation trigger coercion all compare against that, not the label. */}
+          {[
+            { optValue: "yes", optLabel: "Yes" },
+            { optValue: "no", optLabel: "No" },
+          ].map(({ optValue, optLabel }) => (
+            <label key={optValue} style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <input
+                type="radio"
+                name={field.id}
+                checked={value === optValue}
+                onChange={() => onChange(optValue)}
+              />
+              {optLabel}
             </label>
           ))}
         </div>

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

@@ -0,0 +1,163 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { MyMembershipCall } from "../../../data/queries/useMembershipCalls";
+
+/**
+ * The section is a WRAPPER, so the mock goes under the whole chain
+ * (`MemberCallsCalendar` -> `useMemberCalls` -> `useMyMembershipCalls`) rather
+ * than over the calendar itself. That is the point of the file: what is under
+ * test is the wiring - which scope reaches the query, which empty state the
+ * student is shown, and which call id Join opens - not the month grid, which
+ * has its own spec.
+ */
+const rows: MyMembershipCall[] = [];
+const useMyMembershipCalls = vi.fn();
+
+vi.mock("../../../data/queries/useMembershipCalls", () => ({
+  useMyMembershipCalls: (options: unknown) => useMyMembershipCalls(options),
+}));
+
+let session = { isAuthenticated: true, isInitialized: true };
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => session,
+}));
+
+const { CourseCallsSection } = await import("../CourseCallsSection");
+
+/**
+ * A day inside the month the grid opens on.
+ *
+ * `useMemberCalls` lays out the six weeks around the REAL clock and buckets
+ * calls into them by the viewer's local day, so a call pinned to a fixed
+ * calendar date falls outside the grid the moment that month passes and every
+ * assertion here goes quietly green-then-red. Built from `now` instead.
+ */
+const at = (hour: number): Date => {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 15, hour, 0, 0);
+};
+
+const call = (over: Partial<MyMembershipCall> = {}): MyMembershipCall => ({
+  id: "call-1",
+  title: "Week 1 kickoff",
+  description: "Bring your questions.",
+  startsAt: at(17).toISOString(),
+  endsAt: at(18).toISOString(),
+  timezone: "America/New_York",
+  participation: "open",
+  role: "attendee",
+  audiences: [{ id: "a1", audienceType: "course_cohort", audienceId: "cohort-1", label: "March cohort" }],
+  opensAt: at(16).toISOString(),
+  closesAt: at(20).toISOString(),
+  isOpen: true,
+  callPublicId: "pub-week-1",
+  recording: null,
+  ...over,
+});
+
+const mount = (props: Record<string, unknown> = {}, navigate = vi.fn()) => {
+  const view = render(
+    <ForgeThemeProvider theme={{ colors: { text: "#111", background: "#fff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+      <CourseCallsSection courseId="course-1" cohortId="cohort-1" navigate={navigate} {...props} />
+    </ForgeThemeProvider>,
+  );
+  return { ...view, navigate };
+};
+
+beforeEach(() => {
+  rows.length = 0;
+  session = { isAuthenticated: true, isInitialized: true };
+  useMyMembershipCalls.mockReset();
+  useMyMembershipCalls.mockImplementation(() => ({
+    data: rows,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+  }));
+});
+
+afterEach(cleanup);
+
+describe("CourseCallsSection", () => {
+  it("renders the student's calls under a heading", () => {
+    rows.push(call());
+    const { getAllByText } = mount();
+    expect(getAllByText("Live calls").length).toBe(1);
+    // Desktop grid cell and mobile agenda row are both in the DOM; the
+    // calendar renders both faces and hides one with a media class.
+    expect(getAllByText("Week 1 kickoff").length).toBeGreaterThan(0);
+  });
+
+  it("scopes the read to the course AND the cohort being viewed", () => {
+    rows.push(call());
+    mount();
+    const options = useMyMembershipCalls.mock.calls[0]![0] as { courseId?: string; cohortId?: string };
+    expect(options.courseId).toBe("course-1");
+    expect(options.cohortId).toBe("cohort-1");
+  });
+
+  it("passes only the cohort when that is all the surface knows", () => {
+    mount({ courseId: null });
+    const options = useMyMembershipCalls.mock.calls[0]![0] as { courseId?: string | null; cohortId?: string };
+    expect(options.courseId).toBeNull();
+    expect(options.cohortId).toBe("cohort-1");
+  });
+
+  it("shows the empty state with NO membership upsell on a course surface", () => {
+    const { getByText, queryByText } = mount();
+    expect(getByText("Nothing this month")).toBeTruthy();
+    // The whole reason this wrapper exists. `MemberCallsCalendar` renders the
+    // button only when it is handed a `membershipHref`, and a course-only buyer
+    // standing in their own classroom must not be sold a membership.
+    expect(queryByText("My membership")).toBeNull();
+  });
+
+  it("links Join to the call's own publicId, on the generic call page", () => {
+    rows.push(call({ callPublicId: "pub-week-1" }));
+    const { getAllByText, getByText, navigate } = mount();
+    fireEvent.click(getAllByText("Week 1 kickoff")[0]!);
+    fireEvent.click(getByText("Join call"));
+    expect(navigate).toHaveBeenCalledWith("/i/video-calls/pub-week-1");
+  });
+
+  it("offers Watch for a past call whose recording is ready", () => {
+    rows.push(
+      call({
+        id: "call-2",
+        title: "Week 0 orientation",
+        isOpen: false,
+        recording: { id: "rec-1", status: "ready", durationSeconds: 3600, watchUrl: "https://cdn.test/rec.mp4" },
+      }),
+    );
+    const { getAllByText, container } = mount();
+    fireEvent.click(getAllByText("Week 0 orientation")[0]!);
+    // Queried by href rather than by text: the label carries the duration in a
+    // second text node, so a text matcher would be matching the minutes too.
+    const watch = container.querySelector<HTMLAnchorElement>('a[href="https://cdn.test/rec.mp4"]');
+    expect(watch?.textContent).toContain("Watch recording");
+  });
+
+  it("renders nothing for a reader with no session, rather than a failed read", () => {
+    // A legacy course grant opens for anyone holding the link, and the cohort
+    // page is anonymous to the public. The attendee endpoint would 401 them, and
+    // "we could not load your calls" on a page that is working perfectly is
+    // worse than no section at all.
+    session = { isAuthenticated: false, isInitialized: true };
+    const { container } = mount();
+    // Not `textContent`: `ForgeThemeProvider` writes a `:root` custom-property
+    // block into the tree, which is there whatever the section does.
+    expect(container.querySelector("section")).toBeNull();
+    expect(useMyMembershipCalls).not.toHaveBeenCalled();
+  });
+
+  it("renders nothing when there is no course or cohort to scope by", () => {
+    // Unscoped here would put the viewer's WHOLE schedule - other courses, the
+    // membership AMA - on one course's page.
+    const { container } = mount({ courseId: null, cohortId: null });
+    expect(container.querySelector("section")).toBeNull();
+    expect(useMyMembershipCalls).not.toHaveBeenCalled();
+  });
+});

package/src/ui/styled/members/MemberCallsCalendar.tsx

@@ -26,7 +26,16 @@ export interface MemberCallsCalendarProps extends UseMemberCallsOptions {
   getCallHref?: (publicId: string) => string;
   /** SPA navigation adapter. Defaults to a full-page visit. */
   navigate?: (href: string) => void;
-  /** Where a viewer with nothing at all is sent to see what a membership includes. */
+  /**
+   * Where a viewer with nothing at all is sent to see what a membership
+   * includes. Shown only in the empty state.
+   *
+   * OPTIONAL, and omitting it is how a non-membership surface drops the upsell.
+   * A course-only buyer standing in their own classroom with no session this
+   * month must not be sold a membership they did not come for, so
+   * `CourseCallsSection` passes nothing here. The members calendar passes its
+   * path and is unchanged.
+   */
   membershipHref?: string;
   className?: string;
   style?: CSSProperties;
@@ -85,6 +94,15 @@ const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  * computed from the same window the join enforces. A client re-deriving it from
  * the clock would give two answers to one question, and the wrong one is the one
  * the member acts on.
+ *
+ * ## It is not a MEMBERSHIP calendar, only a member-area one
+ *
+ * The rows come from `listForAttendee`, which resolves every audience kind, so
+ * this same grid renders a course's office hours and a cohort's week-3 session
+ * without knowing what either is. `courseId` / `cohortId` (through
+ * `UseMemberCallsOptions`) narrow it to one of them, which is what lets the
+ * classroom and the cohort page reuse this component instead of growing a
+ * second month grid. See `CourseCallsSection`.
  */
 export function MemberCallsCalendar({
   getCallHref = (publicId) => `/i/video-calls/${publicId}`,