@tribe-nest/forge 3.11.0 → 3.17.0

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

@@ -5,6 +5,7 @@ import { useEvent, useCreateEventOrder } from "../../../data/queries/useEvents";
 import { usePaymentFlow } from "../../../data/queries/usePaymentFlow";
 import { useCouponField } from "../coupon/useCouponField";
 import { computeBookingFeeAmount } from "../../format/bookingFee";
+import { isPayWhatYouWant, pwywDefaultAmount, resolveUnitPrice, ticketSubtotals } from "../../format/pwyw";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
 
@@ -42,6 +43,12 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
 
   const [step, setStep] = useState<EventCheckoutStep>("tickets");
   const [selectedTickets, setSelectedTickets] = useState<Record<string, number>>({});
+  /**
+   * ticketId → the amount the buyer chose, per unit, on a pay-what-you-want
+   * tier. Absent means "hasn't touched the box", which resolves to the tier's
+   * suggested amount (or its floor) rather than to zero.
+   */
+  const [pwywAmounts, setPwywAmounts] = useState<Record<string, number>>({});
   const [firstName, setFirstName] = useState(user?.firstName ?? "");
   const [lastName, setLastName] = useState(user?.lastName ?? "");
   const [email, setEmail] = useState(user?.email ?? "");
@@ -70,10 +77,39 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
    */
   const coupon = useCouponField();
 
-  const totalAmount = useMemo(() => {
-    if (!event) return 0;
-    return event.tickets.reduce((sum, t) => sum + t.price * (selectedTickets[t.id] ?? 0), 0);
-  }, [event, selectedTickets]);
+  /**
+   * The buyer's effective per-unit choice for every selected PWYW tier —
+   * their typed figure where they have one, the tier's suggested amount where
+   * they have not. This is what gets SENT, so an untouched box is not the same
+   * as choosing the minimum: the suggestion is the default offer.
+   */
+  const effectiveAmounts = useMemo(() => {
+    if (!event) return {} as Record<string, number>;
+    const out: Record<string, number> = {};
+    for (const ticket of event.tickets) {
+      if (!isPayWhatYouWant(ticket) || (selectedTickets[ticket.id] ?? 0) <= 0) continue;
+      out[ticket.id] =
+        pwywAmounts[ticket.id] != null
+          ? resolveUnitPrice(ticket, pwywAmounts[ticket.id])
+          : pwywDefaultAmount(ticket);
+    }
+    return out;
+  }, [event, selectedTickets, pwywAmounts]);
+
+  /**
+   * `paid` is what the buyer owes for tickets; `floor` is the same cart valued
+   * at every tier's minimum. Identical on any cart without a PWYW tier.
+   */
+  const subtotals = useMemo(() => {
+    if (!event) return { paid: 0, floor: 0 };
+    return ticketSubtotals({
+      tickets: event.tickets,
+      quantities: selectedTickets,
+      amounts: effectiveAmounts,
+    });
+  }, [event, selectedTickets, effectiveAmounts]);
+
+  const totalAmount = subtotals.paid;
 
   const ticketCount = useMemo(
     () => Object.values(selectedTickets).reduce((a, b) => a + b, 0),
@@ -100,8 +136,13 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
    * honest while the buyer is still choosing quantities, which is precisely when
    * the disclosure has to happen.
    */
+  //
+  // Estimated off the FLOOR subtotal, never the paid one — the server computes
+  // it that way, so a fan choosing to pay ten times the minimum must not see
+  // (or be quoted) ten times the fee. On a cart with no PWYW tier the two
+  // subtotals are the same number and this is byte-for-byte the old behaviour.
   const bookingFeeAmount =
-    serverFeeAmount ?? computeBookingFeeAmount({ subtotal: totalAmount, fee: bookingFee });
+    serverFeeAmount ?? computeBookingFeeAmount({ subtotal: subtotals.floor, fee: bookingFee });
 
   // Keep only positive quantities in state — a ticket dropped to 0 is removed
   // entirely, so `items` never carries a 0-quantity entry (the orders endpoint
@@ -114,6 +155,26 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       return next;
     });
 
+  /**
+   * The buyer's chosen amount for one PWYW tier, PER UNIT.
+   *
+   * `null` forgets the choice and falls back to the tier's suggested amount —
+   * which is what an emptied input has to mean, since the alternative is
+   * treating a cleared box as a decision to pay zero.
+   *
+   * Deliberately NOT clamped as the buyer types: clamping on every keystroke
+   * makes "1" become the floor the moment it is typed and the buyer can never
+   * reach "15". The clamp is applied when the figure is read
+   * (`effectiveAmounts`), and again by the server, which is the one that counts.
+   */
+  const setTicketAmount = (ticketId: string, amount: number | null) =>
+    setPwywAmounts((prev) => {
+      const next = { ...prev };
+      if (amount != null && Number.isFinite(amount)) next[ticketId] = amount;
+      else delete next[ticketId];
+      return next;
+    });
+
   /**
    * Put this selection in the cart instead of paying for it now — the exit
    * that makes add-ons possible, because the buyer has to be able to leave for
@@ -139,7 +200,20 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       ticketMeta: Object.fromEntries(
         event.tickets
           .filter((t) => (selectedTickets[t.id] ?? 0) > 0)
-          .map((t) => [t.id, { title: t.title, price: t.price }]),
+          // `price` is the per-unit figure the cart displays and the checkout
+          // line carries — so on a PWYW tier it has to be the CHOSEN amount,
+          // not the floor, or the buyer's cart silently forgets what they
+          // picked on the way to an add-on and back. `pwywAmount` travels
+          // beside it because the bundle path sends the two separately: one is
+          // display, one is charged.
+          .map((t) => [
+            t.id,
+            {
+              title: t.title,
+              price: resolveUnitPrice(t, effectiveAmounts[t.id]),
+              ...(isPayWhatYouWant(t) ? { pwywAmount: effectiveAmounts[t.id] } : {}),
+            },
+          ]),
       ),
     });
     return true;
@@ -166,6 +240,9 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
     try {
       const data = await createOrder.mutateAsync({
         items: selectedTickets,
+        // Omitted entirely when nothing in the cart is PWYW, so an ordinary
+        // purchase posts the same body it always did.
+        ...(Object.keys(effectiveAmounts).length > 0 ? { amounts: effectiveAmounts } : {}),
         email,
         firstName,
         lastName,
@@ -236,6 +313,14 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
     setStep,
     selectedTickets,
     setTicketQty,
+    /**
+     * Raw buyer input per PWYW tier — only the tiers whose box has been touched.
+     * Bind an input to this; read `effectiveAmounts` to know what will be sent.
+     */
+    pwywAmounts,
+    setTicketAmount,
+    /** What each selected PWYW tier will actually be charged, per unit. */
+    effectiveAmounts,
     ticketCount,
     // The server's figure wins the moment there is one: start-payment first,
     // then the order response (which is already net of any discount), and only
@@ -249,6 +334,11 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       flow.result?.totalAmount ?? coupon.quote?.totalAmount ?? totalAmount + bookingFeeAmount,
     /** GROSS ticket total, before any discount OR booking fee. */
     subTotal: coupon.quote?.subTotal ?? totalAmount,
+    /**
+     * The same cart at every tier's MINIMUM. Equal to `subTotal` unless a PWYW
+     * tier is selected; the difference is what the buyer chose to add on top.
+     */
+    floorSubTotal: subtotals.floor,
     /**
      * The resolved fee RULE, for surfaces that quote a price with no cart behind
      * it (an event page's "From $25"). `null` when the artist charges none.

package/src/ui/headless/index.ts

@@ -76,3 +76,4 @@ 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";
+export * from "./useVariantSelection";

package/src/ui/headless/useVariantSelection.ts

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

package/src/ui/index.ts

@@ -54,6 +54,10 @@ export {
 export { MembershipCheckout, type MembershipCheckoutProps } from "./styled/MembershipCheckout";
 export { ForgeStripePayment } from "./payment/ForgeStripePayment";
 export { Cart, type CartProps } from "./styled/Cart";
+// The resolver is exported alongside the component because the Craft themes
+// are a separate rendering stack (Tailwind, not inline styles) and cannot use
+// the component — but the legacy `color`/`size` fallback must not diverge.
+export { CartLineOptions, resolveCartLineOptions } from "./styled/CartLineOptions";
 export { CurrencySwitcher, type CurrencySwitcherProps } from "./styled/CurrencySwitcher";
 export { UserMenu, type UserMenuProps } from "./styled/UserMenu";
 export { EmailListForm, type EmailListFormProps } from "./styled/EmailListForm";
@@ -65,6 +69,7 @@ export { ContactForm, type ContactFormProps } from "./styled/ContactForm";
 export { Paywall, type PaywallProps } from "./styled/Paywall";
 export { ReactionBar, type ReactionBarProps } from "./styled/ReactionBar";
 export { ProductGrid, type ProductGridProps } from "./styled/ProductGrid";
+export { ProductBrowseNav, type ProductBrowseNavProps } from "./styled/ProductBrowseNav";
 export { Addons, type AddonsProps } from "./styled/Addons";
 export { BundleConfirmation, type BundleConfirmationProps } from "./styled/BundleConfirmation";
 export { ProductDetail, type ProductDetailProps } from "./styled/ProductDetail";
@@ -152,6 +157,18 @@ export { PriceDisplay, priceTaxCaption, summarizeTaxQuote, type PriceDisplayProp
 // the styled blocks. Resolution stays on the server (`IEvent.bookingFee`); these
 // only do the arithmetic and the wording.
 export { computeBookingFeeAmount, hasBookingFee, describeBookingFee } from "./format/bookingFee";
+// Pay-what-you-want, for a site rendering its own ticket UI. `price` is the
+// FLOOR on a PWYW tier, so an existing "from $X" is already correct; these only
+// resolve what a buyer's chosen amount costs. The clamp here is UX — the server
+// clamps again and is the one that decides what is charged.
+export {
+  isPayWhatYouWant,
+  pwywMaximum,
+  pwywDefaultAmount,
+  clampChosenAmount,
+  resolveUnitPrice,
+  ticketSubtotals,
+} from "./format/pwyw";
 export { usePricesIncludeTax } from "../data/queries/useWebsite";
 
 // PWA (installable code sites) — SW registration + install/push UX (Tier 2).

package/src/ui/styled/AccountDashboard.tsx

@@ -36,6 +36,7 @@ import { Loading } from "./Loading";
 import { formatCountdown } from "./EventWaitlist";
 import { WalletPassButtons } from "./WalletPassButtons";
 import { TicketTransferPanel } from "./TicketTransfer";
+import { CartLineOptions } from "./CartLineOptions";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -924,6 +925,12 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
                     <div key={`${item.productVariantId}-${i}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
                       <span>
                         {item.title} × {item.quantity}
+                        {/* Which version. Two versions of one release carry the
+                            same title, so without this a buyer's own order
+                            history shows what looks like the same thing bought
+                            twice at two prices. Read from the snapshot taken at
+                            the sale, not re-resolved. */}
+                        <CartLineOptions item={item} accent={t.primary} size="small" style={{ marginTop: 2 }} />
                       </span>
                       <span>{formatAmount(item.price * item.quantity, order.currency || currency)}</span>
                     </div>

package/src/ui/styled/Cart.tsx

@@ -6,6 +6,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { CartLineOptions } from "./CartLineOptions";
 
 export interface CartProps {
   /** Custom cart icon (defaults to a shopping bag). */
@@ -220,6 +221,11 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
               {cartItems.map((item) => (
                   <div
                     key={item.productId + item.productVariantId + String(item.isGift) + (item.recipientEmail || "")}
+                    // Named so a test can assert on the LINE rather than the
+                    // page: the picker behind the drawer renders the same option
+                    // words, so an unscoped match passes whether or not the cart
+                    // shows anything.
+                    data-testid="cart-line"
                     style={{
                       display: "flex",
                       gap: 12,
@@ -257,14 +263,11 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                         {item.title}
                       </a>
                       <div style={{ fontSize: 14, opacity: 0.8 }}>{fmt(item.price)}</div>
-                      {item.color && item.size && (
-                        <div
-                          style={{ fontSize: 12, marginTop: 4, display: "flex", alignItems: "center", gap: 8, color: t.primary }}
-                        >
-                          <span style={{ width: 14, height: 14, borderRadius: "50%", background: item.color, display: "inline-block" }} />
-                          {item.size}
-                        </div>
-                      )}
+                      {/* Which version — "Format: FLAC". The old block required
+                          BOTH a colour and a size, so a line that was neither
+                          showed nothing at all and two versions of one release
+                          read as duplicates at two prices. */}
+                      <CartLineOptions item={item} accent={t.primary} />
                       {item.isGift && (
                         <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>
                           Gift for {item.recipientName} ({item.recipientEmail})

package/src/ui/styled/CartLineOptions.tsx

@@ -0,0 +1,107 @@
+import type { CSSProperties } from "react";
+
+import type { CartItem } from "../../contexts/CartContext";
+
+/**
+ * Which version a cart line is.
+ *
+ * Every surface that lists what someone is buying renders this, so the answer
+ * to "which one did I pick" is the same in the drawer, on the checkout page and
+ * on the receipt. They drifted before: the drawer and the confirmation each had
+ * their own copy of a colour-swatch-and-size block, and neither could name a
+ * "Format: FLAC" — so a buyer choosing between two versions of one release saw
+ * two identical lines at two prices.
+ *
+ * Renders nothing when there is nothing to say. A product sold one way has no
+ * versions to tell apart, and an empty row of chrome reads as a loading state.
+ */
+export function CartLineOptions({
+  item,
+  accent,
+  size = "normal",
+  style,
+}: {
+  item: Parameters<typeof resolveCartLineOptions>[0];
+  /** The theme's accent, so this sits with the surface rather than on it. */
+  accent: string;
+  size?: "normal" | "small";
+  style?: CSSProperties;
+}) {
+  const options = resolveCartLineOptions(item);
+  if (!options.length) return null;
+
+  const fontSize = size === "small" ? 11 : 12;
+  const dot = size === "small" ? 10 : 12;
+
+  return (
+    <div
+      style={{
+        fontSize,
+        marginTop: 4,
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 8,
+        color: accent,
+        ...style,
+      }}
+    >
+      {options.map((option) => (
+        <span key={`${option.axis}:${option.value}`} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+          {option.swatchHex && (
+            <span
+              aria-hidden
+              style={{
+                width: dot,
+                height: dot,
+                borderRadius: "50%",
+                background: option.swatchHex,
+                display: "inline-block",
+              }}
+            />
+          )}
+          {/* The axis is named, not implied. "L" alone is ambiguous the moment a
+              product has more than one axis, and the creator chose the word. */}
+          <span style={{ opacity: 0.7 }}>{option.axis}{option.value ? ":" : ""}</span>
+          {/* A legacy colour is a bare hex with no name — the swatch says it
+              better than the string "#1a1a1a" does to someone about to pay. */}
+          {option.value && <span>{option.value}</span>}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * A line's options, whether it is a CART line or an ORDER line.
+ *
+ * Both answer the same question — which version is this — under two names. A
+ * cart line carries `options`, chosen a moment ago; an order line carries
+ * `variantOptions`, the snapshot taken when it was sold. Accepting both is what
+ * lets one component serve the drawer, the checkout, the receipt, the buyer's
+ * order history and the admin order page.
+ *
+ * ⚠️ Reading only `options` here TYPE-CHECKS against an order item, because
+ * both fields are optional — and silently renders the legacy fallback for every
+ * order ever placed.
+ *
+ * `color`/`size` last because carts persist in the browser and orders persist
+ * forever: a line saved before either field existed carries nothing else, and
+ * dropping it would blank the very detail this exists to show.
+ */
+export function resolveCartLineOptions(
+  item: Pick<CartItem, "options" | "color" | "size"> & {
+    variantOptions?: { axis: string; value: string; swatchHex?: string | null }[] | null;
+  },
+): { axis: string; value: string; swatchHex?: string | null }[] {
+  if (item.options?.length) return item.options;
+  if (item.variantOptions?.length) return item.variantOptions;
+
+  const legacy: { axis: string; value: string; swatchHex?: string | null }[] = [];
+  // A hex in `color` is a swatch with no name — which is exactly why the column
+  // was replaced. Shown as a swatch alone rather than printing "#1a1a1a" at
+  // someone about to pay.
+  if (item.color) legacy.push({ axis: "Colour", value: "", swatchHex: item.color });
+  if (item.size) legacy.push({ axis: "Size", value: item.size });
+  return legacy;
+}

package/src/ui/styled/Checkout.tsx

@@ -11,6 +11,7 @@ import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { Loading } from "./Loading";
+import { CartLineOptions } from "./CartLineOptions";
 
 export interface CheckoutProps {
   /** Path used to build the post-payment return URL. Defaults to `/checkout/finalise`. */
@@ -628,6 +629,10 @@ export function Checkout({
                       <p className="font-medium" style={{ color: theme.colors.text }}>
                         {item.title}
                       </p>
+                      {/* Which version. This page never showed it at all, so a
+                          cart holding the MP3 and the FLAC of one release
+                          reached payment as two identical rows. */}
+                      <CartLineOptions item={item} accent={theme.colors.primary} size="small" />
                       {item.isGift && (
                         <p className="text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
                           Gift for {item.recipientName}

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -20,6 +20,7 @@ import { BundleConfirmation } from "./BundleConfirmation";
 import { useCart } from "../../contexts/CartContext";
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { OrderStatus, ProductDeliveryType, type IPublicOrder } from "../../types/models";
+import { CartLineOptions } from "./CartLineOptions";
 
 export interface CheckoutConfirmationProps {
   orderId?: string;
@@ -419,12 +420,9 @@ function GroupBlock({
               <div style={{ fontSize: 12, color: alpha(text, 0.6), marginTop: 2 }}>
                 {fmt(item.price)} · Qty {item.quantity}
               </div>
-              {item.color && item.size && (
-                <div style={{ fontSize: 12, marginTop: 4, display: "flex", alignItems: "center", gap: 6, color: alpha(text, 0.7) }}>
-                  <span style={{ width: 12, height: 12, borderRadius: "50%", background: item.color, display: "inline-block", border: `1px solid ${alpha(text, 0.2)}` }} />
-                  {item.size}
-                </div>
-              )}
+              {/* Which version — the receipt has to say, or a buyer cannot check
+                  they were charged for the one they picked. */}
+              <CartLineOptions item={item} accent={primary} size="small" />
               {item.isGift && (
                 <div style={{ fontSize: 12, marginTop: 4, color: primary }}>
                   🎁 Gift for {item.recipientName} ({item.recipientEmail})