@ticketlayer/elements 0.2.0

package/dist/esm/tl-order-confirmation.entry.js

@@ -0,0 +1,144 @@
+import { r as registerInstance, c as createEvent, h } from './index-Ba-RZTFI.js';
+import { o as onSDKEvent, w as whenSDK } from './sdk-connector-CqhvfyKV.js';
+import { e as errorMessage, r as resolveOccurrence, o as orderEventName, c as formatDateTime, d as orderCustomerEmail, a as formatPrice, g as ticketItems } from './order-summary-BGekdjN9.js';
+
+const tlOrderConfirmationCss = () => `: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-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}}`;
+
+const TlOrderConfirmation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlOrderLoaded = createEvent(this, "tlOrderLoaded");
+        this.tlError = createEvent(this, "tlError");
+        /** 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 watchers() { return {
+        "orderId": [{
+                "watchOrderId": 0
+            }]
+    }; }
+};
+TlOrderConfirmation.style = tlOrderConfirmationCss();
+
+export { TlOrderConfirmation as tl_order_confirmation };