@ticketlayer/elements-core 0.1.0 → 0.2.0

package/dist/cjs/define.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NO_QUERY = exports.NO_STORAGE = void 0;
 exports.defineElement = defineElement;
 exports.createElement = createElement;
+/** The store a core gets when its harness supplies none: it forgets. */
+exports.NO_STORAGE = {
+    get: () => null,
+    set: () => undefined,
+};
+/** The parameters a core gets when its harness supplies none: there are none. */
+exports.NO_QUERY = {
+    get: () => null,
+};
 const CATEGORIES = [
     'discovery',
     'purchase',
@@ -71,6 +81,8 @@ function createElement(core, options = {}) {
         style: 'currency',
         currency: currency || fallbackCurrency,
     }).format(amountInMinorUnits / 100);
+    const storage = options.storage ?? exports.NO_STORAGE;
+    const query = options.query ?? exports.NO_QUERY;
     const viewContext = () => ({ props, state, strings, formatMoney });
     const buildView = () => {
         const ctx = viewContext();
@@ -89,6 +101,15 @@ function createElement(core, options = {}) {
         for (const listener of [...listeners])
             listener(view);
     };
+    const whenClient = async () => {
+        if (options.clientReady)
+            await options.clientReady();
+        const client = resolveClient();
+        if (!client) {
+            throw new Error(`[elements-core] ${core.tag}: no client. A harness hands the core the client the host published.`);
+        }
+        return client;
+    };
     const actionContext = {
         get props() {
             return props;
@@ -126,6 +147,9 @@ function createElement(core, options = {}) {
                 return null;
             }
         },
+        storage,
+        query,
+        whenClient,
         after(ms, run) {
             if (destroyed)
                 return;
@@ -138,6 +162,52 @@ function createElement(core, options = {}) {
         },
     };
     const actions = core.actions(actionContext);
+    // The live mount, as an identity rather than a boolean: a teardown closes
+    // over the token it was made for, so a stale one tears nothing down.
+    let mountToken = null;
+    let cleanups = [];
+    const teardownMount = (token) => {
+        if (mountToken !== token)
+            return;
+        mountToken = null;
+        const pending = cleanups;
+        cleanups = [];
+        for (const cleanup of pending.reverse())
+            cleanup();
+    };
+    const mount = () => {
+        if (destroyed)
+            return () => { };
+        if (mountToken)
+            teardownMount(mountToken);
+        const token = {};
+        mountToken = token;
+        const live = () => mountToken === token && !destroyed;
+        const returned = core.mount?.({
+            ...actionContext,
+            get props() {
+                return props;
+            },
+            get state() {
+                return state;
+            },
+            actions,
+            active: live,
+            onTeardown(cleanup) {
+                if (live())
+                    cleanups.push(cleanup);
+                else
+                    cleanup();
+            },
+        });
+        if (typeof returned === 'function') {
+            if (live())
+                cleanups.push(returned);
+            else
+                returned();
+        }
+        return () => teardownMount(token);
+    };
     return {
         core,
         get props() {
@@ -165,7 +235,13 @@ function createElement(core, options = {}) {
                 listeners.delete(listener);
             };
         },
+        mount,
+        get mounted() {
+            return mountToken !== null;
+        },
         destroy() {
+            if (mountToken)
+                teardownMount(mountToken);
             destroyed = true;
             for (const handle of timers)
                 clearTimeout(handle);

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FEE_LABEL_FALLBACK = exports.selectionTotals = exports.minorUnits = exports.expressesFee = exports.cartTotals = exports.manifestOf = exports.defineElement = exports.createElement = void 0;
+exports.totalsAgree = exports.ticketItems = exports.ticketCount = exports.statusTone = exports.statusLabel = exports.resolveOccurrence = exports.orderTotals = exports.orderEventName = exports.orderCustomerEmail = exports.formatPrice = exports.formatDateTime = exports.formatDate = exports.errorMessage = exports.FEE_LABEL_FALLBACK = exports.selectionTotals = exports.minorUnits = exports.expressesFee = exports.cartTotals = exports.manifestOf = exports.NO_STORAGE = exports.NO_QUERY = exports.defineElement = exports.createElement = void 0;
 /**
  * `@ticketlayer/elements-core`: the headless cores the Ticketlayer Elements
  * render.
@@ -33,6 +33,8 @@ exports.FEE_LABEL_FALLBACK = exports.selectionTotals = exports.minorUnits = expo
 var define_js_1 = require("./define.js");
 Object.defineProperty(exports, "createElement", { enumerable: true, get: function () { return define_js_1.createElement; } });
 Object.defineProperty(exports, "defineElement", { enumerable: true, get: function () { return define_js_1.defineElement; } });
+Object.defineProperty(exports, "NO_QUERY", { enumerable: true, get: function () { return define_js_1.NO_QUERY; } });
+Object.defineProperty(exports, "NO_STORAGE", { enumerable: true, get: function () { return define_js_1.NO_STORAGE; } });
 var manifest_js_1 = require("./manifest.js");
 Object.defineProperty(exports, "manifestOf", { enumerable: true, get: function () { return manifest_js_1.manifestOf; } });
 var money_js_1 = require("./money.js");
@@ -41,4 +43,18 @@ Object.defineProperty(exports, "expressesFee", { enumerable: true, get: function
 Object.defineProperty(exports, "minorUnits", { enumerable: true, get: function () { return money_js_1.minorUnits; } });
 Object.defineProperty(exports, "selectionTotals", { enumerable: true, get: function () { return money_js_1.selectionTotals; } });
 Object.defineProperty(exports, "FEE_LABEL_FALLBACK", { enumerable: true, get: function () { return money_js_1.FEE_LABEL_FALLBACK; } });
+var orders_js_1 = require("./orders.js");
+Object.defineProperty(exports, "errorMessage", { enumerable: true, get: function () { return orders_js_1.errorMessage; } });
+Object.defineProperty(exports, "formatDate", { enumerable: true, get: function () { return orders_js_1.formatDate; } });
+Object.defineProperty(exports, "formatDateTime", { enumerable: true, get: function () { return orders_js_1.formatDateTime; } });
+Object.defineProperty(exports, "formatPrice", { enumerable: true, get: function () { return orders_js_1.formatPrice; } });
+Object.defineProperty(exports, "orderCustomerEmail", { enumerable: true, get: function () { return orders_js_1.orderCustomerEmail; } });
+Object.defineProperty(exports, "orderEventName", { enumerable: true, get: function () { return orders_js_1.orderEventName; } });
+Object.defineProperty(exports, "orderTotals", { enumerable: true, get: function () { return orders_js_1.orderTotals; } });
+Object.defineProperty(exports, "resolveOccurrence", { enumerable: true, get: function () { return orders_js_1.resolveOccurrence; } });
+Object.defineProperty(exports, "statusLabel", { enumerable: true, get: function () { return orders_js_1.statusLabel; } });
+Object.defineProperty(exports, "statusTone", { enumerable: true, get: function () { return orders_js_1.statusTone; } });
+Object.defineProperty(exports, "ticketCount", { enumerable: true, get: function () { return orders_js_1.ticketCount; } });
+Object.defineProperty(exports, "ticketItems", { enumerable: true, get: function () { return orders_js_1.ticketItems; } });
+Object.defineProperty(exports, "totalsAgree", { enumerable: true, get: function () { return orders_js_1.totalsAgree; } });
 __exportStar(require("./cores/index.js"), exports);

package/dist/cjs/manifest.js

@@ -8,6 +8,7 @@ function manifestOf(core) {
         name,
         attr: spec.attr,
         type: spec.type,
+        tsType: spec.tsType ?? null,
         default: spec.default ?? null,
         required: !!spec.required,
         docs: spec.docs,
@@ -28,6 +29,7 @@ function manifestOf(core) {
         strings: { ...core.strings },
         statuses: [...core.statuses],
         actions: Object.keys(dryRunActions(core)).sort(),
+        mounts: typeof core.mount === 'function',
     };
 }
 /**
@@ -50,5 +52,8 @@ function dryRunActions(core) {
         client: refuse('client'),
         optionalClient: refuse('optionalClient'),
         after: refuse('after'),
+        storage: { get: refuse('storage.get'), set: refuse('storage.set') },
+        query: { get: refuse('query.get') },
+        whenClient: refuse('whenClient'),
     });
 }

package/dist/cjs/orders.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatPrice = formatPrice;
+exports.formatDateTime = formatDateTime;
+exports.formatDate = formatDate;
+exports.ticketItems = ticketItems;
+exports.ticketCount = ticketCount;
+exports.orderEventName = orderEventName;
+exports.orderCustomerEmail = orderCustomerEmail;
+exports.statusLabel = statusLabel;
+exports.statusTone = statusTone;
+exports.errorMessage = errorMessage;
+exports.resolveOccurrence = resolveOccurrence;
+exports.orderTotals = orderTotals;
+exports.totalsAgree = totalsAgree;
+/**
+ * The order shape, and what every harness has to work out from it.
+ *
+ * The sales order view carries line items, totals and tickets but no event
+ * name, no occurrence date and often no customer email, so these derive what
+ * they can from the order and resolve the rest through the client. They lived
+ * in `packages/elements/src/utils/order-summary.ts`, where only the web could
+ * reach them; they moved here with the split of `tl-my-orders` and
+ * `tl-order-confirmation` (TKT-69) so the same rules answer on every runtime.
+ * That module re-exports them, so every existing import still resolves and
+ * `tl-order-tickets` and `tl-ticket`, which are not split yet, read the same
+ * helpers they always did.
+ *
+ * `en-GB` is written out in the date and money helpers rather than taken from
+ * the instance's locale. That is what the components did and this is a
+ * behaviour-identical move; `ctx.formatMoney` is the locale-aware formatter and
+ * these are deliberately not it, because an order's money arrives as a minor
+ * unit integer OR a decimal string and `formatMoney` takes only the first.
+ */
+const money_js_1 = require("./money.js");
+/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
+function formatPrice(value, currency = 'GBP') {
+    if (value === null || value === undefined || value === '')
+        return '';
+    const fmt = new Intl.NumberFormat('en-GB', { style: 'currency', currency });
+    if (typeof value === 'number')
+        return fmt.format(value / 100);
+    const n = Number(value);
+    return Number.isNaN(n) ? String(value) : fmt.format(n);
+}
+function formatDateTime(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+/** Line items that are tickets (fees, taxes and discounts have their own type). */
+function ticketItems(order) {
+    return (order.items ?? []).filter((i) => !i.type || i.type === 'ticket');
+}
+function ticketCount(order) {
+    const fromItems = ticketItems(order).reduce((sum, i) => sum + (Number(i.quantity) || 0), 0);
+    return fromItems || order.tickets?.length || 0;
+}
+/** Event name as the order view exposes it: the first ticket line's name. */
+function orderEventName(order) {
+    return order.eventName || ticketItems(order)[0]?.name || order.items?.[0]?.name || null;
+}
+function orderCustomerEmail(order, customer) {
+    const fromOrder = order?.customerEmail || order?.customer?.email;
+    if (fromOrder)
+        return fromOrder;
+    const c = customer;
+    return c?.email || null;
+}
+function statusLabel(status) {
+    if (!status)
+        return '';
+    return status.replace(/_/g, ' ').replace(/^\w/, (m) => m.toUpperCase());
+}
+function statusTone(status) {
+    switch (status) {
+        case 'confirmed':
+            return 'success';
+        case 'completed':
+        case 'fulfilled':
+            return 'info';
+        case 'pending':
+        case 'processing':
+            return 'warning';
+        case 'cancelled':
+        case 'expired':
+        case 'failed':
+            return 'error';
+        default:
+            return 'muted';
+    }
+}
+function errorMessage(err, fallback) {
+    return err instanceof Error && err.message ? err.message : fallback;
+}
+/**
+ * Find the event and start time for an occurrence id. The order view only
+ * carries the occurrence id, so this walks the channel's listings (cached by
+ * live-api) until one owns the occurrence. Best effort: null when not found,
+ * and null on a client whose events manager cannot list or fetch, which is an
+ * older connector rather than a failure.
+ */
+async function resolveOccurrence(client, occurrenceId, maxEvents = 12) {
+    const events = client.getEventsManager();
+    if (!events?.list || !events.get)
+        return null;
+    const listing = await events.list({ limit: maxEvents });
+    const items = (listing?.items ?? []);
+    const candidates = items.slice(0, maxEvents);
+    for (const candidate of candidates) {
+        const detail = (await events.get(candidate.id).catch(() => null));
+        const occ = detail?.occurrences?.find((o) => o.id === occurrenceId);
+        if (occ) {
+            return {
+                eventId: detail?.id ?? candidate.id,
+                eventName: detail?.name ?? candidate.name ?? '',
+                startsAt: occ.startsAt ?? null,
+            };
+        }
+    }
+    return null;
+}
+function orderTotals(order) {
+    const o = order || {};
+    const items = Array.isArray(o.items) ? o.items : [];
+    const feeLines = items.filter((i) => i.type === 'fee');
+    const discountLines = items.filter((i) => i.type === 'discount');
+    const tickets = ticketItems(o);
+    const feeFromLines = feeLines.length
+        ? feeLines.reduce((sum, i) => sum + ((0, money_js_1.minorUnits)(i.subtotal) ?? 0), 0)
+        : null;
+    const fees = feeFromLines ?? (0, money_js_1.minorUnits)(o.totalFees) ?? 0;
+    const declaredSubtotal = (0, money_js_1.minorUnits)(o.subtotal);
+    const subtotal = tickets.length
+        ? tickets.reduce((sum, i) => sum + ((0, money_js_1.minorUnits)(i.subtotal) ?? 0), 0)
+        : (declaredSubtotal ?? 0) - fees;
+    const discountFromLines = discountLines.length
+        ? discountLines.reduce((sum, i) => sum + Math.abs((0, money_js_1.minorUnits)(i.subtotal) ?? 0), 0)
+        : null;
+    const discount = (0, money_js_1.minorUnits)(o.totalDiscounts) ?? discountFromLines ?? 0;
+    const tax = (0, money_js_1.minorUnits)(o.totalTax) ?? 0;
+    const named = feeLines.some((i) => typeof i.name === 'string' && !!i.name);
+    return {
+        currency: o.currency || 'GBP',
+        subtotal,
+        fees,
+        feeLabel: feeLines.map((i) => i.name).find((n) => !!n) || money_js_1.FEE_LABEL_FALLBACK,
+        showFee: (0, money_js_1.expressesFee)(feeFromLines ?? (0, money_js_1.minorUnits)(o.totalFees), named),
+        tax,
+        discount,
+        total: (0, money_js_1.minorUnits)(o.total) ?? subtotal + fees + tax - discount,
+    };
+}
+/** The rows add up to the total the order reports. Asserted in the specs. */
+function totalsAgree(totals) {
+    return totals.subtotal + totals.fees + totals.tax - totals.discount === totals.total;
+}

package/dist/esm/client.d.ts

@@ -14,12 +14,118 @@
  */
 export interface ElementEventsManager {
     getTicketTypes(eventId: string, occurrenceId: string): Promise<unknown[]>;
+    /** One event's detail. Absent on a connector that only sells. */
+    get?(eventId: string): Promise<unknown>;
+    /**
+     * The channel's listing. Absent on a connector that only sells, so every
+     * call site checks: `tl-event-list` renders it, and `resolveOccurrence`
+     * walks it to put an event name on an order.
+     */
+    list?(options?: {
+        limit?: number;
+        category?: string;
+    }): Promise<unknown>;
 }
 export interface ElementCartManager {
     addItem(ticketTypeId: string, quantity: number, occurrenceId: string): Promise<unknown>;
+    /** The cart as it stands. Absent on a connector that only writes. */
+    get?(): Promise<unknown>;
+    removeItem?(itemId: string): Promise<unknown>;
+    /**
+     * Subscribe to a cart event, returning the unsubscribe.
+     *
+     * Separate from {@link ElementClient.on} on purpose, and not a duplicate of
+     * it: `@ticketlayer/live`'s connector adapts the payload on the cart
+     * manager's bus (it adds `itemCount` and the derived money rows) and passes
+     * it through untouched on the client's. A cart core reads those figures, so
+     * it subscribes here, and `tl-cart-drawer`, which only listens for a UI
+     * intent, subscribes on the client.
+     */
+    on?(event: string, callback: (data: unknown) => void): (() => void) | void;
+}
+/** What a presale or promo code redemption gives back. */
+export interface ElementPresaleRedemption {
+    benefit: string;
+    alreadyHeld: boolean;
+}
+export interface ElementPresaleManager {
+    redeem(code: string): Promise<ElementPresaleRedemption>;
+}
+/** What a core may read and do about the customer's own orders. */
+export interface ElementOrdersManager {
+    /** The signed-in customer's orders. */
+    mine(): Promise<unknown>;
+    /** One order, with its tickets. Order-access gated by the session. */
+    get(orderId: string): Promise<unknown>;
+}
+/**
+ * Magic-link sign-in. `customer` and `authenticated` are read as properties
+ * rather than called, because the connector exposes them as live getters over
+ * the session and a core reads them again after every `auth:changed`.
+ */
+export interface ElementAuthManager {
+    readonly customer: unknown | null;
+    readonly authenticated: boolean;
+    requestMagicLink(contact: {
+        email?: string;
+        phone?: string;
+    }): Promise<unknown>;
+    exchange(code: string): Promise<unknown>;
+    logout(): Promise<void>;
+}
+/** What a completed purchase hands back to the element that opened the modal. */
+export interface ElementOrderResult {
+    orderId: string;
+    orderNumber: string;
+}
+/**
+ * What a core passes when it asks the host to open a modal.
+ *
+ * The callbacks are how the modal reports back: the element that opened it is
+ * the one that announces the outcome to the page, which is why the wrapper
+ * elements have events at all.
+ */
+export interface ElementModalOptions {
+    /** Open straight on one occurrence, skipping the occurrence selector. */
+    occurrenceId?: string;
+    onComplete?(order: ElementOrderResult): void;
+    onError?(error: Error): void;
+    onClose?(): void;
+}
+/** The fluent per-event accessor: `client.event(id).openModal(...)`. */
+export interface ElementEventContext {
+    openModal(options?: ElementModalOptions): void;
+}
+/** The checkout modal verbs. */
+export interface ElementCheckoutContext {
+    openModal(options?: ElementModalOptions): void;
+    closeModal(): void;
 }
 export interface ElementClient {
     getEventsManager(): ElementEventsManager;
     /** Absent on an older connector, so every call site checks. */
     getCartManager?(): ElementCartManager | null | undefined;
+    /** Presale and promo codes. Absent on an older connector. */
+    getPresaleManager?(): ElementPresaleManager | null | undefined;
+    /** The customer's orders and their tickets. Absent on an older connector. */
+    getOrdersManager?(): ElementOrdersManager | null | undefined;
+    /** Magic-link sign-in. Absent on an older connector. */
+    getAuthManager?(): ElementAuthManager | null | undefined;
+    /**
+     * The purchase modal for one event, as a UI intent the host's client relays.
+     * Absent on an older connector, so every call site checks.
+     */
+    event?(eventId: string): ElementEventContext;
+    /**
+     * The checkout modal, the same way. Absent on an older connector.
+     */
+    checkout?: ElementCheckoutContext;
+    /**
+     * Subscribe to a client event (`cart:updated` and the rest), returning the
+     * unsubscribe. This is how a core that lives on a subscription binds it in
+     * its own `mount` and hands the unsubscribe to `ctx.onTeardown`, rather than
+     * every harness re-implementing subscribe-on-connect per runtime (TKT-197).
+     * Optional, so a connector without a bus is tolerated rather than assumed.
+     */
+    on?(event: string, callback: (data: unknown) => void): (() => void) | void;
 }

package/dist/esm/cores/buy-tickets-button.d.ts

@@ -0,0 +1,55 @@
+/** The four states a seller puts this button in. */
+export type BuyTicketsButtonSaleState = 'available' | 'soldOut' | 'waitlist' | 'comingSoon';
+export type BuyTicketsButtonVariant = 'primary' | 'secondary' | 'outline';
+export type BuyTicketsButtonSize = 'sm' | 'md' | 'lg';
+export interface BuyTicketsButtonProps {
+    eventId: string;
+    occurrenceId: string | undefined;
+    state: BuyTicketsButtonSaleState;
+    label: string | undefined;
+    variant: BuyTicketsButtonVariant;
+    size: BuyTicketsButtonSize;
+    fullWidth: boolean;
+    price: number | undefined;
+    currency: string;
+    pricePrefix: string;
+    disabled: boolean;
+}
+/**
+ * Nothing. The modal belongs to the client, the sale state is the host's to
+ * set, and hover is the harness's: a pointer is not a fact every runtime has,
+ * the same way Enter and Space are not.
+ */
+export type BuyTicketsButtonState = Record<string, never>;
+export interface BuyTicketsButtonDerived {
+    /** Whether a press should do anything. The harness draws the rest from it. */
+    interactive: boolean;
+    /** The label on the button: the host's override, else the state's own. */
+    buttonLabel: string;
+    /**
+     * The class the sale state is rendered under. The core names the state and
+     * the stylesheet says which token family that class paints with, because a
+     * core cannot map a status onto one (`tl-event-card`'s status badge is the
+     * same bargain).
+     */
+    stateClass: string;
+    /** The formatted price, or null when the host gave none to show. */
+    priceLabel: string | null;
+}
+export type BuyTicketsButtonStatus = 'ready' | 'disabled';
+declare const STRINGS: {
+    available: string;
+    soldOut: string;
+    waitlist: string;
+    comingSoon: string;
+};
+export type BuyTicketsButtonStrings = typeof STRINGS;
+export declare const buyTicketsButtonCore: import("../define.js").ElementCore<BuyTicketsButtonProps, BuyTicketsButtonState, BuyTicketsButtonDerived, {
+    activate(): void;
+}, BuyTicketsButtonStatus, {
+    available: string;
+    soldOut: string;
+    waitlist: string;
+    comingSoon: string;
+}>;
+export {};