@tribe-nest/forge 3.25.0 → 3.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "publishConfig": {
     "access": "public"
   },

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/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

package/src/ui/styled/EventTickets.tsx

@@ -16,6 +16,7 @@ import {
   ticketSeatState,
 } from "../format/ticketAvailability";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { usePageActions } from "../../data/queries/usePageActions";
 import { Loading } from "./Loading";
 import { PaystackPayButton } from "./PaystackPayButton";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
@@ -80,6 +81,20 @@ export function EventTickets({
   const c = useEventCheckout(slug, { finalisePath, onComplete });
   const renderPay = renderPayment ?? registered ?? undefined;
 
+  // Does this page sell add-ons for this event? Same query key as the page's
+  // own <PageActions> mount, so this is a cache read, not a second request.
+  // When add-ons exist, the PRIMARY exit from ticket selection is the cart
+  // (that's what unlocks the add-on grid); direct payment stays the happy
+  // path only on pages without add-ons.
+  const { data: pageActionsData } = usePageActions("event_detail", c.event?.id);
+  const hasAddons = useMemo(
+    () =>
+      (pageActionsData?.actions ?? []).some(
+        (action) => action.type === "product_cards" && Boolean((action.config as Record<string, unknown>)?.isAddon),
+      ),
+    [pageActionsData],
+  );
+
   const [open, setOpen] = useState(false);
 
   const tryClose = (next: boolean) => {
@@ -133,9 +148,20 @@ export function EventTickets({
               renderPayment={renderPay}
               loginPath={loginPath}
               membershipPath={membershipPath}
-              // Selection is safe in the cart now — close so the buyer can go
-              // browse the add-ons.
-              onAddedToCart={() => setOpen(false)}
+              hasAddons={hasAddons}
+              // Selection is safe in the cart now: close, and bring the
+              // freshly unlocked add-on grid into view so the buyer lands on
+              // the next step instead of wherever they left the page.
+              onAddedToCart={() => {
+                setOpen(false);
+                if (typeof document !== "undefined") {
+                  setTimeout(() => {
+                    document
+                      .querySelector('[data-testid="addons-block"]')
+                      ?.scrollIntoView({ behavior: "smooth", block: "center" });
+                  }, 100);
+                }
+              }}
             />
           )}
         </DialogContent>
@@ -152,6 +178,7 @@ function EventTicketsBody({
   fmt,
   renderPayment,
   onAddedToCart,
+  hasAddons,
   loginPath,
   membershipPath,
 }: {
@@ -160,6 +187,7 @@ function EventTicketsBody({
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   onAddedToCart?: () => void;
+  hasAddons?: boolean;
   loginPath?: string;
   membershipPath?: string;
 }) {
@@ -173,6 +201,7 @@ function EventTicketsBody({
           event={event}
           fmt={fmt}
           onAddedToCart={onAddedToCart}
+          hasAddons={hasAddons}
           loginPath={loginPath}
           membershipPath={membershipPath}
         />
@@ -232,6 +261,7 @@ function TicketStep({
   event,
   fmt,
   onAddedToCart,
+  hasAddons,
   loginPath,
   membershipPath,
 }: {
@@ -239,6 +269,7 @@ function TicketStep({
   event: IEvent;
   fmt: (n: number) => string;
   onAddedToCart?: () => void;
+  hasAddons?: boolean;
   loginPath?: string;
   membershipPath?: string;
 }) {
@@ -533,21 +564,37 @@ function TicketStep({
       </div>
 
       {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
-      <ActionBar
-        c={c}
-        fmt={fmt}
-        onNext={c.goToDetails}
-        nextLabel="Continue"
-        // Buying tickets alone still goes straight down the untouched
-        // per-event flow; this exit exists so the buyer can go add merch and
-        // come back with the selection intact.
-        secondary={{
-          label: c.ticketsInCart ? "Update cart" : "Add to cart",
-          onClick: () => {
+      {/* Two shapes of this bar. With add-ons on the page, the PRIMARY action
+          is the cart: that is the only path that unlocks the add-on grid, so
+          it has to be the happy path, with a direct tickets-only checkout as
+          the secondary exit. Without add-ons the original flow is untouched:
+          Continue goes straight to details, the cart is the secondary exit. */}
+      {hasAddons ? (
+        <ActionBar
+          c={c}
+          fmt={fmt}
+          onNext={() => {
             if (c.addTicketsToCart()) onAddedToCart?.();
-          },
-        }}
-      />
+          }}
+          nextLabel={c.ticketsInCart ? "Update cart & choose add-ons" : "Continue to add-ons"}
+          nextTestId="tickets-add-to-cart"
+          secondary={{ label: "Checkout tickets only", onClick: c.goToDetails, testId: "tickets-checkout-only" }}
+        />
+      ) : (
+        <ActionBar
+          c={c}
+          fmt={fmt}
+          onNext={c.goToDetails}
+          nextLabel="Continue"
+          secondary={{
+            label: c.ticketsInCart ? "Update cart" : "Add to cart",
+            onClick: () => {
+              if (c.addTicketsToCart()) onAddedToCart?.();
+            },
+            testId: "tickets-add-to-cart",
+          }}
+        />
+      )}
     </div>
   );
 }
@@ -692,7 +739,13 @@ function DetailsStep({
         fmt={fmt}
         onBack={() => c.setStep("tickets")}
         onNext={onContinue}
-        nextLabel={c.isProcessing ? "Processing…" : "Continue to payment"}
+        // Nothing to pay means no payment step follows, so promising one is a
+        // lie the next screen immediately contradicts. Read off `totalAmount`
+        // rather than the ticket prices because it already carries the booking
+        // fee and any discount: a free ticket with a FLAT booking fee still
+        // costs money and still goes to payment, and a 100%-off code on a paid
+        // ticket does not.
+        nextLabel={c.isProcessing ? "Processing…" : c.totalAmount > 0 ? "Continue to payment" : "Confirm"}
         nextDisabled={c.isProcessing}
       />
     </div>
@@ -865,6 +918,7 @@ function ActionBar({
   onNext,
   nextLabel,
   nextDisabled,
+  nextTestId,
   secondary,
 }: {
   c: Checkout;
@@ -873,8 +927,11 @@ function ActionBar({
   onNext: () => void;
   nextLabel: string;
   nextDisabled?: boolean;
-  /** Extra exit shown next to Back — "Add to cart" on the selection step. */
-  secondary?: { label: string; onClick: () => void };
+  /** Test id for the primary button; the caller says which button is which
+      action, because add-to-cart moves between slots depending on add-ons. */
+  nextTestId?: string;
+  /** Extra exit shown next to Back on the selection step. */
+  secondary?: { label: string; onClick: () => void; testId?: string };
 }) {
   const theme = useForgeTheme();
   return (
@@ -904,7 +961,7 @@ function ActionBar({
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
         {secondary ? (
-          <button data-testid="tickets-add-to-cart" onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
+          <button data-testid={secondary.testId} onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
             {secondary.label}
           </button>
         ) : (
@@ -912,7 +969,12 @@ function ActionBar({
             Back
           </button>
         )}
-        <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
+        <button
+          data-testid={nextTestId}
+          onClick={onNext}
+          disabled={nextDisabled}
+          style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}
+        >
           {nextLabel}
         </button>
       </div>

package/src/ui/styled/PageActions.tsx

@@ -15,7 +15,7 @@ export interface PageActionsProps {
   placement?: string;
   /**
    * Where product detail lives on this site — `/i/store` on code sites,
-   * `/products` on Craft ones. Only the `addons` block uses it.
+   * `/products` on Craft ones. Only add-on product cards use it.
    */
   productBasePath?: string;
   className?: string;
@@ -63,14 +63,11 @@ function ActionRenderer({
     case "offer":
       return <OfferButton productId={c.productId} text={c.text} />;
     case "product_cards":
-      return (
-        <div>
-          {c.title && <h3 style={{ fontWeight: 600, marginBottom: 12 }}>{c.title}</h3>}
-          <ProductGrid columns={c.columns} limit={c.limit} />
-        </div>
-      );
-    case "addons":
-      return (
+      // One config, two buying rules. `isAddon` gates the products behind the
+      // page's own purchase (a ticket on an event page); without it they are
+      // ordinary cards anyone can buy on their own. Both draw the same grid,
+      // which is why this is one action type rather than two.
+      return c.isAddon ? (
         <Addons
           entityId={entityId}
           productIds={c.productIds ?? []}
@@ -78,6 +75,13 @@ function ActionRenderer({
           columns={c.columns}
           productBasePath={productBasePath}
         />
+      ) : (
+        <div>
+          {c.title && <h3 style={{ fontWeight: 600, marginBottom: 12 }}>{c.title}</h3>}
+          {/* Chosen products win; with none chosen the grid falls back to the
+              shop listing capped at `limit`. */}
+          <ProductGrid columns={c.columns} limit={c.limit} productIds={c.productIds} />
+        </div>
       );
     case "donation":
       return <DonationButton donationId={c.donationId} text={c.text} />;

package/src/ui/styled/ProductGrid.tsx

@@ -78,11 +78,24 @@ export function ProductGrid({
   if (isLoading) return <Loading />;
   if (!products.length) return <p style={{ color: t.text, opacity: 0.7 }}>{emptyLabel ?? "No products yet."}</p>;
 
-  // Responsive: each card is at least ~150px wide, but also at least
-  // (container / columns), so it renders `columns` across on wide screens and
-  // wraps to fewer on narrow ones — no fixed column count that cramps mobile.
+  // `columns` is the DESKTOP count. Each card is also given a minimum width, so
+  // the grid drops to fewer columns as the container narrows and reaches a
+  // single column on a phone.
+  //
+  // No media query, because the column count is per-instance data: a static
+  // stylesheet would need a generated class for every distinct `columns` value
+  // on the page. `auto-fill` expresses the same intent with no injected CSS,
+  // and it responds to the CONTAINER rather than the viewport, so a grid in a
+  // narrow column behaves correctly on a wide screen.
+  //
+  // The minimum is what sets the phone breakpoint. At 260px a 390px-wide phone
+  // fits one card ((390 + 16) / (260 + 16) = 1.47), and anything under ~552px
+  // stays single-column; a 3-column desktop is unaffected because
+  // (1200 - 32) / 3 = 389px already exceeds it. Raised from 150px, which fitted
+  // two cramped cards side by side on every phone.
   const gap = 16;
-  const track = `minmax(max(150px, calc((100% - ${(columns - 1) * gap}px) / ${columns})), 1fr)`;
+  const minCardWidth = 260;
+  const track = `minmax(max(${minCardWidth}px, calc((100% - ${(columns - 1) * gap}px) / ${columns})), 1fr)`;
 
   return (
     <div