@session-services/web-elements 0.1.23 → 0.1.24

package/dist/cjs/session-services-ticketing.cjs.entry.js

@@ -23626,6 +23626,7 @@ const sessionServicesTicketingCss = () => `:host{--background:transparent;--fore
 
 const quoteTotal = (quote) => quote.price?.total ?? 0;
 const QUOTE_DEBOUNCE_MS = 150;
+const STICKY_CHECKOUT_SCROLL_OFFSET_PX = 100;
 function objectValue(value, key) {
     if (!value || typeof value !== "object")
         return undefined;
@@ -24452,14 +24453,21 @@ const SessionsTicketing = class {
     handleStickyCheckoutClick(state) {
         if (state.isDoorOnly || !hasQuoteItems(this.quote)) {
             this.promptTicketSelection();
-            this.host.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-            });
+            this.scrollToTicketSelector();
             return;
         }
         this.initiateCheckout().catch(() => undefined);
     }
+    scrollToTicketSelector() {
+        const target = this.host.shadowRoot?.querySelector(".tickets-wrapper") ??
+            this.host;
+        window.scrollTo({
+            behavior: "smooth",
+            top: Math.max(target.getBoundingClientRect().top +
+                window.scrollY -
+                STICKY_CHECKOUT_SCROLL_OFFSET_PX, 0),
+        });
+    }
     getCartProducts() {
         if (!this.quote)
             return [];
@@ -24777,7 +24785,8 @@ const SessionsTicketing = class {
             return null;
         if (!state.externalTicketUrl)
             return null;
-        return (index.h("div", { class: "sticky-checkout-bar" }, index.h("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, index.h("span", { class: "external-ticket-label" }, "Get tickets"))));
+        const domain = urlDomain(state.externalTicketUrl);
+        return (index.h("div", { class: "sticky-checkout-bar" }, index.h("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, index.h("span", { class: "external-ticket-label" }, "Get tickets"), index.h("span", { class: "external-ticket-domain" }, "via ", domain))));
     }
     renderModal() {
         if (!this.openModalAdmissionId)

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

@@ -9,6 +9,7 @@ h, } from "@stencil/core";
 import { admissionPriceSavings, discountCouponFromSearch, getAdmissionDisplayState, getAdmissionPriceDisplay, getTicketingState, parseSelectionKey, previewQuoteItems, priceTotal, quoteItemsBySelection, selectionKey, topLevelTicketItems, visibleAdmissions, } from "./session-services-ticketing.logic";
 const quoteTotal = (quote) => quote.price?.total ?? 0;
 const QUOTE_DEBOUNCE_MS = 150;
+const STICKY_CHECKOUT_SCROLL_OFFSET_PX = 100;
 function objectValue(value, key) {
     if (!value || typeof value !== "object")
         return undefined;
@@ -829,14 +830,21 @@ export class SessionsTicketing {
     handleStickyCheckoutClick(state) {
         if (state.isDoorOnly || !hasQuoteItems(this.quote)) {
             this.promptTicketSelection();
-            this.host.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-            });
+            this.scrollToTicketSelector();
             return;
         }
         this.initiateCheckout().catch(() => undefined);
     }
+    scrollToTicketSelector() {
+        const target = this.host.shadowRoot?.querySelector(".tickets-wrapper") ??
+            this.host;
+        window.scrollTo({
+            behavior: "smooth",
+            top: Math.max(target.getBoundingClientRect().top +
+                window.scrollY -
+                STICKY_CHECKOUT_SCROLL_OFFSET_PX, 0),
+        });
+    }
     getCartProducts() {
         if (!this.quote)
             return [];
@@ -1155,7 +1163,8 @@ export class SessionsTicketing {
             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"))));
+        const domain = urlDomain(state.externalTicketUrl);
+        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"), h("span", { class: "external-ticket-domain" }, "via ", domain))));
     }
     renderModal() {
         if (!this.openModalAdmissionId)

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

@@ -138,6 +138,9 @@ function widget() {
     const item = new SessionsTicketing();
     item.eventId = "evt_1";
     item.event = event();
+    item.host = {
+        getBoundingClientRect: () => ({ top: 0 }),
+    };
     item.selectedItems = new Map();
     item.quote = null;
     item.previewQuote = null;
@@ -276,6 +279,9 @@ describe("session-services-ticketing component", () => {
         expect(links[0].props.href).toBe("https://tickets.example");
         expect(hasClass(links[0], "external-ticket-button")).toBe(true);
         expect(hasClass(links[0], "sticky-checkout-btn")).toBe(true);
+        expect(rendered(links[0], (node) => node.tag === "span" &&
+            hasClass(node, "external-ticket-domain") &&
+            node.children.join("") === "via tickets.example")).toHaveLength(1);
     });
     it("keeps external ticketing under the sticky checkout host state", () => {
         const item = widget();
@@ -290,6 +296,26 @@ describe("session-services-ticketing component", () => {
         expect(links.some((link) => hasClass(link, "inline-external-ticket-button"))).toBe(true);
         expect(links.some((link) => hasClass(link, "sticky-checkout-btn"))).toBe(true);
     });
+    it("scrolls to the ticket selector with a 100px top offset", () => {
+        const item = widget();
+        const scrollTo = vi.fn();
+        const tickets = {
+            getBoundingClientRect: () => ({ top: 420 }),
+        };
+        item.host = {
+            shadowRoot: {
+                querySelector: vi.fn().mockReturnValue(tickets),
+            },
+            getBoundingClientRect: () => ({ top: 900 }),
+        };
+        vi.stubGlobal("window", { scrollY: 250, scrollTo });
+        item.handleStickyCheckoutClick(getTicketingState(item.event));
+        expect(scrollTo).toHaveBeenCalledWith({
+            behavior: "smooth",
+            top: 570,
+        });
+        vi.unstubAllGlobals();
+    });
     it("classifies only passcode access failures as passcode errors", async () => {
         const item = widget();
         item.client.event.get = vi

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

@@ -23624,6 +23624,7 @@ const sessionServicesTicketingCss = () => `:host{--background:transparent;--fore
 
 const quoteTotal = (quote) => quote.price?.total ?? 0;
 const QUOTE_DEBOUNCE_MS = 150;
+const STICKY_CHECKOUT_SCROLL_OFFSET_PX = 100;
 function objectValue(value, key) {
     if (!value || typeof value !== "object")
         return undefined;
@@ -24454,14 +24455,21 @@ const SessionsTicketing = /*@__PURE__*/ proxyCustomElement(class SessionsTicketi
     handleStickyCheckoutClick(state) {
         if (state.isDoorOnly || !hasQuoteItems(this.quote)) {
             this.promptTicketSelection();
-            this.host.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-            });
+            this.scrollToTicketSelector();
             return;
         }
         this.initiateCheckout().catch(() => undefined);
     }
+    scrollToTicketSelector() {
+        const target = this.host.shadowRoot?.querySelector(".tickets-wrapper") ??
+            this.host;
+        window.scrollTo({
+            behavior: "smooth",
+            top: Math.max(target.getBoundingClientRect().top +
+                window.scrollY -
+                STICKY_CHECKOUT_SCROLL_OFFSET_PX, 0),
+        });
+    }
     getCartProducts() {
         if (!this.quote)
             return [];
@@ -24779,7 +24787,8 @@ const SessionsTicketing = /*@__PURE__*/ proxyCustomElement(class SessionsTicketi
             return null;
         if (!state.externalTicketUrl)
             return null;
-        return (h$2("div", { class: "sticky-checkout-bar" }, h$2("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h$2("span", { class: "external-ticket-label" }, "Get tickets"))));
+        const domain = urlDomain(state.externalTicketUrl);
+        return (h$2("div", { class: "sticky-checkout-bar" }, h$2("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h$2("span", { class: "external-ticket-label" }, "Get tickets"), h$2("span", { class: "external-ticket-domain" }, "via ", domain))));
     }
     renderModal() {
         if (!this.openModalAdmissionId)

package/dist/esm/session-services-ticketing.entry.js

@@ -23624,6 +23624,7 @@ const sessionServicesTicketingCss = () => `:host{--background:transparent;--fore
 
 const quoteTotal = (quote) => quote.price?.total ?? 0;
 const QUOTE_DEBOUNCE_MS = 150;
+const STICKY_CHECKOUT_SCROLL_OFFSET_PX = 100;
 function objectValue(value, key) {
     if (!value || typeof value !== "object")
         return undefined;
@@ -24450,14 +24451,21 @@ const SessionsTicketing = class {
     handleStickyCheckoutClick(state) {
         if (state.isDoorOnly || !hasQuoteItems(this.quote)) {
             this.promptTicketSelection();
-            this.host.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-            });
+            this.scrollToTicketSelector();
             return;
         }
         this.initiateCheckout().catch(() => undefined);
     }
+    scrollToTicketSelector() {
+        const target = this.host.shadowRoot?.querySelector(".tickets-wrapper") ??
+            this.host;
+        window.scrollTo({
+            behavior: "smooth",
+            top: Math.max(target.getBoundingClientRect().top +
+                window.scrollY -
+                STICKY_CHECKOUT_SCROLL_OFFSET_PX, 0),
+        });
+    }
     getCartProducts() {
         if (!this.quote)
             return [];
@@ -24775,7 +24783,8 @@ const SessionsTicketing = class {
             return null;
         if (!state.externalTicketUrl)
             return null;
-        return (h$2("div", { class: "sticky-checkout-bar" }, h$2("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h$2("span", { class: "external-ticket-label" }, "Get tickets"))));
+        const domain = urlDomain(state.externalTicketUrl);
+        return (h$2("div", { class: "sticky-checkout-bar" }, h$2("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h$2("span", { class: "external-ticket-label" }, "Get tickets"), h$2("span", { class: "external-ticket-domain" }, "via ", domain))));
     }
     renderModal() {
         if (!this.openModalAdmissionId)