@mohasinac/appkit 4.33.1 → 4.34.1

package/dist/features/auctions/components/AuctionDetailPageView.js

@@ -39,6 +39,7 @@ import { computeRelatedItems } from "../../../_internal/server/features/products
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
 import { SublistingCarouselSection } from "../../products/components/SublistingCarouselSection";
+import { isFinalSale } from "../../products/constants/final-sale";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -46,8 +47,8 @@ function toDescriptionHtml(raw) {
     return normalizeRichTextHtml(s);
 }
 function renderAuctionInfoPanel(props) {
-    const { productId, title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, buyNowAvailable, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
-    return (_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_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsx(LiveBidPrice, { productId: productId, currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "2xl", badgeSize: "sm" }), endDate && !isEnded && (_jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: ["Ends in ", _jsx(Span, { weight: "medium", color: "muted", children: _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" }) })] })), endDate && _jsxs(Text, { className: "mt-0.5", color: "faint", size: "xs", children: [isEnded ? "Ended" : "Ends", " ", endDate.toLocaleString()] })] }), buyNowAvailable && buyNowPrice !== null && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) }), _jsx(Span, { size: "xs", color: "faint", children: "\u2014 in \u201CPlace a bid\u201D" })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, labels: { featured: "Featured", fasterDelivery: "Faster Delivery", ratedSeller: "Rated Seller", condition: "Condition", conditionNew: "New", conditionUsed: "Used", conditionBroken: "For Parts", conditionRefurbished: "Refurbished", returnable: "Returnable", freeShipping: "Free Shipping", codAvailable: "Cash on Delivery", emiAvailable: "EMI Available", wishlistCount: (n) => `${n} wishlisted`, categoryProductCount: (n, cat) => `${n} in ${cat}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[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: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), 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 })] })), 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 item" }), _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" }), 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: "Listed 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" })] }) }))] }));
+    const { productId, title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, buyNowAvailable, featured, freeShipping, condition, finalSale, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
+    return (_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_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsx(LiveBidPrice, { productId: productId, currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "2xl", badgeSize: "sm" }), endDate && !isEnded && (_jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: ["Ends in ", _jsx(Span, { weight: "medium", color: "muted", children: _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" }) })] })), endDate && _jsxs(Text, { className: "mt-0.5", color: "faint", size: "xs", children: [isEnded ? "Ended" : "Ends", " ", endDate.toLocaleString()] })] }), buyNowAvailable && buyNowPrice !== null && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) }), _jsx(Span, { size: "xs", color: "faint", children: "\u2014 in \u201CPlace a bid\u201D" })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, 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}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[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: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), 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 })] })), 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 item" }), _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" }), 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: "Listed 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" })] }) }))] }));
 }
 /**
  * Store reviews for the auction's seller.
@@ -215,7 +216,7 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
                     price: typeof p.price === "number" ? p.price : undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: typeof p.storeName === "string" ? p.storeName : undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: CLS_BREADCRUMB_LINK, children: "Auctions" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AuctionDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title })), renderInfo: () => renderAuctionInfoPanel({ productId: String(product.id), title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, buyNowAvailable, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref }), renderBidForm: () => onPlaceBid ? (_jsx(Stack, { id: "auction-bid-form", gap: "3", children: _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "xl", badgeSize: "xs" }), !isEnded && (_jsx(LiveMinIncrement, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, tiers: bidIncrementTiers, minBidIncrementOverride: minBidIncrementOverride }))] }), !isEnded && endDate && (_jsxs(Text, { align: "center", size: "xs", color: "muted", children: ["Ends in ", _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" })] })), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, tiers: bidIncrementTiers, minBidIncrementOverride: minBidIncrementOverride, currency: currency, isEnded: isEnded, auctionEndDate: endDate, buyNowPrice: buyNowPrice, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] }) })) : (
+                } }), _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", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: CLS_BREADCRUMB_LINK, children: "Auctions" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AuctionDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title })), renderInfo: () => renderAuctionInfoPanel({ productId: String(product.id), title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, buyNowAvailable, featured, freeShipping, condition, finalSale: isFinalSale(p), category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref }), renderBidForm: () => onPlaceBid ? (_jsx(Stack, { id: "auction-bid-form", gap: "3", children: _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "xl", badgeSize: "xs" }), !isEnded && (_jsx(LiveMinIncrement, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, tiers: bidIncrementTiers, minBidIncrementOverride: minBidIncrementOverride }))] }), !isEnded && endDate && (_jsxs(Text, { align: "center", size: "xs", color: "muted", children: ["Ends in ", _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" })] })), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, tiers: bidIncrementTiers, minBidIncrementOverride: minBidIncrementOverride, currency: currency, isEnded: isEnded, auctionEndDate: endDate, buyNowPrice: buyNowPrice, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] }) })) : (
                         /* Read-only bid panel — shown when no bid action is wired (preview/demo) */
                         _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsx(Stack, { gap: "xs", children: _jsxs(Text, { size: "xs", color: "muted", children: ["Starting bid: ", formatCurrency(startingBid, currency), !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(initialMinBidIncrement, currency)] })] }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "number", placeholder: `At least ${formatCurrency(initialMinBid, currency)}`, min: initialMinBid, "aria-label": "Your bid amount", disabled: isEnded }), !isEnded && endDate && (_jsxs(Text, { align: "center", size: "xs", color: "muted", children: ["Ends in ", _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" })] })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded, children: isEnded ? "Auction Ended" : "Place Bid" }), buyNowAvailable && buyNowPrice !== null && (_jsxs(Text, { align: "center", size: "xs", color: "muted", children: ["Buy Now available at ", formatCurrency(buyNowPrice, currency)] }))] }), tags.length > 0 && (_jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: tag }, tag))) }) }))] })), renderMobileBidForm: () => !isEnded && onPlaceBid ? (_jsxs(Stack, { className: `lg:hidden ${__P.p4}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "base", badgeSize: "xs" }), endDate && (_jsxs(Text, { align: "center", size: "xs", color: "muted", children: ["Ends in ", _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" })] })), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, tiers: bidIncrementTiers, minBidIncrementOverride: minBidIncrementOverride, currency: currency, isEnded: isEnded, auctionEndDate: endDate, buyNowPrice: buyNowPrice, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] })) : !isEnded ? (_jsxs(Div, { className: `${__P.p4} lg:hidden`, border: "subtle", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", className: "mb-3", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), endDate && (_jsxs(Text, { align: "center", className: "mb-3", size: "xs", color: "muted", children: ["Ends in ", _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" })] })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Place Bid" })] })) : null, renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))

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

@@ -69,6 +69,7 @@ export interface UserDocument extends BaseDocument {
     storeStatus?: "pending" | "approved" | "rejected";
     isTester?: boolean;
     canTestAdmin?: boolean;
+    isBot?: boolean;
     publicProfile?: {
         isPublic: boolean;
         showEmail: boolean;

package/dist/features/contact/components/ContactForm.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { z } from "zod";
-import { Button, Div, Form, Heading, Input, Span, Stack, Text, Textarea } from "../../../ui";
-import { useFormShellState, FormShellContext, FormErrorSummary } from "../../../ui/forms";
+import { Button, Div, Heading, Stack, Text } from "../../../ui";
+import { useFormShellState, FormShellContext, FormErrorSummary, FieldInput, FieldTextarea, } from "../../../ui/forms";
+import { SectionForm, useSectionFormNav } from "../../shell";
 const contactFormSchema = z.object({
     name: z.string().min(1, "Name is required"),
     email: z.string().email("Enter a valid email address"),
     subject: z.string().min(1, "Subject is required"),
     message: z.string().min(10, "Message must be at least 10 characters"),
 });
-const CLS_FIELD_ERROR = "text-error";
 const CLS_ERROR_BANNER = "rounded-lg bg-error-surface dark:bg-error-surface border border-error dark:border-error px-[var(--appkit-space-4)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] text-error dark:text-error";
 const INITIAL_FORM = {
     name: "",
@@ -23,30 +23,39 @@ export function ContactForm({ onSubmit, labels = {}, className = "", }) {
     const [form, setForm] = useState(INITIAL_FORM);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [submitted, setSubmitted] = useState(false);
-    const [errors, setErrors] = useState({});
     const [submitError, setSubmitError] = useState(null);
-    const { shellCtx, validate: validateSchema } = useFormShellState(contactFormSchema);
-    useEffect(() => {
-        validateSchema(form);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [form, validateSchema]);
-    const validate = () => {
-        const newErrors = {};
-        if (!form.name.trim())
-            newErrors.name = labels.validationRequired ?? "Required";
-        if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
-            newErrors.email = labels.validationEmail ?? "Valid email required";
-        if (!form.subject.trim())
-            newErrors.subject = labels.validationRequired ?? "Required";
-        if (!form.message.trim() || form.message.length < 10)
-            newErrors.message =
-                labels.validationMessageTooShort ?? "Message too short";
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-    const handleSubmit = useCallback(async (e) => {
-        e.preventDefault();
-        if (!validate())
+    const update = useCallback((partial) => setForm((f) => ({ ...f, ...partial })), []);
+    /*
+     * One section, `required` — so after the 2026-09-04 collapse fix it renders
+     * as a plain heading with no chevron and cannot be hidden. A contact form
+     * has nothing optional to fold away; the section exists to give the fields
+     * an owner for error attribution, not to be collapsible.
+     */
+    const sections = useMemo(() => [
+        {
+            id: "message",
+            label: labels.title ?? "Send us a message",
+            required: true,
+            fields: ["name", "email", "subject", "message"],
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "name", label: labels.nameLabel ?? "Your Name", required: true, value: values.name, onChange: (v) => onChange({ name: v }), placeholder: labels.namePlaceholder ?? "Enter your name" }), _jsx(FieldInput, { name: "email", type: "email", label: labels.emailLabel ?? "Email", required: true, value: values.email, onChange: (v) => onChange({ email: v }), placeholder: labels.emailPlaceholder ?? "your@email.com" }), _jsx(FieldInput, { name: "subject", label: labels.subjectLabel ?? "Subject", required: true, value: values.subject, onChange: (v) => onChange({ subject: v }), placeholder: labels.subjectPlaceholder ?? "How can we help?" }), _jsx(FieldTextarea, { name: "message", label: labels.messageLabel ?? "Message", required: true, rows: 5, value: values.message, onChange: (v) => onChange({ message: v }), placeholder: labels.messagePlaceholder ?? "Tell us more…" })] })),
+        },
+    ], [labels]);
+    const nav = useSectionFormNav(sections, form);
+    const { shellCtx, validate: validateSchema } = useFormShellState(contactFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const handleSubmit = useCallback(async () => {
+        /*
+         * The hand-rolled `validate()` this replaces re-stated every rule the
+         * schema already had — required-ness, the email regex, the 10-character
+         * minimum — in a second place that could drift from it, and wrote the
+         * results into a `useState` errors map instead of the form context
+         * (Rule #9.2 and #9.4). `validateSchema` parses and pipes the issues to
+         * the fields, which is the same check the submit gate now uses.
+         */
+        if (!validateSchema(form))
             return;
         setIsSubmitting(true);
         setSubmitError(null);
@@ -64,12 +73,18 @@ export function ContactForm({ onSubmit, labels = {}, className = "", }) {
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [form, onSubmit, labels]);
+    [form, onSubmit, labels, validateSchema]);
     if (submitted) {
         return (_jsxs(Div, { className: `text-center ${className}`, padding: "y-3xl", children: [_jsx(Div, { textSize: "5xl", className: "mb-4", children: "\u2705" }), _jsx(Heading, { level: 2, className: "mb-2", children: labels.successTitle ?? "Message Sent!" }), _jsx(Text, { variant: "secondary", className: "mb-6", children: labels.successDescription ?? "We'll get back to you shortly." }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setSubmitted(false), children: labels.sendAnotherButton ?? "Send another message" })] }));
     }
-    const field = (id, label, placeholder, multiline) => (_jsxs(Stack, { gap: "xs", children: [_jsx("label", { htmlFor: id, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)]", children: label }), multiline ? (_jsx(Textarea, { id: id, value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, rows: 5, className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] outline-none focus:ring-2 ring-primary/20 transition" })) : (_jsx(Input, { id: id, type: id === "email" ? "email" : "text", value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, className: "h-10" })), errors[id] && _jsx(Span, { size: "xs", className: CLS_FIELD_ERROR, children: errors[id] })] }));
-    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: handleSubmit, noValidate: true, className: className, spacing: "md", children: [_jsx(Heading, { level: 2, className: "mb-6", children: labels.title ?? "Send us a message" }), submitError && (_jsx(Div, { className: CLS_ERROR_BANNER, children: submitError })), field("name", labels.nameLabel ?? "Your Name", labels.namePlaceholder ?? "Enter your name"), field("email", labels.emailLabel ?? "Email", labels.emailPlaceholder ?? "your@email.com"), field("subject", labels.subjectLabel ?? "Subject", labels.subjectPlaceholder ?? "How can we help?"), field("message", labels.messageLabel ?? "Message", labels.messagePlaceholder ?? "Tell us more…", true), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "submit", variant: "primary", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "md", className: className, children: [submitError && _jsx(Div, { className: CLS_ERROR_BANNER, children: submitError }), _jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: update, onSubmit: handleSubmit, schema: contactFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isSubmitting
                         ? (labels.submittingButton ?? "Sending…")
-                        : (labels.submitButton ?? "Send Message") })] }) }));
+                        : (labels.submitButton ?? "Send Message"), 
+                    /*
+                     * No pinned mobile bar. This form is embedded in a marketing page
+                     * beside other content rather than owning the screen, so a Save bar
+                     * fixed to the bottom of the viewport would follow the visitor
+                     * around the rest of the page.
+                     */
+                    bottomBar: false })] }) }));
 }

package/dist/features/media/upload/MediaUploadList.d.ts

@@ -7,6 +7,21 @@ export interface MediaUploadListProps {
     accept?: string;
     maxSizeMB?: number;
     maxItems?: number;
+    /**
+     * Per-TYPE ceilings, counted separately.
+     *
+     * `maxItems` alone cannot express "10 images and 1 video" — it is one
+     * number over a mixed list, so a buyer-facing rule of that shape had to be
+     * enforced by splitting the control in two, which is why product forms
+     * carried a gallery AND a separate single-video field that wrote a
+     * different part of the document.
+     *
+     * When either is set the matching type is counted on its own and `maxItems`
+     * becomes the overall backstop. Existing callers that pass neither are
+     * completely unaffected.
+     */
+    maxImages?: number;
+    maxVideos?: number;
     disabled?: boolean;
     helperText?: string;
     /**
@@ -23,4 +38,4 @@ export interface MediaUploadListProps {
      */
     isPersisted?: boolean;
 }
-export declare function MediaUploadList({ label, value, onChange, onUpload, accept, maxSizeMB, maxItems, disabled, helperText, onAbort, onStagedUrlsChange, isPersisted, }: MediaUploadListProps): import("react").JSX.Element;
+export declare function MediaUploadList({ label, value, onChange, onUpload, accept, maxSizeMB, maxItems, maxImages, maxVideos, disabled, helperText, onAbort, onStagedUrlsChange, isPersisted, }: MediaUploadListProps): import("react").JSX.Element;

package/dist/features/media/upload/MediaUploadList.js

@@ -6,6 +6,7 @@ import { MediaImage } from "../MediaImage";
 import { MediaVideo } from "../MediaVideo";
 import { inferMediaTypeFromMime } from "../types/index";
 import { normalizeError } from "../../../errors/normalize";
+import { toUserMessage } from "../../../errors/error-display-map";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -20,7 +21,7 @@ function fileNameFromUrl(url) {
         return url;
     }
 }
-export function MediaUploadList({ label, value, onChange, onUpload, accept = "image/*,video/*,application/pdf", maxSizeMB = 50, maxItems = 12, disabled = false, helperText, onAbort, onStagedUrlsChange, isPersisted = false, }) {
+export function MediaUploadList({ label, value, onChange, onUpload, accept = "image/*,video/*,application/pdf", maxSizeMB = 50, maxItems = 12, maxImages, maxVideos, disabled = false, helperText, onAbort, onStagedUrlsChange, isPersisted = false, }) {
     const inputRef = useRef(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -69,15 +70,51 @@ export function MediaUploadList({ label, value, onChange, onUpload, accept = "im
             e.currentTarget.value = "";
             return;
         }
+        /*
+         * Per-type ceilings. Counted from the INCOMING batch as well as what is
+         * already there, so selecting five videos at once is refused up front
+         * rather than after four of them have uploaded.
+         *
+         * `inferMediaTypeFromMime` is the same classifier used to tag the item
+         * below, so the count and the stored `type` can never disagree.
+         */
+        if (maxImages != null || maxVideos != null) {
+            const incoming = files.map((f) => inferMediaTypeFromMime(f.type, f.name));
+            const countOf = (t) => value.filter((v) => v.type === t).length + incoming.filter((v) => v === t).length;
+            if (maxImages != null && countOf("image") > maxImages) {
+                setError(`You can upload up to ${maxImages} image${maxImages === 1 ? "" : "s"}.`);
+                e.currentTarget.value = "";
+                return;
+            }
+            if (maxVideos != null && countOf("video") > maxVideos) {
+                setError(maxVideos === 1
+                    ? "Only one video is allowed. Remove the current one to replace it."
+                    : `You can upload up to ${maxVideos} videos.`);
+                e.currentTarget.value = "";
+                return;
+            }
+        }
         setError(null);
+        /*
+         * Size is checked BEFORE the upload loop, and reported directly rather
+         * than thrown.
+         *
+         * It used to throw into the shared catch, which then rendered
+         * `err.message` — so one branch of that catch was authored copy worth
+         * showing while the other was whatever the network layer happened to
+         * throw. Splitting them lets the useful message survive and the arbitrary
+         * one resolve through `toUserMessage` (Rule #9.6 / Root Cause #86).
+         */
+        const tooBig = files.find((f) => f.size / 1024 / 1024 > maxSizeMB);
+        if (tooBig) {
+            setError(`${tooBig.name} exceeds ${maxSizeMB}MB`);
+            e.currentTarget.value = "";
+            return;
+        }
         setIsLoading(true);
         try {
             const uploaded = [];
             for (const file of files) {
-                const sizeMb = file.size / 1024 / 1024;
-                if (sizeMb > maxSizeMB) {
-                    throw new Error(`${file.name} exceeds ${maxSizeMB}MB`);
-                }
                 const url = await onUpload(file);
                 stageUrl(url);
                 uploaded.push({
@@ -88,8 +125,12 @@ export function MediaUploadList({ label, value, onChange, onUpload, accept = "im
             onChange([...value, ...uploaded]);
         }
         catch (err) {
-            void normalizeError(err);
-            setError(err instanceof Error ? err.message : "Upload failed");
+            const normalized = normalizeError(err);
+            // Never the thrown value's own text: `onUpload` reaches the signed-URL
+            // endpoint, so this is where a server sentence would surface.
+            setError(toUserMessage(normalized.code, undefined, {
+                fallback: "Upload failed. Please try again.",
+            }));
         }
         finally {
             setIsLoading(false);
@@ -107,5 +148,14 @@ export function MediaUploadList({ label, value, onChange, onUpload, accept = "im
             unstageUrl(target.url);
         }
     };
-    return (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { className: "block", color: "muted", size: "sm", weight: "medium", children: label }), value.length > 0 && (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2", children: value.map((item, index) => (_jsxs(Div, { rounded: "lg", padding: "sm", border: "default", surface: "muted", children: [item.type === "video" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden}`, rounded: "lg", children: _jsx(MediaVideo, { src: item.url, alt: item.alt || `Media ${index + 1}`, controls: true }) })) : item.type === "image" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden}`, rounded: "lg", children: _jsx(MediaImage, { src: item.url, alt: item.alt || `Media ${index + 1}`, size: "card", objectFit: "contain" }) })) : (_jsx(Anchor, { href: item.url, tone: "none", underline: "none", className: CLS_PDF_LINK, children: fileNameFromUrl(item.url) })), !disabled && (_jsx(Div, { className: "mt-2", children: _jsx(Button, { type: "button", size: "sm", variant: "danger", onClick: () => removeAt(index), children: "Remove" }) }))] }, `${item.url}-${index}`))) })), !disabled && value.length < maxItems && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => inputRef.current?.click(), disabled: isLoading, children: isLoading ? "Uploading..." : `+ Add Files (${value.length}/${maxItems})` })), isLoading && (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: "Uploading" })] })), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-list-input" }), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error })] }));
+    return (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { className: "block", color: "muted", size: "sm", weight: "medium", children: label }), value.length > 0 && (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2", children: value.map((item, index) => (_jsxs(Div, { rounded: "lg", padding: "sm", border: "default", surface: "muted", children: [item.type === "video" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden}`, rounded: "lg", children: _jsx(MediaVideo, { src: item.url, alt: item.alt || `Media ${index + 1}`, controls: true }) })) : item.type === "image" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden}`, rounded: "lg", children: _jsx(MediaImage, { src: item.url, alt: item.alt || `Media ${index + 1}`, size: "card", objectFit: "contain" }) })) : (_jsx(Anchor, { href: item.url, tone: "none", underline: "none", className: CLS_PDF_LINK, children: fileNameFromUrl(item.url) })), !disabled && (_jsx(Div, { className: "mt-2", children: _jsx(Button, { type: "button", size: "sm", variant: "danger", onClick: () => removeAt(index), children: "Remove" }) }))] }, `${item.url}-${index}`))) })), !disabled && value.length < maxItems && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => inputRef.current?.click(), disabled: isLoading, children: isLoading ? "Uploading..." : `+ Add Files (${value.length}/${maxItems})` })), isLoading && (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: "Uploading" })] })), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-list-input" }), (maxImages != null || maxVideos != null) && (_jsx(Text, { variant: "secondary", size: "xs", children: [
+                    maxImages != null
+                        ? `${value.filter((v) => v.type === "image").length}/${maxImages} images`
+                        : null,
+                    maxVideos != null
+                        ? `${value.filter((v) => v.type === "video").length}/${maxVideos} video${maxVideos === 1 ? "" : "s"}`
+                        : null,
+                ]
+                    .filter(Boolean)
+                    .join(" · ") })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error })] }));
 }

package/dist/features/orders/components/RefundRequestView.d.ts

@@ -1,19 +1,35 @@
 /**
- * RefundRequestView — buyer-facing refund submission form.
+ * RefundRequestView — buyer-facing return / refund request form.
  *
- * Shows 3 acknowledgment checkboxes (via the appkit Checkbox primitive) that
- * the buyer must tick before the submit button becomes active. On submit the
- * parent's `onSubmitRequest` is called with the reason string; the parent
- * (page or modal) is responsible for calling the API.
+ * ## What changed and why
  *
- * This component is presentational: it has no server-action imports and
- * does not talk to the API directly.
+ * This component had **zero call sites** and was grandfathered in
+ * `audit-orphan-view-component`. It also predated three project rules:
+ * it hand-rolled `useState<string | null>` for its error (Rule #9.4), took a
+ * free-text reason with no schema (Rule #9.2), and had no `<FormErrorSummary>`.
+ *
+ * The free-text reason is the substantive change. "Final sale, unless the
+ * buyer didn't get what they paid for" cannot be enforced against prose — the
+ * server needs a coded reason to decide, so the buyer picks one here and the
+ * note is the optional elaboration beside it.
+ *
+ * ## Final sale is a filter, not a wall
+ *
+ * When a line in scope is final sale, this does NOT refuse to render. It says
+ * so, and narrows the picker to the reasons that remain valid. Blocking the
+ * page outright would hide the two claims a final sale can never refuse —
+ * which are exactly the ones a buyer in trouble needs.
  */
 import React from "react";
-import type { OrderDocument } from "../schemas";
+import { type ReturnReason } from "../../../_internal/shared/features/orders/return-reasons";
+import type { Order } from "../types";
+export interface RefundRequestSubmission {
+    reasonCode: ReturnReason;
+    reasonNote?: string;
+}
 export interface RefundRequestViewProps {
-    order: Pick<OrderDocument, "id" | "totalPrice" | "currency" | "isNonRefundable" | "refunds" | "contestable">;
-    onSubmitRequest: (reason: string) => Promise<void>;
+    order: Pick<Order, "id" | "total" | "currency" | "isNonRefundable" | "contestable" | "items">;
+    onSubmitRequest: (submission: RefundRequestSubmission) => Promise<void>;
     isLoading?: boolean;
     className?: string;
 }

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

@@ -1,48 +1,132 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * RefundRequestView — buyer-facing refund submission form.
+ * RefundRequestView — buyer-facing return / refund request form.
  *
- * Shows 3 acknowledgment checkboxes (via the appkit Checkbox primitive) that
- * the buyer must tick before the submit button becomes active. On submit the
- * parent's `onSubmitRequest` is called with the reason string; the parent
- * (page or modal) is responsible for calling the API.
+ * ## What changed and why
  *
- * This component is presentational: it has no server-action imports and
- * does not talk to the API directly.
+ * This component had **zero call sites** and was grandfathered in
+ * `audit-orphan-view-component`. It also predated three project rules:
+ * it hand-rolled `useState<string | null>` for its error (Rule #9.4), took a
+ * free-text reason with no schema (Rule #9.2), and had no `<FormErrorSummary>`.
+ *
+ * The free-text reason is the substantive change. "Final sale, unless the
+ * buyer didn't get what they paid for" cannot be enforced against prose — the
+ * server needs a coded reason to decide, so the buyer picks one here and the
+ * note is the optional elaboration beside it.
+ *
+ * ## Final sale is a filter, not a wall
+ *
+ * When a line in scope is final sale, this does NOT refuse to render. It says
+ * so, and narrows the picker to the reasons that remain valid. Blocking the
+ * page outright would hide the two claims a final sale can never refuse —
+ * which are exactly the ones a buyer in trouble needs.
  */
-import { useState } from "react";
-import { Button, Checkbox, Div, Span, Stack, Text, Textarea } from "../../../ui";
+import { useMemo, useState } from "react";
+import { Alert, Div, Span, Stack, Text, Checkbox, PaginatedSelect } from "../../../ui";
+import { FormShellContext, useFormShellState, FormErrorSummary, FieldTextarea, } from "../../../ui/forms";
+import { SectionForm, useSectionFormNav } from "../../shell";
+import { z } from "zod";
 import { REFUND_COPY } from "../../../_internal/shared/features/orders/refund-copy";
+import { RETURN_REASON_LABEL, selectableReturnReasons, } from "../../../_internal/shared/features/orders/return-reasons";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { normalizeError } from "../../../errors/normalize";
 import { toUserMessage } from "../../../errors/error-display-map";
 const ACK_COUNT = REFUND_COPY.request.acknowledgments.length;
-const CLS_WARN_PANEL = "rounded-xl border border-warning bg-warning-surface p-[var(--appkit-space-4)] dark:border-warning";
 export function RefundRequestView({ order, onSubmitRequest, isLoading = false, className = "", }) {
-    const [acknowledged, setAcknowledged] = useState(Array(ACK_COUNT).fill(false));
-    const [reason, setReason] = useState("");
-    const [error, setError] = useState(null);
-    const allChecked = acknowledged.every(Boolean);
-    const canSubmit = allChecked && reason.trim().length >= 10 && !isLoading;
+    /*
+     * Does anything in this order carry the final-sale term? Read from the
+     * ORDER's own per-line snapshot — the product may have been re-listed on
+     * different terms since, and the buyer agreed to the terms at checkout.
+     */
+    const hasFinalSaleLine = useMemo(() => (order.items ?? []).some((i) => i.finalSale === true), [order.items]);
+    const allowedReasons = useMemo(() => selectableReturnReasons(hasFinalSaleLine), [hasFinalSaleLine]);
+    /*
+     * The schema mirrors the server's `returnRequestSchema`, plus the
+     * acknowledgements, which are a client-side consent gate and are not stored.
+     * `reasonCode` is constrained to the ALLOWED set rather than the full enum,
+     * so a change-of-mind reason cannot be submitted on a final-sale order even
+     * if the option list were bypassed.
+     */
+    const schema = useMemo(() => z.object({
+        reasonCode: z.enum(allowedReasons, {
+            errorMap: () => ({ message: "Choose why you're returning this order." }),
+        }),
+        reasonNote: z.string().max(500).optional(),
+        acknowledged: z
+            .array(z.boolean())
+            .refine((a) => a.every(Boolean), {
+            message: "Please acknowledge all three statements before submitting.",
+        }),
+    }), [allowedReasons]);
+    const [draft, setDraft] = useState({
+        reasonCode: "",
+        reasonNote: "",
+        acknowledged: Array(ACK_COUNT).fill(false),
+    });
+    const update = (partial) => setDraft((prev) => ({ ...prev, ...partial }));
+    const sections = useMemo(() => [
+        {
+            id: "declare",
+            label: "Why are you returning this?",
+            required: true,
+            fields: ["reasonCode", "reasonNote"],
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "sm", color: "muted", children: [REFUND_COPY.request.orderTotalLabel, " ", _jsx(Span, { weight: "bold", children: formatCurrency(order.total, order.currency ?? "INR") })] }), hasFinalSaleLine && (_jsx(Alert, { variant: "warning", title: REFUND_COPY.request.finalSaleNoticeHeading, children: "You can\u2019t return it for a change of mind, but you can still claim if it never arrived, arrived damaged, was the wrong item, wasn\u2019t as described, or is counterfeit. Only those reasons are listed below." })), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [REFUND_COPY.request.reasonSelectLabel, " ", _jsx(Span, { "aria-hidden": true, children: "*" })] }), _jsx(PaginatedSelect, { value: values.reasonCode === "" ? null : values.reasonCode, onChange: (v) => onChange({ reasonCode: v ?? "" }), options: allowedReasons.map((r) => ({
+                                    value: r,
+                                    label: RETURN_REASON_LABEL[r],
+                                })), placeholder: REFUND_COPY.request.reasonSelectPlaceholder, ariaLabel: REFUND_COPY.request.reasonSelectLabel })] }), _jsx(FieldTextarea, { name: "reasonNote", label: REFUND_COPY.request.reasonNoteLabel, value: values.reasonNote, onChange: (v) => onChange({ reasonNote: v }), rows: 3, maxLength: 500, showCharCount: true })] })),
+        },
+        {
+            id: "declare-acknowledgements",
+            label: REFUND_COPY.request.acknowledgeHeading,
+            required: true,
+            fields: ["acknowledged"],
+            render: ({ values, onChange }) => (_jsx(Stack, { gap: "sm", children: REFUND_COPY.request.acknowledgments.map((text, i) => (_jsx(Checkbox, { checked: values.acknowledged[i] ?? false, onChange: () => onChange({
+                        acknowledged: values.acknowledged.map((v, idx) => idx === i ? !v : v),
+                    }), label: _jsx(Text, { size: "sm", className: "leading-snug", children: text }), "aria-label": `Acknowledgment ${i + 1}` }, i))) })),
+        },
+    ], [order.total, order.currency, hasFinalSaleLine, allowedReasons]);
+    const nav = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(schema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    // ── Early returns: states in which no request can be made at all ──────────
     if (order.isNonRefundable) {
-        return (_jsx(Div, { className: `${className}`, rounded: "xl", padding: "md", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", color: "muted", children: REFUND_COPY.request.nonRefundableMessage }) }));
+        return (_jsx(Div, { className: className, rounded: "xl", padding: "md", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", color: "muted", children: REFUND_COPY.request.nonRefundableMessage }) }));
     }
     if (order.contestable === false) {
-        return (_jsx(Div, { className: `${CLS_WARN_PANEL} ${className}`, children: _jsx(Text, { size: "sm", className: "text-warning", children: REFUND_COPY.request.alreadyRefundedMessage }) }));
+        return (_jsx(Alert, { variant: "warning", className: className, children: REFUND_COPY.request.alreadyRefundedMessage }));
     }
-    const handleToggle = (i) => setAcknowledged((prev) => prev.map((v, idx) => (idx === i ? !v : v)));
     const handleSubmit = async () => {
-        setError(null);
+        clearErrors();
+        const parsed = schema.safeParse(draft);
+        if (!parsed.success) {
+            for (const issue of parsed.error.issues) {
+                setFieldError(issue.path.map(String).join("."), issue.message);
+            }
+            return;
+        }
         try {
-            await onSubmitRequest(reason.trim());
+            await onSubmitRequest({
+                reasonCode: parsed.data.reasonCode,
+                ...(parsed.data.reasonNote?.trim()
+                    ? { reasonNote: parsed.data.reasonNote.trim() }
+                    : {}),
+            });
         }
         catch (err) {
             const e = normalizeError(err);
-            setError(toUserMessage(e.code, undefined, {
-                fallback: REFUND_COPY.request.errorFallback,
-            }));
+            /*
+             * Surfaced on the field the server actually rejected. A final-sale
+             * refusal is always about the chosen reason, so putting it on
+             * `reasonCode` puts the message next to the control that fixes it.
+             *
+             * `toUserMessage` and never the raw server text — Rule #9.6.
+             */
+            setFieldError("reasonCode", toUserMessage(e.code, undefined, { fallback: REFUND_COPY.request.errorFallback }));
         }
     };
-    return (_jsxs(Stack, { gap: "md", className: className, children: [_jsxs(Text, { size: "sm", color: "muted", children: [REFUND_COPY.request.orderTotalLabel, " ", _jsx(Span, { weight: "bold", children: formatCurrency(order.totalPrice, order.currency ?? "INR") })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [REFUND_COPY.request.reasonLabel, " ", _jsx(Span, { "aria-hidden": true, children: "*" })] }), _jsx(Textarea, { value: reason, onChange: (e) => setReason(e.target.value), placeholder: REFUND_COPY.request.reasonPlaceholder, rows: 3, "aria-required": "true", "aria-label": REFUND_COPY.request.reasonLabel })] }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", children: REFUND_COPY.request.acknowledgeHeading }), REFUND_COPY.request.acknowledgments.map((text, i) => (_jsx(Checkbox, { checked: acknowledged[i], onChange: () => handleToggle(i), label: _jsx(Text, { size: "sm", className: "leading-snug", children: text }), "aria-label": `Acknowledgment ${i + 1}` }, i)))] }), error && (_jsx(Text, { size: "sm", color: "danger", role: "alert", children: error })), _jsx(Button, { variant: "danger", onClick: handleSubmit, disabled: !canSubmit, "aria-busy": isLoading, children: isLoading ? REFUND_COPY.request.submittingLabel : REFUND_COPY.request.submitLabel })] }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { gap: "md", className: className, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: handleSubmit, schema: schema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: REFUND_COPY.request.submitLabel, isLoading: isLoading })] }) }));
 }