@ticketlayer/elements-core 0.1.0 → 0.2.0

package/dist/cjs/cores/order-confirmation.js

@@ -0,0 +1,301 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orderConfirmationCore = void 0;
+/**
+ * `tl-order-confirmation`: the thank-you block - reference, email, event and
+ * date, the ticket lines, the money rows, and the tickets themselves.
+ *
+ * It finds its order three ways, in this order, and that priority is the whole
+ * point of the element:
+ *
+ *  1. the `order-id` prop, for a host that already knows;
+ *  2. the query the page was opened with (`?orderId=`), which is the contract
+ *     the hosted box office confirmation page uses, plus `?redirect_status=`,
+ *     which is how a payment provider says on the way back whether the money
+ *     actually moved;
+ *  3. the client's `checkout:completed`, for a page that mounts this before
+ *     the customer has paid.
+ *
+ * (2) is why this core reads {@link ActionContext.query} and (3) is why it
+ * holds a subscription, bound in its own `mount` and handed to
+ * `ctx.onTeardown` (TKT-197). It is the last of the eighteen elements to live
+ * on a subscription.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including:
+ *
+ *  - a redirect that is not `succeeded` shows "Payment not completed" and does
+ *    NOT read the order, even when there is an order id to read.
+ *  - a re-read while an order is already on screen does not blank it: the
+ *    skeleton is only for the first read.
+ *  - a failed read keeps the thank-you header and puts the message underneath,
+ *    because someone who has just paid should not be told the purchase failed.
+ *  - `checkout:completed` shows what it carries at once and THEN re-reads,
+ *    because an embed's payload is only the id and the order number until the
+ *    tickets have been issued.
+ *  - the event name and date are best effort. The order view carries neither,
+ *    so they are walked out of the channel's listing, and a failure there
+ *    leaves the line at whatever the order itself said.
+ *
+ * What did not come across is the `console.error` tracing, which a library
+ * should not do for its host (`tl-cart` dropped its own for the same reason).
+ */
+const define_js_1 = require("../define.js");
+const orders_js_1 = require("../orders.js");
+const STRINGS = {
+    paymentFailedTitle: 'Payment not completed',
+    paymentFailedLead: "Your payment wasn't completed. Your cart is still saved, so you can try again.",
+    title: "You're going!",
+    leadPrefix: 'Order ',
+    leadSuffix: ' is confirmed. Your tickets are on their way to your email.',
+    leadGeneric: 'Your order is confirmed. Your tickets are on their way to your email.',
+    errorPrefix: "We couldn't load your order details yet. ",
+    rowReference: 'Order reference',
+    rowEmail: 'Email',
+    rowEvent: 'Event',
+    rowDate: 'Date',
+    subtotalRow: 'Subtotal',
+    taxRow: 'Tax',
+    discountRow: 'Discount',
+    totalRow: 'Total',
+    ticketsTitle: 'Your tickets',
+    ticketsHint: 'Show these QR codes at the door for entry. Use Download PDF on a ticket to save it.',
+    noOrdersManager: 'Orders are not available',
+    notFound: 'Order not found',
+    loadFailed: 'Failed to load your order',
+};
+/** The query parameter a payment provider comes back on, and the one value that means paid. */
+const REDIRECT_STATUS = 'redirect_status';
+const REDIRECT_SUCCEEDED = 'succeeded';
+exports.orderConfirmationCore = (0, define_js_1.defineElement)({
+    tag: 'tl-order-confirmation',
+    docs: 'The thank-you block: order reference, email, event and date, the ticket lines, the money rows and the tickets.',
+    category: 'checkout',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'border',
+        'error',
+        'font-family',
+        'font-family-mono',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'radius-lg',
+        'radius-md',
+        'secondary',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'spacing-6',
+        'success',
+        'success-foreground',
+    ],
+    sdkMethods: ['orders.get', 'events.list', 'events.get', 'auth.customer', 'on'],
+    props: {
+        orderId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'order-id',
+            docs: 'The order to show. Falls back to `?orderId=` in the page URL.',
+        },
+        customerEmail: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'customer-email',
+            docs: 'Email to show when the order view carries none (a host that collected it at checkout).',
+        },
+        showTickets: {
+            type: 'boolean',
+            attr: 'show-tickets',
+            default: true,
+            docs: 'Mount tl-order-tickets under the summary (default true).',
+        },
+        columns: { type: 'number', attr: 'columns', default: 2, docs: 'Columns for the ticket grid.' },
+    },
+    events: {
+        tlOrderLoaded: { detail: '{ order: TlOrderData; }', docs: 'the order was loaded' },
+        tlError: { detail: '{ message: string; }', docs: 'the order could not be loaded' },
+    },
+    strings: STRINGS,
+    statuses: ['payment-failed', 'idle', 'loading', 'ready'],
+    state: () => ({
+        order: null,
+        resolvedOrderId: null,
+        loading: false,
+        error: null,
+        paymentFailed: false,
+        occurrence: null,
+        signedInCustomer: null,
+    }),
+    /**
+     * On screen: read the link, start the read, subscribe.
+     *
+     * The query goes first because it decides whether there is anything to read
+     * at all: a payment that did not go through is not an order to fetch. The
+     * read is started and not awaited before subscribing, so a
+     * `checkout:completed` that lands mid-read is not missed - the component
+     * read in `componentWillLoad` and subscribed in `componentDidLoad`, and had
+     * exactly that window.
+     *
+     * The subscription needs the client and the read does not: `load` waits for
+     * the client itself, inside the try block that announces a failure, which is
+     * why a page that never starts Live still emits `tlError` here when it was
+     * given an order to show.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            // The link, before anything else: a failed redirect means no read.
+            const redirect = ctx.query.get(REDIRECT_STATUS);
+            ctx.setState({
+                paymentFailed: !!redirect && redirect !== REDIRECT_SUCCEEDED,
+                resolvedOrderId: ctx.props.orderId || ctx.query.get('orderId') || null,
+            });
+            const reading = ctx.state.resolvedOrderId && !ctx.state.paymentFailed
+                ? ctx.actions.load()
+                : Promise.resolve();
+            let client = null;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                client = null;
+            }
+            if (client && ctx.active()) {
+                const off = client.on?.('checkout:completed', (payload) => {
+                    ctx.actions.checkoutCompleted(payload);
+                });
+                if (typeof off === 'function')
+                    ctx.onTeardown(off);
+            }
+            await reading;
+        })();
+    },
+    status: ({ state }) => state.paymentFailed
+        ? 'payment-failed'
+        : !state.resolvedOrderId && !state.order
+            ? 'idle'
+            : state.loading
+                ? 'loading'
+                : 'ready',
+    derive: ({ state, props, strings }) => {
+        const order = state.order;
+        const totals = (0, orders_js_1.orderTotals)(order);
+        const currency = totals.currency;
+        const email = props.customerEmail || (0, orders_js_1.orderCustomerEmail)(order, state.signedInCustomer);
+        const eventName = state.occurrence?.eventName || (order ? (0, orders_js_1.orderEventName)(order) : null);
+        const startsAt = state.occurrence?.startsAt;
+        const rows = [];
+        if (order)
+            rows.push({ label: strings.rowReference, value: order.orderNumber, reference: true });
+        if (email)
+            rows.push({ label: strings.rowEmail, value: email, reference: false });
+        if (eventName)
+            rows.push({ label: strings.rowEvent, value: eventName, reference: false });
+        if (startsAt)
+            rows.push({ label: strings.rowDate, value: (0, orders_js_1.formatDateTime)(startsAt), reference: false });
+        return {
+            leadText: order?.orderNumber
+                ? `${strings.leadPrefix}${order.orderNumber}${strings.leadSuffix}`
+                : strings.leadGeneric,
+            rows,
+            lines: order
+                ? (0, orders_js_1.ticketItems)(order).map((item) => ({
+                    label: `${item.quantity} x ${item.name}`,
+                    priceLabel: (0, orders_js_1.formatPrice)(item.subtotal, order.currency),
+                }))
+                : [],
+            totals,
+            subtotalLabel: (0, orders_js_1.formatPrice)(totals.subtotal, currency),
+            feeAmountLabel: (0, orders_js_1.formatPrice)(totals.fees, currency),
+            taxLabel: (0, orders_js_1.formatPrice)(totals.tax, currency),
+            discountLabel: (0, orders_js_1.formatPrice)(totals.discount, currency),
+            totalLabel: (0, orders_js_1.formatPrice)(totals.total, currency),
+            showTaxRow: totals.tax > 0,
+            showDiscountRow: totals.discount > 0,
+            // An embed's checkout:completed carries only id and order number until
+            // the refetch lands, so there is nothing to summarise yet.
+            showSummary: !!order && Array.isArray(order.items),
+            showError: !!state.error && !order,
+            showTickets: props.showTickets && !!order,
+            ticketsOrderId: order?.id || state.resolvedOrderId || '',
+        };
+    },
+    actions: (ctx) => {
+        /**
+         * Put an event name and a start time on the summary. The order view has
+         * neither, so the occurrence is walked out of the channel's listing. Best
+         * effort and never blocking: a failure leaves the line at what the order
+         * said, and a result that arrives after the order changed underneath is
+         * dropped.
+         */
+        const resolveEvent = async (client, order) => {
+            const occurrenceId = order.tickets?.find((t) => t.eventOccurrenceId)?.eventOccurrenceId;
+            if (!occurrenceId)
+                return;
+            try {
+                const resolved = await (0, orders_js_1.resolveOccurrence)(client, occurrenceId);
+                if (resolved && ctx.state.order?.id === order.id)
+                    ctx.setState({ occurrence: resolved });
+            }
+            catch {
+                // Leave the event line at what the order gives us.
+            }
+        };
+        const self = {
+            /** Read the order. The skeleton is only for the first read. */
+            async load() {
+                const id = ctx.state.resolvedOrderId;
+                if (!id)
+                    return;
+                try {
+                    ctx.setState({ loading: !ctx.state.order, error: null });
+                    const client = await ctx.whenClient();
+                    const orders = client.getOrdersManager?.();
+                    if (!orders)
+                        throw new Error(ctx.strings.noOrdersManager);
+                    const order = (await orders.get(id));
+                    if (!order)
+                        throw new Error(ctx.strings.notFound);
+                    ctx.setState({
+                        order,
+                        signedInCustomer: client.getAuthManager?.()?.customer ?? null,
+                    });
+                    ctx.emit('tlOrderLoaded', { order });
+                    void resolveEvent(client, order);
+                }
+                catch (err) {
+                    const message = (0, orders_js_1.errorMessage)(err, ctx.strings.loadFailed);
+                    ctx.setState({ error: message });
+                    ctx.emit('tlError', { message });
+                }
+                finally {
+                    ctx.setState({ loading: false });
+                }
+            },
+            /**
+             * The host pointed the element at a different order. It resolves again
+             * the way the mount did - the prop first, the link second - and reads.
+             * Not a remount: the `checkout:completed` subscription belongs to the
+             * element, not to the order it happens to be showing.
+             */
+            orderIdChanged() {
+                ctx.setState({ resolvedOrderId: ctx.props.orderId || ctx.query.get('orderId') || null });
+                void self.load();
+            },
+            /**
+             * The client finished a checkout. Show what it carries at once, because
+             * an order number on screen beats a skeleton, then read the order again:
+             * the tickets are issued after the order exists, so the payload almost
+             * never has them.
+             */
+            checkoutCompleted(order) {
+                if (!order?.id)
+                    return;
+                ctx.setState({ paymentFailed: false, order, resolvedOrderId: order.id });
+                ctx.emit('tlOrderLoaded', { order });
+                void self.load();
+            },
+        };
+        return self;
+    },
+});

package/dist/cjs/cores/order-tickets.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orderTicketsCore = exports.POLL_DELAYS_MS = void 0;
+/**
+ * `tl-order-tickets`: every ticket in an order, as scannable cards.
+ *
+ * The one core that waits rather than concluding. Tickets are issued
+ * asynchronously - the payment confirms, the order is marked paid, and
+ * entitlement issuance follows a moment later - so a confirmation page renders
+ * BEFORE the passes exist, reliably rather than occasionally. The element used
+ * to answer that with "no tickets for this order yet", which is true and reads
+ * as "something went wrong" to somebody who has just been charged. Refreshing
+ * showed them, so the only thing missing was the waiting.
+ *
+ * So an empty order is treated as issuance in flight and polled, with the gaps
+ * widening, for about a minute. Then it stops and says the tickets are coming
+ * by email, because at that point something probably is wrong and an element
+ * that polls forever is worse than one that admits it.
+ *
+ * The polling belongs to the mount, which is what the split adds: the
+ * component cancelled its timer in `disconnectedCallback`, and here the mount's
+ * teardown does it, so every runtime gets the same guarantee rather than each
+ * harness remembering. A scheduled poll is cancelled by moving the generation
+ * on rather than by clearing a handle - `ctx.after` has no handle to clear -
+ * so a stale timer still fires and does nothing, which is the same thing from
+ * outside: no request is made.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including:
+ *
+ *  - a failed read STOPS the polling. Retrying a 403 a dozen times helps
+ *    nobody, and a failure is a different thing from an order with no tickets.
+ *  - `loading` is only ever true before the first read finishes. Every later
+ *    read, including a poll and a new order id, leaves whatever is on screen.
+ *  - pointing it at another order clears the tickets without putting the
+ *    loading state back, so there is a beat where the element reads as "taking
+ *    longer than usual" before the new read lands. Kept, not tidied.
+ *
+ * There is no `tlError` here, and no event of any kind: nothing this element
+ * does is announced to the host. Kept as found.
+ */
+const define_js_1 = require("../define.js");
+/**
+ * Gaps between polls, in milliseconds. Front-loaded because issuance usually
+ * lands in the first few seconds, then widening so a genuinely stuck order is
+ * not hammered. Sums to roughly one minute, and running out is what turns
+ * `issuing` into `delayed`.
+ */
+exports.POLL_DELAYS_MS = [
+    1000, 1500, 2000, 3000, 4000, 5000, 6000, 8000, 10000, 12000,
+];
+const STRINGS = {
+    loading: 'Loading tickets…',
+    preparing: 'Preparing your tickets…',
+    delayed: 'Your tickets are taking longer than usual. They will be emailed to you as soon as they are ready.',
+    notAvailable: 'Tickets are not available',
+    loadFailed: 'Failed to load tickets',
+};
+exports.orderTicketsCore = (0, define_js_1.defineElement)({
+    tag: 'tl-order-tickets',
+    docs: "Every ticket in an order as a scannable card, waiting out issuance rather than reporting an empty order as empty.",
+    category: 'tickets',
+    runtimes: ['web', 'native'],
+    tokens: ['border', 'error', 'font-family', 'muted-foreground', 'primary', 'spacing-2', 'spacing-4', 'spacing-6'],
+    sdkMethods: ['orders.get'],
+    props: {
+        orderId: { type: 'string', attr: 'order-id', required: true, docs: 'The order whose tickets to show.' },
+        columns: { type: 'number', attr: 'columns', default: 2, docs: 'Columns in the grid (default 2).' },
+    },
+    events: {},
+    strings: STRINGS,
+    statuses: ['loading', 'error', 'issuing', 'delayed', 'ready'],
+    state: () => ({ tickets: [], loading: true, error: null, issuing: false }),
+    /**
+     * On screen: read, and keep reading while issuance is in flight. Off screen:
+     * stop, which is the whole reason the polling lives in the mount.
+     */
+    mount: (ctx) => {
+        ctx.onTeardown(() => ctx.actions.stopPolling());
+        void ctx.actions.load();
+    },
+    status: ({ state }) => state.loading
+        ? 'loading'
+        : state.error
+            ? 'error'
+            : state.tickets.length > 0
+                ? 'ready'
+                : state.issuing
+                    ? 'issuing'
+                    : 'delayed',
+    derive: ({ state, props }) => ({
+        tickets: state.tickets,
+        columns: props.columns,
+        orderId: props.orderId,
+    }),
+    actions: (ctx) => {
+        // Neither of these is state: nothing renders from them, and the component
+        // held both as instance fields for the same reason. `generation` is how a
+        // scheduled poll is cancelled, since `ctx.after` hands back no handle.
+        let generation = 0;
+        let poll = 0;
+        const self = {
+            /**
+             * Read the order. Tickets end the waiting; no tickets and a gap left in
+             * the schedule extends it; no tickets and no gap left gives up.
+             */
+            async load() {
+                try {
+                    ctx.setState({ error: null });
+                    const client = await ctx.whenClient();
+                    const orders = client.getOrdersManager?.();
+                    if (!orders)
+                        throw new Error(ctx.strings.notAvailable);
+                    const order = (await orders.get(ctx.props.orderId));
+                    const tickets = order?.tickets ?? [];
+                    ctx.setState({ tickets });
+                    if (tickets.length > 0) {
+                        // Arrived. Stop asking.
+                        ctx.setState({ issuing: false });
+                        self.stopPolling();
+                    }
+                    else {
+                        const delay = exports.POLL_DELAYS_MS[poll];
+                        // `undefined` once the schedule runs out: give up waiting, and say so.
+                        ctx.setState({ issuing: delay !== undefined });
+                        if (delay !== undefined) {
+                            poll += 1;
+                            self.stopPolling();
+                            const mine = generation;
+                            ctx.after(delay, () => {
+                                if (mine === generation)
+                                    void self.load();
+                            });
+                        }
+                    }
+                }
+                catch (err) {
+                    // A failed request is a different thing from an order with no
+                    // tickets, and stops the polling.
+                    //
+                    // Defensive rather than load bearing, as it was in the component:
+                    // a poll is scheduled only on the success path, and the timer that
+                    // triggered this read has already fired, so there is normally
+                    // nothing left to cancel. Mutation testing says so out loud -
+                    // removing this line kills no test - and it is kept because the
+                    // component had it and because it is what makes the intent legible.
+                    self.stopPolling();
+                    ctx.setState({ issuing: false, error: err instanceof Error ? err.message : ctx.strings.loadFailed });
+                }
+                finally {
+                    ctx.setState({ loading: false });
+                }
+            },
+            /**
+             * A different order: forget this one, put the schedule back to the top
+             * and read. The loading state is deliberately NOT restored, so the
+             * element reads as "taking longer than usual" for a beat, exactly as the
+             * component did.
+             */
+            orderIdChanged() {
+                self.stopPolling();
+                poll = 0;
+                ctx.setState({ tickets: [], issuing: false });
+                void self.load();
+            },
+            /** Cancel whatever poll is scheduled. Also what the teardown runs. */
+            stopPolling() {
+                generation += 1;
+            },
+        };
+        return self;
+    },
+});

package/dist/cjs/cores/promo-code.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promoCodeCore = void 0;
+exports.isAuthError = isAuthError;
+/**
+ * `tl-promo-code`: an input and an Apply button that redeems a presale or
+ * promo code for the current cart.
+ *
+ * Redemption unlocks gated pricing on the customer; the client re-reads the
+ * cart and publishes `cart:updated`, so `tl-cart` and the badges re-render on
+ * their own and this element subscribes to nothing. It has nothing to do when
+ * a harness mounts it either, so it declares no `mount` hook - the harness
+ * still calls `mount()` and still gets a teardown, which is the point of the
+ * hook being unconditional.
+ *
+ * The API has no un-redeem, so the applied state offers only "use a different
+ * code", which clears the input for another redemption.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter,
+ * including the two error messages and the uppercased code in the receipt. What
+ * did not come across is the `console.error` tracing.
+ */
+const define_js_1 = require("../define.js");
+const STRINGS = {
+    applying: 'Applying…',
+    codePrefix: 'Code ',
+    appliedSuffix: ' applied',
+    alreadyHeldSuffix: ' was already applied',
+    useDifferent: 'Use a different code',
+    enterCode: 'Enter a code',
+    notAvailable: 'Promo codes are not available',
+    signIn: 'Sign in to use this code',
+    rejected: 'That code could not be applied',
+};
+/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
+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';
+}
+exports.promoCodeCore = (0, define_js_1.defineElement)({
+    tag: 'tl-promo-code',
+    docs: 'Redeem a presale or promo code for the current cart.',
+    category: 'purchase',
+    runtimes: ['web'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'font-family',
+        'font-family-mono',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'success',
+    ],
+    sdkMethods: ['cart.get', 'presale.redeem'],
+    props: {
+        placeholder: {
+            type: 'string',
+            attr: 'placeholder',
+            default: 'Promo or presale code',
+            docs: 'Input placeholder.',
+        },
+        buttonLabel: { type: 'string', attr: 'button-label', default: 'Apply', docs: 'Apply button label.' },
+    },
+    events: {
+        tlPromoApplied: { detail: 'TlPromoApplied', docs: '' },
+        tlError: { detail: '{ message: string; }', docs: '' },
+    },
+    strings: STRINGS,
+    statuses: ['idle', 'applied'],
+    state: () => ({ code: '', applying: false, applied: null, error: null }),
+    status: ({ state }) => (state.applied ? 'applied' : 'idle'),
+    derive: ({ state, props, strings }) => ({
+        actionLabel: state.applying ? strings.applying : props.buttonLabel,
+        disabled: state.applying,
+        appliedCode: state.applied?.code ?? null,
+        appliedSuffix: state.applied?.alreadyHeld ? strings.alreadyHeldSuffix : strings.appliedSuffix,
+    }),
+    actions: (ctx) => ({
+        /** The buyer typed. Typing clears whatever the last attempt complained about. */
+        setCode(code) {
+            ctx.setState({ code, error: null });
+        },
+        /**
+         * Redeem what is in the box.
+         *
+         * The client refreshes the cart on redeem, so the cart is read back only
+         * to put it in the payload; a read that fails is not a failed redemption
+         * and does not become one.
+         */
+        async apply() {
+            const code = ctx.state.code.trim();
+            if (!code) {
+                ctx.setState({ error: ctx.strings.enterCode });
+                return;
+            }
+            ctx.setState({ applying: true, error: null });
+            try {
+                const client = await ctx.whenClient();
+                const presale = client.getPresaleManager?.();
+                if (!presale)
+                    throw new Error(ctx.strings.notAvailable);
+                const result = await presale.redeem(code);
+                const cart = (await client.getCartManager?.()?.get?.().catch(() => null)) ?? null;
+                const applied = { code: code.toUpperCase(), ...result, cart };
+                ctx.setState({ applied, code: '' });
+                ctx.emit('tlPromoApplied', applied);
+            }
+            catch (err) {
+                const message = isAuthError(err)
+                    ? ctx.strings.signIn
+                    : err instanceof Error && err.message
+                        ? err.message
+                        : ctx.strings.rejected;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ applying: false });
+            }
+        },
+        /** Back to the input, for a second code. There is no un-redeem to offer. */
+        reset() {
+            ctx.setState({ applied: null, error: null });
+        },
+    }),
+});

package/dist/cjs/cores/ticket-selector.js

@@ -95,6 +95,36 @@ exports.ticketSelectorCore = (0, define_js_1.defineElement)({
         addSuccess: false,
         feeQuote: null,
     }),
+    /**
+     * On screen: wait for the host's client, then read the ticket types. The
+     * harness used to do this (it awaited `whenSDK()` and called `load()`
+     * itself); the core does it now, so every runtime loads at the same moment
+     * and in the same order (TKT-197).
+     *
+     * There is nothing to undo, so nothing is returned. The guards are what make
+     * a remount safe: `active()` is false once this mount has been torn down, so
+     * an element that was removed while the client was still coming up neither
+     * loads nor writes an error into a view nobody is rendering.
+     */
+    mount: (ctx) => {
+        // Nothing to read until the host has said which occurrence is on sale.
+        // Until then the element stays in `loading`, which is what it did before.
+        if (!ctx.props.eventId || !ctx.props.occurrenceId)
+            return;
+        void (async () => {
+            try {
+                await ctx.whenClient();
+                if (!ctx.active())
+                    return;
+                await ctx.actions.load();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed(err instanceof Error ? err.message : ctx.strings.noClient);
+            }
+        })();
+    },
     status: ({ state }) => (state.loading ? 'loading' : state.error ? 'error' : 'ready'),
     derive: (ctx) => {
         const { state, strings, props, formatMoney } = ctx;