@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-seat-map/tl-seat-map.js

@@ -0,0 +1,366 @@
+/**
+ * TlSeatMap Stencil Component
+ *
+ * An iframe wrapper for embedding the Ticketlayer seat map.
+ * The actual seat map is rendered by HBO at /embed/seats and this component
+ * handles communication via postMessage.
+ *
+ * @element tl-seat-map
+ * @slot - No slots
+ *
+ * @fires tlReady - Fired when the seat map iframe is ready
+ * @fires tlLoad - Fired when the seat map has loaded, includes seatMapId
+ * @fires tlError - Fired when an error occurs
+ * @fires tlSeatAdded - Fired when a seat is added to cart
+ * @fires tlSeatRemoved - Fired when a seat is removed from cart
+ * @fires tlCartChange - Fired when cart seats change
+ */
+import { h } from "@stencil/core";
+import { getSDK, hasSDK } from "../../utils/sdk-connector";
+export class TlSeatMap {
+    constructor() {
+        /** 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 (!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 = 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 (!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 = 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 (h("div", { key: 'f1efda6053825bdeb72aa277ad9fb5533fc56881', class: "seat-map-container", style: {
+                width: this.width,
+                height: this.height,
+            } }, this.isLoading && (h("div", { key: 'd6017235cb2e06fcc27184b382747dc8bcae5b6c', class: "loading" }, h("div", { key: '63618e07b6f4a2822418283fc83ab08aaec054a2', class: "spinner" }), h("p", { key: '0de2e4f71f78c5e662b03f5c0217ae43a2c4c1df' }, "Loading seat map..."))), this.error && (h("div", { key: 'a2b45dc5a66e18109cd4cf8677989e669117dcc0', class: "error" }, h("p", { key: 'c50b5527a2f6308b53e0389f94cacb2ebeef7262', class: "error-title" }, "Error"), h("p", { key: '1625a73993cbac40bfefb7913e0b735c0082a23f', class: "error-message" }, this.error))), 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" })));
+    }
+    static get is() { return "tl-seat-map"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-seat-map.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-seat-map.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "occurrenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Occurrence ID to show seat map for"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "occurrence-id"
+            },
+            "hboUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base URL for the hosted seat map (HBO URL)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hbo-url",
+                "defaultValue": "'https://checkout.ticketlayer.com'"
+            },
+            "apiUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "API URL for the seat map data"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "api-url",
+                "defaultValue": "'https://api.ticketlayer.com'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the seat map"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'600px'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the seat map"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isReady": {},
+            "isLoading": {},
+            "error": {},
+            "seatsInCart": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlReady",
+                "name": "tlReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when seat map is ready"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tlLoad",
+                "name": "tlLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when seat map is loaded"
+                },
+                "complexType": {
+                    "original": "{ seatMapId: string }",
+                    "resolved": "{ seatMapId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an error occurs"
+                },
+                "complexType": {
+                    "original": "{ error: string }",
+                    "resolved": "{ error: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlSeatAdded",
+                "name": "tlSeatAdded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a seat is added to cart"
+                },
+                "complexType": {
+                    "original": "{ seatId: string; ticketTypeId: string }",
+                    "resolved": "{ seatId: string; ticketTypeId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlSeatRemoved",
+                "name": "tlSeatRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a seat is removed from cart"
+                },
+                "complexType": {
+                    "original": "{ seatId: string }",
+                    "resolved": "{ seatId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlCartChange",
+                "name": "tlCartChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when cart seats change"
+                },
+                "complexType": {
+                    "original": "{ seatIds: string[] }",
+                    "resolved": "{ seatIds: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "occurrenceId",
+                "methodName": "watchOccurrenceId"
+            }];
+    }
+}

package/dist/collection/components/tl-ticket/tl-ticket.css

@@ -0,0 +1,90 @@
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+}
+
+.ticket {
+  border: 1px solid var(--tl-border, #e5e7eb);
+  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-card, #ffffff);
+  padding: var(--tl-spacing-5, 1.25rem);
+  text-align: center;
+}
+
+.qr-wrap {
+  position: relative;
+  width: 160px;
+  height: 160px;
+  margin: 0 auto;
+}
+
+.qr {
+  width: 160px;
+  height: 160px;
+}
+
+.qr svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.qr.inactive {
+  opacity: 0.3;
+}
+
+.stamp {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--tl-radius-sm, 0.25rem);
+  background: rgba(17, 24, 39, 0.85);
+  color: #ffffff;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.name {
+  margin: 1rem 0 0;
+  font-weight: 600;
+  color: var(--tl-foreground, #111827);
+}
+
+.meta {
+  margin: 0.125rem 0 0;
+  font-size: 0.875rem;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.barcode {
+  margin: 0.25rem 0 0;
+  font-family: ui-monospace, monospace;
+  font-size: 0.625rem;
+  color: var(--tl-muted-foreground, #9ca3af);
+  word-break: break-all;
+}
+
+.download {
+  margin-top: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--tl-border, #e5e7eb);
+  border-radius: var(--tl-radius-md, 0.5rem);
+  background: transparent;
+  color: var(--tl-foreground, #111827);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.download:hover {
+  background: var(--tl-muted, #f3f4f6);
+}
+
+.download:disabled {
+  opacity: 0.5;
+  cursor: default;
+}

package/dist/collection/components/tl-ticket/tl-ticket.js

@@ -0,0 +1,129 @@
+import { h } from "@stencil/core";
+import QRCode from "qrcode";
+import { whenSDK } from "../../utils/sdk-connector";
+/**
+ * tl-ticket - a single event ticket: a scannable QR (the redemption token),
+ * ticket name / seat / holder, and a PDF download. Greys out + stamps
+ * Used/Void when redeemed or cancelled.
+ */
+export class TlTicket {
+    constructor() {
+        this.qrSvg = '';
+        this.downloading = false;
+    }
+    async generateQr() {
+        if (this.ticket?.barcode) {
+            this.qrSvg = await QRCode.toString(this.ticket.barcode, {
+                type: 'svg',
+                margin: 0,
+                errorCorrectionLevel: 'M',
+            });
+        }
+    }
+    async componentWillLoad() {
+        await this.generateQr();
+    }
+    async download() {
+        try {
+            this.downloading = true;
+            const sdk = await whenSDK();
+            const orders = sdk.getOrdersManager?.();
+            if (!orders)
+                throw new Error('Ticket downloads are not available');
+            const blob = await orders.ticketPdf(this.orderId, this.ticket.id);
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `ticket-${this.ticket.id}.pdf`;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            console.error('[tl-ticket] download failed', err);
+        }
+        finally {
+            this.downloading = false;
+        }
+    }
+    render() {
+        const t = this.ticket;
+        if (!t)
+            return null;
+        const used = t.admissionStatus === 'fully_redeemed';
+        const voided = ['cancelled', 'expired'].includes(t.status);
+        const inactive = used || voided;
+        return (h("div", { class: "ticket" }, h("div", { class: "qr-wrap" }, h("div", { class: { qr: true, inactive }, innerHTML: this.qrSvg }), inactive && h("span", { class: "stamp" }, used ? 'Used' : 'Void')), h("p", { class: "name" }, t.name), t.seatLabel && h("p", { class: "meta" }, "Seat ", t.seatLabel), t.holderName && h("p", { class: "meta" }, t.holderName), h("p", { class: "barcode" }, t.barcode), h("button", { class: "download", disabled: this.downloading, onClick: () => this.download() }, this.downloading ? 'Preparing…' : 'Download PDF')));
+    }
+    static get is() { return "tl-ticket"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-ticket.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-ticket.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ticket": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TlTicketData",
+                    "resolved": "TlTicketData",
+                    "references": {
+                        "TlTicketData": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-ticket/tl-ticket.tsx",
+                            "id": "src/components/tl-ticket/tl-ticket.tsx::TlTicketData"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ticket to render."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "orderId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Order id this ticket belongs to (for the PDF download)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "order-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "qrSvg": {},
+            "downloading": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "ticket",
+                "methodName": "generateQr"
+            }];
+    }
+}