@mohasinac/appkit 4.70.0 → 4.71.2

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

@@ -25,8 +25,6 @@ const CLS_BUNDLE_LABEL = "text-[length:var(--appkit-text-xs)] text-success dark:
 const CLS_BUNDLE_CTA = "flex-shrink-0 rounded-lg bg-success-solid hover:brightness-110 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-success-on-solid transition-colors";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { productImageUrls } from "../schemas/firestore.js";
-import { PART_SLOT_LABEL } from "../../parts/schemas/firestore.js";
-import { getModelsUsingPart } from "../../../_internal/server/features/parts/data.js";
 import { ctaAnchorProps } from "../../layout/cta-anchor.js";
 import { ContextualTrail } from "../../categories/components/ContextualTrail.js";
 import { productCrumbs, withTrailHead } from "../../categories/utils/breadcrumb-chain.js";
@@ -52,6 +50,8 @@ import { ProductFeatureBadges } from "./ProductFeatureBadges.js";
 import { isFinalSale } from "../constants/final-sale.js";
 import { FeatureBadgeList } from "./FeatureBadge.js";
 import { ShareButton } from "./ShareButton.js";
+import { TrustBadgeRow } from "./TrustBadgeRow.js";
+import { PdpSectionJumpNav } from "./PdpSectionJumpNav.js";
 import { toCustomSectionTabs } from "./CustomSectionTabContent.js";
 import { SublistingCarouselSection } from "./SublistingCarouselSection.js";
 import { ShowGroupSection } from "./ShowGroupSection.js";
@@ -61,12 +61,15 @@ import { computeRelatedItems, getReviewPageForProduct } from "../../../_internal
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel.js";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data.js";
 import { getSiteSettingsGlobal } from "../../admin/utils/getSiteSettingsGlobal.js";
+import { getFieldVisibility } from "../../../_internal/server/features/forms/field-visibility.js";
+import { SectionVisibilityGate } from "../../shell/SectionVisibilityGate.js";
 import { safeRead } from "../../../errors/safe-read.js";
 import { canMakeOffer } from "../../../_internal/shared/listing-types/capabilities.js";
 import { closedSurfaceContext, isClosedHref, } from "../../../_internal/shared/listing-types/route-gating.js";
 import { MessageSellerButton } from "../../messages/components/MessageSellerButton.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { DEFAULT_MIN_OFFER_PERCENT, resolveOfferBounds, } from "../../../_internal/shared/features/offers/config.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -82,7 +85,7 @@ function StarRating({ value }) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export async function ProductDetailPageView({ slug, initialProduct, renderOfferAction, renderPrimaryActions, compositionContent, productFeatures, codEnabled, emiEnabled, returnsEnabled = true, }) {
+export async function ProductDetailPageView({ slug, initialProduct, renderOfferAction, renderPrimaryActions, compositionContent, productFeatures, codEnabled, emiEnabled, returnsEnabled = true, pageRegionCards = [], }) {
     // Use pre-fetched data when available to avoid a redundant repository call.
     // The page layer wraps getProductForDetail in React.cache(), so both
     // generateMetadata() and this component share the same in-flight promise.
@@ -97,26 +100,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     }
     const p = product;
     const currency = p.currency || getDefaultCurrency();
-    /*
-     * The REVERSE link: a spare names a glossary entry, so the glossary entry's
-     * page should name it back. Fetched only when both conditions hold — most
-     * listings carry no `partGlossaryId` at all, and this must not become an
-     * extra read on every product page in the catalogue.
-     *
-     * `getModelsUsingPart` does its own `safeRead`-equivalent internally
-     * (catches and logs, returns `[]`), and this wraps it in `safeRead` again
-     * anyway — belt-and-braces costs nothing against a function that is already
-     * `cache()`-wrapped and this page is the only caller that would ever see a
-     * throw from a future change to it.
-     */
     const partGlossaryId = typeof p.partGlossaryId === "string" ? p.partGlossaryId : undefined;
-    const fitsModels = partGlossaryId
-        ? await safeRead(() => getModelsUsingPart(partGlossaryId), {
-            route: "/products/[slug]",
-            key: "products.fitsModels",
-            fallback: [],
-        })
-        : [];
     /*
      * `(slot, tail)` from the id's OWN composition, `${slot}--${tail}` —
      * mirrors `ModelCompositionPanel`'s private `tailOf`, duplicated rather than
@@ -134,9 +118,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
         const tail = partGlossaryId.slice(i + 2);
         return String(ROUTES.PUBLIC.PART_DETAIL(slot, tail));
     })();
-    const partSlotLabel = partGlossaryId
-        ? PART_SLOT_LABEL[partGlossaryId.slice(0, partGlossaryId.indexOf("--"))]
-        : undefined;
+    const partSlotLabel = undefined;
     // -- Derived values ---------------------------------------------------------
     const title = String(p.title ?? p.name ?? "");
     const price = typeof p.price === "number" ? p.price : null;
@@ -299,6 +281,62 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const minOfferPercent = typeof p.minOfferPercent === "number"
         ? p.minOfferPercent
         : DEFAULT_MIN_OFFER_PERCENT;
+    /*
+     * `functionalSlot` (2026-11-05) — hoisted OUTSIDE both the fixed-position
+     * render below and the `AdminComposableRegion` mount, since an admin can
+     * now compose a `{kind:"functionalSlot", slotId:"pdp-offer-action"}` card
+     * that takes over this position instead. Computed once, consumed twice:
+     * the fixed slot renders it only when NOT overridden (so the control never
+     * doubles up), and the composed region always receives it so a
+     * `functionalSlot` card has something real to resolve to. `pageRegionCards`
+     * is template-wide for this listing type (see `recent-entry.ts`'s
+     * `functionalSlot` doc comment) — this check and this render use the same
+     * eligibility condition the fixed position always has, so an admin cannot
+     * surface an offer control for a product that isn't actually offer-eligible.
+     */
+    const offerActionNode = allowOffers && offerableType && price !== null
+        ? renderOfferAction?.({
+            productId: product.id,
+            price,
+            currency,
+            minOfferPercent,
+            listingStoreId: typeof p.storeId === "string" ? p.storeId : undefined,
+            bounds: resolveOfferBounds({
+                listingType: normalizeListingType(p),
+                listedPrice: price,
+                minOfferPercent,
+                allowOffers,
+            }),
+        })
+        : undefined;
+    const hasOfferSlotOverride = pageRegionCards.some((card) => card.elements.some((el) => el.kind === "functionalSlot" && el.slotId === "pdp-offer-action"));
+    /*
+     * `functionalSlot` (2026-11-05) — same hoisting pattern as `offerActionNode`
+     * above, for the DESKTOP position only. Unlike offer-action, this slot
+     * always renders SOMETHING (real buttons from `renderPrimaryActions`, or
+     * `ACTION_NOT_WIRED`-disabled placeholders when the caller omitted the
+     * prop) — there is no "not eligible" case, since this is the PRIMARY
+     * purchase path. The SECOND `renderPrimaryActions` call site below
+     * (`variant: "mobile"`) is a `useBottomActions()` REGISTRATION side
+     * effect, not a duplicable visible slot — it always fires regardless of
+     * any composed override; suppressing it would break the mobile buy bar
+     * site-wide for what is meant to be a purely additive widget feature.
+     */
+    const primaryActionsNode = renderPrimaryActions
+        ? renderPrimaryActions({
+            productId: product.id,
+            productSlug: product.slug ?? slug,
+            productTitle: product.title,
+            productImage: product.mainImage,
+            price,
+            currency,
+            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+            storeName: typeof p.storeName === "string" ? p.storeName : undefined,
+            inStock,
+            variant: "desktop",
+        })
+        : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsxs(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: [_jsx(Icon, { name: "wishlist", size: "md" }), "Add to Wishlist"] })] }));
+    const hasPrimaryActionsSlotOverride = pageRegionCards.some((card) => card.elements.some((el) => el.kind === "functionalSlot" && el.slotId === "pdp-primary-actions"));
     const shippingInfo = typeof p.shippingInfo === "string" ? p.shippingInfo : null;
     const returnPolicy = typeof p.returnPolicy === "string" ? p.returnPolicy : null;
     /*
@@ -324,7 +362,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const storeId = typeof p.storeId === "string" ? p.storeId : null;
     // -- Fetch reviews + the shared 4-signal related-items computation + grouped listings in parallel --
     // Only page 1 of reviews is fetched here; <ReviewsListingPanel> pages the rest client-side.
-    const [initialReviews, related, groups, siteSettings, priceBand] = await Promise.all([
+    const [initialReviews, related, groups, siteSettings, priceBand, pdpSectionVisibility] = await Promise.all([
         getReviewPageForProduct(product.id),
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
@@ -347,6 +385,17 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                 fallback: null,
             })
             : Promise.resolve(null),
+        /*
+         * A sixth parallel read, same reasoning as the price-band comment above
+         * — the admin field-visibility override for this page's own sections
+         * (gallery/info/actions/tabs/related), one SHARED `"pdp-sections"`
+         * surface applying to every product (a site-wide template decision,
+         * not per-product — same granularity the owner's own examples implied:
+         * "if I wish for detail screen cta buttons that is a widget"). Degrades
+         * to `{}` (= show everything) on any failure via `getFieldVisibility`'s
+         * own `safeRead`, so a visibility-store outage never blanks the page.
+         */
+        getFieldVisibility("pdp-sections"),
     ]);
     const { relatedItems, relatedByBrand, relatedByTags, relatedByStore } = related;
     /*
@@ -395,82 +444,63 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                     price: product.price,
                     storeId: product.storeId,
                     storeName: product.storeName,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
-                                                ? "Brand New"
-                                                : condition === "like_new"
-                                                    ? "Like New"
-                                                    : condition === "refurbished"
-                                                        ? "Refurbished"
-                                                        : condition === "used"
-                                                            ? "Used"
-                                                            : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null && (reviewCount ?? 0) > 0 ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
-                                                    ? "✓ Made to order"
-                                                    : inStock
-                                                        ? "✓ In Stock"
-                                                        : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
-                                                    ? ` — only ${effectiveStock} left`
-                                                    : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [madeToOrder
-                                            ? "✓ Made to order"
-                                            : inStock
-                                                ? "✓ In Stock"
-                                                : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
-                                            ? ` — only ${effectiveStock} left`
-                                            : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: !finalSale && returnsEnabled, finalSale: finalSale, labels: {
-                                        featured: "Featured",
-                                        fasterDelivery: "Faster Delivery",
-                                        ratedSeller: "Rated Seller",
-                                        condition: "Condition",
-                                        conditionNew: "New",
-                                        conditionUsed: "Used",
-                                        conditionBroken: "For Parts",
-                                        conditionRefurbished: "Refurbished",
-                                        returnable: "Returnable",
-                                        finalSale: "Final Sale",
-                                        freeShipping: "Free Shipping",
-                                        codAvailable: "Cash on Delivery",
-                                        emiAvailable: "EMI Available",
-                                        wishlistCount: (n) => `${n} wishlisted`,
-                                        categoryProductCount: (n, cat) => `${n} in ${cat}`,
-                                    } }), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this product" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", 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-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), sellerName && (_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: sellerName }), typeof p.storeRating === "number" && p.storeRating > 0 && (_jsx(Row, { gap: "xs", align: "center", className: "mt-0.5", children: _jsxs(Text, { size: "xs", color: "muted", children: [_jsx(Span, { className: "text-warning", "aria-hidden": "true", children: "\u2605" }), " ", p.storeRating.toFixed(1), typeof p.storeReviewCount === "number" &&
-                                                                    p.storeReviewCount > 0 &&
-                                                                    ` · ${p.storeReviewCount} reviews`] }) }))] }), _jsxs(Row, { gap: "xs", align: "center", className: "shrink-0", children: [sellerName && storeId && (_jsx(MessageSellerButton, { storeId: storeId, productId: product.id })), sellerHref && (_jsx(Link, { href: sellerHref, className: "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" }))] })] }) }))] })), renderActions: () => (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [price !== null && (_jsxs(Div, { children: [_jsx(PriceDisplay, { amount: price, originalAmount: originalPrice ?? undefined, currency: currency, variant: "detail" }), siteSettings?.gst?.enabled === true &&
-                                            typeof p.gstRate === "number" &&
-                                            p.gstRate > 0 && (_jsxs(Text, { size: "xs", color: "muted", children: ["Incl. ", p.gstRate, "% GST"] })), _jsx(MarketPriceAnchor, { band: priceBand?.byListingType?.[normalizeListingType(p)] ?? null, windowDays: priceBand?.windowDays ?? null, currency: currency, price: price }), inStock && effectiveStock !== null && effectiveStock <= 3 && (_jsxs(Text, { className: "mt-1 text-warning", size: "xs", children: ["Only ", effectiveStock, " left \u2014 order soon!"] })), inStock && effectiveStock !== null && effectiveStock > 3 && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [effectiveStock, " in stock"] })), madeToOrder && (_jsx(Text, { className: "mt-1", color: "muted", size: "xs", children: "Made to order \u2014 printed when you order, so it never runs out." })), partHref && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [partSlotLabel ?? "Part", ".", " ", _jsx(Link, { href: partHref, className: "text-primary-600 hover:underline", children: "See what else fits \u2192" }), fitsModels.length > 0 && (_jsxs(_Fragment, { children: [" ", "Fits:", " ", fitsModels.slice(0, 6).map((m, i) => (_jsxs(Text, { as: "span", children: [i > 0 ? ", " : "", m.categoryId ? (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(m.categoryId)), className: "text-primary-600 hover:underline", children: m.name })) : (m.name)] }, m.id)))] }))] }))] })), _jsxs(Stack, { gap: "sm", ...ctaAnchorProps(), children: [renderPrimaryActions ? (renderPrimaryActions({
-                                            productId: product.id,
-                                            productSlug: product.slug ?? slug,
-                                            productTitle: product.title,
-                                            productImage: product.mainImage,
-                                            price,
-                                            currency,
-                                            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
-                                            storeName: typeof p.storeName === "string" ? p.storeName : undefined,
-                                            inStock,
-                                            variant: "desktop",
-                                        })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsxs(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: [_jsx(Icon, { name: "wishlist", size: "md" }), "Add to Wishlist"] })] })), allowOffers && offerableType && price !== null && renderOfferAction?.({
-                                            productId: product.id,
-                                            price,
-                                            currency,
-                                            minOfferPercent,
-                                            listingStoreId: typeof p.storeId === "string" ? p.storeId : undefined,
-                                            bounds: resolveOfferBounds({
-                                                listingType: normalizeListingType(p),
-                                                listedPrice: price,
-                                                minOfferPercent,
-                                                allowOffers,
-                                            }),
-                                        })] }), (shippingInfo || returnPolicy || freeShipping || finalSale) && (_jsxs(Stack, { gap: "sm", border: "default", className: "border-t", padding: "t-md", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_FREE_SHIPPING_ICON, children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { size: "xs", color: "muted", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCE6" }), _jsx(Text, { size: "xs", color: "muted", children: shippingInfo })] })), _jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\u21BA" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: finalSale ? "warning" : "muted", children: finalSale ? "Final sale — no change-of-mind returns" : "Returns accepted" }), _jsx(Text, { size: "xs", color: "muted", children: finalSale
-                                                                ? "You can still claim if it never arrives, arrives damaged, is the wrong item, is not as described, or is counterfeit."
-                                                                : "Return this item within the platform return window for any reason." })] })] }), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCC4" }), _jsx(Text, { size: "xs", color: "muted", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { border: "default", className: "border-t", padding: "t-md", children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "medium", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", size: "xs", children: tag }, tag))) })] })), _jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "sm", justify: "center", className: "text-center", children: [
-                                            { icon: "🔒", label: "Secure\nPayment" },
-                                            { icon: "✓", label: "Verified\nSeller" },
-                                            { icon: "⭐", label: "Quality\nGuarantee" },
-                                        ].map(({ icon, label }) => (_jsxs(Stack, { color: "muted", textSize: "xs", className: "min-w-[60px]", align: "center", gap: "xs", children: [_jsx(Span, { size: "base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] })), renderSublistingSection: sublistingCategoryId
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(_Fragment, { children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] }), _jsx(PdpSectionJumpNav, { productId: String(product.id), title: title || "this product" })] })), renderGallery: () => (
+                        // Phase 10 ("widget descriptors") — id anchor for the PDP "jump to
+                        // section" nav + pdpSection RecentEntry href resolution. Mirrors
+                        // PdpSectionId's "gallery" 1:1 (appkit/.../dashboard/recent-entry.ts).
+                        _jsx(Div, { id: "section-gallery", children: _jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "gallery", initialVisible: pdpSectionVisibility.gallery !== false, children: _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined }) }) })), renderInfo: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "info", initialVisible: pdpSectionVisibility.info !== false, children: _jsxs(Stack, { gap: "md", id: "section-info", children: [_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
+                                                    ? "Brand New"
+                                                    : condition === "like_new"
+                                                        ? "Like New"
+                                                        : condition === "refurbished"
+                                                            ? "Refurbished"
+                                                            : condition === "used"
+                                                                ? "Used"
+                                                                : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null && (reviewCount ?? 0) > 0 ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
+                                                        ? "✓ Made to order"
+                                                        : inStock
+                                                            ? "✓ In Stock"
+                                                            : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                        ? ` — only ${effectiveStock} left`
+                                                        : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [madeToOrder
+                                                ? "✓ Made to order"
+                                                : inStock
+                                                    ? "✓ In Stock"
+                                                    : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                ? ` — only ${effectiveStock} left`
+                                                : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: !finalSale && returnsEnabled, finalSale: finalSale, labels: {
+                                            featured: "Featured",
+                                            fasterDelivery: "Faster Delivery",
+                                            ratedSeller: "Rated Seller",
+                                            condition: "Condition",
+                                            conditionNew: "New",
+                                            conditionUsed: "Used",
+                                            conditionBroken: "For Parts",
+                                            conditionRefurbished: "Refurbished",
+                                            returnable: "Returnable",
+                                            finalSale: "Final Sale",
+                                            freeShipping: "Free Shipping",
+                                            codAvailable: "Cash on Delivery",
+                                            emiAvailable: "EMI Available",
+                                            wishlistCount: (n) => `${n} wishlisted`,
+                                            categoryProductCount: (n, cat) => `${n} in ${cat}`,
+                                        } }), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this product" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", 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-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), sellerName && (_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: sellerName }), typeof p.storeRating === "number" && p.storeRating > 0 && (_jsx(Row, { gap: "xs", align: "center", className: "mt-0.5", children: _jsxs(Text, { size: "xs", color: "muted", children: [_jsx(Span, { className: "text-warning", "aria-hidden": "true", children: "\u2605" }), " ", p.storeRating.toFixed(1), typeof p.storeReviewCount === "number" &&
+                                                                        p.storeReviewCount > 0 &&
+                                                                        ` · ${p.storeReviewCount} reviews`] }) }))] }), _jsxs(Row, { gap: "xs", align: "center", className: "shrink-0", children: [sellerName && storeId && (_jsx(MessageSellerButton, { storeId: storeId, productId: product.id })), sellerHref && (_jsx(Link, { href: sellerHref, className: "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" }))] })] }) }))] }) })), renderActions: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "actions", initialVisible: pdpSectionVisibility.actions !== false, children: _jsxs(Stack, { id: "section-actions", className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [price !== null && (_jsxs(Div, { children: [_jsx(PriceDisplay, { amount: price, originalAmount: originalPrice ?? undefined, currency: currency, variant: "detail" }), siteSettings?.gst?.enabled === true &&
+                                                typeof p.gstRate === "number" &&
+                                                p.gstRate > 0 && (_jsxs(Text, { size: "xs", color: "muted", children: ["Incl. ", p.gstRate, "% GST"] })), _jsx(MarketPriceAnchor, { band: priceBand?.byListingType?.[normalizeListingType(p)] ?? null, windowDays: priceBand?.windowDays ?? null, currency: currency, price: price }), inStock && effectiveStock !== null && effectiveStock <= 3 && (_jsxs(Text, { className: "mt-1 text-warning", size: "xs", children: ["Only ", effectiveStock, " left \u2014 order soon!"] })), inStock && effectiveStock !== null && effectiveStock > 3 && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [effectiveStock, " in stock"] })), madeToOrder && (_jsx(Text, { className: "mt-1", color: "muted", size: "xs", children: "Made to order \u2014 printed when you order, so it never runs out." })), partHref && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [partSlotLabel ?? "Part", ".", " ", _jsx(Link, { href: partHref, className: "text-primary-600 hover:underline", children: "See what else fits \u2192" })] }))] })), _jsxs(Stack, { gap: "sm", ...ctaAnchorProps(), children: [!hasPrimaryActionsSlotOverride && primaryActionsNode, !hasOfferSlotOverride && offerActionNode] }), (shippingInfo || returnPolicy || freeShipping || finalSale) && (_jsxs(Stack, { gap: "sm", border: "default", className: "border-t", padding: "t-md", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_FREE_SHIPPING_ICON, children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { size: "xs", color: "muted", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCE6" }), _jsx(Text, { size: "xs", color: "muted", children: shippingInfo })] })), _jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\u21BA" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: finalSale ? "warning" : "muted", children: finalSale ? "Final sale — no change-of-mind returns" : "Returns accepted" }), _jsx(Text, { size: "xs", color: "muted", children: finalSale
+                                                                    ? "You can still claim if it never arrives, arrives damaged, is the wrong item, is not as described, or is counterfeit."
+                                                                    : "Return this item within the platform return window for any reason." })] })] }), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCC4" }), _jsx(Text, { size: "xs", color: "muted", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { border: "default", className: "border-t", padding: "t-md", children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "medium", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", size: "xs", children: tag }, tag))) })] })), _jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(TrustBadgeRow, { badges: [
+                                                { icon: "🔒", label: "Secure\nPayment" },
+                                                { icon: "✓", label: "Verified\nSeller" },
+                                                { icon: "⭐", label: "Quality\nGuarantee" },
+                                            ] }) })] }) })), renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
-                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { partsContent: compositionContent, 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, specsContent: allSpecs.length > 0 ? (_jsx(SpecTable, { rows: allSpecs })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx(Ul, { spacing: "comfortable", children: ingredients.map((item, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 bg-primary-400", rounded: "full" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx(Ol, { spacing: "loose", children: howToUse.map((step, i) => (_jsxs(Li, { layout: "flex-start", gap: "3", textSize: "sm", color: "muted", children: [_jsx(Span, { layout: "flex-center", size: "xs", weight: "bold", className: "flex-shrink-0 h-6 w-6 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300", rounded: "full", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsxs(Stack, { gap: "md", children: [_jsx(PurchaseReviewAffordance, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." })] }), customTabs: toCustomSectionTabs(p.customSections) })), renderBundleSection: bundleMemberships.length > 0
+                            : undefined, renderTabs: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "tabs", initialVisible: pdpSectionVisibility.tabs !== false, children: _jsx(Div, { id: "section-tabs", children: _jsx(ProductTabsShell, { partsContent: compositionContent, 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, specsContent: allSpecs.length > 0 ? (_jsx(SpecTable, { rows: allSpecs })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx(Ul, { spacing: "comfortable", children: ingredients.map((item, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 bg-primary-400", rounded: "full" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx(Ol, { spacing: "loose", children: howToUse.map((step, i) => (_jsxs(Li, { layout: "flex-start", gap: "3", textSize: "sm", color: "muted", children: [_jsx(Span, { layout: "flex-center", size: "xs", weight: "bold", className: "flex-shrink-0 h-6 w-6 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300", rounded: "full", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsxs(Stack, { gap: "md", children: [_jsx(PurchaseReviewAffordance, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." })] }), customTabs: toCustomSectionTabs(p.customSections) }) }) })), renderBundleSection: bundleMemberships.length > 0
                             ? () => (_jsxs(Div, { className: CLS_BUNDLE_BOX, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "sm", children: [_jsx(Span, { size: "base", className: CLS_BUNDLE_ICON, "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsxs(Text, { className: CLS_BUNDLE_TITLE, children: ["Part of ", bundleMemberships.length === 1 ? "a bundle" : `${bundleMemberships.length} bundles`] })] }), _jsx(Stack, { gap: "3", children: bundleMemberships.map((b) => (_jsxs(Div, { className: CLS_BUNDLE_ROW, children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_BUNDLE_LABEL, children: "Included in bundle" }), _jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: b.title })] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_CTA, children: "View Bundle \u2192" })] }, b.id))) })] }))
-                            : undefined, renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryNames[0] || categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: sellerName ? storeName || undefined : undefined })] })) }), renderPrimaryActions
+                            : undefined, renderRelated: () => (_jsxs(Stack, { gap: "xl", id: "section-related", children: [_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "grouped-listings", initialVisible: pdpSectionVisibility["grouped-listings"] !== false, children: _jsx(GroupedListingsCarousel, { groups: groups }) }), _jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "related", initialVisible: pdpSectionVisibility.related !== false, children: _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryNames[0] || categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: sellerName ? storeName || undefined : undefined }) })] })) }), _jsx(AdminComposableRegion, { pageId: "products-slug", initialCards: pageRegionCards, functionalSlots: { "pdp-offer-action": offerActionNode, "pdp-primary-actions": primaryActionsNode } }), renderPrimaryActions
                         ? renderPrimaryActions({
                             productId: product.id,
                             productSlug: product.slug ?? slug,

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

@@ -90,8 +90,11 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
             key: "cod",
             icon: _jsx(Span, { size: "xs", children: "\u20B9" }),
             label: labels.codAvailable,
-            colorClass: "text-purple-700 dark:text-purple-300",
-            bgClass: "bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-800",
+            // Generic accent token (2A/Phase 11), not a status color — COD/EMI/
+            // wishlist exist purely to differentiate from each other, same
+            // convention the success/warning/error/info badges above use.
+            colorClass: "text-accent-c dark:text-accent-c",
+            bgClass: "bg-accent-c-surface dark:bg-accent-c-surface border-accent-c dark:border-accent-c",
             href: codHref,
         });
     }
@@ -100,8 +103,8 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
             key: "emi",
             icon: _jsx(Span, { size: "xs", children: "\uD83D\uDCC5" }),
             label: labels.emiAvailable,
-            colorClass: "text-indigo-700 dark:text-indigo-300",
-            bgClass: "bg-indigo-50 dark:bg-indigo-900/30 border-indigo-200 dark:border-indigo-800",
+            colorClass: "text-accent-a dark:text-accent-a",
+            bgClass: "bg-accent-a-surface dark:bg-accent-a-surface border-accent-a dark:border-accent-a",
             href: emiHref,
         });
     }
@@ -110,8 +113,8 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
             key: "wishlist",
             icon: _jsx(Icon, { name: "wishlist", size: "xs", filled: true }),
             label: labels.wishlistCount(wishlistCount),
-            colorClass: "text-pink-700 dark:text-pink-300",
-            bgClass: "bg-pink-50 dark:bg-pink-900/30 border-pink-200 dark:border-pink-800",
+            colorClass: "text-accent-b dark:text-accent-b",
+            bgClass: "bg-accent-b-surface dark:bg-accent-b-surface border-accent-b dark:border-accent-b",
         });
     }
     if (categoryProductCount && categoryProductCount > 0 && categoryName) {
@@ -129,6 +132,6 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
     }
     if (badges.length === 0)
         return null;
-    const renderPill = (badge) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `.5 border py-[0.375rem] ${badge.bgClass} ${badge.colorClass}`, rounded: "lg", padding: "x-sm", size: "xs", weight: "medium", children: [_jsx(Span, { "aria-hidden": "true", children: badge.icon }), badge.label] }));
+    const renderPill = (badge) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `border py-[0.375rem] ${badge.bgClass} ${badge.colorClass}`, rounded: "lg", padding: "x-sm", size: "xs", weight: "medium", children: [_jsx(Span, { "aria-hidden": "true", children: badge.icon }), badge.label] }));
     return (_jsx(Row, { wrap: true, gap: "sm", children: badges.map((badge) => badge.href ? (_jsx(TextLink, { href: badge.href, className: "no-underline", children: renderPill(badge) }, badge.key)) : (_jsx(Fragment, { children: renderPill(badge) }, badge.key))) }));
 }

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

@@ -103,7 +103,7 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
     const selectedListingTypes = splitPipe(TABLE_KEYS.LISTING_TYPE);
     return (_jsxs(Div, { children: [listingTypeOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx(FilterFacetSection, { title: "Listing type", options: listingTypeOptions, selected: selectedListingTypes, onChange: (vals) => 
                         // Serialise in the OPTIONS' order, not the order the boxes were
-                        // ticked — `auction|art` and `art|auction` are the same result
+                        // ticked — `collector drop|art` and `art|collector drop` are the same result
                         // set but two different React Query keys and two different URLs.
                         table.set(TABLE_KEYS.LISTING_TYPE, listingTypeOptions
                             .filter((o) => vals.includes(o.value))

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

@@ -100,7 +100,7 @@ export interface ProductFormProps {
     currencyPrefix?: string;
     /**
      * Render a Group Settings panel (GP2). Only passed when editing an existing
-     * non-auction product. Returns null/undefined to omit.
+     * non-collectorDrop product. Returns null/undefined to omit.
      */
     renderGroupSettings?: (product: ProductFormValue) => React.ReactNode;
     /**

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

@@ -21,9 +21,9 @@ import { formatPhysicalLocation } from "../../../utils/physical-location.js";
 import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags.js";
-import { isAuctionListing, isPreOrderListing, isPrizeDrawListing, normalizeListingType, } from "../utils/listing-type.js";
-import { PrizeDrawItemsEditor } from "./PrizeDrawItemsEditor.js";
-import { PRIZE_DRAW_DURATION_DAYS_MIN, PRIZE_DRAW_DURATION_DAYS_MAX, } from "../../../_internal/shared/checkout/rules/_limits.js";
+import { isCollectorDropListing, isPreOrderListing, isClearanceListing, normalizeListingType, } from "../utils/listing-type.js";
+import { ClearanceItemsEditor } from "./ClearanceItemsEditor.js";
+import { CLEARANCE_DURATION_DAYS_MIN, CLEARANCE_DURATION_DAYS_MAX, } from "../../../_internal/shared/checkout/rules/_limits.js";
 const PRIZE_REVEAL_MODE_OPTIONS = [
     { value: "instant", label: "Reveal immediately on purchase" },
     { value: "scheduled", label: "Reveal at expiry or sellout" },
@@ -31,7 +31,7 @@ const PRIZE_REVEAL_MODE_OPTIONS = [
 // ListingType uses the canonical SB1-G spellings ("standard", "pre-order");
 // ProductFeatureProductType predates it with legacy spellings for 2 values.
 // Replaces the old 2-case ternary that silently mapped every other type
-// (classified/digital-code/live/prize-draw/art/stickers) to "product".
+// (classified/digital-code/live/clearance/art/stickers) to "product".
 const LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE = {
     standard: "product",
     /*
@@ -42,14 +42,13 @@ const LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE = {
      * i.e. a brand-new type with no features at all, which reads as a bug.
      */
     spares: "product",
-    auction: "auction",
+    "collector-drop": "collector-drop",
     "pre-order": "preorder",
-    "prize-draw": "prize-draw",
+    "clearance": "clearance",
     classified: "classified",
     "digital-code": "digital-code",
     live: "live",
-    art: "art",
-    stickers: "stickers",
+    "art-and-stickers": "art-and-stickers",
 };
 export const PRODUCT_STATUS_OPTIONS = [
     { value: "draft", label: "Draft" },
@@ -259,29 +258,29 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
                         ] })] }), _jsx(Checkbox, { label: t("formInsurance"), checked: !!product.insurance, onChange: (e) => update({
                     insurance: e.target.checked,
                     insuranceCost: e.target.checked ? product.insuranceCost || 0 : undefined,
-                }), disabled: isReadonly }), product.insurance && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formInsuranceHelp"), children: t("formInsuranceHelp") }), _jsx(FormField, { name: "insuranceCost", label: t("formInsuranceCost"), type: "number", value: String(product.insuranceCost ?? ""), onChange: (value) => update({ insuranceCost: Number(value) }), disabled: isReadonly, placeholder: `${currencyPrefix}0` })] })), listingTypeFlags.auction && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionAuctionSettings") }), _jsx(Checkbox, { label: t("formIsAuction"), checked: isAuctionListing(product), onChange: (e) => update({ listingType: e.target.checked ? "auction" : "standard" }), disabled: isReadonly })] })), isAuctionListing(product) && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: t("formStartingBid"), type: "number", value: String(product.startingBid ?? ""), onChange: (value) => update({ startingBid: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "auctionEndDate", label: t("formAuctionEndDate"), type: "datetime-local", value: (() => {
-                                    const d = resolveDate(product.auctionEndDate);
+                }), disabled: isReadonly }), product.insurance && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formInsuranceHelp"), children: t("formInsuranceHelp") }), _jsx(FormField, { name: "insuranceCost", label: t("formInsuranceCost"), type: "number", value: String(product.insuranceCost ?? ""), onChange: (value) => update({ insuranceCost: Number(value) }), disabled: isReadonly, placeholder: `${currencyPrefix}0` })] })), listingTypeFlags["collector-drop"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionCollectorDropSettings") }), _jsx(Checkbox, { label: t("formIsCollectorDrop"), checked: isCollectorDropListing(product), onChange: (e) => update({ listingType: e.target.checked ? "collector-drop" : "standard" }), disabled: isReadonly })] })), isCollectorDropListing(product) && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: t("formStartingBid"), type: "number", value: String(product.startingBid ?? ""), onChange: (value) => update({ startingBid: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "collectorDropEndDate", label: t("formCollectorDropEndDate"), type: "datetime-local", value: (() => {
+                                    const d = resolveDate(product.collectorDropEndDate);
                                     if (!d)
                                         return "";
                                     return d.toISOString().slice(0, 16);
-                                })(), onChange: (value) => update({ auctionEndDate: value }), disabled: isReadonly })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: t("formReservePrice"), type: "number", value: String(product.reservePrice ?? ""), onChange: (value) => update({ reservePrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formReservePriceHelp") }), _jsx(FormField, { name: "buyNowPrice", label: t("formBuyNowPrice"), type: "number", value: String(product.buyNowPrice ?? ""), onChange: (value) => update({ buyNowPrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formBuyNowPriceHelp") })] }), _jsx(FormField, { name: "minBidIncrement", label: t("formMinBidIncrement"), type: "number", value: String(product.minBidIncrement ?? ""), onChange: (value) => update({ minBidIncrement: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formMinBidIncrementHelp") }), _jsx(FormField, { name: "auctionShippingPaidBy", label: t("formAuctionShippingPaidBy"), type: "select", value: product.auctionShippingPaidBy || "winner", onChange: (value) => update({
-                            auctionShippingPaidBy: value,
+                                })(), onChange: (value) => update({ collectorDropEndDate: value }), disabled: isReadonly })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: t("formReservePrice"), type: "number", value: String(product.reservePrice ?? ""), onChange: (value) => update({ reservePrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formReservePriceHelp") }), _jsx(FormField, { name: "buyNowPrice", label: t("formBuyNowPrice"), type: "number", value: String(product.buyNowPrice ?? ""), onChange: (value) => update({ buyNowPrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formBuyNowPriceHelp") })] }), _jsx(FormField, { name: "minBidIncrement", label: t("formMinBidIncrement"), type: "number", value: String(product.minBidIncrement ?? ""), onChange: (value) => update({ minBidIncrement: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formMinBidIncrementHelp") }), _jsx(FormField, { name: "collectorDropShippingPaidBy", label: t("formCollectorDropShippingPaidBy"), type: "select", value: product.collectorDropShippingPaidBy || "winner", onChange: (value) => update({
+                            collectorDropShippingPaidBy: value,
                         }), disabled: isReadonly, options: [
-                            { value: "winner", label: t("formAuctionShippingPaidByWinner") },
-                            { value: "seller", label: t("formAuctionShippingPaidBySeller") },
-                        ] }), _jsx(Text, { variant: "secondary", weight: "semibold", className: "mt-2", children: t("sectionAuctionAdvanced") }), _jsx(Checkbox, { label: t("formAutoExtendable"), checked: !!product.autoExtendable, onChange: (e) => update({ autoExtendable: e.target.checked }), disabled: isReadonly }), product.autoExtendable && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAutoExtendableHelp"), children: t("formAutoExtendableHelp") }), _jsx(FormField, { name: "auctionExtensionMinutes", label: t("formAuctionExtensionMinutes"), type: "number", value: String(product.auctionExtensionMinutes ?? 5), onChange: (value) => update({ auctionExtensionMinutes: Number(value) || 5 }), disabled: isReadonly, placeholder: "5", helpText: t("formAuctionExtensionMinutesHelp") })] }))] })), listingTypeFlags["pre-order"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionPreOrderSettings") }), _jsx(Checkbox, { label: t("formIsPreOrder"), checked: isPreOrderListing(product), onChange: (e) => update({ listingType: e.target.checked ? "pre-order" : "standard" }), disabled: isReadonly })] })), listingTypeFlags["prize-draw"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: "Prize Draw Settings" }), _jsx(Checkbox, { label: "This is a prize-draw listing", checked: isPrizeDrawListing(product), onChange: (e) => update({ listingType: e.target.checked ? "prize-draw" : "standard" }), disabled: isReadonly ||
-                            (product.prizeDrawItems ?? []).some((it) => it.isWon) })] })), isPrizeDrawListing(product) && ((() => {
+                            { value: "winner", label: t("formCollectorDropShippingPaidByWinner") },
+                            { value: "seller", label: t("formCollectorDropShippingPaidBySeller") },
+                        ] }), _jsx(Text, { variant: "secondary", weight: "semibold", className: "mt-2", children: t("sectionCollectorDropAdvanced") }), _jsx(Checkbox, { label: t("formAutoExtendable"), checked: !!product.autoExtendable, onChange: (e) => update({ autoExtendable: e.target.checked }), disabled: isReadonly }), product.autoExtendable && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAutoExtendableHelp"), children: t("formAutoExtendableHelp") }), _jsx(FormField, { name: "collectorDropExtensionMinutes", label: t("formCollectorDropExtensionMinutes"), type: "number", value: String(product.collectorDropExtensionMinutes ?? 5), onChange: (value) => update({ collectorDropExtensionMinutes: Number(value) || 5 }), disabled: isReadonly, placeholder: "5", helpText: t("formCollectorDropExtensionMinutesHelp") })] }))] })), listingTypeFlags["pre-order"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionPreOrderSettings") }), _jsx(Checkbox, { label: t("formIsPreOrder"), checked: isPreOrderListing(product), onChange: (e) => update({ listingType: e.target.checked ? "pre-order" : "standard" }), disabled: isReadonly })] })), listingTypeFlags["clearance"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: "Clearance Settings" }), _jsx(Checkbox, { label: "This is a clearance listing", checked: isClearanceListing(product), onChange: (e) => update({ listingType: e.target.checked ? "clearance" : "standard" }), disabled: isReadonly ||
+                            (product.prizeDrawItems ?? []).some((it) => it.isWon) })] })), isClearanceListing(product) && ((() => {
                 const prizeItems = (product.prizeDrawItems ?? []);
                 const anyWon = prizeItems.some((it) => it.isWon);
                 const lockedForReveal = anyWon;
                 const fieldDisabled = isReadonly || lockedForReveal;
-                return (_jsxs(_Fragment, { children: [lockedForReveal ? (_jsx(Alert, { variant: "error", title: "Listing locked", children: "At least one prize has been revealed for this draw \u2014 the listing and its fields are now frozen. To rerun a similar draw, clone it into a new prize-draw listing." })) : null, _jsx(Alert, { variant: "warning", title: "Non-refundable", children: "Prize-draw entries are non-refundable once purchased. Buyers see and must accept this notice before paying." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "pricePerEntry", label: "Price per entry (\u20B9)", type: "number", value: product.pricePerEntry != null
+                return (_jsxs(_Fragment, { children: [lockedForReveal ? (_jsx(Alert, { variant: "error", title: "Listing locked", children: "At least one prize has been revealed for this draw \u2014 the listing and its fields are now frozen. To rerun a similar draw, clone it into a new clearance listing." })) : null, _jsx(Alert, { variant: "warning", title: "Non-refundable", children: "Clearance entries are non-refundable once purchased. Buyers see and must accept this notice before paying." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "pricePerEntry", label: "Price per entry (\u20B9)", type: "number", value: product.pricePerEntry != null
                                         ? String(product.pricePerEntry)
                                         : "", onChange: (value) => update({
                                         pricePerEntry: Math.round((parseFloat(value) || 0) * 100) / 100,
-                                    }), disabled: fieldDisabled, placeholder: "299" }), _jsx(FormField, { name: "prizeMaxEntries", label: "Max entries (pool size)", type: "number", value: String(product.prizeMaxEntries ?? ""), onChange: (value) => update({ prizeMaxEntries: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "100" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeDrawDurationDays", label: "Draw duration (days)", type: "number", value: String(product.prizeDrawDurationDays ?? ""), onChange: (value) => update({ prizeDrawDurationDays: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "7", helpText: `Draw runs this many days from publish, or until sold out — whichever comes first. ${PRIZE_DRAW_DURATION_DAYS_MIN}–${PRIZE_DRAW_DURATION_DAYS_MAX} days.` }), _jsx(FormField, { name: "prizeRevealMode", label: "Reveal mode", type: "select", value: product.prizeRevealMode ?? "scheduled", onChange: (value) => update({ prizeRevealMode: value }), disabled: fieldDisabled, options: PRIZE_REVEAL_MODE_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "maxPerUser", label: "Max entries per customer (blank = unlimited)", type: "number", value: String(product.maxPerUser ?? ""), onChange: (value) => update({ maxPerUser: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "" }), _jsx(Div, {})] }), product.prizeGithubFileUrl ? (_jsx(FormField, { name: "prizeGithubFileUrl", label: "RNG Source Code URL (read-only)", type: "text", value: product.prizeGithubFileUrl, onChange: () => { }, disabled: true, helpText: "Auto-set on first save. Public proof-of-fairness link." })) : null, _jsx(PrizeDrawItemsEditor, { items: (product.prizeDrawItems ?? []), onChange: (items) => update({ prizeDrawItems: items }), onUploadImage: (file) => 
+                                    }), disabled: fieldDisabled, placeholder: "299" }), _jsx(FormField, { name: "prizeMaxEntries", label: "Max entries (pool size)", type: "number", value: String(product.prizeMaxEntries ?? ""), onChange: (value) => update({ prizeMaxEntries: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "100" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeDrawDurationDays", label: "Draw duration (days)", type: "number", value: String(product.prizeDrawDurationDays ?? ""), onChange: (value) => update({ prizeDrawDurationDays: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "7", helpText: `Draw runs this many days from publish, or until sold out — whichever comes first. ${CLEARANCE_DURATION_DAYS_MIN}–${CLEARANCE_DURATION_DAYS_MAX} days.` }), _jsx(FormField, { name: "prizeRevealMode", label: "Reveal mode", type: "select", value: product.prizeRevealMode ?? "scheduled", onChange: (value) => update({ prizeRevealMode: value }), disabled: fieldDisabled, options: PRIZE_REVEAL_MODE_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "maxPerUser", label: "Max entries per customer (blank = unlimited)", type: "number", value: String(product.maxPerUser ?? ""), onChange: (value) => update({ maxPerUser: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "" }), _jsx(Div, {})] }), product.prizeGithubFileUrl ? (_jsx(FormField, { name: "prizeGithubFileUrl", label: "RNG Source Code URL (read-only)", type: "text", value: product.prizeGithubFileUrl, onChange: () => { }, disabled: true, helpText: "Auto-set on first save. Public proof-of-fairness link." })) : null, _jsx(ClearanceItemsEditor, { items: (product.prizeDrawItems ?? []), onChange: (items) => update({ prizeDrawItems: items }), onUploadImage: (file) => 
                             // Caller is expected to wire a real uploader by overriding
-                            // renderPrizeDrawImageUpload — fall back to data URL preview
+                            // renderClearanceImageUpload — fall back to data URL preview
                             // so the editor still functions in unwired admin contexts.
                             readFileAsDataUrl(file) })] }));
             })()), isPreOrderListing(product) && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "preOrderDeliveryDate", label: t("formPreOrderDeliveryDate"), type: "datetime-local", value: (() => {
@@ -306,12 +305,12 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
                     value: product.pickupAddressId || "",
                     onChange: (value) => update({ pickupAddressId: value }),
                     disabled: isReadonly,
-                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(SublistingCategorySelect, { value: product.sublistingCategoryId ?? "", onChange: (id) => update({ sublistingCategoryId: id || undefined }), disabled: isReadonly, allowCreate: true }), !isAuctionListing(product) && renderGroupJoinField?.({
+                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(SublistingCategorySelect, { value: product.sublistingCategoryId ?? "", onChange: (id) => update({ sublistingCategoryId: id || undefined }), disabled: isReadonly, allowCreate: true }), !isCollectorDropListing(product) && renderGroupJoinField?.({
                 label: "Group (optional)",
                 value: product.groupId,
                 onChange: (id) => update({ groupId: id || undefined }),
                 disabled: isReadonly,
-            }), !isAuctionListing(product) && renderGroupSettings?.(product), _jsx(ProductFeaturesSelector, { value: product.features ?? [], onChange: (features) => update({ features }), productType: LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE[normalizeListingType(product)], storeId: product.storeId, disabled: isReadonly }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Custom Sections" }), _jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsxs(Div, { children: [_jsx(Toggle, { checked: !isFinalSale(product), onChange: (checked) => update({ finalSale: !checked }), disabled: isReadonly, label: "Accept change-of-mind returns" }), _jsx(Text, { className: "mt-1", size: "xs", color: "muted", children: isFinalSale(product)
+            }), !isCollectorDropListing(product) && renderGroupSettings?.(product), _jsx(ProductFeaturesSelector, { value: product.features ?? [], onChange: (features) => update({ features }), productType: LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE[normalizeListingType(product)], storeId: product.storeId, disabled: isReadonly }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Custom Sections" }), _jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsxs(Div, { children: [_jsx(Toggle, { checked: !isFinalSale(product), onChange: (checked) => update({ finalSale: !checked }), disabled: isReadonly, label: "Accept change-of-mind returns" }), _jsx(Text, { className: "mt-1", size: "xs", color: "muted", children: isFinalSale(product)
                             ? "Final sale (default). Not-received, damaged, wrong-item, not-as-described and counterfeit claims are still accepted."
                             : "Buyers can return this listing within the platform return window for any reason." })] }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Physical Inventory" }), existingLocation ? (_jsxs(Text, { className: "mb-3", color: "muted", size: "xs", children: ["Legacy location on this listing: ", _jsx(Span, { weight: "semibold", children: existingLocation }), ". It is still printed on labels, but it is free text with no box behind it \u2014 place this item in a storage box to replace it."] })) : (_jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Where this item is stored is recorded by placing it in a storage box, not typed here \u2014 a placement has a quantity, and one product can sit in two boxes. Use the receive station or the box's own page." }))] }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
 }