@session-services/web-elements 0.1.21 → 0.1.23

package/dist/collection/components/session-services-ticketing/session-services-ticketing.css

@@ -184,7 +184,13 @@
   padding: 0;
 }
 
-/* Remove default focus outline and add focus-visible styles */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
 *:focus {
   outline: none;
 }
@@ -245,8 +251,40 @@
   margin: 0 0 var(--internal-spacing-md);
 }
 
-.door-alert,
-.empty-ticketing-state,
+.ticket-section.loading-ticket-section {
+  overflow: visible;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.loading-ticket-section .admissions-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--internal-spacing-sm);
+}
+
+.admission-card.loading-admission {
+  min-height: 5.25rem;
+  padding: 0;
+  background: oklch(from var(--internal-foreground) l c h / 0.07);
+  border: 0;
+  border-radius: var(--internal-radius);
+  box-shadow: none;
+  pointer-events: none;
+  animation: loading-card 1.6s ease-out infinite;
+}
+
+@keyframes loading-card {
+  0%,
+  100% {
+    opacity: 0.48;
+  }
+  50% {
+    opacity: 0.74;
+  }
+}
+
 .passcode-form,
 .passcode-form input,
 .ticket-section,
@@ -280,8 +318,11 @@
   transform: translateY(-1px);
 }
 
-.door-alert,
-.empty-ticketing-state,
+.external-ticket-button:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: 2px;
+}
+
 .passcode-form {
   display: flex;
   flex-direction: column;
@@ -292,14 +333,36 @@
   border-radius: var(--internal-radius);
 }
 
-.door-alert {
-  background: oklch(from var(--internal-success) l c h / 0.1);
-  border-color: oklch(from var(--internal-success) l c h / 0.48);
+.passcode-form h2 {
+  color: var(--internal-foreground);
+  font-size: var(--internal-font-size-base);
+  font-weight: var(--internal-font-weight-semibold);
+  line-height: 1.3;
+}
+
+.passcode-form p {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  line-height: 1.5;
+}
+
+.door-alert,
+.empty-ticketing-state,
+.message-state {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--internal-spacing-xs) * 1.5);
+  margin-bottom: var(--internal-spacing-md);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .door-alert strong,
 .empty-ticketing-state strong,
-.passcode-form h2 {
+.message-state strong {
   color: var(--internal-foreground);
   font-size: var(--internal-font-size-base);
   font-weight: var(--internal-font-weight-semibold);
@@ -308,19 +371,45 @@
 
 .door-alert span,
 .empty-ticketing-state span,
-.passcode-form p {
+.message-state span {
   color: var(--internal-muted-foreground);
   font-size: var(--internal-font-size-sm);
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 .external-ticket-button {
+  flex-direction: column;
+  gap: calc(var(--internal-spacing-xs) * 0.5);
   width: 100%;
   padding: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
     var(--internal-spacing-lg);
+  text-decoration: none;
+}
+
+.external-ticket-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--internal-spacing-md);
+}
+
+.external-ticket-warning {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  font-weight: var(--internal-font-weight-medium);
+  line-height: 1.35;
+}
+
+.external-ticket-label {
   font-size: var(--internal-font-size-base);
   font-weight: var(--internal-font-weight-bold);
-  text-decoration: none;
+  line-height: 1.2;
+}
+
+.external-ticket-domain {
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-font-weight-medium);
+  line-height: 1.2;
+  opacity: 0.82;
 }
 
 .passcode-form input {
@@ -563,22 +652,6 @@
   flex-shrink: 0;
 }
 
-.sold-out-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: transparent;
-  color: var(--internal-muted-foreground);
-  border: none;
-  font-size: var(--internal-font-size-sm);
-  font-weight: var(--internal-font-weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-left: auto;
-  opacity: 0.7;
-}
-
 .admission-price-info {
   display: flex;
   align-items: center;
@@ -591,6 +664,7 @@
 .admission-price-wrapper {
   display: flex;
   flex-direction: column;
+  row-gap: calc(var(--internal-spacing-xs) * 0.5);
 }
 
 .admission-price {
@@ -614,12 +688,18 @@
   text-decoration: line-through;
 }
 
+.admission-booking-fee {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-font-weight-medium);
+  line-height: 1.2;
+}
+
 .admission-savings,
 .admission-availability {
   font-size: var(--internal-font-size-xs);
   font-weight: var(--internal-font-weight-medium);
-  line-height: 1.35;
-  margin-top: var(--internal-spacing-xs);
+  line-height: 1.2;
 }
 
 .admission-savings {
@@ -654,6 +734,10 @@
   transition: all var(--internal-transition-fast);
 }
 
+.quantity-controls:has(.quantity-value:focus-visible) {
+  box-shadow: 0 0 0 2px var(--internal-ring);
+}
+
 .quantity-btn {
   width: calc(var(--internal-spacing-lg) * 1.5);
   height: calc(var(--internal-spacing-lg) * 1.5);
@@ -715,6 +799,10 @@
   padding: 0 var(--internal-spacing-xs);
 }
 
+.quantity-value:focus-visible {
+  outline: none;
+}
+
 .quantity-value::-webkit-inner-spin-button,
 .quantity-value::-webkit-outer-spin-button {
   appearance: none;
@@ -733,20 +821,26 @@
   justify-content: center;
   min-width: calc(var(--internal-spacing-lg) * 1.5 * 2 + 2.5rem);
   height: calc(var(--internal-spacing-lg) * 1.5);
-  padding: 0 var(--internal-spacing-md);
-  background: var(--internal-muted);
-  border-radius: calc(var(--internal-radius) - 2px);
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
 .sold-out-controls,
 .sold-out-text {
-  color: var(--internal-muted-foreground);
+  color: var(--internal-destructive);
   font-size: var(--internal-font-size-xs);
   font-weight: var(--internal-font-weight-medium);
   letter-spacing: 0.025em;
   text-transform: uppercase;
 }
 
+.sold-out-controls.success,
+.sold-out-controls.success .sold-out-text {
+  color: var(--internal-success);
+}
+
 .checkout-actions {
   margin: var(--internal-spacing-lg) 0 0 0;
   width: 100%;
@@ -816,7 +910,7 @@
   background: var(--internal-secondary);
   color: var(--internal-foreground);
   border-radius: calc(var(--internal-radius) - 2px);
-  font-size: var(--internal-font-size-sm);
+  font-size: var(--internal-font-size-xs);
   font-weight: var(--internal-font-weight-medium);
   cursor: pointer;
   transition: all var(--internal-transition-fast);
@@ -914,40 +1008,9 @@
   }
 }
 
-/* Loading & Error States */
-.loading-state {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--internal-spacing-xl);
-  text-align: center;
-  min-height: 200px;
-}
-
-.error-banner {
-  background: oklch(
-    from var(--internal-destructive) calc(l + 0.4) calc(c * 0.2) h / 0.05
-  );
-  border: 1px solid oklch(from var(--internal-destructive) l c h / 0.2);
-  border-radius: var(--internal-radius);
-  padding: var(--internal-spacing-lg);
-  margin: var(--internal-spacing-lg);
-  text-align: center;
-}
-
-.error-banner strong {
-  display: block;
-  color: var(--internal-destructive);
-  font-size: var(--internal-font-size-lg);
-  margin-bottom: var(--internal-spacing-sm);
-}
-
-.error-banner p {
-  color: var(--internal-muted-foreground);
-  margin-bottom: var(--internal-spacing-md);
-}
-
 .retry-button {
+  align-self: flex-start;
+  margin-top: var(--internal-spacing-xs);
   background: var(--internal-primary);
   color: var(--internal-primary-foreground);
   border: 1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);
@@ -1000,6 +1063,11 @@
     padding-bottom: calc(var(--internal-spacing-xl) * 3);
   }
 
+  :host([data-sticky-checkout="true"]) .checkout-actions > .checkout-btn,
+  :host([data-sticky-checkout="true"]) .inline-external-ticket-button {
+    display: none;
+  }
+
   .sticky-checkout-bar {
     display: block;
   }

package/dist/collection/components/session-services-ticketing/session-services-ticketing.js

@@ -44,6 +44,16 @@ function eventVenueName(event) {
 function optionalId(id) {
     return id || undefined;
 }
+function urlDomain(url) {
+    if (!url)
+        return "external site";
+    try {
+        return new URL(url).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return "external site";
+    }
+}
 function admissionAriaLabel(admission, section, status) {
     if (section)
         return `${admission.name} in ${section.name} - ${status}`;
@@ -981,21 +991,21 @@ export class SessionsTicketing {
             previewItem: quoteItemsBySelection(this.previewQuote).get(key),
         });
         const savings = admissionPriceSavings(price);
-        return (h("div", { class: "admission-price-info" }, h("div", { class: "admission-price-wrapper" }, this.renderAdmissionPrice(price), state.showScarcity && (h("span", { class: "admission-availability" }, admission.available, " tickets remaining")), !state.showScarcity && savings > 0 && (h("span", { class: "admission-savings" }, "Save ", this.formatPriceValue(savings))), state.label && (h("span", { class: `admission-sale-label ${state.label.tone}` }, state.label.text))), this.renderAdmissionControls(admission, sectionId, state, mode)));
+        return (h("div", { class: "admission-price-info" }, h("div", { class: "admission-price-wrapper" }, savings > 0 && (h("span", { class: "admission-savings" }, "Save ", this.formatPriceValue(savings))), this.renderAdmissionPrice(price), price.fees > 0 && (h("span", { class: "admission-booking-fee" }, this.formatPriceValue(price.fees), " Booking Fee")), state.showScarcity && (h("span", { class: "admission-availability" }, admission.available, " tickets remaining")), state.label && (h("span", { class: `admission-sale-label ${state.label.tone}` }, state.label.text))), this.renderAdmissionControls(admission, sectionId, state, mode)));
     }
     renderAdmissionPrice(price) {
         if (price.discounted) {
-            return (h("span", { class: "admission-price-row" }, h("span", { class: "admission-price discounted" }, this.formatPriceValue(price.total)), price.gross !== undefined && (h("span", { class: "admission-price-original" }, this.formatPriceValue(price.gross)))));
+            return (h("span", { class: "admission-price-row" }, h("span", { class: "admission-price discounted" }, this.formatPriceValue(price.base)), price.gross !== undefined && (h("span", { class: "admission-price-original" }, this.formatPriceValue(price.gross)))));
         }
-        return (h("span", { class: "admission-price" }, this.formatPriceValue(price.total)));
+        return (h("span", { class: "admission-price" }, this.formatPriceValue(price.base)));
     }
     renderAdmissionControls(admission, sectionId, state, mode) {
-        if (mode === "door" || state.postSale)
-            return null;
-        if (!state.soldOut) {
-            return this.renderQuantityControls(admission, sectionId, state.disabled, state.maxQuantity);
+        if (state.statusLabel) {
+            return (h("div", { class: `sold-out-controls ${state.statusTone ?? ""}` }, h("span", { class: "sold-out-text" }, state.statusLabel)));
         }
-        return (h("div", { class: "sold-out-controls" }, h("span", { class: "sold-out-text" }, "Sold Out")));
+        if (mode === "door")
+            return null;
+        return this.renderQuantityControls(admission, sectionId, state.disabled, state.maxQuantity);
     }
     renderAdmission(admission, event, section, isSectionSoldOut = false, mode = "default") {
         const state = getAdmissionDisplayState({
@@ -1011,13 +1021,16 @@ export class SessionsTicketing {
         return `admission-card ${state.soldOut ? "sold-out" : ""} ${state.disabled && !state.soldOut ? "unavailable" : ""} ${section ? "" : "solo-admission"}`;
     }
     getAdmissionAriaLabel(admission, section, state) {
-        const status = this.admissionStatusText(admission, state.soldOut);
+        const status = state.statusLabel ?? this.admissionStatusText(admission, state.soldOut);
         return admissionAriaLabel(admission, section, status);
     }
     admissionStatusText(admission, soldOut) {
         if (soldOut)
             return "Sold Out";
-        return this.formatPriceValue(priceTotal(admission.price));
+        if ((admission.price.booking ?? 0) <= 0) {
+            return this.formatPriceValue(admission.price.base);
+        }
+        return `${this.formatPriceValue(admission.price.base)} plus ${this.formatPriceValue(admission.price.booking)} booking fee`;
     }
     renderAdmissionHeader(admission) {
         return (h("div", { class: "admission-header" }, h("div", { class: "admission-header-text" }, h("h3", { class: "admission-title" }, admission.name), admission.subtitle && (h("p", { class: "admission-subtitle" }, admission.subtitle))), this.renderMoreInfoButton(admission)));
@@ -1033,29 +1046,29 @@ export class SessionsTicketing {
         }
         return (h(h.Fragment, null, this.renderEventTimeAndLocation(event), this.renderPriceAndControls(admission, sectionId, state, mode)));
     }
-    renderSectionHeader(section, admissions, isSectionSoldOut) {
-        return (h("div", { class: "section-header" }, h("h2", { class: "section-name" }, section.name, isSectionSoldOut && h("span", { class: "sold-out-badge" }, "Sold Out")), this.renderAdmissionTime(admissions[0], "section-time"), this.renderSectionLocation(section)));
+    renderSectionHeader(section, admissions) {
+        return (h("div", { class: "section-header" }, h("h2", { class: "section-name" }, section.name), this.renderAdmissionTime(admissions[0], "section-time"), this.renderSectionLocation(section)));
     }
     renderSectionWithAdmissions(section, admissions, event, mode) {
         const soldOut = isSectionSoldOut({
             admissions,
             section,
         });
-        return (h("div", { class: `ticket-section ${soldOut ? "section-sold-out" : ""}`, key: section.id }, this.renderSectionHeader(section, admissions, soldOut), h("div", { class: "admissions-list" }, admissions.map((admission) => this.renderAdmission(admission, event, section, soldOut, mode)))));
+        return (h("div", { class: `ticket-section ${soldOut ? "section-sold-out" : ""}`, key: section.id }, this.renderSectionHeader(section, admissions), h("div", { class: "admissions-list" }, admissions.map((admission) => this.renderAdmission(admission, event, section, soldOut, mode)))));
     }
     renderLoadingState() {
-        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "loading-state" }, "Loading event details...")));
+        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "tickets-wrapper" }, h("h2", { class: "tickets-heading" }, "Get Tickets"), h("div", { class: "ticket-section loading-ticket-section" }, h("div", { class: "admissions-list" }, [0, 1, 2].map((item) => (h("div", { "aria-hidden": "true", class: "admission-card loading-admission", key: item })))))))));
     }
     renderErrorState() {
         if (this.passcodeDenied)
             return this.renderPasscodeState();
-        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "error-banner" }, h("strong", null, "Unable to load event"), h("p", null, this.error), h("button", { type: "button", class: "retry-button", onClick: () => this.loadEventData() }, "Try Again")))));
+        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "message-state" }, h("strong", null, "Tickets Couldn\u2019t Load"), h("span", null, "We couldn\u2019t load ticket details. Try again in a moment."), h("button", { type: "button", class: "retry-button", onClick: () => this.loadEventData() }, "Try Again")))));
     }
     renderPasscodeState() {
         return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("form", { class: "passcode-form", onSubmit: (e) => this.submitPasscode(e) }, h("h2", null, "Enter passcode"), h("p", null, "Enter the event passcode to view tickets and event details."), h("input", { type: "text", name: "passcode", value: this.passcodeInput, onInput: this.handlePasscodeInput, autocomplete: "one-time-code", placeholder: "Passcode", "aria-label": "Passcode" }), this.passcodeDenied && this.activePasscode && (h("span", { class: "error-message" }, "Incorrect passcode")), h("button", { type: "submit", class: "checkout-btn", disabled: !this.passcodeInput.trim() }, "Unlock event")))));
     }
     renderNotFoundState() {
-        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "error-banner" }, h("strong", null, "Event not found"), h("p", null, "The requested event could not be found.")))));
+        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "message-state" }, h("strong", null, "Event not found"), h("span", null, "We couldn\u2019t find this event. The link may be incorrect or expired.")))));
     }
     renderCouponPanel() {
         const hasInput = this.couponInput.trim().length > 0;
@@ -1137,6 +1150,13 @@ export class SessionsTicketing {
             return null;
         return (h("div", { class: "sticky-checkout-bar" }, h("button", { type: "button", class: `checkout-btn sticky-checkout-btn ${this.selectionPrompt ? "selection-prompt" : ""}`, onClick: () => this.handleStickyCheckoutClick(state), disabled: this.isStickyCheckoutDisabled(state), "aria-label": this.quoteLoading ? "Updating" : undefined }, this.renderStickyCheckoutButtonContent(state))));
     }
+    renderStickyExternalTicketing(state) {
+        if (!this.stickyCheckout)
+            return null;
+        if (!state.externalTicketUrl)
+            return null;
+        return (h("div", { class: "sticky-checkout-bar" }, h("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h("span", { class: "external-ticket-label" }, "Get tickets"))));
+    }
     renderModal() {
         if (!this.openModalAdmissionId)
             return null;
@@ -1163,7 +1183,7 @@ export class SessionsTicketing {
         if (mode !== "door")
             return null;
         const location = event.location?.name?.trim() || "the venue";
-        return (h("div", { class: "door-alert" }, h("strong", null, "Tickets are available at ", location), h("span", null, "Online sales are closed. Buy these tickets at the door when you arrive.")));
+        return (h("div", { class: "door-alert" }, h("strong", null, "Tickets are available at ", location), h("span", null, "Online sales are closed. Tickets are available at the venue when you arrive.")));
     }
     loadingView() {
         return this.loading ? this.renderLoadingState() : undefined;
@@ -1183,7 +1203,7 @@ export class SessionsTicketing {
             return this.renderNotFoundState();
         const state = getTicketingState(event);
         if (state.showExternalTicketing) {
-            return this.renderExternalTicketing(state.externalTicketUrl);
+            return (h(Host, { "data-theme": this.currentTheme, "data-sticky-checkout": this.stickyCheckout ? "true" : undefined }, h("div", { class: "session-services-ticketing-container" }, this.renderExternalTicketing(state)), this.renderStickyExternalTicketing(state)));
         }
         return (h(Host, { "data-theme": this.currentTheme, "data-sticky-checkout": this.stickyCheckout ? "true" : undefined }, h("div", { class: "session-services-ticketing-container" }, state.showTicketing
             ? this.renderTicketSections(event)
@@ -1191,13 +1211,16 @@ export class SessionsTicketing {
             state.showTicketing &&
             this.renderCheckoutActions()), this.renderStickyCheckout(state), this.renderModal()));
     }
-    renderExternalTicketing(url) {
-        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("a", { class: "external-ticket-button", href: url, target: "_blank", rel: "noreferrer" }, "Get tickets"))));
+    renderExternalTicketing(state) {
+        const domain = urlDomain(state.externalTicketUrl);
+        if (!state.externalTicketUrl)
+            return null;
+        return (h("div", { class: "tickets-wrapper" }, h("h2", { class: "tickets-heading" }, state.ticketHeading), h("div", { class: "external-ticket-panel" }, h("p", { class: "external-ticket-warning" }, "This event sells through an external ticketing site. Checkout, tickets, and support are handled there."), h("a", { class: "external-ticket-button inline-external-ticket-button", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h("span", { class: "external-ticket-label" }, "Get tickets"), h("span", { class: "external-ticket-domain" }, "via ", domain)))));
     }
     renderUnavailableState(state) {
-        return (h("div", { class: "empty-ticketing-state" }, h("strong", null, state.isEnded ? "Event ended" : "Tickets unavailable"), h("span", null, state.isEnded
-            ? "Ticket sales are closed for this event."
-            : "Tickets are not currently available for this event.")));
+        return (h("div", { class: "empty-ticketing-state" }, h("strong", null, "Tickets Unavailable"), h("span", null, state.isEnded
+            ? "This event has ended, so tickets are no longer available."
+            : "Tickets are not available for this event right now.")));
     }
     render() {
         return this.pendingView() ?? this.renderReadyState();

package/dist/collection/components/session-services-ticketing/session-services-ticketing.logic.js

@@ -62,25 +62,7 @@ function hasPurchasableAdmissions(event) {
     const zone = eventTimeZone(event);
     return event.admissions.some((admission) => isAdmissionPurchasable(admission, zone, sections));
 }
-function postSaleLabel(value) {
-    if (value === "SOLD_OUT")
-        return "Sold out";
-    if (value === "DOOR")
-        return "Tickets available at the door";
-    return "Sale ended";
-}
-function postSaleTone(value) {
-    if (value === "DOOR")
-        return "success";
-    return "muted";
-}
 function admissionSaleLabel(admission, zone) {
-    if (isNaiveDateTimePast(admission.saleEndsAt, zone)) {
-        return {
-            text: postSaleLabel(admission.saleEndsBehavior),
-            tone: postSaleTone(admission.saleEndsBehavior),
-        };
-    }
     if (!isNaiveDateTimeFuture(admission.saleStartsAt, zone)) {
         return null;
     }
@@ -89,6 +71,16 @@ function admissionSaleLabel(admission, zone) {
         tone: "muted",
     };
 }
+function admissionStatus(input) {
+    if (input.value === "DOOR" && (input.soldOut || input.saleEnded)) {
+        return { text: "Available At Door", tone: "success" };
+    }
+    if (input.soldOut)
+        return { text: "Sold Out", tone: "destructive" };
+    if (!input.saleEnded)
+        return null;
+    return { text: "Sale Ended", tone: "destructive" };
+}
 function endedStatus(admissions, zone) {
     const ended = admissions.filter((admission) => isNaiveDateTimePast(admission.saleEndsAt, zone));
     if (ended.length === 0)
@@ -189,12 +181,19 @@ export function getAdmissionDisplayState(input) {
     const zone = eventTimeZone(input.event);
     const saleNotStarted = isNaiveDateTimeFuture(input.admission.saleStartsAt, zone);
     const saleEnded = isNaiveDateTimePast(input.admission.saleEndsAt, zone);
+    const saleEndedSoldOut = saleEnded && input.admission.saleEndsBehavior === "SOLD_OUT";
     const soldOut = Boolean(input.sectionSoldOut) ||
+        saleEndedSoldOut ||
         isAdmissionSoldOut({
             admission: input.admission,
             section: input.section,
         });
     const disabled = soldOut || saleNotStarted || saleEnded;
+    const status = admissionStatus({
+        saleEnded,
+        soldOut,
+        value: input.admission.saleEndsBehavior,
+    });
     return {
         disabled,
         label: admissionSaleLabel(input.admission, zone),
@@ -202,6 +201,8 @@ export function getAdmissionDisplayState(input) {
         postSale: saleEnded,
         showScarcity: showScarcity(input.admission, soldOut, disabled),
         soldOut,
+        statusLabel: status?.text ?? null,
+        statusTone: status?.tone ?? null,
     };
 }
 function quoteItemUnits(item) {
@@ -211,29 +212,35 @@ export function getAdmissionPriceDisplay(input) {
     const item = input.quoteItem ?? input.previewItem;
     if (item) {
         const units = quoteItemUnits(item);
-        const total = Math.round(item.price.total / units);
+        const base = Math.round(Math.max((item.price.base + item.price.discount) / units, 0));
+        const fees = Math.round(item.price.booking / units);
         if (!item.price.discount || item.price.discount >= 0) {
             return {
+                base,
                 discounted: false,
-                total,
+                fees,
             };
         }
         return {
+            base,
             discounted: true,
-            gross: Math.round(item.price.gross / units),
-            total,
+            fees,
+            gross: Math.round(item.price.base / units),
         };
     }
     if (input.initialPrice && input.initialPrice.discount < 0) {
+        const fees = input.admission.price.booking ?? 0;
         return {
+            base: Math.max(input.initialPrice.total - fees, 0),
             discounted: true,
-            gross: input.initialPrice.gross,
-            total: input.initialPrice.total,
+            fees,
+            gross: Math.max(input.initialPrice.gross - fees, 0),
         };
     }
     return {
+        base: input.admission.price.base ?? 0,
         discounted: false,
-        total: priceTotal(input.admission.price),
+        fees: input.admission.price.booking ?? 0,
     };
 }
 export function quoteItemsBySelection(quote) {
@@ -242,7 +249,7 @@ export function quoteItemsBySelection(quote) {
 export function admissionPriceSavings(price) {
     if (!price.discounted || price.gross === undefined)
         return 0;
-    return Math.max(price.gross - price.total, 0);
+    return Math.max(price.gross - price.base, 0);
 }
 export function previewQuoteItems(event) {
     const ids = new Set(event.sections.map((section) => section.id));