@mohasinac/appkit 2.7.27 → 2.7.31

package/dist/features/orders/components/MarketplaceOrderCard.js

@@ -6,6 +6,7 @@ import { BaseListingCard, Caption, Span, StatusBadge, Text, TextLink, Button, }
 import { formatCurrency, formatDate } from "../../../utils";
 import { OrderStatusValues } from "../schemas";
 import { useLongPress } from "../../../react/hooks/useLongPress";
+const CLS_ACTION_BUTTON = "min-w-0 flex-1 px-2 text-xs";
 const STATUS_MAP = {
     pending: "pending",
     confirmed: "info",
@@ -49,5 +50,5 @@ export function MarketplaceOrderCard({ order, links, labels, className = "", var
     const itemCount = order.items?.length ?? 0;
     return (_jsxs("div", { className: `group relative overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all duration-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 ${isSelected ? "ring-2 ring-primary-500 dark:ring-primary-400" : ""} ${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, "data-section": "marketplaceordercard-div-411", children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: handleSelect, label: isSelected ? "Deselect order" : "Select order", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs("div", { className: `flex gap-4 p-4 ${isListVariant ? "flex-row items-center justify-between" : "flex-col"}`, "data-section": "marketplaceordercard-div-412", children: [_jsxs("div", { className: `flex items-start gap-3 ${selectable ? "pl-8" : ""} ${isListVariant ? "min-w-0 flex-1" : ""}`, "data-section": "marketplaceordercard-div-413", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-slate-800", "data-section": "marketplaceordercard-div-414", children: _jsx(Package, { className: "h-5 w-5 text-zinc-500 dark:text-slate-400" }) }), _jsxs("div", { className: "min-w-0 space-y-1", "data-section": "marketplaceordercard-div-415", children: [_jsx(TextLink, { href: detailHref, className: "leading-tight", children: _jsx(Text, { weight: "semibold", className: "truncate", children: order.productTitle ?? shortId }) }), _jsxs(Caption, { className: "font-mono text-xs", children: [mergedLabels.orderNumber, " ", shortId] }), _jsxs(Caption, { className: "text-xs", children: [mergedLabels.placedOn, " ", formatDate(order.orderDate)] }), itemCount > 1 && (_jsxs(Caption, { className: "text-xs", children: [mergedLabels.items, ": ", _jsx(Span, { weight: "medium", children: itemCount })] }))] })] }), _jsxs("div", { className: `flex ${isListVariant ? "flex-shrink-0 items-center gap-4" : "flex-col gap-3"}`, "data-section": "marketplaceordercard-div-416", children: [_jsxs("div", { className: `flex ${isListVariant ? "items-center gap-4" : "flex-wrap items-center justify-between gap-3"}`, "data-section": "marketplaceordercard-div-417", children: [_jsx(StatusBadge, { status: status, label: statusLabel }), _jsx(Text, { weight: "semibold", className: "tabular-nums", children: formatCurrency(order.totalPrice, order.currency) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-section": "marketplaceordercard-div-418", children: [(isShipped || isDelivered) &&
                                         trackHref &&
-                                        order.trackingNumber && (_jsx(Button, { variant: "ghost", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(trackHref), children: mergedLabels.trackOrder })), isDelivered && reviewHref && (_jsx(Button, { variant: "outline", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(reviewHref), children: mergedLabels.writeReview })), _jsx(Button, { variant: "secondary", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(detailHref), children: mergedLabels.viewOrder })] })] })] })] }));
+                                        order.trackingNumber && (_jsx(Button, { variant: "ghost", size: "sm", className: CLS_ACTION_BUTTON, onClick: () => navigate(trackHref), children: mergedLabels.trackOrder })), isDelivered && reviewHref && (_jsx(Button, { variant: "outline", size: "sm", className: CLS_ACTION_BUTTON, onClick: () => navigate(reviewHref), children: mergedLabels.writeReview })), _jsx(Button, { variant: "secondary", size: "sm", className: CLS_ACTION_BUTTON, onClick: () => navigate(detailHref), children: mergedLabels.viewOrder })] })] })] })] }));
 }

package/dist/features/orders/components/OrderFilters.js

@@ -34,12 +34,15 @@ export const ORDER_FILTER_KEYS = {
         TABLE_KEYS.DATE_TO,
     ],
 };
+const LABEL_AMOUNT_HIGH_TO_LOW = "Amount: High to Low";
+const LABEL_AMOUNT_LOW_TO_HIGH = "Amount: Low to High";
+const LABEL_ORDER_DATE_NEWEST = "Order Date: Newest";
 export const ORDER_ADMIN_SORT_OPTIONS = [
     { value: sortBy(ORDER_FIELDS.CREATED_AT), label: "Newest First" },
     { value: sortBy(ORDER_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
-    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE), label: "Amount: High to Low" },
-    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE, "ASC"), label: "Amount: Low to High" },
-    { value: sortBy(ORDER_FIELDS.ORDER_DATE), label: "Order Date: Newest" },
+    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE), label: LABEL_AMOUNT_HIGH_TO_LOW },
+    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE, "ASC"), label: LABEL_AMOUNT_LOW_TO_HIGH },
+    { value: sortBy(ORDER_FIELDS.ORDER_DATE), label: LABEL_ORDER_DATE_NEWEST },
     { value: sortBy(ORDER_FIELDS.ORDER_DATE, "ASC"), label: "Order Date: Oldest" },
     { value: sortBy(ORDER_FIELDS.USER_NAME, "ASC"), label: "Customer A–Z" },
     { value: sortBy(ORDER_FIELDS.PRODUCT_TITLE, "ASC"), label: "Product A–Z" },
@@ -47,17 +50,17 @@ export const ORDER_ADMIN_SORT_OPTIONS = [
 export const ORDER_SELLER_SORT_OPTIONS = [
     { value: sortBy(ORDER_FIELDS.CREATED_AT), label: "Newest First" },
     { value: sortBy(ORDER_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
-    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE), label: "Amount: High to Low" },
-    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE, "ASC"), label: "Amount: Low to High" },
-    { value: sortBy(ORDER_FIELDS.ORDER_DATE), label: "Order Date: Newest" },
+    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE), label: LABEL_AMOUNT_HIGH_TO_LOW },
+    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE, "ASC"), label: LABEL_AMOUNT_LOW_TO_HIGH },
+    { value: sortBy(ORDER_FIELDS.ORDER_DATE), label: LABEL_ORDER_DATE_NEWEST },
     { value: sortBy(ORDER_FIELDS.USER_NAME, "ASC"), label: "Customer A–Z" },
 ];
 export const ORDER_USER_SORT_OPTIONS = [
     { value: sortBy(ORDER_FIELDS.CREATED_AT), label: "Newest First" },
     { value: sortBy(ORDER_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
-    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE), label: "Amount: High to Low" },
-    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE, "ASC"), label: "Amount: Low to High" },
-    { value: sortBy(ORDER_FIELDS.ORDER_DATE), label: "Order Date: Newest" },
+    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE), label: LABEL_AMOUNT_HIGH_TO_LOW },
+    { value: sortBy(ORDER_FIELDS.TOTAL_PRICE, "ASC"), label: LABEL_AMOUNT_LOW_TO_HIGH },
+    { value: sortBy(ORDER_FIELDS.ORDER_DATE), label: LABEL_ORDER_DATE_NEWEST },
     { value: sortBy(ORDER_FIELDS.ORDER_DATE, "ASC"), label: "Order Date: Oldest" },
 ];
 export function getOrderFilterKeys(variant) {

package/dist/features/orders/schemas/index.d.ts

@@ -12,18 +12,18 @@ export declare const orderItemSchema: z.ZodObject<{
     attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 }, "strip", z.ZodTypeAny, {
     title: string;
+    price: number;
     productId: string;
     quantity: number;
-    price: number;
     currency?: string | undefined;
     storeId?: string | undefined;
     image?: string | undefined;
     attributes?: Record<string, string> | undefined;
 }, {
     title: string;
+    price: number;
     productId: string;
     quantity: number;
-    price: number;
     currency?: string | undefined;
     storeId?: string | undefined;
     image?: string | undefined;
@@ -72,18 +72,18 @@ export declare const orderSchema: z.ZodObject<{
         attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
     }, "strip", z.ZodTypeAny, {
         title: string;
+        price: number;
         productId: string;
         quantity: number;
-        price: number;
         currency?: string | undefined;
         storeId?: string | undefined;
         image?: string | undefined;
         attributes?: Record<string, string> | undefined;
     }, {
         title: string;
+        price: number;
         productId: string;
         quantity: number;
-        price: number;
         currency?: string | undefined;
         storeId?: string | undefined;
         image?: string | undefined;
@@ -127,9 +127,9 @@ export declare const orderSchema: z.ZodObject<{
     address: Record<string, unknown>;
     items: {
         title: string;
+        price: number;
         productId: string;
         quantity: number;
-        price: number;
         currency?: string | undefined;
         storeId?: string | undefined;
         image?: string | undefined;
@@ -162,9 +162,9 @@ export declare const orderSchema: z.ZodObject<{
     address: Record<string, unknown>;
     items: {
         title: string;
+        price: number;
         productId: string;
         quantity: number;
-        price: number;
         currency?: string | undefined;
         storeId?: string | undefined;
         image?: string | undefined;

package/dist/features/pre-orders/api/[id]/route.js

@@ -10,15 +10,18 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../contracts";
+const ERR_PRE_ORDER_ID_REQUIRED = "Pre-order ID is required";
+const ERR_DB_NOT_CONFIGURED = "Database provider not configured";
+const ERR_INTERNAL_SERVER_ERROR = "Internal server error";
 export async function GET(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Pre-order ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_PRE_ORDER_ID_REQUIRED }, { status: 400 });
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("pre_orders");
         const preOrder = await repo.findById(id);
         if (!preOrder) {
@@ -32,7 +35,7 @@ export async function GET(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -40,12 +43,12 @@ export async function PATCH(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Pre-order ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_PRE_ORDER_ID_REQUIRED }, { status: 400 });
         }
         const body = await request.json();
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("pre_orders");
         const updated = await repo.update(id, body);
         if (!updated) {
@@ -59,7 +62,7 @@ export async function PATCH(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -67,11 +70,11 @@ export async function DELETE(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Pre-order ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_PRE_ORDER_ID_REQUIRED }, { status: 400 });
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("pre_orders");
         await repo.delete(id);
         return NextResponse.json({
@@ -82,7 +85,7 @@ export async function DELETE(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }

package/dist/features/pre-orders/components/MarketplacePreorderCard.js

@@ -6,6 +6,7 @@ import { useLongPress } from "../../../react/hooks/useLongPress";
 import { MediaImage } from "../../media";
 import { useWishlistToggle } from "../../wishlist";
 import { ROUTES } from "../../../next";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { formatCurrency } from "../../../utils";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { BaseListingCard, Button, Div, RichText, Row, Span, Text, TextLink, } from "../../../ui";
@@ -15,10 +16,10 @@ import { PreorderBadge } from "./PreorderCard";
 const DEFAULT_LABELS = {
     preOrderBadge: "Pre-order",
     featuredBadge: "Featured",
-    reserveNow: "Reserve now",
-    addToCart: "Add to Cart",
-    addToWishlist: "Add to wishlist",
-    removeFromWishlist: "Remove from wishlist",
+    reserveNow: ACTIONS.PRE_ORDER["reserve-now"].label,
+    addToCart: ACTIONS.PRODUCT["add-to-cart"].label,
+    addToWishlist: ACTIONS.PRODUCT["add-to-wishlist"].label,
+    removeFromWishlist: ACTIONS.PRODUCT["remove-from-wishlist"].label,
 };
 function resolveHref(product, href, hrefBuilder) {
     if (href)

package/dist/features/pre-orders/components/PreOrderDetailPageView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link";
 import { productRepository } from "../../../repositories";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
 import { ROUTES } from "../../../next";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { formatCurrency } from "../../../utils/number.formatter";
@@ -30,6 +31,30 @@ const PRODUCTION_STATUS_LABELS = {
     in_production: "In Production",
     ready_to_ship: "Ready to Ship",
 };
+function PreOrderInfoSection({ title, productionStatus, maxPerUser, deliveryDate, featured, freeShipping, condition, isCancellable, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref, }) {
+    return (_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-indigo-100 dark:bg-indigo-900/30 px-2.5 py-0.5 text-xs font-semibold text-indigo-700 dark:text-indigo-300", children: "Pre-Order" }), productionStatus && (_jsx(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-600 dark:text-zinc-300", children: PRODUCTION_STATUS_LABELS[productionStatus] ?? productionStatus })), maxPerUser !== null && (_jsxs(Span, { className: "inline-block rounded-full bg-amber-100 dark:bg-amber-900/30 px-2.5 py-0.5 text-xs font-medium text-amber-800 dark:text-amber-200", children: ["Limit: ", maxPerUser, " per customer"] }))] }), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title })] }), deliveryDate && (_jsxs(Row, { align: "center", gap: "xs", className: "text-sm text-zinc-600 dark:text-zinc-400", children: [_jsx(Span, { children: "\uD83D\uDCC5" }), _jsx(Span, { children: "Estimated delivery:" }), _jsx(Span, { className: "font-medium", children: deliveryDate.toLocaleDateString(undefined, { year: "numeric", month: "long" }) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: isCancellable, labels: {
+                    featured: "Featured",
+                    fasterDelivery: "Faster Delivery",
+                    ratedSeller: "Rated Seller",
+                    condition: "Condition",
+                    conditionNew: "New",
+                    conditionUsed: "Used",
+                    conditionBroken: "For Parts",
+                    conditionRefurbished: "Refurbished",
+                    returnable: "Cancellable",
+                    freeShipping: "Free Shipping",
+                    codAvailable: "Cash on Delivery",
+                    wishlistCount: (n) => `${n} wishlisted`,
+                    categoryProductCount: (n, cat) => `${n} in ${cat}`,
+                } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category })), !category && categoryName && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: categoryName })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: brand }))] })), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx("ul", { className: "space-y-1.5", children: features.map((f, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), 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" }))] }) }))] }));
+}
+function PreOrderBuyBarPanel({ reserveTarget, reservedCount, progressPct, productId, price, currency, depositAmount, depositPercent, isCancellable, tags, onReserveNow, }) {
+    return (_jsxs(Div, { id: "pre-order-buy-bar", className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5 space-y-4", children: [reserveTarget > 0 && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Text, { className: "text-xs text-zinc-500", children: [reservedCount, " of ", reserveTarget, " reserved"] }), _jsxs(Span, { className: "text-xs font-semibold text-primary-600 dark:text-primary-400", children: [progressPct, "%"] })] }), _jsx(Div, { className: "h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: _jsx(Div, { className: "h-full rounded-full bg-primary transition-all", style: { width: `${progressPct}%` } }) })] })), onReserveNow ? (_jsx(PreOrderActionsClient, { productId: productId, price: price, currency: currency, depositAmount: depositAmount, depositPercent: depositPercent, isCancellable: isCancellable, tags: tags, onReserveNow: onReserveNow })) : (_jsxs(_Fragment, { children: [price !== null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) }), depositAmount !== null && (_jsxs(Text, { className: "mt-0.5 text-xs text-zinc-500", children: ["Reserve with ", formatCurrency(depositAmount, currency), depositPercent !== null ? ` (${depositPercent}% deposit)` : ""] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Reserve Now" }), isCancellable && (_jsx(Text, { className: "text-center text-xs text-zinc-500 dark:text-zinc-400", children: "\u2713 Free cancellation before production" }))] }), tags.length > 0 && (_jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-xs text-zinc-600 dark:text-zinc-300", children: tag }, tag))) }) })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "sm", className: "justify-center text-center", children: [
+                                { icon: "🔒", label: "Secure\nPayment" },
+                                { icon: "📅", label: "Guaranteed\nDelivery" },
+                                { icon: "↩", label: "Free\nCancellation" },
+                            ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { className: "text-base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] }))] }));
+}
 export async function PreOrderDetailPageView({ id, initialPreOrder, onReserveNow, productFeatures }) {
     const product = initialPreOrder !== undefined
         ? (initialPreOrder ?? undefined)
@@ -87,8 +112,8 @@ export async function PreOrderDetailPageView({ id, initialPreOrder, onReserveNow
     const storeHref = storeSlug
         ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug))
         : null;
-    const category = typeof p.category === "string" ? p.category : null;
-    const categoryName = typeof p.categoryName === "string" ? p.categoryName : null;
+    const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? p.categorySlugs[0] : (typeof p.category === "string" ? p.category : null);
+    const categoryName = Array.isArray(p.categoryNames) && p.categoryNames.length > 0 ? p.categoryNames[0] : (typeof p.categoryName === "string" ? p.categoryName : null);
     const brand = typeof p.brand === "string" ? p.brand : null;
     const brandSlug = typeof p.brandSlug === "string" ? p.brandSlug : null;
     const features = Array.isArray(p.features) ? p.features : [];
@@ -114,21 +139,7 @@ export async function PreOrderDetailPageView({ id, initialPreOrder, onReserveNow
                     price: typeof p.price === "number" ? p.price : undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: typeof p.storeName === "string" ? p.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.PRE_ORDERS), className: "hover:text-primary-600 transition-colors", children: "Pre-Orders" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 transition-colors", children: categoryName || category })] })), _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(ProductGalleryClient, { images: images, productName: title })), 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-indigo-100 dark:bg-indigo-900/30 px-2.5 py-0.5 text-xs font-semibold text-indigo-700 dark:text-indigo-300", children: "Pre-Order" }), productionStatus && (_jsx(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-600 dark:text-zinc-300", children: PRODUCTION_STATUS_LABELS[productionStatus] ?? productionStatus })), maxPerUser !== null && (_jsxs(Span, { className: "inline-block rounded-full bg-amber-100 dark:bg-amber-900/30 px-2.5 py-0.5 text-xs font-medium text-amber-800 dark:text-amber-200", children: ["Limit: ", maxPerUser, " per customer"] }))] }), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title })] }), deliveryDate && (_jsxs(Row, { align: "center", gap: "xs", className: "text-sm text-zinc-600 dark:text-zinc-400", children: [_jsx(Span, { children: "\uD83D\uDCC5" }), _jsx(Span, { children: "Estimated delivery:" }), _jsx(Span, { className: "font-medium", children: deliveryDate.toLocaleDateString(undefined, { year: "numeric", month: "long" }) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: isCancellable, labels: {
-                                        featured: "Featured",
-                                        fasterDelivery: "Faster Delivery",
-                                        ratedSeller: "Rated Seller",
-                                        condition: "Condition",
-                                        conditionNew: "New",
-                                        conditionUsed: "Used",
-                                        conditionBroken: "For Parts",
-                                        conditionRefurbished: "Refurbished",
-                                        returnable: "Cancellable",
-                                        freeShipping: "Free Shipping",
-                                        codAvailable: "Cash on Delivery",
-                                        wishlistCount: (n) => `${n} wishlisted`,
-                                        categoryProductCount: (n, cat) => `${n} in ${cat}`,
-                                    } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category })), !category && categoryName && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: categoryName })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: brand }))] })), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx("ul", { className: "space-y-1.5", children: features.map((f, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), 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" }))] }) }))] })), renderSublistingSection: sublistingCategoryId
+                } }), _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: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRE_ORDERS), className: CLS_BREADCRUMB_LINK, children: "Pre-Orders" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _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(ProductGalleryClient, { images: images, productName: title })), renderInfo: () => (_jsx(PreOrderInfoSection, { title: title, productionStatus: productionStatus, maxPerUser: maxPerUser, deliveryDate: deliveryDate, featured: featured, freeShipping: freeShipping, condition: condition, isCancellable: isCancellable, category: category, categoryName: categoryName, brand: brand, brandSlug: brandSlug, productFeatures: productFeatures, features: features, descriptionHtml: descriptionHtml, safeSeller: safeSeller, storeHref: storeHref })), renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
@@ -136,9 +147,5 @@ export async function PreOrderDetailPageView({ id, initialPreOrder, onReserveNow
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),
-                            })) })), renderBuyBar: () => (_jsxs(Div, { id: "pre-order-buy-bar", className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5 space-y-4", children: [reserveTarget > 0 && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Text, { className: "text-xs text-zinc-500", children: [reservedCount, " of ", reserveTarget, " reserved"] }), _jsxs(Span, { className: "text-xs font-semibold text-primary-600 dark:text-primary-400", children: [progressPct, "%"] })] }), _jsx(Div, { className: "h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: _jsx(Div, { className: "h-full rounded-full bg-primary transition-all", style: { width: `${progressPct}%` } }) })] })), onReserveNow ? (_jsx(PreOrderActionsClient, { productId: String(product.id), price: price, currency: currency, depositAmount: depositAmount, depositPercent: depositPercent, isCancellable: isCancellable, tags: tags, onReserveNow: onReserveNow })) : (_jsxs(_Fragment, { children: [price !== null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) }), depositAmount !== null && (_jsxs(Text, { className: "mt-0.5 text-xs text-zinc-500", children: ["Reserve with ", formatCurrency(depositAmount, currency), depositPercent !== null ? ` (${depositPercent}% deposit)` : ""] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Reserve Now" }), isCancellable && (_jsx(Text, { className: "text-center text-xs text-zinc-500 dark:text-zinc-400", children: "\u2713 Free cancellation before production" }))] }), tags.length > 0 && (_jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-xs text-zinc-600 dark:text-zinc-300", children: tag }, tag))) }) })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "sm", className: "justify-center text-center", children: [
-                                                    { icon: "🔒", label: "Secure\nPayment" },
-                                                    { icon: "📅", label: "Guaranteed\nDelivery" },
-                                                    { icon: "↩", label: "Free\nCancellation" },
-                                                ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { className: "text-base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] }))] })) }), _jsxs(BuyBar, { children: [price !== null && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) })), _jsx("a", { href: "#pre-order-buy-bar", className: "appkit-button appkit-button--primary appkit-button--sm flex-1", children: _jsx("span", { className: "appkit-button__content", children: "Reserve Now" }) })] })] })] }));
+                            })) })), renderBuyBar: () => (_jsx(PreOrderBuyBarPanel, { reserveTarget: reserveTarget, reservedCount: reservedCount, progressPct: progressPct, productId: String(product.id), price: price, currency: currency, depositAmount: depositAmount, depositPercent: depositPercent, isCancellable: isCancellable, tags: tags, onReserveNow: onReserveNow })) }), _jsxs(BuyBar, { children: [price !== null && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) })), _jsx("a", { href: "#pre-order-buy-bar", className: "appkit-button appkit-button--primary appkit-button--sm flex-1", children: _jsx("span", { className: "appkit-button__content", children: "Reserve Now" }) })] })] })] }));
 }

package/dist/features/pre-orders/components/PreOrderFilters.d.ts

@@ -1,10 +1,16 @@
 import type { FacetOption } from "../../filters/FilterFacetSection";
 import type { UrlTable } from "../../filters/FilterPanel";
+import type { AsyncFacetSectionProps } from "../../filters/AsyncFacetSection";
+type LoadOptionsFn = AsyncFacetSectionProps["loadOptions"];
 export interface PreOrderFiltersProps {
     table: UrlTable;
     categoryOptions?: FacetOption[];
     brandOptions?: FacetOption[];
     storeOptions?: FacetOption[];
+    loadCategoryOptions?: LoadOptionsFn;
+    loadBrandOptions?: LoadOptionsFn;
+    loadStoreOptions?: LoadOptionsFn;
     currencyPrefix?: string;
 }
-export declare function PreOrderFilters({ table, categoryOptions, brandOptions, storeOptions, currencyPrefix, }: PreOrderFiltersProps): import("react/jsx-runtime").JSX.Element;
+export declare function PreOrderFilters({ table, categoryOptions, brandOptions, storeOptions, loadCategoryOptions, loadBrandOptions, loadStoreOptions, currencyPrefix, }: PreOrderFiltersProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/pre-orders/components/PreOrderFilters.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { AsyncFacetSection } from "../../filters/AsyncFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
 import { Div } from "../../../ui";
-export function PreOrderFilters({ table, categoryOptions = [], brandOptions = [], storeOptions = [], currencyPrefix = "", }) {
+export function PreOrderFilters({ table, categoryOptions = [], brandOptions = [], storeOptions = [], loadCategoryOptions, loadBrandOptions, loadStoreOptions, currencyPrefix = "", }) {
     const t = useTranslations("filters");
     const selectedCategories = table.get("category")
         ? table.get("category").split("|").filter(Boolean)
@@ -21,5 +22,5 @@ export function PreOrderFilters({ table, categoryOptions = [], brandOptions = []
     const selectedStores = table.get("storeId")
         ? table.get("storeId").split("|").filter(Boolean)
         : [];
-    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 4, defaultCollapsed: brandOptions.length > 6 })), _jsx(FilterFacetSection, { title: t("productionStatus"), options: productionStatusOptions, selected: selectedProductionStatuses, onChange: (vals) => table.set("preOrderProductionStatus", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 100, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: false }), storeOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("store"), options: storeOptions, selected: selectedStores, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: storeOptions.length > 4, selectionMode: "single", defaultCollapsed: storeOptions.length > 6 })), _jsx(RangeFilter, { title: "Delivery Date Range", type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: false })] }));
+    return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: t("category"), loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, loadBrandOptions ? (_jsx(AsyncFacetSection, { title: t("brand"), loadOptions: loadBrandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), defaultCollapsed: false })) : brandOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 4, defaultCollapsed: brandOptions.length > 6 })) : null, _jsx(FilterFacetSection, { title: t("productionStatus"), options: productionStatusOptions, selected: selectedProductionStatuses, onChange: (vals) => table.set("preOrderProductionStatus", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 100, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: false }), loadStoreOptions ? (_jsx(AsyncFacetSection, { title: t("store"), loadOptions: loadStoreOptions, selected: selectedStores, onChange: (vals) => table.set("storeId", vals[0] ?? ""), defaultCollapsed: false })) : storeOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("store"), options: storeOptions, selected: selectedStores, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: storeOptions.length > 4, selectionMode: "single", defaultCollapsed: storeOptions.length > 6 })) : null, _jsx(RangeFilter, { title: "Delivery Date Range", type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: false })] }));
 }

package/dist/features/pre-orders/components/PreOrdersIndexListing.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { Columns, Heart, ShoppingCart, SlidersHorizontal, X } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Columns, Heart, ShoppingCart } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, useToast, BulkActionBar, ListingToolbar, LoginRequiredModal } from "../../../ui";
+import { BulkActionBar, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
+import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID, ACTION_META, COMPARE_MAX_ITEMS } from "../../products/constants/action-defs";
 import { CompareOverlay } from "../../products/components/CompareOverlay";
@@ -45,60 +46,24 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     const categoryOptions = categoriesToFacetOptions(categories);
     const { brandOptions } = useBrands();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "preorder").map((i) => i.itemId));
-    // Pending filter state — buffered until "Apply Filters" clicked
-    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 { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        onFilterReset();
         setFilterOpen(true);
-    }, [table]);
+    }, [onFilterReset]);
     const applyFilters = useCallback(() => {
-        const updates = { page: "1" };
-        for (const k of FILTER_KEYS)
-            updates[k] = pendingFilters[k] ?? "";
-        table.setMany(updates);
+        onFilterApply();
         setFilterOpen(false);
-    }, [pendingFilters, table]);
-    const clearFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
-    }, []);
+    }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" });
+        onFilterClear();
         setSearchInput("");
-    }, [table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const pendingFilterCount = FILTER_KEYS.filter((k) => !!pendingFilters[k]).length;
+    }, [table, onFilterClear]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SHOW_CLOSED) === "true" ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
-        activeFilterCount > 0;
+        filterActiveCount > 0;
     const params = {
         q: table.get(TABLE_KEYS.QUERY) || undefined,
         category: table.get(TABLE_KEYS.CATEGORY) || undefined,
@@ -162,7 +127,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     }, [localCart, showToast]);
     const selection = useBulkSelection({ items: preOrders, keyExtractor: (p) => p.id });
     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 pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: preOrders.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, 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(TABLE_KEYS.SHOW_CLOSED, 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]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: preOrders.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, 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(TABLE_KEYS.SHOW_CLOSED, 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]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
                         id: ACTION_ID.ADD_TO_CART,
                         label: ACTION_META[ACTION_ID.ADD_TO_CART].label,
@@ -206,8 +171,8 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                             setCompareIds(ids);
                         },
                     },
-                ] }), 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: 10 }).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-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
+                ] }), 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: 10 }).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-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
-                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== 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: [pendingFilterCount > 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" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(PreOrderFilters, { 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", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] })), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/pre-orders/components/PreorderCard.d.ts

@@ -1,15 +1,6 @@
-import type { PreorderItem } from "../types";
 interface PreorderBadgeProps {
     shipDate?: string;
     className?: string;
 }
 export declare function PreorderBadge({ shipDate, className }: PreorderBadgeProps): import("react/jsx-runtime").JSX.Element;
-interface PreorderCardProps {
-    item: PreorderItem;
-    href: string;
-    selectable?: boolean;
-    isSelected?: boolean;
-    onSelect?: (id: string, selected: boolean) => void;
-}
-export declare function PreorderCard({ item, href, selectable, isSelected, onSelect }: PreorderCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/pre-orders/components/PreorderCard.js

@@ -1,10 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { BaseListingCard, Div, Heading, Span, Text } from "../../../ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Span } from "../../../ui";
 import { getPreorderStatus } from "../types";
-import { formatCurrency } from "../../../utils/number.formatter";
-import { getDefaultLocale } from "../../../core/baseline-resolver";
-import { useLongPress } from "../../../react/hooks/useLongPress";
 const STATUS_LABELS = {
     available: "Pre-order now",
     shipping_soon: "Shipping soon",
@@ -19,10 +15,3 @@ export function PreorderBadge({ shipDate, className }) {
     const status = getPreorderStatus(shipDate);
     return (_jsx(Span, { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[status]} ${className ?? ""}`, children: STATUS_LABELS[status] }));
 }
-export function PreorderCard({ item, href, selectable = false, isSelected = false, onSelect }) {
-    const longPress = useLongPress(() => onSelect?.(item.id, !isSelected));
-    return (_jsxs(Div, { className: `group relative block overflow-hidden rounded-xl border bg-white dark:bg-slate-900 transition-shadow hover:shadow-md ${isSelected ? "border-primary outline outline-2 outline-primary" : "border-gray-200 dark:border-slate-700"}`, 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(item.id, !isSelected); }, label: isSelected ? "Deselect pre-order" : "Select pre-order", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "block", children: [item.images[0] ? (_jsx(Div, { role: "img", "aria-label": item.name, className: "aspect-square w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${item.images[0]})` } })) : (_jsx(Div, { className: "aspect-square w-full bg-gray-100" })), _jsxs(Div, { className: "p-4", children: [_jsx(PreorderBadge, { shipDate: item.preorderShipDate }), _jsx(Heading, { level: 3, className: "mt-2 font-semibold text-gray-900 dark:text-zinc-100 text-base", children: item.name }), _jsx(Text, { className: "mt-1 text-sm text-gray-500 dark:text-zinc-400", children: item.brand }), _jsxs(Div, { className: "mt-3 flex items-baseline gap-2", children: [_jsx(Span, { className: "text-lg font-bold text-gray-900 dark:text-zinc-100", children: formatCurrency(item.salePrice) }), item.regularPrice > item.salePrice && (_jsx(Span, { className: "text-sm text-gray-400 dark:text-zinc-500 line-through", children: formatCurrency(item.regularPrice) }))] }), item.preorderShipDate && (_jsxs(Text, { className: "mt-1 text-xs text-gray-400 dark:text-zinc-500", children: ["Ships:", " ", new Date(item.preorderShipDate).toLocaleDateString(getDefaultLocale(), {
-                                        month: "short",
-                                        year: "numeric",
-                                    })] }))] })] })] }));
-}

package/dist/features/pre-orders/components/index.d.ts

@@ -1,4 +1,4 @@
-export { PreorderBadge, PreorderCard } from "./PreorderCard";
+export { PreorderBadge } from "./PreorderCard";
 export { PreOrderFilters } from "./PreOrderFilters";
 export type { PreOrderFiltersProps } from "./PreOrderFilters";
 export { MarketplacePreorderCard, type MarketplacePreorderCardData, type MarketplacePreorderCardLabels, type MarketplacePreorderCardProps, } from "./MarketplacePreorderCard";

package/dist/features/pre-orders/components/index.js

@@ -1,4 +1,4 @@
-export { PreorderBadge, PreorderCard } from "./PreorderCard";
+export { PreorderBadge } from "./PreorderCard";
 export { PreOrderFilters } from "./PreOrderFilters";
 export { MarketplacePreorderCard, } from "./MarketplacePreorderCard";
 export { PreOrdersListView } from "./PreOrdersListView";