@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-buy-modal/tl-buy-modal.js

@@ -0,0 +1,249 @@
+import { h, Host } from "@stencil/core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/**
+ * @component tl-buy-modal
+ *
+ * The in-page buy-tickets funnel: occurrence → ticket selection → added.
+ * A NATIVE Elements overlay (no iframe) - it simply composes the existing
+ * `tl-occurrence-selector` and `tl-ticket-selector`, which already bind to the
+ * SDK and add to the cart. Because it's pure browse/cart (zero PCI surface), it
+ * renders in-page identically on HBO and on any third-party embed bound to
+ * `window.Ticketlayer`. Only the *checkout* step crosses into an iframe.
+ *
+ * It is not placed in markup by hosts: the SDK's buy-modal manager mounts it on
+ * demand when something emits `ui:event-modal-requested` (e.g. a
+ * `tl-buy-tickets-button` or a calendar date click), and removes it on close.
+ *
+ * @event tlClose    - user dismissed the modal (keep browsing)
+ * @event tlCheckout - user chose to proceed to checkout (manager hands off to
+ *                     the checkout intent: iframe on embeds, /checkout on HBO)
+ * @event tlError    - the event couldn't be loaded
+ */
+export class TlBuyModal {
+    constructor() {
+        this.step = 'loading';
+        this.eventName = '';
+        this.imageUrl = '';
+        this.venueLabel = '';
+        this.dateSummary = '';
+        this.selectedOccurrenceId = null;
+        this.occurrenceCount = 0;
+        this.occurrenceLabel = '';
+        this.error = null;
+        this.handleOccurrenceSelect = (e) => {
+            const occ = e.detail.occurrence;
+            this.selectedOccurrenceId = occ.id;
+            this.occurrenceLabel = this.labelFor(occ);
+            this.step = 'tickets';
+        };
+        this.handleAdded = () => {
+            this.step = 'done';
+        };
+        this.backToDates = () => {
+            this.selectedOccurrenceId = null;
+            this.step = 'occurrence';
+        };
+        this.close = () => this.tlClose.emit();
+        this.goCheckout = () => this.tlCheckout.emit();
+    }
+    async componentWillLoad() {
+        if (!this.eventId) {
+            this.fail('No event specified');
+            return;
+        }
+        try {
+            await whenSDK();
+            const ev = (await getSDK().getEventsManager().get(this.eventId));
+            this.eventName = ev?.name ?? 'Tickets';
+            this.imageUrl = ev?.imageUrl || ev?.heroImageUrl || '';
+            this.venueLabel = [ev?.venueName, ev?.venueCity].filter(Boolean).join(', ');
+            const occs = ev?.occurrences ?? [];
+            this.occurrenceCount = occs.length;
+            this.dateSummary = this.summariseDates(occs);
+            // Skip the date step when one was preselected or there's only one date.
+            const initial = this.occurrenceId ?? (occs.length === 1 ? occs[0]?.id : null);
+            if (initial) {
+                this.selectedOccurrenceId = initial;
+                this.occurrenceLabel = this.labelFor(occs.find((o) => o.id === initial));
+                this.step = 'tickets';
+            }
+            else {
+                this.step = 'occurrence';
+            }
+        }
+        catch (err) {
+            this.fail(err instanceof Error ? err.message : 'Could not load this event');
+        }
+    }
+    fail(message) {
+        this.error = message;
+        this.step = 'error';
+        this.tlError.emit({ message });
+    }
+    /** A compact date line for the header: a single date, or a range across many. */
+    summariseDates(occs) {
+        const times = occs
+            .map((o) => o.startsAt)
+            .filter((s) => !!s)
+            .sort();
+        if (times.length === 0)
+            return '';
+        const day = (s) => new Date(s).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+        if (times.length === 1) {
+            return new Date(times[0]).toLocaleDateString('en-GB', {
+                weekday: 'short',
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric',
+            });
+        }
+        const first = day(times[0]);
+        const last = day(times[times.length - 1]);
+        const range = first === last ? first : `${first} – ${last}`;
+        return `${range} · ${times.length} dates`;
+    }
+    labelFor(occ) {
+        if (!occ?.startsAt)
+            return '';
+        return new Date(occ.startsAt).toLocaleString('en-GB', {
+            weekday: 'short',
+            day: 'numeric',
+            month: 'short',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    stepKicker() {
+        switch (this.step) {
+            case 'occurrence':
+                return 'Choose a date';
+            case 'tickets':
+                return 'Select tickets';
+            case 'done':
+                return 'Nice one';
+            default:
+                return 'Tickets';
+        }
+    }
+    render() {
+        return (h(Host, { key: '1245e518c2b5232f4d9dba091cf808cd3867fbef' }, h("div", { key: '4e770fccdd785444f1cc87df4adab5a5dc1bf58a', class: "overlay", onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    this.close();
+            } }, h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))))));
+    }
+    static get is() { return "tl-buy-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-buy-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-buy-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eventId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to sell tickets for."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "event-id"
+            },
+            "occurrenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optionally open straight to ticket selection for this occurrence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "occurrence-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "step": {},
+            "eventName": {},
+            "imageUrl": {},
+            "venueLabel": {},
+            "dateSummary": {},
+            "selectedOccurrenceId": {},
+            "occurrenceCount": {},
+            "occurrenceLabel": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlClose",
+                "name": "tlClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tlCheckout",
+                "name": "tlCheckout",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.css

@@ -0,0 +1,120 @@
+/**
+ * TlBuyTicketsButton styles
+ */
+
+:host {
+  display: inline-block;
+  font-family: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+}
+
+:host(.full-width) {
+  display: block;
+  width: 100%;
+}
+
+:host(.full-width) .buy-button {
+  width: 100%;
+}
+
+.buy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+/* Variants */
+.buy-button.variant-primary {
+  background: var(--button-color);
+  color: var(--button-foreground);
+}
+
+.buy-button.variant-secondary {
+  background: color-mix(in srgb, var(--button-color) 15%, transparent);
+  color: var(--button-color);
+}
+
+.buy-button.variant-outline {
+  background: transparent;
+  color: var(--button-color);
+  border: 2px solid var(--button-color);
+}
+
+/* Sizes */
+.buy-button.size-sm {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  border-radius: var(--tl-radius-sm, 0.375rem);
+}
+
+.buy-button.size-md {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: var(--tl-radius-md, 0.5rem);
+}
+
+.buy-button.size-lg {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+  border-radius: var(--tl-radius-lg, 0.625rem);
+  min-height: 51px;
+}
+
+/* Hover state */
+.buy-button.hovered:not(.disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.buy-button.hovered.variant-primary {
+  background: var(--button-hover-color);
+}
+
+/* Disabled state */
+.buy-button.disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+/* Icon */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* Label */
+.label {
+  flex-shrink: 0;
+}
+
+/* Price */
+.price {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: 0.5rem;
+  white-space: nowrap;
+  opacity: 0.9;
+}
+
+.price-prefix {
+  opacity: 0.7;
+}
+
+.price-value {
+  font-weight: 700;
+}