@ticketlayer/elements-core 0.1.0 → 0.2.0

package/dist/esm/cores/login.js

@@ -0,0 +1,306 @@
+/**
+ * `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).
+ */
+import { defineElement } from '../define.js';
+import { errorMessage } from '../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',
+};
+export const loginCore = 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 = 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;
+    },
+});

package/dist/esm/cores/my-orders.d.ts

@@ -0,0 +1,63 @@
+import { type StatusTone, type TlOrderData } from '../orders.js';
+export interface MyOrdersProps {
+    emptyMessage: string;
+    columns: number;
+}
+export interface MyOrdersState {
+    orders: TlOrderData[];
+    authenticated: boolean;
+    loading: boolean;
+    error: string | null;
+    expandedId: string | null;
+}
+export interface MyOrdersRow {
+    id: string;
+    /** "Order ORD-AAA", as the row's own heading. */
+    numberLabel: string;
+    eventName: string;
+    /** The order date, formatted, or null when the order carries none. */
+    dateLabel: string | null;
+    /** "2 tickets", pluralised. */
+    countLabel: string;
+    totalLabel: string;
+    statusLabel: string;
+    statusTone: StatusTone;
+    expanded: boolean;
+}
+export interface MyOrdersDerived {
+    rows: MyOrdersRow[];
+}
+export type MyOrdersStatus = 'loading' | 'signed-out' | 'error' | 'empty' | 'ready';
+declare const STRINGS: {
+    signInTitle: string;
+    signInText: string;
+    errorTitle: string;
+    emptyTitle: string;
+    orderPrefix: string;
+    unnamedEvent: string;
+    ticketSingular: string;
+    ticketPlural: string;
+    unavailable: string;
+    noOrdersManager: string;
+    loadFailed: string;
+};
+export type MyOrdersStrings = typeof STRINGS;
+export declare const myOrdersCore: import("../define.js").ElementCore<MyOrdersProps, MyOrdersState, MyOrdersDerived, {
+    load(): Promise<void>;
+    syncAuth(): void;
+    toggle(orderId: string): void;
+    connectFailed(): void;
+}, MyOrdersStatus, {
+    signInTitle: string;
+    signInText: string;
+    errorTitle: string;
+    emptyTitle: string;
+    orderPrefix: string;
+    unnamedEvent: string;
+    ticketSingular: string;
+    ticketPlural: string;
+    unavailable: string;
+    noOrdersManager: string;
+    loadFailed: string;
+}>;
+export {};

package/dist/esm/cores/my-orders.js

@@ -0,0 +1,218 @@
+/**
+ * `tl-my-orders`: the signed-in customer's orders, one expandable row each.
+ *
+ * The first core whose whole shape is decided by whether somebody is signed
+ * in. It reads the client's auth manager once, follows `auth:changed` and
+ * `session:changed` from there, and lists the orders whenever the answer turns
+ * from signed out to signed in. Both subscriptions are bound in its own
+ * `mount` and handed to `ctx.onTeardown` (TKT-197), so a remount cannot leave
+ * four listeners on the bus.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * three things that read like accidents and are not:
+ *
+ *  - a connector with no auth accessor is treated as SIGNED IN, and a 401 from
+ *    the listing is what decides otherwise. That is deliberate: an older
+ *    connector has no way to answer the question, and showing the sign-in form
+ *    to someone who is signed in is the worse failure.
+ *  - a 401 or 403 from the listing is not an error. It drops back to the
+ *    signed-out view, which renders the inline sign-in, and emits nothing.
+ *  - the element does NOT announce that the host never started Live. It shows
+ *    "Orders are not available right now" and stays quiet, where `tl-cart`
+ *    emits `tlError` for the same condition, because the component's wait and
+ *    its read were in different places. Kept rather than made consistent.
+ *
+ * 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).
+ */
+import { defineElement } from '../define.js';
+import { errorMessage, formatDate, formatPrice, orderEventName, statusLabel, statusTone, ticketCount, } from '../orders.js';
+import { isAuthError } from './promo-code.js';
+const STRINGS = {
+    signInTitle: 'Sign in to see your orders',
+    signInText: 'Your tickets and order history live in your account.',
+    errorTitle: 'Could not load your orders',
+    emptyTitle: 'No orders yet',
+    orderPrefix: 'Order ',
+    unnamedEvent: 'Order',
+    ticketSingular: 'ticket',
+    ticketPlural: 'tickets',
+    unavailable: 'Orders are not available right now',
+    noOrdersManager: 'Orders are not available',
+    loadFailed: 'Failed to load your orders',
+};
+export const myOrdersCore = defineElement({
+    tag: 'tl-my-orders',
+    docs: "The signed-in customer's orders: event, date, ticket count, total and status, each row expanding to its tickets.",
+    category: 'account',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'error-foreground',
+        'font-family',
+        'foreground',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-lg',
+        'secondary',
+        'secondary-foreground',
+        'spacing-1',
+        'spacing-3',
+        'spacing-4',
+        'spacing-8',
+        'success',
+        'success-foreground',
+        'warning',
+        'warning-foreground',
+    ],
+    sdkMethods: ['orders.mine', 'auth.authenticated', 'on'],
+    props: {
+        emptyMessage: {
+            type: 'string',
+            attr: 'empty-message',
+            default: "When you buy tickets they'll show up here, ready to view and download.",
+            docs: 'Copy for the empty state.',
+        },
+        columns: { type: 'number', attr: 'columns', default: 2, docs: 'Columns for the expanded ticket grid.' },
+    },
+    events: {
+        tlOrderSelect: { detail: '{ orderId: string; }', docs: 'a row was expanded ({ orderId })' },
+        tlError: { detail: '{ message: string; }', docs: 'the orders could not be loaded' },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'signed-out', 'error', 'empty', 'ready'],
+    state: () => ({ orders: [], authenticated: false, loading: true, error: null, expandedId: null }),
+    /**
+     * On screen: wait for the client, read who is signed in, follow both auth
+     * signals, then list the orders if there is somebody to list them for.
+     *
+     * The session hydrates after the client publishes, so `auth:changed` and
+     * `session:changed` are both followed: the connector raises one or the other
+     * depending on whether the customer signed in here or arrived with a session
+     * already warm.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed();
+                return;
+            }
+            if (!ctx.active())
+                return;
+            // An older connector has no auth accessor and cannot answer, so assume
+            // signed in and let a 401 from the listing decide.
+            const auth = client.getAuthManager?.();
+            ctx.setState({ authenticated: auth ? auth.authenticated : true });
+            for (const event of ['auth:changed', 'session:changed']) {
+                const off = client.on?.(event, () => ctx.actions.syncAuth());
+                if (typeof off === 'function')
+                    ctx.onTeardown(off);
+            }
+            if (ctx.state.authenticated)
+                await ctx.actions.load();
+            else
+                ctx.setState({ loading: false });
+        })();
+    },
+    status: ({ state }) => state.loading
+        ? 'loading'
+        : !state.authenticated
+            ? 'signed-out'
+            : state.error
+                ? 'error'
+                : state.orders.length === 0
+                    ? 'empty'
+                    : 'ready',
+    derive: ({ state, strings }) => ({
+        rows: state.orders.map((order) => {
+            const count = ticketCount(order);
+            return {
+                id: order.id,
+                numberLabel: `${strings.orderPrefix}${order.orderNumber}`,
+                eventName: orderEventName(order) ?? strings.unnamedEvent,
+                dateLabel: order.createdAt ? formatDate(order.createdAt) : null,
+                countLabel: `${count} ${count === 1 ? strings.ticketSingular : strings.ticketPlural}`,
+                totalLabel: formatPrice(order.total, order.currency),
+                statusLabel: statusLabel(order.status),
+                statusTone: statusTone(order.status),
+                expanded: state.expandedId === order.id,
+            };
+        }),
+    }),
+    // The action map is named so `syncAuth` can call `load`: the action context
+    // does not carry the actions (only a mount's does), and listing the orders
+    // when the session turns warm is the same work the mount does.
+    actions: (ctx) => {
+        const self = {
+            /** List the orders. A 401 means signed out, which is not an error. */
+            async load() {
+                const client = ctx.optionalClient();
+                if (!client)
+                    return;
+                try {
+                    ctx.setState({ loading: true, error: null });
+                    const orders = client.getOrdersManager?.();
+                    if (!orders)
+                        throw new Error(ctx.strings.noOrdersManager);
+                    const list = (await orders.mine());
+                    ctx.setState({ orders: list ?? [], authenticated: true });
+                }
+                catch (err) {
+                    if (isAuthError(err)) {
+                        // Not signed in: fall through to the inline sign-in rather than an error.
+                        ctx.setState({ authenticated: false, orders: [] });
+                    }
+                    else {
+                        const message = errorMessage(err, ctx.strings.loadFailed);
+                        ctx.setState({ error: message });
+                        ctx.emit('tlError', { message });
+                    }
+                }
+                finally {
+                    ctx.setState({ loading: false });
+                }
+            },
+            /**
+             * The client says the session changed. Listing on the way in and clearing
+             * on the way out; an unchanged answer does nothing, which is what keeps a
+             * burst of `session:changed` from listing the orders four times.
+             */
+            syncAuth() {
+                const auth = ctx.optionalClient()?.getAuthManager?.();
+                if (!auth)
+                    return;
+                const was = ctx.state.authenticated;
+                ctx.setState({ authenticated: auth.authenticated });
+                if (auth.authenticated && !was)
+                    void self.load();
+                else if (!auth.authenticated && was)
+                    ctx.setState({ orders: [], expandedId: null });
+            },
+            /** Open a row, or close the open one. Only opening is announced. */
+            toggle(orderId) {
+                const opening = ctx.state.expandedId !== orderId;
+                ctx.setState({ expandedId: opening ? orderId : null });
+                if (opening)
+                    ctx.emit('tlOrderSelect', { orderId });
+            },
+            /**
+             * The host never produced a client. Said on screen and nowhere else: the
+             * component did not emit `tlError` here, because its wait for the client
+             * was outside the try block that announces a failure.
+             */
+            connectFailed() {
+                ctx.setState({ loading: false, error: ctx.strings.unavailable });
+            },
+        };
+        return self;
+    },
+});