@ticketlayer/elements-core 0.1.0 → 0.2.0

package/dist/esm/cores/event-card.js

@@ -0,0 +1,205 @@
+/**
+ * `tl-event-card`: one event, as a card.
+ *
+ * Two ways to fill it, which is the whole of its behaviour: a host hands it an
+ * event through the `event` prop (that is what `tl-event-list` does), or it is
+ * given an `eventId` and reads the event itself. The prop wins, and a card that
+ * has one never touches the client.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter,
+ * including the status badge's three labels and the `en-GB` date. What did not
+ * come across is the `console.log` tracing, which a library should not do for
+ * its host.
+ */
+import { defineElement } from '../define.js';
+/**
+ * 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 function toEventCardEvent(detail) {
+    const occurrences = detail.occurrences ?? [];
+    const starts = occurrences
+        .map((o) => o.startsAt)
+        .filter((s) => !!s)
+        .sort();
+    const now = Date.now();
+    const next = starts.find((s) => new Date(s).getTime() >= now) ?? starts[0];
+    const soldOut = detail.status === 'sold_out' ||
+        (occurrences.length > 0 && occurrences.every((o) => o.status === 'sold_out'));
+    return {
+        id: detail.id,
+        name: detail.name,
+        ...(detail.shortDescription ? { shortDescription: detail.shortDescription } : {}),
+        ...(detail.imageUrl ? { imageUrl: detail.imageUrl } : {}),
+        ...(detail.venueName
+            ? { venue: { id: detail.venueId ?? '', name: detail.venueName, city: detail.venueCity ?? '' } }
+            : {}),
+        ...(next ? { nextOccurrence: { startsAt: next } } : {}),
+        availabilityStatus: soldOut ? 'sold_out' : 'available',
+    };
+}
+const STRINGS = {
+    available: 'Available',
+    limited: 'Limited',
+    soldOut: 'Sold Out',
+    notFound: 'Event not found',
+    loadFailed: 'Failed to load event',
+};
+/** As the component formatted it. See the note on the cart core's date. */
+function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+export const eventCardCore = defineElement({
+    tag: 'tl-event-card',
+    docs: 'One event as a card: its image, name, next date, venue and how it is selling.',
+    category: 'discovery',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'error',
+        'error-foreground',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'radius-lg',
+        'radius-sm',
+        'secondary',
+        'spacing-4',
+        'success',
+        'success-foreground',
+        'warning',
+        'warning-foreground',
+    ],
+    sdkMethods: ['events.get'],
+    props: {
+        event: {
+            type: 'object',
+            tsType: 'TlEventCardEvent | undefined',
+            attr: null,
+            docs: 'Event data to display (tl-event-list passes this)',
+        },
+        eventId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'event-id',
+            docs: 'Load the event from the SDK by id when no `event` is given, so a single\ncard works standalone (e.g. on a Webflow page).',
+        },
+    },
+    events: {
+        tlClick: { detail: '{ eventId: string; }', docs: 'Emitted when the card is clicked' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when the event could not be loaded by id' },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'error', 'empty', 'ready'],
+    state: () => ({ loadedEvent: null, loading: false, error: null }),
+    /**
+     * On screen: read the event, but only when there is one to read and nobody
+     * has handed us the event already.
+     *
+     * `loading` is set here, synchronously, rather than inside the read. The
+     * component awaited its load in `componentWillLoad`, so its first paint was
+     * already past it; a mount hook cannot hold the first paint, so the card
+     * shows its own skeleton instead of a blank. That is the same change
+     * `tl-ticket-selector` took when it moved onto the hook (TKT-197).
+     */
+    mount: (ctx) => {
+        if (ctx.props.event || !ctx.props.eventId)
+            return;
+        ctx.setState({ loading: true, error: null });
+        void (async () => {
+            try {
+                await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.loadFailed(err instanceof Error && err.message ? err.message : ctx.strings.loadFailed);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state, props }) => state.loading ? 'loading' : state.error ? 'error' : props.event || state.loadedEvent ? 'ready' : 'empty',
+    derive: ({ state, props, strings }) => {
+        const event = props.event ?? state.loadedEvent;
+        const badge = (suffix) => `status-badge ${suffix}`;
+        const status = event?.availabilityStatus;
+        return {
+            event,
+            // The sales surface exposes a single `imageUrl` (card/listing
+            // thumbnail); `thumbnailUrl` is an accepted alias if a host ever
+            // supplies a distinct one.
+            image: event ? event.thumbnailUrl || event.imageUrl || null : null,
+            statusBadgeClass: status === 'available'
+                ? badge('status-available')
+                : status === 'limited'
+                    ? badge('status-limited')
+                    : status === 'sold_out'
+                        ? badge('status-sold-out')
+                        : 'status-badge',
+            statusLabel: status === 'available'
+                ? strings.available
+                : status === 'limited'
+                    ? strings.limited
+                    : status === 'sold_out'
+                        ? strings.soldOut
+                        : '',
+            dateLabel: event?.nextOccurrence ? formatDate(event.nextOccurrence.startsAt) : null,
+            venueLabel: event?.venue ? `${event.venue.name}, ${event.venue.city}` : null,
+        };
+    },
+    actions: (ctx) => ({
+        /**
+         * Read the event by id. A card that was handed an event, or has no id, has
+         * nothing to read, and this is the guard the component's watcher relied on.
+         */
+        async load() {
+            if (ctx.props.event || !ctx.props.eventId)
+                return;
+            try {
+                ctx.setState({ loading: true, error: null });
+                const events = ctx.client().getEventsManager();
+                const read = events.get?.bind(events);
+                if (!read)
+                    throw new TypeError('eventsManager.get is not a function');
+                const detail = (await read(ctx.props.eventId));
+                if (!detail)
+                    throw new Error(ctx.strings.notFound);
+                ctx.setState({ loadedEvent: toEventCardEvent(detail) });
+            }
+            catch (err) {
+                const message = err instanceof Error && err.message ? err.message : ctx.strings.loadFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /**
+         * The host never produced a client. Announced, because the component
+         * announced it: the wait and the read were one try block.
+         */
+        loadFailed(message) {
+            const text = message || ctx.strings.loadFailed;
+            ctx.setState({ error: text, loading: false });
+            ctx.emit('tlError', { message: text });
+        },
+        /** The buyer picked this card. Where that goes is the host's business. */
+        click() {
+            const event = ctx.props.event ?? ctx.state.loadedEvent;
+            if (!event)
+                return;
+            ctx.emit('tlClick', { eventId: event.id });
+        },
+    }),
+});

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

@@ -0,0 +1,35 @@
+import type { TlEventCardEvent } from './event-card.js';
+export interface EventListProps {
+    limit: number;
+    category: string | undefined;
+    columns: number;
+}
+export interface EventListState {
+    events: TlEventCardEvent[];
+    loading: boolean;
+    error: string | null;
+}
+export interface EventListDerived {
+    events: TlEventCardEvent[];
+    /** The column count the grid is drawn in, clamped to what the stylesheet has. */
+    columns: number;
+}
+export type EventListStatus = 'loading' | 'error' | 'empty' | 'ready';
+declare const STRINGS: {
+    errorTitle: string;
+    emptyTitle: string;
+    emptyMessage: string;
+    loadFailed: string;
+    noListing: string;
+};
+export type EventListStrings = typeof STRINGS;
+export declare const eventListCore: import("../define.js").ElementCore<EventListProps, EventListState, EventListDerived, {
+    load(): Promise<void>;
+}, EventListStatus, {
+    errorTitle: string;
+    emptyTitle: string;
+    emptyMessage: string;
+    loadFailed: string;
+    noListing: string;
+}>;
+export {};

package/dist/esm/cores/event-list.js

@@ -0,0 +1,106 @@
+/**
+ * `tl-event-list`: what the channel is selling, as a grid of cards.
+ *
+ * One read, and a re-read whenever the host changes what it is asking for. The
+ * cards themselves are `tl-event-card`, which has its own core; this one
+ * decides only what to ask for and what the grid says while there is nothing
+ * in it.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * two things that read like oversights and are kept:
+ *
+ *  - there is NO error event. A failed listing is drawn and never announced,
+ *    which makes this the only element of the eighteen that can fail silently
+ *    as far as a host is concerned. Adding `tlError` would be a new event on a
+ *    published element, so it is a decision for somebody rather than something
+ *    to slip into a refactor.
+ *  - the element paints nothing until the first listing lands. It holds
+ *    skeleton markup and uses it for every read but the first, because the
+ *    component awaited its read in `componentWillLoad` and Stencil does not
+ *    paint until that resolves. The harness keeps that by waiting on the same
+ *    thing; the core simply reports `loading` and lets the harness decide when
+ *    a first paint happens, which is a rendering question.
+ *
+ * What did not come across is the `console.log` tracing, which a library
+ * should not do for its host (`tl-cart` dropped its own for the same reason).
+ */
+import { defineElement } from '../define.js';
+const STRINGS = {
+    errorTitle: 'Error loading events',
+    emptyTitle: 'No events available',
+    emptyMessage: 'Check back later for upcoming events.',
+    loadFailed: 'Failed to load events',
+    noListing: 'Events are not available',
+};
+/** The grid has a class per column count, and only four of them. */
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 4;
+export const eventListCore = defineElement({
+    tag: 'tl-event-list',
+    docs: "What the channel is selling, as a grid of event cards, optionally narrowed to one category.",
+    category: 'discovery',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'error',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'radius-lg',
+        'radius-sm',
+        'secondary',
+        'spacing-4',
+        'spacing-6',
+        'spacing-8',
+    ],
+    sdkMethods: ['events.list'],
+    props: {
+        limit: { type: 'number', attr: 'limit', default: 12, docs: 'Maximum number of events to display' },
+        category: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'category',
+            docs: 'Category filter',
+        },
+        columns: { type: 'number', attr: 'columns', default: 3, docs: 'Columns for grid layout (1, 2, 3, or 4)' },
+    },
+    events: {
+        tlEventClick: { detail: '{ eventId: string; }', docs: 'Emitted when an event card is clicked' },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'error', 'empty', 'ready'],
+    state: () => ({ events: [], loading: true, error: null }),
+    mount: (ctx) => {
+        void ctx.actions.load();
+    },
+    status: ({ state }) => state.loading ? 'loading' : state.error ? 'error' : state.events.length === 0 ? 'empty' : 'ready',
+    derive: ({ state, props }) => ({
+        events: state.events,
+        columns: Math.min(Math.max(props.columns, MIN_COLUMNS), MAX_COLUMNS),
+    }),
+    actions: (ctx) => ({
+        /**
+         * Read the listing. Also what a harness calls when the limit or the
+         * category changes, because a different question deserves a fresh answer
+         * and the previous one is not narrowed down to it.
+         */
+        async load() {
+            try {
+                ctx.setState({ loading: true, error: null });
+                const client = await ctx.whenClient();
+                const events = client.getEventsManager();
+                if (!events?.list)
+                    throw new TypeError(ctx.strings.noListing);
+                const response = (await events.list({ limit: ctx.props.limit, category: ctx.props.category }));
+                ctx.setState({ events: (response?.items ?? []) });
+            }
+            catch (err) {
+                // Shown and not announced: this element has no error event.
+                ctx.setState({ error: err instanceof Error ? err.message : ctx.strings.loadFailed });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+    }),
+});

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

@@ -9,6 +9,34 @@
  * that is in both, so the two cannot drift while the split is half done.
  */
 import type { AnyElementCore } from '../manifest.js';
+export { buyTicketsButtonCore } from './buy-tickets-button.js';
+export type { BuyTicketsButtonDerived, BuyTicketsButtonProps, BuyTicketsButtonSaleState, BuyTicketsButtonSize, BuyTicketsButtonState, BuyTicketsButtonStatus, BuyTicketsButtonStrings, BuyTicketsButtonVariant, } from './buy-tickets-button.js';
+export { buyTicketsWrapperCore } from './buy-tickets-wrapper.js';
+export type { BuyTicketsWrapperDerived, BuyTicketsWrapperProps, BuyTicketsWrapperState, BuyTicketsWrapperStatus, BuyTicketsWrapperStrings, } from './buy-tickets-wrapper.js';
+export { cartCore } from './cart.js';
+export type { CartDerived, CartProps, CartRow, CartState, CartStatus, CartStrings, TlCartData, TlCartItem, } from './cart.js';
+export { cartBadgeCore, CART_COUNT_KEY } from './cart-badge.js';
+export type { CartBadgeDerived, CartBadgeProps, CartBadgeState, CartBadgeStatus, CartBadgeStrings, } from './cart-badge.js';
+export { cartDrawerCore, CLOSE_INTENT, OPEN_INTENT } from './cart-drawer.js';
+export type { CartDrawerDerived, CartDrawerProps, CartDrawerState, CartDrawerStatus, CartDrawerStrings, } from './cart-drawer.js';
+export { checkoutWrapperCore } from './checkout-wrapper.js';
+export type { CheckoutWrapperDerived, CheckoutWrapperProps, CheckoutWrapperState, CheckoutWrapperStatus, CheckoutWrapperStrings, } from './checkout-wrapper.js';
+export { eventCardCore, toEventCardEvent } from './event-card.js';
+export type { EventCardDerived, EventCardProps, EventCardState, EventCardStatus, EventCardStrings, EventDetailLike, TlEventCardEvent, } from './event-card.js';
+export { eventListCore } from './event-list.js';
+export type { EventListDerived, EventListProps, EventListState, EventListStatus, EventListStrings, } from './event-list.js';
+export { loginCore } from './login.js';
+export type { LoginDerived, LoginProps, LoginState, LoginStatus, LoginStrings, TlAuthChanged, TlLoginCustomer, TlLoginPhase, } from './login.js';
+export { myOrdersCore } from './my-orders.js';
+export type { MyOrdersDerived, MyOrdersProps, MyOrdersRow, MyOrdersState, MyOrdersStatus, MyOrdersStrings, } from './my-orders.js';
+export { occurrenceSelectorCore, HORIZONTAL_MIN_WIDTH } from './occurrence-selector.js';
+export type { OccurrenceCalendarDay, OccurrenceEventLike, OccurrenceSelectorDerived, OccurrenceSelectorDisplayMode, OccurrenceSelectorOrientation, OccurrenceSelectorProps, OccurrenceSelectorRow, OccurrenceSelectorState, OccurrenceSelectorStatus, OccurrenceSelectorStrings, TlOccurrence, TlOccurrenceSelectorTheme, } from './occurrence-selector.js';
+export { orderConfirmationCore } from './order-confirmation.js';
+export type { OrderConfirmationDerived, OrderConfirmationLine, OrderConfirmationProps, OrderConfirmationRow, OrderConfirmationState, OrderConfirmationStatus, OrderConfirmationStrings, } from './order-confirmation.js';
+export { orderTicketsCore, POLL_DELAYS_MS } from './order-tickets.js';
+export type { OrderTicketsDerived, OrderTicketsProps, OrderTicketsState, OrderTicketsStatus, OrderTicketsStrings, } from './order-tickets.js';
+export { isAuthError, promoCodeCore } from './promo-code.js';
+export type { PromoCodeDerived, PromoCodeProps, PromoCodeState, PromoCodeStatus, PromoCodeStrings, TlPromoApplied, } from './promo-code.js';
 export { ticketSelectorCore } from './ticket-selector.js';
 export type { AddToCartItem, TicketSelectorDerived, TicketSelectorProps, TicketSelectorRow, TicketSelectorState, TicketSelectorStatus, TicketSelectorStrings, TlTicketType, } from './ticket-selector.js';
 /** Every core, by tag. */

package/dist/esm/cores/index.js

@@ -1,6 +1,48 @@
+import { buyTicketsButtonCore } from './buy-tickets-button.js';
+import { buyTicketsWrapperCore } from './buy-tickets-wrapper.js';
+import { cartCore } from './cart.js';
+import { cartBadgeCore } from './cart-badge.js';
+import { cartDrawerCore } from './cart-drawer.js';
+import { checkoutWrapperCore } from './checkout-wrapper.js';
+import { eventCardCore } from './event-card.js';
+import { eventListCore } from './event-list.js';
+import { loginCore } from './login.js';
+import { myOrdersCore } from './my-orders.js';
+import { occurrenceSelectorCore } from './occurrence-selector.js';
+import { orderConfirmationCore } from './order-confirmation.js';
+import { orderTicketsCore } from './order-tickets.js';
+import { promoCodeCore } from './promo-code.js';
 import { ticketSelectorCore } from './ticket-selector.js';
+export { buyTicketsButtonCore } from './buy-tickets-button.js';
+export { buyTicketsWrapperCore } from './buy-tickets-wrapper.js';
+export { cartCore } from './cart.js';
+export { cartBadgeCore, CART_COUNT_KEY } from './cart-badge.js';
+export { cartDrawerCore, CLOSE_INTENT, OPEN_INTENT } from './cart-drawer.js';
+export { checkoutWrapperCore } from './checkout-wrapper.js';
+export { eventCardCore, toEventCardEvent } from './event-card.js';
+export { eventListCore } from './event-list.js';
+export { loginCore } from './login.js';
+export { myOrdersCore } from './my-orders.js';
+export { occurrenceSelectorCore, HORIZONTAL_MIN_WIDTH } from './occurrence-selector.js';
+export { orderConfirmationCore } from './order-confirmation.js';
+export { orderTicketsCore, POLL_DELAYS_MS } from './order-tickets.js';
+export { isAuthError, promoCodeCore } from './promo-code.js';
 export { ticketSelectorCore } from './ticket-selector.js';
 /** Every core, by tag. */
 export const ELEMENT_CORES = {
+    [buyTicketsButtonCore.tag]: buyTicketsButtonCore,
+    [buyTicketsWrapperCore.tag]: buyTicketsWrapperCore,
+    [cartCore.tag]: cartCore,
+    [cartBadgeCore.tag]: cartBadgeCore,
+    [cartDrawerCore.tag]: cartDrawerCore,
+    [checkoutWrapperCore.tag]: checkoutWrapperCore,
+    [eventCardCore.tag]: eventCardCore,
+    [eventListCore.tag]: eventListCore,
+    [loginCore.tag]: loginCore,
+    [myOrdersCore.tag]: myOrdersCore,
+    [occurrenceSelectorCore.tag]: occurrenceSelectorCore,
+    [orderConfirmationCore.tag]: orderConfirmationCore,
+    [orderTicketsCore.tag]: orderTicketsCore,
+    [promoCodeCore.tag]: promoCodeCore,
     [ticketSelectorCore.tag]: ticketSelectorCore,
 };

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

@@ -0,0 +1,125 @@
+/** The customer as the session exposes it. */
+export interface TlLoginCustomer {
+    id: string;
+    email: string;
+    firstName?: string | null;
+    lastName?: string | null;
+}
+export interface TlAuthChanged {
+    customer: TlLoginCustomer | null;
+    authenticated: boolean;
+}
+export type TlLoginPhase = 'email' | 'sent' | 'code' | 'verifying' | 'signed-in';
+export interface LoginProps {
+    heading: string;
+    allowCodeEntry: boolean;
+}
+export interface LoginState {
+    phase: TlLoginPhase;
+    email: string;
+    code: string;
+    busy: boolean;
+    error: string | null;
+    notice: string | null;
+    customer: TlLoginCustomer | null;
+    /**
+     * Whether the client can sign anyone in at all. False until the host's
+     * client is up, and false forever on a connector with no auth accessor,
+     * which is what disables the form.
+     */
+    authAvailable: boolean;
+    /** A magic-link code is single use; the URL is read once per instance. */
+    urlCodeUsed: boolean;
+}
+export interface LoginDerived {
+    /** The address to show on the signed-in step. */
+    signedInEmail: string;
+    /** The email form is dead until the client can sign somebody in. */
+    inputsDisabled: boolean;
+    emailSubmitLabel: string;
+    resendLabel: string;
+    codeSubmitLabel: string;
+    showCodeEntry: boolean;
+}
+export type LoginStatus = TlLoginPhase;
+declare const STRINGS: {
+    signedInPrefix: string;
+    fallbackAccount: string;
+    signOut: string;
+    verifyingTitle: string;
+    verifyingLead: string;
+    sentTitle: string;
+    sentLeadBefore: string;
+    sentLeadAfter: string;
+    sentAgain: string;
+    resendLink: string;
+    resending: string;
+    enterCodeInstead: string;
+    differentEmail: string;
+    codeTitle: string;
+    codeLeadBefore: string;
+    codeLeadAfter: string;
+    codeLabel: string;
+    codePlaceholder: string;
+    codeSubmit: string;
+    checking: string;
+    back: string;
+    emailLead: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    emailSubmit: string;
+    sendingLink: string;
+    enterEmail: string;
+    enterCode: string;
+    codeRejected: string;
+    requestFailed: string;
+    unavailable: string;
+    unsupported: string;
+};
+export type LoginStrings = typeof STRINGS;
+export declare const loginCore: import("../define.js").ElementCore<LoginProps, LoginState, LoginDerived, {
+    setEmail(value: string): void;
+    setCode(value: string): void;
+    requestLink(resend?: boolean): Promise<void>;
+    submitCode(): Promise<void>;
+    exchange(code: string): Promise<void>;
+    signOut(): Promise<void>;
+    goTo(phase: TlLoginPhase): void;
+    syncFromClient(): void;
+    connectFailed(): void;
+    unsupported(): void;
+}, TlLoginPhase, {
+    signedInPrefix: string;
+    fallbackAccount: string;
+    signOut: string;
+    verifyingTitle: string;
+    verifyingLead: string;
+    sentTitle: string;
+    sentLeadBefore: string;
+    sentLeadAfter: string;
+    sentAgain: string;
+    resendLink: string;
+    resending: string;
+    enterCodeInstead: string;
+    differentEmail: string;
+    codeTitle: string;
+    codeLeadBefore: string;
+    codeLeadAfter: string;
+    codeLabel: string;
+    codePlaceholder: string;
+    codeSubmit: string;
+    checking: string;
+    back: string;
+    emailLead: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    emailSubmit: string;
+    sendingLink: string;
+    enterEmail: string;
+    enterCode: string;
+    codeRejected: string;
+    requestFailed: string;
+    unavailable: string;
+    unsupported: string;
+}>;
+export {};