@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-my-orders/tl-my-orders.js

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+import { whenSDK } from "../../utils/sdk-connector";
+import { errorMessage, formatDate, formatPrice, isAuthError, orderEventName, statusLabel, statusTone, ticketCount, } from "../../utils/order-summary";
+/**
+ * tl-my-orders - the signed-in customer's orders (GET /sales/my-orders through
+ * the SDK): event, date, ticket count, total and status per row. Clicking a
+ * row expands it to show the order's tickets (tl-order-tickets). Shows
+ * tl-login inline when nobody is signed in.
+ *
+ * Usage: <tl-my-orders></tl-my-orders>
+ *
+ * @event tlOrderSelect - a row was expanded ({ orderId })
+ * @event tlError       - the orders could not be loaded
+ */
+export class TlMyOrders {
+    constructor() {
+        /** Copy for the empty state. */
+        this.emptyMessage = "When you buy tickets they'll show up here, ready to view and download.";
+        /** Columns for the expanded ticket grid. */
+        this.columns = 2;
+        this.orders = [];
+        this.authenticated = false;
+        this.loading = true;
+        this.error = null;
+        this.expandedId = null;
+        this.sdk = null;
+        this.unsubscribes = [];
+    }
+    async componentWillLoad() {
+        this.sdk = await whenSDK().catch(() => null);
+        if (!this.sdk) {
+            this.loading = false;
+            this.error = 'Orders are not available right now';
+            return;
+        }
+        // Older SDKs have no auth accessor: try the list and let a 401 decide.
+        const auth = this.sdk.getAuthManager?.();
+        this.authenticated = auth ? auth.authenticated : true;
+        // The session hydrates after the SDK publishes; follow both signals.
+        this.unsubscribes.push(this.sdk.on('auth:changed', () => this.syncAuth()));
+        this.unsubscribes.push(this.sdk.on('session:changed', () => this.syncAuth()));
+        if (this.authenticated) {
+            await this.load();
+        }
+        else {
+            this.loading = false;
+        }
+    }
+    disconnectedCallback() {
+        this.unsubscribes.forEach((off) => off());
+        this.unsubscribes = [];
+    }
+    syncAuth() {
+        const auth = this.sdk?.getAuthManager?.();
+        if (!auth)
+            return;
+        const was = this.authenticated;
+        this.authenticated = auth.authenticated;
+        if (this.authenticated && !was) {
+            this.load();
+        }
+        else if (!this.authenticated && was) {
+            this.orders = [];
+            this.expandedId = null;
+        }
+    }
+    async load() {
+        if (!this.sdk)
+            return;
+        try {
+            this.loading = true;
+            this.error = null;
+            const orders = this.sdk.getOrdersManager?.();
+            if (!orders)
+                throw new Error('Orders are not available');
+            const list = (await orders.mine());
+            this.orders = list ?? [];
+            this.authenticated = true;
+        }
+        catch (err) {
+            if (isAuthError(err)) {
+                // Not signed in: fall through to the inline login rather than an error.
+                this.authenticated = false;
+                this.orders = [];
+            }
+            else {
+                console.error('[tl-my-orders] Failed to load orders:', err);
+                this.error = errorMessage(err, 'Failed to load your orders');
+                this.tlError.emit({ message: this.error });
+            }
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    toggle(orderId) {
+        const opening = this.expandedId !== orderId;
+        this.expandedId = opening ? orderId : null;
+        if (opening)
+            this.tlOrderSelect.emit({ orderId });
+    }
+    renderRow(order) {
+        const expanded = this.expandedId === order.id;
+        const count = ticketCount(order);
+        const tone = statusTone(order.status);
+        return (h("li", { class: { order: true, expanded }, key: order.id }, h("button", { type: "button", class: "order-row", "aria-expanded": expanded ? 'true' : 'false', onClick: () => this.toggle(order.id) }, h("span", { class: "order-main" }, h("span", { class: "order-number" }, "Order ", order.orderNumber), h("span", { class: "order-event" }, orderEventName(order) ?? 'Order'), h("span", { class: "order-meta" }, order.createdAt && h("span", null, formatDate(order.createdAt)), h("span", null, count, " ticket", count === 1 ? '' : 's'))), h("span", { class: "order-side" }, h("span", { class: "order-total" }, formatPrice(order.total, order.currency)), h("span", { class: `status status-${tone}` }, statusLabel(order.status)), h("svg", { class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 18l6-6-6-6" })))), expanded && (h("div", { class: "order-tickets" }, h("tl-order-tickets", { orderId: order.id, columns: this.columns })))));
+    }
+    render() {
+        if (this.loading) {
+            return (h("div", { class: "orders" }, [0, 1, 2].map((i) => (h("div", { class: "skeleton", key: i })))));
+        }
+        if (!this.authenticated) {
+            return (h("div", { class: "orders" }, h("div", { class: "signin" }, h("p", { class: "signin-title" }, "Sign in to see your orders"), h("p", { class: "signin-text" }, "Your tickets and order history live in your account.")), h("tl-login", null)));
+        }
+        if (this.error) {
+            return (h("div", { class: "orders" }, h("div", { class: "state error" }, h("p", { class: "state-title" }, "Could not load your orders"), h("p", { class: "state-text" }, this.error))));
+        }
+        if (this.orders.length === 0) {
+            return (h("div", { class: "orders" }, h("div", { class: "state empty" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M13 5v2M13 17v2M13 11v2" })), h("p", { class: "state-title" }, "No orders yet"), h("p", { class: "state-text" }, this.emptyMessage))));
+        }
+        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, this.orders.map((o) => this.renderRow(o)))));
+    }
+    static get is() { return "tl-my-orders"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-my-orders.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-my-orders.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Copy for the empty state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "\"When you buy tickets they'll show up here, ready to view and download.\""
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columns for the expanded ticket grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "orders": {},
+            "authenticated": {},
+            "loading": {},
+            "error": {},
+            "expandedId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlOrderSelect",
+                "name": "tlOrderSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ orderId: string }",
+                    "resolved": "{ orderId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}