@tribe-nest/forge 3.24.0 → 3.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.24.0",
+  "version": "3.26.0",
   "publishConfig": {
     "access": "public"
   },
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@types/react": "^19.1.2",
+    "simple-icons": "^16.28.0",
     "typescript": "~5.8.3"
   },
   "license": "ISC"

package/src/client/activeFunnel.ts

@@ -0,0 +1,35 @@
+// Which funnel the visitor is currently inside, held outside React so the
+// shared axios client can read it.
+//
+// Why a module singleton rather than a prop or a hook argument: a funnel's UI
+// is written per site, increasingly by an agent, and the pages that CONVERT (a
+// booking, a checkout, an email-list join) are ordinary Forge components that
+// know nothing about funnels. Any design where each capture call has to pass
+// the funnel produces attribution that is missing on whichever call someone
+// forgot, which reads as complete and undercounts in silence. Put it in the
+// transport and no call site can omit it.
+//
+// Scope: one active funnel at a time. Funnels are page-level flows and nesting
+// them has no meaning, so a nested <Funnel> replacing its parent is the honest
+// behaviour rather than a merge.
+
+let activeFunnelId: string | null = null;
+
+/** Mark this funnel as the one the visitor is currently in. */
+export function setActiveFunnel(funnelId: string | null): void {
+  activeFunnelId = funnelId;
+}
+
+/**
+ * The active funnel id, or null outside a funnel.
+ *
+ * Deliberately NOT the funnel session id. Attribution answers "which funnel
+ * brought in this lead", and the funnel id alone answers it. The session id is
+ * a behavioural key, so attaching it to a named person is the thing consent
+ * regimes exist for, and it is also the one value that vanishes in private mode
+ * (`getFunnelSessionId` returns null), which would make attribution degrade
+ * exactly where the funnel id does not.
+ */
+export function getActiveFunnelId(): string | null {
+  return activeFunnelId;
+}

package/src/client/createForgeClient.ts

@@ -1,4 +1,5 @@
 import axios, { type AxiosError, type AxiosInstance } from "axios";
+import { getActiveFunnelId } from "./activeFunnel";
 
 /**
  * Access-token refresh (backend §7 cutover). Access tokens live ~15 minutes;
@@ -60,6 +61,14 @@ export const createForgeClient = ({
       config.headers["x-forge-key"] = publishableKey;
     }
 
+    // First-touch funnel attribution. Rides every request rather than every
+    // capture call, so a lead that arrives through a booking or a checkout is
+    // attributed the same as one that arrives through a form.
+    const funnelId = getActiveFunnelId();
+    if (funnelId) {
+      config.headers["x-funnel-id"] = funnelId;
+    }
+
     const token = getToken?.();
     if (token) {
       config.headers["authorization"] = `Bearer ${token}`;

package/src/contexts/CartContext.tsx

@@ -1,5 +1,5 @@
 "use client";
-import type { ProductDeliveryType } from "../types/models";
+import type { IBookingFee, ProductDeliveryType } from "../types/models";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import { useEffect } from "react";
@@ -92,6 +92,13 @@ export type TicketCartItem = {
    * chosen amount has to arrive in a field the server actually reads.
    */
   ticketMeta: Record<string, { title: string; price: number; pwywAmount?: number }>;
+  /**
+   * The event's RESOLVED booking fee, captured when the modal put the tickets
+   * here, so the cart checkout can show the fee line the buyer will be charged
+   * (an estimate until start-payment answers; the server figure then wins).
+   * Absent on carts saved before the field existed, which renders as no line.
+   */
+  bookingFee?: IBookingFee | null;
 };
 
 interface CartContextType {

package/src/data/queries/useForms.ts

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import type { FormData, FormAnswerEntry } from "../../types/models";
 import { useForge } from "../../provider/ForgeProvider";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -18,14 +19,58 @@ export function usePublicForm(formId?: string) {
   });
 }
 
-/** Submit answers to a public form. */
+export interface SubmitPublicFormInput {
+  answers: FormAnswerEntry[];
+  /**
+   * Send this whenever the form collects an email.
+   *
+   * It is what resolves the submission to a CRM contact, and therefore what
+   * makes the lead attributable to the funnel at all. A submission without it
+   * is stored, but anonymous: no contact, no attribution, and no automation,
+   * because the form's automations are contact-scoped.
+   */
+  respondentEmail?: string;
+  respondentName?: string;
+  metadata?: Record<string, unknown>;
+}
+
+function newIdempotencyKey(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  return `fk_${Date.now().toString(36)}_${Math.floor(Math.random() * 1e9).toString(36)}`;
+}
+
+/**
+ * Submit a public form.
+ *
+ * Accepts either a bare answers array or the full input. The full form is what
+ * a funnel step wants, because `respondentEmail` is what turns a submission
+ * into a lead.
+ *
+ * **Idempotency.** A key is minted per mount and rotated after each successful
+ * submit. A double-click or a network retry therefore reuses it and replays the
+ * first submission instead of writing a second row or re-firing the form's
+ * automations. Going back and deliberately submitting again is a new mount, so
+ * a new key and a genuine second submission. Nothing is ever overwritten: a
+ * submission can be the record of what somebody agreed to.
+ */
 export function useSubmitPublicForm(formId?: string) {
   const { client } = useForge();
+  const keyRef = useRef<string>(newIdempotencyKey());
 
   return useMutation({
-    mutationFn: async (answers: FormAnswerEntry[]) => {
-      const res = await client.post(`/public/forms/${formId}/submit`, { answers });
+    mutationFn: async (input: FormAnswerEntry[] | SubmitPublicFormInput) => {
+      const payload = Array.isArray(input) ? { answers: input } : input;
+      const res = await client.post(`/public/forms/${formId}/submit`, {
+        ...payload,
+        idempotencyKey: keyRef.current,
+      });
       return res.data;
     },
+    // Rotate only once the write has landed. A failed submit keeps the key so
+    // the retry is recognised as the same act; a successful one starts a fresh
+    // act, so a form left mounted for corrections records each as its own.
+    onSuccess: () => {
+      keyRef.current = newIdempotencyKey();
+    },
   });
 }

package/src/data/queries/usePageActions.ts

@@ -5,9 +5,9 @@ export type PageActionType =
   | "newsletter"
   | "lead_magnet"
   | "offer"
+  // Products on a page. `config.isAddon` decides whether they can be bought on
+  // their own or only alongside what the page is selling.
   | "product_cards"
-  // Specific products sold as attachments to the page's own entity.
-  | "addons"
   | "donation"
   | "membership"
   | "button";

package/src/types/models.ts

@@ -1893,6 +1893,11 @@ export interface IMusicLinkDestination {
 
 /** Per-link presentation, layered over the site theme by `MusicLinkPage`. */
 export interface IMusicLinkTheme {
+  /**
+   * Which of the five layouts to render. Composition, not colour: the tokens
+   * below tune whichever one is chosen.
+   */
+  style?: "classic" | "immersive" | "split" | "minimal" | "compact";
   mode?: "light" | "dark";
   background?: string;
   text?: string;
@@ -1911,6 +1916,8 @@ export interface IMusicLink {
   artistName: string | null;
   description: string | null;
   artworkUrl: string | null;
+  /** 30-second preview, played over the artwork. Apple's, which does not expire. */
+  previewUrl: string | null;
   releaseDate: string | null;
   theme: IMusicLinkTheme | null;
   destinations: IMusicLinkDestination[];

package/src/ui/headless/checkout/useCheckout.ts

@@ -23,6 +23,7 @@ import { holdExpiredMessage, isHoldExpiredError } from "./inventoryHold";
 import { useInventoryHold } from "./useInventoryHold";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
+import { computeBookingFeeAmount } from "../../format/bookingFee";
 import { ProductDeliveryType, PaymentProviderName, type ApiError, type PublicTaxQuote } from "../../../types/models";
 
 /** The four checkout stages (guest details are skipped for a logged-in buyer;
@@ -114,7 +115,15 @@ function messageOf(e: unknown): string | undefined {
 export function useCheckout(opts: UseCheckoutOptions = {}) {
   const finalisePath = opts.finalisePath ?? "/checkout/finalise";
   const { user } = usePublicAuth();
-  const { cartItems, ticketItems, isBundle, isReady: isCartReady } = useCart();
+  const { cartItems, ticketItems, isReady: isCartReady } = useCart();
+  /**
+   * Any cart holding tickets settles through the checkout (bundle) engine,
+   * even with NO products beside them. Tickets have no single-surface order
+   * path from this page: `createOrder` only carries `cartItems`, so routing a
+   * tickets-only cart there minted an order with a total and no lines. (The
+   * event modal's own direct flow is unaffected; it never comes through here.)
+   */
+  const usesCheckoutEngine = ticketItems.length > 0;
   const { data: countries = [] } = useShippingCountries();
   const shippingRates = useShippingRates();
   const createOrder = useCreateOrder();
@@ -145,6 +154,27 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     [cartItems, ticketItems],
   );
 
+  /**
+   * The booking fee the ticket lines will be charged, summed per event from the
+   * resolved fee each selection carried out of the modal. An ESTIMATE with the
+   * same honesty contract as the modal's own line: it keeps the running total
+   * explained while no charge exists, and the server's charged total supersedes
+   * it the moment start-payment answers.
+   */
+  const bookingFeeCost = useMemo(
+    () =>
+      round2(
+        ticketItems.reduce((sum, t) => {
+          const ticketSubtotal = Object.entries(t.tickets).reduce(
+            (acc, [id, qty]) => acc + (t.ticketMeta[id]?.price ?? 0) * qty,
+            0,
+          );
+          return sum + computeBookingFeeAmount({ subtotal: ticketSubtotal, fee: t.bookingFee });
+        }, 0),
+      ),
+    [ticketItems],
+  );
+
   const [currentStage, setCurrentStage] = useState<CheckoutStage>("userDetails");
   const [guestUserData, setGuestUserData] = useState<GuestUserData | null>(null);
   const [shippingData, setShippingData] = useState<CheckoutShippingData>();
@@ -211,10 +241,10 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     if (currentStage !== "payment" || !isPaidCheckout || startedRef.current) return;
     startedRef.current = true;
 
-    // A cart spanning tickets AND products goes through the bundle engine so
-    // both settle on one payment. Every single-surface cart keeps the flow it
-    // has always had, below.
-    if (isBundle) {
+    // A cart holding tickets (with or without products) goes through the
+    // bundle engine so everything settles on one payment. A products-only
+    // cart keeps the flow it has always had, below.
+    if (usesCheckoutEngine) {
       const enteredCode = couponCode.trim() || undefined;
       createCheckout
         .mutateAsync({
@@ -457,7 +487,7 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
    * the checkout was created — which for a signed-in buyer with a digital-only
    * cart was on mount, so the code could never be typed at all.
    */
-  const isCouponEditable = isBundle ? !settledCheckoutId : !!orderId;
+  const isCouponEditable = usesCheckoutEngine ? !settledCheckoutId : !!orderId;
 
   /** Fold an apply/remove answer for a bundle back into the summary + payment. */
   const absorbBundleCoupon = useCallback((data: ApplyCheckoutCouponResult) => {
@@ -479,7 +509,7 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
   }, []);
 
   const applyCoupon = useCallback(async () => {
-    if (isBundle) {
+    if (usesCheckoutEngine) {
       if (!couponCode.trim()) return;
       setCouponError("");
       // Not created yet (a guest, or a cart with a shipping stage still ahead):
@@ -534,10 +564,10 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     } finally {
       setIsApplyingCoupon(false);
     }
-  }, [couponCode, orderId, checkoutId, finalisePath, applyCouponMutation, applyCheckoutCouponMutation, absorbBundleCoupon, isBundle]);
+  }, [couponCode, orderId, checkoutId, finalisePath, applyCouponMutation, applyCheckoutCouponMutation, absorbBundleCoupon, usesCheckoutEngine]);
 
   const removeCoupon = useCallback(async () => {
-    if (isBundle) {
+    if (usesCheckoutEngine) {
       setCouponError("");
       // Nothing created yet — the staged code simply never travels.
       if (!checkoutId) {
@@ -592,7 +622,7 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     } finally {
       setIsApplyingCoupon(false);
     }
-  }, [orderId, checkoutId, finalisePath, applyCouponMutation, applyCheckoutCouponMutation, absorbBundleCoupon, isBundle]);
+  }, [orderId, checkoutId, finalisePath, applyCouponMutation, applyCheckoutCouponMutation, absorbBundleCoupon, usesCheckoutEngine]);
 
   // ── Free checkout (nothing to charge) ───────────────────────────────────────
   /** Create the (free) order and return its id so the caller can navigate to the
@@ -660,6 +690,8 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     isCartReady,
     subTotal,
     shippingCost,
+    /** Estimated booking fee across the cart's ticket lines; 0 with no tickets. */
+    bookingFeeCost,
     discountAmount,
     hasPhysicalProduct,
     isPaidCheckout,
@@ -695,7 +727,9 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
      * page instead of waiting for a payment that will never be asked for.
      */
     settledCheckoutId,
-    isBundle,
+    /** True when this checkout settles through the bundle engine (any cart
+        holding tickets), which is what the coupon field and summary key off. */
+    isBundle: usesCheckoutEngine,
     ticketItems,
     isCreatingOrder: createOrder.isPending || flow.isStarting,
     startError,
@@ -731,7 +765,11 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     paymentId: effectivePayment?.paymentId,
     chargedAmount: effectivePayment?.chargedAmount ?? 0,
     chargedCurrency: effectivePayment?.chargedCurrency ?? "",
-    returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${finalisePath}?orderId=${orderId || ""}`,
+    // The SAME bundle-aware URL handed to start-payment. This was previously
+    // rebuilt here from `orderId` alone, so a bundle (which has a checkoutId
+    // and no order) confirmed its Stripe payment with `?orderId=` empty and
+    // landed on a finalise page that could not resolve anything.
+    returnUrl,
     // ── Free checkout ──────────────────────────────────────────────────────────
     isFreeCheckoutLoading,
     freeCheckout,

package/src/ui/headless/event/useEventCheckout.ts

@@ -264,6 +264,9 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       eventSlug: slug ?? event.id,
       eventTitle: event.title,
       coverImage: event.media?.find((m: { type: string }) => m.type === "image")?.url,
+      // The resolved fee travels with the selection so the CART checkout can
+      // show the booking-fee line this modal already shows.
+      bookingFee: event.bookingFee ?? null,
       tickets: { ...selectedTickets },
       ticketMeta: Object.fromEntries(
         event.tickets

package/src/ui/headless/funnel/Funnel.tsx

@@ -1,4 +1,5 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, type ReactNode } from "react";
+import { setActiveFunnel } from "../../../client/activeFunnel";
 import { useTrackEvent } from "../../../data/queries/useAnalytics";
 import { useCookieConsent } from "../consent/useCookieConsent";
 import { getFunnelSessionId, markOnce, resetFunnelSession } from "./funnelSession";
@@ -114,6 +115,18 @@ export function Funnel({ id, steps, name, enabled = true, requireConsent = true,
   const emitRef = useRef(emit);
   emitRef.current = emit;
 
+  // Attribution is registered on `enabled`, NOT on `on`. Analytics is what
+  // cookie consent governs; "this lead came from this funnel" is first-party
+  // business data about a conversion the visitor deliberately started, and
+  // gating it behind performance consent would silently drop the attribution of
+  // every lead who declined cookies. Nothing behavioural is attached to the
+  // person: the funnel id travels, the funnel SESSION id never does.
+  useEffect(() => {
+    if (!enabled) return;
+    setActiveFunnel(id);
+    return () => setActiveFunnel(null);
+  }, [enabled, id]);
+
   useEffect(() => {
     if (!on) return;
     if (!markOnce(id, "entered")) return;

package/src/ui/styled/BundleConfirmation.tsx

@@ -1,10 +1,17 @@
-import { useEffect } from "react";
+import { useEffect, type ReactNode } from "react";
 import { Clock, Loader2, Ticket, XCircle } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, alpha } from "./Confirmation";
 import { useCheckoutFinalize } from "../../data/queries/useFinalize";
 import { useCart } from "../../contexts/CartContext";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+
+/** The card's padded, centered interior — the shell itself has neither, and
+    content dropped in bare sits left-aligned against the card edge. */
+function Body({ children }: { children: ReactNode }) {
+  return <div style={{ padding: "40px 32px", textAlign: "center" }}>{children}</div>;
+}
 
 export interface BundleConfirmationProps {
   checkoutId: string;
@@ -32,6 +39,9 @@ export function BundleConfirmation({
 }: BundleConfirmationProps) {
   const theme = useForgeTheme();
   const { clearCart } = useCart();
+  // A guest has no account screen behind "View your orders": the link would
+  // land them on a login wall for an order their EMAIL is the receipt for.
+  const { user } = usePublicAuth();
   const failedRedirect = redirectStatus === "failed";
 
   const { data, isLoading, isError } = useCheckoutFinalize(
@@ -73,12 +83,14 @@ export function BundleConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationCard>
-          <WarnSeal icon={<XCircle size={28} />} />
-          <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment didn&apos;t go through</h1>
-          <p style={{ opacity: 0.75, marginBottom: 20 }}>
-            Nothing was charged and your cart is still here. You can try again.
-          </p>
-          {link(checkoutPath, "Return to checkout", true)}
+          <Body>
+            <WarnSeal icon={<XCircle size={28} />} />
+            <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment didn&apos;t go through</h1>
+            <p style={{ opacity: 0.75, marginBottom: 20 }}>
+              Nothing was charged and your cart is still here. You can try again.
+            </p>
+            {link(checkoutPath, "Return to checkout", true)}
+          </Body>
         </ConfirmationCard>
       </ConfirmationStage>
     );
@@ -88,8 +100,11 @@ export function BundleConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationCard>
-          <Loader2 size={28} style={{ animation: "spin 1s linear infinite" }} />
-          <h1 style={{ fontSize: 20, fontWeight: 700, marginTop: 12 }}>Confirming your order…</h1>
+          <Body>
+            <Loader2 size={28} style={{ animation: "cc-spin 1s linear infinite" }} />
+            <style>{"@keyframes cc-spin{to{transform:rotate(360deg)}}"}</style>
+            <h1 style={{ fontSize: 20, fontWeight: 700, marginTop: 12 }}>Confirming your order…</h1>
+          </Body>
         </ConfirmationCard>
       </ConfirmationStage>
     );
@@ -102,16 +117,18 @@ export function BundleConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationCard>
-          <WarnSeal icon={<Clock size={28} />} />
-          <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment received</h1>
-          <p style={{ opacity: 0.75, marginBottom: 20 }}>
-            Your payment went through and part of your order is confirmed. We&apos;re still finishing the rest. It
-            will arrive by email shortly, with nothing more to pay.
-          </p>
-          <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
-            {link(accountPath, "View your orders", true)}
-            {link(explorePath, "Continue shopping")}
-          </div>
+          <Body>
+            <WarnSeal icon={<Clock size={28} />} />
+            <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment received</h1>
+            <p style={{ opacity: 0.75, marginBottom: 20 }}>
+              Your payment went through and part of your order is confirmed. We&apos;re still finishing the rest. It
+              will arrive by email shortly, with nothing more to pay.
+            </p>
+            <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
+              {user && link(accountPath, "View your orders", true)}
+              {link(explorePath, "Continue shopping", !user)}
+            </div>
+          </Body>
         </ConfirmationCard>
       </ConfirmationStage>
     );
@@ -123,38 +140,52 @@ export function BundleConfirmation({
   return (
     <ConfirmationStage>
       <ConfirmationCard>
-        <CheckSeal />
-        <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>You&apos;re all set</h1>
-        <p style={{ opacity: 0.75, marginBottom: 16 }}>
-          Paid in one go. {ticketChildren > 0 && "Your tickets are on their way by email"}
-          {ticketChildren > 0 && orderChildren > 0 && ", and "}
-          {orderChildren > 0 && `${ticketChildren > 0 ? "your order is confirmed" : "Your order is confirmed"}`}.
-        </p>
-
-        {ticketChildren > 0 && (
-          <div
+        <Body>
+          <CheckSeal />
+          <p
             style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "8px 14px",
-              borderRadius: theme.cornerRadius,
-              background: alpha(theme.colors.primary, 0.08),
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
               color: theme.colors.primary,
-              fontSize: 14,
-              fontWeight: 600,
-              marginBottom: 20,
             }}
           >
-            <Ticket size={16} />
-            Tickets emailed to you
-          </div>
-        )}
+            Order confirmed
+          </p>
+          <h1 style={{ fontSize: 24, fontWeight: 800, margin: "0 0 8px" }}>You&apos;re all set</h1>
+          <p style={{ opacity: 0.75, margin: "0 auto 16px", maxWidth: 360, lineHeight: 1.55 }}>
+            Paid in one go. {ticketChildren > 0 && "Your tickets are on their way by email"}
+            {ticketChildren > 0 && orderChildren > 0 && ", and "}
+            {orderChildren > 0 && `${ticketChildren > 0 ? "your order is confirmed" : "Your order is confirmed"}`}.
+          </p>
 
-        <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
-          {link(accountPath, "View your orders", true)}
-          {link(explorePath, "Continue shopping")}
-        </div>
+          {ticketChildren > 0 && (
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "8px 14px",
+                borderRadius: theme.cornerRadius,
+                background: alpha(theme.colors.primary, 0.08),
+                color: theme.colors.primary,
+                fontSize: 14,
+                fontWeight: 600,
+                marginBottom: 20,
+              }}
+            >
+              <Ticket size={16} />
+              Tickets emailed to you
+            </div>
+          )}
+
+          <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
+            {user && link(accountPath, "View your orders", true)}
+            {link(explorePath, "Continue shopping", !user)}
+          </div>
+        </Body>
       </ConfirmationCard>
     </ConfirmationStage>
   );

package/src/ui/styled/Checkout.tsx

@@ -177,7 +177,9 @@ export function Checkout({
     return <Loading fullPage />;
   }
 
-  if (c.cartItems.length === 0) {
+  // Tickets count: a cart holding only tickets (buyer skipped the add-ons)
+  // is NOT empty, and this page is the only checkout it has.
+  if (c.cartItems.length === 0 && c.ticketItems.length === 0) {
     return (
       <div
         className={["w-full max-w-4xl mx-auto p-6", className].filter(Boolean).join(" ")}
@@ -622,6 +624,34 @@ export function Checkout({
                 Items
               </h4>
               <div className="space-y-2">
+                {/* Ticket lines first: they are what the bundle is FOR, and the
+                    subtotal already includes them, so a summary without them
+                    reads as a wrong total. */}
+                {c.ticketItems.flatMap((t) =>
+                  Object.entries(t.tickets)
+                    .filter(([, qty]) => qty > 0)
+                    .map(([ticketId, qty]) => {
+                      const meta = t.ticketMeta[ticketId];
+                      return (
+                        <div key={`${t.eventId}-${ticketId}`} className="flex justify-between text-sm" data-testid="summary-ticket-line">
+                          <div className="flex-1">
+                            <p className="font-medium" style={{ color: theme.colors.text }}>
+                              {meta?.title ?? "Ticket"}
+                            </p>
+                            <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                              {t.eventTitle}
+                            </p>
+                            <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                              Qty: {qty}
+                            </p>
+                          </div>
+                          <p className="font-medium" style={{ color: theme.colors.text }}>
+                            {formatCurrency((meta?.price ?? 0) * qty)}
+                          </p>
+                        </div>
+                      );
+                    }),
+                )}
                 {c.cartItems.map((item) => (
                   <div
                     key={`${item.productId}-${item.productVariantId}-${item.isGift}-${item.recipientEmail}`}
@@ -756,6 +786,15 @@ export function Checkout({
                   <span style={{ color: theme.colors.text }}>{formatCurrency(c.shippingCost)}</span>
                 </div>
               )}
+              {/* The ticket booking fee, named BEFORE the buyer commits. It is
+                  charged either way; omitting the line here left a total that
+                  jumped past the subtotal with no explanation. */}
+              {c.bookingFeeCost > 0 && (
+                <div className="flex justify-between" data-testid="summary-booking-fee">
+                  <span style={{ color: theme.colors.text }}>Booking fee</span>
+                  <span style={{ color: theme.colors.text }}>{formatCurrency(c.bookingFeeCost)}</span>
+                </div>
+              )}
               {/* Exclusive mode: the authoritative tax line, once the checkout
                   quote is known (added on top of the total). */}
               {taxSummary?.mode === "exclusive" && (
@@ -772,7 +811,7 @@ export function Checkout({
                 <span>
                   {c.chargedTotal
                     ? formatCurrency(c.chargedTotal.amount, c.chargedTotal.currency)
-                    : formatCurrency(c.subTotal + c.shippingCost)}
+                    : formatCurrency(c.subTotal + c.shippingCost + c.bookingFeeCost)}
                 </span>
               </div>
               {/* Inclusive mode: the total already contains tax — break out the