@tribe-nest/forge 1.20.2 → 2.2.0

package/src/ui/headless/funnel/funnelSession.spec.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { getFunnelSessionId, markOnce, resetFunnelSession } from "./funnelSession";
+
+// A tiny in-memory `sessionStorage`. The real one isn't available in a node
+// environment, and the behaviour under test is precisely what happens when it
+// is and isn't there.
+function fakeStorage(): Storage {
+  const map = new Map<string, string>();
+  return {
+    get length() {
+      return map.size;
+    },
+    key: (i: number) => Array.from(map.keys())[i] ?? null,
+    getItem: (k: string) => map.get(k) ?? null,
+    setItem: (k: string, v: string) => void map.set(k, v),
+    removeItem: (k: string) => void map.delete(k),
+    clear: () => map.clear(),
+  } as Storage;
+}
+
+const g = globalThis as unknown as { window?: unknown };
+
+function withStorage(storage: Storage | null) {
+  g.window = storage
+    ? { sessionStorage: storage }
+    : {
+        get sessionStorage(): Storage {
+          // What a browser does when storage is blocked (private mode, or a
+          // cookie policy that denies it) — a throwing getter, not undefined.
+          throw new Error("access denied");
+        },
+      };
+}
+
+describe("funnel session", () => {
+  afterEach(() => {
+    delete g.window;
+    vi.restoreAllMocks();
+  });
+
+  describe("with storage", () => {
+    beforeEach(() => withStorage(fakeStorage()));
+
+    it("mints one id per funnel and keeps returning it", () => {
+      const first = getFunnelSessionId("launch");
+      expect(first).toBeTruthy();
+      // Stability is the whole point: a new id per call would make every step
+      // look like a different visitor and report total drop-off everywhere.
+      expect(getFunnelSessionId("launch")).toBe(first);
+    });
+
+    it("keeps separate funnels separate", () => {
+      expect(getFunnelSessionId("a")).not.toBe(getFunnelSessionId("b"));
+    });
+
+    it("marks a thing once, then reports it already seen", () => {
+      expect(markOnce("launch", "view_offer")).toBe(true);
+      expect(markOnce("launch", "view_offer")).toBe(false);
+      // Different step, same funnel — unaffected.
+      expect(markOnce("launch", "view_checkout")).toBe(true);
+    });
+
+    it("restarting clears the id and every mark for that funnel only", () => {
+      const before = getFunnelSessionId("launch");
+      markOnce("launch", "view_offer");
+      const otherId = getFunnelSessionId("other");
+      markOnce("other", "view_offer");
+
+      resetFunnelSession("launch");
+
+      expect(getFunnelSessionId("launch")).not.toBe(before);
+      expect(markOnce("launch", "view_offer")).toBe(true);
+      // The neighbouring funnel is untouched.
+      expect(getFunnelSessionId("other")).toBe(otherId);
+      expect(markOnce("other", "view_offer")).toBe(false);
+    });
+  });
+
+  describe("without storage", () => {
+    beforeEach(() => withStorage(null));
+
+    it("returns no session id rather than inventing one", () => {
+      // Null is the honest answer: the report degrades to per-step totals it
+      // can't stitch, which is better than a fabricated per-call id that would
+      // read as a fresh visitor at every step.
+      expect(getFunnelSessionId("launch")).toBeNull();
+    });
+
+    it("treats every mark as first-time, so events still fire", () => {
+      // Erring towards emitting: a duplicate event is noise, a missing one is a
+      // hole in the funnel.
+      expect(markOnce("launch", "view_offer")).toBe(true);
+      expect(markOnce("launch", "view_offer")).toBe(true);
+    });
+
+    it("restarting is a no-op rather than a crash", () => {
+      expect(() => resetFunnelSession("launch")).not.toThrow();
+    });
+  });
+
+  describe("on the server", () => {
+    it("has no session and never touches storage", () => {
+      delete g.window;
+      expect(getFunnelSessionId("launch")).toBeNull();
+      expect(markOnce("launch", "entered")).toBe(true);
+    });
+  });
+});

package/src/ui/headless/funnel/funnelSession.ts

@@ -0,0 +1,88 @@
+// Funnel session identity + per-session de-duplication.
+//
+// A funnel usually spans several PAGES, not several components, so the session
+// has to survive a full navigation. `sessionStorage` does exactly that (same
+// tab, same origin) and dies with the tab, which is the lifetime we want: one
+// visitor attempt at one funnel.
+
+const SESSION_PREFIX = "tribe_nest_funnel_";
+
+function safeStorage(): Storage | null {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.sessionStorage;
+  } catch {
+    // Private mode / storage disabled.
+    return null;
+  }
+}
+
+function newId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  return `fs_${Date.now().toString(36)}_${Math.floor(Math.random() * 1e9).toString(36)}`;
+}
+
+/**
+ * The visitor's id for THIS funnel, minted on first use.
+ *
+ * Returns `null` when storage is unavailable. That is not a failure: step
+ * counts still work without it (they're plain event totals), only per-session
+ * stitching — and therefore drop-off — degrades. Callers must handle null
+ * rather than inventing a per-call id, which would make every step look like a
+ * different visitor and report 100% drop-off everywhere.
+ */
+export function getFunnelSessionId(funnelId: string): string | null {
+  const storage = safeStorage();
+  if (!storage) return null;
+  const key = `${SESSION_PREFIX}${funnelId}_sid`;
+  try {
+    let id = storage.getItem(key);
+    if (!id) {
+      id = newId();
+      storage.setItem(key, id);
+    }
+    return id;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Record that `marker` already fired for this funnel session, returning whether
+ * it was the FIRST time. Keeps back-navigation and remounts from re-emitting a
+ * step view. Without storage everything reads as first-time, which is the safe
+ * direction: an extra event is noise, a missing one is a hole in the report.
+ */
+export function markOnce(funnelId: string, marker: string): boolean {
+  const storage = safeStorage();
+  if (!storage) return true;
+  const key = `${SESSION_PREFIX}${funnelId}_seen_${marker}`;
+  try {
+    if (storage.getItem(key)) return false;
+    storage.setItem(key, "1");
+    return true;
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Forget this funnel session — the next event starts a fresh one. Use when a
+ * visitor deliberately restarts (a "start over" control), not on completion:
+ * a converted session must stay identifiable for the rest of the tab.
+ */
+export function resetFunnelSession(funnelId: string): void {
+  const storage = safeStorage();
+  if (!storage) return;
+  try {
+    const prefix = `${SESSION_PREFIX}${funnelId}_`;
+    const doomed: string[] = [];
+    for (let i = 0; i < storage.length; i++) {
+      const key = storage.key(i);
+      if (key?.startsWith(prefix)) doomed.push(key);
+    }
+    for (const key of doomed) storage.removeItem(key);
+  } catch {
+    // Nothing to clear.
+  }
+}

package/src/ui/headless/funnel/index.ts

@@ -0,0 +1,3 @@
+export { Funnel, useFunnel, FUNNEL_EVENTS, type FunnelProps, type FunnelContextValue } from "./Funnel";
+export { useFunnelStep, type FunnelStepApi, type UseFunnelStepOptions } from "./useFunnelStep";
+export { getFunnelSessionId, resetFunnelSession } from "./funnelSession";

package/src/ui/headless/funnel/useFunnelStep.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useFunnel } from "./Funnel";
+
+export interface FunnelStepApi {
+  stepId: string;
+  /** Position in the funnel's declared order, or -1 when the step wasn't declared. */
+  index: number;
+  /** Whether this step is inside a `<Funnel>` at all. False makes every call a no-op. */
+  tracked: boolean;
+  /** Mark this step's goal as met — call it on submit/purchase, not on render. */
+  complete(data?: Record<string, unknown>): void;
+  /** Terminal success for the whole funnel. Usually called alongside the last step's `complete()`. */
+  convert(data?: Record<string, unknown>): void;
+}
+
+export interface UseFunnelStepOptions {
+  /**
+   * Emit the "reached this step" event on mount. Default `true`.
+   *
+   * Set `false` when a nested component calls this hook only to get
+   * `complete()` — though it rarely matters, since a view is recorded once per
+   * visitor per step regardless of how many callers ask.
+   */
+  trackView?: boolean;
+}
+
+/**
+ * Declare that the calling component IS a funnel step.
+ *
+ * On mount it records that the visitor reached this step; the returned
+ * `complete()` records that the step's goal was actually met. Those are
+ * deliberately different events — a step few people reach is an upstream
+ * problem, a step many reach and few complete is a problem with the step — so
+ * never call `complete()` during render.
+ *
+ *     const step = useFunnelStep("optin");
+ *     return <EmailListForm onSuccess={() => step.complete()} />;
+ *
+ * Outside a `<Funnel>` it returns a working no-op (`tracked: false`), so a step
+ * page can be rendered standalone — or lifted out of its funnel — without any
+ * null-checking at the call site.
+ */
+export function useFunnelStep(stepId: string, options?: UseFunnelStepOptions): FunnelStepApi {
+  const funnel = useFunnel();
+  const trackView = options?.trackView ?? true;
+  const index = funnel ? funnel.indexOf(stepId) : -1;
+
+  // The context value is rebuilt whenever the funnel's emitter identity changes.
+  // Reading it through a ref keeps the view effect keyed on what actually
+  // identifies the step, so a re-render can't re-fire it.
+  const funnelRef = useRef(funnel);
+  funnelRef.current = funnel;
+
+  useEffect(() => {
+    if (!trackView) return;
+    funnelRef.current?.viewStep(stepId);
+  }, [stepId, trackView, funnel?.funnelId]);
+
+  const complete = useCallback(
+    (data?: Record<string, unknown>) => funnelRef.current?.completeStep(stepId, data),
+    [stepId],
+  );
+
+  const convert = useCallback((data?: Record<string, unknown>) => funnelRef.current?.convert(data), []);
+
+  return useMemo<FunnelStepApi>(
+    () => ({ stepId, index, tracked: !!funnel, complete, convert }),
+    [stepId, index, funnel, complete, convert],
+  );
+}

package/src/ui/headless/index.ts

@@ -58,3 +58,6 @@ export * from "./reviews";
 export * from "./document";
 // Work (project management) client-portal headless primitives.
 export * from "./work";
+// Funnel instrumentation — wrap a multi-step flow to record step-through and
+// drop-off on the first-party analytics feed.
+export * from "./funnel";

package/src/ui/index.ts

@@ -59,6 +59,8 @@ export { ContactForm, type ContactFormProps } from "./styled/ContactForm";
 export { Paywall, type PaywallProps } from "./styled/Paywall";
 export { ReactionBar, type ReactionBarProps } from "./styled/ReactionBar";
 export { ProductGrid, type ProductGridProps } from "./styled/ProductGrid";
+export { Addons, type AddonsProps } from "./styled/Addons";
+export { BundleConfirmation, type BundleConfirmationProps } from "./styled/BundleConfirmation";
 export { ProductDetail, type ProductDetailProps } from "./styled/ProductDetail";
 export { MembershipTiers, type MembershipTiersProps } from "./styled/MembershipTiers";
 export { EventsList, type EventsListProps } from "./styled/EventsList";

package/src/ui/styled/Addons.tsx

@@ -0,0 +1,77 @@
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useCart } from "../../contexts/CartContext";
+import { ProductGrid } from "./ProductGrid";
+
+export interface AddonsProps {
+  /** The entity these products attach to — the event on an event page. */
+  entityId?: string;
+  productIds: string[];
+  title?: string;
+  columns?: number;
+  /**
+   * Where product detail lives on this site. Code sites mount `ProductDetail`
+   * at `/i/store/:slug`; Craft sites resolve `/products/:slug` through the
+   * catch-all. Forge has no router and no opinion, so the host says.
+   */
+  productBasePath?: string;
+}
+
+/**
+ * Products sold as add-ons to whatever the page is about — merch you can take
+ * with your ticket, and only with your ticket.
+ *
+ * The card links to the ORDINARY product detail page, carrying `?addonFor=`.
+ * There is no modal and no bespoke buying UI: the buyer gets the same page,
+ * variants, quantity and all, that they'd reach from the shop. `CartProvider`
+ * reads that query param when the item is added and binds the line to the
+ * event, so the product page itself needs no changes and doesn't know add-ons
+ * exist.
+ *
+ * With no ticket in the cart the cards render inert under a label. The rule is
+ * enforced twice more below this: the cart won't check out with an orphaned
+ * add-on, and `POST /public/checkouts` rejects one outright.
+ */
+export function Addons({ entityId, productIds, title, columns = 3, productBasePath = "/i/store" }: AddonsProps) {
+  const t = useThemeTokens();
+  const { hasTicketsFor } = useCart();
+
+  // No entity means nothing to attach to — render the products as plain cards
+  // rather than silently gating forever.
+  const unlocked = !entityId || hasTicketsFor(entityId);
+
+  return (
+    <div data-testid="addons-block" data-addons-locked={unlocked ? "false" : "true"}>
+      {title && <h3 style={{ fontWeight: 600, marginBottom: 12, color: t.text }}>{title}</h3>}
+
+      {!unlocked && (
+        <p
+          data-testid="addons-locked-label"
+          style={{
+            color: t.text,
+            opacity: 0.7,
+            fontSize: 14,
+            margin: "0 0 12px",
+          }}
+        >
+          Select tickets first
+        </p>
+      )}
+
+      <ProductGrid
+        columns={columns}
+        productIds={productIds}
+        emptyLabel="No add-ons available."
+        // Locked: no href, so the cards render as inert, non-clickable tiles.
+        hrefFor={
+          unlocked
+            ? (p) =>
+                `${productBasePath.replace(/\/$/, "")}/${p.slug ?? p.id}${
+                  entityId ? `?addonFor=${encodeURIComponent(entityId)}` : ""
+                }`
+            : undefined
+        }
+        style={!unlocked ? { opacity: 0.55 } : undefined}
+      />
+    </div>
+  );
+}

package/src/ui/styled/BundleConfirmation.tsx

@@ -0,0 +1,161 @@
+import { useEffect } 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";
+
+export interface BundleConfirmationProps {
+  checkoutId: string;
+  /** Stripe's `redirect_status` — lets a failed payment render without polling. */
+  redirectStatus?: string;
+  explorePath?: string;
+  accountPath?: string;
+  checkoutPath?: string;
+}
+
+/**
+ * The return page for a bundle: one payment that bought tickets AND products.
+ *
+ * Both surfaces fulfil server-side off a single finalize call, so there is one
+ * confirmation rather than one per surface — but each surface still sends its
+ * own email (the ticket PDF, the order receipt), because each owns its own
+ * delivery.
+ */
+export function BundleConfirmation({
+  checkoutId,
+  redirectStatus,
+  explorePath = "/i/store",
+  accountPath = "/i/account",
+  checkoutPath = "/i/checkout",
+}: BundleConfirmationProps) {
+  const theme = useForgeTheme();
+  const { clearCart } = useCart();
+  const failedRedirect = redirectStatus === "failed";
+
+  const { data, isLoading, isError } = useCheckoutFinalize(
+    { checkoutId: failedRedirect ? undefined : checkoutId },
+    { pollWhilePending: true },
+  );
+
+  const isComplete = data?.fulfillmentStatus === "complete";
+  const isPartial = data?.fulfillmentStatus === "partial";
+  const isUnpaid = data?.status === "unpaid";
+
+  // Only empty the cart once the money is actually in — a failed or still-
+  // settling payment leaves it intact so the buyer can retry without rebuilding.
+  useEffect(() => {
+    if (isComplete || isPartial) clearCart();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isComplete, isPartial]);
+
+  const onPrimary = theme.colors.textPrimary ?? readableTextOn(theme.colors.primary);
+  const link = (href: string, label: string, primary = false) => (
+    <a
+      href={href}
+      style={{
+        display: "inline-block",
+        padding: "10px 20px",
+        borderRadius: theme.cornerRadius,
+        fontWeight: 600,
+        textDecoration: "none",
+        ...(primary
+          ? { background: theme.colors.primary, color: onPrimary }
+          : { border: `1px solid ${alpha(theme.colors.primary, 0.4)}`, color: theme.colors.text }),
+      }}
+    >
+      {label}
+    </a>
+  );
+
+  if (failedRedirect || isUnpaid) {
+    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)}
+        </ConfirmationCard>
+      </ConfirmationStage>
+    );
+  }
+
+  if (isLoading || (!data && !isError)) {
+    return (
+      <ConfirmationStage>
+        <ConfirmationCard>
+          <Loader2 size={28} style={{ animation: "spin 1s linear infinite" }} />
+          <h1 style={{ fontSize: 20, fontWeight: 700, marginTop: 12 }}>Confirming your order…</h1>
+        </ConfirmationCard>
+      </ConfirmationStage>
+    );
+  }
+
+  // Charged, but a surface hasn't finished. The buyer owes nothing more and the
+  // reconciliation sweep finishes the rest, so say so plainly rather than
+  // showing an error they might act on.
+  if (isPartial) {
+    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>
+        </ConfirmationCard>
+      </ConfirmationStage>
+    );
+  }
+
+  const ticketChildren = (data?.children ?? []).filter((c) => c.sourceType === "event_ticket_order").length;
+  const orderChildren = (data?.children ?? []).filter((c) => c.sourceType === "order").length;
+
+  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
+            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" }}>
+          {link(accountPath, "View your orders", true)}
+          {link(explorePath, "Continue shopping")}
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}

package/src/ui/styled/Cart.tsx

@@ -45,10 +45,15 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
   // Inclusive stores show a muted "incl. tax" caption on the cart total; the
   // exact tax figure only exists once checkout quotes it (display-only).
   const pricesIncludeTax = usePricesIncludeTax();
-  const { cartItems, removeFromCart, isCartOpen, setCartOpen } = useCart();
+  const { cartItems, removeFromCart, ticketItems, removeTickets, isCartOpen, setCartOpen } = useCart();
 
-  const total = cartItems.reduce((sum, i) => sum + i.price * i.quantity, 0);
-  const count = cartItems.length;
+  const ticketTotal = (t: (typeof ticketItems)[number]) =>
+    Object.entries(t.tickets).reduce((sum, [id, qty]) => sum + (t.ticketMeta[id]?.price ?? 0) * qty, 0);
+
+  const total =
+    cartItems.reduce((sum, i) => sum + i.price * i.quantity, 0) +
+    ticketItems.reduce((sum, t) => sum + ticketTotal(t), 0);
+  const count = cartItems.length + ticketItems.length;
   const onPrimary = t.textPrimary || readableTextOn(t.primary);
   const linkFor = (productId: string) => (productHref ? productHref(productId) : `/i/store/${productId}`);
 
@@ -72,6 +77,7 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
         type="button"
         onClick={() => setCartOpen((p) => !p)}
         aria-label="Open cart"
+        data-testid="cart-button"
         className={className}
         style={{
           position: "relative",
@@ -159,10 +165,59 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
             </div>
 
             <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>
-              {count === 0 ? (
-                <p style={{ textAlign: "center", opacity: 0.7 }}>Your cart is empty.</p>
-              ) : (
-                cartItems.map((item) => (
+              {count === 0 && <p style={{ textAlign: "center", opacity: 0.7 }}>Your cart is empty.</p>}
+
+              {ticketItems.map((ticket) => (
+                <div
+                  key={ticket.eventId}
+                  data-testid="cart-ticket-line"
+                  style={{
+                    display: "flex",
+                    gap: 12,
+                    alignItems: "flex-start",
+                    borderBottom: `1px solid ${t.border}`,
+                    paddingBottom: 16,
+                    position: "relative",
+                  }}
+                >
+                  <img
+                    src={ticket.coverImage || undefined}
+                    alt={ticket.eventTitle}
+                    style={{
+                      width: 64,
+                      height: 64,
+                      objectFit: "cover",
+                      borderRadius: t.cornerRadius,
+                      background: `${t.primary}10`,
+                      flexShrink: 0,
+                    }}
+                  />
+                  <div style={{ flex: 1, minWidth: 0, paddingRight: 28 }}>
+                    <div style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {ticket.eventTitle}
+                    </div>
+                    {Object.entries(ticket.tickets).map(([id, qty]) => (
+                      <div key={id} style={{ fontSize: 12, marginTop: 4, opacity: 0.75 }}>
+                        {ticket.ticketMeta[id]?.title ?? "Ticket"} × {qty}
+                      </div>
+                    ))}
+                    <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>{fmt(ticketTotal(ticket))}</div>
+                  </div>
+                  <button
+                    type="button"
+                    // Removing the ticket takes its add-ons with it — they
+                    // cannot be bought on their own, and leaving them would
+                    // produce a checkout the server refuses.
+                    onClick={() => removeTickets(ticket.eventId)}
+                    aria-label="Remove tickets"
+                    style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              ))}
+
+              {cartItems.map((item) => (
                   <div
                     key={item.productId + item.productVariantId + String(item.isGift) + (item.recipientEmail || "")}
                     style={{
@@ -216,6 +271,9 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                         </div>
                       )}
                       <div style={{ fontSize: 12, marginTop: 4, opacity: 0.7 }}>Qty: {item.quantity}</div>
+                      {item.attachedTo && (
+                        <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>Added with your tickets</div>
+                      )}
                     </div>
                     <button
                       type="button"
@@ -226,8 +284,7 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                       <Trash2 size={16} />
                     </button>
                   </div>
-                ))
-              )}
+                ))}
             </div>
 
             {count > 0 && (