@voyantjs/promotions-ui 0.29.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { PromotionDialog, type PromotionDialogProps } from "./promotion-dialog.js";
+export { loadPromotionsPage, PromotionsPage } from "./promotions-page.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { PromotionDialog } from "./promotion-dialog.js";
+export { loadPromotionsPage, PromotionsPage } from "./promotions-page.js";

package/dist/promotion-dialog.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Create / edit dialog for a promotional offer.
+ *
+ * The discriminated-union scope picker is the trickiest piece here:
+ * a `kind` dropdown plus per-kind sub-fields rendered conditionally.
+ * Comma-separated text input for ID lists (productIds, marketIds, etc.)
+ * keeps the v1 UX simple — a future PR can swap in proper combobox-with-
+ * search components per scope kind.
+ */
+import { type PromotionalOfferRecord } from "@voyantjs/promotions-react";
+export interface PromotionDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** When provided, the dialog opens in edit mode. */
+    offer?: PromotionalOfferRecord;
+}
+export declare function PromotionDialog({ open, onOpenChange, offer }: PromotionDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=promotion-dialog.d.ts.map

package/dist/promotion-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promotion-dialog.d.ts","sourceRoot":"","sources":["../src/promotion-dialog.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EACL,KAAK,sBAAsB,EAM5B,MAAM,4BAA4B,CAAA;AAqBnC,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,oDAAoD;IACpD,KAAK,CAAC,EAAE,sBAAsB,CAAA;CAC/B;AAuKD,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,oBAAoB,2CAsSlF"}

package/dist/promotion-dialog.js

@@ -0,0 +1,230 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Create / edit dialog for a promotional offer.
+ *
+ * The discriminated-union scope picker is the trickiest piece here:
+ * a `kind` dropdown plus per-kind sub-fields rendered conditionally.
+ * Comma-separated text input for ID lists (productIds, marketIds, etc.)
+ * keeps the v1 UX simple — a future PR can swap in proper combobox-with-
+ * search components per scope kind.
+ */
+import { promotionalOfferScopeSchema, useCreatePromotion, useUpdatePromotion, } from "@voyantjs/promotions-react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
+import { useEffect, useState } from "react";
+const SCOPE_KINDS = [
+    "global",
+    "products",
+    "categories",
+    "destinations",
+    "markets",
+    "audiences",
+];
+const AUDIENCE_OPTIONS = [
+    "staff",
+    "customer",
+    "partner",
+    "supplier",
+];
+function emptyForm() {
+    return {
+        name: "",
+        slug: "",
+        description: "",
+        discountType: "percentage",
+        discountPercent: "",
+        discountAmountCents: "",
+        currency: "USD",
+        scopeKind: "global",
+        scopeIds: "",
+        scopeAudiences: ["customer"],
+        minPax: "",
+        validFrom: "",
+        validUntil: "",
+        code: "",
+        stackable: false,
+        active: true,
+    };
+}
+function offerToForm(offer) {
+    const base = emptyForm();
+    base.name = offer.name;
+    base.slug = offer.slug;
+    base.description = offer.description ?? "";
+    base.discountType = offer.discountType;
+    base.discountPercent = offer.discountPercent ?? "";
+    base.discountAmountCents =
+        offer.discountAmountCents != null ? String(offer.discountAmountCents) : "";
+    base.currency = offer.currency ?? "USD";
+    base.scopeKind = offer.scope.kind;
+    base.scopeIds = scopeIdsToString(offer.scope);
+    base.scopeAudiences = offer.scope.kind === "audiences" ? [...offer.scope.audiences] : ["customer"];
+    base.minPax = offer.conditions.minPax != null ? String(offer.conditions.minPax) : "";
+    base.validFrom = offer.validFrom ? toDateInputValue(offer.validFrom) : "";
+    base.validUntil = offer.validUntil ? toDateInputValue(offer.validUntil) : "";
+    base.code = offer.code ?? "";
+    base.stackable = offer.stackable;
+    base.active = offer.active;
+    return base;
+}
+function scopeIdsToString(scope) {
+    switch (scope.kind) {
+        case "products":
+            return scope.productIds.join(", ");
+        case "categories":
+            return scope.categoryIds.join(", ");
+        case "destinations":
+            return scope.destinationIds.join(", ");
+        case "markets":
+            return scope.marketIds.join(", ");
+        default:
+            return "";
+    }
+}
+function toDateInputValue(iso) {
+    // <input type="datetime-local"> wants `YYYY-MM-DDTHH:mm` (no timezone).
+    return iso.slice(0, 16);
+}
+function buildScope(state) {
+    switch (state.scopeKind) {
+        case "global":
+            return { kind: "global" };
+        case "products":
+            return { kind: "products", productIds: parseIds(state.scopeIds) };
+        case "categories":
+            return { kind: "categories", categoryIds: parseIds(state.scopeIds) };
+        case "destinations":
+            return { kind: "destinations", destinationIds: parseIds(state.scopeIds) };
+        case "markets":
+            return { kind: "markets", marketIds: parseIds(state.scopeIds) };
+        case "audiences":
+            return { kind: "audiences", audiences: state.scopeAudiences };
+    }
+}
+function parseIds(raw) {
+    return raw
+        .split(/[,\s]+/)
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0);
+}
+function buildPayload(state) {
+    if (!state.name.trim())
+        return { error: "Name is required" };
+    if (!state.slug.trim())
+        return { error: "Slug is required" };
+    if (state.discountType === "percentage" && !state.discountPercent) {
+        return { error: "Discount percent is required for percentage offers" };
+    }
+    if (state.discountType === "fixed_amount") {
+        if (!state.discountAmountCents) {
+            return { error: "Discount amount is required for fixed-amount offers" };
+        }
+        if (!state.currency.trim())
+            return { error: "Currency is required for fixed-amount offers" };
+    }
+    // Validate scope shape via Zod so the user gets clear errors when (e.g.)
+    // a products scope has an empty ID list.
+    const scope = buildScope(state);
+    const scopeResult = promotionalOfferScopeSchema.safeParse(scope);
+    if (!scopeResult.success) {
+        return { error: `Scope: ${scopeResult.error.issues[0]?.message ?? "invalid"}` };
+    }
+    const payload = {
+        name: state.name.trim(),
+        slug: state.slug.trim(),
+        description: state.description.trim() || null,
+        discountType: state.discountType,
+        discountPercent: state.discountType === "percentage" ? Number(state.discountPercent) : null,
+        discountAmountCents: state.discountType === "fixed_amount" ? Number(state.discountAmountCents) : null,
+        currency: state.discountType === "fixed_amount" ? state.currency.trim().toUpperCase() : null,
+        scope,
+        conditions: state.minPax ? { minPax: Number(state.minPax) } : {},
+        validFrom: state.validFrom ? new Date(state.validFrom).toISOString() : null,
+        validUntil: state.validUntil ? new Date(state.validUntil).toISOString() : null,
+        code: state.code.trim() || null,
+        stackable: state.stackable,
+        active: state.active,
+    };
+    return payload;
+}
+export function PromotionDialog({ open, onOpenChange, offer }) {
+    const [state, setState] = useState(emptyForm());
+    const [error, setError] = useState(null);
+    const createMutation = useCreatePromotion();
+    const updateMutation = useUpdatePromotion();
+    const isEdit = offer != null;
+    const isPending = createMutation.isPending || updateMutation.isPending;
+    // Re-seed form whenever the dialog opens with a different offer.
+    useEffect(() => {
+        if (!open)
+            return;
+        setError(null);
+        setState(offer ? offerToForm(offer) : emptyForm());
+    }, [open, offer]);
+    function setField(key, value) {
+        setState((prev) => ({ ...prev, [key]: value }));
+    }
+    async function handleSave() {
+        setError(null);
+        const result = buildPayload(state);
+        if ("error" in result) {
+            setError(result.error);
+            return;
+        }
+        try {
+            if (isEdit && offer) {
+                await updateMutation.mutateAsync({ id: offer.id, patch: result });
+            }
+            else {
+                await createMutation.mutateAsync(result);
+            }
+            onOpenChange(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[90vh] max-w-2xl overflow-y-auto", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit ? "Edit promotion" : "New promotion" }), _jsx(DialogDescription, { children: "Set discount, scope, and validity. Code-gated offers require a non-empty code; leave it blank for auto-applied offers." })] }), _jsxs("div", { className: "grid gap-4 py-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-name", children: "Name" }), _jsx(Input, { id: "promotion-name", value: state.name, onChange: (e) => setField("name", e.target.value), placeholder: "Spring Sale 2026" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-slug", children: "Slug" }), _jsx(Input, { id: "promotion-slug", value: state.slug, onChange: (e) => setField("slug", e.target.value), placeholder: "spring-sale-2026" })] })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-description", children: "Description" }), _jsx(Textarea, { id: "promotion-description", value: state.description, onChange: (e) => setField("description", e.target.value), rows: 2, placeholder: "Internal note \u2014 what this offer is for" })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { children: "Type" }), _jsxs(Select, { value: state.discountType, onValueChange: (v) => {
+                                                if (v === "percentage" || v === "fixed_amount")
+                                                    setField("discountType", v);
+                                            }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "percentage", children: "Percentage" }), _jsx(SelectItem, { value: "fixed_amount", children: "Fixed amount" })] })] })] }), state.discountType === "percentage" ? (_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-percent", children: "Percent" }), _jsx(Input, { id: "promotion-percent", type: "number", step: "0.01", min: "0", max: "100", value: state.discountPercent, onChange: (e) => setField("discountPercent", e.target.value), placeholder: "20" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-cents", children: "Amount (cents)" }), _jsx(Input, { id: "promotion-cents", type: "number", step: "1", min: "1", value: state.discountAmountCents, onChange: (e) => setField("discountAmountCents", e.target.value), placeholder: "500" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-currency", children: "Currency" }), _jsx(Input, { id: "promotion-currency", value: state.currency, onChange: (e) => setField("currency", e.target.value), placeholder: "USD", maxLength: 3 })] })] }))] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { children: "Scope" }), _jsxs(Select, { value: state.scopeKind, onValueChange: (v) => {
+                                        if (v != null && SCOPE_KINDS.includes(v)) {
+                                            setField("scopeKind", v);
+                                        }
+                                    }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SCOPE_KINDS.map((kind) => (_jsx(SelectItem, { value: kind, children: kind }, kind))) })] }), state.scopeKind === "global" ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Applies to every product." })) : null, (state.scopeKind === "products" ||
+                                    state.scopeKind === "categories" ||
+                                    state.scopeKind === "destinations" ||
+                                    state.scopeKind === "markets") && (_jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { htmlFor: "promotion-scope-ids", children: [scopeIdsLabel(state.scopeKind), " (comma-separated IDs)"] }), _jsx(Input, { id: "promotion-scope-ids", value: state.scopeIds, onChange: (e) => setField("scopeIds", e.target.value), placeholder: scopeIdsPlaceholder(state.scopeKind) })] })), state.scopeKind === "audiences" && (_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: "Audiences" }), _jsx("div", { className: "flex flex-wrap gap-3", children: AUDIENCE_OPTIONS.map((audience) => {
+                                                const selected = state.scopeAudiences.includes(audience);
+                                                return (_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
+                                                                const next = e.target.checked
+                                                                    ? [...state.scopeAudiences, audience]
+                                                                    : state.scopeAudiences.filter((a) => a !== audience);
+                                                                setField("scopeAudiences", next);
+                                                            } }), audience] }, audience));
+                                            }) })] }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-valid-from", children: "Valid from" }), _jsx(Input, { id: "promotion-valid-from", type: "datetime-local", value: state.validFrom, onChange: (e) => setField("validFrom", e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-valid-until", children: "Valid until" }), _jsx(Input, { id: "promotion-valid-until", type: "datetime-local", value: state.validUntil, onChange: (e) => setField("validUntil", e.target.value) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-code", children: "Code (optional)" }), _jsx(Input, { id: "promotion-code", value: state.code, onChange: (e) => setField("code", e.target.value), placeholder: "EARLYBIRD2026" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "promotion-min-pax", children: "Min pax (optional)" }), _jsx(Input, { id: "promotion-min-pax", type: "number", min: "1", step: "1", value: state.minPax, onChange: (e) => setField("minPax", e.target.value), placeholder: "4" })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "promotion-stackable", checked: state.stackable, onCheckedChange: (v) => setField("stackable", Boolean(v)) }), _jsx(Label, { htmlFor: "promotion-stackable", children: "Stackable with other offers" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "promotion-active", checked: state.active, onCheckedChange: (v) => setField("active", Boolean(v)) }), _jsx(Label, { htmlFor: "promotion-active", children: "Active" })] })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isPending, children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: isPending, children: isPending ? "Saving…" : isEdit ? "Save changes" : "Create" })] })] }) }));
+}
+function scopeIdsLabel(kind) {
+    switch (kind) {
+        case "products":
+            return "Product IDs";
+        case "categories":
+            return "Category IDs";
+        case "destinations":
+            return "Destination IDs";
+        case "markets":
+            return "Market IDs";
+    }
+}
+function scopeIdsPlaceholder(kind) {
+    switch (kind) {
+        case "products":
+            return "prod_xxx, prod_yyy";
+        case "categories":
+            return "cat_xxx";
+        case "destinations":
+            return "dest_xxx";
+        case "markets":
+            return "mkt_xxx";
+    }
+}

package/dist/promotions-page.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Operator-facing promotions list page.
+ *
+ * Lists every promotional offer with its scope, discount, validity, and
+ * status. Edit-on-click opens the create/edit dialog (PromotionDialog).
+ *
+ * v1 limitations: no separate detail page, no redemption-history view —
+ * the list + form covers the operator-essential capability. Detail +
+ * redemption views can ship as follow-up commits.
+ */
+import type { QueryClient } from "@tanstack/react-query";
+import { type PromotionsClientOptions } from "@voyantjs/promotions-react";
+export declare function loadPromotionsPage(queryClient: QueryClient, client?: Partial<PromotionsClientOptions>): Promise<{
+    data: {
+        id: string;
+        name: string;
+        slug: string;
+        description: string | null;
+        discountType: "percentage" | "fixed_amount";
+        discountPercent: string | null;
+        discountAmountCents: number | null;
+        currency: string | null;
+        scope: {
+            kind: "global";
+        } | {
+            kind: "products";
+            productIds: string[];
+        } | {
+            kind: "categories";
+            categoryIds: string[];
+        } | {
+            kind: "destinations";
+            destinationIds: string[];
+        } | {
+            kind: "markets";
+            marketIds: string[];
+        } | {
+            kind: "audiences";
+            audiences: ("staff" | "customer" | "partner" | "supplier")[];
+        };
+        conditions: {
+            [x: string]: unknown;
+            minPax?: number | undefined;
+        };
+        validFrom: string | null;
+        validUntil: string | null;
+        code: string | null;
+        stackable: boolean;
+        active: boolean;
+        metadata: Record<string, unknown> | null;
+        createdAt: string;
+        updatedAt: string;
+    }[];
+    total: number;
+    limit: number;
+    offset: number;
+}>;
+export declare function PromotionsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=promotions-page.d.ts.map

package/dist/promotions-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promotions-page.d.ts","sourceRoot":"","sources":["../src/promotions-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAKL,KAAK,uBAAuB,EAE7B,MAAM,4BAA4B,CAAA;AAOnC,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,EACxB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK1C;AAED,wBAAgB,cAAc,4CA4G7B"}

package/dist/promotions-page.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPromotionsClientOptions, getPromotionsListQueryOptions, usePromotionsList, } from "@voyantjs/promotions-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { Plus } from "lucide-react";
+import { useMemo, useState } from "react";
+import { PromotionDialog } from "./promotion-dialog.js";
+export function loadPromotionsPage(queryClient, client) {
+    return queryClient.ensureQueryData(getPromotionsListQueryOptions({ limit: 50, offset: 0 }, createPromotionsClientOptions(client)));
+}
+export function PromotionsPage() {
+    const { data, isPending, error } = usePromotionsList({ limit: 50, offset: 0 });
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingOffer, setEditingOffer] = useState();
+    const offers = data?.data ?? [];
+    const summary = useMemo(() => {
+        const active = offers.filter((o) => o.active).length;
+        const codeGated = offers.filter((o) => o.code != null).length;
+        return { total: offers.length, active, codeGated };
+    }, [offers]);
+    function openCreate() {
+        setEditingOffer(undefined);
+        setDialogOpen(true);
+    }
+    function openEdit(offer) {
+        setEditingOffer(offer);
+        setDialogOpen(true);
+    }
+    return (_jsxs("div", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Promotions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Auto-applied catalog discounts and code-redeemed offers." })] }), _jsxs(Button, { onClick: openCreate, children: [_jsx(Plus, { className: "mr-2 size-4" }), "New promotion"] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsx(SummaryCard, { label: "Total", value: summary.total }), _jsx(SummaryCard, { label: "Active", value: summary.active }), _jsx(SummaryCard, { label: "Code-gated", value: summary.codeGated })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "All offers" }) }), _jsx(CardContent, { children: error ? (_jsxs("p", { className: "text-sm text-destructive", children: ["Failed to load: ", error instanceof Error ? error.message : String(error)] })) : isPending ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" })) : offers.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No promotions yet. Create your first offer to get started." })) : (_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "text-left text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "py-2 pr-4", children: "Name" }), _jsx("th", { className: "py-2 pr-4", children: "Scope" }), _jsx("th", { className: "py-2 pr-4", children: "Discount" }), _jsx("th", { className: "py-2 pr-4", children: "Validity" }), _jsx("th", { className: "py-2 pr-4", children: "Code" }), _jsx("th", { className: "py-2 pr-4", children: "Status" })] }) }), _jsx("tbody", { children: offers.map((offer) => (_jsxs("tr", { className: "cursor-pointer border-t hover:bg-muted/40", onClick: () => openEdit(offer), children: [_jsx("td", { className: "py-2 pr-4 font-medium", children: offer.name }), _jsx("td", { className: "py-2 pr-4 text-muted-foreground", children: summarizeScope(offer.scope) }), _jsx("td", { className: "py-2 pr-4", children: summarizeDiscount(offer) }), _jsx("td", { className: "py-2 pr-4 text-muted-foreground", children: summarizeValidity(offer.validFrom, offer.validUntil) }), _jsx("td", { className: "py-2 pr-4 font-mono text-xs", children: offer.code ?? "—" }), _jsxs("td", { className: "py-2 pr-4", children: [_jsx(Badge, { variant: offer.active ? "default" : "outline", children: offer.active ? "active" : "archived" }), offer.stackable ? (_jsx(Badge, { variant: "secondary", className: "ml-2", children: "stackable" })) : null] })] }, offer.id))) })] })) })] }), _jsx(PromotionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, offer: editingOffer })] }));
+}
+function SummaryCard({ label, value }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-1 py-4", children: [_jsx("span", { className: "text-xs uppercase text-muted-foreground", children: label }), _jsx("span", { className: "text-2xl font-semibold", children: value })] }) }));
+}
+function summarizeScope(scope) {
+    switch (scope.kind) {
+        case "global":
+            return "Global";
+        case "products":
+            return `${scope.productIds.length} product${scope.productIds.length === 1 ? "" : "s"}`;
+        case "categories":
+            return `${scope.categoryIds.length} categor${scope.categoryIds.length === 1 ? "y" : "ies"}`;
+        case "destinations":
+            return `${scope.destinationIds.length} destination${scope.destinationIds.length === 1 ? "" : "s"}`;
+        case "markets":
+            return `Markets: ${scope.marketIds.join(", ")}`;
+        case "audiences":
+            return `Audiences: ${scope.audiences.join(", ")}`;
+    }
+}
+function summarizeDiscount(offer) {
+    if (offer.discountType === "percentage") {
+        return `${offer.discountPercent ?? "?"}%`;
+    }
+    const cents = offer.discountAmountCents ?? 0;
+    const currency = offer.currency ?? "";
+    return `${(cents / 100).toFixed(2)} ${currency}`.trim();
+}
+function summarizeValidity(from, until) {
+    if (from == null && until == null)
+        return "Anytime";
+    const fmt = (iso) => iso.slice(0, 10);
+    if (from == null)
+        return `Until ${fmt(until ?? "")}`;
+    if (until == null)
+        return `From ${fmt(from)}`;
+    return `${fmt(from)} → ${fmt(until)}`;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@voyantjs/promotions-ui",
+  "version": "0.29.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/promotions-ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/*.tsx"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@voyantjs/promotions-react": "workspace:*",
+    "@voyantjs/ui": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.96.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@voyantjs/promotions-react": "workspace:*",
+    "@voyantjs/ui": "workspace:*",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2",
+    "zod": "^4.3.6"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      },
+      "./components/*": {
+        "types": "./dist/*.d.ts",
+        "import": "./dist/*.js",
+        "default": "./dist/*.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}