@ticketlayer/elements-core 0.1.0 → 0.2.0

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

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eventListCore = void 0;
+/**
+ * `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).
+ */
+const define_js_1 = require("../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;
+exports.eventListCore = (0, define_js_1.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/cjs/cores/index.js

@@ -1,10 +1,73 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ELEMENT_CORES = exports.ticketSelectorCore = void 0;
+exports.ELEMENT_CORES = exports.ticketSelectorCore = exports.promoCodeCore = exports.isAuthError = exports.POLL_DELAYS_MS = exports.orderTicketsCore = exports.orderConfirmationCore = exports.HORIZONTAL_MIN_WIDTH = exports.occurrenceSelectorCore = exports.myOrdersCore = exports.loginCore = exports.eventListCore = exports.toEventCardEvent = exports.eventCardCore = exports.checkoutWrapperCore = exports.OPEN_INTENT = exports.CLOSE_INTENT = exports.cartDrawerCore = exports.CART_COUNT_KEY = exports.cartBadgeCore = exports.cartCore = exports.buyTicketsWrapperCore = exports.buyTicketsButtonCore = void 0;
+const buy_tickets_button_js_1 = require("./buy-tickets-button.js");
+const buy_tickets_wrapper_js_1 = require("./buy-tickets-wrapper.js");
+const cart_js_1 = require("./cart.js");
+const cart_badge_js_1 = require("./cart-badge.js");
+const cart_drawer_js_1 = require("./cart-drawer.js");
+const checkout_wrapper_js_1 = require("./checkout-wrapper.js");
+const event_card_js_1 = require("./event-card.js");
+const event_list_js_1 = require("./event-list.js");
+const login_js_1 = require("./login.js");
+const my_orders_js_1 = require("./my-orders.js");
+const occurrence_selector_js_1 = require("./occurrence-selector.js");
+const order_confirmation_js_1 = require("./order-confirmation.js");
+const order_tickets_js_1 = require("./order-tickets.js");
+const promo_code_js_1 = require("./promo-code.js");
 const ticket_selector_js_1 = require("./ticket-selector.js");
+var buy_tickets_button_js_2 = require("./buy-tickets-button.js");
+Object.defineProperty(exports, "buyTicketsButtonCore", { enumerable: true, get: function () { return buy_tickets_button_js_2.buyTicketsButtonCore; } });
+var buy_tickets_wrapper_js_2 = require("./buy-tickets-wrapper.js");
+Object.defineProperty(exports, "buyTicketsWrapperCore", { enumerable: true, get: function () { return buy_tickets_wrapper_js_2.buyTicketsWrapperCore; } });
+var cart_js_2 = require("./cart.js");
+Object.defineProperty(exports, "cartCore", { enumerable: true, get: function () { return cart_js_2.cartCore; } });
+var cart_badge_js_2 = require("./cart-badge.js");
+Object.defineProperty(exports, "cartBadgeCore", { enumerable: true, get: function () { return cart_badge_js_2.cartBadgeCore; } });
+Object.defineProperty(exports, "CART_COUNT_KEY", { enumerable: true, get: function () { return cart_badge_js_2.CART_COUNT_KEY; } });
+var cart_drawer_js_2 = require("./cart-drawer.js");
+Object.defineProperty(exports, "cartDrawerCore", { enumerable: true, get: function () { return cart_drawer_js_2.cartDrawerCore; } });
+Object.defineProperty(exports, "CLOSE_INTENT", { enumerable: true, get: function () { return cart_drawer_js_2.CLOSE_INTENT; } });
+Object.defineProperty(exports, "OPEN_INTENT", { enumerable: true, get: function () { return cart_drawer_js_2.OPEN_INTENT; } });
+var checkout_wrapper_js_2 = require("./checkout-wrapper.js");
+Object.defineProperty(exports, "checkoutWrapperCore", { enumerable: true, get: function () { return checkout_wrapper_js_2.checkoutWrapperCore; } });
+var event_card_js_2 = require("./event-card.js");
+Object.defineProperty(exports, "eventCardCore", { enumerable: true, get: function () { return event_card_js_2.eventCardCore; } });
+Object.defineProperty(exports, "toEventCardEvent", { enumerable: true, get: function () { return event_card_js_2.toEventCardEvent; } });
+var event_list_js_2 = require("./event-list.js");
+Object.defineProperty(exports, "eventListCore", { enumerable: true, get: function () { return event_list_js_2.eventListCore; } });
+var login_js_2 = require("./login.js");
+Object.defineProperty(exports, "loginCore", { enumerable: true, get: function () { return login_js_2.loginCore; } });
+var my_orders_js_2 = require("./my-orders.js");
+Object.defineProperty(exports, "myOrdersCore", { enumerable: true, get: function () { return my_orders_js_2.myOrdersCore; } });
+var occurrence_selector_js_2 = require("./occurrence-selector.js");
+Object.defineProperty(exports, "occurrenceSelectorCore", { enumerable: true, get: function () { return occurrence_selector_js_2.occurrenceSelectorCore; } });
+Object.defineProperty(exports, "HORIZONTAL_MIN_WIDTH", { enumerable: true, get: function () { return occurrence_selector_js_2.HORIZONTAL_MIN_WIDTH; } });
+var order_confirmation_js_2 = require("./order-confirmation.js");
+Object.defineProperty(exports, "orderConfirmationCore", { enumerable: true, get: function () { return order_confirmation_js_2.orderConfirmationCore; } });
+var order_tickets_js_2 = require("./order-tickets.js");
+Object.defineProperty(exports, "orderTicketsCore", { enumerable: true, get: function () { return order_tickets_js_2.orderTicketsCore; } });
+Object.defineProperty(exports, "POLL_DELAYS_MS", { enumerable: true, get: function () { return order_tickets_js_2.POLL_DELAYS_MS; } });
+var promo_code_js_2 = require("./promo-code.js");
+Object.defineProperty(exports, "isAuthError", { enumerable: true, get: function () { return promo_code_js_2.isAuthError; } });
+Object.defineProperty(exports, "promoCodeCore", { enumerable: true, get: function () { return promo_code_js_2.promoCodeCore; } });
 var ticket_selector_js_2 = require("./ticket-selector.js");
 Object.defineProperty(exports, "ticketSelectorCore", { enumerable: true, get: function () { return ticket_selector_js_2.ticketSelectorCore; } });
 /** Every core, by tag. */
 exports.ELEMENT_CORES = {
+    [buy_tickets_button_js_1.buyTicketsButtonCore.tag]: buy_tickets_button_js_1.buyTicketsButtonCore,
+    [buy_tickets_wrapper_js_1.buyTicketsWrapperCore.tag]: buy_tickets_wrapper_js_1.buyTicketsWrapperCore,
+    [cart_js_1.cartCore.tag]: cart_js_1.cartCore,
+    [cart_badge_js_1.cartBadgeCore.tag]: cart_badge_js_1.cartBadgeCore,
+    [cart_drawer_js_1.cartDrawerCore.tag]: cart_drawer_js_1.cartDrawerCore,
+    [checkout_wrapper_js_1.checkoutWrapperCore.tag]: checkout_wrapper_js_1.checkoutWrapperCore,
+    [event_card_js_1.eventCardCore.tag]: event_card_js_1.eventCardCore,
+    [event_list_js_1.eventListCore.tag]: event_list_js_1.eventListCore,
+    [login_js_1.loginCore.tag]: login_js_1.loginCore,
+    [my_orders_js_1.myOrdersCore.tag]: my_orders_js_1.myOrdersCore,
+    [occurrence_selector_js_1.occurrenceSelectorCore.tag]: occurrence_selector_js_1.occurrenceSelectorCore,
+    [order_confirmation_js_1.orderConfirmationCore.tag]: order_confirmation_js_1.orderConfirmationCore,
+    [order_tickets_js_1.orderTicketsCore.tag]: order_tickets_js_1.orderTicketsCore,
+    [promo_code_js_1.promoCodeCore.tag]: promo_code_js_1.promoCodeCore,
     [ticket_selector_js_1.ticketSelectorCore.tag]: ticket_selector_js_1.ticketSelectorCore,
 };

package/dist/cjs/cores/login.js

@@ -0,0 +1,309 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loginCore = void 0;
+/**
+ * `tl-login`: magic-link sign-in. No password is handled anywhere in here.
+ *
+ * The customer enters an email, the client is asked to send a link, and the
+ * code that comes back is exchanged for a session either because the link
+ * landed on this page with `?code=` or because the customer typed the six
+ * digits out of the email. Both go through the same `exchange` action.
+ *
+ * The first core to read {@link ActionContext.query}, the seam this split
+ * added. An element that is the far end of an emailed link has to be able to
+ * see what the link said, and where that is written down is per runtime: the
+ * web has `window.location.search`, a native harness has its deep-link router.
+ * So the core says it reads `code`, once, on mount, and the harness says where
+ * from. A harness that supplies no query reads null and the element simply
+ * starts on the email step, which is what a page with no code in its URL does
+ * anyway.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including:
+ *
+ *  - the URL code is single use. It is taken once per instance and never read
+ *    again, so a remount cannot spend a code that was already exchanged.
+ *  - a failed exchange goes back to where it came from, and the two ways in
+ *    are told apart: a typed code returns to the code step, a URL code returns
+ *    to the email step.
+ *  - a failed sign out is swallowed. The customer is shown as signed out and
+ *    `tlAuthChanged` says so, because the session is gone locally either way,
+ *    and that is what the component did.
+ *
+ * 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 = {
+    signedInPrefix: 'Signed in as ',
+    fallbackAccount: 'your account',
+    signOut: 'Sign out',
+    verifyingTitle: 'Signing you in…',
+    verifyingLead: 'Just a moment.',
+    sentTitle: 'Check your inbox',
+    // The lead reads "We've sent a sign-in link to <strong>you@…</strong>. Open
+    // it on this device to continue." Split in two because the address is
+    // emphasised in the middle of it, and the shape has no way to say "this copy
+    // has a slot in it" - see the README's note on what a core still cannot
+    // express.
+    sentLeadBefore: "We've sent a sign-in link to ",
+    sentLeadAfter: '. Open it on this device to continue.',
+    sentAgain: 'Sent again. Check your inbox.',
+    resendLink: 'Resend link',
+    resending: 'Sending…',
+    enterCodeInstead: 'Enter the code instead',
+    differentEmail: 'Use a different email',
+    codeTitle: 'Enter your code',
+    codeLeadBefore: 'Type the 6-digit code from the email we sent to ',
+    codeLeadAfter: '.',
+    codeLabel: 'Code',
+    codePlaceholder: '123456',
+    codeSubmit: 'Sign in',
+    checking: 'Checking…',
+    back: 'Back',
+    emailLead: "Enter your email and we'll send you a secure sign-in link. No password needed.",
+    emailLabel: 'Email address',
+    emailPlaceholder: 'you@example.com',
+    emailSubmit: 'Email me a sign-in link',
+    sendingLink: 'Sending link…',
+    enterEmail: 'Enter your email address',
+    enterCode: 'Enter the code from your email',
+    codeRejected: 'That code did not work. Check it and try again, or request a new link.',
+    requestFailed: 'Could not send your sign-in link',
+    unavailable: 'Sign-in is not available right now',
+    unsupported: 'Sign-in is not available with this SDK',
+};
+exports.loginCore = (0, define_js_1.defineElement)({
+    tag: 'tl-login',
+    docs: 'Magic-link sign-in: an email in, a link or a six-digit code back, and a session. No password is ever handled.',
+    category: 'account',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'font-family',
+        'font-family-mono',
+        'foreground',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-lg',
+        'radius-md',
+        'secondary',
+        'spacing-3',
+        'spacing-4',
+        'spacing-6',
+        'success',
+    ],
+    sdkMethods: ['auth.requestMagicLink', 'auth.exchange', 'auth.logout', 'on'],
+    props: {
+        heading: { type: 'string', attr: 'heading', default: 'Sign in', docs: 'Heading for the email step.' },
+        allowCodeEntry: {
+            type: 'boolean',
+            attr: 'allow-code-entry',
+            default: true,
+            docs: 'Offer a "enter the code" path alongside the emailed link (default true).',
+        },
+    },
+    events: {
+        tlAuthChanged: { detail: 'TlAuthChanged', docs: 'signed in or out ({ customer, authenticated })' },
+        tlMagicLinkSent: { detail: '{ email: string; }', docs: 'a link was requested for an email' },
+        tlError: { detail: '{ message: string; }', docs: 'request or code exchange failed' },
+    },
+    strings: STRINGS,
+    statuses: ['email', 'sent', 'code', 'verifying', 'signed-in'],
+    state: () => ({
+        phase: 'email',
+        email: '',
+        code: '',
+        busy: false,
+        error: null,
+        notice: null,
+        customer: null,
+        authAvailable: false,
+        urlCodeUsed: false,
+    }),
+    /**
+     * On screen: wait for the client, read who is signed in, follow both auth
+     * signals, then spend the code the link arrived with, if it did.
+     *
+     * The code is taken from the query whether or not it gets used, which is
+     * what makes it single use: arriving already signed in burns it, exactly as
+     * the component did.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed();
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const auth = client.getAuthManager?.();
+            if (!auth) {
+                ctx.actions.unsupported();
+                return;
+            }
+            ctx.setState({ authAvailable: true });
+            ctx.actions.syncFromClient();
+            // The session hydrates after the client publishes; follow both signals.
+            for (const event of ['auth:changed', 'session:changed']) {
+                const off = client.on?.(event, () => ctx.actions.syncFromClient());
+                if (typeof off === 'function')
+                    ctx.onTeardown(off);
+            }
+            const urlCode = ctx.state.urlCodeUsed ? null : ctx.query.get('code');
+            if (urlCode) {
+                ctx.setState({ urlCodeUsed: true });
+                if (!auth.authenticated)
+                    await ctx.actions.exchange(urlCode);
+            }
+        })();
+    },
+    status: ({ state }) => state.phase,
+    derive: ({ state, strings, props }) => ({
+        signedInEmail: state.customer?.email ?? strings.fallbackAccount,
+        inputsDisabled: state.busy || !state.authAvailable,
+        emailSubmitLabel: state.busy ? strings.sendingLink : strings.emailSubmit,
+        resendLabel: state.busy ? strings.resending : strings.resendLink,
+        codeSubmitLabel: state.busy ? strings.checking : strings.codeSubmit,
+        showCodeEntry: props.allowCodeEntry,
+    }),
+    // Named so `submitCode` can call `exchange`: the action context does not
+    // carry the actions, only a mount's does.
+    actions: (ctx) => {
+        /** The auth manager as it stands, or null on a client that has none. */
+        const authManager = () => ctx.optionalClient()?.getAuthManager?.() ?? null;
+        const self = {
+            /** Typing clears whatever the last attempt complained about. */
+            setEmail(value) {
+                ctx.setState({ email: value, error: null });
+            },
+            setCode(value) {
+                ctx.setState({ code: value, error: null });
+            },
+            /**
+             * Ask for a link. The response always reports success, so nothing here
+             * can reveal whether an account exists.
+             */
+            async requestLink(resend = false) {
+                const email = ctx.state.email.trim();
+                if (!email) {
+                    ctx.setState({ error: ctx.strings.enterEmail });
+                    return;
+                }
+                const auth = authManager();
+                if (!auth)
+                    return;
+                ctx.setState({ busy: true, error: null, notice: null });
+                try {
+                    await auth.requestMagicLink({ email });
+                    ctx.setState({ phase: 'sent', notice: resend ? ctx.strings.sentAgain : null });
+                    ctx.emit('tlMagicLinkSent', { email });
+                }
+                catch (err) {
+                    const message = (0, orders_js_1.errorMessage)(err, ctx.strings.requestFailed);
+                    ctx.setState({ error: message });
+                    ctx.emit('tlError', { message });
+                }
+                finally {
+                    ctx.setState({ busy: false });
+                }
+            },
+            /** The code the customer typed. */
+            async submitCode() {
+                await self.exchange(ctx.state.code.trim());
+            },
+            /**
+             * Trade a code for a session. On failure the step it came from decides
+             * where it goes back to: a typed code returns to the code step, a URL
+             * code (which arrives while the phase is still `email`) returns to the
+             * email step.
+             */
+            async exchange(code) {
+                if (!code) {
+                    ctx.setState({ error: ctx.strings.enterCode });
+                    return;
+                }
+                const auth = authManager();
+                if (!auth)
+                    return;
+                const previous = ctx.state.phase;
+                ctx.setState({ busy: true, error: null, phase: 'verifying' });
+                try {
+                    const res = (await auth.exchange(code));
+                    const customer = auth.customer ?? res?.customer ?? null;
+                    ctx.setState({ customer, phase: 'signed-in', code: '' });
+                    ctx.emit('tlAuthChanged', { customer, authenticated: true });
+                }
+                catch {
+                    ctx.setState({
+                        phase: previous === 'verifying' || previous === 'email' ? 'email' : 'code',
+                        error: ctx.strings.codeRejected,
+                    });
+                    ctx.emit('tlError', { message: ctx.strings.codeRejected });
+                }
+                finally {
+                    ctx.setState({ busy: false });
+                }
+            },
+            /**
+             * Sign out. A failure is swallowed on purpose: the session is gone from
+             * this page either way, so the customer is shown as signed out and the
+             * host is told so.
+             */
+            async signOut() {
+                const auth = authManager();
+                if (!auth)
+                    return;
+                ctx.setState({ busy: true });
+                try {
+                    await auth.logout();
+                }
+                catch {
+                    // Shown as signed out regardless, which is what the component did.
+                }
+                finally {
+                    ctx.setState({ busy: false, customer: null, phase: 'email' });
+                    ctx.emit('tlAuthChanged', { customer: null, authenticated: false });
+                }
+            },
+            /** The steps a buyer can walk between by hand. */
+            goTo(phase) {
+                ctx.setState({ phase });
+            },
+            /**
+             * The client says the session changed. Signed in wins outright; signed
+             * out only pulls the element back when it was showing the signed-in
+             * step, so a customer half way through typing a code is left alone.
+             */
+            syncFromClient() {
+                const auth = authManager();
+                if (!auth)
+                    return;
+                if (auth.authenticated) {
+                    ctx.setState({ customer: auth.customer ?? null, phase: 'signed-in' });
+                }
+                else if (ctx.state.phase === 'signed-in') {
+                    ctx.setState({ customer: null, phase: 'email' });
+                }
+            },
+            /** The host never started Live. Said on screen, and nowhere else. */
+            connectFailed() {
+                ctx.setState({ error: ctx.strings.unavailable });
+            },
+            /** A connector with no auth accessor cannot sign anybody in. */
+            unsupported() {
+                ctx.setState({ error: ctx.strings.unsupported });
+            },
+        };
+        return self;
+    },
+});