@tribe-nest/forge 3.50.0 → 3.52.0

package/src/ui/styled/CohortConfirmation.tsx

@@ -0,0 +1,259 @@
+import { AlertTriangle, ArrowRight, CalendarDays, Mail } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+import {
+  ConfirmationStage,
+  ConfirmationCard,
+  CheckSeal,
+  WarnSeal,
+  Perforation,
+  ConfirmationRow,
+  ConfirmationLostCheckout,
+  alpha,
+} from "./Confirmation";
+import { useForgeT } from "../../i18n";
+import { useCohortEnrolmentFinalize } from "../../data/queries/useCohortEnrolment";
+import { useCohortPage } from "../../data/queries/useCohortPage";
+import { useBookingSecret } from "../headless/booking/useBookingSecret";
+
+export interface CohortConfirmationProps {
+  cohortId: string;
+  bookingId?: string;
+  /** Formats a monetary amount for display. Defaults to a plain USD-style `$0.00`. */
+  formatAmount?: (n: number, currency?: string) => string;
+  /** Where the "browse more" action links. */
+  explorePath?: string;
+  /**
+   * Where "start over" goes when this browser has no credential for the
+   * booking, i.e. back to the cohort to enrol again. Defaults to
+   * `/i/cohorts/:cohortId`.
+   */
+  restartPath?: string;
+}
+
+/**
+ * The page a cohort buyer lands on after paying.
+ *
+ * The pair to `CohortCheckout`. Both had to exist together: the checkout's
+ * Stripe `return_url` points here, so shipping the buy control without this
+ * would have sent every paying buyer to a 404 holding a charge and no
+ * confirmation.
+ *
+ * The booking's credential is read from sessionStorage rather than the URL. It
+ * was stashed there by the checkout before the redirect, because a secret in a
+ * return URL reaches history, referrers and anything the buyer pastes.
+ */
+export function CohortConfirmation({
+  cohortId,
+  bookingId,
+  formatAmount,
+  explorePath = "/i/courses",
+  restartPath,
+}: CohortConfirmationProps) {
+  const theme = useForgeTheme();
+  const t = useForgeT();
+  const fmt = useAmountFormatter(formatAmount);
+  // `resolved` gates the finalise: storage can only be read on the client, so
+  // firing before then would send the call without a secret it actually has and
+  // get a 404.
+  const { secret, resolved, isMissing } = useBookingSecret(bookingId);
+  const { data, isLoading, error } = useCohortEnrolmentFinalize(
+    cohortId,
+    resolved ? bookingId : undefined,
+    secret ?? undefined,
+  );
+  const { data: page } = useCohortPage(cohortId);
+
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+  const cohort = page?.data?.cohort;
+  const course = page?.data?.course;
+
+  if (!resolved || isLoading) {
+    return (
+      <ConfirmationStage>
+        <Loading label={t("forge.cohort_confirmation.loading")} />
+      </ConfirmationStage>
+    );
+  }
+
+  if (error || !data) {
+    // A booking with no credential in THIS browser is indistinguishable
+    // server-side from a stranger holding a leaked id, so it 404s on purpose.
+    // Explain that rather than implying the enrolment never existed.
+    if (isMissing) {
+      return (
+        <ConfirmationStage>
+          <ConfirmationLostCheckout
+            title={t("forge.cohort_confirmation.lost_title")}
+            body={t("forge.cohort_confirmation.lost_body")}
+            restartPath={restartPath ?? `/i/cohorts/${cohortId}`}
+            restartLabel={t("forge.cohort_confirmation.lost_restart")}
+          />
+        </ConfirmationStage>
+      );
+    }
+    return (
+      <ConfirmationStage>
+        <p style={{ color: text }}>{t("forge.cohort_confirmation.not_found")}</p>
+      </ConfirmationStage>
+    );
+  }
+
+  const confirmed = data.status === "confirmed";
+
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard>
+        <div style={{ padding: "38px 30px 26px", textAlign: "center" }}>
+          {confirmed ? <CheckSeal /> : <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />}
+          <p
+            className="cf-rise"
+            style={{
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
+              color: confirmed ? primary : "#f59e0b",
+              animationDelay: "0.15s",
+            }}
+          >
+            {confirmed
+              ? t("forge.cohort_confirmation.eyebrow_confirmed")
+              : t("forge.cohort_confirmation.eyebrow_action_needed")}
+          </p>
+          <h1
+            className="cf-rise"
+            style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}
+          >
+            {confirmed
+              ? t("forge.cohort_confirmation.title_confirmed")
+              : t("forge.cohort_confirmation.title_incomplete")}
+          </h1>
+          <p
+            className="cf-rise"
+            style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}
+          >
+            {confirmed
+              ? data.firstName
+                ? t("forge.cohort_confirmation.body_confirmed", { first_name: data.firstName })
+                : t("forge.cohort_confirmation.body_confirmed_no_name")
+              : t("forge.cohort_confirmation.body_incomplete", { status: data.status })}
+          </p>
+        </div>
+
+        {cohort && (
+          <div className="cf-rise" style={{ padding: "0 30px 24px", animationDelay: "0.36s" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                borderRadius: theme.cornerRadius,
+                border: `1px solid ${alpha(primary, 0.18)}`,
+                background: alpha(primary, 0.04),
+                padding: 12,
+              }}
+            >
+              <div
+                style={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: theme.cornerRadius,
+                  background: alpha(primary, 0.12),
+                  display: "grid",
+                  placeItems: "center",
+                  flexShrink: 0,
+                }}
+              >
+                <CalendarDays size={26} color={primary} />
+              </div>
+              <div style={{ minWidth: 0 }}>
+                <div style={{ fontSize: 16, fontWeight: 800 }}>{course?.title ?? cohort.title}</div>
+                <div style={{ fontSize: 13, color: alpha(text, 0.6) }}>{cohort.title}</div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <Perforation />
+
+        <div className="cf-rise" style={{ padding: "26px 30px 8px", animationDelay: "0.44s" }}>
+          {confirmed && (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                fontSize: 14,
+                color: alpha(text, 0.8),
+                background: alpha(primary, 0.05),
+                border: `1px solid ${alpha(primary, 0.16)}`,
+                borderRadius: theme.cornerRadius,
+                padding: "12px 14px",
+                marginBottom: 16,
+              }}
+            >
+              <Mail size={16} color={primary} style={{ marginTop: 2, flexShrink: 0 }} />
+              <span style={{ lineHeight: 1.5 }}>
+                {t("forge.cohort_confirmation.emailed", { email: data.email ?? "" })}
+              </span>
+            </div>
+          )}
+          <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 12, columnGap: 16, margin: 0 }}>
+            <ConfirmationRow
+              label={t("forge.cohort_confirmation.row_student")}
+              value={`${data.firstName} ${data.lastName}`.trim() || t("forge.cohort_confirmation.not_given")}
+            />
+            <ConfirmationRow
+              label={t("forge.cohort_confirmation.row_reference")}
+              value={`#${data.id.slice(0, 8).toUpperCase()}`}
+              mono
+            />
+            {/*
+              WHAT WAS ACTUALLY TAKEN, which on an instalment plan is the first
+              payment and not the plan's total. Reading the booking's charged
+              amount rather than the plan keeps this honest either way.
+            */}
+            <ConfirmationRow
+              label={t("forge.cohort_confirmation.row_paid")}
+              value={
+                Number(data.totalAmountInChargedCurrency ?? data.totalAmount) > 0
+                  ? data.totalAmountInChargedCurrency
+                    ? fmt(Number(data.totalAmountInChargedCurrency), data.chargedCurrency || undefined)
+                    : fmt(Number(data.totalAmount))
+                  : t("forge.cohort_confirmation.free")
+              }
+              accent
+              strong
+            />
+          </dl>
+        </div>
+
+        <div className="cf-rise" style={{ padding: "20px 30px 30px", animationDelay: "0.52s" }}>
+          <a
+            href={explorePath}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "13px 18px",
+              borderRadius: theme.cornerRadius,
+              background: primary,
+              color: readableTextOn(primary),
+              fontWeight: 700,
+              textDecoration: "none",
+            }}
+          >
+            {t("forge.cohort_confirmation.explore")} <ArrowRight size={16} />
+          </a>
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}

package/src/ui/styled/CohortPage.tsx

@@ -2,6 +2,7 @@ import { useCohortPage } from "../../data/queries/useCohortPage";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { CourseCallsSection } from "./CourseCallsSection";
+import { CohortCheckout } from "./CohortCheckout";
 import { Loading } from "./Loading";
 
 export interface CohortPageProps {
@@ -42,6 +43,21 @@ export function CohortPage({ cohortId }: CohortPageProps) {
       {(cohort.startDate || cohort.endDate) && <p style={{ opacity: 0.7, marginBottom: 16 }}>{dateLabel}</p>}
       {cohort.description && <p style={{ marginBottom: 24, lineHeight: 1.6 }}>{cohort.description}</p>}
 
+      {/*
+        THE WAY IN. Until 2026-09-07 this page described a cohort and gave a
+        reader no way to buy a seat on it: the checkout existed on the backend
+        and nothing on any storefront called it, so a creator could build a
+        cohort, price it and publish it with no way to sell it.
+
+        It renders NOTHING when the cohort has no pricing plans, which is what
+        keeps a not-yet-priced cohort from showing a dead button, and nothing
+        for a student who is already enrolled would be wrong to see - the
+        backend refuses a second seat on the same cohort for the same email.
+      */}
+      <div style={{ marginBottom: 32 }}>
+        <CohortCheckout cohortId={cohort.id} />
+      </div>
+
       {course && (
         <section style={{ marginBottom: 24 }}>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 6 }}>{course.title}</h2>

package/src/ui/styled/CourseDetail.tsx

@@ -62,7 +62,7 @@ export function CourseDetail({
 
   return (
     <div
-      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      className={`fg:pb-32 fg:md:pb-0${className ? ` ${className}` : ""}`}
       style={{ maxWidth: 1040, margin: "0 auto", color: tokens.text, ...style }}
     >
       {introVideo ? (
@@ -81,8 +81,8 @@ export function CourseDetail({
         )
       )}
 
-      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
-        <div className="flex-1 min-w-0">
+      <div className="fg:flex fg:flex-col fg:md:flex-row fg:md:items-start fg:gap-6 fg:mt-6">
+        <div className="fg:flex-1 fg:min-w-0">
           <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: tokens.headingFontFamily }}>{course.title}</h1>
 
           {course.description && (
@@ -127,7 +127,7 @@ export function CourseDetail({
         </div>
 
         <aside
-          className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
+          className="fg:fixed fg:bottom-0 fg:left-0 fg:right-0 fg:z-40 fg:w-full fg:md:sticky fg:md:top-4 fg:md:bottom-auto fg:md:left-auto fg:md:right-auto fg:md:w-[300px] fg:md:shrink-0 fg:flex fg:flex-col fg:gap-3"
           style={{
             padding: 16,
             border: `1px solid ${tokens.primary}80`,

package/src/ui/styled/EventDetail.tsx

@@ -81,7 +81,7 @@ export function EventDetail({
 
   return (
     <div
-      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      className={`fg:pb-32 fg:md:pb-0${className ? ` ${className}` : ""}`}
       style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
     >
       {cover && (
@@ -98,8 +98,8 @@ export function EventDetail({
         />
       )}
 
-      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
-        <div className="flex-1 min-w-0">
+      <div className="fg:flex fg:flex-col fg:md:flex-row fg:md:items-start fg:gap-6 fg:mt-6">
+        <div className="fg:flex-1 fg:min-w-0">
           <div style={{ marginBottom: 20 }}>
             <EventCountdown dateTime={event.dateTime} timezone={event.timezone} />
           </div>
@@ -152,7 +152,7 @@ export function EventDetail({
             which is the shape most presales are announced in. */}
         {(event.tickets.length > 0 || presale.visible) && (
           <aside
-            className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
+            className="fg:fixed fg:bottom-0 fg:left-0 fg:right-0 fg:z-40 fg:w-full fg:md:sticky fg:md:top-4 fg:md:bottom-auto fg:md:left-auto fg:md:right-auto fg:md:w-[300px] fg:md:shrink-0 fg:flex fg:flex-col fg:gap-3"
             style={{
               padding: 16,
               border: `1px solid ${t.primary}80`,

package/src/ui/styled/PaystackPayButton.tsx

@@ -51,7 +51,7 @@ export function PaystackPayButton({ onPay, amount, currency, label, disabled, cl
           setIsOpening(false);
         }
       }}
-      className={className ?? "w-full px-4 py-3 font-semibold"}
+      className={className ?? "fg:w-full fg:px-4 fg:py-3 fg:font-semibold"}
       style={{
         backgroundColor: theme.colors.primary,
         color: readableTextOn(theme.colors.primary),

package/src/ui/styled/PodcastEpisode.tsx

@@ -99,7 +99,7 @@ export function PodcastEpisode({
       {/* Show notes. `rich-text` = shared baseline content styles (WYSIWYG
           with the editor), bundled with Forge via the ./rich-text.css import. */}
       <div
-        className="rich-text"
+        className="fg:rich-text"
         style={{ lineHeight: 1.7, marginTop: 8, borderTop: `1px solid ${border}`, paddingTop: 18 }}
         dangerouslySetInnerHTML={{ __html: episode.content }}
       />

package/src/ui/styled/ProductDetail.tsx

@@ -246,7 +246,7 @@ function StandardDetail({
   return (
     <>
       <div
-        className={`grid grid-cols-1 md:grid-cols-2 gap-8${className ? ` ${className}` : ""}`}
+        className={`fg:grid fg:grid-cols-1 fg:md:grid-cols-2 fg:gap-8${className ? ` ${className}` : ""}`}
         style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
       >
         {/* Gallery */}
@@ -469,7 +469,7 @@ function StandardDetail({
       {/* Mobile sticky Add-to-cart (only when the inline one is scrolled past). */}
       {showSticky && !isCartOpen && (
         <div
-          className="md:hidden"
+          className="fg:md:hidden"
           style={{
             position: "fixed",
             bottom: 0,
@@ -583,10 +583,10 @@ function MusicDetail({
       <div style={{ border, borderRadius: t.cornerRadius }}>
         {/* Header */}
         <div style={{ padding: 24, borderBottom: border }}>
-          <div className="flex flex-col md:flex-row" style={{ gap: 24 }}>
+          <div className="fg:flex fg:flex-col fg:md:flex-row" style={{ gap: 24 }}>
             {/* Cover + play overlay */}
             <div style={{ position: "relative", flexShrink: 0 }}>
-              <div className="w-full md:w-64 md:h-64" style={{ aspectRatio: "1 / 1", borderRadius: t.cornerRadius, overflow: "hidden", background: t.primary }}>
+              <div className="fg:w-full fg:md:w-64 fg:md:h-64" style={{ aspectRatio: "1 / 1", borderRadius: t.cornerRadius, overflow: "hidden", background: t.primary }}>
                 {cover ? (
                   <img src={cover} alt={product.title} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                 ) : (

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

@@ -0,0 +1,232 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+
+/**
+ * What is under test is the WIRING, and specifically the two things a cohort
+ * checkout gets wrong when nobody pins them.
+ *
+ *  1. THE PLAN IS THE PRICE, so the buyer chooses one before anything else and
+ *     the creator's default is preselected. Guessing the plan would charge a
+ *     buyer for a cadence they did not pick.
+ *  2. THE PAYMENT STEP SHOWS WHAT IS TAKEN TODAY, not the plan total. On a
+ *     three-payment plan those are different numbers, and showing the total
+ *     tells the buyer they are about to be charged three times what they will
+ *     be.
+ *
+ * The modal, the plan cards and the payment step are all driven from
+ * `useCohortCheckout`, so the hook is mocked and the component is exercised.
+ */
+type Plan = {
+  id: string;
+  title: string;
+  currency: string;
+  totalAmount: string | number;
+  installmentCount: number;
+  intervalDays: number;
+  isDefault: boolean;
+};
+
+const PLANS: Plan[] = [
+  {
+    id: "p1",
+    title: "Pay in full",
+    currency: "USD",
+    totalAmount: 600,
+    installmentCount: 1,
+    intervalDays: 0,
+    isDefault: true,
+  },
+  {
+    id: "p2",
+    title: "Three payments",
+    currency: "USD",
+    totalAmount: 660,
+    installmentCount: 3,
+    intervalDays: 30,
+    isDefault: false,
+  },
+];
+
+const state: Record<string, unknown> = {};
+const choosePlan = vi.fn();
+const setStep = vi.fn();
+const enrol = vi.fn();
+
+vi.mock("../../headless/cohort/useCohortCheckout", () => ({
+  useCohortCheckout: () => state,
+}));
+
+/*
+ * Both reached through `useAmountFormatter`, which resolves the viewer's
+ * currency. Neither is what this file is about, and standing real providers up
+ * here would be scaffolding around the two assertions that matter.
+ */
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => ({ isAuthenticated: false, isInitialized: true, user: null }),
+}));
+/*
+ * The NARROW seam, deliberately. Mocking `ForgeProvider` itself also replaced
+ * `useForge` for every other spec sharing this worker, and took
+ * `paymentFlowReturnUrl.spec` down with it. `useSiteConfig` is the only thing
+ * the formatter actually needs from that direction.
+ */
+vi.mock("../../../data/queries/useWebsite", () => ({
+  useSiteConfig: () => ({ data: { currency: "USD" }, isLoading: false }),
+}));
+
+const { CohortCheckout } = await import("../CohortCheckout");
+
+const base = () => ({
+  cohort: { id: "c1", title: "Spring cohort" },
+  course: { id: "co1", title: "The programme" },
+  isLoading: false,
+  plans: PLANS,
+  selectedPlan: PLANS[0],
+  planId: "p1",
+  choosePlan,
+  step: "plan",
+  setStep,
+  firstName: "",
+  setFirstName: vi.fn(),
+  lastName: "",
+  setLastName: vi.fn(),
+  email: "",
+  setEmail: vi.fn(),
+  questionnaire: undefined,
+  setQuestionnaire: vi.fn(),
+  enrol,
+  clientSecret: undefined,
+  isPaystack: false,
+  canOpenPaystack: false,
+  openPaystackCheckout: vi.fn(),
+  totalAmount: 600,
+  installmentAmount: undefined,
+  installmentCount: 1,
+  setupRequiresAction: false,
+  setupClientSecret: null,
+  taxQuote: null,
+  returnUrl: "",
+  isProcessing: false,
+  error: null,
+});
+
+/** The provider takes no default, so every spec here supplies one. */
+const THEME = {
+  colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" },
+  cornerRadius: 8,
+};
+
+/**
+ * A REAL query client rather than a fourth mock. `useAmountFormatter` reaches a
+ * currency query, and stubbing every provider between here and it would leave a
+ * spec that passes because of its scaffolding. No retries, so a query that does
+ * fire fails fast instead of holding the test open.
+ */
+const wrap = (node: React.ReactNode) => (
+  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+    <ForgeThemeProvider theme={THEME}>{node}</ForgeThemeProvider>
+  </QueryClientProvider>
+);
+
+/**
+ * `formatAmount` is supplied rather than left to `useAmountFormatter`, which
+ * resolves the viewer's currency through a query this spec has no server for.
+ * What is under test is WHICH figure is shown, not how it is punctuated.
+ */
+const fmt = (n: number) => `$${n}`;
+
+const draw = () => render(wrap(<CohortCheckout cohortId="c1" formatAmount={fmt} />));
+
+const open = () => fireEvent.click(screen.getByText("Enrol"));
+
+beforeEach(() => {
+  Object.keys(state).forEach((k) => delete state[k]);
+  Object.assign(state, base());
+  choosePlan.mockClear();
+  setStep.mockClear();
+  enrol.mockClear();
+});
+
+afterEach(cleanup);
+
+describe("CohortCheckout", () => {
+  it("renders nothing at all when the cohort has no pricing plans", () => {
+    // Not an error state: a cohort that is not priced yet. A dead "Enrol"
+    // button would be worse than no button.
+    Object.assign(state, { plans: [], selectedPlan: undefined });
+    const { queryByText } = draw();
+    // The theme provider injects its own :root style block, so the absence to
+    // assert is the TRIGGER, not an empty container.
+    expect(queryByText("Enrol")).toBeNull();
+  });
+
+  it("opens on plan choice, and offers every plan the creator priced", () => {
+    draw();
+    open();
+    expect(screen.getByText("Choose a plan")).toBeTruthy();
+    // "Pay in full" is both the plan's TITLE and, for a one-payment plan, its
+    // terms line, so it legitimately appears twice on the same card.
+    expect(screen.getAllByText("Pay in full").length).toBeGreaterThan(0);
+    expect(screen.getByText("Three payments")).toBeTruthy();
+  });
+
+  it("spells out an instalment plan's terms rather than only its total", () => {
+    draw();
+    open();
+    // The per-payment figure and the cadence, because "660" alone does not tell
+    // a buyer what leaves their account or when.
+    expect(screen.getByText(/3 payments of/)).toBeTruthy();
+    expect(screen.getByText(/every 30 days/)).toBeTruthy();
+  });
+
+  it("passes the chosen plan up rather than assuming one", () => {
+    draw();
+    open();
+    fireEvent.click(screen.getByText("Three payments"));
+    expect(choosePlan).toHaveBeenCalledWith("p2");
+  });
+
+  it("shows what is taken TODAY on an instalment plan, not the plan total", () => {
+    Object.assign(state, {
+      step: "payment",
+      selectedPlan: PLANS[1],
+      planId: "p2",
+      totalAmount: 660,
+      installmentAmount: 220,
+      installmentCount: 3,
+    });
+    const { baseElement } = draw();
+    open();
+
+    expect(screen.getByText("Due now")).toBeTruthy();
+    // 220 is the charge; 660 is the commitment. Both appear, and the figure
+    // beside "Due now" is the one about to leave the buyer's card. Read off the
+    // whole dialog because the formatter splits the amount across nodes.
+    expect(baseElement.textContent).toContain("220");
+    expect(baseElement.textContent).toContain("660");
+    expect(screen.getByText(/3 payments in total/)).toBeTruthy();
+  });
+
+  it("asks for the off-session consent when Stripe needs it confirmed", () => {
+    // Instalments 2..n are charged months later by a cron with nobody present.
+    // A checkout that skips this takes payment one and silently fails the rest.
+    const renderPayment = vi.fn(() => <div>card form</div>);
+    Object.assign(state, {
+      step: "payment",
+      selectedPlan: PLANS[1],
+      installmentCount: 3,
+      installmentAmount: 220,
+      setupRequiresAction: true,
+      setupClientSecret: "seti_123_secret",
+    });
+    render(wrap(<CohortCheckout cohortId="c1" formatAmount={fmt} renderPayment={renderPayment} />));
+    open();
+
+    expect(screen.getByText(/Authorise the later payments/)).toBeTruthy();
+    expect(renderPayment).toHaveBeenCalledWith(expect.objectContaining({ clientSecret: "seti_123_secret" }));
+  });
+});

package/src/ui/styled/_tests/packagedCssIsCurrent.spec.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { execFileSync } from "node:child_process";
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * The shipped stylesheet must match the components that need it.
+ *
+ * Forge packages its own Tailwind output (`forge-utilities.css`) because a
+ * published site cannot scan Forge's source: the build sandbox hoists forge to
+ * a workspace-root node_modules, the starter's `@source` paths miss, and
+ * Tailwind skips a missing `@source` SILENTLY. So the packaged file is the only
+ * thing standing between a Forge component and an unstyled published page.
+ *
+ * Which makes staleness invisible in exactly the same way. Add a class to a
+ * component, forget `npm run build:css`, and it works locally for ever (the
+ * monorepo `@source` reaches Forge's source) while every published site renders
+ * without it. This runs the build and fails if the committed file would change.
+ */
+describe("Forge's packaged CSS", () => {
+  it("is up to date with the components that use it", () => {
+    const root = join(__dirname, "..", "..", "..", "..");
+    const cssPath = join(root, "src", "ui", "styled", "forge-utilities.css");
+    const before = readFileSync(cssPath, "utf-8");
+
+    try {
+      execFileSync("npm", ["run", "build:css"], { cwd: root, stdio: "pipe" });
+    } catch (err) {
+      throw new Error(`build:css failed, so the packaged CSS cannot be verified: ${String(err)}`);
+    }
+
+    const after = readFileSync(cssPath, "utf-8");
+    // Put the committed file back before asserting, so a failing run does not
+    // leave a rebuilt artifact in the tree and turn one red test into a dirty
+    // working copy.
+    if (before !== after) writeFileSync(cssPath, before);
+
+    expect(
+      after === before,
+      "forge-utilities.css is stale. A class was added to a component without rebuilding, so it is missing from every PUBLISHED site while working locally. Run `npm run build:css` in packages/forge and commit the result.",
+    ).toBe(true);
+  });
+});