@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/types/utils/order-summary.d.ts

@@ -1,101 +1,18 @@
 /**
- * Shared helpers for the order-facing components (tl-order-confirmation,
- * tl-my-orders). The sales order view carries line items, totals and tickets
- * but no event name, occurrence date or customer email, so these derive what
- * they can from the order and resolve the rest through the SDK.
- */
-import type { TicketlayerSDK } from './sdk-connector';
-export interface TlOrderItem {
-    name: string;
-    description?: string | null;
-    type?: string;
-    quantity: number;
-    unitPrice: number | string;
-    subtotal: number | string;
-}
-export interface TlOrderTicketRef {
-    id: string;
-    name: string;
-    eventOccurrenceId: string | null;
-}
-export interface TlOrderData {
-    id: string;
-    orderNumber: string;
-    status: string;
-    paymentStatus?: string;
-    currency: string;
-    items: TlOrderItem[];
-    subtotal: number | string;
-    totalFees?: number | string;
-    totalTax?: number | string;
-    totalDiscounts?: number | string;
-    total: number | string;
-    tickets?: TlOrderTicketRef[];
-    createdAt?: string;
-    eventName?: string | null;
-    customerEmail?: string | null;
-    customer?: {
-        email?: string | null;
-    } | null;
-}
-export interface TlResolvedOccurrence {
-    eventId: string;
-    eventName: string;
-    startsAt: string | null;
-}
-/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
-export declare function formatPrice(value: number | string | null | undefined, currency?: string): string;
-export declare function formatDateTime(iso: string): string;
-export declare function formatDate(iso: string): string;
-/** Line items that are tickets (fees, taxes and discounts have their own type). */
-export declare function ticketItems(order: TlOrderData): TlOrderItem[];
-export declare function ticketCount(order: TlOrderData): number;
-/** Event name as the order view exposes it: the first ticket line's name. */
-export declare function orderEventName(order: TlOrderData): string | null;
-export declare function orderCustomerEmail(order: TlOrderData | null, customer: unknown): string | null;
-export declare function statusLabel(status: string | undefined): string;
-export type StatusTone = 'success' | 'info' | 'warning' | 'error' | 'muted';
-export declare function statusTone(status: string | undefined): StatusTone;
-export declare function errorMessage(err: unknown, fallback: string): string;
-/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
-export declare function isAuthError(err: unknown): boolean;
-/**
- * Find the event and start time for an occurrence id. The order view only
- * carries the occurrence id, so this walks the channel's listings (cached by
- * live-api) until one owns the occurrence. Best effort: null when not found.
- */
-export declare function resolveOccurrence(sdk: TicketlayerSDK, occurrenceId: string, maxEvents?: number): Promise<TlResolvedOccurrence | null>;
-/**
- * The money rows the order views render.
- *
- * Two things about the sales order view drive this (backstage-api
- * `src/domains/orders/services/order-line-items.service.ts`, `views/index.ts`):
+ * The order helpers, as the components have always imported them.
  *
- *  - the fee is a LINE ITEM, `type: 'fee'`, named after the channel fee
- *    profile's `serviceFeeLabel` (the API falls back to "Service Fee"). That
- *    name is the only place the label reaches a buyer-facing response.
- *  - `order.subtotal` INCLUDES the fee line, because the order's totals sum
- *    every non-discount, non-tax line into it; and `order.totalFees` is set at
- *    order creation and never rewritten by the recalculation, so it reads 0 on
- *    a real order that charged a fee. Rendering "Subtotal" straight off the
- *    order therefore hides the fee inside it, which is the bug this fixes.
+ * Everything here now lives in `@ticketlayer/elements-core`
+ * (`src/orders.ts`): the order shape, the money rows, the status tone, the
+ * date and price formatting and the occurrence lookup all moved across with
+ * the split of `tl-my-orders` and `tl-order-confirmation` (TKT-69), so a
+ * native harness answers the same questions the same way. This module stays as
+ * the import path, unchanged for callers, because `tl-order-tickets` and
+ * `tl-ticket` are not split yet and read these helpers from here.
  *
- * So the fee comes from the fee lines first and `totalFees` only as a
- * fallback, the subtotal is the ticket lines alone, and the total is the
- * order's own figure - never a sum of ours.
+ * `resolveOccurrence` is the one signature that moved: it takes the core's
+ * `ElementClient` rather than this package's `TicketlayerSDK`. A
+ * `TicketlayerSDK` satisfies that shape, so every existing call still
+ * compiles, which is why it is re-exported rather than wrapped.
  */
-export interface TlOrderTotals {
-    currency: string;
-    /** Ticket lines only, in minor units: the fee is not folded in. */
-    subtotal: number;
-    fees: number;
-    feeLabel: string;
-    showFee: boolean;
-    tax: number;
-    discount: number;
-    /** What the buyer was charged, as the order reports it. */
-    total: number;
-}
-export declare function orderTotals(order: TlOrderData | null | undefined): TlOrderTotals;
-/** The rows add up to the total the order reports. Asserted in the specs. */
-export declare function totalsAgree(totals: TlOrderTotals): boolean;
+export { errorMessage, formatDate, formatDateTime, formatPrice, isAuthError, orderCustomerEmail, orderEventName, orderTotals, resolveOccurrence, statusLabel, statusTone, ticketCount, ticketItems, totalsAgree, } from '@ticketlayer/elements-core';
+export type { StatusTone, TlOrderData, TlOrderItem, TlOrderTicketRef, TlOrderTotals, TlResolvedOccurrence, } from '@ticketlayer/elements-core';

package/dist/types/utils/testing/deep-text.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The text an element actually shows, shadow roots included.
+ *
+ * `textContent` stops at a shadow boundary, and every element here renders
+ * into one (and several compose others: `tl-cart-drawer` holds a `tl-cart`,
+ * `tl-order-tickets` a grid of `tl-ticket`). A check that an element rendered
+ * something has to see through that, or it reads an empty string from an
+ * element that is perfectly full.
+ *
+ * Used by the stories' `expectRendered` in the browser and by
+ * story-coverage.spec.tsx in jsdom, so both are asking the same question.
+ */
+export declare function deepText(node: Node | null | undefined): string;

package/dist/types/utils/testing/fixtures.d.ts

@@ -0,0 +1,225 @@
+export declare const FIXTURE_CUSTOMER: {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+};
+/** `events.list` items, i.e. what a card is handed by `tl-event-list`. */
+export declare const FIXTURE_EVENT_CARDS: {
+    id: string;
+    name: string;
+    shortDescription: string;
+    availabilityStatus: string;
+    venue: {
+        id: string;
+        name: string;
+        city: string;
+    };
+    nextOccurrence: {
+        startsAt: string;
+    };
+}[];
+/** `events.get` details, keyed by event id. */
+export declare const FIXTURE_EVENT_DETAILS: Record<string, unknown>;
+/** `events.getTicketTypes` for `evoc_1`. */
+export declare const FIXTURE_TICKET_TYPES: {
+    id: string;
+    occurrenceId: string;
+    name: string;
+    description: string;
+    price: number;
+    currency: string;
+    availableQuantity: number;
+    maxPerOrder: number;
+    minPerOrder: number;
+    availabilityStatus: string;
+    sortOrder: number;
+}[];
+/** A cart with lines, a fee the surface quoted and a discount. */
+export declare const FIXTURE_CART: {
+    items: {
+        id: string;
+        ticketTypeId: string;
+        ticketTypeName: string;
+        eventName: string;
+        occurrenceDate: string;
+        quantity: number;
+        unitPrice: number;
+        totalPrice: number;
+        subtotal: number;
+        currency: string;
+    }[];
+    itemCount: number;
+    subtotal: number;
+    fees: number;
+    discount: number;
+    total: number;
+    hasFees: boolean;
+    feeLabel: string;
+    currency: string;
+};
+/** An empty cart, for the states an element only reaches with nothing in it. */
+export declare const FIXTURE_EMPTY_CART: {
+    items: never[];
+    itemCount: number;
+    subtotal: number;
+    fees: number;
+    discount: number;
+    total: number;
+    hasFees: boolean;
+    feeLabel: null;
+    currency: string;
+};
+/** Passes on the order: what `tl-ticket` renders and `tl-order-tickets` grids. */
+export declare const FIXTURE_TICKETS: {
+    id: string;
+    barcode: string;
+    type: string;
+    status: string;
+    holderName: string;
+    name: string;
+    admissionStatus: string;
+    eventOccurrenceId: string;
+    seatLabel: string;
+}[];
+export declare const FIXTURE_ORDER: {
+    id: string;
+    orderNumber: string;
+    status: string;
+    paymentStatus: string;
+    currency: string;
+    items: {
+        name: string;
+        description: null;
+        type: string;
+        quantity: number;
+        unitPrice: number;
+        subtotal: number;
+    }[];
+    subtotal: number;
+    totalFees: number;
+    totalTax: number;
+    total: number;
+    tickets: {
+        id: string;
+        barcode: string;
+        type: string;
+        status: string;
+        holderName: string;
+        name: string;
+        admissionStatus: string;
+        eventOccurrenceId: string;
+        seatLabel: string;
+    }[];
+    expiresAt: null;
+    createdAt: string;
+};
+export declare const FIXTURE_ORDERS: {
+    id: string;
+    orderNumber: string;
+    status: string;
+    paymentStatus: string;
+    currency: string;
+    items: {
+        name: string;
+        description: null;
+        type: string;
+        quantity: number;
+        unitPrice: number;
+        subtotal: number;
+    }[];
+    subtotal: number;
+    totalFees: number;
+    totalTax: number;
+    total: number;
+    tickets: {
+        id: string;
+        barcode: string;
+        type: string;
+        status: string;
+        holderName: string;
+        name: string;
+        admissionStatus: string;
+        eventOccurrenceId: string;
+        seatLabel: string;
+    }[];
+    expiresAt: null;
+    createdAt: string;
+}[];
+/**
+ * The datasets a story may ask for by name, through
+ * `parameters.ticketlayer.dataset`. Keep the set small: a dataset is a state
+ * of the whole channel, not a per-element fixture.
+ */
+export declare const FIXTURE_DATASETS: {
+    /** Signed in, three events on sale, a cart with lines and two orders. */
+    default: {
+        cart: {
+            get: () => Promise<{
+                items: {
+                    id: string;
+                    ticketTypeId: string;
+                    ticketTypeName: string;
+                    eventName: string;
+                    occurrenceDate: string;
+                    quantity: number;
+                    unitPrice: number;
+                    totalPrice: number;
+                    subtotal: number;
+                    currency: string;
+                }[];
+                itemCount: number;
+                subtotal: number;
+                fees: number;
+                discount: number;
+                total: number;
+                hasFees: boolean;
+                feeLabel: string;
+                currency: string;
+            }>;
+        };
+        authState: {
+            customer: {
+                id: string;
+                email: string;
+                firstName: string;
+                lastName: string;
+            };
+            authenticated: true;
+        };
+        events?: Partial<ReturnType<import("../sdk-connector").TicketlayerSDK["getEventsManager"]>>;
+        orders?: Partial<NonNullable<ReturnType<NonNullable<import("../sdk-connector").TicketlayerSDK["getOrdersManager"]>>>>;
+        auth?: Partial<NonNullable<ReturnType<NonNullable<import("../sdk-connector").TicketlayerSDK["getAuthManager"]>>>>;
+        presale?: Partial<NonNullable<ReturnType<NonNullable<import("../sdk-connector").TicketlayerSDK["getPresaleManager"]>>>>;
+        withoutAuth?: boolean;
+        withoutPresale?: boolean;
+    };
+    /** Nobody signed in and nothing in the cart. */
+    'signed-out': {
+        cart: {
+            get: () => Promise<{
+                items: never[];
+                itemCount: number;
+                subtotal: number;
+                fees: number;
+                discount: number;
+                total: number;
+                hasFees: boolean;
+                feeLabel: null;
+                currency: string;
+            }>;
+        };
+        authState: {
+            customer: null;
+            authenticated: false;
+        };
+        events?: Partial<ReturnType<import("../sdk-connector").TicketlayerSDK["getEventsManager"]>>;
+        orders?: Partial<NonNullable<ReturnType<NonNullable<import("../sdk-connector").TicketlayerSDK["getOrdersManager"]>>>>;
+        auth?: Partial<NonNullable<ReturnType<NonNullable<import("../sdk-connector").TicketlayerSDK["getAuthManager"]>>>>;
+        presale?: Partial<NonNullable<ReturnType<NonNullable<import("../sdk-connector").TicketlayerSDK["getPresaleManager"]>>>>;
+        withoutAuth?: boolean;
+        withoutPresale?: boolean;
+    };
+};
+export type FixtureDataset = keyof typeof FIXTURE_DATASETS;
+export declare const FIXTURE_DATASET_NAMES: FixtureDataset[];

package/dist/types/utils/testing/mock-sdk.d.ts

@@ -3,13 +3,26 @@
  * slot the sdk-connector reads, with an in-memory bus so tests can push
  * SDK events (cart:updated, auth:changed, checkout:completed) at components.
  */
-import { type TicketlayerSDK } from '../sdk-connector';
+import { type ModalOptions, type TicketlayerSDK } from '../sdk-connector';
+/** One `openModal` an element asked for, with the callbacks it passed. */
+export interface MockModalCall {
+    kind: 'event' | 'checkout';
+    /** The event the modal was opened for, for `kind: 'event'`. */
+    eventId?: string;
+    options: ModalOptions;
+}
 export interface MockSDK extends TicketlayerSDK {
     emit(event: string, payload?: unknown): void;
     authState: {
         customer: unknown | null;
         authenticated: boolean;
     };
+    /**
+     * Every modal an element has asked for, oldest first. The wrapper elements
+     * report the modal's outcome to the page, so a test replies by calling the
+     * callbacks recorded here.
+     */
+    modalCalls: MockModalCall[];
 }
 export interface MockSDKOptions {
     events?: Partial<ReturnType<TicketlayerSDK['getEventsManager']>>;

package/dist/types/utils/web-query.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `window.location.search` as the cores' query seam.
+ *
+ * Two elements are the far end of a link: `tl-login` exchanges the `?code=` a
+ * magic-link email lands on, and `tl-order-confirmation` finds its order in
+ * `?orderId=` and reads `?redirect_status=` to know whether the payment
+ * provider sent the buyer back on a success. What they read is theirs to
+ * decide; where a parameter comes from is the runtime's, and a React Native
+ * harness will answer the same question from its deep-link router rather than
+ * from an address bar (AGENTS.md: a harness renders and forwards, it does not
+ * decide).
+ *
+ * Read per call rather than parsed once, because a host may have pushed a new
+ * URL since the element mounted, which is what `window.location` reports and
+ * what the components read.
+ */
+import type { ElementQuery } from '@ticketlayer/elements-core';
+export declare const webQuery: ElementQuery;

package/dist/types/utils/web-storage.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `localStorage` as the cores' storage seam.
+ *
+ * A core is allowed to remember a little between visits (`tl-cart-badge` keeps
+ * the last item count so the badge does not flash empty), and where that is
+ * written down is per runtime: the browser has `localStorage`, React Native
+ * will have something asynchronous of its own. So the core states what it
+ * remembers and the harness supplies the store (AGENTS.md: a harness renders
+ * and forwards, it does not decide).
+ *
+ * Everything is wrapped: `localStorage` throws on access in a sandboxed frame
+ * and in Safari's private mode, and a component that cannot remember a number
+ * still has to render.
+ */
+import type { ElementStorage } from '@ticketlayer/elements-core';
+export declare const webStorage: ElementStorage;