@ticketlayer/elements-core 0.1.0 → 0.2.0

package/dist/esm/cores/cart-drawer.js

@@ -0,0 +1,119 @@
+/**
+ * `tl-cart-drawer`: the off-canvas panel the cart slides into.
+ *
+ * It owns no cart of its own - the panel embeds `tl-cart` - so what is here is
+ * the open/closed rule and the two bus intents it listens for, bound inside its
+ * own `mount` and unbound by the teardown (TKT-197).
+ *
+ * Two ways in, and they are not the same, which is the subtlety this core has
+ * to keep: an intent, the backdrop, the close button and Escape all go through
+ * `setOpen`, which announces the change with `tlOpen` or `tlClose`. The host
+ * setting the `open` prop goes through `openChanged`, which does not: the
+ * component's `@Watch('open')` moved the panel without emitting, and a host
+ * that drove the drawer and also listened would otherwise start hearing its
+ * own writes back.
+ *
+ * The subscription is the client's bus and not the cart manager's: these are
+ * UI intents, which `@ticketlayer/live` relays untouched, and nothing here
+ * reads the cart.
+ */
+import { defineElement } from '../define.js';
+/** What opens the drawer, and what closes it. Relayed on the client's bus. */
+export const OPEN_INTENT = 'ui:cart-requested';
+export const CLOSE_INTENT = 'ui:modal-close-requested';
+const STRINGS = {
+    close: 'Close cart',
+    privacy: 'Privacy Policy',
+    privacyHref: 'https://ticketlayer.com/privacy',
+    reportAbuse: 'Report Abuse',
+    reportAbuseHref: 'https://ticketlayer.com/report-abuse',
+    poweredBy: 'Powered by',
+    brand: 'ticketlayer',
+    brandHref: 'https://ticketlayer.com',
+};
+export const cartDrawerCore = defineElement({
+    tag: 'tl-cart-drawer',
+    docs: 'A slide-in panel holding the cart, opened by the cart intent on the client bus.',
+    category: 'cart',
+    runtimes: ['web'],
+    tokens: ['background', 'border', 'font-family', 'foreground', 'muted', 'muted-foreground'],
+    sdkMethods: ['client.on'],
+    props: {
+        side: {
+            type: 'string',
+            tsType: '"left" | "right"',
+            attr: 'side',
+            default: 'right',
+            docs: 'Edge the panel slides in from.',
+        },
+        heading: {
+            type: 'string',
+            attr: 'heading',
+            default: 'Your cart',
+            docs: 'Heading shown at the top of the panel.',
+        },
+        open: {
+            type: 'boolean',
+            attr: 'open',
+            default: false,
+            docs: 'Controlled open state (also driven by the `ui:cart-requested` intent).',
+        },
+    },
+    events: {
+        tlOpen: { detail: 'void', docs: '' },
+        tlClose: { detail: 'void', docs: '' },
+    },
+    strings: STRINGS,
+    statuses: ['open', 'closed'],
+    state: (props) => ({ visible: props.open }),
+    /**
+     * On screen: take the `open` prop as it stands, then listen for the intents.
+     *
+     * Taking the prop again is what the component's `connectedCallback` did, and
+     * it matters here for a second reason: an instance is built before a harness
+     * has read its attributes, so the state a constructor could see is the
+     * default rather than the host's.
+     */
+    mount: (ctx) => {
+        ctx.actions.openChanged(ctx.props.open);
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                // No client, no intents. The drawer still opens from its `open` prop.
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const offOpen = client.on?.(OPEN_INTENT, () => ctx.actions.setOpen(true));
+            if (typeof offOpen === 'function')
+                ctx.onTeardown(offOpen);
+            const offClose = client.on?.(CLOSE_INTENT, () => ctx.actions.setOpen(false));
+            if (typeof offClose === 'function')
+                ctx.onTeardown(offClose);
+        })();
+    },
+    status: ({ state }) => (state.visible ? 'open' : 'closed'),
+    derive: ({ state, props }) => ({
+        visible: state.visible,
+        sideClass: `panel--${props.side}`,
+        ariaHidden: state.visible ? 'false' : 'true',
+    }),
+    actions: (ctx) => ({
+        /** Open or close, and say so. Asking for the state it is already in is nothing. */
+        setOpen(open) {
+            if (ctx.state.visible === open)
+                return;
+            ctx.setState({ visible: open });
+            ctx.emit(open ? 'tlOpen' : 'tlClose', undefined);
+        },
+        /** The host moved the `open` prop. Follow it, and stay quiet about it. */
+        openChanged(open) {
+            if (ctx.state.visible === open)
+                return;
+            ctx.setState({ visible: open });
+        },
+    }),
+});

package/dist/esm/cores/cart.d.ts

@@ -0,0 +1,105 @@
+import { type TlTotals } from '../money.js';
+export interface TlCartItem {
+    id: string;
+    ticketTypeId: string;
+    ticketTypeName: string;
+    eventName: string;
+    occurrenceDate: string;
+    quantity: number;
+    unitPrice: number;
+    totalPrice: number;
+    currency: string;
+}
+export interface TlCartData {
+    items: TlCartItem[];
+    subtotal: number;
+    /** Booking fee, minor units. 0 when the surface reports none. */
+    fees: number;
+    /** Discount as a positive magnitude, minor units. */
+    discount?: number;
+    total: number;
+    currency: string;
+    itemCount: number;
+    /** Whether the response expressed a fee at all (see money.ts). */
+    hasFees?: boolean;
+    /** The channel fee profile's label, when the response carries one. */
+    feeLabel?: string | null;
+    itemsSubtotal?: number;
+    totalFees?: number;
+    totalDiscounts?: number;
+}
+export interface CartProps {
+    showCheckoutButton: boolean;
+    checkoutLabel: string;
+    showRemoveButtons: boolean;
+    compact: boolean;
+}
+export interface CartState {
+    cart: TlCartData | null;
+    loading: boolean;
+    /**
+     * The last failure, which nothing renders.
+     *
+     * The component held an `error` it never put on screen: a failed read leaves
+     * the empty cart showing and says so through `tlError`, and that is the
+     * behaviour kept here rather than quietly improved. It is state and not a
+     * status for the same reason.
+     */
+    error: string | null;
+    removingItemId: string | null;
+}
+export interface CartRow {
+    id: string;
+    name: string;
+    eventName: string;
+    /** The occurrence, formatted, or null when there is nothing to show. */
+    dateLabel: string | null;
+    quantityLabel: string;
+    priceLabel: string;
+    removing: boolean;
+    showEvent: boolean;
+    showDate: boolean;
+}
+export interface CartDerived {
+    rows: CartRow[];
+    totals: TlTotals;
+    subtotalLabel: string;
+    feeAmountLabel: string;
+    discountLabel: string;
+    totalLabel: string;
+    showSubtotalRow: boolean;
+    showFeeRow: boolean;
+    showDiscountRow: boolean;
+    checkoutDisabled: boolean;
+}
+export type CartStatus = 'loading' | 'empty' | 'ready';
+declare const STRINGS: {
+    emptyTitle: string;
+    emptyMessage: string;
+    subtotalRow: string;
+    discountRow: string;
+    totalRow: string;
+    removeItem: string;
+    quantityPrefix: string;
+    loadFailed: string;
+    removeFailed: string;
+};
+export type CartStrings = typeof STRINGS;
+export declare const cartCore: import("../define.js").ElementCore<CartProps, CartState, CartDerived, {
+    load(): Promise<void>;
+    cartUpdated(cart: TlCartData): void;
+    removeItem(itemId: string): Promise<void>;
+    checkout(): void;
+    connectFailed(message: string): void;
+}, CartStatus, {
+    emptyTitle: string;
+    emptyMessage: string;
+    subtotalRow: string;
+    discountRow: string;
+    totalRow: string;
+    removeItem: string;
+    quantityPrefix: string;
+    loadFailed: string;
+    removeFailed: string;
+}>;
+export {};

package/dist/esm/cores/cart.js

@@ -0,0 +1,244 @@
+/**
+ * `tl-cart`: the cart as a list of lines, its money rows and a checkout button.
+ *
+ * The first core that lives on a subscription. It reads the cart once when a
+ * harness mounts it and then keeps itself current from the client's
+ * `cart:updated` bus, binding that subscription inside its own `mount` and
+ * handing the unsubscribe to `ctx.onTeardown` (TKT-197). No harness owns a
+ * subscription any more, on any runtime, and a remount cannot leave two
+ * behind: `createElement` keeps at most one mount live.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter:
+ * the same money rows through `cartTotals`, the same compact mode, the same
+ * silence when the host published no client, the same events in the same
+ * order. What did not come across is the `console.log` tracing, which a library
+ * should not do for its host.
+ */
+import { defineElement } from '../define.js';
+import { cartTotals } from '../money.js';
+const STRINGS = {
+    emptyTitle: 'Your cart is empty',
+    emptyMessage: 'Add tickets to get started',
+    subtotalRow: 'Subtotal',
+    discountRow: 'Discount',
+    totalRow: 'Total',
+    removeItem: 'Remove item',
+    quantityPrefix: 'Qty: ',
+    loadFailed: 'Failed to load cart',
+    removeFailed: 'Failed to remove item',
+};
+/**
+ * The occurrence date, as the component formatted it.
+ *
+ * `en-GB` is written here rather than taken from the instance's locale because
+ * that is what the component did, and this split is behaviour-identical. There
+ * is no locale on the view context today; `formatMoney` closes over one and
+ * nothing else does.
+ */
+function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+export const cartCore = defineElement({
+    tag: 'tl-cart',
+    docs: "The buyer's cart: its lines, the money rows the surface reported and a checkout button.",
+    category: 'cart',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'error-bg',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'radius-sm',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'spacing-8',
+    ],
+    sdkMethods: ['cart.get', 'cart.on', 'cart.removeItem'],
+    props: {
+        showCheckoutButton: {
+            type: 'boolean',
+            attr: 'show-checkout-button',
+            default: true,
+            docs: 'Show checkout button',
+        },
+        checkoutLabel: {
+            type: 'string',
+            attr: 'checkout-label',
+            default: 'Checkout',
+            docs: 'Checkout button label',
+        },
+        showRemoveButtons: {
+            type: 'boolean',
+            attr: 'show-remove-buttons',
+            default: true,
+            docs: 'Show remove item buttons',
+        },
+        compact: { type: 'boolean', attr: 'compact', default: false, docs: 'Compact mode - hides some details' },
+    },
+    events: {
+        tlCheckout: { detail: '{ cart: TlCartData; }', docs: 'Emitted when checkout is clicked' },
+        tlItemRemoved: { detail: '{ itemId: string; }', docs: 'Emitted when item is removed' },
+        tlCartUpdated: { detail: '{ cart: TlCartData; }', docs: 'Emitted when cart is updated' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted on error' },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'empty', 'ready'],
+    state: () => ({ cart: null, loading: true, error: null, removingItemId: null }),
+    /**
+     * On screen: wait for the host's client, subscribe to the cart, then read it.
+     *
+     * Subscribing before the read is deliberate. The component started both at
+     * once (`componentWillLoad` read, `componentDidLoad` subscribed) and so could
+     * miss an update that landed mid-read; going first closes that window
+     * without changing anything a host can see.
+     *
+     * The subscription is the cart manager's and not the client's: the connector
+     * adapts the payload on the cart manager's bus and passes it through
+     * untouched on the client's, and this element renders the adapted figures.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed(err instanceof Error ? err.message : ctx.strings.loadFailed);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const manager = client.getCartManager?.();
+            const off = manager?.on?.('cart:updated', (data) => {
+                ctx.actions.cartUpdated(data);
+            });
+            if (typeof off === 'function')
+                ctx.onTeardown(off);
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state }) => state.loading ? 'loading' : !state.cart || state.cart.items.length === 0 ? 'empty' : 'ready',
+    derive: (ctx) => {
+        const { state, strings, props, formatMoney } = ctx;
+        // Money comes from the response through cartTotals: the fee row is shown
+        // when the surface expressed a fee, and the total is the server's figure,
+        // never a sum taken here.
+        const totals = cartTotals(state.cart);
+        const currency = totals.currency;
+        const items = state.cart?.items ?? [];
+        return {
+            rows: items.map((item) => ({
+                id: item.id,
+                name: item.ticketTypeName,
+                eventName: item.eventName,
+                dateLabel: item.occurrenceDate ? formatDate(item.occurrenceDate) : null,
+                quantityLabel: `${strings.quantityPrefix}${item.quantity}`,
+                priceLabel: formatMoney(item.totalPrice, item.currency),
+                removing: state.removingItemId === item.id,
+                showEvent: !props.compact,
+                showDate: !props.compact && !!item.occurrenceDate,
+            })),
+            totals,
+            subtotalLabel: formatMoney(totals.subtotal, currency),
+            feeAmountLabel: formatMoney(totals.fees, currency),
+            discountLabel: formatMoney(totals.discount, currency),
+            totalLabel: formatMoney(totals.total, currency),
+            showSubtotalRow: !props.compact,
+            showFeeRow: totals.showFee && !props.compact,
+            showDiscountRow: totals.discount > 0 && !props.compact,
+            checkoutDisabled: items.length === 0,
+        };
+    },
+    actions: (ctx) => ({
+        /** Read the cart as it stands. */
+        async load() {
+            try {
+                ctx.setState({ loading: true, error: null });
+                const manager = ctx.optionalClient()?.getCartManager?.();
+                if (manager) {
+                    // Bound rather than called optionally: a connector that carries a
+                    // cart manager without a `get` is broken, and the component said so
+                    // through tlError rather than rendering an empty cart.
+                    const read = manager.get?.bind(manager);
+                    if (!read)
+                        throw new TypeError('cartManager.get is not a function');
+                    ctx.setState({ cart: ((await read()) ?? null) });
+                }
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.loadFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /** The cart changed under us. Show it, and tell the host. */
+        cartUpdated(cart) {
+            ctx.setState({ cart });
+            ctx.emit('tlCartUpdated', { cart });
+        },
+        /**
+         * Take one line out of the cart. With no client at all, nothing happens
+         * and nothing is announced: the buyer's click is simply inert, which is
+         * what it was before.
+         */
+        async removeItem(itemId) {
+            if (!ctx.optionalClient())
+                return;
+            ctx.setState({ removingItemId: itemId });
+            try {
+                const manager = ctx.client().getCartManager?.();
+                if (manager) {
+                    const remove = manager.removeItem?.bind(manager);
+                    if (!remove)
+                        throw new TypeError('cartManager.removeItem is not a function');
+                    await remove(itemId);
+                    ctx.emit('tlItemRemoved', { itemId });
+                }
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.removeFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ removingItemId: null });
+            }
+        },
+        /** Hand the cart to whatever the host does next. An empty cart says nothing. */
+        checkout() {
+            const cart = ctx.state.cart;
+            if (cart && cart.items.length > 0)
+                ctx.emit('tlCheckout', { cart });
+        },
+        /**
+         * The host never produced a client. Announced, because the component
+         * announced it: the read and the wait were one try block, so a page that
+         * never started Live emitted tlError.
+         */
+        connectFailed(message) {
+            const text = message || ctx.strings.loadFailed;
+            ctx.setState({ error: text, loading: false });
+            ctx.emit('tlError', { message: text });
+        },
+    }),
+});

package/dist/esm/cores/checkout-wrapper.d.ts

@@ -0,0 +1,22 @@
+export interface CheckoutWrapperProps {
+    disabled: boolean;
+}
+/** Nothing: the cart and the modal both belong to the client. */
+export type CheckoutWrapperState = Record<string, never>;
+export interface CheckoutWrapperDerived {
+    /** Whether a press should do anything. The harness draws the rest from it. */
+    interactive: boolean;
+}
+export type CheckoutWrapperStatus = 'ready' | 'disabled';
+declare const STRINGS: {
+    noClient: string;
+    notAvailable: string;
+};
+export type CheckoutWrapperStrings = typeof STRINGS;
+export declare const checkoutWrapperCore: import("../define.js").ElementCore<CheckoutWrapperProps, CheckoutWrapperState, CheckoutWrapperDerived, {
+    activate(): void;
+}, CheckoutWrapperStatus, {
+    noClient: string;
+    notAvailable: string;
+}>;
+export {};

package/dist/esm/cores/checkout-wrapper.js

@@ -0,0 +1,72 @@
+/**
+ * `tl-checkout-wrapper`: the same idea as `tl-buy-tickets-wrapper`, pointed at
+ * the checkout rather than at one event.
+ *
+ * Whatever the host slots in becomes the thing that opens the checkout modal
+ * for the cart as it stands, so this core takes no subject at all: the cart is
+ * the client's, and the modal is the client's.
+ *
+ * It was blocked from being split by the same thing its sibling was - events
+ * named `tl-complete`, `tl-error` and `tl-close`, which `defineElement`
+ * refuses - and is unblocked by the same rename to `tlComplete`, `tlError` and
+ * `tlClose` (TKT-203).
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * `tlError` a click announces when no client has been published; the
+ * `console.error` beside it did not come across, for the reason `tl-cart` and
+ * `tl-promo-code` dropped theirs.
+ */
+import { defineElement } from '../define.js';
+const STRINGS = {
+    noClient: 'SDK not initialized',
+    notAvailable: 'Checkout is not available',
+};
+export const checkoutWrapperCore = defineElement({
+    tag: 'tl-checkout-wrapper',
+    docs: 'Wrap any content and open the checkout modal when it is activated.',
+    category: 'checkout',
+    runtimes: ['web'],
+    tokens: ['radius-sm', 'ring'],
+    sdkMethods: ['checkout.openModal'],
+    props: {
+        disabled: {
+            type: 'boolean',
+            attr: 'disabled',
+            default: false,
+            docs: 'Whether the wrapper is disabled',
+        },
+    },
+    events: {
+        // `OrderResult` because that is the name the web harness writes; see
+        // `buy-tickets-wrapper.ts`.
+        tlComplete: { detail: 'OrderResult', docs: 'Emitted when checkout completes successfully' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when an error occurs' },
+        tlClose: { detail: 'void', docs: 'Emitted when the modal closes' },
+    },
+    strings: STRINGS,
+    statuses: ['ready', 'disabled'],
+    state: () => ({}),
+    status: ({ props }) => (props.disabled ? 'disabled' : 'ready'),
+    derive: ({ props }) => ({ interactive: !props.disabled }),
+    actions: (ctx) => ({
+        /** A click, a tap, Enter or Space: whatever the harness calls a press. */
+        activate() {
+            if (ctx.props.disabled)
+                return;
+            const client = ctx.optionalClient();
+            if (!client) {
+                ctx.emit('tlError', { message: ctx.strings.noClient });
+                return;
+            }
+            if (!client.checkout) {
+                ctx.emit('tlError', { message: ctx.strings.notAvailable });
+                return;
+            }
+            client.checkout.openModal({
+                onComplete: (order) => ctx.emit('tlComplete', order),
+                onError: (err) => ctx.emit('tlError', { message: err.message }),
+                onClose: () => ctx.emit('tlClose', undefined),
+            });
+        },
+    }),
+});

package/dist/esm/cores/event-card.d.ts

@@ -0,0 +1,80 @@
+export interface TlEventCardEvent {
+    id: string;
+    name: string;
+    slug?: string;
+    description?: string;
+    shortDescription?: string;
+    imageUrl?: string;
+    thumbnailUrl?: string;
+    category?: string;
+    venue?: {
+        id: string;
+        name: string;
+        city: string;
+    };
+    nextOccurrence?: {
+        startsAt: string;
+    };
+    availabilityStatus: 'available' | 'limited' | 'sold_out';
+}
+/** The sales event detail (events manager get) as the card reads it. */
+export interface EventDetailLike {
+    id: string;
+    name: string;
+    status?: string;
+    shortDescription?: string | null;
+    imageUrl?: string | null;
+    venueId?: string | null;
+    venueName?: string | null;
+    venueCity?: string | null;
+    occurrences?: Array<{
+        id: string;
+        startsAt?: string | null;
+        status?: string;
+    }>;
+}
+/**
+ * Adapt an event detail to the card shape. The list adapter lives in the SDK
+ * connector; this one is the card's own, and it is behaviour, so it is here.
+ */
+export declare function toEventCardEvent(detail: EventDetailLike): TlEventCardEvent;
+export interface EventCardProps {
+    event?: TlEventCardEvent;
+    eventId?: string;
+}
+export interface EventCardState {
+    loadedEvent: TlEventCardEvent | null;
+    loading: boolean;
+    error: string | null;
+}
+export interface EventCardDerived {
+    /** The event the card is showing: the prop when there is one, else what it read. */
+    event: TlEventCardEvent | null;
+    /** The card's image, thumbnail first, or null when it has none. */
+    image: string | null;
+    statusBadgeClass: string;
+    statusLabel: string;
+    dateLabel: string | null;
+    venueLabel: string | null;
+}
+export type EventCardStatus = 'loading' | 'error' | 'empty' | 'ready';
+declare const STRINGS: {
+    available: string;
+    limited: string;
+    soldOut: string;
+    notFound: string;
+    loadFailed: string;
+};
+export type EventCardStrings = typeof STRINGS;
+export declare const eventCardCore: import("../define.js").ElementCore<EventCardProps, EventCardState, EventCardDerived, {
+    load(): Promise<void>;
+    loadFailed(message: string): void;
+    click(): void;
+}, EventCardStatus, {
+    available: string;
+    limited: string;
+    soldOut: string;
+    notFound: string;
+    loadFailed: string;
+}>;
+export {};