@tribe-nest/forge 3.9.0 → 3.14.0

package/src/ui/headless/useVariantSelection.ts

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { IPublicProductVariant } from "../../types/models";
+
+/**
+ * Picking a version of a product, on any number of axes.
+ *
+ * This replaces a hardcoded colour → size cascade. That cascade could not
+ * express a third axis, so an album sold as MP3 / WAV / Stems had nowhere to put
+ * "Format", and it read `variant.color` — a column one writer fills with a hex
+ * and another with a name.
+ *
+ * The cascade itself is kept, generalised: each axis is narrowed by the axes
+ * BEFORE it. Picking "Black" leaves only the sizes that exist in black, exactly
+ * as before, and picking "FLAC" would leave only the editions pressed in FLAC.
+ * Axis order comes from the server, which sorts by the axis's own position, so
+ * every variant of a product presents its options the same way round.
+ *
+ * Shared by BOTH rendering surfaces. The Craft themes in `frontend-shared`
+ * import it from here, the way they already import the cart and audio player —
+ * the dependency runs one way, so the selection rule cannot drift between a
+ * code site and a Craft site even though their markup is unrelated.
+ */
+
+export type VariantAxisValue = {
+  optionValueId: string;
+  value: string;
+  /** Only set when the value genuinely is a colour. Render a swatch if present. */
+  swatchHex: string | null;
+  /** False when every variant carrying it is out of stock. */
+  isAvailable: boolean;
+};
+
+export type VariantAxis = {
+  optionTypeId: string;
+  /** "Colour", "Size", "Format" — as the creator named it. */
+  axis: string;
+  displayType: string;
+  values: VariantAxisValue[];
+};
+
+type Selection = Record<string, string | undefined>;
+
+const optionFor = (variant: IPublicProductVariant, optionTypeId: string) =>
+  variant.options?.find((option) => option.optionTypeId === optionTypeId);
+
+/** Does this variant match every selection made on the axes listed? */
+const matches = (variant: IPublicProductVariant, selection: Selection, upToAxes: string[]) =>
+  upToAxes.every((optionTypeId) => {
+    const chosen = selection[optionTypeId];
+    if (!chosen) return true;
+    return optionFor(variant, optionTypeId)?.optionValueId === chosen;
+  });
+
+export function useVariantSelection(variants: IPublicProductVariant[]) {
+  const [selection, setSelection] = useState<Selection>({});
+
+  // The axes this product uses, in server order, deduped. Built from the
+  // variants themselves rather than a separate list, so a product can never
+  // advertise an axis none of its versions sits on.
+  const axisOrder = useMemo(() => {
+    const seen: { optionTypeId: string; axis: string; displayType: string }[] = [];
+    for (const variant of variants ?? []) {
+      for (const option of variant.options ?? []) {
+        if (!seen.some((s) => s.optionTypeId === option.optionTypeId)) {
+          seen.push({ optionTypeId: option.optionTypeId, axis: option.axis, displayType: option.displayType });
+        }
+      }
+    }
+    return seen;
+  }, [variants]);
+
+  const axes: VariantAxis[] = useMemo(() => {
+    return axisOrder.map((axis, index) => {
+      // Narrowed by the axes before it, and only those — an axis must not be
+      // constrained by a LATER pick, or choosing a size would start hiding
+      // colours and the buyer could reach a state with nothing selectable.
+      const earlier = axisOrder.slice(0, index).map((a) => a.optionTypeId);
+      const candidates = (variants ?? []).filter((variant) => matches(variant, selection, earlier));
+
+      const values: VariantAxisValue[] = [];
+      for (const variant of candidates) {
+        const option = optionFor(variant, axis.optionTypeId);
+        if (!option) continue;
+        const existing = values.find((v) => v.optionValueId === option.optionValueId);
+        const isActive = variant.availabilityStatus === "active";
+        if (existing) {
+          existing.isAvailable = existing.isAvailable || isActive;
+        } else {
+          values.push({
+            optionValueId: option.optionValueId,
+            value: option.value,
+            swatchHex: option.swatchHex,
+            isAvailable: isActive,
+          });
+        }
+      }
+      return { ...axis, values };
+    });
+  }, [axisOrder, variants, selection]);
+
+  const select = useCallback(
+    (optionTypeId: string, optionValueId: string) => {
+      setSelection((current) => {
+        const index = axisOrder.findIndex((a) => a.optionTypeId === optionTypeId);
+        const next: Selection = { ...current, [optionTypeId]: optionValueId };
+        // Changing an axis invalidates everything narrowed by it. Keeping a
+        // stale later pick is how you end up "selecting" a variant that does
+        // not exist — the buyer sees Black/XL highlighted and the button dead.
+        for (const later of axisOrder.slice(index + 1)) next[later.optionTypeId] = undefined;
+        return next;
+      });
+    },
+    [axisOrder],
+  );
+
+  const selectedVariant = useMemo(() => {
+    // A product with no axes has exactly one version — every digital release in
+    // the catalogue before formats existed.
+    if (axisOrder.length === 0) {
+      return variants?.find((v) => v.isDefault) ?? variants?.[0];
+    }
+    if (axisOrder.some((a) => !selection[a.optionTypeId])) return undefined;
+    return (variants ?? []).find((variant) =>
+      axisOrder.every((a) => optionFor(variant, a.optionTypeId)?.optionValueId === selection[a.optionTypeId]),
+    );
+  }, [axisOrder, selection, variants]);
+
+  // Walk the axes in order and pre-pick the first value that is actually in
+  // stock, falling back to the first at all so the page is never blank.
+  useEffect(() => {
+    const missing = axes.find((axis) => !selection[axis.optionTypeId] && axis.values.length > 0);
+    if (!missing) return;
+    const first = missing.values.find((v) => v.isAvailable) ?? missing.values[0];
+    setSelection((current) => ({ ...current, [missing.optionTypeId]: first.optionValueId }));
+  }, [axes, selection]);
+
+  return { axes, selection, select, selectedVariant, hasOptions: axisOrder.length > 0 };
+}

package/src/ui/index.ts

@@ -65,6 +65,7 @@ export { ContactForm, type ContactFormProps } from "./styled/ContactForm";
 export { Paywall, type PaywallProps } from "./styled/Paywall";
 export { ReactionBar, type ReactionBarProps } from "./styled/ReactionBar";
 export { ProductGrid, type ProductGridProps } from "./styled/ProductGrid";
+export { ProductBrowseNav, type ProductBrowseNavProps } from "./styled/ProductBrowseNav";
 export { Addons, type AddonsProps } from "./styled/Addons";
 export { BundleConfirmation, type BundleConfirmationProps } from "./styled/BundleConfirmation";
 export { ProductDetail, type ProductDetailProps } from "./styled/ProductDetail";
@@ -74,10 +75,16 @@ export { EventTickets, type EventTicketsProps } from "./styled/EventTickets";
 export { EventCountdown, type EventCountdownProps } from "./styled/EventCountdown";
 export { EventWaitlist, type EventWaitlistProps, formatCountdown } from "./styled/EventWaitlist";
 export { EventDetail, type EventDetailProps } from "./styled/EventDetail";
+// Phase 5 — the page for a NAMED, multi-date series. The API refuses anything
+// else, so this component never has to decide whether a series is publishable.
+export { EventSeriesDetail, type EventSeriesDetailProps } from "./styled/EventSeriesDetail";
 export { AddToCalendar, type AddToCalendarProps } from "./styled/AddToCalendar";
 export { WalletPassButtons, type WalletPassButtonsProps } from "./styled/WalletPassButtons";
 export { CoachingBooking, type CoachingBookingProps } from "./styled/CoachingBooking";
 export { CoachingDetail, type CoachingDetailProps } from "./styled/CoachingDetail";
+// S.6 — the buyer-facing cancellation policy block. Exported so a code site that
+// lays out its own booking page still has ONE renderer for these terms.
+export { CancellationTerms, type CancellationTermsProps } from "./styled/CancellationTerms";
 export { CourseCheckout, type CourseCheckoutProps } from "./styled/CourseCheckout";
 export { CourseDetail, type CourseDetailProps } from "./styled/CourseDetail";
 export { PostsFeed, type PostsFeedProps } from "./styled/PostsFeed";
@@ -142,6 +149,10 @@ export { DonationPage, type DonationPageProps } from "./styled/DonationPage";
 export { ReviewsSection, StarRow, type ReviewsSectionProps } from "./styled/ReviewsSection";
 export { ReviewForm, type ReviewFormProps } from "./styled/ReviewForm";
 export { PriceDisplay, priceTaxCaption, summarizeTaxQuote, type PriceDisplayProps } from "./format/PriceDisplay";
+// The artist's booking fee, for a site rendering its own ticket UI rather than
+// the styled blocks. Resolution stays on the server (`IEvent.bookingFee`); these
+// only do the arithmetic and the wording.
+export { computeBookingFeeAmount, hasBookingFee, describeBookingFee } from "./format/bookingFee";
 export { usePricesIncludeTax } from "../data/queries/useWebsite";
 
 // PWA (installable code sites) — SW registration + install/push UX (Tier 2).

package/src/ui/styled/AccountDashboard.tsx

@@ -18,6 +18,8 @@ import {
   useNotificationPreferences,
   useUpdateNotificationPreference,
   useCancelMembership,
+  useMembershipAccess,
+  useOpenBillingPortal,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -224,7 +226,14 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const [isCancelling, setIsCancelling] = useState(false);
 
   const membership = user?.membership;
-  const isActive = membership?.status === "active";
+  // Two separate questions, deliberately answered separately:
+  //   `access.hasAccess` → are the benefits live (true through past_due/grace)
+  //   `message`          → what the member is told, including a failed payment
+  // The old `status === "active"` answered both at once and got both wrong for
+  // anyone whose card bounced.
+  const { access, message } = useMembershipAccess();
+  const openBillingPortal = useOpenBillingPortal();
+  const [billingError, setBillingError] = useState<string | null>(null);
 
   const onCancel = async () => {
     if (!membership?.id) return;
@@ -237,6 +246,17 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
     }
   };
 
+  const onUpdatePayment = async () => {
+    setBillingError(null);
+    try {
+      const { url } = await openBillingPortal.mutateAsync({});
+      window.location.href = url;
+    } catch (error) {
+      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setBillingError(detail || "We couldn't open the billing page. Please contact us.");
+    }
+  };
+
   return (
     <div style={card}>
       <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Current Membership</h2>
@@ -244,7 +264,19 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           <div>
             <h3 style={{ fontWeight: 700 }}>{membership.membershipTier.name}</h3>
-            <p style={{ fontSize: 13, opacity: 0.7 }}>{isActive ? "Active" : "Cancelled"}</p>
+            <p
+              style={{
+                fontSize: 13,
+                opacity: 0.85,
+                fontWeight: message.tone === "warning" ? 700 : 400,
+                color: message.tone === "warning" ? t.primary : undefined,
+              }}
+            >
+              {message.label}
+            </p>
+            {message.detail && (
+              <p style={{ fontSize: 13, opacity: 0.8, marginTop: 4, maxWidth: 480 }}>{message.detail}</p>
+            )}
             {!!membership.subscriptionAmount && (
               <p style={{ fontSize: 14, marginTop: 4 }}>
                 {formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency)} / {membership.billingCycle}
@@ -263,16 +295,25 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
           )}
           {membership.endDate && (
             <p style={{ fontSize: 14, opacity: 0.8 }}>
-              {isActive ? "Renews" : "Ends"} on {formatDate(membership.endDate)}
+              {access.billingState === "active" ? "Renews" : "Ends"} on {formatDate(membership.endDate)}
             </p>
           )}
+          {billingError && <p style={{ fontSize: 13, opacity: 0.9 }}>{billingError}</p>}
         </div>
       ) : (
         <p style={{ opacity: 0.8 }}>You don&apos;t have an active membership.</p>
       )}
 
       <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24 }}>
-        {isActive && (
+        {message.showUpdatePayment && (
+          <button onClick={onUpdatePayment} disabled={openBillingPortal.isPending} style={button}>
+            {openBillingPortal.isPending ? "Opening…" : "Update payment method"}
+          </button>
+        )}
+        {/* Cancelling stays available for anyone who still HAS access — a
+            past_due member must not be trapped in a subscription they can see
+            but not leave. */}
+        {access.hasAccess && (
           <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
             {isCancelling ? "Cancelling…" : "Cancel"}
           </button>

package/src/ui/styled/CancellationTerms.tsx

@@ -0,0 +1,70 @@
+import { type CSSProperties } from "react";
+import { CalendarX2 } from "lucide-react";
+import type { CancellationTermsView } from "../../types/models";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+
+export interface CancellationTermsProps {
+  /** The terms to show. Renders NOTHING when null or when no policy is set. */
+  terms?: CancellationTermsView | null;
+  /** `card` for a storefront panel, `inline` for inside a checkout step. */
+  variant?: "card" | "inline";
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: CSSProperties;
+}
+
+/**
+ * S.6 — the cancellation policy, shown to the buyer BEFORE they pay.
+ *
+ * ── Why this is DISPLAY and not a tick box ────────────────────────────────
+ * The platform already draws this line, on the pillar that has both halves:
+ * an event's `terms_text` is tick-boxed and refused without acceptance
+ * (`resolveTermsAcceptance`), while an event's cancellation policy is
+ * snapshotted with no acceptance step. Entry terms are conditions imposed ON the
+ * buyer and enforced later at a door; a cancellation policy is a statement of
+ * the SELLER's obligation, and there is nothing for the buyer to promise. A
+ * booking has no entry-terms equivalent at all — no door, no age limit, no ID —
+ * so display is the whole of what is owed here. Requiring a tick would also make
+ * one shared evaluator mean two different things by pillar.
+ *
+ * ── Why it renders nothing rather than a fallback ─────────────────────────
+ * `description === null` means the seller configured NO policy, which is a
+ * different fact from `none` ("cannot be cancelled"). Inventing a sentence for
+ * the first would promise, or deny, terms nobody wrote.
+ *
+ * The sentence itself comes from the SERVER (`describeCancellationPolicy`), so
+ * the wording here is byte-identical to the wording in the buyer's portal.
+ */
+export function CancellationTerms({ terms, variant = "card", className, style }: CancellationTermsProps) {
+  const t = useThemeTokens();
+  if (!terms?.description) return null;
+
+  const muted = t.muted;
+  const base: CSSProperties =
+    variant === "card"
+      ? {
+          padding: 12,
+          border: `1px solid ${t.border}`,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+        }
+      : { padding: "10px 0", borderTop: `1px solid ${t.border}` };
+
+  return (
+    <div
+      className={className}
+      style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 13, ...base, ...style }}
+    >
+      <CalendarX2 size={15} style={{ flexShrink: 0, marginTop: 2, color: muted }} aria-hidden />
+      <div style={{ minWidth: 0 }}>
+        <p style={{ margin: 0, fontWeight: 600 }}>Cancellation policy</p>
+        <p style={{ margin: "2px 0 0", color: muted }}>{terms.description}</p>
+        {terms.terms && (
+          // The seller's own words, preserved as written — line breaks included.
+          <p style={{ margin: "6px 0 0", color: muted, whiteSpace: "pre-wrap" }}>{terms.terms}</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/CoachingBooking.tsx

@@ -9,6 +9,7 @@ import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
+import { CancellationTerms } from "./CancellationTerms";
 import {
   DialogRoot,
   DialogTrigger,
@@ -459,6 +460,11 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
 
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
 
+        {/* S.6 — the terms SNAPSHOTTED onto this booking at reserve, not the
+            product's live setting: the hour is already held, and an operator
+            editing the policy now cannot move what this buyer is bound by. */}
+        <CancellationTerms terms={c.cancellation} />
+
         <p style={{ fontSize: 12, color: a(theme.colors.text, 0.6), marginTop: 4 }}>
           By continuing, you agree to receive booking confirmations and important updates about your session via email.
         </p>
@@ -527,6 +533,10 @@ function PaymentStep({
         </span>
         </div>
       </div>
+      {/* Repeated on the paying step deliberately: this is the last screen before
+          the money moves, and a policy read three clicks earlier is not a policy
+          read before committing. */}
+      <CancellationTerms terms={c.cancellation} style={{ marginBottom: 16 }} />
       {!renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
       ) : c.clientSecret ? (

package/src/ui/styled/CoachingDetail.tsx

@@ -7,6 +7,7 @@ import { PriceDisplay } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { CoachingBooking } from "./CoachingBooking";
+import { CancellationTerms } from "./CancellationTerms";
 import { ReviewsSection } from "./ReviewsSection";
 
 export interface CoachingDetailProps {
@@ -89,6 +90,9 @@ export function CoachingDetail({
             <PriceDisplay amount={Number(product.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
           </span>
           <CoachingBooking slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
+          {/* S.6 — next to the price and the button, so the terms are readable
+              at the moment the buyer decides, not discovered afterwards. */}
+          <CancellationTerms terms={product.cancellation} variant="inline" />
         </aside>
       </div>
 

package/src/ui/styled/EventDetail.tsx

@@ -4,6 +4,7 @@ import { useEvent } from "../../data/queries/useEvents";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
+import { describeBookingFee } from "../format/bookingFee";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { EventTickets } from "./EventTickets";
@@ -65,6 +66,7 @@ export function EventDetail({
 
   const cover = event.media?.find((m) => m.type === "image")?.url ?? event.media?.[0]?.url;
   const minPrice = event.tickets.length ? Math.min(...event.tickets.map((t) => t.price)) : 0;
+  const feeNote = describeBookingFee(event.bookingFee, fmt);
   const locationText =
     event.type === "virtual" || !event.address
       ? "Virtual"
@@ -145,6 +147,16 @@ export function EventDetail({
               From{" "}
               <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
             </span>
+            {/* The cheapest tier is the number a buyer anchors on, and until now
+                it was the whole story they were given — the artist's booking fee
+                was added at checkout and named nowhere. There is no selection
+                here, so there is no amount to quote; the RULE is what makes the
+                "From" figure honest. Renders nothing when no fee is charged. */}
+            {feeNote && (
+              <span data-testid="booking-fee-note" style={{ fontSize: 12, opacity: 0.65 }}>
+                {feeNote}
+              </span>
+            )}
             <EventTickets
               slug={slug}
               triggerText="Buy tickets"

package/src/ui/styled/EventSeriesDetail.tsx

@@ -0,0 +1,222 @@
+import { Calendar, MapPin } from "lucide-react";
+import type { IEventSeries, IEventSeriesDate } from "../../types/models";
+import { useEventSeries } from "../../data/queries/useEventSeries";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface EventSeriesDetailProps {
+  /** Series slug (or id) — resolves the series. */
+  slug?: string;
+  /**
+   * Series fetched server-side (e.g. in a route loader). Seeds the query so the
+   * page renders with data on first paint — no client spinner — enabling SSR
+   * for SEO.
+   */
+  initialSeries?: IEventSeries;
+  /**
+   * Where a date links. Defaults to `/events/:slug`, which is where the client
+   * app puts event pages; a code site whose events live under `/i/events`
+   * passes its own.
+   */
+  eventHref?: (date: IEventSeriesDate) => string;
+  /**
+   * Host-owned navigation when a date is clicked. When supplied it REPLACES the
+   * browser's own navigation (the click is prevented), which is what a SPA host
+   * needs: the client app's `navigate` is preview-aware and keeps the
+   * `/template-preview` prefix that a bare anchor would drop.
+   *
+   * The `href` is still rendered either way — a crawler, a middle-click and a
+   * "copy link address" must all keep working, so this is an enhancement over a
+   * real link rather than a replacement for one.
+   */
+  onSelect?: (date: IEventSeriesDate) => void;
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: React.CSSProperties;
+}
+
+const formatDate = (value: string, timezone?: string): string =>
+  new Date(value).toLocaleString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: timezone || "UTC",
+  });
+
+const formatTime = (value: string, timezone?: string): string =>
+  new Date(value).toLocaleString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone || "UTC",
+    timeZoneName: "short",
+  });
+
+const locationText = (date: IEventSeriesDate): string => {
+  if (date.type === "virtual" || !date.address) return "Online";
+  return [date.address.name, date.address.city, date.address.country].filter(Boolean).join(", ") || "Online";
+};
+
+/**
+ * The public page for a NAMED, multi-date event series.
+ *
+ * ## What this component is NOT allowed to assume
+ *
+ * That every date is going ahead. A `cancelled` date deliberately stays in the
+ * list the API returns — a ticket-holder following their link must learn WHY
+ * rather than meet a 404 — so it is marked here, with the host's reason, and
+ * its link stays live. Silently dropping it, or rendering it identically to a
+ * live date, are both wrong for the same person.
+ *
+ * ## Why there is no ticket UI here
+ *
+ * A series page lists dates; it does not sell them. Tickets, the questionnaire,
+ * terms acceptance and checkout all live on the event page, and duplicating any
+ * of that would mean a second checkout path — the exact thing the backend
+ * refuses to have. Every date links THROUGH.
+ *
+ * ## The rendered heading is always a name a human chose
+ *
+ * The API refuses any series that is still `is_implicit` (a title copied off
+ * its one event — "Hello world", "Testing one last time" in the live data) and
+ * any that holds fewer than two publicly-visible dates. So this component can
+ * render `series.title` as a heading unconditionally; there is no client-side
+ * check to forget, because a series that should not be published never arrives.
+ */
+export function EventSeriesDetail({
+  slug,
+  initialSeries,
+  eventHref,
+  onSelect,
+  className,
+  style,
+}: EventSeriesDetailProps) {
+  const t = useThemeTokens();
+  const { data: series, isLoading } = useEventSeries(slug, { initialData: initialSeries });
+
+  if (isLoading) return <Loading fullPage />;
+  if (!series) return <p style={{ color: t.text }}>Series not found.</p>;
+
+  const cover = series.media?.find((m) => m.type === "image")?.url ?? series.media?.[0]?.url;
+  const href = eventHref ?? ((date: IEventSeriesDate) => `/events/${date.slug}`);
+
+  return (
+    <div
+      className={className}
+      style={{ maxWidth: 1040, margin: "0 auto", color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      {cover && (
+        <img
+          src={cover}
+          alt={series.title}
+          style={{
+            width: "100%",
+            maxHeight: 420,
+            objectFit: "cover",
+            borderRadius: t.cornerRadius,
+            marginBottom: 24,
+          }}
+        />
+      )}
+
+      <h1 style={{ fontSize: 34, fontWeight: 700, margin: 0 }}>{series.title}</h1>
+
+      <p style={{ marginTop: 8, opacity: 0.75, display: "flex", alignItems: "center", gap: 8 }}>
+        <Calendar size={16} />
+        <span>
+          {series.dateCount} dates
+          {series.firstDateTime && series.lastDateTime
+            ? ` · ${formatDate(series.firstDateTime, series.events[0]?.timezone)} – ${formatDate(
+                series.lastDateTime,
+                series.events[series.events.length - 1]?.timezone,
+              )}`
+            : ""}
+        </span>
+      </p>
+
+      {series.description && (
+        <p style={{ marginTop: 16, whiteSpace: "pre-wrap", lineHeight: 1.6 }}>{series.description}</p>
+      )}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 32 }}>
+        {series.events.map((date) => {
+          const isCancelled = date.status === "cancelled";
+          return (
+            <a
+              key={date.id}
+              href={href(date)}
+              onClick={
+                onSelect
+                  ? (e) => {
+                      // Modifier-clicks are the reader asking the BROWSER for a
+                      // new tab; hijacking those is the classic SPA-link bug.
+                      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+                      e.preventDefault();
+                      onSelect(date);
+                    }
+                  : undefined
+              }
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 16,
+                alignItems: "center",
+                justifyContent: "space-between",
+                background: t.surface,
+                border: `1px solid ${t.primary}20`,
+                borderRadius: t.cornerRadius,
+                padding: 16,
+                color: t.text,
+                textDecoration: "none",
+                // Dimmed, never hidden — see the docblock.
+                opacity: isCancelled ? 0.6 : 1,
+              }}
+            >
+              <div style={{ minWidth: 160 }}>
+                <div style={{ fontWeight: 600 }}>{formatDate(date.dateTime, date.timezone)}</div>
+                <div style={{ fontSize: 13, opacity: 0.75 }}>{formatTime(date.dateTime, date.timezone)}</div>
+              </div>
+
+              <div style={{ flex: 1, minWidth: 200 }}>
+                <div style={{ fontWeight: 600 }}>{date.title}</div>
+                <div style={{ fontSize: 13, opacity: 0.75, display: "flex", alignItems: "center", gap: 6 }}>
+                  <MapPin size={14} />
+                  <span>{locationText(date)}</span>
+                </div>
+              </div>
+
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                {isCancelled && (
+                  <span
+                    style={{
+                      fontSize: 12,
+                      fontWeight: 700,
+                      letterSpacing: 0.6,
+                      textTransform: "uppercase",
+                      border: `1px solid ${t.text}40`,
+                      borderRadius: t.cornerRadius,
+                      padding: "4px 8px",
+                    }}
+                  >
+                    Cancelled
+                  </span>
+                )}
+                {date.status === "sold_out" && (
+                  <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase" }}>
+                    Sold out
+                  </span>
+                )}
+              </div>
+
+              {isCancelled && date.cancellationReason && (
+                <div style={{ flexBasis: "100%", fontSize: 13, opacity: 0.8 }}>{date.cancellationReason}</div>
+              )}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}