@tribe-nest/forge 3.14.0 → 3.19.0

package/src/ui/styled/CourseAccess.tsx

@@ -1,85 +1,216 @@
-import { useRef, useState } from "react";
-import { useCourseAccess, useUpdateCourseProgress } from "../../data/queries/useCourseAccess";
-import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import type { CSSProperties } from "react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useCourseClassroom, type UseCourseClassroomOptions } from "../headless/course/useCourseClassroom";
 import { Loading } from "./Loading";
 
-export interface CourseAccessProps {
+export interface CourseAccessProps extends UseCourseClassroomOptions {
   /** Course access id (route param). */
   accessId: string;
+  /** SPA navigation adapter for the sign-in / secure-access links. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
 }
 
-/** Enrolled course player — module/lesson sidebar, video progress tracking. Built on `useCourseAccess` + `useUpdateCourseProgress`. */
-export function CourseAccess({ accessId }: CourseAccessProps) {
-  const theme = useForgeTheme();
-  const { data, isLoading, error } = useCourseAccess(accessId);
-  const updateProgress = useUpdateCourseProgress(accessId);
-  const lastSent = useRef(0);
+/**
+ * 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,
+ *     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
+ *     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
+ *     normally, with a dismissible note offering to put it behind an account.
+ */
+export function CourseAccess({
+  accessId,
+  navigate,
+  className,
+  style,
+  ...classroomOptions
+}: CourseAccessProps) {
+  const t = useThemeTokens();
+  const classroom = useCourseClassroom(accessId, classroomOptions);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
 
-  const modules = data?.course.modules ?? [];
-  const allLessons = modules.flatMap((m) => m.lessons);
-  const initialLessonId = data?.access.currentLessonId || allLessons[0]?.id || null;
-  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(initialLessonId);
+  if (classroom.isLoading) return <Loading fullPage />;
 
-  if (isLoading) return <Loading fullPage />;
-  if (error || !data) return <p style={{ color: theme.colors.text }}>Course access not found.</p>;
+  const panel: CSSProperties = {
+    maxWidth: 520,
+    margin: "0 auto",
+    padding: 28,
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: t.surface,
+    color: t.text,
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    fontFamily: t.fontFamily,
+  };
+
+  const primaryButton: CSSProperties = {
+    alignSelf: "center",
+    padding: "10px 20px",
+    borderRadius: t.cornerRadius,
+    border: "none",
+    background: t.primary,
+    color: t.textPrimary,
+    fontSize: 14,
+    fontWeight: 700,
+    cursor: "pointer",
+    textDecoration: "none",
+  };
+
+  const gate = classroom.gate;
+  if (gate) {
+    return (
+      <div className={className} style={{ ...panel, ...style }}>
+        <h1 style={{ fontSize: 20, fontWeight: 800, fontFamily: t.headingFontFamily || t.fontFamily }}>
+          {gate.title}
+        </h1>
+        <p style={{ fontSize: 14, color: t.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
+            addresses they are currently signed in with. */}
+        {gate.kind === "wrong_account" && classroom.signedInEmail && (
+          <p style={{ fontSize: 13, color: t.muted }}>
+            Signed in as <strong style={{ color: t.text }}>{classroom.signedInEmail}</strong>
+          </p>
+        )}
+
+        {gate.actionLabel && gate.actionHref && (
+          <button type="button" style={primaryButton} onClick={() => go(gate.actionHref!)}>
+            {gate.actionLabel}
+          </button>
+        )}
 
-  const selected = allLessons.find((l) => l.id === selectedLessonId) ?? allLessons[0];
+        {gate.actionLabel && !gate.actionHref && (
+          <button type="button" style={primaryButton} onClick={() => void classroom.signOutAndRetry()}>
+            {gate.actionLabel}
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  const data = classroom.data;
+  if (!data) return null;
+
+  const selected = classroom.selected;
   const videoUrl = selected?.media?.find((m) => m.type === "video")?.url;
   const files = selected?.media?.filter((m) => m.type !== "video") ?? [];
-  const completedCount = allLessons.filter((l) => l.progress?.isCompleted).length;
-
-  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
-    const el = e.currentTarget;
-    if (!selected || !el.duration) return;
-    const now = Date.now();
-    if (now - lastSent.current < 1000) return;
-    lastSent.current = now;
-    const percent = (el.currentTime / el.duration) * 100;
-    const isCompleted = percent >= 95;
-    updateProgress.mutate({ lessonId: selected.id, videoProgress: percent, isCompleted });
-  };
+  const securePrompt = classroom.securePrompt;
 
   return (
     <div
+      className={className}
       style={{
         display: "flex",
         flexDirection: "column",
         gap: 24,
         maxWidth: 1100,
         margin: "0 auto",
-        color: theme.colors.text,
+        color: t.text,
+        fontFamily: t.fontFamily,
+        ...style,
       }}
     >
+      {/* 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
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: 12,
+            padding: "10px 14px",
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.border}`,
+            background: `${t.primary}0d`,
+            fontSize: 13,
+          }}
+        >
+          <span style={{ flex: "1 1 260px", color: t.muted, lineHeight: 1.5 }}>
+            Anyone with this link can open your course. Create an account with{" "}
+            <strong style={{ color: t.text }}>{securePrompt.email}</strong> to keep it to yourself.
+          </span>
+          <button
+            type="button"
+            onClick={() => go(securePrompt.href)}
+            style={{
+              padding: "6px 14px",
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${t.primary}`,
+              background: "transparent",
+              color: t.primary,
+              fontSize: 13,
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+          >
+            Secure my access
+          </button>
+          <button
+            type="button"
+            onClick={classroom.dismissSecurePrompt}
+            aria-label="Dismiss"
+            style={{
+              padding: "6px 10px",
+              border: "none",
+              background: "transparent",
+              color: t.muted,
+              fontSize: 13,
+              cursor: "pointer",
+            }}
+          >
+            Not now
+          </button>
+        </div>
+      )}
+
       <header>
-        <h1 style={{ fontSize: 26, fontWeight: 800 }}>{data.course.title}</h1>
-        <p style={{ fontSize: 14, opacity: 0.7 }}>
-          {completedCount} of {allLessons.length} lessons completed
+        <h1 style={{ fontSize: 26, fontWeight: 800, fontFamily: t.headingFontFamily || t.fontFamily }}>
+          {data.course.title}
+        </h1>
+        <p style={{ fontSize: 14, color: t.muted }}>
+          {classroom.completedCount} of {classroom.lessons.length} lessons completed
         </p>
       </header>
 
       <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
         {/* Sidebar */}
         <aside style={{ flex: "1 1 260px", minWidth: 240 }}>
-          {modules.map((module) => (
+          {classroom.modules.map((module) => (
             <div key={module.id} style={{ marginBottom: 16 }}>
               <h2 style={{ fontSize: 14, fontWeight: 700, marginBottom: 6 }}>{module.title}</h2>
               <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-                {module.lessons.map((lesson) => {
+                {(module.lessons ?? []).map((lesson) => {
                   const isSelected = lesson.id === selected?.id;
                   const done = lesson.progress?.isCompleted;
                   return (
                     <button
                       key={lesson.id}
-                      onClick={() => setSelectedLessonId(lesson.id)}
+                      onClick={() => classroom.selectLesson(lesson.id)}
                       style={{
                         textAlign: "left",
                         padding: "8px 10px",
-                        borderRadius: theme.cornerRadius,
+                        borderRadius: t.cornerRadius,
                         border: "none",
                         cursor: "pointer",
                         fontSize: 14,
-                        background: isSelected ? `${theme.colors.primary}20` : "transparent",
-                        color: isSelected ? theme.colors.primary : theme.colors.text,
+                        background: isSelected ? `${t.primary}20` : "transparent",
+                        color: isSelected ? t.primary : t.text,
                         fontWeight: isSelected ? 600 : 400,
                       }}
                     >
@@ -103,8 +234,8 @@ export function CourseAccess({ accessId }: CourseAccessProps) {
                   src={videoUrl}
                   controls
                   playsInline
-                  onTimeUpdate={handleTimeUpdate}
-                  style={{ width: "100%", aspectRatio: "16/9", background: "#000", borderRadius: theme.cornerRadius }}
+                  onTimeUpdate={(e) => classroom.reportProgress(e.currentTarget.currentTime, e.currentTarget.duration)}
+                  style={{ width: "100%", aspectRatio: "16/9", background: "#000", borderRadius: t.cornerRadius }}
                 />
               ) : (
                 <div
@@ -114,16 +245,25 @@ export function CourseAccess({ accessId }: CourseAccessProps) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    background: `${theme.colors.text}0d`,
-                    borderRadius: theme.cornerRadius,
-                    opacity: 0.7,
+                    background: `${t.text}0d`,
+                    borderRadius: t.cornerRadius,
+                    color: t.muted,
                   }}
                 >
                   No video available for this lesson
                 </div>
               )}
 
-              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "16px 0 8px" }}>{selected.title}</h2>
+              <h2
+                style={{
+                  fontSize: 20,
+                  fontWeight: 700,
+                  margin: "16px 0 8px",
+                  fontFamily: t.headingFontFamily || t.fontFamily,
+                }}
+              >
+                {selected.title}
+              </h2>
 
               {files.length > 0 && (
                 <div style={{ marginBottom: 16 }}>
@@ -139,16 +279,16 @@ export function CourseAccess({ accessId }: CourseAccessProps) {
                           display: "flex",
                           justifyContent: "space-between",
                           padding: "10px 12px",
-                          borderRadius: theme.cornerRadius,
-                          border: `1px solid ${theme.colors.primary}40`,
-                          background: `${theme.colors.primary}10`,
-                          color: theme.colors.text,
+                          borderRadius: t.cornerRadius,
+                          border: `1px solid ${t.border}`,
+                          background: `${t.primary}10`,
+                          color: t.text,
                           textDecoration: "none",
                           fontSize: 14,
                         }}
                       >
                         <span>{file.filename}</span>
-                        <span style={{ opacity: 0.6 }}>{(file.size / 1024 / 1024).toFixed(2)} MB</span>
+                        <span style={{ color: t.muted }}>{(file.size / 1024 / 1024).toFixed(2)} MB</span>
                       </a>
                     ))}
                   </div>
@@ -160,7 +300,7 @@ export function CourseAccess({ accessId }: CourseAccessProps) {
               )}
             </>
           ) : (
-            <p style={{ opacity: 0.7 }}>No lesson selected.</p>
+            <p style={{ color: t.muted }}>No lesson selected.</p>
           )}
         </main>
       </div>

package/src/ui/styled/CourseCheckout.tsx

@@ -28,7 +28,15 @@ export interface CourseCheckoutProps {
   formatAmount?: (amount: number) => string;
   /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
-  /** Stripe return URL for a PAID enrollment. Default `/i/courses/:slug/finalise`. */
+  /**
+   * Stripe return URL for a PAID enrollment. Default `/i/courses/:slug/finalise`.
+   *
+   * Put ONLY the bookingId in this URL. The booking's secret is handled for you
+   * by the hook (stashed in `sessionStorage`, read back by `CourseConfirmation`)
+   * — putting it in the URL would hand it to history, referrers and shared
+   * links, which is the exact leak it exists to close. See
+   * `utils/bookingSecret`.
+   */
   finalisePath?: (slug: string, bookingId: string) => string;
   /** Host-owned navigation on FREE completion (e.g. router navigate). */
   onComplete?: (info: { slug: string; bookingId: string }) => void;

package/src/ui/styled/CourseConfirmation.tsx

@@ -3,9 +3,19 @@ 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, alpha } from "./Confirmation";
+import {
+  ConfirmationStage,
+  ConfirmationCard,
+  CheckSeal,
+  WarnSeal,
+  Perforation,
+  ConfirmationRow,
+  ConfirmationLostCheckout,
+  alpha,
+} from "./Confirmation";
 import { useCourseBookingFinalize } from "../../data/queries/useFinalize";
 import { useGetCourse } from "../../data/queries/useCourses";
+import { useBookingSecret } from "../headless/booking/useBookingSecret";
 
 export interface CourseConfirmationProps {
   slug: string;
@@ -14,6 +24,11 @@ export interface CourseConfirmationProps {
   formatAmount?: (n: number) => string;
   /** Where the "browse more courses" action links. */
   explorePath?: string;
+  /**
+   * Where "start over" goes when this browser has no credential for the booking
+   * — i.e. back to the course, to enroll again. Defaults to `/i/courses/:slug`.
+   */
+  restartPath?: string;
 }
 
 export function CourseConfirmation({
@@ -21,16 +36,25 @@ export function CourseConfirmation({
   bookingId,
   formatAmount,
   explorePath = "/i/courses",
+  restartPath,
 }: CourseConfirmationProps) {
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
-  const { data, isLoading, error } = useCourseBookingFinalize(slug, bookingId);
+  // The credential the checkout stashed before the payment redirect. `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 } = useCourseBookingFinalize(
+    slug,
+    resolved ? bookingId : undefined,
+    secret ?? undefined,
+  );
   const { data: course } = useGetCourse(slug);
 
   const text = theme.colors.text;
   const primary = theme.colors.primary;
 
-  if (isLoading) {
+  if (!resolved || isLoading) {
     return (
       <ConfirmationStage>
         <Loading label="Confirming your enrollment…" />
@@ -39,6 +63,21 @@ export function CourseConfirmation({
   }
 
   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 enrollment never existed.
+    if (isMissing) {
+      return (
+        <ConfirmationStage>
+          <ConfirmationLostCheckout
+            title="We can’t confirm your enrollment in this browser"
+            body="Confirming an enrollment needs the checkout details saved in the tab you started in — and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your enrollment email, so check your inbox before paying again. Otherwise, start the enrollment over."
+            restartPath={restartPath ?? `/i/courses/${slug}`}
+            restartLabel="Start over"
+          />
+        </ConfirmationStage>
+      );
+    }
     return (
       <ConfirmationStage>
         <p style={{ color: text }}>We couldn’t find your enrollment.</p>

package/src/ui/styled/EventTickets.tsx

@@ -5,6 +5,7 @@ import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay, summarizeTaxQuote } from "../format/PriceDisplay";
+import { clampChosenAmount, isPayWhatYouWant, pwywDefaultAmount, pwywMaximum } from "../format/pwyw";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
@@ -282,6 +283,12 @@ function TicketStep({
                         {fmt(Number(ticket.compareAtPrice))}
                       </span>
                     )}
+                    {/* On a PWYW tier `price` is the FLOOR, so it is labelled as
+                        one — showing it bare would read as a fixed price the
+                        buyer is about to be charged. */}
+                    {isPayWhatYouWant(ticket) && (
+                      <span style={{ fontSize: 14, fontWeight: 500, opacity: 0.7, marginRight: 6 }}>from</span>
+                    )}
                     <PriceDisplay amount={Number(ticket.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={theme.colors.text} captionStyle={{ opacity: 0.65 }} />
                   </div>
                 </div>
@@ -305,6 +312,20 @@ function TicketStep({
                   </button>
                 </div>
               </div>
+              {/* The amount box appears only once a seat is actually selected —
+                  before that there is nothing to price, and a row of empty
+                  inputs down the tier list reads as a form to fill in rather
+                  than a choice to make. */}
+              {isPayWhatYouWant(ticket) && selectedQty > 0 && !isSoldOut && !isExpired && (
+                <PwywAmountField
+                  ticket={ticket}
+                  quantity={selectedQty}
+                  value={c.pwywAmounts[ticket.id]}
+                  onChange={(amount) => c.setTicketAmount(ticket.id, amount)}
+                  fmt={fmt}
+                  theme={theme}
+                />
+              )}
               {ticket.description && (
                 <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
               )}
@@ -669,6 +690,99 @@ const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
   opacity: 0.7,
 });
 
+/**
+ * The buyer's "what will you pay?" box for one pay-what-you-want tier.
+ *
+ * Holds its own STRING state rather than binding the number straight through.
+ * Two reasons, both of which are broken inputs if you skip them: an empty box
+ * has to stay empty while the buyer retypes (a number-bound input snaps it back
+ * to the floor on every keystroke), and "1" on the way to "15" must not be
+ * clamped up to the minimum the instant it is typed.
+ *
+ * Correction happens on BLUR, when the buyer has finished — and the server
+ * clamps again regardless, so nothing here is load-bearing for money.
+ */
+function PwywAmountField({
+  ticket,
+  quantity,
+  value,
+  onChange,
+  fmt,
+  theme,
+}: {
+  ticket: ITicket;
+  quantity: number;
+  value: number | undefined;
+  onChange: (amount: number | null) => void;
+  fmt: (amount: number) => string;
+  theme: ForgeTheme;
+}) {
+  const floor = Number(ticket.price);
+  const maximum = pwywMaximum(ticket);
+  const suggested = pwywDefaultAmount(ticket);
+  const [draft, setDraft] = useState<string>(String(value ?? suggested));
+
+  // Follow the tier's own default when the buyer hasn't typed anything — an
+  // operator's suggested amount arriving late (or the selection being cleared
+  // and remade) should re-seed the box rather than leave a stale figure.
+  useEffect(() => {
+    if (value == null) setDraft(String(suggested));
+  }, [value, suggested]);
+
+  const parsed = Number(draft);
+  const effective = Number.isFinite(parsed) ? clampChosenAmount(ticket, parsed) : floor;
+  const belowFloor = draft.trim() !== "" && Number.isFinite(parsed) && parsed < floor;
+  const aboveMax = maximum != null && Number.isFinite(parsed) && parsed > maximum;
+
+  const commit = () => {
+    if (draft.trim() === "" || !Number.isFinite(parsed)) {
+      onChange(null);
+      setDraft(String(suggested));
+      return;
+    }
+    const clamped = clampChosenAmount(ticket, parsed);
+    onChange(clamped);
+    setDraft(String(clamped));
+  };
+
+  return (
+    <div style={{ marginTop: 12 }}>
+      <label
+        htmlFor={`pwyw-${ticket.id}`}
+        style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6 }}
+      >
+        Name your price
+        <span style={{ fontWeight: 400, opacity: 0.7 }}>
+          {" "}
+          — minimum {fmt(floor)}
+          {maximum != null ? `, up to ${fmt(maximum)}` : ""}
+        </span>
+      </label>
+      <input
+        id={`pwyw-${ticket.id}`}
+        type="number"
+        inputMode="decimal"
+        min={floor}
+        {...(maximum != null ? { max: maximum } : {})}
+        step="0.01"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        style={{ ...inputStyle(theme), maxWidth: 200 }}
+      />
+      <p style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>
+        {belowFloor
+          ? `The minimum is ${fmt(floor)} — we'll use that.`
+          : aboveMax
+            ? `The most you can pay is ${fmt(maximum!)} — we'll use that.`
+            : quantity > 1
+              ? `${fmt(effective)} each · ${fmt(effective * quantity)} for ${quantity}`
+              : "Per ticket."}
+      </p>
+    </div>
+  );
+}
+
 const stepperStyle = (t: ForgeTheme, filled: boolean): CSSProperties => ({
   width: 40,
   height: 40,