@mohasinac/appkit 2.6.0 → 2.6.2

package/dist/features/products/components/PrizeDrawDetailPageView.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { orderRepository, productRepository } from "../../../repositories";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+import { Container, Div, Heading, Main, RichText, Row, Section, Span, Stack, Text, } from "../../../ui";
+import { PreOrderDetailView } from "./PreOrderDetailView";
+import { BuyBar } from "./BuyBar";
+import { ProductTabsShell } from "./ProductTabsShell";
+import { ShareButton } from "./ShareButton";
+import { PrizeDrawCollage } from "./PrizeDrawCollage";
+import { PrizeDrawEntryActions } from "./PrizeDrawEntryActions";
+import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { formatCurrency } from "../../../utils/number.formatter";
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+function statusLabel(s) {
+    switch (s) {
+        case "open":
+            return "Reveal open";
+        case "closed":
+            return "Draw closed";
+        case "pending":
+        default:
+            return "Reveal pending";
+    }
+}
+function statusClass(s) {
+    switch (s) {
+        case "open":
+            return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300";
+        case "closed":
+            return "bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-200";
+        case "pending":
+        default:
+            return "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300";
+    }
+}
+function stripIsWon(items) {
+    if (!items)
+        return [];
+    return items.map((it) => ({ ...it, isWon: false }));
+}
+/**
+ * Public prize-draw detail page (SB4-G).
+ *
+ * Server-fetches the prize-draw product, strips `isWon` from each item before
+ * passing it to `PrizeDrawCollage` so public buyers stay unspoiled, and
+ * delegates the buy-bar to the client `PrizeDrawEntryActions` which surfaces
+ * the `NonRefundableConsentModal` before any add-to-cart happens.
+ *
+ * Reuses the `PreOrderDetailView` (grid-2) shell for layout parity.
+ */
+export async function PrizeDrawDetailPageView({ id, initialPrizeDraw, currentUserId, }) {
+    const product = initialPrizeDraw !== undefined
+        ? initialPrizeDraw ?? undefined
+        : await productRepository.findByIdOrSlug(id).catch(() => undefined);
+    if (!product) {
+        return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "center", gap: "md", className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Prize Draw Not Found" }), _jsx(Text, { className: "text-zinc-500", children: "The prize draw you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRIZE_DRAWS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Prize Draws" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const title = String(p.title ?? p.name ?? "Prize Draw");
+    const slug = typeof p.slug === "string" ? p.slug : String(p.id ?? "");
+    const items = stripIsWon(p.prizeDrawItems);
+    const pricePerEntry = typeof p.pricePerEntry === "number"
+        ? p.pricePerEntry
+        : typeof p.price === "number"
+            ? p.price
+            : 0;
+    const max = typeof p.prizeMaxEntries === "number" ? p.prizeMaxEntries : 0;
+    const current = typeof p.prizeCurrentEntries === "number" ? p.prizeCurrentEntries : 0;
+    const remaining = Math.max(0, max - current);
+    const revealStatus = typeof p.prizeRevealStatus === "string"
+        ? p.prizeRevealStatus
+        : undefined;
+    const revealStart = p.prizeRevealWindowStart
+        ? new Date(p.prizeRevealWindowStart)
+        : null;
+    const revealEnd = p.prizeRevealWindowEnd
+        ? new Date(p.prizeRevealWindowEnd)
+        : null;
+    const githubUrl = typeof p.prizeGithubFileUrl === "string" ? p.prizeGithubFileUrl : undefined;
+    const maxPerUser = typeof p.maxPerUser === "number" && p.maxPerUser > 0
+        ? p.maxPerUser
+        : null;
+    // SB6-D post-auth — fetch this buyer's existing-entry count when we have
+    // an authenticated uid. `orderRepository.countByUserAndProduct` already
+    // filters by active statuses (pending/confirmed/processing/shipped/
+    // delivered) so cancelled/refunded entries don't count.
+    const userEntriesUsed = currentUserId && maxPerUser != null
+        ? await orderRepository
+            .countByUserAndProduct(currentUserId, String(product.id))
+            .catch(() => 0)
+        : null;
+    const thumb = items[0]?.images?.[0];
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const safeSeller = storeName ? safeDisplayName(storeName, "") : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) ||
+        (typeof p.storeId === "string" ? p.storeId : null);
+    const storeHref = storeSlug
+        ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug))
+        : null;
+    const descriptionHtml = toDescriptionHtml(p.description);
+    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
+                    title,
+                    thumb,
+                    price: pricePerEntry,
+                    storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                    storeName: storeName ?? undefined,
+                } }), _jsxs(Container, { size: "xl", className: "px-4 py-6", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between flex-wrap gap-2", children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400 flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRIZE_DRAWS), className: "hover:text-primary-600 transition-colors", children: "Prize Draws" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "text-zinc-700 dark:text-zinc-300 truncate max-w-[200px]", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(PrizeDrawCollage, { items: items, hideWonState: true })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", className: "mb-2 flex-wrap", children: [_jsx(Span, { className: "inline-block rounded-full bg-fuchsia-100 dark:bg-fuchsia-900/30 px-2.5 py-0.5 text-xs font-semibold text-fuchsia-700 dark:text-fuchsia-300", children: "Prize Draw" }), _jsx(Span, { className: `inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold ${statusClass(revealStatus)}`, children: statusLabel(revealStatus) }), maxPerUser !== null && (_jsxs(Span, { className: "inline-block rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-0.5 text-xs font-medium text-zinc-700 dark:text-zinc-300", children: ["Limit: ", maxPerUser, " entries per customer"] })), maxPerUser !== null && userEntriesUsed !== null && (_jsxs(Span, { className: "inline-block rounded-full bg-fuchsia-100 dark:bg-fuchsia-900/30 px-2.5 py-0.5 text-xs font-semibold text-fuchsia-700 dark:text-fuchsia-300", children: ["You have used ", userEntriesUsed, "/", maxPerUser] }))] }), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title })] }), _jsx(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-4", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Entries" }), _jsxs(Text, { className: "text-sm font-semibold", children: [current, " / ", max, " (", remaining, " left)"] })] }), revealStart && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Reveal window opens" }), _jsx(Text, { className: "text-sm font-medium", children: revealStart.toLocaleString() })] })), revealEnd && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Reveal window closes" }), _jsx(Text, { className: "text-sm font-medium", children: revealEnd.toLocaleString() })] }))] }) }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-4" })), safeSeller && (_jsx(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-3", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-0.5", children: "Sold by" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-3 py-1.5 text-xs font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined })), renderBuyBar: () => (_jsx(Div, { id: "prize-draw-buy-bar", className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5", children: _jsx(PrizeDrawEntryActions, { productId: String(product.id), productSlug: slug, title: title, thumb: thumb, pricePerEntry: pricePerEntry, currency: currency, remainingEntries: remaining, revealStatus: revealStatus, prizeGithubFileUrl: githubUrl }) })) }), _jsxs(BuyBar, { children: [_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(pricePerEntry, currency) }), _jsx("a", { href: "#prize-draw-buy-bar", className: "appkit-button appkit-button--primary appkit-button--sm flex-1", children: _jsx("span", { className: "appkit-button__content", children: "Enter draw" }) })] })] })] }));
+}

package/dist/features/products/components/PrizeDrawEntryActions.d.ts

@@ -0,0 +1,19 @@
+export interface PrizeDrawEntryActionsProps {
+    productId: string;
+    productSlug?: string;
+    title: string;
+    thumb?: string;
+    pricePerEntry: number;
+    currency: string;
+    remainingEntries: number;
+    revealStatus: "pending" | "open" | "closed" | undefined;
+    prizeGithubFileUrl?: string;
+}
+/**
+ * Client buy panel for a prize-draw detail page (SB4-G).
+ *
+ * - Enter Draw → NonRefundableConsentModal (listingType="prize-draw")
+ * - On confirm → add 1 entry to guest cart and route to /user/cart
+ * - "View RNG source" link → prizeGithubFileUrl
+ */
+export declare function PrizeDrawEntryActions({ productId, productSlug, title, thumb, pricePerEntry, currency, remainingEntries, revealStatus, prizeGithubFileUrl, }: PrizeDrawEntryActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/PrizeDrawEntryActions.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button, Stack, Text, useToast } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { useGuestCart } from "../../cart/hooks/useGuestCart";
+import { pushCartOp } from "../../cart/utils/pending-ops";
+import { NonRefundableConsentModal } from "./NonRefundableConsentModal";
+/**
+ * Client buy panel for a prize-draw detail page (SB4-G).
+ *
+ * - Enter Draw → NonRefundableConsentModal (listingType="prize-draw")
+ * - On confirm → add 1 entry to guest cart and route to /user/cart
+ * - "View RNG source" link → prizeGithubFileUrl
+ */
+export function PrizeDrawEntryActions({ productId, productSlug, title, thumb, pricePerEntry, currency, remainingEntries, revealStatus, prizeGithubFileUrl, }) {
+    const router = useRouter();
+    const cart = useGuestCart();
+    const { showToast } = useToast();
+    const [consentOpen, setConsentOpen] = useState(false);
+    const closed = revealStatus === "closed" || remainingEntries === 0;
+    const handleEnter = useCallback(() => {
+        if (closed)
+            return;
+        setConsentOpen(true);
+    }, [closed]);
+    const handleConfirm = useCallback(() => {
+        cart.add(productId, 1, {
+            productTitle: title,
+            productImage: thumb,
+            price: pricePerEntry,
+        });
+        pushCartOp({
+            op: "add",
+            productId,
+            quantity: 1,
+            productTitle: title,
+            productImage: thumb,
+            price: pricePerEntry,
+        });
+        setConsentOpen(false);
+        showToast("Entry added to cart", "success");
+        router.push(String(ROUTES.USER.CART));
+    }, [cart, productId, title, thumb, pricePerEntry, router, showToast]);
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: [formatCurrency(pricePerEntry, currency), _jsx(Text, { as: "span", className: "ml-1 text-xs font-normal text-[var(--appkit-color-text-muted)]", children: "per entry" })] }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: closed, onClick: handleEnter, children: closed ? "Draw closed" : "Enter draw" }), prizeGithubFileUrl ? (_jsx("a", { href: prizeGithubFileUrl, target: "_blank", rel: "noopener noreferrer", className: "text-center text-xs font-medium text-primary-600 underline-offset-4 hover:underline dark:text-primary-400", children: "View RNG source code on GitHub \u2192" })) : null, _jsx(Text, { className: "text-center text-xs text-[var(--appkit-color-text-muted)]", children: "Winners chosen by Node.js crypto.randomInt \u2014 fully auditable. Entries are locked once paid; refunds only if the prize pool is exhausted." }), _jsx(NonRefundableConsentModal, { open: consentOpen, listingType: "prize-draw", itemTitle: title, priceLabel: formatCurrency(pricePerEntry, currency), onCancel: () => setConsentOpen(false), onConfirm: handleConfirm })] }));
+}

package/dist/features/products/components/PrizeDrawItemsEditor.d.ts

@@ -0,0 +1,13 @@
+import type { PrizeDrawItem } from "../schemas/firestore";
+export interface PrizeDrawItemsEditorProps {
+    items: PrizeDrawItem[];
+    onChange: (items: PrizeDrawItem[]) => void;
+    /** Upload an image File → returns the resolved storage URL (or media slug). */
+    onUploadImage: (file: File, itemNumber: number) => Promise<string>;
+    /** Optional video uploader. */
+    onUploadVideo?: (file: File, itemNumber: number) => Promise<string>;
+    /** Show a non-editable warning above the editor (e.g. "Draw already opened"). */
+    warning?: string;
+}
+export declare function PrizeDrawItemsEditor({ items, onChange, onUploadImage, onUploadVideo, warning, }: PrizeDrawItemsEditorProps): import("react/jsx-runtime").JSX.Element;
+export default PrizeDrawItemsEditor;

package/dist/features/products/components/PrizeDrawItemsEditor.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PrizeDrawItemsEditor (SB4-A)
+ *
+ * Editor for the `prizeDrawItems` array on a prize-draw ProductDocument.
+ * Owns: add / remove / reorder, per-item title/description/condition/
+ * estimatedValue, 1–2 images per item, optional video, and a locked-overlay
+ * for items already won during a previous reveal.
+ *
+ * Min 3 items, max 16 (mirrors PrizeDrawItem schema constraints).
+ */
+import { useCallback } from "react";
+import { Button, Div, FormField, Heading, Row, Stack, Text } from "../../../ui";
+import { ImageUpload } from "../../media";
+const MIN_ITEMS = 3;
+const MAX_ITEMS = 16;
+const MAX_IMAGES_PER_ITEM = 2;
+const CONDITION_OPTIONS = [
+    { value: "new", label: "New" },
+    { value: "like_new", label: "Like New" },
+    { value: "good", label: "Good" },
+    { value: "used", label: "Used" },
+    { value: "graded", label: "Graded" },
+    { value: "refurbished", label: "Refurbished" },
+];
+export function PrizeDrawItemsEditor({ items, onChange, onUploadImage, onUploadVideo, warning, }) {
+    // Once any prize has been revealed (isWon=true), the array is frozen for
+    // the seller — add/remove/reorder are all blocked. Per-item edits already
+    // respect the per-item `locked` flag below.
+    const anyWon = items.some((it) => it.isWon);
+    const update = useCallback((index, patch) => {
+        const next = items.map((it, i) => (i === index ? { ...it, ...patch } : it));
+        onChange(next);
+    }, [items, onChange]);
+    const renumber = (list) => list.map((it, i) => ({ ...it, itemNumber: i + 1 }));
+    const addItem = () => {
+        if (items.length >= MAX_ITEMS)
+            return;
+        onChange(renumber([
+            ...items,
+            {
+                itemNumber: items.length + 1,
+                title: "",
+                description: "",
+                images: [],
+                condition: "new",
+                isWon: false,
+            },
+        ]));
+    };
+    const removeItem = (index) => {
+        const target = items[index];
+        if (target?.isWon)
+            return; // cannot remove a won item
+        if (items.length <= MIN_ITEMS)
+            return;
+        onChange(renumber(items.filter((_, i) => i !== index)));
+    };
+    const move = (index, direction) => {
+        const target = index + direction;
+        if (target < 0 || target >= items.length)
+            return;
+        const next = [...items];
+        [next[index], next[target]] = [next[target], next[index]];
+        onChange(renumber(next));
+    };
+    const setImage = (index, slot, url) => {
+        const cur = items[index];
+        const nextImgs = [...(cur.images ?? [])];
+        nextImgs[slot] = url;
+        update(index, { images: nextImgs.filter(Boolean) });
+    };
+    const removeImage = (index, slot) => {
+        const cur = items[index];
+        const nextImgs = (cur.images ?? []).filter((_, i) => i !== slot);
+        update(index, { images: nextImgs });
+    };
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Heading, { level: 3, children: ["Prize Items (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "secondary", onClick: addItem, disabled: anyWon || items.length >= MAX_ITEMS, children: ["+ Add prize (", items.length, "/", MAX_ITEMS, ")"] })] }), _jsxs(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: ["Add between ", MIN_ITEMS, " and ", MAX_ITEMS, " prizes. Each entry will reveal exactly one of these. Items marked won during a prior reveal cannot be edited or removed."] }), anyWon ? (_jsxs(Div, { className: "rounded border border-red-400/40 bg-red-50 px-3 py-2 text-sm text-red-900 dark:bg-red-900/30 dark:text-red-100", children: [_jsx("strong", { children: "Draw locked." }), " At least one prize has been revealed \u2014 this listing can no longer be edited. To run a similar draw, clone it into a new prize-draw listing."] })) : warning ? (_jsx(Div, { className: "rounded border border-yellow-400/40 bg-yellow-50 px-3 py-2 text-sm text-yellow-900 dark:bg-yellow-900/30 dark:text-yellow-100", children: warning })) : null, _jsx(Stack, { gap: "md", children: items.map((it, index) => {
+                    const locked = it.isWon || anyWon;
+                    return (_jsxs(Div, { className: `relative rounded-lg border border-[var(--appkit-color-border)] p-4 ${locked ? "opacity-60" : ""}`, children: [locked ? (_jsx(Div, { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/10 dark:bg-black/40 rounded-lg pointer-events-none", children: _jsx(Text, { className: "rounded bg-red-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white", children: "Won \u2014 locked" }) })) : null, _jsxs(Row, { justify: "between", align: "center", className: "mb-3", children: [_jsxs(Heading, { level: 4, children: ["Prize #", it.itemNumber] }), _jsxs(Row, { gap: "xs", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => move(index, -1), disabled: locked || index === 0, "aria-label": "Move up", children: "\u2191" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => move(index, 1), disabled: locked || index === items.length - 1, "aria-label": "Move down", children: "\u2193" }), _jsx(Button, { type: "button", variant: "danger", size: "sm", onClick: () => removeItem(index), disabled: locked || items.length <= MIN_ITEMS, children: "Remove" })] })] }), _jsxs(Stack, { gap: "sm", children: [_jsx(FormField, { name: `item-${index}-title`, label: "Title", type: "text", value: it.title, onChange: (v) => update(index, { title: v }), disabled: locked, placeholder: "e.g. PSA 9 Charizard Base Set Holo" }), _jsx(FormField, { name: `item-${index}-description`, label: "Description (optional)", type: "textarea", value: it.description ?? "", onChange: (v) => update(index, { description: v }), disabled: locked, placeholder: "What makes this prize special?" }), _jsxs(Row, { gap: "md", children: [_jsx(Div, { className: "flex-1", children: _jsx(FormField, { name: `item-${index}-condition`, label: "Condition", type: "select", value: it.condition, onChange: (v) => update(index, { condition: v }), disabled: locked, options: CONDITION_OPTIONS }) }), _jsx(Div, { className: "flex-1", children: _jsx(FormField, { name: `item-${index}-value`, label: "Estimated value (\u20B9)", type: "number", value: it.estimatedValue != null
+                                                        ? String(Math.round(it.estimatedValue / 100))
+                                                        : "", onChange: (v) => update(index, {
+                                                        estimatedValue: Math.round((parseFloat(v) || 0) * 100),
+                                                    }), disabled: locked, placeholder: "2999" }) })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { className: "text-sm font-medium", children: ["Images (", (it.images ?? []).length, "/", MAX_IMAGES_PER_ITEM, ")"] }), _jsx(Row, { gap: "sm", className: "flex-wrap", children: Array.from({ length: MAX_IMAGES_PER_ITEM }).map((_, slot) => {
+                                                    const existing = (it.images ?? [])[slot];
+                                                    return (_jsxs(Div, { className: "w-40", children: [_jsx(ImageUpload, { currentImage: existing, label: existing ? "Replace" : `Image ${slot + 1}`, onUpload: (file) => onUploadImage(file, it.itemNumber), onChange: (url) => setImage(index, slot, url) }), existing && !locked ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeImage(index, slot), children: "Remove" })) : null] }, slot));
+                                                }) })] }), onUploadVideo ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium", children: "Video (optional)" }), _jsx("input", { type: "file", accept: "video/mp4,video/webm", disabled: locked, onChange: async (e) => {
+                                                    const file = e.target.files?.[0];
+                                                    if (!file)
+                                                        return;
+                                                    const url = await onUploadVideo(file, it.itemNumber);
+                                                    update(index, { video: { url } });
+                                                } }), it.video?.url ? (_jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] truncate", children: ["Current: ", it.video.url] })) : null] })) : null] })] }, `prize-item-${it.itemNumber}-${index}`));
+                }) }), items.length < MIN_ITEMS ? (_jsxs(Div, { className: "rounded border border-red-400/40 bg-red-50 px-3 py-2 text-sm text-red-900 dark:bg-red-900/30 dark:text-red-100", children: ["At least ", MIN_ITEMS, " prizes are required."] })) : null] }));
+}
+export default PrizeDrawItemsEditor;

package/dist/features/products/components/PrizeDrawsIndexListing.d.ts

@@ -0,0 +1,8 @@
+export interface PrizeDrawsIndexListingProps {
+    initialData?: any;
+    categorySlug?: string;
+    brandName?: string;
+    /** When set, the listing is hard-scoped to this store id — overrides URL `storeId`. */
+    storeId?: string;
+}
+export declare function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, storeId: forcedStoreId, }: PrizeDrawsIndexListingProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/PrizeDrawsIndexListing.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { SlidersHorizontal, X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useProducts } from "../hooks/useProducts";
+import { Pagination, ListingToolbar } from "../../../ui";
+import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
+import { useBrands } from "../hooks/useBrands";
+import { MarketplacePrizeDrawCard } from "./MarketplacePrizeDrawCard";
+import { ProductFilters } from "./ProductFilters";
+const PRIZE_DRAW_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
+    { value: "prizeRevealWindowStart", label: "Reveal: Soonest" },
+    { value: "-prizeRevealWindowStart", label: "Reveal: Furthest" },
+    { value: "pricePerEntry", label: "Entry: Low to High" },
+    { value: "-pricePerEntry", label: "Entry: High to Low" },
+];
+const FILTER_KEYS = [
+    "category",
+    "brand",
+    "minPrice",
+    "maxPrice",
+    "storeId",
+    "prizeRevealStatus",
+];
+export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, storeId: forcedStoreId, }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const showClosed = table.get("showClosed") === "true";
+    const [view, setView] = useState(table.get("view") || "grid");
+    const { categories } = useCategoryTree();
+    const categoryOptions = categoriesToFacetOptions(categories);
+    const { brandOptions } = useBrands();
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const pendingTable = useMemo(() => ({
+        get: (key) => pendingFilters[key] ?? "",
+        getNumber: (key, fallback = 0) => {
+            const v = pendingFilters[key];
+            if (!v)
+                return fallback;
+            const n = Number(v);
+            return isNaN(n) ? fallback : n;
+        },
+        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
+        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
+        clear: (keys) => {
+            const ks = keys ?? FILTER_KEYS;
+            setPendingFilters((p) => ({
+                ...p,
+                ...Object.fromEntries(ks.map((k) => [k, ""])),
+            }));
+        },
+        setPage: (_) => { },
+        setPageSize: (_) => { },
+        setSort: (_) => { },
+        buildSieveParams: () => "",
+        buildSearchParams: () => "",
+        params: new URLSearchParams(),
+    }), [pendingFilters]);
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "", showClosed: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") ||
+        showClosed ||
+        table.get("sort") !== "-createdAt" ||
+        activeFilterCount > 0;
+    const params = {
+        q: table.get("q") || undefined,
+        category: table.get("category") || undefined,
+        categorySlug: categorySlug || undefined,
+        brand: brandName || table.get("brand") || undefined,
+        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
+        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
+        storeId: forcedStoreId || table.get("storeId") || undefined,
+        sort: table.get("sort") || "-createdAt",
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        listingType: "prize-draw",
+        status: showClosed ? undefined : "published",
+    };
+    const { products: draws, totalPages, page, isLoading } = useProducts(params, { initialData });
+    // Client-side filter for prizeRevealStatus until the server query supports it.
+    const revealFilter = table.get("prizeRevealStatus");
+    const filteredDraws = revealFilter
+        ? draws.filter((d) => d.prizeRevealStatus === revealFilter)
+        : draws;
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const handleSearchKeyDown = (e) => {
+        if (e.key === "Enter")
+            commitSearch();
+    };
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search prize draws...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get("sort") || "-createdAt", sortOptions: PRIZE_DRAW_SORT_OPTIONS, onSortChange: (v) => {
+                    table.set("sort", v);
+                    table.setPage(1);
+                }, view: view, onViewChange: (v) => {
+                    setView(v);
+                    table.set("view", v);
+                }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show closed" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showClosed, onClick: () => table.set("showClosed", showClosed ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showClosed ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showClosed ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : filteredDraws.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No prize draws found." })) : (_jsx("div", { className: gridClass, children: filteredDraws.map((product) => (_jsx(MarketplacePrizeDrawCard, { product: product, variant: view }, product.id))) })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "prizeRevealStatusFilter", className: "block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5", children: "Reveal status" }), _jsxs("select", { id: "prizeRevealStatusFilter", value: pendingFilters.prizeRevealStatus ?? "", onChange: (e) => setPendingFilters((p) => ({
+                                                    ...p,
+                                                    prizeRevealStatus: e.target.value,
+                                                })), className: "w-full rounded border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-2 py-1.5 text-sm", children: [_jsx("option", { value: "", children: "Any" }), _jsx("option", { value: "pending", children: "Reveal pending" }), _jsx("option", { value: "open", children: "Reveal open" }), _jsx("option", { value: "closed", children: "Closed" })] })] }), _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions })] }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
+}

package/dist/features/products/components/PrizeDrawsListingView.d.ts

@@ -0,0 +1,15 @@
+type SearchParams = Record<string, string | string[]>;
+export interface PrizeDrawsListingViewProps {
+    searchParams?: SearchParams;
+}
+/**
+ * Public listing page (SB4-F). Server-fetches published prize-draw products,
+ * hydrates the client `PrizeDrawsIndexListing` which renders the filter
+ * toolbar + collage-thumb grid. URL params: `?storeId=…&prizeRevealStatus=…`.
+ *
+ * Per the public-buyer contract, the product adapter strips `isWon` from
+ * `prizeDrawItems[]` server-side; the cards never reveal which prizes are
+ * already gone (matches `PrizeDrawCollage`'s `hideWonState` prop).
+ */
+export declare function PrizeDrawsListingView({ searchParams, }: PrizeDrawsListingViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/features/products/components/PrizeDrawsListingView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { productRepository } from "../../../repositories";
+import { Container, Main, Heading, Section, Text } from "../../../ui";
+import { AdSlot } from "../../homepage/components/AdSlot";
+import { parseListingSearchParams } from "../../../utils/listing-params";
+import { PrizeDrawsIndexListing } from "./PrizeDrawsIndexListing";
+const DEFAULT_PAGE = 1;
+const DEFAULT_PAGE_SIZE = 24;
+const DEFAULT_SORT = "-createdAt";
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildPrizeDrawFilters(params) {
+    const parts = ["status==published", "listingType==prize-draw"];
+    const minPrice = sp(params, "minPrice");
+    const maxPrice = sp(params, "maxPrice");
+    if (minPrice)
+        parts.push(`pricePerEntry>=${minPrice}`);
+    if (maxPrice)
+        parts.push(`pricePerEntry<=${maxPrice}`);
+    const store = sp(params, "storeId");
+    if (store)
+        parts.push(`storeId==${store}`);
+    const status = sp(params, "prizeRevealStatus");
+    if (status)
+        parts.push(`prizeRevealStatus==${status}`);
+    return parts.join(",");
+}
+/**
+ * Public listing page (SB4-F). Server-fetches published prize-draw products,
+ * hydrates the client `PrizeDrawsIndexListing` which renders the filter
+ * toolbar + collage-thumb grid. URL params: `?storeId=…&prizeRevealStatus=…`.
+ *
+ * Per the public-buyer contract, the product adapter strips `isWon` from
+ * `prizeDrawItems[]` server-side; the cards never reveal which prizes are
+ * already gone (matches `PrizeDrawCollage`'s `hideWonState` prop).
+ */
+export async function PrizeDrawsListingView({ searchParams = {}, }) {
+    const std = parseListingSearchParams(searchParams);
+    const sort = std.sorts ?? DEFAULT_SORT;
+    const page = std.page ?? DEFAULT_PAGE;
+    const pageSize = std.pageSize ?? DEFAULT_PAGE_SIZE;
+    const filters = buildPrizeDrawFilters(searchParams);
+    const result = await productRepository
+        .list({ filters, sorts: sort, page, pageSize })
+        .catch(() => null);
+    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-2 text-3xl font-semibold text-zinc-900 dark:text-zinc-100", children: "Prize Draws" }), _jsx(Text, { className: "mb-6 text-sm text-[var(--appkit-color-text-muted)]", children: "Fair-RNG draws for sealed Pok\u00E9mon, Hot Wheels Super Treasure Hunts, Gundam kits and more. Every winner picked by crypto.randomInt \u2014 proof on GitHub." }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(PrizeDrawsIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}

package/dist/features/products/components/PrizeRevealModal.d.ts

@@ -0,0 +1,34 @@
+import type { PrizeDrawItem } from "../schemas/firestore";
+export interface PrizeRevealResponse {
+    prizeWon?: {
+        itemNumber: number;
+        title: string;
+        images: string[];
+        estimatedValue?: number;
+    };
+    alreadyRevealed?: boolean;
+    rngSourceUrl?: string;
+    refunded?: true;
+    reason?: string;
+}
+export interface PrizeRevealModalProps {
+    open: boolean;
+    onClose: () => void;
+    /** Items to render in the collage (won state hidden — buyers don't see prior wins). */
+    items: PrizeDrawItem[];
+    /** Order id used by the reveal endpoint. */
+    orderId: string;
+    /** Product id used in the reveal URL. */
+    productId: string;
+    /** Override the default `/api/prize-draws/[id]/reveal` POST call. */
+    onReveal?: (args: {
+        orderId: string;
+        productId: string;
+    }) => Promise<PrizeRevealResponse>;
+    /** Already-revealed prize, passed in if the order has `prizeWon` populated. */
+    initialPrizeWon?: PrizeRevealResponse["prizeWon"];
+    /** Public proof-of-fairness URL — shown in the disclaimer. */
+    rngSourceUrl?: string;
+}
+export declare function PrizeRevealModal({ open, onClose, items, orderId, productId, onReveal, initialPrizeWon, rngSourceUrl, }: PrizeRevealModalProps): import("react/jsx-runtime").JSX.Element;
+export default PrizeRevealModal;