@ticketlayer/elements-core 0.1.0 → 0.2.0

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

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.myOrdersCore = void 0;
+/**
+ * `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).
+ */
+const define_js_1 = require("../define.js");
+const orders_js_1 = require("../orders.js");
+const promo_code_js_1 = require("./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',
+};
+exports.myOrdersCore = (0, define_js_1.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 = (0, orders_js_1.ticketCount)(order);
+            return {
+                id: order.id,
+                numberLabel: `${strings.orderPrefix}${order.orderNumber}`,
+                eventName: (0, orders_js_1.orderEventName)(order) ?? strings.unnamedEvent,
+                dateLabel: order.createdAt ? (0, orders_js_1.formatDate)(order.createdAt) : null,
+                countLabel: `${count} ${count === 1 ? strings.ticketSingular : strings.ticketPlural}`,
+                totalLabel: (0, orders_js_1.formatPrice)(order.total, order.currency),
+                statusLabel: (0, orders_js_1.statusLabel)(order.status),
+                statusTone: (0, orders_js_1.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 ((0, promo_code_js_1.isAuthError)(err)) {
+                        // Not signed in: fall through to the inline sign-in rather than an error.
+                        ctx.setState({ authenticated: false, orders: [] });
+                    }
+                    else {
+                        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 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;
+    },
+});