@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
-  color: var(--tl-foreground, #111827);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 .confirmation {
@@ -11,13 +11,13 @@
 .check {
   width: 4rem;
   height: 4rem;
-  margin: 0 auto var(--tl-spacing-4, 1rem);
+  margin: 0 auto var(--tl-spacing-4);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .check svg {
@@ -26,49 +26,49 @@
 }
 
 .title {
-  margin: 0 0 var(--tl-spacing-2, 0.5rem);
+  margin: 0 0 var(--tl-spacing-2);
   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);
+  margin: 0 0 var(--tl-spacing-6);
+  color: var(--tl-muted-foreground);
 }
 
 .error {
-  margin: 0 0 var(--tl-spacing-6, 1.5rem);
+  margin: 0 0 var(--tl-spacing-6);
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .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);
+  padding: var(--tl-spacing-6);
+  margin-bottom: var(--tl-spacing-6);
+  background: var(--tl-muted);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
 }
 
 .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);
+  gap: var(--tl-spacing-2);
+  margin: 0 0 var(--tl-spacing-4);
+  padding: 0 0 var(--tl-spacing-4);
+  border-bottom: 1px solid var(--tl-border);
 }
 
 .row {
   display: flex;
   justify-content: space-between;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   font-size: 0.875rem;
 }
 
 .row dt {
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .row dd {
@@ -78,7 +78,7 @@
 }
 
 .reference {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
   font-weight: 600;
 }
 
@@ -87,40 +87,40 @@
   margin: 0;
   padding: 0;
   display: grid;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .line {
   display: flex;
   justify-content: space-between;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   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);
+  margin-top: var(--tl-spacing-3);
+  padding-top: var(--tl-spacing-3);
+  border-top: 1px solid var(--tl-border);
   display: grid;
-  gap: var(--tl-spacing-1, 0.25rem);
+  gap: var(--tl-spacing-1);
   font-size: 0.875rem;
 }
 
 .total-row {
   display: flex;
   justify-content: space-between;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .total-row.discount {
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .total-row.total {
-  margin-top: var(--tl-spacing-1, 0.25rem);
+  margin-top: var(--tl-spacing-1);
   font-size: 1rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .tickets {
@@ -128,24 +128,24 @@
 }
 
 .subtitle {
-  margin: 0 0 var(--tl-spacing-4, 1rem);
+  margin: 0 0 var(--tl-spacing-4);
   font-size: 1.125rem;
   font-weight: 600;
 }
 
 .hint {
-  margin: var(--tl-spacing-3, 0.75rem) 0 0;
+  margin: var(--tl-spacing-3) 0 0;
   font-size: 0.75rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 /* Skeleton */
 .skeleton-line,
 .skeleton-block {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-md);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  margin: 0 auto var(--tl-spacing-3, 0.75rem);
+  margin: 0 auto var(--tl-spacing-3);
 }
 
 .skeleton-line {

package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
-import { onSDKEvent, whenSDK } from "../../utils/sdk-connector";
-import { errorMessage, formatDateTime, formatPrice, orderCustomerEmail, orderEventName, resolveOccurrence, ticketItems, } from "../../utils/order-summary";
+import { createElement, orderConfirmationCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+import { webQuery } from "../../utils/web-query";
 /**
  * tl-order-confirmation - the "thank you" page block: order reference,
  * customer email, event and date, ticket lines, totals, then the tickets
@@ -13,6 +14,13 @@ import { errorMessage, formatDateTime, formatPrice, orderCustomerEmail, orderEve
  *  3. the SDK's `checkout:completed` event, for a page that mounts this before
  *     the customer pays
  *
+ * The web harness for `orderConfirmationCore`: it renders and it forwards. All
+ * three of those routes, the money rows, the event lookup and every string are
+ * in `@ticketlayer/elements-core` (AGENTS.md, TKT-11). What is left here is the
+ * Stencil surface and the two genuinely web things: the client the page
+ * published on `window.Ticketlayer`, and `window.location.search`, which is
+ * where this runtime keeps the parameters the core asks for.
+ *
  * Usage: <tl-order-confirmation order-id="ord_xxx"></tl-order-confirmation>
  *
  * @event tlOrderLoaded - the order was loaded
@@ -24,125 +32,82 @@ export class TlOrderConfirmation {
         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;
+        this.element = createElement(orderConfirmationCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            query: webQuery,
+            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;
     }
-    watchOrderId(next) {
-        this.resolvedOrderId = next || this.orderIdFromUrl();
-        this.load();
+    /**
+     * A new order id is a new subject, and the core resolves it again the way
+     * the mount did - the prop first, the link second. Not a remount: the
+     * `checkout:completed` subscription belongs to the element rather than to
+     * the order it is showing.
+     */
+    watchOrderId() {
+        this.syncProps();
+        this.element.actions.orderIdChanged();
     }
-    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();
+    syncProps() {
+        this.element.setProps({
+            orderId: this.orderId,
+            customerEmail: this.customerEmail,
+            showTickets: this.showTickets,
+            columns: this.columns,
         });
     }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    /**
+     * Off screen: run the mount's teardown, which drops the
+     * `checkout:completed` subscription. 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;
     }
-    urlParams() {
-        if (typeof window === 'undefined' || !window.location?.search)
-            return null;
-        return new URLSearchParams(window.location.search);
+    forward(event, detail) {
+        if (event === 'tlOrderLoaded')
+            this.tlOrderLoaded.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
-    orderIdFromUrl() {
-        return this.urlParams()?.get('orderId') || null;
+    renderRows() {
+        return (h("dl", { class: "rows" }, this.view.derived.rows.map((row) => (h("div", { class: "row", key: row.label }, h("dt", null, row.label), h("dd", { class: row.reference ? 'reference' : undefined }, row.value))))));
     }
-    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)))));
+    // Money comes from the core's orderTotals: the booking fee is its own row
+    // named after the channel's fee profile, the subtotal is the ticket lines
+    // alone (the order's own `subtotal` folds the fee line into it) and the
+    // total is the order's figure, so what is shown is what was charged.
+    renderTotals() {
+        const { strings, derived } = this.view;
+        return (h("div", { class: "totals" }, h("div", { class: "total-row" }, h("span", null, strings.subtotalRow), h("span", null, derived.subtotalLabel)), derived.totals.showFee && (h("div", { class: "total-row fee" }, h("span", null, derived.totals.feeLabel), h("span", null, derived.feeAmountLabel))), derived.showTaxRow && (h("div", { class: "total-row" }, h("span", null, strings.taxRow), h("span", null, derived.taxLabel))), derived.showDiscountRow && (h("div", { class: "total-row discount" }, h("span", null, strings.discountRow), h("span", null, "-", derived.discountLabel))), h("div", { class: "total-row total" }, h("span", null, strings.totalRow), h("span", null, derived.totalLabel))));
     }
     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.")));
+        const { status, state, strings, derived } = this.view;
+        if (status === 'payment-failed') {
+            return (h("div", { class: "confirmation" }, h("h1", { class: "title" }, strings.paymentFailedTitle), h("p", { class: "lead" }, strings.paymentFailedLead)));
         }
         // Nothing to show yet: no order in props, URL or from checkout.
-        if (!this.resolvedOrderId && !this.order) {
+        if (status === 'idle') {
             return null;
         }
-        if (this.loading) {
+        if (status === '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.")))));
+        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" }, strings.title), h("p", { class: "lead" }, derived.leadText), derived.showError && (h("p", { class: "error" }, strings.errorPrefix, state.error)), derived.showSummary && (h("div", { class: "summary" }, this.renderRows(), h("ul", { class: "lines" }, derived.lines.map((line, i) => (h("li", { class: "line", key: i }, h("span", { class: "line-name" }, line.label), h("span", { class: "line-price" }, line.priceLabel))))), this.renderTotals())), derived.showTickets && (h("div", { class: "tickets" }, h("h2", { class: "subtitle" }, strings.ticketsTitle), h("tl-order-tickets", { orderId: derived.ticketsOrderId, columns: this.columns }), h("p", { class: "hint" }, strings.ticketsHint)))));
     }
     static get is() { return "tl-order-confirmation"; }
     static get encapsulation() { return "shadow"; }
@@ -240,13 +205,7 @@ export class TlOrderConfirmation {
     }
     static get states() {
         return {
-            "order": {},
-            "resolvedOrderId": {},
-            "loading": {},
-            "error": {},
-            "paymentFailed": {},
-            "occurrence": {},
-            "signedInCustomer": {}
+            "view": {}
         };
     }
     static get events() {
@@ -266,8 +225,8 @@ export class TlOrderConfirmation {
                     "references": {
                         "TlOrderData": {
                             "location": "import",
-                            "path": "../../utils/order-summary",
-                            "id": "src/utils/order-summary.ts::TlOrderData",
+                            "path": "@ticketlayer/elements-core",
+                            "id": "../elements-core/dist/esm/index.d.ts::TlOrderData",
                             "referenceLocation": "TlOrderData"
                         }
                     }
@@ -293,6 +252,15 @@ export class TlOrderConfirmation {
         return [{
                 "propName": "orderId",
                 "methodName": "watchOrderId"
+            }, {
+                "propName": "customerEmail",
+                "methodName": "syncProps"
+            }, {
+                "propName": "showTickets",
+                "methodName": "syncProps"
+            }, {
+                "propName": "columns",
+                "methodName": "syncProps"
             }];
     }
 }

package/dist/collection/components/tl-order-tickets/tl-order-tickets.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .grid {
   display: grid;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   grid-template-columns: 1fr;
 }
 
@@ -19,28 +19,28 @@
 }
 
 .state {
-  padding: var(--tl-spacing-6, 1.5rem);
+  padding: var(--tl-spacing-6);
   text-align: center;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   font-size: 0.875rem;
 }
 
 .state.error {
-  color: var(--tl-error, #dc2626);
+  color: var(--tl-error);
 }
 
 .state.issuing {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .spinner {
   width: 0.875rem;
   height: 0.875rem;
-  border: 2px solid var(--tl-border, #e5e7eb);
-  border-top-color: var(--tl-primary, #6366f1);
+  border: 2px solid var(--tl-border);
+  border-top-color: var(--tl-primary);
   border-radius: 50%;
   animation: tl-spin 0.7s linear infinite;
   flex: none;
@@ -57,6 +57,6 @@
 @media (prefers-reduced-motion: reduce) {
   .spinner {
     animation: none;
-    border-top-color: var(--tl-border, #e5e7eb);
+    border-top-color: var(--tl-border);
   }
 }