@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.css

@@ -0,0 +1,176 @@
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+  color: var(--tl-foreground, #111827);
+}
+
+.confirmation {
+  text-align: center;
+}
+
+.check {
+  width: 4rem;
+  height: 4rem;
+  margin: 0 auto var(--tl-spacing-4, 1rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--tl-success, #10b981);
+  color: var(--tl-success-foreground, #ffffff);
+}
+
+.check svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.title {
+  margin: 0 0 var(--tl-spacing-2, 0.5rem);
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.lead {
+  margin: 0 0 var(--tl-spacing-6, 1.5rem);
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.error {
+  margin: 0 0 var(--tl-spacing-6, 1.5rem);
+  font-size: 0.875rem;
+  color: var(--tl-error, #ef4444);
+}
+
+.summary {
+  text-align: left;
+  padding: var(--tl-spacing-6, 1.5rem);
+  margin-bottom: var(--tl-spacing-6, 1.5rem);
+  background: var(--tl-muted, #f9fafb);
+  border: 1px solid var(--tl-border, #e5e7eb);
+  border-radius: var(--tl-radius-lg, 0.75rem);
+}
+
+.rows {
+  display: grid;
+  gap: var(--tl-spacing-2, 0.5rem);
+  margin: 0 0 var(--tl-spacing-4, 1rem);
+  padding: 0 0 var(--tl-spacing-4, 1rem);
+  border-bottom: 1px solid var(--tl-border, #e5e7eb);
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--tl-spacing-4, 1rem);
+  font-size: 0.875rem;
+}
+
+.row dt {
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.row dd {
+  margin: 0;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.reference {
+  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-weight: 600;
+}
+
+.lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--tl-spacing-2, 0.5rem);
+}
+
+.line {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--tl-spacing-4, 1rem);
+  font-size: 0.875rem;
+}
+
+.totals {
+  margin-top: var(--tl-spacing-3, 0.75rem);
+  padding-top: var(--tl-spacing-3, 0.75rem);
+  border-top: 1px solid var(--tl-border, #e5e7eb);
+  display: grid;
+  gap: var(--tl-spacing-1, 0.25rem);
+  font-size: 0.875rem;
+}
+
+.total-row {
+  display: flex;
+  justify-content: space-between;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.total-row.discount {
+  color: var(--tl-success, #10b981);
+}
+
+.total-row.total {
+  margin-top: var(--tl-spacing-1, 0.25rem);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #111827);
+}
+
+.tickets {
+  text-align: left;
+}
+
+.subtitle {
+  margin: 0 0 var(--tl-spacing-4, 1rem);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.hint {
+  margin: var(--tl-spacing-3, 0.75rem) 0 0;
+  font-size: 0.75rem;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+/* Skeleton */
+.skeleton-line,
+.skeleton-block {
+  background: var(--tl-secondary, #f3f4f6);
+  border-radius: var(--tl-radius-md, 0.5rem);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  margin: 0 auto var(--tl-spacing-3, 0.75rem);
+}
+
+.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;
+  }
+}

package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.js

@@ -0,0 +1,298 @@
+import { h } from "@stencil/core";
+import { onSDKEvent, whenSDK } from "../../utils/sdk-connector";
+import { errorMessage, formatDateTime, formatPrice, orderCustomerEmail, orderEventName, resolveOccurrence, ticketItems, } from "../../utils/order-summary";
+/**
+ * tl-order-confirmation - the "thank you" page block: order reference,
+ * customer email, event and date, ticket lines, totals, then the tickets
+ * themselves (tl-order-tickets, each with a Download PDF link).
+ *
+ * Finds its order three ways, in priority order:
+ *  1. the `order-id` prop
+ *  2. the URL (`?orderId=`), the contract the hosted box office confirmation
+ *     page uses; `?redirect_status=` from a Stripe return is honoured too
+ *  3. the SDK's `checkout:completed` event, for a page that mounts this before
+ *     the customer pays
+ *
+ * Usage: <tl-order-confirmation order-id="ord_xxx"></tl-order-confirmation>
+ *
+ * @event tlOrderLoaded - the order was loaded
+ * @event tlError       - the order could not be loaded
+ */
+export class TlOrderConfirmation {
+    constructor() {
+        /** Mount tl-order-tickets under the summary (default true). */
+        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();
+    }
+    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();
+        }
+    }
+    componentDidLoad() {
+        // A page that mounts before checkout: pick the order up when the SDK completes it.
+        this.unsubscribe = 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();
+        });
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    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 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 = 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 resolveOccurrence(sdk, occurrenceId);
+            if (resolved && this.order?.id === order.id)
+                this.occurrence = resolved;
+        }
+        catch {
+            // Leave the event line at what the order gives us.
+        }
+    }
+    renderRows(order) {
+        const email = this.customerEmail || orderCustomerEmail(order, this.signedInCustomer);
+        const eventName = this.occurrence?.eventName || orderEventName(order);
+        const startsAt = this.occurrence?.startsAt;
+        return (h("dl", { class: "rows" }, h("div", { class: "row" }, h("dt", null, "Order reference"), h("dd", { class: "reference" }, order.orderNumber)), email && (h("div", { class: "row" }, h("dt", null, "Email"), h("dd", null, email))), eventName && (h("div", { class: "row" }, h("dt", null, "Event"), h("dd", null, eventName))), startsAt && (h("div", { class: "row" }, h("dt", null, "Date"), h("dd", null, formatDateTime(startsAt))))));
+    }
+    renderTotals(order) {
+        const c = order.currency || 'GBP';
+        const fees = Number(order.totalFees) || 0;
+        const tax = Number(order.totalTax) || 0;
+        const discounts = Number(order.totalDiscounts) || 0;
+        return (h("div", { class: "totals" }, h("div", { class: "total-row" }, h("span", null, "Subtotal"), h("span", null, formatPrice(order.subtotal, c))), fees > 0 && (h("div", { class: "total-row" }, h("span", null, "Fees"), h("span", null, formatPrice(order.totalFees, c)))), tax > 0 && (h("div", { class: "total-row" }, h("span", null, "Tax"), h("span", null, formatPrice(order.totalTax, c)))), discounts > 0 && (h("div", { class: "total-row discount" }, h("span", null, "Discount"), h("span", null, "-", formatPrice(order.totalDiscounts, c)))), h("div", { class: "total-row total" }, h("span", null, "Total"), h("span", null, formatPrice(order.total, c)))));
+    }
+    render() {
+        if (this.paymentFailed) {
+            return (h("div", { class: "confirmation" }, h("h1", { class: "title" }, "Payment not completed"), h("p", { class: "lead" }, "Your payment wasn't completed. Your cart is still saved, so you can try again.")));
+        }
+        // Nothing to show yet: no order in props, URL or from checkout.
+        if (!this.resolvedOrderId && !this.order) {
+            return null;
+        }
+        if (this.loading) {
+            return (h("div", { class: "confirmation" }, h("div", { class: "skeleton-line short" }), h("div", { class: "skeleton-line long" }), h("div", { class: "skeleton-block" })));
+        }
+        const order = this.order;
+        const orderId = order?.id || this.resolvedOrderId;
+        return (h("div", { class: "confirmation" }, h("div", { class: "check", "aria-hidden": "true" }, h("svg", { 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" }))), h("h1", { class: "title" }, "You're going!"), 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 && (h("p", { class: "error" }, "We couldn't load your order details yet. ", this.error)), order && Array.isArray(order.items) && (h("div", { class: "summary" }, this.renderRows(order), h("ul", { class: "lines" }, ticketItems(order).map((item, i) => (h("li", { class: "line", key: i }, h("span", { class: "line-name" }, item.quantity, " x ", item.name), h("span", { class: "line-price" }, formatPrice(item.subtotal, order.currency)))))), this.renderTotals(order))), this.showTickets && order && (h("div", { class: "tickets" }, h("h2", { class: "subtitle" }, "Your tickets"), h("tl-order-tickets", { orderId: orderId, columns: this.columns }), h("p", { class: "hint" }, "Show these QR codes at the door for entry. Use Download PDF on a ticket to save it.")))));
+    }
+    static get is() { return "tl-order-confirmation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-order-confirmation.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-order-confirmation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orderId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The order to show. Falls back to `?orderId=` in the page URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "order-id"
+            },
+            "customerEmail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Email to show when the order view carries none (a host that collected it at checkout)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "customer-email"
+            },
+            "showTickets": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mount tl-order-tickets under the summary (default true)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tickets",
+                "defaultValue": "true"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columns for the ticket grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "order": {},
+            "resolvedOrderId": {},
+            "loading": {},
+            "error": {},
+            "paymentFailed": {},
+            "occurrence": {},
+            "signedInCustomer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlOrderLoaded",
+                "name": "tlOrderLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ order: TlOrderData }",
+                    "resolved": "{ order: TlOrderData; }",
+                    "references": {
+                        "TlOrderData": {
+                            "location": "import",
+                            "path": "../../utils/order-summary",
+                            "id": "src/utils/order-summary.ts::TlOrderData",
+                            "referenceLocation": "TlOrderData"
+                        }
+                    }
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "orderId",
+                "methodName": "watchOrderId"
+            }];
+    }
+}

package/dist/collection/components/tl-order-tickets/tl-order-tickets.css

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+}
+
+.grid {
+  display: grid;
+  gap: var(--tl-spacing-4, 1rem);
+  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, 1.5rem);
+  text-align: center;
+  color: var(--tl-muted-foreground, #6b7280);
+  font-size: 0.875rem;
+}
+
+.state.error {
+  color: var(--tl-error, #dc2626);
+}

package/dist/collection/components/tl-order-tickets/tl-order-tickets.js

@@ -0,0 +1,122 @@
+import { h } from "@stencil/core";
+import { whenSDK } from "../../utils/sdk-connector";
+/**
+ * tl-order-tickets - renders all the tickets for an order as scannable QR
+ * cards with PDF download. Fetches the order through the SDK (order-access
+ * gated by the session), so it works on a confirmation page or in an account.
+ *
+ * Usage: <tl-order-tickets order-id="ord_xxx"></tl-order-tickets>
+ */
+export class TlOrderTickets {
+    constructor() {
+        /** Columns in the grid (default 2). */
+        this.columns = 2;
+        this.tickets = [];
+        this.loading = true;
+        this.error = null;
+    }
+    watchOrder() {
+        this.load();
+    }
+    async componentWillLoad() {
+        await this.load();
+    }
+    async load() {
+        try {
+            this.loading = true;
+            this.error = null;
+            const sdk = await 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 ?? [];
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return h("div", { class: "state" }, "Loading tickets\u2026");
+        }
+        if (this.error) {
+            return h("div", { class: "state error" }, this.error);
+        }
+        if (this.tickets.length === 0) {
+            return h("div", { class: "state" }, "No tickets for this order yet.");
+        }
+        return (h("div", { class: `grid cols-${this.columns}` }, this.tickets.map((t) => (h("tl-ticket", { key: t.id, ticket: t, orderId: this.orderId })))));
+    }
+    static get is() { return "tl-order-tickets"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-order-tickets.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-order-tickets.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orderId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The order whose tickets to show."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "order-id"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columns in the grid (default 2)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tickets": {},
+            "loading": {},
+            "error": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "orderId",
+                "methodName": "watchOrder"
+            }];
+    }
+}