@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/payments/repository/payout.repository.js

@@ -67,10 +67,10 @@ export class PayoutRepository extends BaseRepository {
     /**
      * Find all payouts for a specific seller, newest first
      */
-    async findBySeller(sellerId) {
+    async findByStore(storeId) {
         const snapshot = await this.db
             .collection(this.collection)
-            .where(PAYOUT_FIELDS.SELLER_ID, "==", sellerId)
+            .where(PAYOUT_FIELDS.STORE_ID, "==", storeId)
             .orderBy(PAYOUT_FIELDS.CREATED_AT, "desc")
             .get();
         return snapshot.docs.map((doc) => this.decryptPayout({
@@ -81,10 +81,10 @@ export class PayoutRepository extends BaseRepository {
     /**
      * Find payouts for a seller by status, newest first
      */
-    async findBySellerAndStatus(sellerId, status) {
+    async findByStoreAndStatus(storeId, status) {
         const snapshot = await this.db
             .collection(this.collection)
-            .where(PAYOUT_FIELDS.SELLER_ID, "==", sellerId)
+            .where(PAYOUT_FIELDS.STORE_ID, "==", storeId)
             .where(PAYOUT_FIELDS.STATUS, "==", status)
             .orderBy(PAYOUT_FIELDS.CREATED_AT, "desc")
             .get();
@@ -159,10 +159,10 @@ export class PayoutRepository extends BaseRepository {
      * Get all order IDs that have already been paid out for a seller.
      * Used to avoid double-paying the same orders.
      */
-    async getPaidOutOrderIds(sellerId) {
+    async getPaidOutOrderIds(storeId) {
         const snapshot = await this.db
             .collection(this.collection)
-            .where(PAYOUT_FIELDS.SELLER_ID, "==", sellerId)
+            .where(PAYOUT_FIELDS.STORE_ID, "==", storeId)
             .where(PAYOUT_FIELDS.STATUS, "in", ["pending", "processing", "completed"])
             .get();
         const ids = new Set();
@@ -187,7 +187,7 @@ export class PayoutRepository extends BaseRepository {
 // ---------------------------------------------------------------------------
 PayoutRepository.SIEVE_FIELDS = {
     id: { canFilter: true, canSort: false },
-    sellerId: { canFilter: true, canSort: false },
+    storeId: { canFilter: true, canSort: false },
     sellerEmailIndex: { canFilter: true, canSort: false },
     sellerName: { canFilter: true, canSort: true },
     sellerEmail: { canFilter: false, canSort: false }, // encrypted — use sellerEmailIndex

package/dist/features/payments/schemas/firestore.d.ts

@@ -18,7 +18,7 @@ export declare const PayoutStatusValues: {
 export type PayoutPaymentMethod = "bank_transfer" | "upi";
 export interface PayoutDocument {
     id: string;
-    sellerId: string;
+    storeId: string;
     sellerName: string;
     sellerEmail: string;
     amount: number;
@@ -44,11 +44,11 @@ export interface PayoutDocument {
     updatedAt: Date;
 }
 export declare const PAYOUT_COLLECTION: "payouts";
-export declare const PAYOUT_INDEXED_FIELDS: readonly ["sellerId", "status", "requestedAt", "createdAt"];
+export declare const PAYOUT_INDEXED_FIELDS: readonly ["storeId", "status", "requestedAt", "createdAt"];
 export declare const DEFAULT_PLATFORM_FEE_RATE: 0.05;
 export declare const DEFAULT_PAYOUT_DATA: Partial<PayoutDocument>;
 export declare const PAYOUT_FIELDS: {
-    readonly SELLER_ID: "sellerId";
+    readonly STORE_ID: "storeId";
     readonly SELLER_NAME: "sellerName";
     readonly SELLER_EMAIL: "sellerEmail";
     readonly SELLER_EMAIL_INDEX: "sellerEmailIndex";
@@ -62,13 +62,13 @@ export declare const PAYOUT_FIELDS: {
         readonly FAILED: PayoutStatus;
     };
 };
-export declare const PAYOUT_PUBLIC_FIELDS: readonly ["id", "sellerId", "amount", "currency", "status", "paymentMethod", "requestedAt", "processedAt", "createdAt"];
+export declare const PAYOUT_PUBLIC_FIELDS: readonly ["id", "storeId", "amount", "currency", "status", "paymentMethod", "requestedAt", "processedAt", "createdAt"];
 export declare const PAYOUT_ADMIN_UPDATEABLE_FIELDS: readonly ["status", "adminNote", "processedAt"];
 export type PayoutCreateInput = Omit<PayoutDocument, "id" | "createdAt" | "updatedAt" | "status" | "requestedAt">;
 export type PayoutUpdateInput = Partial<Pick<PayoutDocument, (typeof PAYOUT_ADMIN_UPDATEABLE_FIELDS)[number]>>;
 export declare const payoutQueryHelpers: {
-    readonly bySeller: (sellerId: string) => readonly ["sellerId", "==", string];
+    readonly byStore: (storeId: string) => readonly ["storeId", "==", string];
     readonly byStatus: (status: PayoutStatus) => readonly ["status", "==", PayoutStatus];
-    readonly pendingForSeller: (sellerId: string) => readonly [readonly ["sellerId", "==", string], readonly ["status", "==", "pending"]];
+    readonly pendingForStore: (storeId: string) => readonly [readonly ["storeId", "==", string], readonly ["status", "==", "pending"]];
 };
 export declare function createPayoutId(input: GeneratePayoutIdInput): string;

package/dist/features/payments/schemas/firestore.js

@@ -10,7 +10,7 @@ export const PayoutStatusValues = {
 };
 export const PAYOUT_COLLECTION = "payouts";
 export const PAYOUT_INDEXED_FIELDS = [
-    "sellerId",
+    "storeId",
     "status",
     "requestedAt",
     "createdAt",
@@ -22,7 +22,7 @@ export const DEFAULT_PAYOUT_DATA = {
     orderIds: [],
 };
 export const PAYOUT_FIELDS = {
-    SELLER_ID: "sellerId",
+    STORE_ID: "storeId",
     SELLER_NAME: "sellerName",
     SELLER_EMAIL: "sellerEmail",
     SELLER_EMAIL_INDEX: "sellerEmailIndex",
@@ -38,7 +38,7 @@ export const PAYOUT_FIELDS = {
 };
 export const PAYOUT_PUBLIC_FIELDS = [
     "id",
-    "sellerId",
+    "storeId",
     "amount",
     "currency",
     "status",
@@ -53,10 +53,10 @@ export const PAYOUT_ADMIN_UPDATEABLE_FIELDS = [
     "processedAt",
 ];
 export const payoutQueryHelpers = {
-    bySeller: (sellerId) => ["sellerId", "==", sellerId],
+    byStore: (storeId) => ["storeId", "==", storeId],
     byStatus: (status) => ["status", "==", status],
-    pendingForSeller: (sellerId) => [
-        ["sellerId", "==", sellerId],
+    pendingForStore: (storeId) => [
+        ["storeId", "==", storeId],
         ["status", "==", "pending"],
     ],
 };

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

@@ -5,6 +5,7 @@ export interface MarketplacePreorderCardLabels {
     preOrderBadge?: string;
     featuredBadge?: string;
     reserveNow?: string;
+    addToCart?: string;
     addToWishlist?: string;
     removeFromWishlist?: string;
 }
@@ -19,7 +20,8 @@ export interface MarketplacePreorderCardProps {
     href?: string;
     hrefBuilder?: (product: MarketplacePreorderCardData) => string;
     onNavigate?: (href: string) => void;
+    onAddToCart?: (product: MarketplacePreorderCardData) => void;
     wishlistActions?: WishlistToggleActions;
     labels?: MarketplacePreorderCardLabels;
 }
-export declare function MarketplacePreorderCard({ product, className, variant, selectable, isSelected, onSelect, inWishlist: initialInWishlist, href, hrefBuilder, onNavigate, wishlistActions, labels, }: MarketplacePreorderCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarketplacePreorderCard({ product, className, variant, selectable, isSelected, onSelect, inWishlist: initialInWishlist, href, hrefBuilder, onNavigate, onAddToCart, wishlistActions, labels, }: MarketplacePreorderCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,8 @@
 "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 { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import { useLongPress } from "../../../react/hooks/useLongPress";
 import { MediaImage } from "../../media";
 import { useWishlistToggle } from "../../wishlist";
 import { ROUTES } from "../../../next";
@@ -15,6 +16,7 @@ const DEFAULT_LABELS = {
     preOrderBadge: "Pre-order",
     featuredBadge: "Featured",
     reserveNow: "Reserve now",
+    addToCart: "Add to Cart",
     addToWishlist: "Add to wishlist",
     removeFromWishlist: "Remove from wishlist",
 };
@@ -23,12 +25,13 @@ function resolveHref(product, href, hrefBuilder) {
         return href;
     if (hrefBuilder)
         return hrefBuilder(product);
-    return ROUTES.PUBLIC.PRE_ORDER_DETAIL(product.id);
+    return ROUTES.PUBLIC.PRE_ORDER_DETAIL(product.slug ?? product.id);
 }
-export function MarketplacePreorderCard({ product, className = "", variant = "grid", selectable = false, isSelected = false, onSelect, inWishlist: initialInWishlist = false, href, hrefBuilder, onNavigate, wishlistActions, labels, }) {
+export function MarketplacePreorderCard({ product, className = "", variant = "grid", selectable = false, isSelected = false, onSelect, inWishlist: initialInWishlist = false, href, hrefBuilder, onNavigate, onAddToCart, wishlistActions, labels, }) {
     const router = useRouter();
     const mergedLabels = { ...DEFAULT_LABELS, ...labels };
     const detailHref = resolveHref(product, href, hrefBuilder);
+    const longPress = useLongPress(() => onSelect?.(product.id, !isSelected));
     const deliveryDate = product.preOrderDeliveryDate;
     const shipDate = deliveryDate instanceof Date ? deliveryDate.toISOString() : deliveryDate;
     const { inWishlist, toggle } = useWishlistToggle(product.id, initialInWishlist, wishlistActions);
@@ -48,10 +51,12 @@ export function MarketplacePreorderCard({ product, className = "", variant = "gr
             // The hook rolls back optimistic state when the mutation fails.
         }
     }, [toggle]);
-    return (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: detailHref, className: "absolute inset-0 block", children: _jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", fallback: "Product image" }) }), _jsxs(Div, { className: "absolute right-2 top-2 flex flex-col items-end gap-1", children: [_jsx(Span, { className: "inline-flex items-center rounded-full bg-cobalt px-2 py-0.5 text-xs font-medium text-white", children: mergedLabels.preOrderBadge }), product.featured && (_jsx(Span, { className: "inline-flex items-center rounded-full bg-amber-500 px-2 py-0.5 text-xs font-medium text-white", children: mergedLabels.featuredBadge }))] }), selectable && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
+    return (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: detailHref, className: "absolute inset-0 block", children: _jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", fallback: "Product image" }) }), _jsxs(Div, { className: "absolute right-2 top-2 flex flex-col items-end gap-1", children: [_jsx(Span, { className: "inline-flex items-center rounded-full bg-cobalt px-2 py-0.5 text-xs font-medium text-white", children: mergedLabels.preOrderBadge }), product.featured && (_jsx(Span, { className: "inline-flex items-center rounded-full bg-amber-500 px-2 py-0.5 text-xs font-medium text-white", children: mergedLabels.featuredBadge }))] }), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
                             event.stopPropagation();
-                            onSelect?.(product.id, !isSelected);
-                        } }))] }), _jsxs(BaseListingCard.Info, { variant: variant, children: [_jsx(TextLink, { href: detailHref, children: _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900`, children: product.title }) }), product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500` })) : null, _jsxs(Row, { justify: "between", className: "mt-1 gap-2", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsxs(Row, { justify: "between", className: "mt-2 gap-2", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", className: "flex-1 text-xs", onClick: handleNavigate, children: mergedLabels.reserveNow }), wishlistActions ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `text-base ${inWishlist ? "text-primary" : "text-zinc-500"}`, onClick: handleWishlist, "aria-label": inWishlist
-                                    ? mergedLabels.removeFromWishlist
-                                    : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" })) : null] })] })] }));
+                            onSelect(product.id, !isSelected);
+                        }, className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" }))] }), _jsx(BaseListingCard.Info, { variant: variant, children: variant === "list" ? (
+                /* ── Compact list layout ── */
+                _jsxs(_Fragment, { children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 min-w-0", children: [_jsx(TextLink, { href: detailHref, className: "min-w-0 flex-1", children: _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900 dark:text-zinc-100`, children: product.title }) }), wishlistActions && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `shrink-0 p-1 text-base leading-none ${inWishlist ? "text-primary" : "text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Text, { className: "text-sm font-bold text-primary", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsx(Button, { type: "button", variant: "primary", size: "sm", className: "self-start text-xs mt-0.5", onClick: handleNavigate, children: mergedLabels.reserveNow })] })) : (
+                /* ── Full grid layout ── */
+                _jsxs(_Fragment, { children: [_jsx(TextLink, { href: detailHref, children: _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900 dark:text-zinc-100`, children: product.title }) }), product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500` })) : null, _jsxs(Row, { justify: "between", className: "mt-1 gap-2", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsxs(Row, { justify: "between", className: "mt-2 gap-2", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", className: "flex-1 text-xs", onClick: handleNavigate, children: mergedLabels.reserveNow }), onAddToCart ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "flex-1 text-xs", onClick: (e) => { e.stopPropagation(); onAddToCart(product); }, children: mergedLabels.addToCart })) : null, wishlistActions ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `text-base ${inWishlist ? "text-primary" : "text-zinc-500"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" })) : null] })] })) })] }));
 }

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

@@ -0,0 +1,11 @@
+export interface PreOrderActionsClientProps {
+    productId: string;
+    price: number | null;
+    currency: string;
+    depositAmount: number | null;
+    depositPercent: number | null;
+    isCancellable: boolean;
+    tags?: string[];
+    onReserveNow: (productId: string) => Promise<void>;
+}
+export declare function PreOrderActionsClient({ productId, price, currency, depositAmount, depositPercent, isCancellable, tags, onReserveNow, }: PreOrderActionsClientProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from "react";
+import { Button, Div, Stack, Text } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+export function PreOrderActionsClient({ productId, price, currency, depositAmount, depositPercent, isCancellable, tags = [], onReserveNow, }) {
+    const [isPending, startTransition] = useTransition();
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    function handleReserve() {
+        setError(null);
+        setSuccess(false);
+        startTransition(async () => {
+            try {
+                await onReserveNow(productId);
+                setSuccess(true);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : "Failed to reserve. Please try again.");
+            }
+        });
+    }
+    return (_jsxs(Div, { className: "space-y-4", 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)` : ""] }))] })), error && (_jsx(Text, { className: "text-xs text-red-600 dark:text-red-400", children: error })), success && (_jsx(Text, { className: "text-xs text-emerald-600 dark:text-emerald-400", children: "\u2713 Reserved! Redirecting to checkout\u2026" })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isPending, onClick: handleReserve, children: isPending ? "Processing…" : "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("div", { className: "flex flex-wrap gap-1.5", 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("div", { className: "flex flex-wrap gap-4 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))) }) })] }));
+}

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

@@ -1,4 +1,5 @@
 export interface PreOrderDetailPageViewProps {
     id: string;
+    onReserveNow?: (productId: string) => Promise<void>;
 }
-export declare function PreOrderDetailPageView({ id }: PreOrderDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function PreOrderDetailPageView({ id, onReserveNow }: PreOrderDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,27 +1,113 @@
-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 Link from "next/link";
 import { productRepository } from "../../../repositories";
 import { ROUTES } from "../../../next";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
-import { Button, Container, Div, Heading, Main, Row, Section, Span, Stack, Text, } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+import { Button, Container, Div, Heading, Main, RichText, Row, Section, Span, Stack, Text, } from "../../../ui";
 import { PreOrderDetailView } from "../../products/components/PreOrderDetailView";
-export async function PreOrderDetailPageView({ id }) {
+import { BuyBar } from "../../products/components/BuyBar";
+import { ProductTabsShell } from "../../products/components/ProductTabsShell";
+import { PreOrderActionsClient } from "./PreOrderActionsClient";
+import { ProductGalleryClient } from "../../products/components/ProductGalleryClient";
+import { ProductFeatureBadges } from "../../products/components/ProductFeatureBadges";
+import { ShareButton } from "../../products/components/ShareButton";
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+const PRODUCTION_STATUS_LABELS = {
+    upcoming: "Coming Soon",
+    in_production: "In Production",
+    ready_to_ship: "Ready to Ship",
+};
+export async function PreOrderDetailPageView({ id, onReserveNow }) {
     const product = await productRepository.findByIdOrSlug(id).catch(() => undefined);
     if (!product) {
         return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "center", gap: "md", className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Pre-Order Not Found" }), _jsx(Text, { className: "text-zinc-500", children: "The pre-order item you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRE_ORDERS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Pre-Orders" })] }) }) }) }));
     }
     const p = product;
     const currency = p.currency || getDefaultCurrency();
-    const price = typeof p.price === "number"
-        ? new Intl.NumberFormat(undefined, { style: "currency", currency }).format(p.price)
+    const title = String(p.title ?? p.name ?? "Pre-Order Item");
+    const price = typeof p.price === "number" ? p.price : null;
+    const images = Array.isArray(p.images)
+        ? p.images
+        : typeof p.mainImage === "string"
+            ? [p.mainImage]
+            : [];
+    const reservedCount = typeof p.preOrderCurrentCount === "number"
+        ? p.preOrderCurrentCount
+        : typeof p.reservedCount === "number"
+            ? p.reservedCount
+            : 0;
+    const reserveTarget = typeof p.preOrderMaxQuantity === "number"
+        ? p.preOrderMaxQuantity
+        : typeof p.preOrderTarget === "number"
+            ? p.preOrderTarget
+            : typeof p.reserveTarget === "number"
+                ? p.reserveTarget
+                : 0;
+    const progressPct = reserveTarget > 0
+        ? Math.min(100, Math.round((reservedCount / reserveTarget) * 100))
+        : 0;
+    const depositPercent = typeof p.preOrderDepositPercent === "number" ? p.preOrderDepositPercent : null;
+    const depositAmount = typeof p.preOrderDepositAmount === "number"
+        ? p.preOrderDepositAmount
+        : price !== null && depositPercent !== null
+            ? Math.round((price * depositPercent) / 100)
+            : null;
+    const deliveryDate = p.preOrderDeliveryDate
+        ? new Date(p.preOrderDeliveryDate)
+        : null;
+    const productionStatus = typeof p.preOrderProductionStatus === "string"
+        ? p.preOrderProductionStatus
         : null;
-    const images = Array.isArray(p.images) ? p.images : p.imageUrl ? [p.imageUrl] : [];
-    const primaryImage = images[0];
-    const reservedCount = typeof p.reservedCount === "number" ? p.reservedCount
-        : typeof p.preOrderCurrentCount === "number" ? p.preOrderCurrentCount : 0;
-    const reserveTarget = typeof p.reserveTarget === "number" ? p.reserveTarget
-        : typeof p.preOrderTarget === "number" ? p.preOrderTarget
-            : typeof p.preOrderMaxQuantity === "number" ? p.preOrderMaxQuantity : 0;
-    const progressPct = reserveTarget > 0 ? Math.min(100, Math.round((reservedCount / reserveTarget) * 100)) : 0;
-    return (_jsx(PreOrderDetailView, { renderGallery: () => primaryImage ? (_jsx(Div, { className: "overflow-hidden rounded-xl border border-zinc-100 dark:border-zinc-800", children: _jsx(Div, { role: "img", "aria-label": p.name ?? "Pre-order image", className: "aspect-square w-full bg-cover bg-center", style: { backgroundImage: `url(${primaryImage})` } }) })) : (_jsx(Div, { className: "overflow-hidden rounded-xl border border-zinc-100 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: _jsx(Div, { className: "flex aspect-square items-center justify-center text-zinc-300 dark:text-zinc-700", children: _jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }) }) })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: p.name ?? "Pre-Order Item" }), price && (_jsx(Text, { className: "text-2xl font-semibold text-primary-600 dark:text-primary-400", children: price })), p.description && (_jsx(Text, { className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400", children: typeof p.description === "string" ? p.description : "" }))] })), renderBuyBar: () => (_jsx(Div, { className: "rounded-xl border border-zinc-100 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900", children: _jsxs(Stack, { gap: "sm", children: [reserveTarget > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Span, { className: "text-xs text-zinc-500", children: [reservedCount, " of ", reserveTarget, " reserved"] }), _jsxs(Span, { className: "text-xs font-medium text-primary-600", 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", style: { width: `${progressPct}%` } }) })] })), price && (_jsx(Text, { className: "text-xl font-bold text-zinc-900 dark:text-zinc-50", children: price })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Reserve Now" })] }) })) }));
+    const isCancellable = p.preOrderCancellable === true;
+    const condition = typeof p.condition === "string" ? p.condition : null;
+    const featured = p.featured === true;
+    const shippingPaidBy = p.shippingPaidBy;
+    const freeShipping = shippingPaidBy === "seller";
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const sellerName = typeof p.sellerName === "string" ? p.sellerName : null;
+    const safeSeller = (storeName || sellerName) ? safeDisplayName((storeName || sellerName) ?? "", "") : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const preOrderSellerId = typeof p.sellerId === "string" ? p.sellerId : null;
+    const storeHref = storeSlug
+        ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug))
+        : preOrderSellerId
+            ? String(ROUTES.PUBLIC.SELLER_DETAIL(preOrderSellerId))
+            : null;
+    const category = typeof p.category === "string" ? p.category : null;
+    const categoryName = 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 : [];
+    const tags = Array.isArray(p.tags) ? p.tags : [];
+    const specs = Array.isArray(p.specifications)
+        ? p.specifications
+        : [];
+    const descriptionHtml = toDescriptionHtml(p.description);
+    return (_jsx(Main, { children: _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: "sm", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", className: "mb-1.5 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 }))] }), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title })] }), price !== null && (_jsx(Span, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) })), 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, { align: "center", gap: "xs", className: "text-xs text-zinc-400 dark:text-zinc-500 flex-wrap", children: [category ? (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: categoryName || category })) : (categoryName ? _jsx(Span, { children: categoryName }) : null), brand && (categoryName || category) && (_jsx(Span, { className: "text-zinc-300 dark:text-zinc-600", children: "\u00B7" })), brand && (brandSlug ? (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: brand })) : (_jsx(Span, { children: brand })))] })), 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" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined })), 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" }) })] })] }) }));
 }

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
+import { Div } from "../../../ui";
+export function PreOrderFilters({ table, categoryOptions = [], brandOptions = [], storeOptions = [], currencyPrefix = "", }) {
+    const t = useTranslations("filters");
+    const selectedCategories = table.get("category")
+        ? table.get("category").split("|").filter(Boolean)
+        : [];
+    const selectedBrands = table.get("brand") ? [table.get("brand")] : [];
+    const productionStatusOptions = [
+        { value: "upcoming", label: "Upcoming" },
+        { value: "in_production", label: "In Production" },
+        { value: "ready_to_ship", label: "Ready to Ship" },
+    ];
+    const selectedProductionStatuses = table.get("preOrderProductionStatus")
+        ? table.get("preOrderProductionStatus").split("|").filter(Boolean)
+        : [];
+    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 })] }));
+}

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

@@ -1,4 +1,7 @@
 export interface PreOrdersIndexListingProps {
     initialData?: any;
+    categorySlug?: string;
+    /** Filter pre-orders by brand name (for brand detail pages) */
+    brandName?: string;
 }
-export declare function PreOrdersIndexListing({ initialData }: PreOrdersIndexListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function PreOrdersIndexListing({ initialData, categorySlug, brandName }: PreOrdersIndexListingProps): import("react/jsx-runtime").JSX.Element;