@ticketlayer/elements 0.2.0

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

@@ -0,0 +1,205 @@
+:host {
+  /* Map SDK variables (--tl-*) to component variables (--tl-color-*) */
+  /* This allows the component to inherit theme from SDK */
+  --tl-color-primary: var(--tl-primary, #6366f1);
+  --tl-color-primary-foreground: var(--tl-primary-foreground, #ffffff);
+  --tl-color-background: var(--tl-background, #ffffff);
+  --tl-color-foreground: var(--tl-foreground, #111827);
+  --tl-color-muted: var(--tl-muted, #f3f4f6);
+  --tl-color-muted-foreground: var(--tl-muted-foreground, #6b7280);
+  --tl-color-border: var(--tl-border, #e5e7eb);
+  --tl-color-destructive: var(--tl-error, #ef4444);
+
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+}
+
+.ticket-selector {
+  background: var(--tl-color-background, #ffffff);
+}
+
+/* Skeleton loading */
+.skeleton-container {
+  padding: var(--tl-spacing-4, 1rem);
+}
+
+.skeleton-row {
+  height: 60px;
+  background: var(--tl-color-muted, #f3f4f6);
+  border-radius: var(--tl-radius-md, 0.5rem);
+  margin-bottom: var(--tl-spacing-3, 0.75rem);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Error state */
+.error-state {
+  padding: var(--tl-spacing-4, 1rem);
+  color: var(--tl-color-destructive, #ef4444);
+}
+
+.error-message {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* Ticket list */
+.ticket-list {
+  margin-bottom: var(--tl-spacing-4, 1rem);
+}
+
+/* Ticket row */
+.ticket-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--tl-spacing-3, 0.75rem) 0;
+  border-bottom: 1px solid var(--tl-color-border, #e5e7eb);
+}
+
+.ticket-row.sold-out {
+  opacity: 0.5;
+}
+
+.ticket-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ticket-header {
+  display: flex;
+  align-items: center;
+  gap: var(--tl-spacing-2, 0.5rem);
+  flex-wrap: wrap;
+}
+
+.ticket-name {
+  font-weight: 600;
+  color: var(--tl-color-foreground, #111827);
+  font-size: 15px;
+}
+
+.status-badge {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.status-badge.limited {
+  background-color: var(--tl-color-warning-bg, #fef3c7);
+  color: var(--tl-color-warning, #d97706);
+}
+
+.status-badge.sold-out {
+  background-color: var(--tl-color-destructive-bg, #fee2e2);
+  color: var(--tl-color-destructive, #ef4444);
+}
+
+.ticket-description {
+  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  font-size: 14px;
+  color: var(--tl-color-muted-foreground, #6b7280);
+}
+
+.ticket-price {
+  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--tl-color-foreground, #111827);
+}
+
+/* Quantity controls */
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--tl-spacing-2, 0.5rem);
+  margin-left: var(--tl-spacing-4, 1rem);
+}
+
+.qty-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--tl-radius-sm, 0.25rem);
+  border: 1px solid var(--tl-color-border, #d1d5db);
+  background: var(--tl-color-background, #ffffff);
+  color: var(--tl-color-foreground, #111827);
+  font-size: 18px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.qty-btn:hover:not(:disabled) {
+  background-color: var(--tl-color-muted, #f3f4f6);
+  border-color: var(--tl-color-border-hover, #9ca3af);
+}
+
+.qty-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.qty-value {
+  width: 32px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--tl-color-foreground, #111827);
+}
+
+/* Success message */
+.success-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tl-spacing-2, 0.5rem);
+  padding: var(--tl-spacing-3, 0.75rem);
+  background-color: var(--tl-color-success, #10b981);
+  color: #ffffff;
+  border-radius: var(--tl-radius-md, 0.5rem);
+  margin-bottom: var(--tl-spacing-3, 0.75rem);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.success-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* Add to cart button */
+.add-to-cart-btn {
+  width: 100%;
+  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
+  border-radius: var(--tl-radius-md, 0.5rem);
+  border: none;
+  background-color: var(--tl-color-primary, #6366f1);
+  color: var(--tl-color-primary-foreground, #ffffff);
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.add-to-cart-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.add-to-cart-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.add-to-cart-btn.disabled,
+.add-to-cart-btn:disabled {
+  background-color: var(--tl-color-muted, #d1d5db);
+  color: var(--tl-color-muted-foreground, #6b7280);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,332 @@
+import { h } from "@stencil/core";
+import { getSDK, hasSDK, whenSDK } from "../../utils/sdk-connector";
+export class TlTicketSelector {
+    constructor() {
+        /**
+         * Show add to cart button
+         */
+        this.showButton = true;
+        /**
+         * Button label
+         */
+        this.buttonLabel = 'Add to Cart';
+        this.ticketTypes = [];
+        this.quantities = {};
+        this.loading = true;
+        this.error = null;
+        this.adding = false;
+        this.addSuccess = false;
+    }
+    watchPropsChange() {
+        this.loadTicketTypes();
+    }
+    async componentWillLoad() {
+        await this.waitForSDKAndLoad();
+    }
+    /**
+     * Wait for SDK to be ready, then load ticket types
+     */
+    async waitForSDKAndLoad() {
+        if (!this.eventId || !this.occurrenceId) {
+            return;
+        }
+        try {
+            await whenSDK();
+            await this.loadTicketTypes();
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
+            this.loading = false;
+        }
+    }
+    async loadTicketTypes() {
+        try {
+            console.log('[tl-ticket-selector] Loading ticket types...', {
+                eventId: this.eventId,
+                occurrenceId: this.occurrenceId
+            });
+            this.loading = true;
+            this.error = null;
+            const sdk = getSDK();
+            const eventsManager = sdk.getEventsManager();
+            const types = await eventsManager.getTicketTypes(this.eventId, this.occurrenceId);
+            console.log('[tl-ticket-selector] Ticket types loaded:', types.length);
+            this.ticketTypes = types;
+            // Initialise quantities to 0
+            const initialQuantities = {};
+            types.forEach((t) => {
+                initialQuantities[t.id] = 0;
+            });
+            this.quantities = initialQuantities;
+        }
+        catch (err) {
+            console.error('[tl-ticket-selector] Failed to load ticket types:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleQuantityChange(ticketTypeId, delta) {
+        const ticketType = this.ticketTypes.find(t => t.id === ticketTypeId);
+        if (!ticketType)
+            return;
+        const currentQty = this.quantities[ticketTypeId] || 0;
+        const newQty = Math.max(0, Math.min(ticketType.maxPerOrder, currentQty + delta));
+        this.quantities = {
+            ...this.quantities,
+            [ticketTypeId]: newQty,
+        };
+        const total = this.calculateTotal();
+        this.tlQuantityChange.emit({ ticketTypeId, quantity: newQty, total });
+    }
+    calculateTotal() {
+        return this.ticketTypes.reduce((sum, tt) => {
+            return sum + (this.quantities[tt.id] || 0) * tt.price;
+        }, 0);
+    }
+    getTotalItems() {
+        return Object.values(this.quantities).reduce((sum, qty) => sum + qty, 0);
+    }
+    async handleAddToCart() {
+        const itemsToAdd = Object.entries(this.quantities)
+            .filter(([_, qty]) => qty > 0)
+            .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
+        if (itemsToAdd.length === 0)
+            return;
+        this.adding = true;
+        this.addSuccess = false;
+        try {
+            if (hasSDK()) {
+                const sdk = getSDK();
+                const cartManager = sdk.getCartManager?.();
+                if (cartManager) {
+                    for (const item of itemsToAdd) {
+                        await cartManager.addItem(item.ticketTypeId, item.quantity, this.occurrenceId);
+                    }
+                    console.log('[tl-ticket-selector] Items added to cart');
+                }
+            }
+            // Reset quantities after adding
+            const resetQuantities = {};
+            this.ticketTypes.forEach(t => {
+                resetQuantities[t.id] = 0;
+            });
+            this.quantities = resetQuantities;
+            this.addSuccess = true;
+            // Clear success message after 3 seconds
+            setTimeout(() => {
+                this.addSuccess = false;
+            }, 3000);
+            this.tlAddToCart.emit({ items: itemsToAdd });
+        }
+        catch (err) {
+            console.error('[tl-ticket-selector] Failed to add to cart:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to add to cart';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.adding = false;
+        }
+    }
+    formatPrice(priceInPence, currency = 'GBP') {
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency,
+        }).format(priceInPence / 100);
+    }
+    renderSkeleton() {
+        return (h("div", { class: "skeleton-container" }, h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" })));
+    }
+    renderError() {
+        return (h("div", { class: "error-state" }, h("p", { class: "error-message" }, this.error)));
+    }
+    renderTicketRow(tt) {
+        const isSoldOut = tt.availabilityStatus === 'sold_out';
+        const qty = this.quantities[tt.id] || 0;
+        return (h("div", { class: `ticket-row ${isSoldOut ? 'sold-out' : ''}`, key: tt.id }, h("div", { class: "ticket-info" }, h("div", { class: "ticket-header" }, h("span", { class: "ticket-name" }, tt.name), tt.availabilityStatus === 'limited' && (h("span", { class: "status-badge limited" }, "Limited")), isSoldOut && (h("span", { class: "status-badge sold-out" }, "Sold Out"))), tt.description && (h("p", { class: "ticket-description" }, tt.description)), h("p", { class: "ticket-price" }, this.formatPrice(tt.price, tt.currency))), h("div", { class: "quantity-controls" }, h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, -1), disabled: isSoldOut || qty === 0, "aria-label": "Decrease quantity" }, "\u2212"), h("span", { class: "qty-value" }, qty), h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, 1), disabled: isSoldOut || qty >= tt.maxPerOrder, "aria-label": "Increase quantity" }, "+"))));
+    }
+    render() {
+        if (this.loading) {
+            return this.renderSkeleton();
+        }
+        if (this.error) {
+            return this.renderError();
+        }
+        const totalItems = this.getTotalItems();
+        const totalPrice = this.calculateTotal();
+        return (h("div", { class: "ticket-selector" }, h("div", { class: "ticket-list" }, this.ticketTypes.map(tt => this.renderTicketRow(tt))), this.addSuccess && (h("div", { class: "success-message" }, h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Added to cart!")), this.showButton && (h("button", { class: `add-to-cart-btn ${totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.handleAddToCart(), disabled: totalItems === 0 || this.adding }, this.adding
+            ? 'Adding...'
+            : totalItems === 0
+                ? 'Select Tickets'
+                : `${this.buttonLabel} - ${this.formatPrice(totalPrice)}`))));
+    }
+    static get is() { return "tl-ticket-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-ticket-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-ticket-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eventId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Event ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "event-id"
+            },
+            "occurrenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Occurrence ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "occurrence-id"
+            },
+            "showButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show add to cart button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-button",
+                "defaultValue": "true"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "'Add to Cart'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ticketTypes": {},
+            "quantities": {},
+            "loading": {},
+            "error": {},
+            "adding": {},
+            "addSuccess": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlAddToCart",
+                "name": "tlAddToCart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when items are added to cart"
+                },
+                "complexType": {
+                    "original": "{ items: AddToCartItem[] }",
+                    "resolved": "{ items: AddToCartItem[]; }",
+                    "references": {
+                        "AddToCartItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-ticket-selector/tl-ticket-selector.tsx",
+                            "id": "src/components/tl-ticket-selector/tl-ticket-selector.tsx::AddToCartItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "tlQuantityChange",
+                "name": "tlQuantityChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when quantity changes"
+                },
+                "complexType": {
+                    "original": "{ ticketTypeId: string; quantity: number; total: number }",
+                    "resolved": "{ ticketTypeId: string; quantity: number; total: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on error"
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "watchPropsChange"
+            }, {
+                "propName": "occurrenceId",
+                "methodName": "watchPropsChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1,10 @@
+/**
+ * Ticketlayer Elements
+ *
+ * Web Components for Ticketlayer ticket purchasing.
+ */
+// SDK Connector
+export { setSDK, getSDK, hasSDK, whenSDK, onSDKEvent } from './utils/sdk-connector';
+// Wrapper component types (Stencil will auto-export the components)
+export { TlBuyTicketsWrapper } from './components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper';
+export { TlCheckoutWrapper } from './components/tl-checkout-wrapper/tl-checkout-wrapper';

package/dist/collection/utils/order-summary.js

@@ -0,0 +1,101 @@
+/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
+export function formatPrice(value, currency = 'GBP') {
+    if (value === null || value === undefined || value === '')
+        return '';
+    const fmt = new Intl.NumberFormat('en-GB', { style: 'currency', currency });
+    if (typeof value === 'number')
+        return fmt.format(value / 100);
+    const n = Number(value);
+    return Number.isNaN(n) ? String(value) : fmt.format(n);
+}
+export function formatDateTime(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+export function formatDate(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+/** Line items that are tickets (fees, taxes and discounts have their own type). */
+export function ticketItems(order) {
+    return (order.items ?? []).filter((i) => !i.type || i.type === 'ticket');
+}
+export function ticketCount(order) {
+    const fromItems = ticketItems(order).reduce((sum, i) => sum + (Number(i.quantity) || 0), 0);
+    return fromItems || order.tickets?.length || 0;
+}
+/** Event name as the order view exposes it: the first ticket line's name. */
+export function orderEventName(order) {
+    return order.eventName || ticketItems(order)[0]?.name || order.items?.[0]?.name || null;
+}
+export function orderCustomerEmail(order, customer) {
+    const fromOrder = order?.customerEmail || order?.customer?.email;
+    if (fromOrder)
+        return fromOrder;
+    const c = customer;
+    return c?.email || null;
+}
+export function statusLabel(status) {
+    if (!status)
+        return '';
+    return status.replace(/_/g, ' ').replace(/^\w/, (m) => m.toUpperCase());
+}
+export function statusTone(status) {
+    switch (status) {
+        case 'confirmed':
+            return 'success';
+        case 'completed':
+        case 'fulfilled':
+            return 'info';
+        case 'pending':
+        case 'processing':
+            return 'warning';
+        case 'cancelled':
+        case 'expired':
+        case 'failed':
+            return 'error';
+        default:
+            return 'muted';
+    }
+}
+export function errorMessage(err, fallback) {
+    return err instanceof Error && err.message ? err.message : fallback;
+}
+/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
+export function isAuthError(err) {
+    const e = err;
+    if (!e || typeof e !== 'object')
+        return false;
+    return e.status === 401 || e.status === 403 || e.code === 'NO_SESSION' || e.code === 'NOT_AUTHENTICATED';
+}
+/**
+ * Find the event and start time for an occurrence id. The order view only
+ * carries the occurrence id, so this walks the channel's listings (cached by
+ * live-api) until one owns the occurrence. Best effort: null when not found.
+ */
+export async function resolveOccurrence(sdk, occurrenceId, maxEvents = 12) {
+    const events = sdk.getEventsManager();
+    const listing = await events.list({ limit: maxEvents });
+    const candidates = listing.items.slice(0, maxEvents);
+    for (const candidate of candidates) {
+        const detail = (await events.get(candidate.id).catch(() => null));
+        const occ = detail?.occurrences?.find((o) => o.id === occurrenceId);
+        if (occ) {
+            return {
+                eventId: detail?.id ?? candidate.id,
+                eventName: detail?.name ?? candidate.name ?? '',
+                startsAt: occ.startsAt ?? null,
+            };
+        }
+    }
+    return null;
+}