@tribe-nest/forge 3.29.0 → 3.34.0

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

@@ -0,0 +1,166 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { MyBooking } from "../../../data/queries/useMyBookings";
+import { AccountDashboard } from "../AccountDashboard";
+
+/**
+ * The account page's way INTO a coaching video call.
+ *
+ * The room, the hooks, the credential endpoint and `BookingCallProvider` all
+ * shipped, and on a code website none of it was reachable: the row for a
+ * video session printed "Video call on this site" and offered nothing to
+ * press, while admin's help text told coaches the client joins "from their
+ * account on your site". This pins the control the row now draws.
+ *
+ * Rendered through `react-dom/server`: no DOM, no effects, so the bookings
+ * query is SEEDED into the react-query cache. That keeps the real
+ * `useMyBookings` in the path, and a rename of its query key fails here. The
+ * call itself is behind a click and a `React.lazy`, so nothing here ever
+ * touches the media SDK: the spec is about the CONTROL, and it proves the SDK
+ * is not needed to decide whether to draw it.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+const MINUTE = 60_000;
+
+const member = {
+  id: ACCOUNT_ID,
+  email: "client@example.com",
+  firstName: "Client",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  membership: null,
+};
+
+const booking = (overrides: Partial<MyBooking> = {}): MyBooking => {
+  const start = new Date(Date.now() + 5 * MINUTE);
+  const end = new Date(start.getTime() + 60 * MINUTE);
+  return {
+    id: "booking-1",
+    status: "confirmed",
+    email: "client@example.com",
+    firstName: "Client",
+    lastName: "Person",
+    totalAmount: 40,
+    totalAmountInChargedCurrency: null,
+    currency: "USD",
+    chargedCurrency: null,
+    refundState: null,
+    refundedAmountCents: null,
+    selfCancelledAt: null,
+    cancellationOutcome: null,
+    createdAt: "2026-01-01T00:00:00.000Z",
+    coachingBookingSlotId: "slot-1",
+    sessionStartTime: start.toISOString(),
+    sessionEndTime: end.toISOString(),
+    coachingProductId: "product-1",
+    coachingProductSlug: "video-session",
+    coachingProductTitle: "Video session",
+    coachingProductTimezone: null,
+    coachingProductDurationMinutes: 60,
+    cancellation: {
+      policy: null,
+      cutoffHours: null,
+      terms: null,
+      description: null,
+      canCancel: false,
+      reason: null,
+      deadline: null,
+    },
+    location: { type: "video" } as MyBooking["location"],
+    canReschedule: false,
+    rescheduleReason: null,
+    calendarUrl: null,
+    calendarWebcalUrl: null,
+    ...overrides,
+  };
+};
+
+function render(rows: MyBooking[]): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  queryClient.setQueryData(["my-bookings", ACCOUNT_ID, PROFILE_ID, 1, 20], {
+    data: rows,
+    total: rows.length,
+    page: 1,
+    limit: 20,
+  });
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountDashboard tab="bookings" onNavigateMembership={() => {}} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("AccountDashboard: the way into a coaching video call", () => {
+  it("REGRESSION: offers Join for a video session whose room is open", () => {
+    // Starts in 5 minutes: inside the 15-minutes-early window.
+    const html = render([booking()]);
+
+    expect(html).toContain("Video session");
+    expect(html).toContain("Join video call");
+    // The line still says where the session is; the control is in addition.
+    expect(html).toContain("Video call on this site");
+  });
+
+  it("says when the room opens, rather than offering a Join that would 409", () => {
+    const start = new Date(Date.now() + 3 * 60 * MINUTE);
+    const html = render([
+      booking({
+        sessionStartTime: start.toISOString(),
+        sessionEndTime: new Date(start.getTime() + 60 * MINUTE).toISOString(),
+      }),
+    ]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).toContain("the room opens");
+  });
+
+  it("says the room has closed once the window is over", () => {
+    const start = new Date(Date.now() - 5 * 60 * MINUTE);
+    const html = render([
+      booking({
+        sessionStartTime: start.toISOString(),
+        sessionEndTime: new Date(start.getTime() + 60 * MINUTE).toISOString(),
+      }),
+    ]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).toContain("room has closed");
+  });
+
+  it("draws nothing for a session that is not a video call", () => {
+    const html = render([
+      booking({ location: { type: "online", url: "https://meet.example.com/x" } as MyBooking["location"] }),
+    ]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).not.toContain("the room opens");
+    expect(html).toContain("https://meet.example.com/x");
+  });
+
+  it("draws nothing for a cancelled session, whose room the server withholds", () => {
+    const html = render([booking({ status: "canceled", selfCancelledAt: "2026-01-02T00:00:00.000Z", location: null })]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).not.toContain("the room opens");
+  });
+});

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

@@ -0,0 +1,134 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { communityKeys, type CommunitySpace } from "../../../data/queries/useCommunity";
+import { AccountDashboard } from "../AccountDashboard";
+
+/**
+ * The account page's way into the members corner.
+ *
+ * Before this, a signed-in member landed on the membership card and the only
+ * doors on it led back to billing: change the plan, cancel it, fix the card.
+ * The community they were paying for was reachable only by typing the URL.
+ *
+ * The gate is the server's own answer. `/public/community/spaces` returns the
+ * open spaces PLUS the ones gated to a tier the caller holds, so the list being
+ * empty is the server saying "there is nothing here you can open". Drawing the
+ * link anyway would walk a member into a bounce, which is why the empty case is
+ * asserted as hard as the happy one.
+ *
+ * Rendered through `react-dom/server`: no DOM, no effects, so the spaces query
+ * is SEEDED into the react-query cache rather than mocked. That keeps the real
+ * `useCommunitySpaces` in the path, and a rename of its query key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const space = (overrides: Partial<CommunitySpace> = {}): CommunitySpace => ({
+  id: "space-1",
+  profileId: PROFILE_ID,
+  name: "Backstage",
+  slug: "backstage",
+  description: null,
+  type: "feed",
+  courseId: null,
+  order: 0,
+  archivedAt: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+  tiers: [],
+  ...overrides,
+});
+
+/** A signed-in member holding a paid tier that renews. */
+const member = {
+  id: "account-1",
+  email: "fan@example.com",
+  firstName: "Fan",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  membership: {
+    id: "membership-1",
+    membershipTierId: "tier-1",
+    endDate: "2026-12-01T00:00:00.000Z",
+    status: "active",
+    startDate: "2026-01-01T00:00:00.000Z",
+    subscriptionAmount: 10,
+    subscriptionCurrency: "USD",
+    billingCycle: "month",
+    membershipTier: { id: "tier-1", name: "Inner Circle", benefits: [] },
+  },
+};
+
+/**
+ * The membership tab as a Forge code website draws it.
+ *
+ * `spaces === null` stands for the query never having answered (the member has
+ * no accessible spaces cached), which is the state a non-member sits in.
+ */
+function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: () => void }): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.spaces) queryClient.setQueryData(communityKeys.spaces(PROFILE_ID), opts.spaces);
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountDashboard
+              tab="membership"
+              onNavigateMembership={() => {}}
+              onNavigateCommunity={opts.onNavigateCommunity}
+            />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("AccountDashboard: the way into the members corner", () => {
+  it("REGRESSION: offers the community to a member who has a space to open", () => {
+    // The gap this closes. Without it the membership card's only exits are
+    // Change and Cancel, and the community is unreachable from the account page.
+    const html = render({ spaces: [space()], onNavigateCommunity: () => {} });
+
+    expect(html).toContain("Community spaces");
+  });
+
+  it("REGRESSION: says nothing when the member can open no space", () => {
+    // A link here would promise a door that is locked: the server returned no
+    // space this account may enter, so the honest account page is silent.
+    const html = render({ spaces: [], onNavigateCommunity: () => {} });
+
+    expect(html).not.toContain("Community spaces");
+    // The billing actions are untouched, so this is the entry point missing and
+    // not the whole card failing to draw.
+    expect(html).toContain("Change");
+  });
+
+  it("draws nothing when the host site has no community route to send anyone to", () => {
+    // `onNavigateCommunity` is optional. A site that leaves it out gets no
+    // button, even with spaces in the cache, rather than a dead one.
+    const html = render({ spaces: [space()] });
+
+    expect(html).not.toContain("Community spaces");
+  });
+
+  it("stays quiet while the spaces query has not answered yet", () => {
+    // First paint has no cached answer. Guessing "yes" here would flash a link
+    // and then withdraw it from members who never had access.
+    const html = render({ spaces: null, onNavigateCommunity: () => {} });
+
+    expect(html).not.toContain("Community spaces");
+  });
+});

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

@@ -0,0 +1,125 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { BroadcastPassValidation } from "../broadcast/BroadcastPassValidation";
+import { EndedBroadcast } from "../broadcast/EndedBroadcast";
+import type { ILiveBroadcast } from "../../../types/models";
+
+/**
+ * The paywall in front of a live broadcast, and the screen that replaces it once
+ * the stream is over.
+ *
+ * Rendered through `react-dom/server`, which needs no DOM. Effects never fire
+ * under `renderToStaticMarkup`, so the props are the only data source and
+ * nothing reaches the network. Both components are presentational by design
+ * (their data hooks live one level up in `BroadcastWatch`), which is exactly
+ * what makes this possible.
+ *
+ * These are the REAL components a Forge code site renders, and the client app's
+ * copies are twins driven by the same `broadcastState` rules, so what is
+ * asserted here about WHAT IS SAID holds on both rendering stacks.
+ */
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function broadcast(overrides: Partial<ILiveBroadcast> = {}): ILiveBroadcast {
+  return {
+    id: "b1",
+    title: "Sunday Session",
+    createdAt: "2026-08-01T00:00:00.000Z",
+    updatedAt: "2026-08-01T00:00:00.000Z",
+    profileId: "p1",
+    streamTemplateId: "st1",
+    egressId: "e1",
+    events: [],
+    event: { id: "ev1", title: "Sunday Session", description: "", isPaid: true },
+    liveUrl: "https://cdn.example.com/secret-playlist.m3u8",
+    thumbnailUrl: "https://cdn.example.com/thumb.jpg",
+    ...overrides,
+  } as ILiveBroadcast;
+}
+
+const render = (node: React.ReactNode) =>
+  renderToStaticMarkup(<ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>);
+
+describe("BroadcastPassValidation", () => {
+  const gate = (props: Partial<React.ComponentProps<typeof BroadcastPassValidation>> = {}) =>
+    render(<BroadcastPassValidation broadcast={broadcast()} onValidate={() => {}} {...props} />);
+
+  it("REGRESSION: leaks NO playback url while the viewer is still outside the paywall", () => {
+    // The whole point of the gate. A page that renders the ticket box and the
+    // stream url in the same document has not gated anything: the url is two
+    // keystrokes away in the page source.
+    const html = gate();
+    expect(html).not.toContain("secret-playlist.m3u8");
+    expect(html).not.toContain("<video");
+  });
+
+  it("asks for the ticket id, and says what one looks like", () => {
+    const html = gate();
+    expect(html).toContain("Enter your ticket ID to join the broadcast (TN-XXXXXXX)");
+    expect(html).toContain('data-testid="broadcast-ticket-code"');
+    expect(html).toContain("Join Broadcast");
+  });
+
+  it("still shows the title and thumbnail, which are already public on the list", () => {
+    const html = gate();
+    expect(html).toContain("Sunday Session");
+    expect(html).toContain("thumb.jpg");
+  });
+
+  it("REGRESSION: keeps Join disabled until something is typed", () => {
+    // An enabled button on an empty box sends a blank code, which the server
+    // refuses, and the viewer reads the refusal as "my ticket is not valid".
+    expect(gate()).toContain("disabled");
+  });
+
+  it("says the code is in flight rather than leaving the button looking dead", () => {
+    const html = gate({ isValidating: true });
+    expect(html).toContain("Validating");
+    expect(html).toContain("disabled");
+  });
+
+  it("shows a refusal to the viewer, and names no other event", () => {
+    const html = gate({ error: "That ticket is not valid for this broadcast." });
+    expect(html).toContain("That ticket is not valid for this broadcast.");
+    expect(html).toContain('role="alert"');
+    expect(html).toContain('aria-invalid="true"');
+  });
+
+  it("offers a way to BUY when the caller supplies one, so the gate is not a dead end", () => {
+    const html = gate({ buyTickets: <div data-testid="buy">Buy tickets</div> });
+    expect(html).toContain("OR");
+    expect(html).toContain('data-testid="buy"');
+  });
+
+  it("shows no OR divider when there is nothing to buy", () => {
+    expect(gate()).not.toContain(">OR<");
+  });
+});
+
+describe("EndedBroadcast", () => {
+  const html = () => render(<EndedBroadcast broadcast={broadcast({ endedAt: "2026-08-18T11:00:00.000Z" })} />);
+
+  it("says the broadcast ended, over the thumbnail the viewer recognises", () => {
+    expect(html()).toContain("Broadcast Ended");
+    expect(html()).toContain("Sunday Session");
+  });
+
+  it("REGRESSION: keeps the two INSTRUCTIONS visible, not behind the ? ", () => {
+    // A host on a bad line drops and comes back. A viewer who is told nothing
+    // assumes the show is over and leaves, so what to DO stays on the page.
+    const markup = html();
+    expect(markup).toContain("keep refreshing this page");
+    expect(markup).toContain("Close the broadcast page");
+  });
+
+  it("puts the EXPLANATION behind the ?, per the house design law", () => {
+    const markup = html();
+    // The disclosure exists, named after what it explains rather than "help".
+    expect(markup).toContain('aria-label="Why did the broadcast end?"');
+    expect(markup).toContain('aria-expanded="false"');
+    // ...and its body is not on the page until it is opened.
+    expect(markup).not.toContain("unstable internet connection");
+  });
+});