@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/cjs/tl-order-confirmation.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-I9CoYv3k.js');
+var index = require('./index-DanPUX0s.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
-var orderSummary = require('./order-summary-X3TlZxc2.js');
-require('./money-BtmM2gt-.js');
+var webQuery = require('./web-query-Ce73jB4k.js');
+var ticketSelector = require('./ticket-selector-BYVL13k_.js');
 
 const tlOrderConfirmationCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.confirmation{text-align:center}.check{width:4rem;height:4rem;margin:0 auto var(--tl-spacing-4);display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--tl-success);color:var(--tl-success-foreground)}.check svg{width:2rem;height:2rem}.title{margin:0 0 var(--tl-spacing-2);font-size:1.875rem;font-weight:700;line-height:1.2}.lead{margin:0 0 var(--tl-spacing-6);color:var(--tl-muted-foreground)}.error{margin:0 0 var(--tl-spacing-6);font-size:0.875rem;color:var(--tl-error)}.summary{text-align:left;padding:var(--tl-spacing-6);margin-bottom:var(--tl-spacing-6);background:var(--tl-muted);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg)}.rows{display:grid;gap:var(--tl-spacing-2);margin:0 0 var(--tl-spacing-4);padding:0 0 var(--tl-spacing-4);border-bottom:1px solid var(--tl-border)}.row{display:flex;justify-content:space-between;gap:var(--tl-spacing-4);font-size:0.875rem}.row dt{color:var(--tl-muted-foreground)}.row dd{margin:0;text-align:right;overflow-wrap:anywhere}.reference{font-family:var(--tl-font-family-mono);font-weight:600}.lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--tl-spacing-2)}.line{display:flex;justify-content:space-between;gap:var(--tl-spacing-4);font-size:0.875rem}.totals{margin-top:var(--tl-spacing-3);padding-top:var(--tl-spacing-3);border-top:1px solid var(--tl-border);display:grid;gap:var(--tl-spacing-1);font-size:0.875rem}.total-row{display:flex;justify-content:space-between;color:var(--tl-muted-foreground)}.total-row.discount{color:var(--tl-success)}.total-row.total{margin-top:var(--tl-spacing-1);font-size:1rem;font-weight:600;color:var(--tl-foreground)}.tickets{text-align:left}.subtitle{margin:0 0 var(--tl-spacing-4);font-size:1.125rem;font-weight:600}.hint{margin:var(--tl-spacing-3) 0 0;font-size:0.75rem;color:var(--tl-muted-foreground)}.skeleton-line,.skeleton-block{background:var(--tl-secondary);border-radius:var(--tl-radius-md);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;margin:0 auto var(--tl-spacing-3)}.skeleton-line{height:1rem}.skeleton-line.short{width:40%;height:1.75rem}.skeleton-line.long{width:70%}.skeleton-block{height:8rem}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`;
 
@@ -16,131 +16,95 @@ const TlOrderConfirmation = class {
         this.showTickets = true;
         /** Columns for the ticket grid. */
         this.columns = 2;
-        this.order = null;
-        this.resolvedOrderId = null;
-        this.loading = false;
-        this.error = null;
-        this.paymentFailed = false;
-        this.occurrence = null;
-        this.signedInCustomer = null;
-    }
-    watchOrderId(next) {
-        this.resolvedOrderId = next || this.orderIdFromUrl();
-        this.load();
+        this.element = ticketSelector.createElement(ticketSelector.orderConfirmationCore, {
+            client: () => sdkConnector.getSDK(),
+            clientReady: () => sdkConnector.whenSDK(),
+            query: webQuery.webQuery,
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
-    async componentWillLoad() {
-        const params = this.urlParams();
-        // Stripe returns with ?redirect_status=; anything but succeeded is not paid.
-        const redirect = params?.get('redirect_status');
-        this.paymentFailed = !!redirect && redirect !== 'succeeded';
-        this.resolvedOrderId = this.orderId || this.orderIdFromUrl();
-        if (this.resolvedOrderId && !this.paymentFailed) {
-            await this.load();
-        }
+    /**
+     * A new order id is a new subject, and the core resolves it again the way
+     * the mount did - the prop first, the link second. Not a remount: the
+     * `checkout:completed` subscription belongs to the element rather than to
+     * the order it is showing.
+     */
+    watchOrderId() {
+        this.syncProps();
+        this.element.actions.orderIdChanged();
     }
-    componentDidLoad() {
-        // A page that mounts before checkout: pick the order up when the SDK completes it.
-        this.unsubscribe = sdkConnector.onSDKEvent('checkout:completed', (payload) => {
-            const order = payload;
-            if (!order?.id)
-                return;
-            this.paymentFailed = false;
-            this.order = order;
-            this.resolvedOrderId = order.id;
-            this.tlOrderLoaded.emit({ order });
-            // Re-read for tickets, which are issued after the order is created.
-            this.load();
+    syncProps() {
+        this.element.setProps({
+            orderId: this.orderId,
+            customerEmail: this.customerEmail,
+            showTickets: this.showTickets,
+            columns: this.columns,
         });
     }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    /**
+     * Off screen: run the mount's teardown, which drops the
+     * `checkout:completed` subscription. Not `destroy()`: Stencil calls this for
+     * a DOM move as well as a removal, and a destroyed core never mounts again.
+     */
     disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
         this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    urlParams() {
-        if (typeof window === 'undefined' || !window.location?.search)
-            return null;
-        return new URLSearchParams(window.location.search);
-    }
-    orderIdFromUrl() {
-        return this.urlParams()?.get('orderId') || null;
-    }
-    async load() {
-        const id = this.resolvedOrderId;
-        if (!id)
-            return;
-        try {
-            this.loading = !this.order;
-            this.error = null;
-            const sdk = await sdkConnector.whenSDK();
-            const orders = sdk.getOrdersManager?.();
-            if (!orders)
-                throw new Error('Orders are not available');
-            const order = (await orders.get(id));
-            if (!order)
-                throw new Error('Order not found');
-            this.order = order;
-            this.signedInCustomer = sdk.getAuthManager?.()?.customer ?? null;
-            this.tlOrderLoaded.emit({ order });
-            this.resolveEvent(sdk, order);
-        }
-        catch (err) {
-            console.error('[tl-order-confirmation] Failed to load order:', err);
-            this.error = orderSummary.errorMessage(err, 'Failed to load your order');
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    // The order view has no event name or date; look them up from the first
-    // ticket's occurrence. Non-blocking and best effort.
-    async resolveEvent(sdk, order) {
-        const occurrenceId = order.tickets?.find((t) => t.eventOccurrenceId)?.eventOccurrenceId;
-        if (!occurrenceId)
-            return;
-        try {
-            const resolved = await orderSummary.resolveOccurrence(sdk, occurrenceId);
-            if (resolved && this.order?.id === order.id)
-                this.occurrence = resolved;
-        }
-        catch {
-            // Leave the event line at what the order gives us.
-        }
+    forward(event, detail) {
+        if (event === 'tlOrderLoaded')
+            this.tlOrderLoaded.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
-    renderRows(order) {
-        const email = this.customerEmail || orderSummary.orderCustomerEmail(order, this.signedInCustomer);
-        const eventName = this.occurrence?.eventName || orderSummary.orderEventName(order);
-        const startsAt = this.occurrence?.startsAt;
-        return (index.h("dl", { class: "rows" }, index.h("div", { class: "row" }, index.h("dt", null, "Order reference"), index.h("dd", { class: "reference" }, order.orderNumber)), email && (index.h("div", { class: "row" }, index.h("dt", null, "Email"), index.h("dd", null, email))), eventName && (index.h("div", { class: "row" }, index.h("dt", null, "Event"), index.h("dd", null, eventName))), startsAt && (index.h("div", { class: "row" }, index.h("dt", null, "Date"), index.h("dd", null, orderSummary.formatDateTime(startsAt))))));
+    renderRows() {
+        return (index.h("dl", { class: "rows" }, this.view.derived.rows.map((row) => (index.h("div", { class: "row", key: row.label }, index.h("dt", null, row.label), index.h("dd", { class: row.reference ? 'reference' : undefined }, row.value))))));
     }
-    // Money comes from orderTotals: the booking fee is its own row named after
-    // the channel's fee profile, the subtotal is the ticket lines alone (the
-    // order's own `subtotal` folds the fee line into it) and the total is the
-    // order's figure, so what is shown is what was charged.
-    renderTotals(order) {
-        const totals = orderSummary.orderTotals(order);
-        const c = totals.currency;
-        return (index.h("div", { class: "totals" }, index.h("div", { class: "total-row" }, index.h("span", null, "Subtotal"), index.h("span", null, orderSummary.formatPrice(totals.subtotal, c))), totals.showFee && (index.h("div", { class: "total-row fee" }, index.h("span", null, totals.feeLabel), index.h("span", null, orderSummary.formatPrice(totals.fees, c)))), totals.tax > 0 && (index.h("div", { class: "total-row" }, index.h("span", null, "Tax"), index.h("span", null, orderSummary.formatPrice(totals.tax, c)))), totals.discount > 0 && (index.h("div", { class: "total-row discount" }, index.h("span", null, "Discount"), index.h("span", null, "-", orderSummary.formatPrice(totals.discount, c)))), index.h("div", { class: "total-row total" }, index.h("span", null, "Total"), index.h("span", null, orderSummary.formatPrice(totals.total, c)))));
+    // Money comes from the core's orderTotals: the booking fee is its own row
+    // named after the channel's fee profile, the subtotal is the ticket lines
+    // alone (the order's own `subtotal` folds the fee line into it) and the
+    // total is the order's figure, so what is shown is what was charged.
+    renderTotals() {
+        const { strings, derived } = this.view;
+        return (index.h("div", { class: "totals" }, index.h("div", { class: "total-row" }, index.h("span", null, strings.subtotalRow), index.h("span", null, derived.subtotalLabel)), derived.totals.showFee && (index.h("div", { class: "total-row fee" }, index.h("span", null, derived.totals.feeLabel), index.h("span", null, derived.feeAmountLabel))), derived.showTaxRow && (index.h("div", { class: "total-row" }, index.h("span", null, strings.taxRow), index.h("span", null, derived.taxLabel))), derived.showDiscountRow && (index.h("div", { class: "total-row discount" }, index.h("span", null, strings.discountRow), index.h("span", null, "-", derived.discountLabel))), index.h("div", { class: "total-row total" }, index.h("span", null, strings.totalRow), index.h("span", null, derived.totalLabel))));
     }
     render() {
-        if (this.paymentFailed) {
-            return (index.h("div", { class: "confirmation" }, index.h("h1", { class: "title" }, "Payment not completed"), index.h("p", { class: "lead" }, "Your payment wasn't completed. Your cart is still saved, so you can try again.")));
+        const { status, state, strings, derived } = this.view;
+        if (status === 'payment-failed') {
+            return (index.h("div", { class: "confirmation" }, index.h("h1", { class: "title" }, strings.paymentFailedTitle), index.h("p", { class: "lead" }, strings.paymentFailedLead)));
         }
         // Nothing to show yet: no order in props, URL or from checkout.
-        if (!this.resolvedOrderId && !this.order) {
+        if (status === 'idle') {
             return null;
         }
-        if (this.loading) {
+        if (status === 'loading') {
             return (index.h("div", { class: "confirmation" }, index.h("div", { class: "skeleton-line short" }), index.h("div", { class: "skeleton-line long" }), index.h("div", { class: "skeleton-block" })));
         }
-        const order = this.order;
-        const orderId = order?.id || this.resolvedOrderId;
-        return (index.h("div", { class: "confirmation" }, index.h("div", { class: "check", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" }))), index.h("h1", { class: "title" }, "You're going!"), index.h("p", { class: "lead" }, order?.orderNumber
-            ? `Order ${order.orderNumber} is confirmed. Your tickets are on their way to your email.`
-            : 'Your order is confirmed. Your tickets are on their way to your email.'), this.error && !order && (index.h("p", { class: "error" }, "We couldn't load your order details yet. ", this.error)), order && Array.isArray(order.items) && (index.h("div", { class: "summary" }, this.renderRows(order), index.h("ul", { class: "lines" }, orderSummary.ticketItems(order).map((item, i) => (index.h("li", { class: "line", key: i }, index.h("span", { class: "line-name" }, item.quantity, " x ", item.name), index.h("span", { class: "line-price" }, orderSummary.formatPrice(item.subtotal, order.currency)))))), this.renderTotals(order))), this.showTickets && order && (index.h("div", { class: "tickets" }, index.h("h2", { class: "subtitle" }, "Your tickets"), index.h("tl-order-tickets", { orderId: orderId, columns: this.columns }), index.h("p", { class: "hint" }, "Show these QR codes at the door for entry. Use Download PDF on a ticket to save it.")))));
+        return (index.h("div", { class: "confirmation" }, index.h("div", { class: "check", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" }))), index.h("h1", { class: "title" }, strings.title), index.h("p", { class: "lead" }, derived.leadText), derived.showError && (index.h("p", { class: "error" }, strings.errorPrefix, state.error)), derived.showSummary && (index.h("div", { class: "summary" }, this.renderRows(), index.h("ul", { class: "lines" }, derived.lines.map((line, i) => (index.h("li", { class: "line", key: i }, index.h("span", { class: "line-name" }, line.label), index.h("span", { class: "line-price" }, line.priceLabel))))), this.renderTotals())), derived.showTickets && (index.h("div", { class: "tickets" }, index.h("h2", { class: "subtitle" }, strings.ticketsTitle), index.h("tl-order-tickets", { orderId: derived.ticketsOrderId, columns: this.columns }), index.h("p", { class: "hint" }, strings.ticketsHint)))));
     }
     static get watchers() { return {
         "orderId": [{
                 "watchOrderId": 0
+            }],
+        "customerEmail": [{
+                "syncProps": 0
+            }],
+        "showTickets": [{
+                "syncProps": 0
+            }],
+        "columns": [{
+                "syncProps": 0
             }]
     }; }
 };

package/dist/cjs/tl-order-tickets_2.cjs.entry.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-I9CoYv3k.js');
+var index = require('./index-DanPUX0s.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var ticketSelector = require('./ticket-selector-BYVL13k_.js');
 
 const tlOrderTicketsCss = () => `:host{display:block;font-family:var(--tl-font-family)}.grid{display:grid;gap:var(--tl-spacing-4);grid-template-columns:1fr}@media (min-width: 480px){.grid.cols-2{grid-template-columns:repeat(2, 1fr)}.grid.cols-3{grid-template-columns:repeat(3, 1fr)}}.state{padding:var(--tl-spacing-6);text-align:center;color:var(--tl-muted-foreground);font-size:0.875rem}.state.error{color:var(--tl-error)}.state.issuing{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2)}.spinner{width:0.875rem;height:0.875rem;border:2px solid var(--tl-border);border-top-color:var(--tl-primary);border-radius:50%;animation:tl-spin 0.7s linear infinite;flex:none}@keyframes tl-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--tl-border)}}`;
 
@@ -10,97 +11,70 @@ const TlOrderTickets = class {
         index.registerInstance(this, hostRef);
         /** Columns in the grid (default 2). */
         this.columns = 2;
-        this.tickets = [];
-        this.loading = true;
-        this.error = null;
-        /** The order loaded, but has no tickets yet and we are still waiting. */
-        this.issuing = false;
-        this.poll = 0;
+        this.element = ticketSelector.createElement(ticketSelector.orderTicketsCore, {
+            client: () => sdkConnector.getSDK(),
+            clientReady: () => sdkConnector.whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
+    /** A different order: forget this one and read again, from the top. */
     watchOrder() {
-        this.reset();
-        this.load();
+        this.syncProps();
+        this.element.actions.orderIdChanged();
     }
-    async componentWillLoad() {
-        await this.load();
+    syncProps() {
+        this.element.setProps({ orderId: this.orderId, columns: this.columns });
+    }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
+    /**
+     * Off screen: run the mount's teardown, which is what stops the polling.
+     * Not `destroy()`: Stencil calls this for a DOM move as well as a removal,
+     * and a destroyed core never mounts again.
+     */
     disconnectedCallback() {
-        this.stopPolling();
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    reset() {
-        this.stopPolling();
-        this.poll = 0;
-        this.tickets = [];
-        this.issuing = false;
-    }
-    stopPolling() {
-        if (this.timer !== undefined) {
-            clearTimeout(this.timer);
-            this.timer = undefined;
-        }
-    }
-    async load() {
-        try {
-            this.error = null;
-            const sdk = await sdkConnector.whenSDK();
-            const orders = sdk.getOrdersManager?.();
-            if (!orders)
-                throw new Error('Tickets are not available');
-            const order = (await orders.get(this.orderId));
-            this.tickets = order?.tickets ?? [];
-            if (this.tickets.length > 0) {
-                // Arrived. Stop asking.
-                this.issuing = false;
-                this.stopPolling();
-            }
-            else {
-                const delay = TlOrderTickets.POLL_DELAYS_MS[this.poll];
-                // `undefined` once the schedule runs out: give up waiting, and say so.
-                this.issuing = delay !== undefined;
-                if (delay !== undefined) {
-                    this.poll += 1;
-                    this.stopPolling();
-                    this.timer = setTimeout(() => this.load(), delay);
-                }
-            }
-        }
-        catch (err) {
-            // A failed request is a different thing from an order with no tickets,
-            // and stops the polling: retrying a 403 a dozen times helps nobody.
-            this.stopPolling();
-            this.issuing = false;
-            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
-        }
-        finally {
-            this.loading = false;
-        }
+    /** The core declares no events, so nothing ever reaches here. */
+    forward(_event, _detail) {
+        // Intentionally empty: tl-order-tickets announces nothing to its host.
     }
     render() {
-        if (this.loading) {
-            return index.h("div", { class: "state" }, "Loading tickets\u2026");
+        const { status, state, strings, derived } = this.view;
+        if (status === 'loading') {
+            return index.h("div", { class: "state" }, strings.loading);
+        }
+        if (status === 'error') {
+            return index.h("div", { class: "state error" }, state.error);
         }
-        if (this.error) {
-            return index.h("div", { class: "state error" }, this.error);
+        if (status === 'issuing') {
+            return (index.h("div", { class: "state issuing", role: "status", "aria-live": "polite" }, index.h("span", { class: "spinner", "aria-hidden": "true" }), strings.preparing));
         }
-        if (this.tickets.length === 0) {
-            return this.issuing ? (index.h("div", { class: "state issuing", role: "status", "aria-live": "polite" }, index.h("span", { class: "spinner", "aria-hidden": "true" }), "Preparing your tickets\u2026")) : (index.h("div", { class: "state", role: "status" }, "Your tickets are taking longer than usual. They will be emailed to you as soon as they are ready."));
+        if (status === 'delayed') {
+            return (index.h("div", { class: "state", role: "status" }, strings.delayed));
         }
-        return (index.h("div", { class: `grid cols-${this.columns}` }, this.tickets.map((t) => (index.h("tl-ticket", { key: t.id, ticket: t, orderId: this.orderId })))));
+        return (index.h("div", { class: `grid cols-${derived.columns}` }, derived.tickets.map((t) => (index.h("tl-ticket", { key: t.id, ticket: t, orderId: derived.orderId })))));
     }
     static get watchers() { return {
         "orderId": [{
                 "watchOrder": 0
+            }],
+        "columns": [{
+                "syncProps": 0
             }]
     }; }
 };
-/**
- * Gaps between polls, in milliseconds. Front-loaded because issuance
- * usually lands in the first few seconds, then widening so a genuinely
- * stuck order is not hammered. Sums to roughly one minute.
- */
-TlOrderTickets.POLL_DELAYS_MS = [
-    1000, 1500, 2000, 3000, 4000, 5000, 6000, 8000, 10000, 12000,
-];
 TlOrderTickets.style = tlOrderTicketsCss();
 
 function getDefaultExportFromCjs (x) {

package/dist/cjs/tl-promo-code.cjs.entry.js

@@ -1,9 +1,8 @@
 'use strict';
 
-var index = require('./index-I9CoYv3k.js');
+var index = require('./index-DanPUX0s.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
-var orderSummary = require('./order-summary-X3TlZxc2.js');
-require('./money-BtmM2gt-.js');
+var ticketSelector = require('./ticket-selector-BYVL13k_.js');
 
 const tlPromoCodeCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.field{display:flex;gap:var(--tl-spacing-2)}.input{flex:1;min-width:0;padding:var(--tl-spacing-3);font:inherit;font-size:0.875rem;color:var(--tl-foreground);background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md);text-transform:uppercase}.input::placeholder{text-transform:none;color:var(--tl-muted-foreground)}.input:focus{outline:2px solid var(--tl-primary);outline-offset:1px}.apply{padding:var(--tl-spacing-3) var(--tl-spacing-4);font:inherit;font-size:0.875rem;font-weight:500;color:var(--tl-primary-foreground);background:var(--tl-primary);border:none;border-radius:var(--tl-radius-md);cursor:pointer;white-space:nowrap}.apply:hover:not(:disabled){opacity:0.9}.apply:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.error{margin:var(--tl-spacing-2) 0 0;font-size:0.8125rem;color:var(--tl-error)}.applied{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-3);padding:var(--tl-spacing-3);font-size:0.875rem;background:var(--tl-muted);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md)}.applied-text{display:flex;align-items:center;gap:var(--tl-spacing-2)}.icon{width:1rem;height:1rem;flex-shrink:0;color:var(--tl-success)}.code{font-family:var(--tl-font-family-mono)}.link{padding:0;font:inherit;font-size:0.8125rem;color:var(--tl-primary);background:none;border:none;cursor:pointer;white-space:nowrap}.link:hover{text-decoration:underline}`;
 
@@ -16,60 +15,64 @@ const TlPromoCode = class {
         this.placeholder = 'Promo or presale code';
         /** Apply button label. */
         this.buttonLabel = 'Apply';
-        this.code = '';
-        this.applying = false;
-        this.applied = null;
-        this.error = null;
+        this.element = ticketSelector.createElement(ticketSelector.promoCodeCore, {
+            client: () => sdkConnector.getSDK(),
+            clientReady: () => sdkConnector.whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
         this.handleInput = (e) => {
-            this.code = e.target.value;
-            this.error = null;
+            this.element.actions.setCode(e.target.value);
         };
         this.handleSubmit = (e) => {
             e.preventDefault();
-            this.apply();
-        };
-        this.reset = () => {
-            this.applied = null;
-            this.error = null;
+            this.element.actions.apply();
         };
+        this.reset = () => this.element.actions.reset();
     }
-    async apply() {
-        const code = this.code.trim();
-        if (!code) {
-            this.error = 'Enter a code';
-            return;
-        }
-        this.applying = true;
-        this.error = null;
-        try {
-            const sdk = await sdkConnector.whenSDK();
-            const presale = sdk.getPresaleManager?.();
-            if (!presale)
-                throw new Error('Promo codes are not available');
-            const result = await presale.redeem(code);
-            // The SDK refreshed the cart on redeem; read the cached copy for the payload.
-            const cart = await sdk.getCartManager?.()?.get().catch(() => null) ?? null;
-            this.applied = { code: code.toUpperCase(), ...result, cart };
-            this.code = '';
-            this.tlPromoApplied.emit(this.applied);
-        }
-        catch (err) {
-            console.error('[tl-promo-code] Redeem failed:', err);
-            this.error = orderSummary.isAuthError(err)
-                ? 'Sign in to use this code'
-                : orderSummary.errorMessage(err, 'That code could not be applied');
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.applying = false;
-        }
+    syncProps() {
+        this.element.setProps({ placeholder: this.placeholder, buttonLabel: this.buttonLabel });
+    }
+    /**
+     * This core has nothing to do on mount, and the harness calls `mount()`
+     * anyway: a harness never asks what a core's lifecycle means (TKT-197).
+     */
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlPromoApplied')
+            this.tlPromoApplied.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     render() {
-        if (this.applied) {
-            return (index.h("div", { class: "applied", role: "status" }, index.h("span", { class: "applied-text" }, index.h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Code ", index.h("strong", { class: "code" }, this.applied.code), this.applied.alreadyHeld ? ' was already applied' : ' applied'), index.h("button", { type: "button", class: "link", onClick: this.reset }, "Use a different code")));
+        const { status, state, strings, derived } = this.view;
+        if (status === 'applied') {
+            return (index.h("div", { class: "applied", role: "status" }, index.h("span", { class: "applied-text" }, index.h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), strings.codePrefix, index.h("strong", { class: "code" }, derived.appliedCode), derived.appliedSuffix), index.h("button", { type: "button", class: "link", onClick: this.reset }, strings.useDifferent)));
         }
-        return (index.h("form", { class: "promo", onSubmit: this.handleSubmit }, index.h("div", { class: "field" }, index.h("input", { class: "input", type: "text", autocomplete: "off", autoCapitalize: "characters", spellcheck: false, "aria-label": this.placeholder, placeholder: this.placeholder, value: this.code, disabled: this.applying, onInput: this.handleInput }), index.h("button", { type: "submit", class: "apply", disabled: this.applying }, this.applying ? 'Applying…' : this.buttonLabel)), this.error && (index.h("p", { class: "error", role: "alert" }, this.error))));
+        return (index.h("form", { class: "promo", onSubmit: this.handleSubmit }, index.h("div", { class: "field" }, index.h("input", { class: "input", type: "text", autocomplete: "off", autoCapitalize: "characters", spellcheck: false, "aria-label": this.placeholder, placeholder: this.placeholder, value: state.code, disabled: derived.disabled, onInput: this.handleInput }), index.h("button", { type: "submit", class: "apply", disabled: derived.disabled }, derived.actionLabel)), state.error && (index.h("p", { class: "error", role: "alert" }, state.error))));
     }
+    static get watchers() { return {
+        "placeholder": [{
+                "syncProps": 0
+            }],
+        "buttonLabel": [{
+                "syncProps": 0
+            }]
+    }; }
 };
 TlPromoCode.style = tlPromoCodeCss();
 

package/dist/cjs/tl-seat-map.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-I9CoYv3k.js');
+var index = require('./index-DanPUX0s.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
 
 const tlSeatMapCss = () => `:host{display:block;font-family:var(--tl-font-family)}.seat-map-container{position:relative;overflow:hidden;border-radius:var(--tl-radius-md);background:var(--tl-color-background)}.seat-map-iframe{width:100%;height:100%;border:none}.seat-map-iframe.hidden{display:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background);color:var(--tl-color-foreground);gap:1rem}.loading p{margin:0;font-size:0.875rem;color:var(--tl-color-muted-foreground)}.spinner{width:40px;height:40px;border:3px solid var(--tl-color-border);border-top-color:var(--tl-color-primary);border-radius:50%;animation:tl-seat-map-spin 1s linear infinite}@keyframes tl-seat-map-spin{to{transform:rotate(360deg)}}.error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background);color:var(--tl-color-error);padding:1.5rem;text-align:center}.error-title{margin:0 0 0.5rem;font-size:1.125rem;font-weight:600}.error-message{margin:0;font-size:0.875rem;opacity:0.9}`;
@@ -127,10 +127,10 @@ const TlSeatMap = class {
     // Render
     // -------------------------------------------------------------------------
     render() {
-        return (index.h("div", { key: 'c9beadc1792d7825ac3f99e6abc8b181e28fd1b6', class: "seat-map-container", style: {
+        return (index.h("div", { key: '1c6a23b0aa021c58fa62c106a92a2e970ca7f6d1', class: "seat-map-container", style: {
                 width: this.width,
                 height: this.height,
-            } }, this.isLoading && (index.h("div", { key: 'ad792ea35f433a268c81722ce4e7d0e34780d337', class: "loading" }, index.h("div", { key: 'dd3e0657b16c2f265f59fbaa2ac39c559c2093b7', class: "spinner" }), index.h("p", { key: '2714e3073d0e5cddc50d530aa1cf46a7f73ba96f' }, "Loading seat map..."))), this.error && (index.h("div", { key: '3de9d73ab89a1ee963e73b4192d5c93e9667f11b', class: "error" }, index.h("p", { key: '0fea5c828b5b212ffdb45c9c7702d241e2b79cc4', class: "error-title" }, "Error"), index.h("p", { key: 'f2c090b982bb1ee6fb7d347d8860b4ce4798a891', class: "error-message" }, this.error))), index.h("iframe", { key: '8023219fdd467ec736f9627190690a6f73df3bb3', ref: (el) => (this.iframeRef = el), src: this.getIframeSrc(), class: {
+            } }, this.isLoading && (index.h("div", { key: '4a09ddbdbd38eb68675bb320cf33fd3ead5974a4', class: "loading" }, index.h("div", { key: 'c622ba1f996427f0624cfda2c782abd49ec72e19', class: "spinner" }), index.h("p", { key: '802f42554fc238a1ddc0f8a0f6a6b0de89bdfb60' }, "Loading seat map..."))), this.error && (index.h("div", { key: 'dde73e2430bad68c0a67306c0aa2b44810007cc5', class: "error" }, index.h("p", { key: '392d51bbc47ab34eab5670aa7a2faf800dabe638', class: "error-title" }, "Error"), index.h("p", { key: 'fcf6810f767f34bf3490c1af21320d262bdb961b', class: "error-message" }, this.error))), index.h("iframe", { key: '2333206fa6eb4fe6cdcbb1d30864d56d54583e1f', ref: (el) => (this.iframeRef = el), src: this.getIframeSrc(), class: {
                 'seat-map-iframe': true,
                 hidden: this.isLoading || !!this.error,
             }, title: "Ticketlayer Seat Map", allow: "fullscreen" })));

package/dist/cjs/web-query-Ce73jB4k.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const webQuery = {
+    get(name) {
+        if (typeof window === 'undefined' || !window.location?.search)
+            return null;
+        try {
+            return new URLSearchParams(window.location.search).get(name);
+        }
+        catch {
+            return null;
+        }
+    },
+};
+
+exports.webQuery = webQuery;

package/dist/collection/components/tl-buy-modal/tl-buy-modal.js

@@ -126,10 +126,10 @@ export class TlBuyModal {
         }
     }
     render() {
-        return (h(Host, { key: '1245e518c2b5232f4d9dba091cf808cd3867fbef' }, h("div", { key: '4e770fccdd785444f1cc87df4adab5a5dc1bf58a', class: "overlay", onClick: (e) => {
+        return (h(Host, { key: 'f28be761216b4a84904c1e325dc34d848625db14' }, h("div", { key: '0f36708a6b52d19ee987b211588e759aaf82ac03', class: "overlay", onClick: (e) => {
                 if (e.target === e.currentTarget)
                     this.close();
-            } }, h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))), h("div", { key: '9acdd36744d363f41f0bed7938ecea33322362d1', class: "powered-by" }, h("div", { key: 'f45545a8fc625336618352f0c0e9e84a1babce96', class: "pb-links" }, h("a", { key: 'dd929b12419b8353d9a09ad242a9f351dfd699e2', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '859be221bdc76602defaebdb89a997778cda6a91', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: 'd4e1f44b3b084160d2df8b9d15e075ddc5e05363', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'fe7fd86576a4e9772daa2c4c449da060f20fa143', class: "pb-pre" }, "Powered by"), h("svg", { key: '19412bd9e5522f0af9f847fe8fda6aa0f0004a3a', width: "14", height: "14", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: '8e82f14ab1e8094a210db95b1310ce6c0feef446', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: 'b50b04cfc07c4e55fcf5ce92967f69b99d34dd34', fill: "currentColor", transform: "translate(-1781.5, -1759.4003)", d: "M 41 2973 c 1 -285 5 -734 9 -998 c 7 -444 9 -488 30 -580 c 81 -364 235 -634 512 -900 c 135 -130 263 -220 423 -299 c 156 -77 249 -109 409 -143 c 110 -23 142 -25 354 -24 c 230 1 310 8 427 37 c 241 60 453 162 640 309 c 82 64 252 234 317 315 c 210 264 340 604 355 926 l 6 121 l -69 6 c -86 8 -706 9 -755 1 l -36 -6 l -21 -125 c -34 -191 -98 -317 -236 -462 c -111 -115 -249 -198 -396 -238 c -98 -27 -356 -24 -463 5 c -100 27 -183 69 -273 137 c -226 173 -353 409 -354 660 c 0 44 -5 120 -10 169 c -6 49 -8 91 -6 94 c 3 3 65 -22 138 -55 c 140 -64 251 -103 358 -127 c 71 -17 295 -46 347 -46 l 33 0 l 0 434 l 0 434 l -67 7 c -147 14 -269 56 -393 133 c -222 139 -378 393 -397 648 l -6 71 l -75 7 c -41 3 -239 6 -439 6 l -363 0 l 1 -517 z" }))), h("span", { key: '2623449abd22f36f5af80d5605d3b274a4c214c4', class: "pb-word" }, "ticketlayer"))))));
+            } }, h("div", { key: '0b2bc062c89e8b821763e163bdedc44047571390', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: 'c9e3cc54615dace1842ceed226acff23ed0dc0d3', class: "panel-header" }, this.imageUrl && (h("div", { key: '18ffd6168344f65231fa40252361b03ac65ae91a', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '4ccbf9a0477948bcb4202310f80cceb1d6e5ad0f', class: "titles" }, h("span", { key: '1a72eb71baaf9eff16aabc5d20c22b02e9b5cc99', class: "kicker" }, this.stepKicker()), h("h2", { key: 'f7dbc184bb016652c1ffe2fe24a551207f226942', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'db7ebd34f688b36b5610aa6adf0d8ab766f00ac2', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: '00812c8b7b9abf85343f3d6bda433251468da1d9', class: "event-meta" }, this.dateSummary)), h("button", { key: 'e3f7252979794959d6e5070d549010567c0aa349', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: 'd692c47bb8c614b41e19866c5fe4a65b0e083686', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'cbb9a7bd3ce4ed2685a781729110bccd36b425a9', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'c14af096c9e1cfd9bcead143c1b8a106a4b28018', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '108d1073d572f841f1945147a787b8bdea66cfba', class: "state-msg" }, h("span", { key: '27c2b7473c6edb14ade3b7104f728136c0a2b052', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '0e3f927f626d51dffc30bb7da7093b6a7cd90a2a', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'bfab02d294de3eb1bce39d3e39c21f450b474c99', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: '109be73c93b0b604b435cbbd540d5dd5c48eacfe', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '2769d896476487e1412ac37309cd2e162b4bd275', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0c709ed8ba75b9e13a141ae755353fc694532935', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: 'cdf66533a591e89dc265532a2578c30327fd06c8', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '6c4b294a4b9412e643a230f4064d15a587f79383', class: "done-step" }, h("div", { key: 'ba0e663e731402192675db509c886c2ce6a2418b', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '8d0f07758d3978080177a99e580f59fbcfefb611', class: "done-title" }, "Added to your cart"), h("p", { key: 'bbf4bd073f021a2f516f91528311d494c40faa85', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '71c90ad945ced314321d964795beed8301c989ac', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: 'b37ad6f8adeb1edb7c786b33974b845c31b963f2', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))), h("div", { key: '5a175094620f6837ae91a5a394f16c79df94c859', class: "powered-by" }, h("div", { key: '63c095dc7e954042c5fb36ccd8ca92a33d7b6632', class: "pb-links" }, h("a", { key: '875fa14d6218853b96d4d817a243701b228b20f0', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '7de77189ecd8277acade45437819b4fa9ef2002b', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: '5f62bbe303398e9ad09703fbd706953502f441a1', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: '0101948057126320d180a452870eade9f540b119', class: "pb-pre" }, "Powered by"), h("svg", { key: 'c93e4184b3bd8bbb89b5909ec886b22d22322bb1', width: "14", height: "14", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: '5461e514631e1cb670e974b47ecc144e1a62e7a3', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: 'af6f137d33f09ef4befb9a4b31834d6d2f04ab3d', fill: "currentColor", transform: "translate(-1781.5, -1759.4003)", d: "M 41 2973 c 1 -285 5 -734 9 -998 c 7 -444 9 -488 30 -580 c 81 -364 235 -634 512 -900 c 135 -130 263 -220 423 -299 c 156 -77 249 -109 409 -143 c 110 -23 142 -25 354 -24 c 230 1 310 8 427 37 c 241 60 453 162 640 309 c 82 64 252 234 317 315 c 210 264 340 604 355 926 l 6 121 l -69 6 c -86 8 -706 9 -755 1 l -36 -6 l -21 -125 c -34 -191 -98 -317 -236 -462 c -111 -115 -249 -198 -396 -238 c -98 -27 -356 -24 -463 5 c -100 27 -183 69 -273 137 c -226 173 -353 409 -354 660 c 0 44 -5 120 -10 169 c -6 49 -8 91 -6 94 c 3 3 65 -22 138 -55 c 140 -64 251 -103 358 -127 c 71 -17 295 -46 347 -46 l 33 0 l 0 434 l 0 434 l -67 7 c -147 14 -269 56 -393 133 c -222 139 -378 393 -397 648 l -6 71 l -75 7 c -41 3 -239 6 -439 6 l -363 0 l 1 -517 z" }))), h("span", { key: 'd4f15a3fb911e2f78eb203fdd5079d3119ee9803', class: "pb-word" }, "ticketlayer"))))));
     }
     static get is() { return "tl-buy-modal"; }
     static get encapsulation() { return "shadow"; }