@ticketlayer/elements 0.2.0

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

@@ -0,0 +1,75 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var orderSummary = require('./order-summary-ZMkJ5bez.js');
+
+const tlPromoCodeCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif);color:var(--tl-foreground, #111827)}.field{display:flex;gap:var(--tl-spacing-2, 0.5rem)}.input{flex:1;min-width:0;padding:var(--tl-spacing-3, 0.75rem);font:inherit;font-size:0.875rem;color:var(--tl-foreground, #111827);background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem);text-transform:uppercase}.input::placeholder{text-transform:none;color:var(--tl-muted-foreground, #6b7280)}.input:focus{outline:2px solid var(--tl-primary, #6366f1);outline-offset:1px}.apply{padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);font:inherit;font-size:0.875rem;font-weight:500;color:var(--tl-primary-foreground, #ffffff);background:var(--tl-primary, #6366f1);border:none;border-radius:var(--tl-radius-md, 0.5rem);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.5rem) 0 0;font-size:0.8125rem;color:var(--tl-error, #ef4444)}.applied{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-3, 0.75rem);padding:var(--tl-spacing-3, 0.75rem);font-size:0.875rem;background:var(--tl-muted, #f9fafb);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem)}.applied-text{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem)}.icon{width:1rem;height:1rem;flex-shrink:0;color:var(--tl-success, #10b981)}.code{font-family:var(--tl-font-family-mono, ui-monospace, monospace)}.link{padding:0;font:inherit;font-size:0.8125rem;color:var(--tl-primary, #6366f1);background:none;border:none;cursor:pointer;white-space:nowrap}.link:hover{text-decoration:underline}`;
+
+const TlPromoCode = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tlPromoApplied = index.createEvent(this, "tlPromoApplied");
+        this.tlError = index.createEvent(this, "tlError");
+        /** Input placeholder. */
+        this.placeholder = 'Promo or presale code';
+        /** Apply button label. */
+        this.buttonLabel = 'Apply';
+        this.code = '';
+        this.applying = false;
+        this.applied = null;
+        this.error = null;
+        this.handleInput = (e) => {
+            this.code = e.target.value;
+            this.error = null;
+        };
+        this.handleSubmit = (e) => {
+            e.preventDefault();
+            this.apply();
+        };
+        this.reset = () => {
+            this.applied = null;
+            this.error = null;
+        };
+    }
+    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;
+        }
+    }
+    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")));
+        }
+        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))));
+    }
+};
+TlPromoCode.style = tlPromoCodeCss();
+
+exports.tl_promo_code = TlPromoCode;

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

@@ -0,0 +1,147 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.js');
+
+const tlSeatMapCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, -apple-system, sans-serif)}.seat-map-container{position:relative;overflow:hidden;border-radius:var(--tl-radius-md, 0.5rem);background:var(--tl-color-background, #ffffff)}.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, #ffffff);color:var(--tl-color-foreground, #0f172a);gap:1rem}.loading p{margin:0;font-size:0.875rem;color:var(--tl-color-muted-foreground, #64748b)}.spinner{width:40px;height:40px;border:3px solid var(--tl-color-border, #e2e8f0);border-top-color:var(--tl-color-primary, #e64b12);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, #ffffff);color:var(--tl-color-error, #ef4444);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}`;
+
+const TlSeatMap = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tlReady = index.createEvent(this, "tlReady");
+        this.tlLoad = index.createEvent(this, "tlLoad");
+        this.tlError = index.createEvent(this, "tlError");
+        this.tlSeatAdded = index.createEvent(this, "tlSeatAdded");
+        this.tlSeatRemoved = index.createEvent(this, "tlSeatRemoved");
+        this.tlCartChange = index.createEvent(this, "tlCartChange");
+        /** Base URL for the hosted seat map (HBO URL) */
+        this.hboUrl = 'https://checkout.ticketlayer.com';
+        /** API URL for the seat map data */
+        this.apiUrl = 'https://api.ticketlayer.com';
+        /** Height of the seat map */
+        this.height = '600px';
+        /** Width of the seat map */
+        this.width = '100%';
+        // -------------------------------------------------------------------------
+        // State
+        // -------------------------------------------------------------------------
+        this.isReady = false;
+        this.isLoading = true;
+        this.error = null;
+        this.seatsInCart = [];
+        // -------------------------------------------------------------------------
+        // Methods
+        // -------------------------------------------------------------------------
+        this.postToIframe = (type, data = {}) => {
+            if (this.iframeRef?.contentWindow) {
+                this.iframeRef.contentWindow.postMessage({ type, ...data }, '*');
+            }
+        };
+        this.handleMessage = (event) => {
+            if (!event.data || !event.data.type)
+                return;
+            switch (event.data.type) {
+                case 'seatmap:ready':
+                    this.isReady = true;
+                    this.isLoading = false;
+                    this.tlReady.emit();
+                    // Send initial cart seats
+                    this.postToIframe('seatmap:set-cart-seats', { seatIds: this.seatsInCart });
+                    break;
+                case 'seatmap:loaded':
+                    this.tlLoad.emit({ seatMapId: event.data.seatMapId });
+                    break;
+                case 'seatmap:error':
+                    this.error = event.data.error;
+                    this.isLoading = false;
+                    this.tlError.emit({ error: event.data.error });
+                    break;
+                case 'seatmap:add-seat':
+                    this.handleAddSeat(event.data.seatId, event.data.ticketTypeId);
+                    break;
+                case 'seatmap:remove-seat':
+                    this.handleRemoveSeat(event.data.seatId);
+                    break;
+            }
+        };
+        this.handleAddSeat = async (seatId, ticketTypeId) => {
+            if (!sdkConnector.hasSDK()) {
+                console.warn('[tl-seat-map] SDK not available, cannot add seat');
+                this.postToIframe('seatmap:add-seat-failed', { seatId, error: 'SDK not available' });
+                return;
+            }
+            try {
+                const sdk = sdkConnector.getSDK();
+                await sdk.getCartManager().addSeat(seatId, ticketTypeId, this.occurrenceId);
+                this.postToIframe('seatmap:add-seat-confirmed', { seatId });
+                this.seatsInCart = [...this.seatsInCart, seatId];
+                this.tlSeatAdded.emit({ seatId, ticketTypeId });
+                this.tlCartChange.emit({ seatIds: this.seatsInCart });
+            }
+            catch (err) {
+                console.error('[tl-seat-map] Failed to add seat:', err);
+                this.postToIframe('seatmap:add-seat-failed', { seatId, error: 'Failed to add seat' });
+            }
+        };
+        this.handleRemoveSeat = async (seatId) => {
+            if (!sdkConnector.hasSDK()) {
+                console.warn('[tl-seat-map] SDK not available, cannot remove seat');
+                this.postToIframe('seatmap:remove-seat-failed', { seatId, error: 'SDK not available' });
+                return;
+            }
+            try {
+                const sdk = sdkConnector.getSDK();
+                await sdk.getCartManager().removeSeat(seatId, this.occurrenceId);
+                this.postToIframe('seatmap:remove-seat-confirmed', { seatId });
+                this.seatsInCart = this.seatsInCart.filter(id => id !== seatId);
+                this.tlSeatRemoved.emit({ seatId });
+                this.tlCartChange.emit({ seatIds: this.seatsInCart });
+            }
+            catch (err) {
+                console.error('[tl-seat-map] Failed to remove seat:', err);
+                this.postToIframe('seatmap:remove-seat-failed', { seatId, error: 'Failed to remove seat' });
+            }
+        };
+    }
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+    componentWillLoad() {
+        // Add message listener
+        window.addEventListener('message', this.handleMessage);
+    }
+    disconnectedCallback() {
+        // Clean up message listener
+        window.removeEventListener('message', this.handleMessage);
+    }
+    watchOccurrenceId() {
+        // Reset state when occurrence changes
+        this.isReady = false;
+        this.isLoading = true;
+        this.error = null;
+    }
+    getIframeSrc() {
+        return `${this.hboUrl}/embed/seats?occurrenceId=${encodeURIComponent(this.occurrenceId)}&apiUrl=${encodeURIComponent(this.apiUrl)}`;
+    }
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    render() {
+        return (index.h("div", { key: 'f1efda6053825bdeb72aa277ad9fb5533fc56881', class: "seat-map-container", style: {
+                width: this.width,
+                height: this.height,
+            } }, this.isLoading && (index.h("div", { key: 'd6017235cb2e06fcc27184b382747dc8bcae5b6c', class: "loading" }, index.h("div", { key: '63618e07b6f4a2822418283fc83ab08aaec054a2', class: "spinner" }), index.h("p", { key: '0de2e4f71f78c5e662b03f5c0217ae43a2c4c1df' }, "Loading seat map..."))), this.error && (index.h("div", { key: 'a2b45dc5a66e18109cd4cf8677989e669117dcc0', class: "error" }, index.h("p", { key: 'c50b5527a2f6308b53e0389f94cacb2ebeef7262', class: "error-title" }, "Error"), index.h("p", { key: '1625a73993cbac40bfefb7913e0b735c0082a23f', class: "error-message" }, this.error))), index.h("iframe", { key: 'c7fc0441b436086d4717a87723108b1471c941ad', ref: (el) => (this.iframeRef = el), src: this.getIframeSrc(), class: {
+                'seat-map-iframe': true,
+                hidden: this.isLoading || !!this.error,
+            }, title: "Ticketlayer Seat Map", allow: "fullscreen" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "occurrenceId": [{
+                "watchOccurrenceId": 0
+            }]
+    }; }
+};
+TlSeatMap.style = tlSeatMapCss();
+
+exports.tl_seat_map = TlSeatMap;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,29 @@
+{
+  "entries": [
+    "components/tl-buy-tickets-button/tl-buy-tickets-button.js",
+    "components/tl-cart/tl-cart.js",
+    "components/tl-event-card/tl-event-card.js",
+    "components/tl-login/tl-login.js",
+    "components/tl-occurrence-selector/tl-occurrence-selector.js",
+    "components/tl-promo-code/tl-promo-code.js",
+    "components/tl-ticket/tl-ticket.js",
+    "components/tl-ticket-selector/tl-ticket-selector.js",
+    "components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.js",
+    "components/tl-checkout-wrapper/tl-checkout-wrapper.js",
+    "components/tl-buy-modal/tl-buy-modal.js",
+    "components/tl-cart-badge/tl-cart-badge.js",
+    "components/tl-cart-drawer/tl-cart-drawer.js",
+    "components/tl-event-list/tl-event-list.js",
+    "components/tl-my-orders/tl-my-orders.js",
+    "components/tl-order-tickets/tl-order-tickets.js",
+    "components/tl-order-confirmation/tl-order-confirmation.js",
+    "components/tl-seat-map/tl-seat-map.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.1",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,264 @@
+:host {
+  /* Local fallbacks; real values come from the channel theme's --tl-* vars,
+     which pierce the shadow boundary. */
+  --_bg: var(--tl-background, #ffffff);
+  --_fg: var(--tl-foreground, #111827);
+  --_muted: var(--tl-muted, #f3f4f6);
+  --_muted-fg: var(--tl-muted-foreground, #6b7280);
+  --_border: var(--tl-border, #e5e7eb);
+  --_primary: var(--tl-primary, #6366f1);
+  --_primary-fg: var(--tl-primary-foreground, #ffffff);
+  --_radius: var(--tl-radius-lg, var(--tl-radius, 0.75rem));
+  --_font: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+
+  font-family: var(--_font);
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(8, 8, 16, 0.72);
+  backdrop-filter: blur(4px);
+  animation: tl-fade 0.18s ease-out;
+}
+
+.panel {
+  width: 100%;
+  max-width: 460px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
+  animation: tl-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Wider on the date step so calendars / lots of timeslots have room. */
+.panel--wide {
+  max-width: 720px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--_border);
+}
+
+.event-thumb {
+  flex: none;
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--_muted);
+  border: 1px solid var(--_border);
+}
+
+.titles {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.event-meta {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--_muted-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kicker {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--_primary);
+}
+
+.event-name {
+  margin: 0;
+  font-size: 1.18rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--_fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.close-btn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--_muted);
+  color: var(--_muted-fg);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+.close-btn:hover {
+  color: var(--_fg);
+}
+
+.close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.panel-body {
+  padding: 18px 22px 22px;
+  overflow-y: auto;
+}
+
+.state-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 40px 0;
+  color: var(--_muted-fg);
+}
+
+.state-msg.error {
+  color: #b91c1c;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--_border);
+  border-top-color: var(--_primary);
+  border-radius: 999px;
+  animation: tl-spin 0.7s linear infinite;
+}
+
+.tickets-step {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.back-link {
+  align-self: flex-start;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--_primary);
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.occ-label {
+  margin: 2px 0 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--_fg);
+}
+
+.done-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+  padding: 16px 0 4px;
+}
+
+.done-mark {
+  font-size: 2.4rem;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.done-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--_fg);
+}
+
+.done-sub {
+  margin: 0 0 14px;
+  font-size: 0.9rem;
+  color: var(--_muted-fg);
+}
+
+.primary-btn {
+  width: 100%;
+  padding: 13px;
+  border: 0;
+  border-radius: var(--tl-radius-md, 0.5rem);
+  background: var(--_primary);
+  color: var(--_primary-fg);
+  font-size: 0.98rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.primary-btn:hover {
+  opacity: 0.9;
+}
+
+.ghost-btn {
+  width: 100%;
+  margin-top: 8px;
+  padding: 12px;
+  border: 1px solid var(--_border);
+  border-radius: var(--tl-radius-md, 0.5rem);
+  background: transparent;
+  color: var(--_fg);
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.ghost-btn:hover {
+  background: var(--_muted);
+}
+
+@keyframes tl-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes tl-rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+}
+
+@keyframes tl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}