@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/collection/components/tl-ticket-selector/tl-ticket-selector.js

@@ -22,6 +22,9 @@ export class TlTicketSelector {
         this.buttonLabel = 'Add to Cart';
         this.element = createElement(ticketSelectorCore, {
             client: () => getSDK(),
+            // What "the client is up" means on the web. The core waits on it in its
+            // own mount; the harness no longer decides when to load (TKT-197).
+            clientReady: () => whenSDK(),
             emit: (event, detail) => this.forward(event, detail),
         });
         /** The core's whole view. Assigning it is what makes Stencil re-render. */
@@ -39,9 +42,14 @@ export class TlTicketSelector {
     set feeQuote(quote) {
         this.element.actions.setFeeQuote(quote);
     }
+    /**
+     * A new event or occurrence is a new subject: the element is torn down and
+     * mounted again, so whatever the core set up for the old one is undone
+     * before anything is set up for the new one.
+     */
     watchPropsChange() {
         this.syncProps();
-        this.element.actions.load();
+        this.remount();
     }
     syncProps() {
         this.element.setProps({
@@ -51,32 +59,38 @@ export class TlTicketSelector {
             buttonLabel: this.buttonLabel,
         });
     }
-    async componentWillLoad() {
+    /**
+     * On screen: render what the core says and put the core to work. What "to
+     * work" means is the core's own business - for this element, waiting for the
+     * client and reading the ticket types.
+     *
+     * `connectedCallback` and not `componentWillLoad` because this runs again
+     * when the element is moved in the DOM, and that is exactly when a mount and
+     * its teardown have to pair up.
+     */
+    connectedCallback() {
         this.syncProps();
-        this.unsubscribe = this.element.subscribe((view) => {
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
             this.view = view;
-        });
+        }));
         this.view = this.element.view;
-        await this.waitForSDKAndLoad();
+        this.teardown = this.element.mount();
     }
+    /**
+     * Off screen: run the mount's teardown, and nothing more. `destroy()` is
+     * terminal and Stencil calls this for a move as well as a removal, so
+     * destroying here would leave a re-inserted element frozen. The instance
+     * holds no listener and no subscription once these two have run.
+     */
     disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
         this.unsubscribe?.();
-        this.element.destroy();
+        this.unsubscribe = undefined;
     }
-    /**
-     * Wait for SDK to be ready, then load ticket types
-     */
-    async waitForSDKAndLoad() {
-        if (!this.eventId || !this.occurrenceId) {
-            return;
-        }
-        try {
-            await whenSDK();
-            await this.element.actions.load();
-        }
-        catch (err) {
-            this.element.actions.connectFailed(err instanceof Error ? err.message : this.view.strings.noClient);
-        }
+    remount() {
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
     forward(event, detail) {
         if (event === 'tlAddToCart')

package/dist/collection/utils/order-summary.js

@@ -1,137 +1,17 @@
-import { expressesFee, minorUnits, FEE_LABEL_FALLBACK } from "./cart-totals";
-/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
-export 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);
-}
-export function formatDateTime(iso) {
-    return new Date(iso).toLocaleDateString('en-GB', {
-        weekday: 'short',
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-}
-export 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). */
-export function ticketItems(order) {
-    return (order.items ?? []).filter((i) => !i.type || i.type === 'ticket');
-}
-export 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. */
-export function orderEventName(order) {
-    return order.eventName || ticketItems(order)[0]?.name || order.items?.[0]?.name || null;
-}
-export function orderCustomerEmail(order, customer) {
-    const fromOrder = order?.customerEmail || order?.customer?.email;
-    if (fromOrder)
-        return fromOrder;
-    const c = customer;
-    return c?.email || null;
-}
-export function statusLabel(status) {
-    if (!status)
-        return '';
-    return status.replace(/_/g, ' ').replace(/^\w/, (m) => m.toUpperCase());
-}
-export 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';
-    }
-}
-export function errorMessage(err, fallback) {
-    return err instanceof Error && err.message ? err.message : fallback;
-}
-/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
-export function isAuthError(err) {
-    const e = err;
-    if (!e || typeof e !== 'object')
-        return false;
-    return e.status === 401 || e.status === 403 || e.code === 'NO_SESSION' || e.code === 'NOT_AUTHENTICATED';
-}
 /**
- * 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.
+ * The order helpers, as the components have always imported them.
+ *
+ * Everything here now lives in `@ticketlayer/elements-core`
+ * (`src/orders.ts`): the order shape, the money rows, the status tone, the
+ * date and price formatting and the occurrence lookup all moved across with
+ * the split of `tl-my-orders` and `tl-order-confirmation` (TKT-69), so a
+ * native harness answers the same questions the same way. This module stays as
+ * the import path, unchanged for callers, because `tl-order-tickets` and
+ * `tl-ticket` are not split yet and read these helpers from here.
+ *
+ * `resolveOccurrence` is the one signature that moved: it takes the core's
+ * `ElementClient` rather than this package's `TicketlayerSDK`. A
+ * `TicketlayerSDK` satisfies that shape, so every existing call still
+ * compiles, which is why it is re-exported rather than wrapped.
  */
-export async function resolveOccurrence(sdk, occurrenceId, maxEvents = 12) {
-    const events = sdk.getEventsManager();
-    const listing = await events.list({ limit: maxEvents });
-    const candidates = listing.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;
-}
-export 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 + (minorUnits(i.subtotal) ?? 0), 0)
-        : null;
-    const fees = feeFromLines ?? minorUnits(o.totalFees) ?? 0;
-    const declaredSubtotal = minorUnits(o.subtotal);
-    const subtotal = tickets.length
-        ? tickets.reduce((sum, i) => sum + (minorUnits(i.subtotal) ?? 0), 0)
-        : (declaredSubtotal ?? 0) - fees;
-    const discountFromLines = discountLines.length
-        ? discountLines.reduce((sum, i) => sum + Math.abs(minorUnits(i.subtotal) ?? 0), 0)
-        : null;
-    const discount = minorUnits(o.totalDiscounts) ?? discountFromLines ?? 0;
-    const tax = 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) || FEE_LABEL_FALLBACK,
-        showFee: expressesFee(feeFromLines ?? minorUnits(o.totalFees), named),
-        tax,
-        discount,
-        total: minorUnits(o.total) ?? subtotal + fees + tax - discount,
-    };
-}
-/** The rows add up to the total the order reports. Asserted in the specs. */
-export function totalsAgree(totals) {
-    return totals.subtotal + totals.fees + totals.tax - totals.discount === totals.total;
-}
+export { errorMessage, formatDate, formatDateTime, formatPrice, isAuthError, orderCustomerEmail, orderEventName, orderTotals, resolveOccurrence, statusLabel, statusTone, ticketCount, ticketItems, totalsAgree, } from '@ticketlayer/elements-core';

package/dist/collection/utils/testing/deep-text.js

@@ -0,0 +1,29 @@
+/**
+ * The text an element actually shows, shadow roots included.
+ *
+ * `textContent` stops at a shadow boundary, and every element here renders
+ * into one (and several compose others: `tl-cart-drawer` holds a `tl-cart`,
+ * `tl-order-tickets` a grid of `tl-ticket`). A check that an element rendered
+ * something has to see through that, or it reads an empty string from an
+ * element that is perfectly full.
+ *
+ * Used by the stories' `expectRendered` in the browser and by
+ * story-coverage.spec.tsx in jsdom, so both are asking the same question.
+ */
+export function deepText(node) {
+    if (!node)
+        return '';
+    const parts = [];
+    const walk = (current) => {
+        if (current.nodeType === 3) {
+            parts.push(current.nodeValue ?? '');
+            return;
+        }
+        const shadow = current.shadowRoot;
+        if (shadow)
+            walk(shadow);
+        current.childNodes.forEach(walk);
+    };
+    walk(node);
+    return parts.join(' ').replace(/\s+/g, ' ').trim();
+}

package/dist/collection/utils/testing/fixtures.js

@@ -0,0 +1,290 @@
+export const FIXTURE_CUSTOMER = {
+    id: 'cus_ada',
+    email: 'ada@example.com',
+    firstName: 'Ada',
+    lastName: 'Lovelace',
+};
+/** `events.list` items, i.e. what a card is handed by `tl-event-list`. */
+export const FIXTURE_EVENT_CARDS = [
+    {
+        id: 'evt_midnight',
+        name: 'Midnight Quartet',
+        shortDescription: 'Late night strings in the Old Hall',
+        availabilityStatus: 'available',
+        venue: { id: 'ven_old_hall', name: 'The Old Hall', city: 'Bristol' },
+        nextOccurrence: { startsAt: '2030-06-14T19:30:00Z' },
+    },
+    {
+        id: 'evt_gala',
+        name: 'Summer Gala',
+        shortDescription: 'The season closes with the full orchestra',
+        availabilityStatus: 'limited',
+        venue: { id: 'ven_pavilion', name: 'Riverside Pavilion', city: 'Bath' },
+        nextOccurrence: { startsAt: '2030-07-05T18:00:00Z' },
+    },
+    {
+        id: 'evt_lates',
+        name: 'Gallery Lates',
+        shortDescription: 'Music after hours among the paintings',
+        availabilityStatus: 'sold_out',
+        venue: { id: 'ven_gallery', name: 'City Gallery', city: 'Bristol' },
+        nextOccurrence: { startsAt: '2030-08-02T20:00:00Z' },
+    },
+];
+/** The occurrences of `evt_midnight`: enough dates for the calendar view. */
+const MIDNIGHT_OCCURRENCES = [
+    {
+        id: 'evoc_1',
+        startsAt: '2030-06-14T19:30:00Z',
+        endsAt: '2030-06-14T21:30:00Z',
+        availabilityStatus: 'available',
+        availableCapacity: 120,
+    },
+    {
+        id: 'evoc_2',
+        startsAt: '2030-06-15T19:30:00Z',
+        endsAt: '2030-06-15T21:30:00Z',
+        availabilityStatus: 'available',
+        availableCapacity: 40,
+    },
+    {
+        id: 'evoc_3',
+        startsAt: '2030-06-21T19:30:00Z',
+        endsAt: '2030-06-21T21:30:00Z',
+        availabilityStatus: 'sold_out',
+        availableCapacity: 0,
+    },
+];
+/** `events.get` details, keyed by event id. */
+export const FIXTURE_EVENT_DETAILS = {
+    evt_midnight: {
+        id: 'evt_midnight',
+        name: 'Midnight Quartet',
+        status: 'on_sale',
+        shortDescription: 'Late night strings in the Old Hall',
+        venueId: 'ven_old_hall',
+        venueName: 'The Old Hall',
+        venueCity: 'Bristol',
+        occurrences: MIDNIGHT_OCCURRENCES,
+    },
+    evt_gala: {
+        id: 'evt_gala',
+        name: 'Summer Gala',
+        status: 'on_sale',
+        shortDescription: 'The season closes with the full orchestra',
+        venueId: 'ven_pavilion',
+        venueName: 'Riverside Pavilion',
+        venueCity: 'Bath',
+        occurrences: [
+            {
+                id: 'evoc_gala',
+                startsAt: '2030-07-05T18:00:00Z',
+                endsAt: '2030-07-05T22:00:00Z',
+                availabilityStatus: 'available',
+                availableCapacity: 300,
+            },
+        ],
+    },
+};
+/** `events.getTicketTypes` for `evoc_1`. */
+export const FIXTURE_TICKET_TYPES = [
+    {
+        id: 'tkt_adult',
+        occurrenceId: 'evoc_1',
+        name: 'Adult',
+        description: 'Standing, unreserved',
+        price: 2500,
+        currency: 'GBP',
+        availableQuantity: 120,
+        maxPerOrder: 6,
+        minPerOrder: 0,
+        availabilityStatus: 'available',
+        sortOrder: 1,
+    },
+    {
+        id: 'tkt_concession',
+        occurrenceId: 'evoc_1',
+        name: 'Concession',
+        description: 'Students and over 65s',
+        price: 1500,
+        currency: 'GBP',
+        availableQuantity: 20,
+        maxPerOrder: 4,
+        minPerOrder: 0,
+        availabilityStatus: 'limited',
+        sortOrder: 2,
+    },
+    {
+        id: 'tkt_gallery',
+        occurrenceId: 'evoc_1',
+        name: 'Gallery',
+        description: 'Seated, upper level',
+        price: 4000,
+        currency: 'GBP',
+        availableQuantity: 0,
+        maxPerOrder: 4,
+        minPerOrder: 0,
+        availabilityStatus: 'sold_out',
+        sortOrder: 3,
+    },
+];
+/** A cart with lines, a fee the surface quoted and a discount. */
+export const FIXTURE_CART = {
+    items: [
+        {
+            id: 'ci_adult',
+            ticketTypeId: 'tkt_adult',
+            ticketTypeName: 'Adult',
+            eventName: 'Midnight Quartet',
+            occurrenceDate: '2030-06-14T19:30:00Z',
+            quantity: 2,
+            unitPrice: 2500,
+            totalPrice: 5000,
+            subtotal: 5000,
+            currency: 'GBP',
+        },
+        {
+            id: 'ci_concession',
+            ticketTypeId: 'tkt_concession',
+            ticketTypeName: 'Concession',
+            eventName: 'Midnight Quartet',
+            occurrenceDate: '2030-06-14T19:30:00Z',
+            quantity: 1,
+            unitPrice: 1500,
+            totalPrice: 1500,
+            subtotal: 1500,
+            currency: 'GBP',
+        },
+    ],
+    itemCount: 3,
+    subtotal: 6500,
+    fees: 325,
+    discount: 500,
+    total: 6325,
+    hasFees: true,
+    feeLabel: 'Booking fee',
+    currency: 'GBP',
+};
+/** An empty cart, for the states an element only reaches with nothing in it. */
+export const FIXTURE_EMPTY_CART = {
+    items: [],
+    itemCount: 0,
+    subtotal: 0,
+    fees: 0,
+    discount: 0,
+    total: 0,
+    hasFees: false,
+    feeLabel: null,
+    currency: 'GBP',
+};
+/** Passes on the order: what `tl-ticket` renders and `tl-order-tickets` grids. */
+export const FIXTURE_TICKETS = [
+    {
+        id: 'pas_adult_1',
+        barcode: 'TLQ-3H7K-9F2D-0001',
+        type: 'ticket',
+        status: 'active',
+        holderName: 'Ada Lovelace',
+        name: 'Adult - Midnight Quartet',
+        admissionStatus: 'not_redeemed',
+        eventOccurrenceId: 'evoc_1',
+        seatLabel: 'Stalls C12',
+    },
+    {
+        id: 'pas_adult_2',
+        barcode: 'TLQ-3H7K-9F2D-0002',
+        type: 'ticket',
+        status: 'active',
+        holderName: 'Ada Lovelace',
+        name: 'Adult - Midnight Quartet',
+        admissionStatus: 'fully_redeemed',
+        eventOccurrenceId: 'evoc_1',
+        seatLabel: 'Stalls C13',
+    },
+];
+export const FIXTURE_ORDER = {
+    id: 'ord_midnight',
+    orderNumber: 'ORD-MQ7841',
+    status: 'confirmed',
+    paymentStatus: 'paid',
+    currency: 'GBP',
+    items: [
+        {
+            name: 'Midnight Quartet - Adult',
+            description: null,
+            type: 'ticket',
+            quantity: 2,
+            unitPrice: 2500,
+            subtotal: 5000,
+        },
+        { name: 'Booking fee', description: null, type: 'fee', quantity: 1, unitPrice: 250, subtotal: 250 },
+    ],
+    subtotal: 5000,
+    totalFees: 250,
+    totalTax: 0,
+    total: 5250,
+    tickets: FIXTURE_TICKETS,
+    expiresAt: null,
+    createdAt: '2030-05-02T10:15:00Z',
+};
+const OLDER_ORDER = {
+    id: 'ord_gala',
+    orderNumber: 'ORD-SG1290',
+    status: 'confirmed',
+    paymentStatus: 'paid',
+    currency: 'GBP',
+    items: [
+        {
+            name: 'Summer Gala - Concession',
+            description: null,
+            type: 'ticket',
+            quantity: 1,
+            unitPrice: 1500,
+            subtotal: 1500,
+        },
+    ],
+    subtotal: 1500,
+    totalFees: 0,
+    totalTax: 0,
+    total: 1500,
+    tickets: [],
+    expiresAt: null,
+    createdAt: '2030-04-11T09:00:00Z',
+};
+export const FIXTURE_ORDERS = [FIXTURE_ORDER, OLDER_ORDER];
+/** The managers every dataset shares: the channel's catalogue and its orders. */
+const catalogue = {
+    events: {
+        list: async () => ({ items: FIXTURE_EVENT_CARDS }),
+        get: async (id) => FIXTURE_EVENT_DETAILS[id] ?? FIXTURE_EVENT_DETAILS.evt_midnight,
+        getTicketTypes: async () => FIXTURE_TICKET_TYPES,
+    },
+    orders: {
+        mine: async () => FIXTURE_ORDERS,
+        get: async (orderId) => FIXTURE_ORDERS.find((o) => o.id === orderId) ?? FIXTURE_ORDER,
+        ticketPdf: async () => new Blob(['%PDF-1.4 fixture'], { type: 'application/pdf' }),
+    },
+    presale: {
+        redeem: async () => ({ benefit: 'Presale unlocked', alreadyHeld: false }),
+    },
+};
+/**
+ * The datasets a story may ask for by name, through
+ * `parameters.ticketlayer.dataset`. Keep the set small: a dataset is a state
+ * of the whole channel, not a per-element fixture.
+ */
+export const FIXTURE_DATASETS = {
+    /** Signed in, three events on sale, a cart with lines and two orders. */
+    default: {
+        ...catalogue,
+        cart: { get: async () => FIXTURE_CART },
+        authState: { customer: FIXTURE_CUSTOMER, authenticated: true },
+    },
+    /** Nobody signed in and nothing in the cart. */
+    'signed-out': {
+        ...catalogue,
+        cart: { get: async () => FIXTURE_EMPTY_CART },
+        authState: { customer: null, authenticated: false },
+    },
+};
+export const FIXTURE_DATASET_NAMES = Object.keys(FIXTURE_DATASETS);

package/dist/collection/utils/testing/mock-sdk.js

@@ -58,17 +58,28 @@ export function createMockSDK(opts = {}) {
         redeem: async () => ({ benefit: 'presale.test', alreadyHeld: false }),
         ...opts.presale,
     };
+    const modalCalls = [];
     const sdk = {
         getEventsManager: () => eventsManager,
         getCartManager: () => cartManager,
         getOrdersManager: () => ordersManager,
         on,
         off,
-        event: () => ({ openModal: () => undefined }),
-        checkout: { openModal: () => undefined, closeModal: () => undefined },
+        event: (eventId) => ({
+            openModal: (options = {}) => {
+                modalCalls.push({ kind: 'event', eventId, options });
+            },
+        }),
+        checkout: {
+            openModal: (options = {}) => {
+                modalCalls.push({ kind: 'checkout', options });
+            },
+            closeModal: () => undefined,
+        },
         closeModal: () => undefined,
         emit,
         authState,
+        modalCalls,
     };
     if (!opts.withoutAuth)
         sdk.getAuthManager = () => authManager;

package/dist/collection/utils/web-query.js

@@ -0,0 +1,12 @@
+export const webQuery = {
+    get(name) {
+        if (typeof window === 'undefined' || !window.location?.search)
+            return null;
+        try {
+            return new URLSearchParams(window.location.search).get(name);
+        }
+        catch {
+            return null;
+        }
+    },
+};

package/dist/collection/utils/web-storage.js

@@ -0,0 +1,22 @@
+export const webStorage = {
+    get(key) {
+        if (typeof window === 'undefined')
+            return null;
+        try {
+            return window.localStorage.getItem(key);
+        }
+        catch {
+            return null;
+        }
+    },
+    set(key, value) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(key, value);
+        }
+        catch {
+            // localStorage may be unavailable.
+        }
+    },
+};