@riverbankcms/sdk 0.94.0 → 0.96.0

package/dist/client/{chunk-IXDSXF2D.mjs → chunk-CPKMJVBD.mjs}

@@ -1,15 +1,15 @@
 "use client";
-import { LeafletStaticMap } from './chunk-WERRJXNJ.mjs';
-import { resolveCoursePricingState, useWaitlistClaim, MagicLinkForm, formatCoursePriceAmount, formatCoursePriceDisplay } from './chunk-PICR3NTQ.mjs';
+import { LeafletStaticMap } from './chunk-SY543WZ3.mjs';
+import { resolveCoursePricingState, useWaitlistClaim, MagicLinkForm, formatCoursePriceAmount, formatCoursePriceDisplay } from './chunk-6H27K6AA.mjs';
 import { CreditCard, Ticket, Star, Sparkles } from './chunk-6N7YRNYU.mjs';
-import { usePolling, buildBookingPaymentSelectionViewModel } from './chunk-DUOHLWLF.mjs';
+import { usePolling, buildBookingPaymentSelectionViewModel } from './chunk-VJROUYOQ.mjs';
 import { SpinnerNode } from './chunk-OLAOAZEO.mjs';
-import { createBodyThemePortalRoot, TabBarFragment, useDiscountCodeUi, logoutPortal, consumeSearchParam, StepIndicator, DiscountCodeDisclosure, TerminalPanel, StateIcon, formatPrice, CrossIcon, ClockIcon, LoggedInAsUser, CheckIcon } from './chunk-J6TMMMXW.mjs';
+import { createBodyThemePortalRoot, TabBarFragment, useDiscountCodeUi, logoutPortal, consumeSearchParam, StepIndicator, DiscountCodeDisclosure, TerminalPanel, StateIcon, formatPrice, CrossIcon, ClockIcon, LoggedInAsUser, CheckIcon } from './chunk-A3YN7M3G.mjs';
 import { getFieldValidationControlProps, FieldValidationMessage } from './chunk-3DCJ45Z2.mjs';
 import { ModalShell } from './chunk-WBQG7VJA.mjs';
 import { isSpamProtectionEnabled, AltchaWidget, getChallengeUrl } from './chunk-LJCX6V7Q.mjs';
 import { useBlockApi, FeedbackMessage } from './chunk-TNGL2WJF.mjs';
-import { buildEventRuntimeFilters, buildEventCalendarListingRender, groupEventsByDate, getOrderedDayNames, formatDateKey, getEventRuntimeFiltersKey, themeButtonClassName, normalizeCsvIds, normalizeOptionalId, normalizeEventBlockKind, normalizeCsvString, EventCompactRow, EmptyState, getContainerClass, getCardOrientation, isToday, MAX_EVENTS_PER_DAY, formatTime, WIZARD_STEPS, getWizardStepsForContext, getStepNumber, formatEventPriceDisplay, resolveRuntimeEventPricing, formatEventPrice, formatEventDateParts, resolveEventLinkProps, DateTimeTile, assertNever, EventCard, buildCalendarViewport, shiftCalendarAnchorDate, addMonths, getThreeMonthRange, buildTimetableModel, formatDate, MONTH_NAMES, getEventAvailability, formatEventTeacherLine, toRegistrationEvents, isEventContentType, findPreSelectedEvent, resolveRegistrationTarget, findEventByOccurrenceId, resolveEventRequiresPayment, resolveDiscountContext } from './chunk-6SYGVVWA.mjs';
+import { buildEventRuntimeFilters, buildEventCalendarListingRender, groupEventsByDate, getOrderedDayNames, formatDateKey, getEventRuntimeFiltersKey, themeButtonClassName, normalizeCsvIds, normalizeOptionalId, normalizeEventBlockKind, normalizeCsvString, EventCompactRow, EmptyState, getContainerClass, getCardOrientation, isToday, MAX_EVENTS_PER_DAY, formatTime, WIZARD_STEPS, getWizardStepsForContext, getStepNumber, formatEventPriceDisplay, resolveRuntimeEventPricing, formatEventPrice, formatEventDateParts, resolveEventLinkProps, DateTimeTile, assertNever, EventCard, buildCalendarViewport, shiftCalendarAnchorDate, addMonths, getThreeMonthRange, buildTimetableModel, formatDate, MONTH_NAMES, getEventAvailability, formatEventTeacherLine, toRegistrationEvents, isEventContentType, findPreSelectedEvent, resolveRegistrationTarget, findEventByOccurrenceId, resolveEventRequiresPayment, resolveDiscountContext } from './chunk-GWCRCJLB.mjs';
 import { publicEventPricingType, getBookingLocalDateKey, toScheduledBookingDateTime, toBookingTimeZone, publicEventPricingCurrency, formatBookingDateTime, publicEventPricingMode, publicEventScalarPrice, publicEventTicketTypes, formatCurrencyAmount, formatBookingDate, formatBookingTime } from './chunk-PCHACQEB.mjs';
 import React9, { createContext, useId, useMemo, useReducer, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { createPortal } from 'react-dom';
@@ -337,6 +337,7 @@ function transformEligibilityResponse(response) {
     requiresPayment: eligibility.requiresPayment,
     pricingMode: eligibility.pricingMode,
     selectedTicketTypeId: eligibility.selectedTicketTypeId ?? null,
+    ticketLines: eligibility.ticketLines ?? [],
     ticketTypes: eligibility.ticketTypes ?? [],
     isFull: eligibility.isFull,
     waitlistEnabled: eligibility.waitlistEnabled,
@@ -393,6 +394,72 @@ function findSelectedTicketType(input) {
   }).find((ticketType) => ticketType.id === input.selectedTicketTypeId) ?? null;
 }
 
+// ../blocks/src/system/runtime/nodes/event-registration/ticketSelectionLines.ts
+function normalizeTicketSelectionLines(lines) {
+  const quantitiesByTicketType = /* @__PURE__ */ new Map();
+  for (const line of lines) {
+    const quantity = Math.floor(line.quantity);
+    if (quantity <= 0) continue;
+    const key = line.ticketTypeId ?? null;
+    quantitiesByTicketType.set(key, (quantitiesByTicketType.get(key) ?? 0) + quantity);
+  }
+  return [...quantitiesByTicketType.entries()].map(([ticketTypeId, quantity]) => ({
+    ticketTypeId,
+    quantity
+  }));
+}
+function getTicketSelectionTotal(lines) {
+  return normalizeTicketSelectionLines(lines).reduce((total, line) => total + line.quantity, 0);
+}
+function getTicketLineQuantity(lines, ticketTypeId) {
+  return normalizeTicketSelectionLines(lines).find((line) => line.ticketTypeId === ticketTypeId)?.quantity ?? 0;
+}
+function getSingleSelectedTicketTypeId(lines) {
+  const normalized = normalizeTicketSelectionLines(lines);
+  return normalized.length === 1 ? normalized[0]?.ticketTypeId ?? null : null;
+}
+function setTicketLineQuantity(input) {
+  const nextQuantity = Math.max(0, Math.floor(input.quantity));
+  const normalized = normalizeTicketSelectionLines(input.lines).filter((line) => line.ticketTypeId !== input.ticketTypeId);
+  if (nextQuantity <= 0) {
+    return normalized;
+  }
+  return [
+    ...normalized,
+    {
+      ticketTypeId: input.ticketTypeId,
+      quantity: nextQuantity
+    }
+  ];
+}
+function getTicketTypeLineMax(input) {
+  const otherSelectedQuantity = input.totalSelectedQuantity - input.currentQuantity;
+  const maxByBlock = input.maxTickets - otherSelectedQuantity;
+  const maxByEvent = input.availableSpots == null ? input.maxTickets : input.availableSpots - otherSelectedQuantity;
+  const maxByTicketType = input.ticketTypeRemainingCapacity ?? input.maxTickets;
+  return Math.max(0, Math.min(maxByBlock, maxByEvent, maxByTicketType));
+}
+function calculateTicketSelectionSubtotal(input) {
+  return normalizeTicketSelectionLines(input.lines).reduce((subtotal, line) => {
+    const ticketType = line.ticketTypeId ? input.ticketTypes.find((candidate) => candidate.id === line.ticketTypeId) ?? null : null;
+    const unitPriceCents = ticketType?.priceAmount ?? input.fallbackUnitPriceCents;
+    return subtotal + Math.max(0, unitPriceCents) * line.quantity;
+  }, 0);
+}
+function buildTicketSelectionSummaryLines(input) {
+  return normalizeTicketSelectionLines(input.lines).map((line) => {
+    const ticketType = line.ticketTypeId ? input.ticketTypes.find((candidate) => candidate.id === line.ticketTypeId) ?? null : null;
+    const unitPriceCents = ticketType?.priceAmount ?? input.fallbackUnitPriceCents;
+    return {
+      ticketTypeId: line.ticketTypeId,
+      label: ticketType?.name ?? input.fallbackLabel,
+      quantity: line.quantity,
+      unitPriceCents,
+      subtotalCents: Math.max(0, unitPriceCents) * line.quantity
+    };
+  });
+}
+
 // ../blocks/src/system/runtime/nodes/event-registration/hooks.state.ts
 var initialEligibilityLookupState = {
   tag: "idle",
@@ -499,6 +566,7 @@ function usePortalAuth() {
 }
 function useEligibility(params) {
   const api = useBlockApi();
+  const ticketSelectionsKey = JSON.stringify(normalizeTicketSelectionLines(params.ticketSelections));
   const [state, dispatch] = useReducer(
     eligibilityLookupReducer,
     initialEligibilityLookupState
@@ -512,7 +580,8 @@ function useEligibility(params) {
         dispatch({ type: "reset" });
         return;
       }
-      if (!params.occurrenceId || !params.email.trim()) {
+      const ticketSelections = JSON.parse(ticketSelectionsKey);
+      if (!params.occurrenceId || !params.email.trim() || ticketSelections.length === 0) {
         requestIdRef.current += 1;
         dispatch({ type: "reset" });
         return;
@@ -524,10 +593,9 @@ function useEligibility(params) {
         const result = await api.checkEligibility({
           occurrenceId: params.occurrenceId,
           attendanceMode: params.attendanceMode ?? void 0,
-          ticketTypeId: params.ticketTypeId ?? void 0,
+          ticketSelections,
           selectedSlidingAmount: params.selectedSlidingAmount ?? void 0,
-          email: params.email.trim().toLowerCase(),
-          ticketsCount: params.ticketsCount
+          email: params.email.trim().toLowerCase()
         });
         if (cancelled || requestIdRef.current !== requestId) return;
         dispatch({
@@ -546,7 +614,15 @@ function useEligibility(params) {
     return () => {
       cancelled = true;
     };
-  }, [api, params.enabled, params.occurrenceId, params.attendanceMode, params.ticketTypeId, params.selectedSlidingAmount, params.email, params.ticketsCount]);
+  }, [
+    api,
+    params.enabled,
+    params.occurrenceId,
+    params.attendanceMode,
+    ticketSelectionsKey,
+    params.selectedSlidingAmount,
+    params.email
+  ]);
   return {
     state,
     eligibility: state.eligibility,
@@ -622,9 +698,15 @@ function savePendingRegistration(siteId, occurrenceId, data) {
   }
   try {
     const key = getStorageKey(siteId, occurrenceId);
+    const ticketSelections = normalizeTicketSelectionLines(data.ticketSelections);
+    if (ticketSelections.length === 0) {
+      console.warn("[sessionStorage] No ticket selections to save, skipping registration state");
+      return;
+    }
     const entry = {
       ...data,
-      version: 3,
+      ticketSelections,
+      version: 4,
       timestamp: Date.now()
     };
     sessionStorage.setItem(key, JSON.stringify(entry));
@@ -670,8 +752,8 @@ function parseAndValidateEntry(stored, key) {
       return null;
     }
     const version = raw.version;
-    if (version !== 1 && version !== 2 && version !== 3) {
-      console.warn("[sessionStorage] Unknown version, ignoring entry");
+    if (version !== 4) {
+      console.warn("[sessionStorage] Outdated version, ignoring entry");
       sessionStorage.removeItem(key);
       return null;
     }
@@ -687,34 +769,12 @@ function parseAndValidateEntry(stored, key) {
       sessionStorage.removeItem(key);
       return null;
     }
-    if (entry.version === 1) {
-      const legacy = entry;
-      return {
-        version: 3,
-        attendeeId: legacy.attendeeId,
-        formData: legacy.formData,
-        ticketsCount: legacy.ticketsCount,
-        selectedEventId: legacy.selectedEventId,
-        selectedAttendanceMode: null,
-        selectedTicketTypeId: null,
-        paymentSelection: { method: legacy.paymentMethod },
-        timestamp: legacy.timestamp
-      };
-    }
-    if (entry.version === 2) {
-      return {
-        version: 3,
-        attendeeId: entry.attendeeId,
-        formData: entry.formData,
-        ticketsCount: entry.ticketsCount,
-        selectedEventId: entry.selectedEventId,
-        selectedAttendanceMode: null,
-        selectedTicketTypeId: null,
-        paymentSelection: entry.paymentSelection,
-        timestamp: entry.timestamp
-      };
+    const ticketSelections = normalizeTicketSelectionLines(entry.ticketSelections);
+    if (ticketSelections.length === 0 || getTicketSelectionTotal(ticketSelections) <= 0) {
+      sessionStorage.removeItem(key);
+      return null;
     }
-    return entry;
+    return { ...entry, ticketSelections };
   } catch {
     console.warn("[sessionStorage] Failed to parse entry, removing");
     sessionStorage.removeItem(key);
@@ -746,8 +806,9 @@ function cleanupStaleRegistrations() {
         const stored = sessionStorage.getItem(key);
         if (!stored) continue;
         const entry = JSON.parse(stored);
-        const age = Date.now() - entry.timestamp;
-        if (age > STALE_THRESHOLD_MS) {
+        const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : NaN;
+        const age = Date.now() - timestamp;
+        if (!Number.isFinite(timestamp) || age > STALE_THRESHOLD_MS) {
           keysToRemove.push(key);
         }
       } catch {
@@ -835,14 +896,16 @@ function getEventAttendanceModeLabel(mode) {
   }
 }
 function TicketCounter(props) {
-  const { ticketsCount, maxAllowed, onTicketsChange } = props;
+  const { ticketsCount, maxAllowed, label, onTicketsChange } = props;
+  const minAllowed = props.minAllowed ?? 1;
   return /* @__PURE__ */ jsxs("div", { className: "er-row er-counter", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => onTicketsChange(Math.max(1, ticketsCount - 1)),
-        disabled: ticketsCount <= 1,
+        "aria-label": `Decrease ${label}`,
+        onClick: () => onTicketsChange(Math.max(minAllowed, ticketsCount - 1)),
+        disabled: ticketsCount <= minAllowed,
         className: "er-counter-btn",
         children: "-"
       }
@@ -852,6 +915,7 @@ function TicketCounter(props) {
       "button",
       {
         type: "button",
+        "aria-label": `Increase ${label}`,
         onClick: () => onTicketsChange(Math.min(maxAllowed, ticketsCount + 1)),
         disabled: ticketsCount >= maxAllowed,
         className: "er-counter-btn",
@@ -904,14 +968,86 @@ function SlidingScaleAmountField(props) {
     props.message ? /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: props.message }) : null
   ] });
 }
-function getTicketTypeCounterAvailabilityLabel(input) {
-  if (input.selectedRemainingCapacity !== null) {
-    return `${input.selectedRemainingCapacity} remaining for this ticket type`;
-  }
-  if (input.eventAvailableSpots != null) {
-    return `${input.eventAvailableSpots} spots available`;
-  }
-  return null;
+function TicketTypeQuantityRows(props) {
+  const totalSelectedQuantity = getTicketSelectionTotal(props.ticketSelections);
+  const selectedTicketTypes = props.ticketTypes.filter(
+    (ticketType) => getTicketLineQuantity(props.ticketSelections, ticketType.id) > 0
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "er-ticket-lines", children: [
+    /* @__PURE__ */ jsx("div", { className: "er-ticket-line-list", role: "list", "aria-label": "Tickets", children: props.ticketTypes.map((ticketType) => {
+      const quantity = getTicketLineQuantity(props.ticketSelections, ticketType.id);
+      const disabled = ticketType.availability.kind === "unavailable";
+      const availabilityLabel = getTicketTypeAvailabilityLabel(ticketType);
+      const priceLabel = ticketType.priceAmount > 0 ? formatPrice(ticketType.priceAmount, props.currency) : "Free";
+      const maxAllowed = disabled ? 0 : getTicketTypeLineMax({
+        currentQuantity: quantity,
+        totalSelectedQuantity,
+        maxTickets: props.maxTickets,
+        availableSpots: props.availableSpots,
+        ticketTypeRemainingCapacity: ticketType.availability.remainingCapacity
+      });
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `er-ticket-line${disabled ? " er-ticket-line--disabled" : ""}`,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "er-ticket-line-main", children: [
+              /* @__PURE__ */ jsxs("div", { className: "er-ticket-line-heading", children: [
+                /* @__PURE__ */ jsx("span", { className: "er-ticket-line-name", children: ticketType.name }),
+                /* @__PURE__ */ jsx("span", { className: "er-ticket-line-price", children: priceLabel })
+              ] }),
+              ticketType.description ? /* @__PURE__ */ jsx("p", { className: "er-ticket-line-detail", children: ticketType.description }) : null,
+              availabilityLabel ? /* @__PURE__ */ jsx("p", { className: "er-ticket-line-detail", children: availabilityLabel }) : ticketType.availability.remainingCapacity !== null ? /* @__PURE__ */ jsxs("p", { className: "er-ticket-line-detail", children: [
+                ticketType.availability.remainingCapacity,
+                " remaining for this ticket type"
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              TicketCounter,
+              {
+                ticketsCount: quantity,
+                minAllowed: 0,
+                maxAllowed,
+                label: ticketType.name,
+                onTicketsChange: (nextQuantity) => {
+                  props.onTicketSelectionsChange?.(setTicketLineQuantity({
+                    lines: props.ticketSelections,
+                    ticketTypeId: ticketType.id,
+                    quantity: nextQuantity
+                  }));
+                }
+              }
+            )
+          ]
+        },
+        ticketType.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      TicketCounterLimit,
+      {
+        maximumLabel: `${props.maxTickets} tickets maximum`,
+        availabilityLabel: props.availableSpots != null ? `${props.availableSpots} spots available` : null
+      }
+    ),
+    selectedTicketTypes.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "er-ticket-line-summary", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsxs("div", { className: "er-ticket-line-summary-title", children: [
+        totalSelectedQuantity,
+        " ticket",
+        totalSelectedQuantity === 1 ? "" : "s",
+        " selected"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "er-ticket-line-summary-list", children: selectedTicketTypes.map((ticketType) => {
+        const quantity = getTicketLineQuantity(props.ticketSelections, ticketType.id);
+        return /* @__PURE__ */ jsxs("li", { children: [
+          quantity,
+          " x ",
+          ticketType.name
+        ] }, ticketType.id);
+      }) })
+    ] }) : props.hasAvailableTicketTypes ? /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "Choose at least one ticket to continue." }) : /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." })
+  ] });
 }
 function getAttendanceModeDetail(attendanceMode) {
   if (attendanceMode.availableSpots === null) {
@@ -929,6 +1065,7 @@ function AttendanceModeTiles(props) {
       "button",
       {
         type: "button",
+        "aria-pressed": isSelected,
         className: `er-payment-tile${isSelected ? " er-payment-tile--selected" : ""}`,
         onClick: () => props.onAttendanceModeChange?.(attendanceMode.mode),
         children: [
@@ -965,8 +1102,9 @@ var TicketSelectionStep = ({
   onAttendanceModeChange,
   ticketsCount,
   maxTickets,
-  selectedTicketTypeId = null,
-  onTicketTypeChange,
+  visibleTicketTypes: visibleTicketTypesOverride,
+  ticketSelections = [],
+  onTicketSelectionsChange,
   slidingScale = null,
   selectedSlidingAmountInput = "",
   slidingScaleSelectionMessage = null,
@@ -984,28 +1122,22 @@ var TicketSelectionStep = ({
   const eventPricingMode = eventPricing ? publicEventPricingMode(eventPricing) : void 0;
   const eventPricingCurrency = eventPricing ? publicEventPricingCurrency(eventPricing) : null;
   const usesTicketTypes = eventPricingMode === "ticket_types" && !canJoinWaitlist;
-  const visibleTicketTypes = usesTicketTypes ? getVisibleTicketTypes({
+  const visibleTicketTypes = usesTicketTypes ? visibleTicketTypesOverride ?? getVisibleTicketTypes({
     event,
     eligibility: null,
     selectedAttendanceMode
   }) : [];
-  const selectedTicketType = usesTicketTypes ? visibleTicketTypes.find((ticketType) => ticketType.id === selectedTicketTypeId) ?? null : null;
   const implicitTicketType = usesTicketTypes ? getImplicitSingleAvailableTicketType(visibleTicketTypes) : null;
-  const effectiveSelectedTicketType = selectedTicketType ?? implicitTicketType;
-  const shouldShowTicketTypeTiles = usesTicketTypes && implicitTicketType === null;
-  const selectedRemainingCapacity = effectiveSelectedTicketType?.availability.remainingCapacity ?? null;
-  const noSellableTicketTypes = usesTicketTypes && (visibleTicketTypes.length === 0 || visibleTicketTypes.every((ticketType) => ticketType.availability.kind === "unavailable"));
+  const noVisibleTicketTypes = usesTicketTypes && visibleTicketTypes.length === 0;
+  const hasAvailableTicketTypes = usesTicketTypes && visibleTicketTypes.some((ticketType) => ticketType.availability.kind === "available");
+  const aggregateRemainingCapacity = implicitTicketType?.availability.remainingCapacity ?? null;
   const maxAllowed = getMaxAllowedTicketCount({
     canJoinWaitlist,
     usesTicketTypes,
     maxTickets,
     availableSpots,
-    selectedTicketTypeRemainingCapacity: selectedRemainingCapacity,
-    hasSelectedTicketType: effectiveSelectedTicketType !== null
-  });
-  const selectedTicketTypeAvailabilityLabel = getTicketTypeCounterAvailabilityLabel({
-    selectedRemainingCapacity,
-    eventAvailableSpots: event?.availableSpots
+    selectedTicketTypeRemainingCapacity: aggregateRemainingCapacity,
+    hasSelectedTicketType: implicitTicketType !== null
   });
   const eventAvailabilityLabel = !canJoinWaitlist && event?.availableSpots != null ? `${event.availableSpots} spots available` : null;
   if (deliveryMode === "hybrid" && !selectedAttendanceMode) {
@@ -1022,7 +1154,7 @@ var TicketSelectionStep = ({
       /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "Choose whether you want to attend in person or online." })
     ] });
   }
-  if (isSoldOut && !canJoinWaitlist && !usesTicketTypes) {
+  if (isSoldOut && !canJoinWaitlist) {
     return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
       /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Sold Out" }),
       /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "Sorry you missed out! This event is fully booked." })
@@ -1040,52 +1172,21 @@ var TicketSelectionStep = ({
         }
       )
     ] }) : null,
-    usesTicketTypes ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      shouldShowTicketTypeTiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Choose a ticket type" }),
-        /* @__PURE__ */ jsx("div", { className: "er-payment-tiles", role: "list", "aria-label": "Ticket types", children: visibleTicketTypes.map((ticketType) => {
-          const availabilityLabel = getTicketTypeAvailabilityLabel(ticketType);
-          const disabled = ticketType.availability.kind === "unavailable";
-          const isSelected = selectedTicketTypeId === ticketType.id;
-          const priceLabel = ticketType.priceAmount > 0 ? formatPrice(ticketType.priceAmount, eventPricingCurrency ?? DEFAULT_EVENT_CURRENCY) : "Free";
-          return /* @__PURE__ */ jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: `er-payment-tile${isSelected && !disabled ? " er-payment-tile--selected" : ""}${disabled ? " er-payment-tile--disabled" : ""}`,
-              disabled,
-              onClick: () => onTicketTypeChange?.(ticketType.id),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "er-payment-tile-label", children: ticketType.name }),
-                /* @__PURE__ */ jsx("div", { className: "er-payment-tile-detail", children: priceLabel }),
-                ticketType.description ? /* @__PURE__ */ jsx("div", { className: "er-payment-tile-detail", children: ticketType.description }) : null,
-                availabilityLabel ? /* @__PURE__ */ jsx("div", { className: "er-payment-tile-detail", children: availabilityLabel }) : null
-              ]
-            }
-          ) }, ticketType.id);
-        }) })
-      ] }) : null,
-      noSellableTicketTypes ? /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." }) : !effectiveSelectedTicketType ? /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "Select one ticket type to continue." }) : effectiveSelectedTicketType.availability.kind === "unavailable" ? /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: getTicketTypeAvailabilityLabel(effectiveSelectedTicketType) ?? "This ticket type is unavailable." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("h3", { className: "er-title", children: "How many tickets?" }),
-        /* @__PURE__ */ jsxs("div", { className: "er-ticket-counter-group", children: [
-          /* @__PURE__ */ jsx(
-            TicketCounter,
-            {
-              ticketsCount,
-              maxAllowed,
-              onTicketsChange
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TicketCounterLimit,
-            {
-              maximumLabel: `${maxAllowed} tickets maximum`,
-              availabilityLabel: selectedTicketTypeAvailabilityLabel
-            }
-          )
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    usesTicketTypes ? /* @__PURE__ */ jsx(Fragment, { children: noVisibleTicketTypes ? /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Choose tickets" }),
+      /* @__PURE__ */ jsx(
+        TicketTypeQuantityRows,
+        {
+          ticketTypes: visibleTicketTypes,
+          ticketSelections,
+          maxTickets,
+          availableSpots,
+          currency: eventPricingCurrency ?? DEFAULT_EVENT_CURRENCY,
+          hasAvailableTicketTypes,
+          onTicketSelectionsChange
+        }
+      )
+    ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       slidingScale ? /* @__PURE__ */ jsx(
         SlidingScaleAmountField,
         {
@@ -1103,6 +1204,7 @@ var TicketSelectionStep = ({
           {
             ticketsCount,
             maxAllowed,
+            label: canJoinWaitlist ? "waitlist spots" : "tickets",
             onTicketsChange
           }
         ),
@@ -1546,7 +1648,7 @@ var PaymentSelectionStep = ({
 }) => {
   const occurrenceId = occurrenceContext?.id ?? event?.registrationOccurrenceId;
   const selectedMethod = selectedSelection.method;
-  const totalPrice = eligibility?.price ? eligibility.price * ticketsCount : 0;
+  const totalPrice = eligibility?.price ?? 0;
   const canShowDirectPaymentOptions = Boolean(
     eligibility?.eligible && eligibility.canPayDirectly && eligibility.price
   );
@@ -1946,8 +2048,9 @@ function EventRegistrationWizardContent(props) {
             onAttendanceModeChange: wizard.setSelectedAttendanceMode,
             ticketsCount: wizard.ticketsCount,
             maxTickets: wizard.maxTicketsNum,
-            selectedTicketTypeId: wizard.selectedTicketTypeId,
-            onTicketTypeChange: wizard.setSelectedTicketTypeId,
+            visibleTicketTypes: wizard.eligibility ? wizard.visibleTicketTypes : void 0,
+            ticketSelections: wizard.selectedTicketLines,
+            onTicketSelectionsChange: wizard.setSelectedTicketLines,
             slidingScale: wizard.selectedEventSlidingScale,
             selectedSlidingAmountInput: wizard.selectedSlidingAmountInput,
             slidingScaleSelectionMessage: wizard.slidingScaleSelectionMessage,
@@ -2055,9 +2158,9 @@ function EventRegistrationWizardActions(props) {
       const isWaitingForEligibility = wizard.portalAuthState === "authenticated" && wizard.eligibilityLoading;
       const isCheckingExistingRegistration = wizard.portalAuthState === "authenticated" && wizard.existingRegistrationLoading;
       const hasExistingRegistration = wizard.portalAuthState === "authenticated" && wizard.existingRegistration !== null;
-      const ticketTypeSelectionBlocked = wizard.ticketTypeSelectionRequired && !wizard.hasValidSelectedTicketType;
+      const ticketTypeSelectionBlocked = wizard.ticketTypeSelectionRequired && !wizard.hasValidTicketSelection;
       const isContinueDisabled = isWaitingForEligibility || isCheckingExistingRegistration || hasExistingRegistration || isSoldOutWithoutWaitlist || ticketTypeSelectionBlocked;
-      const continueLabel = isCheckingExistingRegistration ? "Checking registration..." : hasExistingRegistration ? "Already registered" : isSoldOutWithoutWaitlist ? "Sold out" : ticketTypeSelectionBlocked ? "Choose a ticket type" : "Continue";
+      const continueLabel = isCheckingExistingRegistration ? "Checking registration..." : hasExistingRegistration ? "Already registered" : isSoldOutWithoutWaitlist ? "Sold out" : ticketTypeSelectionBlocked ? "Choose a ticket" : "Continue";
       return /* @__PURE__ */ jsxs("div", { className: "er-actions", children: [
         !wizard.hasPreSelectedContext && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wizard.setStep("select-event"), className: "er-back-btn", children: "\u2190 Back" }),
         /* @__PURE__ */ jsx(
@@ -2145,13 +2248,17 @@ function EventRegistrationSummaryBar(props) {
   const summaryTimeZone = wizard.occurrenceContext?.timeZone ?? summaryEvent?.timeZone ?? null;
   const occurrenceOverrideTitle = wizard.occurrenceContext?.overrides?.title;
   const summaryTitle = occurrenceOverrideTitle ?? summaryEvent?.title ?? "";
-  const summaryPrice = wizard.selectedTicketType?.priceAmount ?? wizard.eligibility?.price ?? (wizard.selectedEventSlidingScale ? wizard.selectedSlidingAmount : null) ?? (summaryEvent ? publicEventScalarPrice(summaryEvent.pricing) : null) ?? 0;
   const summaryCurrency = (summaryEvent ? publicEventPricingCurrency(summaryEvent.pricing) : null) ?? DEFAULT_EVENT_CURRENCY;
   const teamMemberNames = (summaryEvent?.teamMembers ?? []).map((teamMember) => teamMember.name).filter(Boolean);
-  const subtotalCents = Math.max(0, summaryPrice * wizard.ticketsCount);
+  const fallbackSubtotalCents = Math.max(
+    0,
+    ((summaryEvent ? publicEventScalarPrice(summaryEvent.pricing) : null) ?? 0) * wizard.ticketsCount
+  );
+  const subtotalCents = Math.max(0, wizard.ticketSelectionSubtotalCents ?? fallbackSubtotalCents);
   const autoAppliedDiscount = wizard.discountCode.trim().length > 0 ? null : wizard.autoAppliedDiscount;
   const autoAppliedDiscountCents = Math.max(0, autoAppliedDiscount?.computedAmountCents ?? 0);
   const discountedTotalCents = Math.max(0, subtotalCents - autoAppliedDiscountCents);
+  const selectedLineSummary = (wizard.ticketSelectionSummaryLines ?? []).filter((line) => line.ticketTypeId !== null).map((line) => `${line.quantity} x ${line.label}`).join(", ");
   const selectedDirectPaymentOption = getSelectedDirectPaymentOption({
     wizard,
     totalCents: discountedTotalCents,
@@ -2188,9 +2295,9 @@ function EventRegistrationSummaryBar(props) {
         /* @__PURE__ */ jsx("h4", { className: "er-summary-bar-event", children: summaryTitle }),
         /* @__PURE__ */ jsxs("span", { className: "er-summary-bar-meta", children: [
           summaryDate && formatEventDateTime(summaryDate, { timeZone: summaryTimeZone }),
-          wizard.selectedTicketType ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          selectedLineSummary ? /* @__PURE__ */ jsxs(Fragment, { children: [
             " \xB7 ",
-            wizard.selectedTicketType.name
+            selectedLineSummary
           ] }) : null,
           wizard.step !== "select-event" && wizard.step !== "select-tickets" && wizard.ticketsCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             " \xB7 ",
@@ -2204,8 +2311,8 @@ function EventRegistrationSummaryBar(props) {
           teamMemberNames.join(", ")
         ] })
       ] }),
-      summaryPrice > 0 && /* @__PURE__ */ jsx("div", { className: "er-summary-bar-pricing", children: productMethod ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "er-summary-bar-price er-summary-bar-price--struck", children: formatPrice(summaryPrice * wizard.ticketsCount, summaryCurrency) }),
+      subtotalCents > 0 && /* @__PURE__ */ jsx("div", { className: "er-summary-bar-pricing", children: productMethod ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "er-summary-bar-price er-summary-bar-price--struck", children: formatPrice(subtotalCents, summaryCurrency) }),
         /* @__PURE__ */ jsx("div", { className: "er-summary-bar-included", children: wizard.paymentSelection.method === "pass" || wizard.paymentSelection.method === "pass_bundle" ? "1 pass credit" : "Included in membership" })
       ] }) : flexibleBalanceSummary ? /* @__PURE__ */ jsxs(Fragment, { children: [
         flexibleBalanceSummary.total ? /* @__PURE__ */ jsxs("div", { className: "er-summary-bar-product-detail", children: [
@@ -2295,7 +2402,7 @@ function useEventRegistrationStripeReturn(options) {
     setRegistrationResult,
     setSelectedEvent,
     setSelectedAttendanceMode,
-    setSelectedTicketTypeId,
+    setTicketSelections,
     setStep,
     setTicketsCount,
     step
@@ -2314,13 +2421,13 @@ function useEventRegistrationStripeReturn(options) {
     const pending = getPendingRegistration(siteId, occurrenceId || void 0);
     if (!pending) return;
     setFormData(pending.formData);
-    setTicketsCount(pending.ticketsCount);
+    setTicketSelections(pending.ticketSelections);
+    setTicketsCount(getTicketSelectionTotal(pending.ticketSelections));
     if (pending.selectedEventId) {
       const event = events.find((e) => e.publicEventId === pending.selectedEventId) ?? null;
       if (event) setSelectedEvent(event);
     }
     setSelectedAttendanceMode(pending.selectedAttendanceMode ?? null);
-    setSelectedTicketTypeId(pending.selectedTicketTypeId ?? null);
     setPaymentSelection(pending.paymentSelection);
     if (registrationStatus === "cancelled") {
       setStep("select-payment");
@@ -2372,6 +2479,10 @@ function useEventRegistrationSubmit(options) {
     }
     options.setStep("submitting");
     try {
+      const ticketSelections = normalizeTicketSelectionLines(options.ticketSelections);
+      if (ticketSelections.length === 0) {
+        throw new Error("Choose at least one ticket to continue.");
+      }
       const isBundle = method === "pass_bundle" || method === "membership_bundle";
       const bundleProductId = isBundle ? passId || membershipId : void 0;
       const selectionSnapshot = (() => {
@@ -2400,11 +2511,10 @@ function useEventRegistrationSubmit(options) {
       const result = await options.api.registerForEvent({
         occurrenceId: submitOccurrenceId,
         attendanceMode: options.selectedAttendanceMode ?? void 0,
-        ticketTypeId: options.selectedTicketTypeId ?? void 0,
+        ticketSelections,
         selectedSlidingAmount: options.selectedSlidingAmount ?? void 0,
         email: options.formData.email.trim().toLowerCase(),
         name: options.formData.name.trim(),
-        ticketsCount: options.ticketsCount,
         phone: options.formData.phone.trim() || void 0,
         notes: options.formData.notes.trim() || void 0,
         altchaSolution: options.altchaSolution,
@@ -2449,10 +2559,9 @@ function useEventRegistrationSubmit(options) {
           savePendingRegistration(siteId, submitOccurrenceId, {
             attendeeId: result.attendeeId,
             formData: options.formData,
-            ticketsCount: options.ticketsCount,
+            ticketSelections,
             selectedEventId: options.registrationTarget?.selectedEventId ?? null,
             selectedAttendanceMode: options.selectedAttendanceMode,
-            selectedTicketTypeId: options.selectedTicketTypeId ?? null,
             paymentSelection: selectionSnapshot
           });
         }
@@ -2564,7 +2673,6 @@ function useEventRegistrationWizard(options) {
     createInitialRegistrationFlowState
   );
   const step = flowState.step;
-  const ticketsCount = flowState.ticketsCount;
   const paymentSelection = flowState.paymentSelection;
   const [selectedEvent, setSelectedEvent] = useState(preSelectedEvent ?? null);
   const [formData, setFormData] = useState({ name: "", email: "", phone: "", notes: "" });
@@ -2575,7 +2683,7 @@ function useEventRegistrationWizard(options) {
   const [selectedAttendanceMode, setSelectedAttendanceMode] = useState(
     preSelectedEvent?.deliveryMode === "online" ? "online" : preSelectedEvent?.deliveryMode === "in_person" ? "in_person" : null
   );
-  const [selectedTicketTypeId, setSelectedTicketTypeId] = useState(null);
+  const [selectedTicketLines, setSelectedTicketLines] = useState([]);
   const [selectedSlidingAmountInput, setSelectedSlidingAmountInput] = useState(() => {
     const slidingScale = getSlidingScaleForEvent(preSelectedEvent ?? null);
     return slidingScale?.suggestedAmount !== null && slidingScale?.suggestedAmount !== void 0 ? formatCentsAsCurrencyInput(slidingScale.suggestedAmount) : "";
@@ -2611,14 +2719,51 @@ function useEventRegistrationWizard(options) {
     [options.occurrenceContext, selectedEvent]
   );
   const occurrenceId = registrationTarget?.occurrenceId ?? "";
+  const currentEvent = selectedEvent ?? preSelectedEvent;
+  const currentEventPricing = currentEvent ? resolveRuntimeEventPricing(currentEvent) : null;
+  const currentEventUsesTicketTypes = currentEventPricing !== null && publicEventPricingMode(currentEventPricing) === "ticket_types";
+  const selectedModeAvailability = selectedAttendanceMode ? (currentEvent?.attendanceModes ?? []).find((mode) => mode.mode === selectedAttendanceMode) ?? null : null;
+  const currentAvailableSpots = selectedModeAvailability?.availableSpots ?? currentEvent?.availableSpots;
+  const currentWaitlistEnabled = selectedModeAvailability?.waitlistEnabled ?? currentEvent?.waitlistEnabled ?? false;
+  const currentCanJoinWaitlist = currentAvailableSpots === 0 && currentWaitlistEnabled === true;
+  const usesTicketTypeSelections = currentEventUsesTicketTypes && !currentCanJoinWaitlist;
+  const eventTicketTypesForSelection = useMemo(
+    () => getVisibleTicketTypes({
+      event: currentEvent,
+      eligibility: null,
+      selectedAttendanceMode
+    }),
+    [currentEvent, selectedAttendanceMode]
+  );
+  const normalizedSelectedTicketLines = useMemo(
+    () => normalizeTicketSelectionLines(selectedTicketLines),
+    [selectedTicketLines]
+  );
+  const ticketTypeSelectionTotal = useMemo(
+    () => getTicketSelectionTotal(normalizedSelectedTicketLines),
+    [normalizedSelectedTicketLines]
+  );
+  const ticketsCount = usesTicketTypeSelections ? ticketTypeSelectionTotal : flowState.ticketsCount;
+  const ticketSelections = useMemo(() => {
+    if (waitlistClaim.claim) {
+      return [{ ticketTypeId: null, quantity: 1 }];
+    }
+    if (usesTicketTypeSelections) {
+      return normalizedSelectedTicketLines;
+    }
+    return [{ ticketTypeId: null, quantity: ticketsCount }];
+  }, [normalizedSelectedTicketLines, ticketsCount, usesTicketTypeSelections, waitlistClaim.claim]);
+  useEffect(() => {
+    if (flowState.ticketsCount === ticketsCount) return;
+    dispatchFlow({ type: "set-tickets-count", ticketsCount });
+  }, [flowState.ticketsCount, ticketsCount]);
   const eligibilityResult = useEligibility({
     enabled: portalAuthState === "authenticated" || step === "enter-details" || step === "select-payment",
     occurrenceId,
     attendanceMode: selectedAttendanceMode,
-    ticketTypeId: selectedTicketTypeId,
+    ticketSelections,
     selectedSlidingAmount: parseCurrencyInputToCents(selectedSlidingAmountInput),
-    email: formData.email,
-    ticketsCount
+    email: formData.email
   });
   const existingRegistrationResult = useExistingEventRegistration({
     isAuthenticated: portalAuthState === "authenticated",
@@ -2724,7 +2869,7 @@ function useEventRegistrationWizard(options) {
     setTicketsCount,
     setSelectedEvent,
     setSelectedAttendanceMode,
-    setSelectedTicketTypeId,
+    setTicketSelections: (lines) => setSelectedTicketLines(normalizeTicketSelectionLines(lines)),
     setPaymentSelection: (selection) => dispatchFlow({ type: "set-manual-payment-selection", selection }),
     setPendingAttendeeId,
     setStep,
@@ -2737,20 +2882,21 @@ function useEventRegistrationWizard(options) {
   }, [selectedEvent, preSelectedEvent]);
   const visibleTicketTypes = useMemo(
     () => getVisibleTicketTypes({
-      event: selectedEvent ?? preSelectedEvent,
+      event: currentEvent,
       eligibility,
       selectedAttendanceMode
     }),
-    [selectedAttendanceMode, selectedEvent, preSelectedEvent, eligibility]
+    [currentEvent, selectedAttendanceMode, eligibility]
   );
+  const singleSelectedTicketTypeId = getSingleSelectedTicketTypeId(normalizedSelectedTicketLines);
   const selectedTicketType = useMemo(
     () => findSelectedTicketType({
-      event: selectedEvent ?? preSelectedEvent,
+      event: currentEvent,
       eligibility,
-      selectedTicketTypeId,
+      selectedTicketTypeId: singleSelectedTicketTypeId,
       selectedAttendanceMode
     }),
-    [selectedAttendanceMode, selectedEvent, preSelectedEvent, eligibility, selectedTicketTypeId]
+    [currentEvent, eligibility, selectedAttendanceMode, singleSelectedTicketTypeId]
   );
   const selectedSlidingAmount = useMemo(
     () => parseCurrencyInputToCents(selectedSlidingAmountInput),
@@ -2765,37 +2911,44 @@ function useEventRegistrationWizard(options) {
     selectedAmount: selectedSlidingAmount
   });
   const ticketTypeSelectionRequired = useMemo(() => {
-    const event = selectedEvent ?? preSelectedEvent;
+    const event = currentEvent;
     if (!event || publicEventPricingMode(resolveRuntimeEventPricing(event)) !== "ticket_types") {
       return false;
     }
     if ((event.deliveryMode ?? "in_person") === "hybrid" && !selectedAttendanceMode) {
       return false;
     }
-    const selectedModeAvailability = selectedAttendanceMode ? (event.attendanceModes ?? []).find((mode) => mode.mode === selectedAttendanceMode) ?? null : null;
-    const canJoinWaitlist = (selectedModeAvailability?.availableSpots ?? event.availableSpots) === 0 && (selectedModeAvailability?.waitlistEnabled ?? event.waitlistEnabled) === true;
+    const selectedModeAvailability2 = selectedAttendanceMode ? (event.attendanceModes ?? []).find((mode) => mode.mode === selectedAttendanceMode) ?? null : null;
+    const canJoinWaitlist = (selectedModeAvailability2?.availableSpots ?? event.availableSpots) === 0 && (selectedModeAvailability2?.waitlistEnabled ?? event.waitlistEnabled) === true;
     return !canJoinWaitlist;
-  }, [selectedAttendanceMode, selectedEvent, preSelectedEvent]);
-  const hasValidSelectedTicketType = !ticketTypeSelectionRequired || Boolean(
-    selectedTicketType && selectedTicketType.availability.kind === "available"
-  );
+  }, [currentEvent, selectedAttendanceMode]);
+  const hasValidTicketSelection = !ticketTypeSelectionRequired || normalizedSelectedTicketLines.length > 0 && normalizedSelectedTicketLines.every((line) => {
+    if (!line.ticketTypeId) return false;
+    const ticketType = visibleTicketTypes.find((candidate) => candidate.id === line.ticketTypeId) ?? null;
+    return ticketType?.availability.kind === "available";
+  });
   useEffect(() => {
-    const event = selectedEvent ?? preSelectedEvent;
-    if (!event || publicEventPricingMode(resolveRuntimeEventPricing(event)) !== "ticket_types") {
-      if (selectedTicketTypeId !== null) {
-        setSelectedTicketTypeId(null);
+    if (!usesTicketTypeSelections) {
+      if (selectedTicketLines.length > 0) {
+        setSelectedTicketLines([]);
       }
       return;
     }
-    const implicitTicketType = getImplicitSingleAvailableTicketType(visibleTicketTypes);
-    if (implicitTicketType && selectedTicketTypeId !== implicitTicketType.id) {
-      setSelectedTicketTypeId(implicitTicketType.id);
+    const availableTicketTypes = eventTicketTypesForSelection.filter(
+      (ticketType) => ticketType.availability.kind === "available"
+    );
+    const implicitTicketType = getImplicitSingleAvailableTicketType(eventTicketTypesForSelection);
+    if (implicitTicketType && normalizedSelectedTicketLines.length === 0) {
+      setSelectedTicketLines([{ ticketTypeId: implicitTicketType.id, quantity: 1 }]);
       return;
     }
-    if (selectedTicketTypeId && !visibleTicketTypes.some((ticketType) => ticketType.id === selectedTicketTypeId)) {
-      setSelectedTicketTypeId(null);
+    const filteredLines = normalizedSelectedTicketLines.filter(
+      (line) => line.ticketTypeId && availableTicketTypes.some((ticketType) => ticketType.id === line.ticketTypeId)
+    );
+    if (filteredLines.length !== normalizedSelectedTicketLines.length) {
+      setSelectedTicketLines(filteredLines);
     }
-  }, [selectedEvent, preSelectedEvent, selectedTicketTypeId, visibleTicketTypes]);
+  }, [eventTicketTypesForSelection, normalizedSelectedTicketLines, selectedTicketLines.length, usesTicketTypeSelections]);
   useEffect(() => {
     if (!requireGuestDetails) {
       if (guests.length > 0) setGuests([]);
@@ -2839,21 +2992,20 @@ function useEventRegistrationWizard(options) {
       return resolveEventRequiresPayment({
         eligibility,
         selectedTicketType,
-        event: selectedEvent ?? preSelectedEvent
+        event: currentEvent
       });
     },
     [
       eligibility,
       selectedTicketType,
-      selectedEvent,
-      preSelectedEvent,
+      currentEvent,
       selectedEventSlidingScale,
       selectedSlidingAmount
     ]
   );
   const handleDetailsComplete = async () => {
-    if (ticketTypeSelectionRequired && !hasValidSelectedTicketType) {
-      const message = "Select a ticket type to continue.";
+    if (ticketTypeSelectionRequired && !hasValidTicketSelection) {
+      const message = "Choose at least one available ticket to continue.";
       setErrorMessage(message);
       setStep("error");
       return { ok: false, reason: "blocked", message };
@@ -2938,27 +3090,39 @@ function useEventRegistrationWizard(options) {
   const discountContext = useMemo(
     () => resolveDiscountContext({
       paymentSelection,
-      event: selectedEvent ?? preSelectedEvent,
+      event: currentEvent,
       eventRequiresPayment,
       ticketsCount
     }),
-    [eventRequiresPayment, paymentSelection, selectedEvent, preSelectedEvent, ticketsCount]
+    [currentEvent, eventRequiresPayment, paymentSelection, ticketsCount]
+  );
+  const fallbackUnitPriceCents = useMemo(
+    () => currentEvent ? publicEventScalarPrice(resolveRuntimeEventPricing(currentEvent)) ?? 0 : 0,
+    [currentEvent]
+  );
+  const ticketSelectionSubtotalCents = useMemo(() => {
+    if (!usesTicketTypeSelections) {
+      return Math.max(0, eligibility?.price ?? fallbackUnitPriceCents * ticketsCount);
+    }
+    return calculateTicketSelectionSubtotal({
+      lines: normalizedSelectedTicketLines,
+      ticketTypes: visibleTicketTypes,
+      fallbackUnitPriceCents
+    });
+  }, [eligibility, fallbackUnitPriceCents, normalizedSelectedTicketLines, ticketsCount, usesTicketTypeSelections, visibleTicketTypes]);
+  const ticketSelectionSummaryLines = useMemo(
+    () => buildTicketSelectionSummaryLines({
+      lines: ticketSelections,
+      ticketTypes: visibleTicketTypes,
+      fallbackLabel: "Ticket",
+      fallbackUnitPriceCents
+    }),
+    [fallbackUnitPriceCents, ticketSelections, visibleTicketTypes]
   );
   const discountSubtotalCents = useMemo(() => {
     if (discountContext?.type !== "event") return void 0;
-    const event = selectedEvent ?? preSelectedEvent;
-    const eventPriceCents = selectedTicketType?.priceAmount ?? eligibility?.price ?? (selectedEventSlidingScale ? selectedSlidingAmount : null) ?? (event ? publicEventScalarPrice(resolveRuntimeEventPricing(event)) : null) ?? 0;
-    return Math.max(0, eventPriceCents * ticketsCount);
-  }, [
-    discountContext,
-    selectedTicketType,
-    eligibility,
-    selectedEvent,
-    preSelectedEvent,
-    selectedEventSlidingScale,
-    selectedSlidingAmount,
-    ticketsCount
-  ]);
+    return ticketSelectionSubtotalCents;
+  }, [discountContext, ticketSelectionSubtotalCents]);
   const discountUi = useDiscountCodeUi({ api, discountContext, subtotalCents: discountSubtotalCents });
   const selectionMethod = paymentSelection.method;
   const shouldShowDiscountToggle = discountContext !== null && discountUi.manualCodeEntryAllowed && (selectionMethod === "stripe" || selectionMethod === "pass_bundle" || selectionMethod === "membership_bundle");
@@ -2966,9 +3130,8 @@ function useEventRegistrationWizard(options) {
     api,
     registrationTarget,
     selectedAttendanceMode,
-    selectedTicketTypeId,
+    ticketSelections,
     selectedSlidingAmount,
-    ticketsCount,
     formData,
     altchaSolution,
     requireGuestDetails,
@@ -2989,12 +3152,12 @@ function useEventRegistrationWizard(options) {
     setSelectedAttendanceMode(
       (event.deliveryMode ?? "in_person") === "hybrid" ? null : (event.deliveryMode ?? "in_person") === "online" ? "online" : "in_person"
     );
-    setSelectedTicketTypeId(null);
+    setSelectedTicketLines([]);
     dispatchFlow({ type: "event-changed", hasPreSelectedContext: true });
   };
   const handleRetry = () => {
     dispatchFlow({ type: "reset", hasPreSelectedContext });
-    setSelectedTicketTypeId(null);
+    setSelectedTicketLines([]);
     setSelectedSlidingAmountInput("");
     setSelectedAttendanceMode(
       preSelectedEvent?.deliveryMode === "online" ? "online" : preSelectedEvent?.deliveryMode === "in_person" ? "in_person" : null
@@ -3030,17 +3193,20 @@ function useEventRegistrationWizard(options) {
     setTicketsCount,
     selectedAttendanceMode,
     setSelectedAttendanceMode,
-    selectedTicketTypeId,
-    setSelectedTicketTypeId,
+    ticketSelections,
+    selectedTicketLines: normalizedSelectedTicketLines,
+    setSelectedTicketLines: (lines) => setSelectedTicketLines(normalizeTicketSelectionLines(lines)),
     selectedSlidingAmountInput,
     setSelectedSlidingAmountInput,
     selectedSlidingAmount,
     selectedEventSlidingScale,
     slidingScaleSelectionMessage,
     selectedTicketType,
+    ticketSelectionSummaryLines,
+    ticketSelectionSubtotalCents,
     visibleTicketTypes,
     ticketTypeSelectionRequired,
-    hasValidSelectedTicketType,
+    hasValidTicketSelection,
     eventRequiresPayment,
     formData,
     setFormData,