@ticketlayer/elements 0.2.0

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

@@ -0,0 +1,146 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var orderSummary = require('./order-summary-ZMkJ5bez.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) {
+        index.registerInstance(this, hostRef);
+        this.tlOrderLoaded = index.createEvent(this, "tlOrderLoaded");
+        this.tlError = index.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 = sdkConnector.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 sdkConnector.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 = orderSummary.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 orderSummary.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 || orderSummary.orderCustomerEmail(order, this.signedInCustomer);
+        const eventName = this.occurrence?.eventName || orderSummary.orderEventName(order);
+        const startsAt = this.occurrence?.startsAt;
+        return (index.h("dl", { class: "rows" }, index.h("div", { class: "row" }, index.h("dt", null, "Order reference"), index.h("dd", { class: "reference" }, order.orderNumber)), email && (index.h("div", { class: "row" }, index.h("dt", null, "Email"), index.h("dd", null, email))), eventName && (index.h("div", { class: "row" }, index.h("dt", null, "Event"), index.h("dd", null, eventName))), startsAt && (index.h("div", { class: "row" }, index.h("dt", null, "Date"), index.h("dd", null, orderSummary.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 (index.h("div", { class: "totals" }, index.h("div", { class: "total-row" }, index.h("span", null, "Subtotal"), index.h("span", null, orderSummary.formatPrice(order.subtotal, c))), fees > 0 && (index.h("div", { class: "total-row" }, index.h("span", null, "Fees"), index.h("span", null, orderSummary.formatPrice(order.totalFees, c)))), tax > 0 && (index.h("div", { class: "total-row" }, index.h("span", null, "Tax"), index.h("span", null, orderSummary.formatPrice(order.totalTax, c)))), discounts > 0 && (index.h("div", { class: "total-row discount" }, index.h("span", null, "Discount"), index.h("span", null, "-", orderSummary.formatPrice(order.totalDiscounts, c)))), index.h("div", { class: "total-row total" }, index.h("span", null, "Total"), index.h("span", null, orderSummary.formatPrice(order.total, c)))));
+    }
+    render() {
+        if (this.paymentFailed) {
+            return (index.h("div", { class: "confirmation" }, index.h("h1", { class: "title" }, "Payment not completed"), index.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 (index.h("div", { class: "confirmation" }, index.h("div", { class: "skeleton-line short" }), index.h("div", { class: "skeleton-line long" }), index.h("div", { class: "skeleton-block" })));
+        }
+        const order = this.order;
+        const orderId = order?.id || this.resolvedOrderId;
+        return (index.h("div", { class: "confirmation" }, index.h("div", { class: "check", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" }))), index.h("h1", { class: "title" }, "You're going!"), index.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 && (index.h("p", { class: "error" }, "We couldn't load your order details yet. ", this.error)), order && Array.isArray(order.items) && (index.h("div", { class: "summary" }, this.renderRows(order), index.h("ul", { class: "lines" }, orderSummary.ticketItems(order).map((item, i) => (index.h("li", { class: "line", key: i }, index.h("span", { class: "line-name" }, item.quantity, " x ", item.name), index.h("span", { class: "line-price" }, orderSummary.formatPrice(item.subtotal, order.currency)))))), this.renderTotals(order))), this.showTickets && order && (index.h("div", { class: "tickets" }, index.h("h2", { class: "subtitle" }, "Your tickets"), index.h("tl-order-tickets", { orderId: orderId, columns: this.columns }), index.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();
+
+exports.tl_order_confirmation = TlOrderConfirmation;