@tribe-nest/forge 3.9.0 → 3.11.0

package/src/ui/headless/membership/MembershipGate.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import { getMembershipAccess } from "../../../utils/membershipAccess";
 
 export interface MembershipGateState {
   hasAccess: boolean;
@@ -28,10 +29,14 @@ export interface MembershipGateProps {
 export function MembershipGate({ tiers, access, children, fallback }: MembershipGateProps) {
   const { user, isAuthenticated } = usePublicAuth();
   const membership = user?.membership;
-  const activeMembership = !!membership && membership.status === "active";
+  // The SERVER's access decision, not a `status === "active"` compare. That
+  // compare locked out members in `past_due`/`grace` — states the backend
+  // deliberately keeps access through — so a card that bounced cost them the
+  // content they were still paying for.
+  const membershipGrantsAccess = getMembershipAccess(membership).hasAccess;
   const tierAllows = !tiers?.length || (membership ? tiers.includes(membership.membershipTierId) : false);
 
-  const hasAccess = access ?? (activeMembership && tierAllows);
+  const hasAccess = access ?? (membershipGrantsAccess && tierAllows);
 
   if (hasAccess) return <>{children}</>;
   if (typeof fallback === "function") return <>{fallback({ hasAccess, isAuthenticated })}</>;

package/src/ui/index.ts

@@ -74,10 +74,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 +148,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>
+  );
+}

package/src/ui/styled/EventTickets.tsx

@@ -500,6 +500,11 @@ function PaymentStep({
             </button>
           </div>
         )}
+        {/* Above the tax row, because tax is charged ON the fee: the order total
+            the tax quote priced already contained it. By this step the number is
+            the SERVER's own — what it wrote to the order — so the itemisation
+            adds up to the amount that will actually be charged. */}
+        <BookingFeeLine c={c} fmt={fmt} />
         {taxSummary?.mode === "exclusive" && (
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
             <span style={{ fontSize: 14, opacity: 0.75 }}>Tax</span>
@@ -536,6 +541,55 @@ function FieldError({ children }: { children: ReactNode }) {
   return <p style={{ color: "#ef4444", fontSize: 13, marginTop: 4 }}>{children}</p>;
 }
 
+/**
+ * The artist's booking fee, itemised ABOVE the total (1.4 disclosure).
+ *
+ * This is the line that did not exist. The fee was added to `total_amount` on
+ * the server and named on no surface, so a buyer choosing £50 of tickets was
+ * shown "Total £50" and charged £52.75 — and even after a discount, where
+ * `Subtotal` and `Discount` were both drawn, the total did not reconcile with
+ * them and nothing explained why. A mandatory charge disclosed only on the
+ * receipt is what the FTC's junk-fee rule, the CMA's guidance and the EU
+ * price-indication rules exist to prevent.
+ *
+ * Renders NOTHING when the fee is zero. The payload always arrives (so callers
+ * can rely on its shape), which means "this artist charges no fee" comes down as
+ * a zero — and a "+£0.00 booking fee" row would invent a charge that does not
+ * exist and hint that one might appear later. There is nothing to disclose when
+ * nothing is charged.
+ *
+ * The `Subtotal` row is conditional because `DiscountSummaryLines` above already
+ * draws one whenever a discount applied; without a discount it draws nothing, and
+ * a fee sitting on its own between a heading and a total has nothing to be a fee
+ * ON.
+ */
+function BookingFeeLine({ c, fmt }: { c: Checkout; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  if (!(c.bookingFeeAmount > 0)) return null;
+  const discountDrewSubtotal = c.coupon.discountAmount > 0;
+
+  return (
+    <div
+      data-testid="booking-fee-summary"
+      style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 8 }}
+    >
+      {!discountDrewSubtotal && (
+        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+          <span style={{ opacity: 0.75 }}>Subtotal</span>
+          <span style={{ opacity: 0.75 }}>{fmt(c.subTotal)}</span>
+        </div>
+      )}
+      <div
+        data-testid="booking-fee-line"
+        style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}
+      >
+        <span style={{ color: theme.colors.text, opacity: 0.75 }}>Booking fee</span>
+        <span style={{ color: theme.colors.text, opacity: 0.75 }}>{fmt(c.bookingFeeAmount)}</span>
+      </div>
+    </div>
+  );
+}
+
 // ── Shared bits ───────────────────────────────────────────────────────────────
 function ActionBar({
   c,
@@ -572,6 +626,10 @@ function ActionBar({
           appliedCoupons={c.coupon.appliedCoupons}
           fmt={fmt}
         />
+        {/* `Total` below is the figure the buyer reads as final while they are
+            still choosing quantities — so the fee has to be named HERE, not
+            three screens later. */}
+        <BookingFeeLine c={c} fmt={fmt} />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontWeight: 600 }}>Total</span>
           <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>