@ticketlayer/elements 0.2.0

package/dist/cjs/tl-login.cjs.entry.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var orderSummary = require('./order-summary-ZMkJ5bez.js');
+
+const tlLoginCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif);color:var(--tl-foreground, #111827)}.login{display:flex;flex-direction:column;gap:var(--tl-spacing-3, 0.75rem);padding:var(--tl-spacing-6, 1.5rem);background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-lg, 0.75rem)}.title{margin:0;font-size:1.25rem;font-weight:600}.lead{margin:0;font-size:0.875rem;color:var(--tl-muted-foreground, #6b7280)}.label{font-size:0.875rem;font-weight:500}.input{padding:var(--tl-spacing-3, 0.75rem);font:inherit;font-size:0.9375rem;color:var(--tl-foreground, #111827);background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem)}.input:focus{outline:2px solid var(--tl-primary, #6366f1);outline-offset:1px}.code-input{font-family:var(--tl-font-family-mono, ui-monospace, monospace);font-size:1.25rem;letter-spacing:0.25em;text-align:center}.primary,.secondary{padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);font:inherit;font-size:0.9375rem;font-weight:600;border-radius:var(--tl-radius-md, 0.5rem);cursor:pointer}.primary{color:var(--tl-primary-foreground, #ffffff);background:var(--tl-primary, #6366f1);border:none}.primary:hover:not(:disabled){opacity:0.9}.secondary{color:var(--tl-foreground, #111827);background:var(--tl-secondary, #f3f4f6);border:1px solid var(--tl-border, #e5e7eb)}.primary:disabled,.secondary:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.link{padding:0;font:inherit;font-size:0.875rem;color:var(--tl-primary, #6366f1);background:none;border:none;cursor:pointer}.link:hover{text-decoration:underline}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tl-spacing-4, 1rem)}.error{margin:0;font-size:0.8125rem;color:var(--tl-error, #ef4444)}.notice{margin:0;font-size:0.8125rem;color:var(--tl-success, #10b981)}.signed-in{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.signed-in-text{margin:0;font-size:0.875rem;overflow-wrap:anywhere}`;
+
+const TlLogin = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tlAuthChanged = index.createEvent(this, "tlAuthChanged");
+        this.tlMagicLinkSent = index.createEvent(this, "tlMagicLinkSent");
+        this.tlError = index.createEvent(this, "tlError");
+        /** Heading for the email step. */
+        this.heading = 'Sign in';
+        /** Offer a "enter the code" path alongside the emailed link (default true). */
+        this.allowCodeEntry = true;
+        this.phase = 'email';
+        this.email = '';
+        this.code = '';
+        this.busy = false;
+        this.error = null;
+        this.notice = null;
+        this.customer = null;
+        this.auth = null;
+        this.unsubscribes = [];
+        // A magic-link code is single-use; never exchange the URL code twice.
+        this.urlCodeUsed = false;
+        this.handleEmailInput = (e) => {
+            this.email = e.target.value;
+            this.error = null;
+        };
+        this.handleCodeInput = (e) => {
+            this.code = e.target.value;
+            this.error = null;
+        };
+        this.handleEmailSubmit = (e) => {
+            e.preventDefault();
+            this.requestLink();
+        };
+        this.handleCodeSubmit = (e) => {
+            e.preventDefault();
+            this.exchange(this.code.trim());
+        };
+    }
+    async componentWillLoad() {
+        const sdk = await sdkConnector.whenSDK().catch(() => null);
+        if (!sdk) {
+            this.error = 'Sign-in is not available right now';
+            return;
+        }
+        this.auth = sdk.getAuthManager?.() ?? null;
+        if (!this.auth) {
+            this.error = 'Sign-in is not available with this SDK';
+            return;
+        }
+        this.syncFromSDK();
+        // The session hydrates after the SDK publishes; follow both signals.
+        this.unsubscribes.push(sdk.on('auth:changed', () => this.syncFromSDK()));
+        this.unsubscribes.push(sdk.on('session:changed', () => this.syncFromSDK()));
+        const urlCode = this.codeFromUrl();
+        if (urlCode && !this.auth.authenticated) {
+            await this.exchange(urlCode);
+        }
+    }
+    disconnectedCallback() {
+        this.unsubscribes.forEach((off) => off());
+        this.unsubscribes = [];
+    }
+    codeFromUrl() {
+        if (typeof window === 'undefined' || !window.location?.search || this.urlCodeUsed)
+            return null;
+        const code = new URLSearchParams(window.location.search).get('code');
+        if (code)
+            this.urlCodeUsed = true;
+        return code;
+    }
+    syncFromSDK() {
+        if (!this.auth)
+            return;
+        if (this.auth.authenticated) {
+            this.customer = this.auth.customer ?? null;
+            this.phase = 'signed-in';
+        }
+        else if (this.phase === 'signed-in') {
+            this.customer = null;
+            this.phase = 'email';
+        }
+    }
+    async requestLink(resend = false) {
+        const email = this.email.trim();
+        if (!email) {
+            this.error = 'Enter your email address';
+            return;
+        }
+        if (!this.auth)
+            return;
+        this.busy = true;
+        this.error = null;
+        this.notice = null;
+        try {
+            // Always reports success; account existence is never revealed.
+            await this.auth.requestMagicLink({ email });
+            this.phase = 'sent';
+            this.notice = resend ? 'Sent again. Check your inbox.' : null;
+            this.tlMagicLinkSent.emit({ email });
+        }
+        catch (err) {
+            console.error('[tl-login] Magic-link request failed:', err);
+            this.error = orderSummary.errorMessage(err, 'Could not send your sign-in link');
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async exchange(code) {
+        if (!code) {
+            this.error = 'Enter the code from your email';
+            return;
+        }
+        if (!this.auth)
+            return;
+        const previous = this.phase;
+        this.busy = true;
+        this.error = null;
+        this.phase = 'verifying';
+        try {
+            const res = (await this.auth.exchange(code));
+            this.customer = this.auth.customer ?? res?.customer ?? null;
+            this.phase = 'signed-in';
+            this.code = '';
+            this.tlAuthChanged.emit({ customer: this.customer, authenticated: true });
+        }
+        catch (err) {
+            console.error('[tl-login] Code exchange failed:', err);
+            this.phase = previous === 'verifying' || previous === 'email' ? 'email' : 'code';
+            this.error = 'That code did not work. Check it and try again, or request a new link.';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async signOut() {
+        if (!this.auth)
+            return;
+        this.busy = true;
+        try {
+            await this.auth.logout();
+        }
+        catch (err) {
+            console.error('[tl-login] Sign out failed:', err);
+        }
+        finally {
+            this.busy = false;
+            this.customer = null;
+            this.phase = 'email';
+            this.tlAuthChanged.emit({ customer: null, authenticated: false });
+        }
+    }
+    renderError() {
+        return this.error ? (index.h("p", { class: "error", role: "alert" }, this.error)) : null;
+    }
+    render() {
+        if (this.phase === 'signed-in') {
+            return (index.h("div", { class: "login signed-in" }, index.h("p", { class: "signed-in-text" }, "Signed in as ", index.h("strong", null, this.customer?.email ?? 'your account')), index.h("button", { type: "button", class: "secondary", disabled: this.busy, onClick: () => this.signOut() }, "Sign out")));
+        }
+        if (this.phase === 'verifying') {
+            return (index.h("div", { class: "login" }, index.h("h2", { class: "title" }, "Signing you in\u2026"), index.h("p", { class: "lead" }, "Just a moment.")));
+        }
+        if (this.phase === 'sent') {
+            return (index.h("div", { class: "login" }, index.h("h2", { class: "title" }, "Check your inbox"), index.h("p", { class: "lead" }, "We've sent a sign-in link to ", index.h("strong", null, this.email), ". Open it on this device to continue."), this.notice && index.h("p", { class: "notice" }, this.notice), this.renderError(), index.h("div", { class: "actions" }, index.h("button", { type: "button", class: "secondary", disabled: this.busy, onClick: () => this.requestLink(true) }, this.busy ? 'Sending…' : 'Resend link'), this.allowCodeEntry && (index.h("button", { type: "button", class: "link", onClick: () => (this.phase = 'code') }, "Enter the code instead")), index.h("button", { type: "button", class: "link", onClick: () => (this.phase = 'email') }, "Use a different email"))));
+        }
+        if (this.phase === 'code') {
+            return (index.h("form", { class: "login", onSubmit: this.handleCodeSubmit }, index.h("h2", { class: "title" }, "Enter your code"), index.h("p", { class: "lead" }, "Type the 6-digit code from the email we sent to ", index.h("strong", null, this.email), "."), index.h("label", { class: "label", htmlFor: "tl-login-code" }, "Code"), index.h("input", { id: "tl-login-code", class: "input code-input", type: "text", inputmode: "numeric", autocomplete: "one-time-code", placeholder: "123456", value: this.code, disabled: this.busy, onInput: this.handleCodeInput }), this.renderError(), index.h("button", { type: "submit", class: "primary", disabled: this.busy }, this.busy ? 'Checking…' : 'Sign in'), index.h("div", { class: "actions" }, index.h("button", { type: "button", class: "link", onClick: () => this.requestLink(true) }, "Resend link"), index.h("button", { type: "button", class: "link", onClick: () => (this.phase = 'sent') }, "Back"))));
+        }
+        return (index.h("form", { class: "login", onSubmit: this.handleEmailSubmit }, index.h("h2", { class: "title" }, this.heading), index.h("p", { class: "lead" }, "Enter your email and we'll send you a secure sign-in link. No password needed."), index.h("label", { class: "label", htmlFor: "tl-login-email" }, "Email address"), index.h("input", { id: "tl-login-email", class: "input", type: "email", autocomplete: "email", placeholder: "you@example.com", required: true, value: this.email, disabled: this.busy || !this.auth, onInput: this.handleEmailInput }), this.renderError(), index.h("button", { type: "submit", class: "primary", disabled: this.busy || !this.auth }, this.busy ? 'Sending link…' : 'Email me a sign-in link')));
+    }
+};
+TlLogin.style = tlLoginCss();
+
+exports.tl_login = TlLogin;

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

@@ -0,0 +1,123 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var orderSummary = require('./order-summary-ZMkJ5bez.js');
+
+const tlMyOrdersCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif);color:var(--tl-foreground, #111827)}.orders{display:flex;flex-direction:column;gap:var(--tl-spacing-4, 1rem)}.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--tl-spacing-3, 0.75rem)}.order{background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-lg, 0.75rem);overflow:hidden;transition:border-color 0.2s ease, box-shadow 0.2s ease}.order:hover,.order.expanded{border-color:var(--tl-primary, #6366f1);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, 1rem);width:100%;padding:var(--tl-spacing-4, 1rem);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, 0.25rem);min-width:0}.order-number{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--tl-muted-foreground, #6b7280)}.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, 0.75rem);font-size:0.8125rem;color:var(--tl-muted-foreground, #6b7280)}.order-side{display:flex;align-items:center;gap:var(--tl-spacing-3, 0.75rem);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, #f3f4f6);color:var(--tl-secondary-foreground, #111827)}.status-success{background:var(--tl-success, #10b981);color:var(--tl-success-foreground, #ffffff)}.status-info{background:var(--tl-primary, #6366f1);color:var(--tl-primary-foreground, #ffffff)}.status-warning{background:var(--tl-warning, #f59e0b);color:var(--tl-warning-foreground, #ffffff)}.status-error{background:var(--tl-error, #ef4444);color:var(--tl-error-foreground, #ffffff)}.chevron{width:1.125rem;height:1.125rem;color:var(--tl-muted-foreground, #6b7280);transition:transform 0.2s ease}.expanded .chevron{transform:rotate(90deg)}.order-tickets{padding:0 var(--tl-spacing-4, 1rem) var(--tl-spacing-4, 1rem);border-top:1px solid var(--tl-border, #e5e7eb);padding-top:var(--tl-spacing-4, 1rem)}@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.25rem) 0 0;font-size:0.875rem;color:var(--tl-muted-foreground, #6b7280)}.state{padding:var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);text-align:center;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-lg, 0.75rem)}.state.error .state-title{color:var(--tl-error, #ef4444)}.empty-icon{width:3rem;height:3rem;margin:0 auto var(--tl-spacing-3, 0.75rem);color:var(--tl-primary, #6366f1)}.skeleton{height:5rem;background:var(--tl-secondary, #f3f4f6);border-radius:var(--tl-radius-lg, 0.75rem);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`;
+
+const TlMyOrders = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tlOrderSelect = index.createEvent(this, "tlOrderSelect");
+        this.tlError = index.createEvent(this, "tlError");
+        /** 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 sdkConnector.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 (orderSummary.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 = orderSummary.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 = orderSummary.ticketCount(order);
+        const tone = orderSummary.statusTone(order.status);
+        return (index.h("li", { class: { order: true, expanded }, key: order.id }, index.h("button", { type: "button", class: "order-row", "aria-expanded": expanded ? 'true' : 'false', onClick: () => this.toggle(order.id) }, index.h("span", { class: "order-main" }, index.h("span", { class: "order-number" }, "Order ", order.orderNumber), index.h("span", { class: "order-event" }, orderSummary.orderEventName(order) ?? 'Order'), index.h("span", { class: "order-meta" }, order.createdAt && index.h("span", null, orderSummary.formatDate(order.createdAt)), index.h("span", null, count, " ticket", count === 1 ? '' : 's'))), index.h("span", { class: "order-side" }, index.h("span", { class: "order-total" }, orderSummary.formatPrice(order.total, order.currency)), index.h("span", { class: `status status-${tone}` }, orderSummary.statusLabel(order.status)), index.h("svg", { class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 18l6-6-6-6" })))), expanded && (index.h("div", { class: "order-tickets" }, index.h("tl-order-tickets", { orderId: order.id, columns: this.columns })))));
+    }
+    render() {
+        if (this.loading) {
+            return (index.h("div", { class: "orders" }, [0, 1, 2].map((i) => (index.h("div", { class: "skeleton", key: i })))));
+        }
+        if (!this.authenticated) {
+            return (index.h("div", { class: "orders" }, index.h("div", { class: "signin" }, index.h("p", { class: "signin-title" }, "Sign in to see your orders"), index.h("p", { class: "signin-text" }, "Your tickets and order history live in your account.")), index.h("tl-login", null)));
+        }
+        if (this.error) {
+            return (index.h("div", { class: "orders" }, index.h("div", { class: "state error" }, index.h("p", { class: "state-title" }, "Could not load your orders"), index.h("p", { class: "state-text" }, this.error))));
+        }
+        if (this.orders.length === 0) {
+            return (index.h("div", { class: "orders" }, index.h("div", { class: "state empty" }, index.h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, index.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" }), index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M13 5v2M13 17v2M13 11v2" })), index.h("p", { class: "state-title" }, "No orders yet"), index.h("p", { class: "state-text" }, this.emptyMessage))));
+        }
+        return (index.h("div", { class: "orders" }, index.h("ul", { class: "order-list" }, this.orders.map((o) => this.renderRow(o)))));
+    }
+};
+TlMyOrders.style = tlMyOrdersCss();
+
+exports.tl_my_orders = TlMyOrders;