@mohasinac/appkit 4.9.5 → 4.11.0

package/dist/features/categories/components/CategoryDetailPageView.js

@@ -8,6 +8,9 @@ import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../.
 import { MediaImage } from "../../media/MediaImage";
 import { CategoryDetailTabs } from "./CategoryDetailTabs";
 import { CategoryGrid } from "./CategoryGrid";
+import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsForCategory } from "../../../_internal/server/features/grouped/data";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
@@ -25,7 +28,7 @@ export async function CategoryDetailPageView({ slug }) {
         ? await categoriesRepository.getDescendantIds(category.id).catch(() => [])
         : [];
     const categoriesIn = category?.id ? [category.id, ...descendantIds] : null;
-    const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories, rootSiblingCategories] = await Promise.all([
+    const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories, rootSiblingCategories, groupedListings] = await Promise.all([
         categoriesIn
             ? productRepository
                 .list({
@@ -82,6 +85,7 @@ export async function CategoryDetailPageView({ slug }) {
         category?.rootId
             ? categoriesRepository.getCategoriesByRootId(category.rootId).catch(() => [])
             : Promise.resolve([]),
+        category?.slug ? getGroupsForCategory(category.slug).catch(() => []) : Promise.resolve([]),
     ]);
     const relatedCategories = rootSiblingCategories.filter((c) => c.id !== category?.id && (!c.categoryType || c.categoryType === "category"));
     // Stores tab — query stores whose storeCategory matches this category or any child
@@ -126,7 +130,7 @@ export async function CategoryDetailPageView({ slug }) {
     const storeCount = categoryStores.length;
     const coverImage = category?.display?.coverImage;
     const hasCover = Boolean(coverImage);
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: _jsx(Div, { layout: "flex", gap: "2", className: `.5 ${__O.xAuto} [scrollbar-width:none]`, padding: "b-2xs", children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), 
+    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: _jsx(Div, { layout: "flex", gap: "2", className: `.5 ${__O.xAuto} [scrollbar-width:none]`, padding: "b-2xs", children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), 
                             // audit-responsive-wrap-ok: deliberate horizontal-scroll chip row (parent has overflow-x-auto) — each chip staying single-line is the intended design, not hidden content
                             className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1-5)] rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] px-[var(--appkit-space-4)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", color: "muted", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: {
                             products: productCount,
@@ -135,5 +139,5 @@ export async function CategoryDetailPageView({ slug }) {
                             prizeDraws: prizeDrawCount,
                             bundles: bundleCount,
                             stores: storeCount,
-                        } }) }) }), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
+                        } }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
 }

package/dist/features/categories/components/CategoryHighlightsAndFaqSection.d.ts

@@ -0,0 +1,14 @@
+export interface CategoryHighlightsAndFaqSectionProps {
+    highlights?: string[];
+    faqs?: {
+        question: string;
+        answer: string;
+    }[];
+}
+/**
+ * Shared "why shop here" highlights + FAQ accordion, rendered on both
+ * category and brand detail pages — the only editorial content either page
+ * has beyond a one-line description (see CategoryDisplay's field list).
+ * Renders nothing when both arrays are empty/absent.
+ */
+export declare function CategoryHighlightsAndFaqSection({ highlights, faqs }: CategoryHighlightsAndFaqSectionProps): import("react").JSX.Element | null;

package/dist/features/categories/components/CategoryHighlightsAndFaqSection.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Heading, Li, Section, Span, Stack, Ul } from "../../../ui";
+import { FAQAccordion } from "../../faq/components/FAQAccordion";
+/**
+ * Shared "why shop here" highlights + FAQ accordion, rendered on both
+ * category and brand detail pages — the only editorial content either page
+ * has beyond a one-line description (see CategoryDisplay's field list).
+ * Renders nothing when both arrays are empty/absent.
+ */
+export function CategoryHighlightsAndFaqSection({ highlights, faqs }) {
+    const hasHighlights = Boolean(highlights && highlights.length > 0);
+    const hasFaqs = Boolean(faqs && faqs.length > 0);
+    if (!hasHighlights && !hasFaqs)
+        return null;
+    const faqItems = (faqs ?? []).map((f, i) => ({
+        id: `faq-${i}`,
+        question: f.question,
+        answer: { text: f.answer, format: "plain" },
+        category: "general",
+    }));
+    return (_jsx(Section, { padding: "y-lg", border: "subtle", className: "border-t", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "xl", children: [hasHighlights && (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: "Why shop here" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: highlights.map((h, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), h] }, i))) })] })), hasFaqs && (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: "Frequently Asked Questions" }), _jsx(FAQAccordion, { faqs: faqItems })] }))] }) }) }));
+}

package/dist/features/categories/components/CategoryProductsView.d.ts

@@ -9,10 +9,6 @@ export interface CategoryProductsViewProps {
     initialCategory?: CategoryItem;
     /** Initial SSR child categories */
     initialChildren?: CategoryItem[];
-    labels?: {
-        emptyTitle?: string;
-        emptyDescription?: string;
-    };
     /** Optional UrlTable-compatible state source for shared filter/sort controls */
     table?: UrlTable;
     /** Filter/sort preset for admin/seller/public listing behavior */
@@ -46,4 +42,4 @@ export interface CategoryProductsViewProps {
     isLoading?: boolean;
     className?: string;
 }
-export declare function CategoryProductsView({ labels: _labels, table, filterVariant, sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category, children: childCategories, total, isLoading, className, }: CategoryProductsViewProps): React.JSX.Element;
+export declare function CategoryProductsView({ table, filterVariant, sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category, children: childCategories, total, isLoading, className, }: CategoryProductsViewProps): React.JSX.Element;

package/dist/features/categories/components/CategoryProductsView.js

@@ -4,7 +4,7 @@ import React from "react";
 import { Div, Heading, Input, SlottedListingView, Stack, Text } from "../../../ui";
 import { CategoryFilters } from "./CategoryFilters";
 import { CategorySortSelect } from "./CategorySortSelect";
-export function CategoryProductsView({ labels: _labels = {}, table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
+export function CategoryProductsView({ table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
     const [search, setSearch] = React.useState("");
     const [sort, setSort] = React.useState("-createdAt");
     const [viewMode, setViewMode] = React.useState("grid");

package/dist/features/categories/components/CategorySelectorCreate.js

@@ -1,12 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Div, Label, Row, Select, SideDrawer } from "../../../ui";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
+import { z } from "zod";
 import { useCategories, useCreateCategory } from "../hooks/useCategorySelector";
 import { useMessage } from "../../../react";
 import { flattenCategories } from "../types";
 import { DrawerFormFooter } from "../../admin/components/DrawerFormFooter";
 import { CategoryForm } from "./CategoryForm";
+import { useFormShellState, FormShellContext, FormErrorSummary } from "../../../ui/forms";
+// Form-input subset — `categoryFirestoreSchema` (categories schemas) models
+// the full stored document (id, timestamps, computed metrics) which this
+// create-draft never has.
+const categoryDraftSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    slug: z.string().optional(),
+});
 const DEFAULT_LABELS = {
     selectPlaceholder: "Select category…",
     addCategory: "+ Add category",
@@ -21,6 +30,11 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
         parentId: null,
         order: 0,
     });
+    const { shellCtx, validate } = useFormShellState(categoryDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     const { mutate, isPending: isLoading } = useCreateCategory({
         onSuccess: (res) => {
             showSuccess(labels.successCreated);
@@ -33,7 +47,7 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
             return;
         mutate(draft);
     }, [draft, mutate]);
-    return (_jsxs(Div, { className: stackClassName, children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Div, { className: stackClassName, children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(FormErrorSummary, {}), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }) }));
 }
 export function CategorySelectorCreate({ value, onChange, disabled = false, label, labels = {}, stackClassName = "space-y-4", }) {
     const [drawerOpen, setDrawerOpen] = useState(false);

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

@@ -125,8 +125,16 @@ export interface CategoryDocument extends BaseDocument {
     brandCountry?: string;
     /** Brand founding year — categoryType==="brand". */
     brandFounded?: number;
-    /** Banner image for the brand storefront page — categoryType==="brand". */
-    brandBannerImage?: string;
+    /**
+     * Short bullet points — "why shop this category/brand." Category and
+     * brand detail pages only; renders nothing when absent/empty.
+     */
+    highlights?: string[];
+    /** A handful of Q&A pairs shown on the category/brand detail page. */
+    faqs?: {
+        question: string;
+        answer: string;
+    }[];
     /**
      * "special" — admin-curated bundle; writes reverse `partOfBundleIds`
      * pointers on member products and shows the "Bundled" badge on cards.
@@ -135,6 +143,15 @@ export interface CategoryDocument extends BaseDocument {
      * Does NOT update `partOfBundleIds`; used as a discovery surface only.
      */
     bundleKind?: "special" | "brand";
+    /**
+     * Which brand this bundle belongs to, for the brand detail page's bundle
+     * tab — works for both `bundleKind:"special"` (static) and `"brand"`
+     * (dynamic) bundles. Distinct from `bundleQueryRule.filter.brandSlug`,
+     * which is a dynamic-rule query *filter* (only meaningful when
+     * `bundleQueryRule.type==="dynamic"`) — this field is the bundle's own
+     * brand tag regardless of how its members are resolved.
+     */
+    brandSlug?: string;
     /** Discounted bundle price in decimal rupees. */
     bundlePrice?: number;
     /** Rule resolving the bundle's member products — static list or live query. */

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

@@ -229,8 +229,19 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
     brandWebsite: z.ZodOptional<z.ZodString>;
     brandCountry: z.ZodOptional<z.ZodString>;
     brandFounded: z.ZodOptional<z.ZodNumber>;
-    brandBannerImage: z.ZodOptional<z.ZodString>;
+    highlights: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    faqs: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        question: z.ZodString;
+        answer: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        question: string;
+        answer: string;
+    }, {
+        question: string;
+        answer: string;
+    }>, "many">>;
     bundleKind: z.ZodOptional<z.ZodEnum<["special", "brand"]>>;
+    brandSlug: z.ZodOptional<z.ZodString>;
     bundlePrice: z.ZodOptional<z.ZodEffects<z.ZodNumber, number, number>>;
     bundleQueryRule: z.ZodOptional<z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
         type: z.ZodLiteral<"static">;
@@ -419,7 +430,12 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
         name: string;
         tier: number;
     }[];
+    faqs?: {
+        question: string;
+        answer: string;
+    }[] | undefined;
     description?: string | undefined;
+    brandSlug?: string | undefined;
     showOnHomepage?: boolean | undefined;
     categoryType?: "brand" | "category" | "sublisting" | "bundle" | undefined;
     bundleKind?: "brand" | "special" | undefined;
@@ -442,7 +458,7 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
     brandWebsite?: string | undefined;
     brandCountry?: string | undefined;
     brandFounded?: number | undefined;
-    brandBannerImage?: string | undefined;
+    highlights?: string[] | undefined;
     bundlePrice?: number | undefined;
     bundleQueryRule?: {
         type: "static";
@@ -513,7 +529,12 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
         name: string;
         tier: number;
     }[];
+    faqs?: {
+        question: string;
+        answer: string;
+    }[] | undefined;
     description?: string | undefined;
+    brandSlug?: string | undefined;
     showOnHomepage?: boolean | undefined;
     categoryType?: "brand" | "category" | "sublisting" | "bundle" | undefined;
     bundleKind?: "brand" | "special" | undefined;
@@ -536,7 +557,7 @@ export declare const categoryFirestoreSchema: z.ZodObject<{
     brandWebsite?: string | undefined;
     brandCountry?: string | undefined;
     brandFounded?: number | undefined;
-    brandBannerImage?: string | undefined;
+    highlights?: string[] | undefined;
     bundlePrice?: number | undefined;
     bundleQueryRule?: {
         type: "static";

package/dist/features/categories/schemas/index.js

@@ -76,8 +76,10 @@ export const categoryFirestoreSchema = z.object({
     brandWebsite: z.string().optional(),
     brandCountry: z.string().optional(),
     brandFounded: z.number().int().optional(),
-    brandBannerImage: z.string().optional(),
+    highlights: z.array(z.string()).optional(),
+    faqs: z.array(z.object({ question: z.string(), answer: z.string() })).optional(),
     bundleKind: z.enum(["special", "brand"]).optional(),
+    brandSlug: z.string().optional(),
     bundlePrice: rupeesSchema.optional(),
     bundleQueryRule: bundleQueryRuleSchema.optional(),
     bundleStockStatus: z.enum(["in_stock", "out_of_stock"]).optional(),

package/dist/features/categories/types/index.d.ts

@@ -37,6 +37,13 @@ export interface CategoryItem {
     brandCountry?: string;
     /** Brand founded year — only set when categoryType==="brand". */
     brandFounded?: number;
+    /** Short bullet points — "why shop this category/brand." */
+    highlights?: string[];
+    /** A handful of Q&A pairs shown on the category/brand detail page. */
+    faqs?: {
+        question: string;
+        answer: string;
+    }[];
     name: string;
     slug: string;
     description?: string;

package/dist/features/checkout/actions/checkout-value-otp-actions.d.ts

@@ -6,9 +6,23 @@
  * purpose from `checkout-actions.ts`'s third-party shipping consent OTP —
  * same crypto primitives, separate Firestore namespace and copy.
  */
-/** Sends a checkout-value OTP to the buyer's registered email. Returns masked email so the UI can confirm which inbox to check. */
-export declare function sendCheckoutValueOtp(userId: string, userEmail: string): Promise<{
-    maskedEmail: string;
+export type CheckoutValueOtpChannel = "email" | "whatsapp";
+/**
+ * Sends a checkout-value OTP either by email (default) or WhatsApp
+ * (opt-in — the buyer must explicitly choose it in the UI). WhatsApp phone
+ * is always resolved server-side from the selected shipping address —
+ * never trust a client-supplied phone number.
+ *
+ * If the chosen channel (and, for email, its skip-worthy fallback) is
+ * currently circuit-broken or unconfigured, the OTP gate is treated as
+ * satisfied (`skipped: true`) rather than blocking checkout — the caller
+ * must log this, since it is a security-relevant bypass even though
+ * user-authorized by the channel outage.
+ */
+export declare function sendCheckoutValueOtp(userId: string, userEmail: string, channel?: CheckoutValueOtpChannel, addressId?: string): Promise<{
+    maskedEmail?: string;
+    maskedPhone?: string;
+    skipped?: boolean;
 }>;
 /** Verifies the 6-digit checkout-value OTP and marks the Firestore record verified. */
 export declare function verifyCheckoutValueOtp(userId: string, code: string): Promise<void>;

package/dist/features/checkout/actions/checkout-value-otp-actions.js

@@ -8,18 +8,94 @@
  */
 import { timingSafeEqual } from "crypto";
 import { ValidationError } from "../../../errors";
+import { normalizeError } from "../../../errors/normalize";
 import { serverLogger } from "../../../monitoring";
 import { sendEmail } from "../../contact/email";
 import { getAdminDb } from "../../../providers/db-firebase";
 import { resolveDate } from "../../../utils";
-import { CHECKOUT_VALUE_OTP_EXPIRY_MS, CHECKOUT_VALUE_OTP_MAX_ATTEMPTS, hashOtp, generateOtpCode, checkoutValueOtpRef, enforceCheckoutValueOtpRateLimit, } from "../../auth/checkout-value-otp";
-/** Sends a checkout-value OTP to the buyer's registered email. Returns masked email so the UI can confirm which inbox to check. */
-export async function sendCheckoutValueOtp(userId, userEmail) {
+import { addressesRepository } from "../../addresses/repository/addresses.repository";
+import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
+import { sendWhatsAppBusinessMessage } from "../../whatsapp-bot/helpers/whatsapp";
+import { isChannelHealthy, withChannelRetry } from "../../../_internal/server/notifications/channel-health";
+import { CHECKOUT_VALUE_OTP_EXPIRY_MS, CHECKOUT_VALUE_OTP_MAX_ATTEMPTS, hashOtp, generateOtpCode, checkoutValueOtpRef, enforceCheckoutValueOtpRateLimit, buildCheckoutValueOtpMessage, } from "../../auth/checkout-value-otp";
+function maskEmail(userEmail) {
+    const [local, domain] = userEmail.split("@");
+    return domain
+        ? `${local.length <= 2 ? "*".repeat(local.length) : local[0] + "*".repeat(local.length - 2) + local[local.length - 1]}@${domain}`
+        : "***";
+}
+/**
+ * Sends a checkout-value OTP either by email (default) or WhatsApp
+ * (opt-in — the buyer must explicitly choose it in the UI). WhatsApp phone
+ * is always resolved server-side from the selected shipping address —
+ * never trust a client-supplied phone number.
+ *
+ * If the chosen channel (and, for email, its skip-worthy fallback) is
+ * currently circuit-broken or unconfigured, the OTP gate is treated as
+ * satisfied (`skipped: true`) rather than blocking checkout — the caller
+ * must log this, since it is a security-relevant bypass even though
+ * user-authorized by the channel outage.
+ */
+export async function sendCheckoutValueOtp(userId, userEmail, channel = "email", addressId) {
     const db = getAdminDb();
     await enforceCheckoutValueOtpRateLimit(db, userId);
     const code = generateOtpCode();
     const codeHash = hashOtp(code);
     const expiresAt = new Date(Date.now() + CHECKOUT_VALUE_OTP_EXPIRY_MS);
+    const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "LetItRip";
+    if (channel === "whatsapp") {
+        if (!addressId) {
+            throw new ValidationError("Select a delivery address before sending the code via WhatsApp.");
+        }
+        const settings = await siteSettingsRepository.getSingleton().catch(() => null);
+        const creds = settings?.credentials ?? {};
+        const whatsappOtpEnabled = settings?.notificationChannels?.whatsapp?.otpEnabled === true;
+        const phoneNumberId = creds.whatsappPhoneNumberId?.trim() ?? "";
+        const accessToken = creds.whatsappCloudApiToken?.trim() ?? "";
+        const credsReady = phoneNumberId && accessToken && !phoneNumberId.includes("PLACEHOLDER") && !accessToken.includes("PLACEHOLDER");
+        if (!whatsappOtpEnabled || !credsReady) {
+            throw new ValidationError("WhatsApp verification isn't available right now — send the code by email instead.");
+        }
+        const address = await addressesRepository.findById(addressId);
+        const phone = address?.phone?.trim();
+        if (!phone) {
+            throw new ValidationError("The selected address has no phone number on file — send the code by email instead.");
+        }
+        if (!(await isChannelHealthy("whatsapp"))) {
+            serverLogger.warn("sendCheckoutValueOtp: WhatsApp channel unhealthy — skipping OTP gate", { uid: userId, channel });
+            return { skipped: true };
+        }
+        await checkoutValueOtpRef(db, userId).set({
+            codeHash,
+            expiresAt,
+            attempts: 0,
+            verified: false,
+            createdAt: new Date(),
+        });
+        const message = buildCheckoutValueOtpMessage(code, siteName);
+        try {
+            const sent = await withChannelRetry("whatsapp", async () => {
+                const ok = await sendWhatsAppBusinessMessage({ toPhone: phone, message, phoneNumberId, accessToken });
+                if (!ok)
+                    throw new Error("WhatsApp Cloud API returned a non-OK response");
+                return ok;
+            });
+            if (!sent)
+                throw new Error("WhatsApp send failed");
+        }
+        catch (err) {
+            void normalizeError(err);
+            serverLogger.error("Failed to send checkout value OTP via WhatsApp", { uid: userId, err });
+            throw new ValidationError("We couldn't send the verification code via WhatsApp — please try again, or send it by email instead.");
+        }
+        const maskedPhone = phone.length > 4 ? `${"*".repeat(phone.length - 4)}${phone.slice(-4)}` : "***";
+        serverLogger.info(`Checkout value OTP sent via WhatsApp: uid=${userId}`);
+        return { maskedPhone };
+    }
+    if (!(await isChannelHealthy("email"))) {
+        serverLogger.warn("sendCheckoutValueOtp: email channel unhealthy — skipping OTP gate", { uid: userId, channel });
+        return { skipped: true };
+    }
     await checkoutValueOtpRef(db, userId).set({
         codeHash,
         expiresAt,
@@ -27,24 +103,27 @@ export async function sendCheckoutValueOtp(userId, userEmail) {
         verified: false,
         createdAt: new Date(),
     });
-    const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "LetItRip";
-    const [local, domain] = userEmail.split("@");
-    const maskedEmail = domain
-        ? `${local.length <= 2 ? "*".repeat(local.length) : local[0] + "*".repeat(local.length - 2) + local[local.length - 1]}@${domain}`
-        : "***";
-    const { error } = await sendEmail({
-        to: userEmail,
-        subject: `${siteName}: Verify your order`,
-        html: `
-      <div style="font-family:sans-serif;max-width:480px;margin:0 auto;padding:24px">
-        <h2 style="margin-bottom:8px">Verify Your Order</h2>
-        <p style="color:#555">Your cart total requires verification before checkout. Enter this code to continue:</p>
-        <div style="font-size:36px;font-weight:bold;letter-spacing:8px;text-align:center;margin:24px 0;padding:16px;background:#f3f4f6;border-radius:8px">${code}</div>
-        <p style="color:#888;font-size:12px">This code expires in 10 minutes. If you did not request this, please ignore this email.</p>
-      </div>
-    `,
-    });
-    if (error) {
+    const maskedEmail = maskEmail(userEmail);
+    try {
+        await withChannelRetry("email", async () => {
+            const { error } = await sendEmail({
+                to: userEmail,
+                subject: `${siteName}: Verify your order`,
+                html: `
+          <div style="font-family:sans-serif;max-width:480px;margin:0 auto;padding:24px">
+            <h2 style="margin-bottom:8px">Verify Your Order</h2>
+            <p style="color:#555">Your cart total requires verification before checkout. Enter this code to continue:</p>
+            <div style="font-size:36px;font-weight:bold;letter-spacing:8px;text-align:center;margin:24px 0;padding:16px;background:#f3f4f6;border-radius:8px">${code}</div>
+            <p style="color:#888;font-size:12px">This code expires in 10 minutes. If you did not request this, please ignore this email.</p>
+          </div>
+        `,
+            });
+            if (error)
+                throw new Error(String(error));
+        });
+    }
+    catch (err) {
+        void normalizeError(err);
         // Root-caused 2026-08-20: this used to be fire-and-forget — the
         // Firestore OTP doc was written and the caller always got back a
         // success response ("code sent") regardless of whether the email
@@ -52,7 +131,7 @@ export async function sendCheckoutValueOtp(userId, userEmail) {
         // unverified sending domain, outage) silently stranded the buyer
         // with a checkout they could never complete, since the OTP gate
         // gave no indication anything had gone wrong.
-        serverLogger.error("Failed to send checkout value OTP email", { uid: userId, error });
+        serverLogger.error("Failed to send checkout value OTP email", { uid: userId, err });
         throw new ValidationError("We couldn't send the verification code — please try again in a moment, or contact support if this keeps happening.");
     }
     serverLogger.info(`Checkout value OTP sent: uid=${userId}`);

package/dist/features/classified/components/ClassifiedContactSellerPanel.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { startClassifiedConversationAction } from "../../../_internal/server/features/classified/actions";
+export interface ClassifiedContactSellerPanelProps {
+    productId: string;
+    onContactSeller: typeof startClassifiedConversationAction;
+}
+/**
+ * The only purchase-path CTA on a classified listing — no cart, no checkout.
+ * Extracted from the old ClassifiedDetailView so the richer, full-parity
+ * ClassifiedDetailPageView can slot this into a `renderBuyBar` prop.
+ */
+export declare function ClassifiedContactSellerPanel({ productId, onContactSeller }: ClassifiedContactSellerPanelProps): React.JSX.Element;

package/dist/features/classified/components/ClassifiedContactSellerPanel.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
+import { useState } from "react";
+import Link from "next/link";
+import { Button, Div, Stack, Text } from "../../../ui";
+import { ROUTES } from "../../../next/routing/route-map";
+const __P = {
+    p4: "p-[var(--appkit-space-4)]",
+};
+/**
+ * The only purchase-path CTA on a classified listing — no cart, no checkout.
+ * Extracted from the old ClassifiedDetailView so the richer, full-parity
+ * ClassifiedDetailPageView can slot this into a `renderBuyBar` prop.
+ */
+export function ClassifiedContactSellerPanel({ productId, onContactSeller }) {
+    const [pending, setPending] = useState(false);
+    const [conversation, setConversation] = useState(null);
+    const [error, setError] = useState(null);
+    async function handleContactSeller() {
+        setPending(true);
+        setError(null);
+        try {
+            const result = await onContactSeller({ productId });
+            if (result && typeof result === "object" && "ok" in result) {
+                if (result.ok) {
+                    setConversation(result.data);
+                }
+                else {
+                    setError(result.error);
+                }
+            }
+            else {
+                setConversation(result);
+            }
+        }
+        catch (e) {
+            void normalizeError(e);
+            setError(e instanceof Error ? e.message : "Something went wrong");
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    if (conversation) {
+        return (_jsxs(Div, { className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: [_jsx(Text, { className: "mb-2", weight: "medium", children: "Conversation started!" }), _jsx(Link, { href: ROUTES.USER.MESSAGES, className: "text-primary underline underline-offset-2", children: "Go to your messages \u2192" })] }));
+    }
+    return (_jsxs(Stack, { gap: "sm", children: [error && (_jsx(Text, { className: "text-destructive", size: "sm", children: error })), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleContactSeller, className: "w-full", children: "Contact Seller" })] }));
+}

package/dist/features/classified/components/ClassifiedDetailPageView.d.ts

@@ -0,0 +1,7 @@
+import type { ProductDocument } from "../../products/schemas/firestore";
+export interface ClassifiedDetailPageViewProps {
+    slug: string;
+    /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
+    initialProduct?: ProductDocument | null;
+}
+export declare function ClassifiedDetailPageView({ slug, initialProduct }: ClassifiedDetailPageViewProps): Promise<import("react").JSX.Element>;