@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/esm/tl-my-orders.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-OoYV1faY.js';
-import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
-import { i as isAuthError, e as errorMessage, t as ticketCount, o as orderEventName, f as formatDate, a as formatPrice, s as statusTone, b as statusLabel } from './order-summary-DiDtvfZM.js';
-import './money-4ig0-WB6.js';
+import { r as registerInstance, c as createEvent, h } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { c as createElement, m as myOrdersCore } from './ticket-selector-BwChnHVC.js';
 
 const tlMyOrdersCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.orders{display:flex;flex-direction:column;gap:var(--tl-spacing-4)}.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--tl-spacing-3)}.order{background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg);overflow:hidden;transition:border-color 0.2s ease, box-shadow 0.2s ease}.order:hover,.order.expanded{border-color:var(--tl-primary);box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}.order-row{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-4);width:100%;padding:var(--tl-spacing-4);font:inherit;color:inherit;text-align:left;background:none;border:none;cursor:pointer}.order-main{display:flex;flex-direction:column;gap:var(--tl-spacing-1);min-width:0}.order-number{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--tl-muted-foreground)}.order-event{font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order-meta{display:flex;flex-wrap:wrap;gap:var(--tl-spacing-3);font-size:0.8125rem;color:var(--tl-muted-foreground)}.order-side{display:flex;align-items:center;gap:var(--tl-spacing-3);flex-shrink:0}.order-total{font-weight:600}.status{padding:0.125rem 0.5rem;font-size:0.75rem;font-weight:500;border-radius:9999px;background:var(--tl-secondary);color:var(--tl-secondary-foreground)}.status-success{background:var(--tl-success);color:var(--tl-success-foreground)}.status-info{background:var(--tl-primary);color:var(--tl-primary-foreground)}.status-warning{background:var(--tl-warning);color:var(--tl-warning-foreground)}.status-error{background:var(--tl-error);color:var(--tl-error-foreground)}.chevron{width:1.125rem;height:1.125rem;color:var(--tl-muted-foreground);transition:transform 0.2s ease}.expanded .chevron{transform:rotate(90deg)}.order-tickets{padding:0 var(--tl-spacing-4) var(--tl-spacing-4);border-top:1px solid var(--tl-border);padding-top:var(--tl-spacing-4)}@media (max-width: 480px){.order-row{flex-direction:column;align-items:stretch}.order-side{justify-content:space-between}}.signin{text-align:center}.signin-title,.state-title{margin:0;font-size:1.125rem;font-weight:600}.signin-text,.state-text{margin:var(--tl-spacing-1) 0 0;font-size:0.875rem;color:var(--tl-muted-foreground)}.state{padding:var(--tl-spacing-8) var(--tl-spacing-4);text-align:center;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg)}.state.error .state-title{color:var(--tl-error)}.empty-icon{width:3rem;height:3rem;margin:0 auto var(--tl-spacing-3);color:var(--tl-primary)}.skeleton{height:5rem;background:var(--tl-secondary);border-radius:var(--tl-radius-lg);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`;
 
@@ -14,108 +13,69 @@ const TlMyOrders = class {
         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 = [];
+        this.element = createElement(myOrdersCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
-    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;
-        }
+    syncProps() {
+        this.element.setProps({ emptyMessage: this.emptyMessage, columns: this.columns });
     }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((off) => off());
-        this.unsubscribes = [];
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    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;
-        }
+    /**
+     * Off screen: run the mount's teardown, which drops both auth
+     * subscriptions. Not `destroy()`: Stencil calls this for a DOM move as well
+     * as a removal, and a destroyed core never mounts again.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    toggle(orderId) {
-        const opening = this.expandedId !== orderId;
-        this.expandedId = opening ? orderId : null;
-        if (opening)
-            this.tlOrderSelect.emit({ orderId });
+    forward(event, detail) {
+        if (event === 'tlOrderSelect')
+            this.tlOrderSelect.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
-    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 })))));
+    renderRow(row) {
+        return (h("li", { class: { order: true, expanded: row.expanded }, key: row.id }, h("button", { type: "button", class: "order-row", "aria-expanded": row.expanded ? 'true' : 'false', onClick: () => this.element.actions.toggle(row.id) }, h("span", { class: "order-main" }, h("span", { class: "order-number" }, row.numberLabel), h("span", { class: "order-event" }, row.eventName), h("span", { class: "order-meta" }, row.dateLabel && h("span", null, row.dateLabel), h("span", null, row.countLabel))), h("span", { class: "order-side" }, h("span", { class: "order-total" }, row.totalLabel), h("span", { class: `status status-${row.statusTone}` }, row.statusLabel), 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" })))), row.expanded && (h("div", { class: "order-tickets" }, h("tl-order-tickets", { orderId: row.id, columns: this.columns })))));
     }
     render() {
-        if (this.loading) {
+        const { status, strings, state, derived } = this.view;
+        if (status === '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 (status === 'signed-out') {
+            return (h("div", { class: "orders" }, h("div", { class: "signin" }, h("p", { class: "signin-title" }, strings.signInTitle), h("p", { class: "signin-text" }, strings.signInText)), 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 (status === 'error') {
+            return (h("div", { class: "orders" }, h("div", { class: "state error" }, h("p", { class: "state-title" }, strings.errorTitle), h("p", { class: "state-text" }, state.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))));
+        if (status === 'empty') {
+            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" }, strings.emptyTitle), h("p", { class: "state-text" }, this.emptyMessage))));
         }
-        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, this.orders.map((o) => this.renderRow(o)))));
+        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, derived.rows.map((row) => this.renderRow(row)))));
     }
+    static get watchers() { return {
+        "emptyMessage": [{
+                "syncProps": 0
+            }],
+        "columns": [{
+                "syncProps": 0
+            }]
+    }; }
 };
 TlMyOrders.style = tlMyOrdersCss();