@mohasinac/appkit 4.53.0 → 4.53.2

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

@@ -15,6 +15,7 @@
  * `GET /api/products?ids=<csv>` (BK3 listByIds endpoint).
  */
 import type { ListingType } from "../types";
+import type { ProductImage } from "../schemas/firestore";
 /** Subset of ProductDocument the overlay needs. Kept loose so it can be fed
  * sanitized public payloads directly. */
 export interface CompareProductLike {
@@ -24,7 +25,7 @@ export interface CompareProductLike {
     price?: number;
     currency?: string;
     mainImage?: string;
-    images?: string[];
+    images?: readonly (string | ProductImage)[];
     condition?: string;
     brand?: string;
     category?: string;
@@ -60,6 +61,8 @@ export interface CompareOverlayLabels {
     close?: string;
     remove?: string;
     view?: string;
+    /** Placeholder/aria-label for the "add another" typeahead. Only rendered when `onAdd` is passed. */
+    addAnother?: string;
     field?: Partial<CompareFieldLabels>;
 }
 export interface CompareOverlayProps {
@@ -73,7 +76,22 @@ export interface CompareOverlayProps {
     onClose: () => void;
     /** Called when a column's Remove button is clicked. */
     onRemove?: (id: string) => void;
+    /**
+     * Called with a resolved slug when the user picks a result from the
+     * "Add another" typeahead. Omit to leave the overlay exactly as it was —
+     * every existing caller keeps working unchanged.
+     *
+     * 🛑 Resolution only, no fetch. The overlay already knows how to turn an
+     * id into a full `CompareProductLike` via `productIds` (`useFetchedProducts`
+     * fetches `/api/products?ids=…`); this hands back ONE more id for that same
+     * mechanism, rather than teaching the overlay a second way to load a
+     * product. The caller decides whether to append to its own `productIds`
+     * state or ignore it.
+     */
+    onAdd?: (id: string) => void;
+    /** `siteSettings.search?.indexEnabled`. Threaded through to the typeahead. */
+    searchIndexEnabled?: boolean;
     labels?: CompareOverlayLabels;
 }
-export declare function CompareOverlay({ isOpen, items: passedItems, productIds, productType, onClose, onRemove, labels: labelOverrides, }: CompareOverlayProps): import("react").JSX.Element | null;
+export declare function CompareOverlay({ isOpen, items: passedItems, productIds, productType, onClose, onRemove, onAdd, searchIndexEnabled, labels: labelOverrides, }: CompareOverlayProps): import("react").JSX.Element | null;
 export {};

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

@@ -20,12 +20,15 @@ import { COMPARE_MAX_ITEMS } from "../constants/action-defs.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { EntityTypeahead } from "../../search/components/EntityTypeahead.js";
+import { productImageUrls } from "../schemas/firestore.js";
 const DEFAULT_LABELS = {
     title: "Compare items",
     empty: "Select up to 4 items from the listing to compare.",
     close: "Close",
     remove: "Remove",
     view: "View",
+    addAnother: "Add another to compare",
     field: {
         image: "Photo",
         price: "Price",
@@ -35,6 +38,12 @@ const DEFAULT_LABELS = {
         store: "Store",
     },
 };
+/** Index type keys for each `productType` discriminator the overlay accepts. */
+const TYPEAHEAD_TYPES = {
+    product: ["standard"],
+    auction: ["auction"],
+    preorder: ["pre-order"],
+};
 const OVERLAY_CLASS = "fixed inset-0 flex flex-col bg-[var(--appkit-color-bg)] overflow-hidden z-[var(--appkit-z-modal,60)]";
 const HEADER_CLASS = "flex items-center justify-between gap-[var(--appkit-space-3)] border-b border-[var(--appkit-color-border-subtle)] px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]";
 const FIELD_LABEL_CLASS = "text-[length:var(--appkit-text-xs)] font-medium uppercase tracking-wider text-[var(--appkit-color-text-muted)]";
@@ -66,7 +75,7 @@ function customFieldValue(field) {
 }
 function CompareColumn({ item, productType, labels, onRemove, onClose, customFieldKeys }) {
     const href = detailHref(item, productType);
-    const img = item.mainImage ?? item.images?.[0];
+    const img = item.mainImage || productImageUrls(item.images)[0];
     return (_jsxs(Stack, { gap: "md", className: COLUMN_CARD_CLASS, children: [_jsxs(Row, { justify: "between", align: "start", gap: "sm", children: [_jsx(Link, { href: href, target: "_blank", rel: REL_NOOPENER, className: "text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] hover:underline line-clamp-2", children: item.title ?? item.id }), onRemove && (_jsx(IconButton, { type: "button", onClick: () => onRemove(item.id), "aria-label": `${labels.remove} ${item.title ?? item.id}`, variant: "ghost", rounded: "full", className: CLS_REMOVE_BTN, children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsx(FieldRow, { label: labels.field.image, children: _jsx(Link, { href: href, target: "_blank", rel: REL_NOOPENER, children: _jsx(Div, { className: `relative aspect-square ${__O.hidden}`, rounded: "lg", surface: "subtle", children: img ? (_jsx(MediaImage, { src: img, alt: item.title ?? item.id, size: "card" })) : null }) }) }), _jsx(FieldRow, { label: labels.field.price, children: _jsx(Text, { size: "base", weight: "semibold", color: "primary", children: _jsx(GatedPrice, { children: priceLabel(item) }) }) }), _jsx(FieldRow, { label: labels.field.condition, children: _jsx(Text, { children: item.condition ? _jsx(Span, { className: CHIP_CLASS, children: item.condition }) : "—" }) }), _jsx(FieldRow, { label: labels.field.brand, children: _jsx(Text, { children: item.brand ? _jsx(Span, { className: CHIP_CLASS, children: item.brand }) : "—" }) }), _jsx(FieldRow, { label: labels.field.category, children: _jsx(Text, { children: (Array.isArray(item.categoryNames) ? item.categoryNames[0] : item.categoryName) || (Array.isArray(item.categorySlugs) ? item.categorySlugs[0] : item.category) ? (_jsx(Span, { className: CHIP_CLASS, children: (Array.isArray(item.categoryNames) ? item.categoryNames[0] : item.categoryName) ?? (Array.isArray(item.categorySlugs) ? item.categorySlugs[0] : item.category) })) : ("—") }) }), _jsx(FieldRow, { label: labels.field.store, children: _jsx(Text, { size: "sm", color: "muted", children: item.storeName ?? "—" }) }), customFieldKeys.map((key) => (_jsx(FieldRow, { label: key, children: _jsx(Text, { size: "sm", children: customFieldValue(item.customFields?.find((f) => f.key === key)) }) }, key))), _jsx(Button, { asChild: true, variant: "primary", size: "sm", className: "mt-auto", children: _jsx(Link, { href: href, target: "_blank", rel: REL_NOOPENER, onClick: onClose, children: labels.view }) })] }));
 }
 function useFetchedProducts(productIds, passedItems, isOpen) {
@@ -108,7 +117,7 @@ function useFetchedProducts(productIds, passedItems, isOpen) {
         isLoading: !passedItems && isLoading,
     };
 }
-export function CompareOverlay({ isOpen, items: passedItems, productIds, productType = "product", onClose, onRemove, labels: labelOverrides, }) {
+export function CompareOverlay({ isOpen, items: passedItems, productIds, productType = "product", onClose, onRemove, onAdd, searchIndexEnabled, labels: labelOverrides, }) {
     const labels = useMemo(() => ({
         ...DEFAULT_LABELS,
         ...labelOverrides,
@@ -167,7 +176,18 @@ export function CompareOverlay({ isOpen, items: passedItems, productIds, product
     }, [onRemove]);
     if (!isOpen)
         return null;
-    return (_jsxs(Div, { className: OVERLAY_CLASS, role: "dialog", "aria-modal": "true", "aria-label": labels.title, children: [_jsxs(Row, { justify: "between", align: "center", className: HEADER_CLASS, children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", children: labels.title }), _jsx(IconButton, { type: "button", onClick: onClose, "aria-label": labels.close, variant: "ghost", rounded: "full", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx(Div, { className: `flex-1 ${__O.auto} ${__P.p4}`, children: isLoading ? (
+    return (_jsxs(Div, { className: OVERLAY_CLASS, role: "dialog", "aria-modal": "true", "aria-label": labels.title, children: [_jsxs(Row, { justify: "between", align: "center", className: HEADER_CLASS, children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", children: labels.title }), _jsx(IconButton, { type: "button", onClick: onClose, "aria-label": labels.close, variant: "ghost", rounded: "full", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]", children: _jsx(X, { className: "h-5 w-5" }) })] }), onAdd && trimmed.length < COMPARE_MAX_ITEMS && (_jsx(Div, { className: `${__P.p4} border-b border-[var(--appkit-color-border-subtle)]`, children: _jsx(EntityTypeahead, { types: TYPEAHEAD_TYPES[productType], indexEnabled: searchIndexEnabled, label: labels.addAnother, placeholder: labels.addAnother, limit: 5, onPick: (pick) => {
+                        /*
+                         * The LAST path segment, not a type-specific pattern. The
+                         * three listing types this overlay accepts have three
+                         * different detail routes (/products, /auctions,
+                         * /pre-orders), and every one of them ends in the slug — the
+                         * same thing `productIds` already expects.
+                         */
+                        const slug = pick.href.split("/").filter(Boolean).pop();
+                        if (slug)
+                            onAdd(slug);
+                    } }) })), _jsx(Div, { className: `flex-1 ${__O.auto} ${__P.p4}`, children: isLoading ? (
                 // audit-content-alignment-ok: loading-state text inside a transient overlay panel, not marketing content
                 _jsx(Text, { paddingY: "3xl", variant: "secondary", align: "center", children: "Loading\u00E2\u20AC\u00A6" })) : trimmed.length === 0 ? (
                 // audit-content-alignment-ok: empty-state inside a transient overlay panel, not marketing content

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

@@ -1,5 +1,36 @@
 import React from "react";
 import type { CustomSection } from "../schemas/firestore";
+/**
+ * Shape `ProductTabsShell` expects for `customTabs`. Duplicated here rather
+ * than imported from `ProductTabsShell.tsx` — that file is `"use client"` and
+ * this one is a plain function, so importing its type keeps this module
+ * server-renderable. The two must stay structurally compatible; they already
+ * do (`{ id, label, content }`).
+ */
+interface CustomSectionTab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+/**
+ * `customSections` → `ProductTabsShell`'s `customTabs` prop, in one place.
+ *
+ * Six detail views (`ProductDetailPageView`, `AuctionDetailPageView`,
+ * `PreOrderDetailPageView`, `ClassifiedDetailPageView`,
+ * `DigitalCodeDetailPageView`, `LiveItemDetailPageView`) had this EXACT
+ * five-line block — the same `Array.isArray` guard and the same `.map` —
+ * copy-pasted six times. Rule-of-Three material by the Duplication Decision
+ * Framework (same prop surface, same shape, a bug fix would have needed six
+ * commits), consolidated here rather than left as six places that could
+ * silently drift the next time one of them is touched and the other five are
+ * not.
+ *
+ * Takes the raw, possibly-untyped `customSections` field directly (every call
+ * site reads it off a cast Firestore document) so callers do one line instead
+ * of two: `customTabs={toCustomSectionTabs(p.customSections)}`.
+ */
+export declare function toCustomSectionTabs(input: unknown): CustomSectionTab[];
 export declare function CustomSectionTabContent({ section }: {
     section: CustomSection;
 }): React.JSX.Element;
+export {};

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

@@ -1,14 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
-import { Anchor, Dd, Dl, Dt, RichText, Stack, Text } from "../../../ui/index.js";
+import { RichText, SpecTable, Stack, Text } from "../../../ui/index.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 function renderFieldValue(f) {
     if (f.type === "boolean")
         return f.value === "true" ? "Yes" : "No";
     return f.value + (f.unit ? ` ${f.unit}` : "");
 }
+/**
+ * `customSections` → `ProductTabsShell`'s `customTabs` prop, in one place.
+ *
+ * Six detail views (`ProductDetailPageView`, `AuctionDetailPageView`,
+ * `PreOrderDetailPageView`, `ClassifiedDetailPageView`,
+ * `DigitalCodeDetailPageView`, `LiveItemDetailPageView`) had this EXACT
+ * five-line block — the same `Array.isArray` guard and the same `.map` —
+ * copy-pasted six times. Rule-of-Three material by the Duplication Decision
+ * Framework (same prop surface, same shape, a bug fix would have needed six
+ * commits), consolidated here rather than left as six places that could
+ * silently drift the next time one of them is touched and the other five are
+ * not.
+ *
+ * Takes the raw, possibly-untyped `customSections` field directly (every call
+ * site reads it off a cast Firestore document) so callers do one line instead
+ * of two: `customTabs={toCustomSectionTabs(p.customSections)}`.
+ */
+export function toCustomSectionTabs(input) {
+    const sections = Array.isArray(input)
+        ? input
+        : [];
+    return sections.map((s) => ({
+        id: s.id,
+        label: s.title,
+        content: _jsx(CustomSectionTabContent, { section: s }),
+    }));
+}
 export function CustomSectionTabContent({ section }) {
     const html = section.text ? normalizeRichTextHtml(section.text) : null;
     const fields = section.fields?.filter((f) => f.key && f.value) ?? [];
-    return (_jsxs(Stack, { gap: "md", children: [html && (_jsx(RichText, { html: html, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })), fields.length > 0 && (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: fields.map((f, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { weight: "medium", className: "w-36 flex-shrink-0 capitalize", color: "primary", children: f.key }), _jsx(Dd, { className: "flex-1", color: "muted", children: f.type === "url" ? (_jsx(Anchor, { href: f.value, tone: "none", underline: "hover", className: "text-primary-600 dark:text-primary-400 break-all", children: f.value })) : (renderFieldValue(f)) })] }, i))) })), !html && fields.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No content in this section." }))] }));
+    return (_jsxs(Stack, { gap: "md", children: [html && (_jsx(RichText, { html: html, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })), fields.length > 0 && (_jsx(SpecTable, { rows: fields.map((f) => ({ name: f.key, value: String(f.value), unit: f.unit })) })), !html && fields.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No content in this section." }))] }));
 }

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

@@ -16,6 +16,7 @@
  * consumer pages untouched.
  */
 import React from "react";
+import { type GroupRules } from "../../../_internal/shared/features/products/group-rules";
 import type { ListingType } from "../types";
 export interface GroupPickerMember {
     id: string;
@@ -29,6 +30,14 @@ export interface GroupPickerMember {
     isGroupParent?: boolean;
     condition?: string;
     availableQuantity?: number;
+    /**
+     * Printed or built when ordered — no stock ceiling.
+     *
+     * 🛑 Both the "Out of stock" refusal and the stepper's `max` read
+     * `availableQuantity`, so without this a print-on-demand member at quantity 0
+     * renders as unselectable while being perfectly buyable.
+     */
+    madeToOrder?: boolean;
     storeId?: string;
     storeName?: string;
     isSold?: boolean;
@@ -38,9 +47,18 @@ export interface GroupMemberPickerProps {
     groupId: string;
     groupSource: "product-group" | "grouped-listing";
     members: GroupPickerMember[];
+    /**
+     * The group's own selection rules, from whichever home owns them.
+     *
+     * 🛑 Absent means UNRESTRICTED, which is what every group that exists today
+     * is. The server enforces the same rules through `checkGroupRules` whatever
+     * is passed here, so omitting them costs correctness nothing — the buyer just
+     * finds out on submit instead of while choosing.
+     */
+    rules?: GroupRules;
     /** Called after a successful add so the host can close its overlay. */
     onAdded?: () => void;
     /** Called when the API reports the caller isn't signed in. */
     onAuthRequired?: () => void;
 }
-export declare function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAuthRequired, }: GroupMemberPickerProps): React.JSX.Element;
+export declare function GroupMemberPicker({ groupId, groupSource, members, rules, onAdded, onAuthRequired, }: GroupMemberPickerProps): React.JSX.Element;

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

@@ -27,10 +27,10 @@ import { CART_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { normalizeListingType } from "../utils/listing-type.js";
+import { resolveGroupMemberImage } from "../utils/group-member-image.js";
+import { checkGroupRules, describeGroupRules, EMPTY_GROUP_RULES, } from "../../../_internal/shared/features/products/group-rules.js";
 const __O = { xAuto: "overflow-x-auto", hidden: "overflow-hidden" };
-function memberImage(m) {
-    return m.image ?? m.images?.[0] ?? "";
-}
+const memberImage = resolveGroupMemberImage;
 function memberHref(m) {
     return pluginFor(normalizeListingType(m)).detailRoute(m.slug ?? m.id);
 }
@@ -40,7 +40,10 @@ function blockedReason(m) {
         return "Sold";
     if (m.status && m.status !== "published")
         return "Unavailable";
-    if ((m.availableQuantity ?? 0) <= 0)
+    // Made to order has no stock to be out of — checked BEFORE the quantity
+    // test, and after `isSold`, which stays the seller's kill switch whatever
+    // the production model.
+    if (m.madeToOrder !== true && (m.availableQuantity ?? 0) <= 0)
         return "Out of stock";
     // `cartLine: "blocked"` is how a classified / live listing says "contact the
     // seller instead" — those can never join a cart line.
@@ -48,7 +51,7 @@ function blockedReason(m) {
         return "Not purchasable here";
     return null;
 }
-export function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAuthRequired, }) {
+export function GroupMemberPicker({ groupId, groupSource, members, rules = EMPTY_GROUP_RULES, onAdded, onAuthRequired, }) {
     const [qty, setQty] = useState({});
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState(null);
@@ -64,6 +67,32 @@ export function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAu
     const selectedTotal = selected.reduce((sum, s) => sum + s.member.price * s.quantity, 0);
     const selectedUnits = selected.reduce((sum, s) => sum + s.quantity, 0);
     const currency = members[0]?.currency ?? "INR";
+    /*
+     * The SAME predicate the server applies, so the button's enabled state and
+     * the API's answer cannot disagree about what a valid selection is. A
+     * server-only rule reads as a broken button; a client-only one is not a rule.
+     */
+    const violations = useMemo(() => checkGroupRules(rules, selected.map((s) => ({
+        productId: s.member.id,
+        quantity: s.quantity,
+        title: s.member.title,
+    }))), [rules, selected]);
+    /*
+     * The discount, shown but NOT the number charged.
+     *
+     * 🛑 This is display arithmetic over a quoted percentage; the authoritative
+     * price is computed server-side inside `deriveLinePrice`, the single writer
+     * of a grouped line's `price`. Showing it here is honest (it is the figure
+     * the buyer is being offered) and computing it here is unavoidable (there is
+     * no cart line yet) — but it must never become a second money rule. The 2dp
+     * rounding deliberately matches `deriveLinePrice`'s so the two agree to the
+     * paisa rather than drifting by a rounding step.
+     */
+    const discountPercent = Math.min(100, Math.max(0, rules.groupDiscountPercent ?? 0));
+    const discountedTotal = discountPercent > 0
+        ? Math.round(selectedTotal * (1 - discountPercent / 100) * 100) / 100
+        : selectedTotal;
+    const ruleNotes = useMemo(() => describeGroupRules(rules), [rules]);
     const handleAdd = async () => {
         setError(null);
         setIsSaving(true);
@@ -101,8 +130,17 @@ export function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAu
     };
     return (_jsxs(Stack, { gap: "sm", children: [isCrossStore && (_jsx(Alert, { variant: "info", children: "These items are sold by different sellers, so they can't be combined into one cart line. Open an item to buy it on its own." })), _jsx(Div, { className: __O.xAuto, children: _jsxs(Table, { className: "text-left min-w-[440px]", children: [_jsx(Thead, { children: _jsxs(Tr, { border: "default", children: [_jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Image" }), _jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Name" }), _jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Price" }), !isCrossStore && (_jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Qty" })), _jsx(Th, { paddingY: "sm", paddingSide: "pb-sm", color: "muted", size: "xs", weight: "semibold" })] }) }), _jsx(Tbody, { children: members.map((m) => {
                                 const blocked = blockedReason(m);
-                                return (_jsxs(Tr, { className: "last:border-0", border: "subtle", children: [_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Div, { className: `w-10 h-10 ${__O.hidden}`, rounded: "full", border: "default", children: _jsx(MediaImage, { src: memberImage(m), alt: m.title, size: "thumbnail" }) }) }), _jsxs(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: [_jsx(Text, { className: "line-clamp-2", color: "primary", size: "sm", weight: "medium", children: m.title }), m.isGroupParent && (_jsx(Span, { weight: "semibold", className: "text-[10px] text-[var(--appkit-color-primary)]", children: "Parent" }))] }), _jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Text, { size: "sm", color: "muted", children: _jsx(GatedPrice, { children: formatCurrency(m.price, m.currency ?? currency) }) }) }), !isCrossStore && (_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: blocked ? (_jsx(Span, { size: "xs", color: "muted", surface: "muted", rounded: "default", padding: "pill-2xs", children: blocked })) : (_jsx(QuantityStepper, { value: qty[m.id] ?? 0, onChange: (next) => setQty((prev) => ({ ...prev, [m.id]: next })), min: 0, max: m.availableQuantity, ariaLabel: `Quantity for ${m.title}`, decrementLabel: ACTIONS.CART["decrease-quantity"].ariaLabel, incrementLabel: ACTIONS.CART["increase-quantity"].ariaLabel })) })), _jsx(Td, { padding: "xs-tall", children: _jsx("a", { href: memberHref(m), className: "text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-primary)] hover:underline", children: "View \u2192" }) })] }, m.id));
-                            }) })] }) }), !isCrossStore && (_jsxs(_Fragment, { children: [error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "between", align: "center", gap: "sm", className: "min-w-0", children: [_jsxs(Text, { size: "sm", color: "muted", children: [selectedUnits > 0
+                                return (_jsxs(Tr, { className: "last:border-0", border: "subtle", children: [_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Div, { className: `w-10 h-10 ${__O.hidden}`, rounded: "full", border: "default", children: _jsx(MediaImage, { src: memberImage(m), alt: m.title, size: "thumbnail" }) }) }), _jsxs(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: [_jsx(Text, { className: "line-clamp-2", color: "primary", size: "sm", weight: "medium", children: m.title }), m.isGroupParent && (_jsx(Span, { weight: "semibold", className: "text-[10px] text-[var(--appkit-color-primary)]", children: "Parent" }))] }), _jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Text, { size: "sm", color: "muted", children: _jsx(GatedPrice, { children: formatCurrency(m.price, m.currency ?? currency) }) }) }), !isCrossStore && (_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: blocked ? (_jsx(Span, { size: "xs", color: "muted", surface: "muted", rounded: "default", padding: "pill-2xs", children: blocked })) : (_jsx(QuantityStepper, { value: qty[m.id] ?? 0, onChange: (next) => setQty((prev) => ({ ...prev, [m.id]: next })), min: 0, 
+                                                /*
+                                                 * `undefined` means uncapped — `QuantityStepper`
+                                                 * only disables its increment when a `max` is given.
+                                                 * A made-to-order member has no ceiling; the line's
+                                                 * own 99-per-line cap still applies at the cart.
+                                                 */
+                                                max: m.madeToOrder === true ? undefined : m.availableQuantity, ariaLabel: `Quantity for ${m.title}`, decrementLabel: ACTIONS.CART["decrease-quantity"].ariaLabel, incrementLabel: ACTIONS.CART["increase-quantity"].ariaLabel })) })), _jsx(Td, { padding: "xs-tall", children: _jsx("a", { href: memberHref(m), className: "text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-primary)] hover:underline", children: "View \u2192" }) })] }, m.id));
+                            }) })] }) }), !isCrossStore && (_jsxs(_Fragment, { children: [ruleNotes.length > 0 && (_jsx(Text, { size: "xs", color: "muted", children: ruleNotes.join(" · ") })), error && _jsx(Alert, { variant: "error", children: error }), selectedUnits > 0 && violations.length > 0 && (_jsx(Alert, { variant: "warning", children: _jsx(Stack, { gap: "dense", children: violations.map((v) => (_jsx(Text, { size: "sm", children: v.message }, v.code + v.message))) }) })), _jsxs(Row, { justify: "between", align: "center", gap: "sm", className: "min-w-0", children: [_jsxs(Text, { size: "sm", color: "muted", children: [selectedUnits > 0
                                         ? `${selectedUnits} item${selectedUnits === 1 ? "" : "s"}`
-                                        : "Nothing selected yet", selectedUnits > 0 && (_jsx(PricesOnly, { children: ` · ${formatCurrency(selectedTotal, currency)}` }))] }), _jsx(Button, { action: ACTIONS.CART["add-group-to-cart"], disabled: selectedUnits === 0, isLoading: isSaving, onClick: handleAdd })] })] }))] }));
+                                        : "Nothing selected yet", selectedUnits > 0 && (_jsx(PricesOnly, { children: discountPercent > 0
+                                            ? ` · ${formatCurrency(discountedTotal, currency)} (${discountPercent}% off ${formatCurrency(selectedTotal, currency)})`
+                                            : ` · ${formatCurrency(selectedTotal, currency)}` }))] }), _jsx(Button, { action: ACTIONS.CART["add-group-to-cart"], disabled: selectedUnits === 0 || violations.length > 0, isLoading: isSaving, onClick: handleAdd })] })] }))] }));
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { GroupRules } from "../../../_internal/shared/features/products/group-rules";
 export interface GroupSettingsPanelProps {
     productId: string;
     productSlug: string;
@@ -7,8 +8,17 @@ export interface GroupSettingsPanelProps {
     groupParentSlug?: string;
     groupChildSlugs?: string[];
     groupTitle?: string;
+    /**
+     * The group's current selection rules, for seeding the form.
+     *
+     * 🛑 Seeded from the PARENT PRODUCT the editor is already showing — not
+     * re-fetched. The rules live on the parent and this panel is mounted from the
+     * parent's own editor, so the values are already in hand; a second read would
+     * be a second source of truth for the same five fields.
+     */
+    groupRules?: GroupRules;
     isAuction?: boolean;
     storeProductsEndpoint: string;
     onGroupChanged: () => void;
 }
-export declare function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, isAuction, storeProductsEndpoint, onGroupChanged, }: GroupSettingsPanelProps): React.JSX.Element | null;
+export declare function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, groupRules, isAuction, storeProductsEndpoint, onGroupChanged, }: GroupSettingsPanelProps): React.JSX.Element | null;

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

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
 import React, { useEffect, useState } from "react";
 import { z } from "zod";
-import { Button, Code, ConfirmDeleteModal, Div, Heading, Modal, Row, SideDrawer, Span, Stack, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast } from "../../../ui/index.js";
+import { Button, Checkbox, Code, ConfirmDeleteModal, Div, Grid, Heading, Input, Modal, Row, SideDrawer, Span, Stack, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast } from "../../../ui/index.js";
 import { FormShellContext, useFormShellState, FormErrorSummary } from "../../../ui/forms/index.js";
+import { FieldInput } from "../../../ui/forms/FieldInput.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { apiClient } from "../../../http/index.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
@@ -14,6 +15,7 @@ import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
 import { annotate } from "../../shell/field-ui-meta.js";
 import { SectionForm, useSectionFormNav, buildSectionsFromSchema, visibleValues, } from "../../shell/index.js";
 import { applyZodIssues } from "../../../ui/forms/apply-zod-issues.js";
+import { productImageUrls } from "../schemas/firestore.js";
 const groupTitleSchema = z.object({
     groupTitle: annotate(z.string().min(1, "Group title is required"), {
         section: "group", sectionLabel: "Group", sectionRequired: true, quick: true,
@@ -50,7 +52,7 @@ const CONDITION_OPTIONS = [
     { value: "graded", label: "Graded" },
     { value: "refurbished", label: "Refurbished" },
 ];
-export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, isAuction, storeProductsEndpoint, onGroupChanged, }) {
+export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, groupRules, isAuction, storeProductsEndpoint, onGroupChanged, }) {
     const { showToast } = useToast();
     const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState(false);
@@ -64,6 +66,21 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
     });
     const [linkTargets, setLinkTargets] = useState([]);
     const [children, setChildren] = useState(null);
+    /*
+     * Rule drafts as STRINGS, not numbers. An empty input has to be
+     * distinguishable from zero — "" means "no limit" and `0` would mean "pick at
+     * most none" — and a numeric state cannot express the empty case without a
+     * separate null, which is the same thing with extra steps.
+     */
+    const [ruleDraft, setRuleDraft] = useState({
+        min: groupRules?.groupMinMembers?.toString() ?? "",
+        max: groupRules?.groupMaxMembers?.toString() ?? "",
+        perMember: groupRules?.groupMaxUnitsPerMember?.toString() ?? "",
+        discount: groupRules?.groupDiscountPercent?.toString() ?? "",
+    });
+    /** Per-member stock edits, keyed by product id. Only touched rows are sent. */
+    const [stockDraft, setStockDraft] = useState({});
+    const [motDraft, setMotDraft] = useState({});
     const [confirmAction, setConfirmAction] = useState(null);
     const titleSections = React.useMemo(() => buildSectionsFromSchema(groupTitleSchema), []);
     const titleNav = useSectionFormNav(titleSections, titleDraft, { scope: "store:group-title" });
@@ -97,6 +114,77 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
             setLoading(false);
         }
     }
+    /**
+     * Save the selection rules.
+     *
+     * 🛑 An empty input sends `null`, not an omitted key — "no limit" has to be
+     * expressible. The route writes only keys PRESENT in the body, so omitting
+     * one means "leave it alone", which is the opposite of what clearing a field
+     * means. Those are two different intents and the body has to carry both.
+     */
+    async function saveRules() {
+        setLoading(true);
+        try {
+            const n = (v) => (v.trim() === "" ? null : Number(v));
+            await apiClient.patch(groupEndpoint, {
+                groupMinMembers: n(ruleDraft.min),
+                groupMaxMembers: n(ruleDraft.max),
+                groupMaxUnitsPerMember: n(ruleDraft.perMember),
+                groupDiscountPercent: n(ruleDraft.discount),
+            });
+            showToast("Group rules saved.", "success");
+            onGroupChanged();
+        }
+        catch (e) {
+            void normalizeError(e);
+            showToast(e?.message ?? "Failed to save group rules.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    /**
+     * Save stock and made-to-order across the group.
+     *
+     * 🛑 Sends ONLY the rows the admin touched. Sending every member would make
+     * an untouched draft child's stock a write on every save — and the route
+     * refuses an entry that names neither field anyway, so a blanket send would
+     * 400 as soon as one row was left alone.
+     */
+    async function saveGroupStock() {
+        const touched = new Set([...Object.keys(stockDraft), ...Object.keys(motDraft)]);
+        if (touched.size === 0) {
+            showToast("Nothing changed.", "info");
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = (await apiClient.patch(`${groupEndpoint}/stock`, {
+                members: [...touched].map((productId) => ({
+                    productId,
+                    ...(stockDraft[productId] !== undefined && stockDraft[productId].trim() !== ""
+                        ? { stockQuantity: Number(stockDraft[productId]) }
+                        : {}),
+                    ...(motDraft[productId] !== undefined ? { madeToOrder: motDraft[productId] } : {}),
+                })),
+            }));
+            const rejected = res.data?.rejected?.length ?? 0;
+            showToast(rejected > 0
+                ? `Saved, but ${rejected} listing${rejected === 1 ? "" : "s"} could not be updated.`
+                : "Group stock saved.", rejected > 0 ? "warning" : "success");
+            setStockDraft({});
+            setMotDraft({});
+            void loadChildren();
+            onGroupChanged();
+        }
+        catch (e) {
+            void normalizeError(e);
+            showToast(e?.message ?? "Failed to save group stock.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
     async function startGroup() {
         setLoading(true);
         try {
@@ -264,7 +352,8 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
                     setOpen(next);
                     if (next && isGroupParent && children === null)
                         loadChildren();
-                }, paddingX: "none", paddingY: "xs", justify: "between", className: "w-full text-left group", "aria-expanded": open, children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", color: "muted", children: "Group Settings" }), _jsx(Span, { size: "xs", className: "group-hover:text-[var(--appkit-color-text-muted)] dark:group-hover:text-[var(--appkit-color-text-faint)] transition-colors", color: "faint", children: open ? "▲" : "▼" })] }), open && (_jsxs(Stack, { gap: "sm", className: `mt-3 ${__P.p4}`, surface: "muted", rounded: "lg", border: "default", children: [!groupId && !groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Group related listings together \u2014 e.g. a set, bundle, or multi-part item. Parts can be sold individually but shown together." }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: startGroup, isLoading: loading, children: "Start a group" })] })), isGroupParent && groupId && (_jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: titleShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: titleSections, values: titleDraft, onChange: (partial) => setTitleDraft((d) => ({ ...d, ...partial })), onSubmit: () => void saveTitle(), onValidationChange: () => titleForm.validate(titleDraft), schema: groupTitleSchema, openIds: titleNav.openIds, onOpenChange: titleNav.setOpenIds, submitLabel: "Save title", isLoading: loading })] }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-2", color: "muted", size: "xs", weight: "semibold", children: ["Members (", childSlugsCount + 1, " \u2014 including this listing)"] }), loading && !children ? (_jsx(Text, { size: "xs", color: "faint", children: "Loading\u2026" })) : (_jsxs(Div, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", children: [_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [_jsx(Span, { padding: "pill-2xs", weight: "semibold", className: "bg-[var(--appkit-color-primary)]/10 text-[var(--appkit-color-primary)] text-[10px]", rounded: "default", children: "Parent" }), _jsx(Text, { className: "flex-1", color: "primary", size: "sm", children: productSlug })] }), (children ?? []).filter((c) => c.id !== productId).map((child) => (_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [child.images?.[0] ? (_jsx(Div, { className: "relative w-8 h-8 flex-shrink-0 border border-[var(--appkit-color-border)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: child.images[0], alt: child.title, size: "thumbnail" }) })) : (_jsx(Div, { className: "w-8 h-8", surface: "subtle", rounded: "full" })), _jsx(Text, { className: "flex-1 truncate", color: "primary", size: "sm", children: child.title }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => requestUnlinkChild(child.id), isLoading: loading, className: `${CLS_DELETE_LINK} text-[length:var(--appkit-text-xs)]`, children: "Unlink" })] }, child.id)))] }))] }), _jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setShowAddModal(true), children: "Add child listing" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestDissolveGroup, isLoading: loading, className: CLS_DELETE_LINK, children: "Dissolve group" })] })] })), !isGroupParent && groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Part of:", " ", _jsx(Span, { weight: "medium", color: "primary", children: groupTitle ?? groupParentSlug })] }), _jsxs(Text, { size: "xs", color: "muted", children: ["Parent listing: ", _jsx(Code, { className: "font-mono", children: groupParentSlug })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestLeaveGroup, isLoading: loading, className: `${CLS_DELETE_LINK} w-fit`, children: "Leave group" })] }))] })), (() => {
+                }, paddingX: "none", paddingY: "xs", justify: "between", className: "w-full text-left group", "aria-expanded": open, children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", color: "muted", children: "Group Settings" }), _jsx(Span, { size: "xs", className: "group-hover:text-[var(--appkit-color-text-muted)] dark:group-hover:text-[var(--appkit-color-text-faint)] transition-colors", color: "faint", children: open ? "▲" : "▼" })] }), open && (_jsxs(Stack, { gap: "sm", className: `mt-3 ${__P.p4}`, surface: "muted", rounded: "lg", border: "default", children: [!groupId && !groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Group related listings together \u2014 e.g. a set, bundle, or multi-part item. Parts can be sold individually but shown together." }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: startGroup, isLoading: loading, children: "Start a group" })] })), isGroupParent && groupId && (_jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: titleShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: titleSections, values: titleDraft, onChange: (partial) => setTitleDraft((d) => ({ ...d, ...partial })), onSubmit: () => void saveTitle(), onValidationChange: () => titleForm.validate(titleDraft), schema: groupTitleSchema, openIds: titleNav.openIds, onOpenChange: titleNav.setOpenIds, submitLabel: "Save title", isLoading: loading })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "semibold", children: "Selection rules" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "groupMinMembers", label: "Min items in a selection", type: "number", value: ruleDraft.min, onChange: (v) => setRuleDraft((d) => ({ ...d, min: v })), hint: "Blank = no minimum" }), _jsx(FieldInput, { name: "groupMaxMembers", label: "Max items in a selection", type: "number", value: ruleDraft.max, onChange: (v) => setRuleDraft((d) => ({ ...d, max: v })), hint: "Blank = no maximum" }), _jsx(FieldInput, { name: "groupMaxUnitsPerMember", label: "Max units of any one item", type: "number", value: ruleDraft.perMember, onChange: (v) => setRuleDraft((d) => ({ ...d, perMember: v })), hint: "Blank = no per-item cap" }), _jsx(FieldInput, { name: "groupDiscountPercent", label: "Group discount (%)", type: "number", value: ruleDraft.discount, onChange: (v) => setRuleDraft((d) => ({ ...d, discount: v })), hint: "Off the selection subtotal. Applies to new cart lines; a line already in a cart keeps the price it was quoted and is re-checked at checkout." })] }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", className: "mt-2", onClick: () => void saveRules(), isLoading: loading, children: "Save rules" })] }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-2", color: "muted", size: "xs", weight: "semibold", children: ["Members (", childSlugsCount + 1, " \u2014 including this listing)"] }), _jsx(Text, { className: "mb-2", color: "faint", size: "xs", children: "Each listing has its own stock. Editing here saves them together \u2014 it does not pool them." }), loading && !children ? (_jsx(Text, { size: "xs", color: "faint", children: "Loading\u2026" })) : (_jsxs(Div, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", children: [_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [_jsx(Span, { padding: "pill-2xs", weight: "semibold", className: "bg-[var(--appkit-color-primary)]/10 text-[var(--appkit-color-primary)] text-[10px]", rounded: "default", children: "Parent" }), _jsx(Text, { className: "flex-1", color: "primary", size: "sm", children: productSlug })] }), (children ?? []).filter((c) => c.id !== productId).map((child) => (_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [productImageUrls(child.images)[0] ? (_jsx(Div, { className: "relative w-8 h-8 flex-shrink-0 border border-[var(--appkit-color-border)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: productImageUrls(child.images)[0], alt: child.title, size: "thumbnail" }) })) : (_jsx(Div, { className: "w-8 h-8", surface: "subtle", rounded: "full" })), _jsx(Text, { className: "flex-1 truncate", color: "primary", size: "sm", children: child.title }), child.status && child.status !== "published" ? (_jsx(Span, { size: "xs", surface: "warning-surface", className: "text-warning", padding: "pill-2xs", rounded: "default", children: child.status })) : null, (motDraft[child.id] ?? child.madeToOrder) === true ? (_jsx(Text, { size: "xs", color: "muted", children: "Made to order" })) : (_jsx(Input, { type: "number", "aria-label": `Stock for ${child.title}`, className: "w-20", value: stockDraft[child.id] ??
+                                                            (child.availableQuantity ?? 0).toString(), onChange: (e) => setStockDraft((d) => ({ ...d, [child.id]: e.target.value })) })), _jsx(Checkbox, { label: "MTO", "aria-label": `Made to order for ${child.title}`, checked: motDraft[child.id] ?? child.madeToOrder === true, onChange: (e) => setMotDraft((d) => ({ ...d, [child.id]: e.target.checked })) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => requestUnlinkChild(child.id), isLoading: loading, className: `${CLS_DELETE_LINK} text-[length:var(--appkit-text-xs)]`, children: "Unlink" })] }, child.id)))] })), (children ?? []).length > 0 && (_jsx(Button, { type: "button", variant: "secondary", size: "sm", className: "mt-2", onClick: () => void saveGroupStock(), isLoading: loading, children: "Save group stock" }))] }), _jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setShowAddModal(true), children: "Add child listing" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestDissolveGroup, isLoading: loading, className: CLS_DELETE_LINK, children: "Dissolve group" })] })] })), !isGroupParent && groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Part of:", " ", _jsx(Span, { weight: "medium", color: "primary", children: groupTitle ?? groupParentSlug })] }), _jsxs(Text, { size: "xs", color: "muted", children: ["Parent listing: ", _jsx(Code, { className: "font-mono", children: groupParentSlug })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestLeaveGroup, isLoading: loading, className: `${CLS_DELETE_LINK} w-fit`, children: "Leave group" })] }))] })), (() => {
                 const content = (_jsx(AddChildContent, { addTab: addTab, setAddTab: setAddTab, createForm: createForm, setCreateForm: setCreateForm, productSlug: productSlug, storeProductsEndpoint: storeProductsEndpoint, linkTargets: linkTargets, setLinkTargets: setLinkTargets, onAddCreate: addCreateChild, onAddLink: addLinkChild, loading: loading }));
                 const close = () => setShowAddModal(false);
                 return (groupChildSlugs?.length ?? 0) >= 4 ? (_jsx(SideDrawer, { isOpen: showAddModal, onClose: close, title: "Add child listing", children: content })) : (_jsx(Modal, { open: showAddModal, onClose: close, title: "Add child listing", size: "lg", children: content }));

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

@@ -131,5 +131,5 @@ export async function PrizeDrawDetailPageView({ id, initialPrizeDraw, currentUse
                     price: pricePerEntry,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRIZE_DRAWS), className: "hover:text-primary-600 transition-colors", children: "Prize Draws" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(PrizeDrawCollage, { items: items, hideWonState: true })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: "Prize Draw" }), _jsx(Span, { size: "xs", weight: "semibold", className: `inline-block ${statusClass(revealStatus)}`, padding: "pill-sm", rounded: "full", children: statusLabel(revealStatus) }), maxPerUser !== null && (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Limit: ", maxPerUser, " entries per customer"] })), maxPerUser !== null && userEntriesUsed !== null && (_jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: ["You have used ", userEntriesUsed, "/", maxPerUser] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsx(Div, { className: `${__P.p4}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Entries" }), _jsxs(Text, { size: "sm", weight: "semibold", children: [current, " / ", max, " (", remaining, " left)"] })] }), revealStart && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window opens" }), _jsx(Text, { size: "sm", weight: "medium", children: revealStart.toLocaleString() })] })), revealEnd && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window closes" }), _jsx(Text, { size: "sm", weight: "medium", children: revealEnd.toLocaleString() })] }))] }) }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-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-[var(--appkit-color-text-muted)]" })) : undefined })), renderBuyBar: () => (_jsx(Div, { padding: "5", id: "prize-draw-buy-bar", border: "subtle", surface: "muted", rounded: "xl", children: _jsx(PrizeDrawEntryActions, { productId: String(product.id), productSlug: slug, title: title, pricePerEntry: pricePerEntry, currency: currency, remainingEntries: remaining, revealStatus: revealStatus, prizeGithubFileUrl: githubUrl }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(PrizeDrawBottomActions, { pricePerEntry: pricePerEntry, currency: currency, closed: revealStatus === "closed" || remaining === 0 })] })] }));
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRIZE_DRAWS), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Prize Draws" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(PrizeDrawCollage, { items: items, hideWonState: true })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: "Prize Draw" }), _jsx(Span, { size: "xs", weight: "semibold", className: `inline-block ${statusClass(revealStatus)}`, padding: "pill-sm", rounded: "full", children: statusLabel(revealStatus) }), maxPerUser !== null && (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Limit: ", maxPerUser, " entries per customer"] })), maxPerUser !== null && userEntriesUsed !== null && (_jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: ["You have used ", userEntriesUsed, "/", maxPerUser] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsx(Div, { className: `${__P.p4}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Entries" }), _jsxs(Text, { size: "sm", weight: "semibold", children: [current, " / ", max, " (", remaining, " left)"] })] }), revealStart && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window opens" }), _jsx(Text, { size: "sm", weight: "medium", children: revealStart.toLocaleString() })] })), revealEnd && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window closes" }), _jsx(Text, { size: "sm", weight: "medium", children: revealEnd.toLocaleString() })] }))] }) }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-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-[var(--appkit-color-text-muted)]" })) : undefined })), renderBuyBar: () => (_jsx(Div, { padding: "5", id: "prize-draw-buy-bar", border: "subtle", surface: "muted", rounded: "xl", children: _jsx(PrizeDrawEntryActions, { productId: String(product.id), productSlug: slug, title: title, pricePerEntry: pricePerEntry, currency: currency, remainingEntries: remaining, revealStatus: revealStatus, prizeGithubFileUrl: githubUrl }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(PrizeDrawBottomActions, { pricePerEntry: pricePerEntry, currency: currency, closed: revealStatus === "closed" || remaining === 0 })] })] }));
 }

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

@@ -12,7 +12,21 @@ export interface PrizeDrawEntryActionsProps {
  * Client buy panel for a prize-draw detail page (SB4-G).
  *
  * - Enter Draw → NonRefundableConsentModal (listingType="prize-draw")
- * - On confirm → add 1 entry to guest cart and route to /user/cart
+ * - On confirm → add the chosen number of entries to the cart, then /user/cart
  * - "View RNG source" link → prizeGithubFileUrl
+ *
+ * 🛑 THIS FLOW DID NOT WORK AT ALL UNTIL 2026-10-19, and the docstring above
+ * described the behaviour it was supposed to have. `handleConfirm` pushed to
+ * `/checkout?directItem=<slug>&type=prize-draw` — and NOTHING anywhere reads
+ * `directItem` (CheckoutRouteClient reads only `coupon` and `lane`), and
+ * nothing added to the cart. A buyer pressing "Enter draw" landed on a
+ * checkout of whatever was already in their basket, with no entry in it.
+ * Buying an entry was impossible.
+ *
+ * 🛑 MULTI-ENTRY NEEDED NO SERVER WORK. `prizeDrawRule.splitMultipleOrders`
+ * already chunks a quantity into batches of PRIZE_DRAW_MAX_REVEALS_PER_ORDER
+ * (7 entries → [3,3,1]), `enforceMaxPerUserForCart` already caps per buyer, and
+ * the rule's preflight already checks `prizeMaxEntries`. The whole server half
+ * was written and unreachable because the client never sent a quantity.
  */
 export declare function PrizeDrawEntryActions({ productId, productSlug, title, pricePerEntry, currency, remainingEntries, revealStatus, prizeGithubFileUrl, }: PrizeDrawEntryActionsProps): import("react").JSX.Element;