@mohasinac/appkit 2.6.3 → 2.6.5

package/dist/features/categories/components/BundlesListView.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { categoriesRepository } from "../../../repositories";
+import { Container, Heading, Main, Section, Text } from "../../../ui";
+import { AdSlot } from "../../homepage/components/AdSlot";
+import { CategoryBundlesListing } from "./CategoryBundlesListing";
+const DEFAULT_LIMIT = 200;
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+/**
+ * Public `/bundles` index. Bundles live as `categoryType:"bundle"` rows on
+ * the categories collection (SB-UNI-D + V), so this fetches via
+ * `categoriesRepository.listByType("bundle", …)` instead of `productRepository`.
+ * Optional `?storeId=…` post-filters to a single seller's bundles.
+ * Sort UI is owned by `CategoryBundlesListing` (client).
+ */
+export async function BundlesListView({ searchParams = {}, }) {
+    const storeId = sp(searchParams, "storeId");
+    const all = await categoriesRepository
+        .listByType("bundle", { activeOnly: true, limit: DEFAULT_LIMIT })
+        .catch(() => []);
+    const bundles = storeId
+        ? all.filter((c) => c.createdByStoreId === storeId)
+        : all;
+    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: "Collectible Bundles" }), _jsx(Text, { className: "mb-6 text-sm text-[var(--appkit-color-text-muted)]", children: "Curated multi-product bundles \u2014 Pok\u00E9mon starter sets, Beyblade tournament packs, Hot Wheels collector boxes and more. One price, one checkout, one shipment." }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoryBundlesListing, { initialBundles: bundles }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}

package/dist/features/categories/components/index.d.ts

@@ -26,3 +26,15 @@ export { CategoriesIndexListing } from "./CategoriesIndexListing";
 export type { CategoriesIndexListingProps } from "./CategoriesIndexListing";
 export { CategoryDetailTabs } from "./CategoryDetailTabs";
 export type { CategoryDetailTabsProps } from "./CategoryDetailTabs";
+export { BundlesListView } from "./BundlesListView";
+export type { BundlesListViewProps } from "./BundlesListView";
+export { BundleDetailView } from "./BundleDetailView";
+export type { BundleDetailViewProps } from "./BundleDetailView";
+export { BundleBuyNowCta } from "./BundleBuyNowCta";
+export type { BundleBuyNowCtaProps } from "./BundleBuyNowCta";
+export { BundleDynamicRuleEditor } from "./BundleDynamicRuleEditor";
+export type { BundleDynamicRuleEditorProps } from "./BundleDynamicRuleEditor";
+export { BundleItemsPicker, defaultBundleItemsFetch, } from "./BundleItemsPicker";
+export type { BundleItemsPickerProps, BundleItemSearchResult, } from "./BundleItemsPicker";
+export { CategoryBundlesListing } from "./CategoryBundlesListing";
+export type { CategoryBundlesListingProps } from "./CategoryBundlesListing";

package/dist/features/categories/components/index.js

@@ -13,3 +13,12 @@ export { CategorySelectorCreate } from "./CategorySelectorCreate";
 export { getCategoryTableColumns } from "./CategoryTableColumns";
 export { CategoriesIndexListing } from "./CategoriesIndexListing";
 export { CategoryDetailTabs } from "./CategoryDetailTabs";
+export { BundlesListView } from "./BundlesListView";
+export { BundleDetailView } from "./BundleDetailView";
+// S-SBUNI-RULES 2026-05-13 — direct-checkout CTA (replaces deleted BundleAddToCartCta).
+export { BundleBuyNowCta } from "./BundleBuyNowCta";
+// S-SBUNI-5 2026-05-13 — admin dynamic-rule editor (paired with BundleItemsPicker).
+export { BundleDynamicRuleEditor } from "./BundleDynamicRuleEditor";
+// S-SBUNI-4 2026-05-13 — multi-select product picker for bundle editor.
+export { BundleItemsPicker, defaultBundleItemsFetch, } from "./BundleItemsPicker";
+export { CategoryBundlesListing } from "./CategoryBundlesListing";

package/dist/features/checkout/actions/checkout-actions.js

@@ -10,12 +10,19 @@ import { ValidationError } from "../../../errors";
 import { serverLogger } from "../../../monitoring";
 import { sendEmail } from "../../contact/email";
 import { CONSENT_OTP_EXPIRY_MS, CONSENT_OTP_MAX_ATTEMPTS, hashOtp, maskEmail, generateOtpCode, buildConsentOtpEmail, enforceConsentOtpRateLimit, saveConsentOtp, readConsentOtp, patchConsentOtp, } from "../../auth/consent-otp";
-import { addressRepository } from "../../account/repository/address.repository";
+import { addressesRepository } from "../../addresses/repository/addresses.repository";
+async function findUserAddress(userId, addressId) {
+    const address = await addressesRepository.findById(addressId);
+    if (!address || address.ownerType !== "user" || address.ownerId !== userId) {
+        return null;
+    }
+    return address;
+}
 import { userRepository } from "../../auth/repository/user.repository";
 import { resolveDate } from "../../../utils";
 /** Returns masked email so the UI can confirm which inbox to check. */
 export async function sendCheckoutConsentOtp(userId, userEmail, addressId) {
-    const address = await addressRepository.findById(userId, addressId);
+    const address = await findUserAddress(userId, addressId);
     if (!address)
         throw new ValidationError("Address not found.");
     await enforceConsentOtpRateLimit(userId);
@@ -69,7 +76,7 @@ export async function verifyCheckoutConsentOtp(userId, addressId, code) {
 export async function grantCheckoutConsentViaSms(userId, userPhone, addressId) {
     if (!userPhone)
         throw new ValidationError("No phone number registered on your account.");
-    const address = await addressRepository.findById(userId, addressId);
+    const address = await findUserAddress(userId, addressId);
     if (!address)
         throw new ValidationError("Address not found.");
     const normalizePhone = (s) => s.replace(/[^0-9]/g, "").slice(-10);

package/dist/features/events/components/AdminEventEditorView.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Alert, Button, Form, FormActions, Input, RichTextEditor, Select, StackedViewShell, Text, Toggle, } from "../../../ui";
@@ -34,6 +34,14 @@ const EVENT_TYPE_OPTIONS = [
     { label: "Poll", value: "poll" },
     { label: "Survey", value: "survey" },
     { label: "Feedback", value: "feedback" },
+    { label: "Raffle", value: "raffle" },
+    { label: "Spin Wheel", value: "spin_wheel" },
+];
+const RAFFLE_TYPE_OPTIONS = [
+    { label: "Open raffle (all confirmed entries)", value: "open_raffle" },
+    { label: "Top N scorers", value: "top_n_scorers" },
+    { label: "Top N earliest participants", value: "top_n_participants" },
+    { label: "Spin wheel", value: "spin_wheel" },
 ];
 const EVENT_STATUS_OPTIONS = [
     { label: "Draft", value: "draft" },
@@ -70,7 +78,20 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
     const [maxEntriesPerUser, setMaxEntriesPerUser] = React.useState("1");
     const [hasLeaderboard, setHasLeaderboard] = React.useState(false);
     const [anonymous, setAnonymous] = React.useState(false);
+    const [hasRaffle, setHasRaffle] = React.useState(false);
+    const [raffleType, setRaffleType] = React.useState("open_raffle");
+    const [raffleTopN, setRaffleTopN] = React.useState("10");
+    const [rafflePrize, setRafflePrize] = React.useState("");
+    const [rafflePrizeCouponId, setRafflePrizeCouponId] = React.useState("");
+    const [spinPrizes, setSpinPrizes] = React.useState([]);
+    const [spinMaxPerUser, setSpinMaxPerUser] = React.useState("1");
+    const [spinWindowStart, setSpinWindowStart] = React.useState("");
+    const [spinWindowEnd, setSpinWindowEnd] = React.useState("");
+    const [raffleWinnerName, setRaffleWinnerName] = React.useState("");
+    const [raffleEntryCount, setRaffleEntryCount] = React.useState(null);
+    const [raffleGithubUrl, setRaffleGithubUrl] = React.useState("");
     const [saveMessage, setSaveMessage] = React.useState(null);
+    const [triggerMessage, setTriggerMessage] = React.useState(null);
     const eventQuery = useQuery({
         queryKey: ["admin-event-by-id", eventId],
         queryFn: () => apiClient.get(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`),
@@ -112,6 +133,18 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
         if (event.feedbackConfig) {
             setAnonymous(Boolean(event.feedbackConfig.anonymous));
         }
+        setHasRaffle(Boolean(event.hasRaffle));
+        setRaffleType(event.raffleType || "open_raffle");
+        setRaffleTopN(String(event.raffleTopN ?? 10));
+        setRafflePrize(event.rafflePrize || "");
+        setRafflePrizeCouponId(event.rafflePrizeCouponId || "");
+        setSpinPrizes(Array.isArray(event.spinPrizes) ? event.spinPrizes : []);
+        setSpinMaxPerUser(String(event.spinMaxPerUser ?? 1));
+        setSpinWindowStart(toLocalDatetime(event.spinWindowStart));
+        setSpinWindowEnd(toLocalDatetime(event.spinWindowEnd));
+        setRaffleWinnerName(event.raffleWinnerDisplayName || "");
+        setRaffleEntryCount(typeof event.raffleEntryCount === "number" ? event.raffleEntryCount : null);
+        setRaffleGithubUrl(event.raffleGithubFunctionUrl || "");
     }, [eventQuery.data]);
     const saveMutation = useMutation({
         mutationFn: async () => {
@@ -153,6 +186,29 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
                     };
                 return {};
             };
+            const isRaffleType = type === "raffle" || type === "spin_wheel";
+            const raffleFields = {};
+            if (hasRaffle || isRaffleType) {
+                raffleFields.hasRaffle = true;
+                raffleFields.raffleType = isRaffleType && type === "spin_wheel"
+                    ? "spin_wheel"
+                    : raffleType;
+                if (Number(raffleTopN) > 0)
+                    raffleFields.raffleTopN = Number(raffleTopN);
+                if (rafflePrize)
+                    raffleFields.rafflePrize = rafflePrize;
+                if (rafflePrizeCouponId)
+                    raffleFields.rafflePrizeCouponId = rafflePrizeCouponId;
+                if (raffleType === "spin_wheel" || type === "spin_wheel") {
+                    raffleFields.spinPrizes = spinPrizes;
+                    if (Number(spinMaxPerUser) > 0)
+                        raffleFields.spinMaxPerUser = Number(spinMaxPerUser);
+                    if (spinWindowStart)
+                        raffleFields.spinWindowStart = toISOString(spinWindowStart);
+                    if (spinWindowEnd)
+                        raffleFields.spinWindowEnd = toISOString(spinWindowEnd);
+                }
+            }
             const payload = {
                 type,
                 title,
@@ -161,6 +217,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
                 endsAt: toISOString(endsAt),
                 coverImageUrl: coverImageUrl || undefined,
                 ...buildTypeConfig(),
+                ...raffleFields,
             };
             if (eventId) {
                 payload.status = status;
@@ -179,6 +236,44 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
             setSaveMessage(error instanceof Error ? error.message : "Save failed");
         },
     });
+    const addSpinPrize = () => {
+        setSpinPrizes((prev) => [
+            ...prev,
+            {
+                id: `prize-${Date.now()}`,
+                label: "",
+                couponId: undefined,
+                weight: 1,
+                isActive: true,
+            },
+        ]);
+    };
+    const removeSpinPrize = (id) => {
+        setSpinPrizes((prev) => prev.filter((p) => p.id !== id));
+    };
+    const updateSpinPrize = (id, patch) => {
+        setSpinPrizes((prev) => prev.map((p) => (p.id === id ? { ...p, ...patch } : p)));
+    };
+    const triggerRaffleMutation = useMutation({
+        mutationFn: async () => {
+            if (!eventId)
+                throw new Error("Save the event before triggering");
+            return apiClient.post(ADMIN_ENDPOINTS.EVENT_TRIGGER_RAFFLE(eventId), {});
+        },
+        onSuccess: (res) => {
+            const data = res.data ?? res;
+            setTriggerMessage(data?.raffleWinnerDisplayName
+                ? `Winner: ${data.raffleWinnerDisplayName}`
+                : "Raffle triggered.");
+            if (data?.raffleWinnerDisplayName)
+                setRaffleWinnerName(data.raffleWinnerDisplayName);
+            if (typeof data?.raffleEntryCount === "number")
+                setRaffleEntryCount(data.raffleEntryCount);
+        },
+        onError: (err) => {
+            setTriggerMessage(err instanceof Error ? err.message : "Trigger failed");
+        },
+    });
     const addPollOption = () => {
         setPollOptions((prev) => [...prev, { id: `opt${Date.now()}`, label: "" }]);
     };
@@ -197,7 +292,18 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
     const formSection = (_jsxs(Form, { onSubmit: (e) => {
             e.preventDefault();
             saveMutation.mutate();
-        }, className: "space-y-6", children: [!eventId && (_jsx(Select, { label: "Event type", value: type, options: EVENT_TYPE_OPTIONS, onChange: (e) => setType(e.target.value) })), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Charizard Flash Sale 2026", required: true }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Description" }), _jsx(RichTextEditor, { value: description, onChange: setDescription, minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: startsAt, onChange: (e) => setStartsAt(e.target.value), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: endsAt, onChange: (e) => setEndsAt(e.target.value), required: true })] }), _jsx(Input, { label: "Cover image URL (optional)", value: coverImageUrl, onChange: (e) => setCoverImageUrl(e.target.value), placeholder: "https://\u2026" }), eventId && (_jsx(Select, { label: "Status", value: status, options: EVENT_STATUS_OPTIONS, onChange: (e) => setStatus(e.target.value) })), type === "sale" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Sale configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Discount %", type: "number", value: discountPercent, onChange: (e) => setDiscountPercent(e.target.value), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: saleBannerText, onChange: (e) => setSaleBannerText(e.target.value), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), type === "offer" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Offer configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Coupon ID", value: couponId, onChange: (e) => setCouponId(e.target.value), placeholder: "Firestore coupon document ID", required: true }), _jsx(Input, { label: "Display code", value: displayCode, onChange: (e) => setDisplayCode(e.target.value), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: offerBannerText, onChange: (e) => setOfferBannerText(e.target.value), placeholder: "Use CHARIZARD25 at checkout" })] })), type === "poll" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Poll configuration" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options (minimum 2)" }), pollOptions.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => updatePollOption(opt.id, e.target.value), placeholder: `Option ${idx + 1}` }) }), pollOptions.length > 2 && (_jsx("button", { type: "button", onClick: () => removePollOption(opt.id), className: "text-zinc-400 hover:text-red-500 transition-colors px-2 py-1 text-lg leading-none", "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addPollOption, children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => setResultsVisibility(e.target.value) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Toggle, { checked: allowMultiSelect, onChange: setAllowMultiSelect, label: "Allow multi-select" }), _jsx(Toggle, { checked: allowComment, onChange: setAllowComment, label: "Allow comment with vote" })] })] })), type === "survey" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsx(Input, { label: "Max entries per user", type: "number", value: maxEntriesPerUser, onChange: (e) => setMaxEntriesPerUser(e.target.value), placeholder: "1" }), _jsx(Toggle, { checked: requireLogin, onChange: setRequireLogin, label: "Require login to participate" }), _jsx(Toggle, { checked: hasLeaderboard, onChange: setHasLeaderboard, label: "Show leaderboard" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), type === "feedback" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Feedback configuration" }), _jsx(Toggle, { checked: anonymous, onChange: setAnonymous, label: "Allow anonymous submissions" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => { window.location.href = "/admin/events"; }, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: saveMutation.isPending || !isValid, children: saveMutation.isPending ? "Saving…" : eventId ? "Save changes" : "Create event" })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
+        }, className: "space-y-6", children: [!eventId && (_jsx(Select, { label: "Event type", value: type, options: EVENT_TYPE_OPTIONS, onChange: (e) => setType(e.target.value) })), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Charizard Flash Sale 2026", required: true }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Description" }), _jsx(RichTextEditor, { value: description, onChange: setDescription, minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: startsAt, onChange: (e) => setStartsAt(e.target.value), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: endsAt, onChange: (e) => setEndsAt(e.target.value), required: true })] }), _jsx(Input, { label: "Cover image URL (optional)", value: coverImageUrl, onChange: (e) => setCoverImageUrl(e.target.value), placeholder: "https://\u2026" }), eventId && (_jsx(Select, { label: "Status", value: status, options: EVENT_STATUS_OPTIONS, onChange: (e) => setStatus(e.target.value) })), type === "sale" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Sale configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Discount %", type: "number", value: discountPercent, onChange: (e) => setDiscountPercent(e.target.value), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: saleBannerText, onChange: (e) => setSaleBannerText(e.target.value), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), type === "offer" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Offer configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Coupon ID", value: couponId, onChange: (e) => setCouponId(e.target.value), placeholder: "Firestore coupon document ID", required: true }), _jsx(Input, { label: "Display code", value: displayCode, onChange: (e) => setDisplayCode(e.target.value), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: offerBannerText, onChange: (e) => setOfferBannerText(e.target.value), placeholder: "Use CHARIZARD25 at checkout" })] })), type === "poll" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Poll configuration" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options (minimum 2)" }), pollOptions.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => updatePollOption(opt.id, e.target.value), placeholder: `Option ${idx + 1}` }) }), pollOptions.length > 2 && (_jsx("button", { type: "button", onClick: () => removePollOption(opt.id), className: "text-zinc-400 hover:text-red-500 transition-colors px-2 py-1 text-lg leading-none", "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addPollOption, children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => setResultsVisibility(e.target.value) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Toggle, { checked: allowMultiSelect, onChange: setAllowMultiSelect, label: "Allow multi-select" }), _jsx(Toggle, { checked: allowComment, onChange: setAllowComment, label: "Allow comment with vote" })] })] })), type === "survey" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsx(Input, { label: "Max entries per user", type: "number", value: maxEntriesPerUser, onChange: (e) => setMaxEntriesPerUser(e.target.value), placeholder: "1" }), _jsx(Toggle, { checked: requireLogin, onChange: setRequireLogin, label: "Require login to participate" }), _jsx(Toggle, { checked: hasLeaderboard, onChange: setHasLeaderboard, label: "Show leaderboard" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), type === "feedback" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Feedback configuration" }), _jsx(Toggle, { checked: anonymous, onChange: setAnonymous, label: "Allow anonymous submissions" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), _jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Raffle & spin wheel" }), type !== "raffle" && type !== "spin_wheel" && (_jsx(Toggle, { checked: hasRaffle, onChange: setHasRaffle, label: "Attach raffle" }))] }), (hasRaffle || type === "raffle" || type === "spin_wheel") && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Select, { label: "Raffle type", value: type === "spin_wheel" ? "spin_wheel" : raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => setRaffleType(e.target.value), disabled: type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", type: "number", value: raffleTopN, onChange: (e) => setRaffleTopN(e.target.value), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", value: rafflePrize, onChange: (e) => setRafflePrize(e.target.value), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsx(Input, { label: "Coupon ID for winner (optional)", value: rafflePrizeCouponId, onChange: (e) => setRafflePrizeCouponId(e.target.value), placeholder: "coupon-vip-winner-2026" }), (raffleType === "spin_wheel" || type === "spin_wheel") && (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-slate-700 p-3 space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-300", children: "Spin prizes (weighted random)" }), spinPrizes.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No spin prizes yet. Add at least one to enable spinning." })), spinPrizes.map((p) => (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-end", children: [_jsx("div", { className: "col-span-5", children: _jsx(Input, { label: "Label", value: p.label, onChange: (e) => updateSpinPrize(p.id, { label: e.target.value }), placeholder: "\u20B9100 off" }) }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { label: "Coupon ID", value: p.couponId ?? "", onChange: (e) => updateSpinPrize(p.id, {
+                                                        couponId: e.target.value || undefined,
+                                                    }) }) }), _jsx("div", { className: "col-span-2", children: _jsx(Input, { label: "Weight", type: "number", value: String(p.weight), onChange: (e) => updateSpinPrize(p.id, {
+                                                        weight: Number(e.target.value) || 0,
+                                                    }) }) }), _jsx("div", { className: "col-span-1 flex items-center justify-center pb-2", children: _jsx(Toggle, { checked: p.isActive, onChange: (v) => updateSpinPrize(p.id, { isActive: v }), label: "" }) }), _jsx("div", { className: "col-span-1 flex items-center justify-center pb-2", children: _jsx("button", { type: "button", onClick: () => removeSpinPrize(p.id), className: "text-zinc-400 hover:text-red-500 text-lg leading-none px-2", "aria-label": "Remove prize", children: "\u00D7" }) })] }, p.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addSpinPrize, children: "+ Add spin prize" }), _jsx(Input, { label: "Max spins per user", type: "number", value: spinMaxPerUser, onChange: (e) => setSpinMaxPerUser(e.target.value), placeholder: "1" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Spin window start", type: "datetime-local", value: spinWindowStart, onChange: (e) => setSpinWindowStart(e.target.value) }), _jsx(Input, { label: "Spin window end", type: "datetime-local", value: spinWindowEnd, onChange: (e) => setSpinWindowEnd(e.target.value) })] })] })), eventId && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/20 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: raffleWinnerName
+                                                    ? `Winner: ${raffleWinnerName}`
+                                                    : "Raffle not yet triggered" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => triggerRaffleMutation.mutate(), disabled: triggerRaffleMutation.isPending ||
+                                                    Boolean(raffleWinnerName), children: triggerRaffleMutation.isPending
+                                                    ? "Triggering…"
+                                                    : raffleWinnerName
+                                                        ? "Already triggered"
+                                                        : "Trigger Raffle Now" })] }), raffleEntryCount !== null && (_jsxs(Text, { className: "text-xs text-amber-800 dark:text-amber-200", children: ["Pool size: ", raffleEntryCount] })), raffleGithubUrl && (_jsxs(Text, { className: "text-xs text-amber-800 dark:text-amber-200 break-all", children: ["Fairness proof: ", raffleGithubUrl] })), triggerMessage && (_jsx(Text, { className: "text-xs text-amber-900 dark:text-amber-100", children: triggerMessage }))] }))] }))] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => { window.location.href = "/admin/events"; }, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: saveMutation.isPending || !isValid, children: saveMutation.isPending ? "Saving…" : eventId ? "Save changes" : "Create event" })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
     if (embedded) {
         return (_jsxs("div", { className: "overflow-y-auto p-4 space-y-4", children: [alertSection, formSection] }));
     }

package/dist/features/events/components/AdminEventsView.js

@@ -4,8 +4,9 @@ import React, { useState, useCallback } from "react";
 import { Plus, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { Button, ListingToolbar, Pagination, ListingViewShell, SideDrawer } from "../../../ui";
+import { Button, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, SideDrawer } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ADMIN_EVENT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../../admin/hooks/useAdminListingData";
 import { DataTable } from "../../admin/components/DataTable";
 import { AdminEventEditorView } from "./AdminEventEditorView";
@@ -18,8 +19,19 @@ const SORT_OPTIONS = [
     { value: "-createdAt", label: "Newest" },
     { value: "title", label: "Title A–Z" },
 ];
-const STATUS_OPTIONS = ["All", "published", "draft", "active", "ended"];
-const TYPE_OPTIONS = ["All", "contest", "giveaway", "sale", "poll", "survey", "flash-sale"];
+const STATUS_OPTIONS = ADMIN_EVENT_STATUS_TABS;
+// TODO(events): TYPE_OPTIONS list pre-dates the SB9 EventType union refresh
+// (sale|offer|poll|survey|feedback|raffle|spin_wheel). Keep current values to
+// avoid silently breaking saved-filter URLs — sync in a dedicated follow-up.
+const TYPE_OPTIONS = [
+    { id: "All", label: "All" },
+    { id: "contest", label: "Contest" },
+    { id: "giveaway", label: "Giveaway" },
+    { id: "sale", label: "Sale" },
+    { id: "poll", label: "Poll" },
+    { id: "survey", label: "Survey" },
+    { id: "flash-sale", label: "Flash Sale" },
+];
 export function AdminEventsView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
@@ -86,5 +98,5 @@ export function AdminEventsView({ children, getRowHref, ...props }) {
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events by title or type", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Event"] }) }), 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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No events found", onRowClick: (row) => openEditPanel(row.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: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "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", 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-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: TYPE_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] })] }), _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})` : ""] }) })] })] })), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Event" : "Edit Event", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })) })] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events by title or type", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Event"] }) }), 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: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No events found", onRowClick: (row) => openEditPanel(row.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: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "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", 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-5", children: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] }), _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})` : ""] }) })] })] })), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Event" : "Edit Event", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })) })] }));
 }

package/dist/features/events/components/EventCard.d.ts

@@ -9,6 +9,9 @@ interface EventCardProps {
     };
     onParticipate?: (event: EventItem) => void;
     className?: string;
+    selectable?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string, selected: boolean) => void;
 }
-export declare function EventCard({ event, labels, onParticipate, className, }: EventCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventCard({ event, labels, onParticipate, className, selectable, isSelected, onSelect, }: EventCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/events/components/EventCard.js

@@ -1,25 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Article, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";
+import { Article, BaseListingCard, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";
 import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { EVENT_FIELDS } from "../schemas";
 import { EventStatusBadge } from "./EventStatusBadge";
 import { ROUTES } from "../../../next";
+import { useLongPress } from "../../../react/hooks/useLongPress";
 const TYPE_ICONS = {
     sale: "🏷️",
     offer: "🎁",
     poll: "📊",
     survey: "📝",
     feedback: "💬",
+    raffle: "🎟️",
+    spin_wheel: "🎡",
 };
-export function EventCard({ event, labels = {}, onParticipate, className = "", }) {
+export function EventCard({ event, labels = {}, onParticipate, className = "", selectable = false, isSelected = false, onSelect, }) {
+    const longPress = useLongPress(() => onSelect?.(event.id, !isSelected));
     const safeTitle = event.title?.trim() || "Untitled event";
     const now = new Date();
     const endsAt = new Date(event.endsAt);
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
     const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
-    return (_jsxs(Article, { className: `group flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [_jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center", children: _jsx("span", { className: "text-5xl opacity-40", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1 group-hover:text-primary transition-colors", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+    return (_jsxs(Article, { className: `group relative flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border bg-white shadow-sm transition-shadow hover:shadow-md dark:bg-slate-900 ${isSelected ? "border-primary outline outline-2 outline-primary" : "border-zinc-200 dark:border-slate-700"} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center", children: _jsx("span", { className: "text-5xl opacity-40", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1 group-hover:text-primary transition-colors", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
                                 daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { type: "button", onClick: () => onParticipate(event), className: "w-full rounded-lg bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { href: detailHref, className: "inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
 }

package/dist/features/events/components/EventRaffleWinnerView.d.ts

@@ -0,0 +1,21 @@
+export interface RaffleWinnerEvent {
+    rafflePrize?: string;
+    raffleWinnerUserId?: string;
+    raffleWinnerDisplayName?: string;
+    raffleEntryCount?: number;
+    raffleTriggeredAt?: string | Date;
+    raffleGithubFunctionUrl?: string;
+}
+export interface EventRaffleWinnerViewProps {
+    event: RaffleWinnerEvent;
+    labels?: {
+        heading?: string;
+        winnerLabel?: string;
+        prizeLabel?: string;
+        poolLabel?: string;
+        fairnessLabel?: string;
+        notDrawnYet?: string;
+        anonymous?: string;
+    };
+}
+export declare function EventRaffleWinnerView({ event, labels }: EventRaffleWinnerViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/events/components/EventRaffleWinnerView.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Article, Div, Heading, Span, Text, TextLink } from "../../../ui";
+const DEFAULT_LABELS = {
+    heading: "Raffle Winner",
+    winnerLabel: "Winner",
+    prizeLabel: "Prize",
+    poolLabel: "Entries in pool",
+    fairnessLabel: "Verifiable randomness",
+    notDrawnYet: "The raffle has not been drawn yet.",
+    anonymous: "Anonymous participant",
+};
+export function EventRaffleWinnerView({ event, labels }) {
+    const l = { ...DEFAULT_LABELS, ...(labels ?? {}) };
+    if (!event.raffleWinnerUserId) {
+        return (_jsx(Div, { className: "rounded-xl border border-dashed border-zinc-300 dark:border-zinc-700 px-6 py-10 text-center", children: _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400", children: l.notDrawnYet }) }));
+    }
+    return (_jsxs(Article, { className: "space-y-4", children: [_jsxs(Heading, { level: 2, className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: ["\uD83C\uDF9F\uFE0F ", l.heading] }), _jsxs(Div, { className: "rounded-2xl border border-amber-200 bg-amber-50/60 dark:border-amber-700 dark:bg-amber-900/20 p-6 space-y-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300", children: l.winnerLabel }), _jsx(Text, { className: "mt-1 text-2xl font-bold text-amber-900 dark:text-amber-100", children: event.raffleWinnerDisplayName?.trim() || l.anonymous })] }), event.rafflePrize ? (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300", children: l.prizeLabel }), _jsx(Text, { className: "mt-1 text-base text-zinc-800 dark:text-zinc-100", children: event.rafflePrize })] })) : null, _jsxs(Div, { className: "flex flex-wrap gap-x-6 gap-y-2 pt-2 text-sm text-zinc-600 dark:text-zinc-300", children: [typeof event.raffleEntryCount === "number" ? (_jsxs(Span, { children: [l.poolLabel, ":", " ", _jsx(Span, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: event.raffleEntryCount })] })) : null, event.raffleTriggeredAt ? (_jsx(Span, { children: new Date(event.raffleTriggeredAt).toLocaleString() })) : null] })] }), event.raffleGithubFunctionUrl ? (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 p-4 text-sm", children: [_jsx(Text, { className: "font-medium text-zinc-700 dark:text-zinc-200", children: l.fairnessLabel }), _jsx(TextLink, { href: event.raffleGithubFunctionUrl, className: "mt-1 block break-all text-primary-600 dark:text-primary-400 hover:underline", children: event.raffleGithubFunctionUrl })] })) : null] }));
+}

package/dist/features/events/components/SpinWheelView.d.ts

@@ -0,0 +1,27 @@
+import type { SpinPrize } from "../types";
+export interface SpinWheelViewProps {
+    eventId: string;
+    prizes: SpinPrize[];
+    alreadyUsed?: boolean;
+    initialPrizeId?: string;
+    initialCouponCode?: string;
+    windowStart?: string | Date | null;
+    windowEnd?: string | Date | null;
+    onSpin: (eventId: string) => Promise<{
+        spinPrizeId?: string;
+        spinPrizeTitle?: string;
+        spinPrizeCouponCode?: string;
+        reason?: string;
+    }>;
+    labels?: {
+        heading?: string;
+        spinButton?: string;
+        spinningButton?: string;
+        alreadySpun?: string;
+        outsideWindow?: string;
+        wonHeadline?: string;
+        couponHint?: string;
+        errorFallback?: string;
+    };
+}
+export declare function SpinWheelView({ eventId, prizes, alreadyUsed, initialPrizeId, initialCouponCode, windowStart, windowEnd, onSpin, labels, }: SpinWheelViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/events/components/SpinWheelView.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { Button, Div, Heading, Span, Text } from "../../../ui";
+const DEFAULT_LABELS = {
+    heading: "Spin the Wheel",
+    spinButton: "Spin",
+    spinningButton: "Spinning…",
+    alreadySpun: "You've already used your spin for this event.",
+    outsideWindow: "The spin window is not open.",
+    wonHeadline: "You won:",
+    couponHint: "Coupon code:",
+    errorFallback: "Spin failed. Please try again.",
+};
+const ANIMATION_MS = 3200;
+export function SpinWheelView({ eventId, prizes, alreadyUsed, initialPrizeId, initialCouponCode, windowStart, windowEnd, onSpin, labels, }) {
+    const l = { ...DEFAULT_LABELS, ...(labels ?? {}) };
+    const activePrizes = useMemo(() => prizes.filter((p) => p.isActive !== false), [prizes]);
+    const [spinning, setSpinning] = useState(false);
+    const [resultPrizeId, setResultPrizeId] = useState(initialPrizeId);
+    const [resultCoupon, setResultCoupon] = useState(initialCouponCode);
+    const [error, setError] = useState(null);
+    const now = Date.now();
+    const startMs = windowStart ? new Date(windowStart).getTime() : null;
+    const endMs = windowEnd ? new Date(windowEnd).getTime() : null;
+    const inWindow = (startMs === null || now >= startMs) && (endMs === null || now <= endMs);
+    const disabled = spinning || alreadyUsed || !inWindow || activePrizes.length === 0;
+    const handleSpin = useCallback(async () => {
+        if (disabled)
+            return;
+        setError(null);
+        setSpinning(true);
+        try {
+            const result = await onSpin(eventId);
+            window.setTimeout(() => {
+                setSpinning(false);
+                if (result.spinPrizeId) {
+                    setResultPrizeId(result.spinPrizeId);
+                    setResultCoupon(result.spinPrizeCouponCode);
+                }
+                else {
+                    setError(l.errorFallback);
+                }
+            }, ANIMATION_MS);
+        }
+        catch {
+            setSpinning(false);
+            setError(l.errorFallback);
+        }
+    }, [disabled, eventId, l.errorFallback, onSpin]);
+    const wonPrize = resultPrizeId
+        ? activePrizes.find((p) => p.id === resultPrizeId)
+        : undefined;
+    return (_jsxs(Div, { className: "space-y-4", children: [_jsxs(Heading, { level: 2, className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: ["\uD83C\uDFA1 ", l.heading] }), _jsxs(Div, { className: "relative mx-auto aspect-square w-64 overflow-hidden rounded-full border-4 border-amber-400 bg-gradient-to-br from-amber-100 via-rose-100 to-violet-100 dark:from-amber-900/40 dark:via-rose-900/40 dark:to-violet-900/40", "aria-label": "Spin wheel", children: [_jsx(Div, { className: "absolute inset-0 flex items-center justify-center", style: {
+                            animation: spinning
+                                ? `lir-spin ${ANIMATION_MS}ms cubic-bezier(0.2, 0.8, 0.2, 1)`
+                                : undefined,
+                        }, children: _jsx(Text, { className: "text-4xl", children: "\uD83C\uDF81" }) }), _jsx("style", { children: `
+          @keyframes lir-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(2160deg); }
+          }
+        ` })] }), wonPrize ? (_jsxs(Div, { className: "rounded-xl border border-emerald-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-900/30 p-4 text-center", children: [_jsx(Text, { className: "text-sm uppercase tracking-wide text-emerald-700 dark:text-emerald-300", children: l.wonHeadline }), _jsx(Text, { className: "mt-1 text-lg font-bold text-emerald-900 dark:text-emerald-100", children: wonPrize.label }), resultCoupon ? (_jsxs(Text, { className: "mt-2 text-sm text-emerald-800 dark:text-emerald-200", children: [l.couponHint, " ", _jsx(Span, { className: "font-mono font-semibold", children: resultCoupon })] })) : null] })) : null, error ? (_jsx(Text, { className: "text-sm text-rose-600 dark:text-rose-400 text-center", children: error })) : null, _jsx(Div, { className: "flex justify-center", children: _jsx(Button, { variant: "primary", size: "lg", onClick: handleSpin, disabled: disabled, children: spinning ? l.spinningButton : l.spinButton }) }), alreadyUsed ? (_jsx(Text, { className: "text-center text-sm text-zinc-500 dark:text-zinc-400", children: l.alreadySpun })) : !inWindow ? (_jsx(Text, { className: "text-center text-sm text-zinc-500 dark:text-zinc-400", children: l.outsideWindow })) : null] }));
+}

package/dist/features/events/components/index.d.ts

@@ -25,3 +25,7 @@ export { EventPollWidget } from "./EventPollWidget";
 export type {} from "./EventPollWidget";
 export { EventRafflesSection } from "./EventRafflesSection";
 export type { EventRafflesSectionProps } from "./EventRafflesSection";
+export { EventRaffleWinnerView } from "./EventRaffleWinnerView";
+export type { EventRaffleWinnerViewProps } from "./EventRaffleWinnerView";
+export { SpinWheelView } from "./SpinWheelView";
+export type { SpinWheelViewProps } from "./SpinWheelView";

package/dist/features/events/components/index.js

@@ -13,3 +13,5 @@ export { EventFormDrawer } from "./EventFormDrawer";
 export { EventBanner } from "./EventBanner";
 export { EventPollWidget } from "./EventPollWidget";
 export { EventRafflesSection } from "./EventRafflesSection";
+export { EventRaffleWinnerView } from "./EventRaffleWinnerView";
+export { SpinWheelView } from "./SpinWheelView";