@session-services/web-elements 0.1.21 → 0.1.22

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;
 }
@@ -569,7 +575,7 @@
   justify-content: center;
   padding: 0;
   background: transparent;
-  color: var(--internal-muted-foreground);
+  color: var(--internal-destructive);
   border: none;
   font-size: var(--internal-font-size-sm);
   font-weight: var(--internal-font-weight-medium);
@@ -591,6 +597,7 @@
 .admission-price-wrapper {
   display: flex;
   flex-direction: column;
+  row-gap: calc(var(--internal-spacing-xs) * 0.5);
 }
 
 .admission-price {
@@ -614,12 +621,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 +667,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 +732,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 +754,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 +843,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);

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

@@ -981,21 +981,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 +1011,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)));

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));

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

@@ -158,6 +158,92 @@ describe("session-services-ticketing logic", () => {
         expect(state.disabled).toBe(true);
         expect(state.label?.text).toContain("On sale");
     });
+    it("treats sold-out sale endings as sold out instead of a price label", () => {
+        const data = event({
+            admissions: [
+                admission({
+                    saleEndsAt: pastEnd,
+                    saleEndsBehavior: "SOLD_OUT",
+                }),
+            ],
+        });
+        const state = getAdmissionDisplayState({
+            admission: data.admissions[0],
+            event: data,
+        });
+        expect(state.disabled).toBe(true);
+        expect(state.label).toBeNull();
+        expect(state.soldOut).toBe(true);
+        expect(state.statusLabel).toBe("Sold Out");
+        expect(state.statusTone).toBe("destructive");
+    });
+    it("moves post-sale labels into admission status", () => {
+        const data = event({
+            admissions: [
+                admission({
+                    saleEndsAt: pastEnd,
+                    saleEndsBehavior: "SALE_ENDED",
+                }),
+                admission({
+                    id: "adm_door",
+                    saleEndsAt: pastEnd,
+                    saleEndsBehavior: "DOOR",
+                }),
+            ],
+        });
+        const ended = getAdmissionDisplayState({
+            admission: data.admissions[0],
+            event: data,
+        });
+        const door = getAdmissionDisplayState({
+            admission: data.admissions[1],
+            event: data,
+        });
+        expect(ended.label).toBeNull();
+        expect(ended.statusLabel).toBe("Sale Ended");
+        expect(ended.statusTone).toBe("destructive");
+        expect(door.label).toBeNull();
+        expect(door.statusLabel).toBe("Available At Door");
+        expect(door.statusTone).toBe("success");
+    });
+    it("shows sold-out door admissions as available at door while online sales continue", () => {
+        const data = event({
+            admissions: [
+                admission({
+                    id: "adm_first_release",
+                    available: 0,
+                    sold: 54,
+                    capacity: 54,
+                    order: 20,
+                    saleEndsAt: futureEnd,
+                    saleEndsBehavior: "DOOR",
+                }),
+                admission({
+                    id: "adm_final_release",
+                    available: 997,
+                    sold: 3,
+                    capacity: 1000,
+                    order: 40,
+                    saleEndsAt: futureEnd,
+                    saleEndsBehavior: "DOOR",
+                }),
+            ],
+        });
+        const first = getAdmissionDisplayState({
+            admission: data.admissions[0],
+            event: data,
+        });
+        const final = getAdmissionDisplayState({
+            admission: data.admissions[1],
+            event: data,
+        });
+        expect(first.disabled).toBe(true);
+        expect(first.soldOut).toBe(true);
+        expect(first.statusLabel).toBe("Available At Door");
+        expect(first.statusTone).toBe("success");
+        expect(final.disabled).toBe(false);
+        expect(final.statusLabel).toBeNull();
+    });
     it("orders top-level sections and unsectioned admissions together", () => {
         const main = section({ id: "sec_main", order: 2 });
         const early = admission({ id: "adm_early", order: 1 });
@@ -185,12 +271,13 @@ describe("session-services-ticketing logic", () => {
             quoteItem: quoteItem(),
         });
         expect(price).toEqual({
+            base: 1000,
             discounted: true,
-            gross: 2200,
-            total: 1200,
+            fees: 200,
+            gross: 2000,
         });
     });
-    it("uses quote item total pricing without discount styling", () => {
+    it("uses quote item base pricing without discount styling", () => {
         const price = getAdmissionPriceDisplay({
             admission: admission(),
             mode: "default",
@@ -208,19 +295,20 @@ describe("session-services-ticketing logic", () => {
             }),
         });
         expect(price).toEqual({
+            base: 2000,
             discounted: false,
-            total: 2250,
+            fees: 200,
         });
     });
-    it("includes booking fees in admission prices for every mode", () => {
+    it("separates admission base and booking fees for every mode", () => {
         expect(getAdmissionPriceDisplay({
             admission: admission(),
             mode: "default",
-        }).total).toBe(2200);
+        })).toMatchObject({ base: 2000, fees: 200 });
         expect(getAdmissionPriceDisplay({
             admission: admission(),
             mode: "door",
-        }).total).toBe(2200);
+        })).toMatchObject({ base: 2000, fees: 200 });
     });
     it("uses discounted initial preview pricing when available", () => {
         const price = getAdmissionPriceDisplay({
@@ -233,20 +321,23 @@ describe("session-services-ticketing logic", () => {
             mode: "default",
         });
         expect(price).toEqual({
+            base: 1000,
             discounted: true,
-            gross: 2200,
-            total: 1200,
+            fees: 200,
+            gross: 2000,
         });
     });
     it("calculates admission savings from discounted display prices", () => {
         expect(admissionPriceSavings({
+            base: 1000,
             discounted: true,
-            gross: 2200,
-            total: 1200,
+            fees: 200,
+            gross: 2000,
         })).toBe(1000);
         expect(admissionPriceSavings({
+            base: 2200,
             discounted: false,
-            total: 2200,
+            fees: 200,
         })).toBe(0);
     });
     it("divides preview quote pricing by preview quantity", () => {
@@ -268,9 +359,10 @@ describe("session-services-ticketing logic", () => {
             }),
         });
         expect(price).toEqual({
+            base: 1000,
             discounted: true,
-            gross: 2200,
-            total: 1200,
+            fees: 200,
+            gross: 2000,
         });
     });
 });