@mohasinac/appkit 4.63.4 → 4.64.0

package/dist/features/store-extensions/schemas/firestore.js

@@ -182,6 +182,16 @@ export const DEFAULT_ITEM_REQUEST_DATA = {
     replies: [],
     replyCount: 0,
 };
+export const STORE_WHATSAPP_CONFIG_COLLECTION = "storeWhatsAppConfig";
+export const STORE_WHATSAPP_CONFIG_INDEXED_FIELDS = [
+    "storeId",
+    "isConnected",
+    "isPaid",
+];
+export const DEFAULT_STORE_WHATSAPP_CONFIG_DATA = {
+    isConnected: false,
+    isPaid: false,
+};
 export const STORE_GOOGLE_CONFIG_COLLECTION = "storeGoogleConfig";
 export const STORE_GOOGLE_CONFIG_INDEXED_FIELDS = [
     "storeId",

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -6,6 +6,7 @@ import { BaseListingCard, Div, Heading, RichText, Row, Scrim, Span, Stack } from
 import { MediaImage } from "../../media/MediaImage.js";
 import { normalizeRichTextHtml } from "../../../utils/index.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
+import { SellerTierBadge } from "./SellerTierBadge.js";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -25,7 +26,7 @@ export function InteractiveStoreCard({ store, href, selectable, isSelected = fal
         ].join(" "), onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => {
                     e.preventDefault();
                     onSelect(store.id, !isSelected);
-                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
+                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), _jsx(SellerTierBadge, { isVerified: store.isVerified, sellerTier: store.sellerTier, size: "xs" }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
     if (!renderOwnerActions)
         return card;
     /*

package/dist/features/stores/components/SellerStandingPanel.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The Trusted Seller criteria, rendered once for three audiences.
+ *
+ * - the seller's dashboard panel (their real figures against each target)
+ * - the public `/seller-guide` (targets only — no seller to measure)
+ * - `/help/seller-badges` and the admin trust guide (same, as a reference)
+ *
+ * 🛑 ONE component for all of them, driven by `sellerStandingRows()`. The
+ * whole point of this feature's config module is that the numbers a seller is
+ * chasing and the numbers a guide page promises cannot be different numbers —
+ * and the surest way to reintroduce that is a second table (Root Cause
+ * #73/#75). `metrics` absent is what distinguishes the guide from the panel,
+ * not a separate component.
+ */
+import React from "react";
+import { type SellerStandingThresholds, type SellerTier } from "../../../_internal/shared/features/seller-standing/config";
+import type { SellerStandingSnapshot } from "../types";
+export interface SellerStandingPanelProps {
+    /** Absent on a store that has never been measured, and on the guide pages. */
+    standing?: SellerStandingSnapshot;
+    tier?: SellerTier;
+    /** Admin-tuned thresholds; defaults apply when omitted. */
+    thresholds?: SellerStandingThresholds;
+    /**
+     * Show "N of 5 met" and the progress bar. Off for the public guide, where
+     * there is no seller to be N-of-5 about.
+     */
+    showProgress?: boolean;
+    heading?: string;
+}
+export declare function SellerStandingPanel({ standing, tier, thresholds, showProgress, heading, }: SellerStandingPanelProps): React.JSX.Element;

package/dist/features/stores/components/SellerStandingPanel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Heading, Row, Stack, Text } from "../../../ui/index.js";
+import { Icon } from "../../../ui/components/Icon.js";
+import { Progress } from "../../../ui/components/Progress.js";
+import { SELLER_TIER, formatSellerStandingValue, sellerStandingRows, } from "../../../_internal/shared/features/seller-standing/config.js";
+function formatDate(value) {
+    if (!value)
+        return null;
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return d.toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
+}
+export function SellerStandingPanel({ standing, tier = SELLER_TIER.SELLER, thresholds, showProgress = false, heading = "Trusted Seller", }) {
+    const rows = sellerStandingRows(standing ?? null, thresholds);
+    const metCount = rows.filter((r) => r.met).length;
+    const isTrusted = tier === SELLER_TIER.TRUSTED;
+    const computedAt = formatDate(standing?.computedAt);
+    const nextComputeAt = formatDate(standing?.nextComputeAt);
+    return (_jsxs(Stack, { gap: "md", surface: "card", padding: "lg", rounded: "xl", children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: heading }), showProgress ? (_jsxs(Text, { size: "xs", color: "muted", children: [metCount, " of ", rows.length, " met"] })) : null] }), _jsx(Text, { size: "sm", color: "muted", children: isTrusted
+                            ? "Your store meets every criterion. Your badge is live, and your payouts start when you ship rather than on delivery."
+                            : `Meet all ${rows.length} criteria in the same ${standing?.windowDays ?? thresholds?.windowDays ?? 90}-day window to earn the badge — and to be paid when you ship, rather than waiting for delivery.` })] }), showProgress ? _jsx(Progress, { value: metCount, max: rows.length, size: "sm", variant: "gradient" }) : null, _jsx(Stack, { gap: "sm", children: rows.map((row) => (_jsxs(Row, { gap: "sm", align: "start", children: [_jsx(Icon, { name: row.met ? "approve" : "confirm", size: "sm", tone: row.met ? "success" : "muted", "aria-hidden": true }), _jsxs(Stack, { gap: "xs", className: "min-w-0 flex-1", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: row.label }), _jsxs(Text, { size: "sm", color: row.met ? "inherit" : "muted", numeric: true, children: [row.actual === null
+                                                    ? "—"
+                                                    : formatSellerStandingValue(row.actual, row.kind), " / ", formatSellerStandingValue(row.target, row.kind)] })] }), _jsx(Text, { size: "xs", color: "muted", children: row.why })] })] }, row.criterion))) }), _jsx(Div, { children: standing ? (_jsxs(Text, { size: "xs", color: "faint", children: ["Figures as of ", computedAt ?? "the last check", nextComputeAt ? ` · next update ${nextComputeAt}` : "", ". Updated once a month, on the last day."] })) : (_jsx(Text, { size: "xs", color: "faint", children: "Your figures are calculated on the last day of each month \u2014 nothing has been measured for your store yet." })) })] }));
+}

package/dist/features/stores/components/SellerTierBadge.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The seller-trust badges: Verified and Trusted Seller.
+ *
+ * 🛑 Until 2026-10-24 NEITHER rendered anywhere a buyer could see.
+ * `isVerified` was in `PRIVATE_STORE_FIELDS`, so it was stripped from every
+ * public store payload — while `/sellers` filtered on it to offer a "verified
+ * sellers" view, `StoreCapabilitiesGuideView` told sellers in as many words
+ * that "the Verified badge appears on your store profile page and on every
+ * listing card", and the onboarding checklist offered "Request verified badge"
+ * as a step. Three surfaces describing a badge that could not exist.
+ *
+ * ## One component, every surface
+ *
+ * Store card, store header, the product page's "Sold by" block and the seller
+ * directory all render this. A per-surface copy is how the two badges would
+ * come to disagree about what "trusted" means — and one of them means we pay
+ * the seller before delivery, so that is not a drift worth risking.
+ *
+ * 🛑 NOT to be confused with `SellerTrustBadge` in `features/scams/`, which is
+ * the scam-registry lookup (is this store on the reported-scammer registry).
+ * Different question, different source, and both can show at once: a store can
+ * be verified by us and still have a report against it.
+ *
+ * ## Why no Tailwind colour utilities here
+ *
+ * `<Badge>` carries its own `appkit-badge--*` CSS, so this authors no colour
+ * classes at all — which sidesteps Root Cause #67 entirely rather than having
+ * to pick the right `-surface`/`-solid` pairing and get the ink to match.
+ */
+import React from "react";
+import type { SellerTier } from "../../../_internal/shared/features/seller-standing/config";
+export interface SellerTierBadgeProps {
+    /**
+     * 🛑 Takes the two FLAGS, not a store object.
+     *
+     * Every call site holds a different shape — `StoreListItem`, `StoreDetail`,
+     * a product page's denormalised seller block, an admin row — and a prop
+     * typed to one of them would force the others through a cast. A cast at a
+     * boundary is where Root Cause #98 lives.
+     */
+    isVerified?: boolean;
+    sellerTier?: SellerTier;
+    size?: "xs" | "sm" | "md";
+    /**
+     * Where the badges explain themselves. Omit for no link — a card already
+     * links to the store, and nesting an anchor inside it is invalid HTML.
+     */
+    href?: string;
+    /** Rendered as a link element supplied by the consumer (locale-aware). */
+    linkAs?: React.ElementType;
+}
+/**
+ * Renders nothing when a store has neither badge — and that is deliberate:
+ * an "unverified" chip would mark every ordinary seller as suspect, which is
+ * a claim we are not making about them.
+ */
+export declare function SellerTierBadge({ isVerified, sellerTier, size, href, linkAs, }: SellerTierBadgeProps): React.JSX.Element | null;

package/dist/features/stores/components/SellerTierBadge.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Row } from "../../../ui/index.js";
+import { Icon } from "../../../ui/components/Icon.js";
+import { SELLER_TIER } from "../../../_internal/shared/features/seller-standing/config.js";
+/**
+ * Renders nothing when a store has neither badge — and that is deliberate:
+ * an "unverified" chip would mark every ordinary seller as suspect, which is
+ * a claim we are not making about them.
+ */
+export function SellerTierBadge({ isVerified = false, sellerTier = SELLER_TIER.SELLER, size = "sm", href, linkAs, }) {
+    const isTrusted = sellerTier === SELLER_TIER.TRUSTED;
+    if (!isVerified && !isTrusted)
+        return null;
+    const badges = (_jsxs(Row, { gap: "xs", align: "center", wrap: true, children: [isVerified ? (_jsx(Badge, { variant: "info", size: size, children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Icon, { name: "verify", size: size === "md" ? "md" : "sm", "aria-hidden": true }), "Verified"] }) })) : null, isTrusted ? (_jsx(Badge, { variant: "success", size: size, children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Icon, { name: "review", size: size === "md" ? "md" : "sm", "aria-hidden": true }), "Trusted Seller"] }) })) : null] }));
+    if (!href)
+        return badges;
+    const Link = (linkAs ?? "a");
+    return (_jsx(Link, { href: href, "aria-label": "What do these seller badges mean?", children: badges }));
+}

package/dist/features/stores/components/StoreCapabilitiesGuideView.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
 import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, TextLink, Th, Thead, Tr, Ul } from "../../../ui/index.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
+import { SellerStandingPanel } from "./SellerStandingPanel.js";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
 const SECTION_BODY = "space-y-4 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]";
@@ -30,7 +31,24 @@ const CAPABILITY_GROUPS = [
     {
         group: "Trust & Visibility",
         items: [
-            { cap: "verified_seller", unlocks: "Shows a Verified badge on your store profile and listing cards.", defaultOn: false },
+            /*
+             * 🛑 CORRECTED 2026-10-24. This read "Shows a Verified badge on your
+             * store profile and listing cards", and that was false in two ways.
+             *
+             * (1) The badge is driven by `StoreDocument.isVerified`, not by this
+             * capability — `verified_seller` is read by NOTHING: no gate, no
+             * render, anywhere. Granting it has never done a thing.
+             * (2) No badge rendered at all, because `isVerified` sat in
+             * `PRIVATE_STORE_FIELDS` and was stripped from every public store
+             * payload. A seller could read this sentence, be granted the
+             * capability, and correctly conclude the platform was broken.
+             *
+             * The badge now renders (`SellerTierBadge`) off `isVerified`. The
+             * capability stays declared because existing store documents carry it
+             * and removing a union member would fail their next write — but it is
+             * described as what it is.
+             */
+            { cap: "verified_seller", unlocks: "Legacy flag — kept so existing stores stay valid. The Verified badge is granted by an admin on the store itself, not by this capability.", defaultOn: false },
             { cap: "featured_placement", unlocks: "Your store is eligible to appear in featured store sections on the homepage.", defaultOn: false },
             { cap: "promotional_banner", unlocks: "Your store banner can be used in carousel and promotional homepage sections.", defaultOn: false },
             { cap: "priority_support", unlocks: "Your support tickets go to a dedicated queue with faster response SLA.", defaultOn: false },
@@ -45,6 +63,7 @@ const CAPABILITY_GROUPS = [
             { cap: "lower_commission_rate", unlocks: "Negotiated reduced platform fee. Requires a signed agreement and minimum volume.", defaultOn: false },
             { cap: "early_access_features", unlocks: "Access to beta features before they are publicly available.", defaultOn: false },
             { cap: "advanced_analytics", unlocks: "Cohort retention, basket analysis, and top-buyer breakdown (beyond summary stats).", defaultOn: false },
+            { cap: "whatsapp_catalog_sync", unlocks: "Sync your store products to your WhatsApp Business Catalog automatically.", defaultOn: false },
         ],
     },
 ];
@@ -88,8 +107,20 @@ function LockedFeatureGuide() {
     return (_jsx(Stack, { gap: "md", children: LOCKED_FEATURES.map(({ cap, missing, howToUnlock, contractRequired }) => (_jsxs(Stack, { className: "border border-[var(--appkit-color-border)]", gap: "sm", rounded: "lg", padding: "md", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Text, { className: "font-mono text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: cap }), contractRequired && (_jsx(Span, { className: "inline-block bg-[var(--appkit-color-warning)]/10 text-[var(--appkit-color-warning)]", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Requires agreement" }))] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-1", size: "xs", weight: "semibold", children: "What you are missing:" }), _jsx(Ul, { spacing: "2xs", indent: "md", children: missing.map((item) => (_jsx(Li, { textSize: "sm", color: "muted", className: LIST_DISC, children: item }, item))) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-1", size: "xs", weight: "semibold", children: "How to unlock:" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: howToUnlock })] })] }, cap))) }));
 }
 // -- Section 4: Verified seller badge -----------------------------------------
+/*
+ * 🛑 REWRITTEN 2026-10-24. This section used to state a fourth, invented set
+ * of criteria — "store active for at least 6 months", "average rating of 4.5
+ * or above", "at least 50 delivered orders" — none of which any code has ever
+ * read, alongside `AdminStoresGuideView`'s own different numbers (">=20
+ * delivered orders, >=4.0 rating, 3+ months"). Two guides, two sets of
+ * promises, zero enforcement, and a badge that could not render at all.
+ *
+ * The two badges are now described as what they are, and the earned one
+ * renders its criteria from `SELLER_STANDING_DEFAULTS` so this page cannot
+ * drift from the job that grants it.
+ */
 function VerifiedSellerSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What it means for buyers" }), _jsx(Text, { className: "leading-relaxed", children: "The Verified badge appears on your store profile page and on every listing card. It signals to buyers that LetItRip has reviewed your identity and track record. Verified sellers typically see higher conversion rates, especially on high-value items." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Requirements" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Government-issued photo ID submitted to LetItRip support." }), _jsx(Li, { className: LIST_DISC, children: "Store active for at least 6 months." }), _jsx(Li, { className: LIST_DISC, children: "Average rating of 4.5 or above (across all reviews)." }), _jsx(Li, { className: LIST_DISC, children: "At least 50 delivered orders with no outstanding fraud reports." }), _jsx(Li, { className: LIST_DISC, children: "No active hard ban or store suspension in the past 12 months." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to apply" }), _jsx(Text, { className: "leading-relaxed", children: "Open a support ticket from your store dashboard with category \"Account\" and subject \"Verified Seller Application\". Attach your government ID scan. Our team reviews within 10 business days." })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Two different badges" }), _jsxs(Text, { className: "leading-relaxed", children: [_jsx(Span, { weight: "bold", children: "Verified" }), " means LetItRip has checked who you are. It is granted by an admin after an identity review, it is not earned by volume, and it does not expire on its own.", " ", _jsx(Span, { weight: "bold", children: "Trusted Seller" }), " is earned from your trading record and is recalculated every month \u2014 you can gain it and you can lose it. A store can hold either, both, or neither."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Getting Verified" }), _jsx(Text, { className: "leading-relaxed", children: "Open a support ticket from your store dashboard with category \"Account\" and subject \"Verified Seller Application\", and attach a government-issued photo ID. An admin reviews it and sets the badge on your store." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Earning Trusted Seller" }), _jsx(Text, { className: "leading-relaxed", children: "Every criterion below is measured over the same rolling window, and all of them have to hold at the same time. Meeting them also changes when you are paid: your payout starts when you ship rather than when the parcel is delivered." })] }), _jsx(SellerStandingPanel, { heading: "The criteria" })] }));
 }
 // -- Section 5: Multiple stores -----------------------------------------------
 function MultipleStoresSection() {

package/dist/features/stores/components/StoreCreateForm.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The store-creation form — step 2 of becoming a seller.
+ *
+ * 🛑 Why this exists. `createStoreAction` has been in the codebase with **no
+ * caller and no API route**, there was no `/store/create` page, and
+ * `/user/become-seller` collected ZERO fields — it was marketing copy and one
+ * button that flipped `role` to `seller` and set `storeStatus: "pending"`. So a
+ * real applicant became a seller and then could not open a storefront by any
+ * route in the product. Only `role: "tester"` got a store, via the auto-approve
+ * branch in `becomeSeller`. This form is the missing step.
+ *
+ * 🛑 `<SectionForm>`, not a bare `<Form>`. `audit-form-sectionised` is
+ * strict-zero on multi-field forms that skip the section engine, and the engine
+ * is what supplies the pinned mobile action bar, the per-section error badges
+ * and the schema-driven field rendering every other form in the app has. The
+ * sections come from `storeCreateSchema`'s own annotations, so the fields, their
+ * labels and their validation have exactly one definition.
+ *
+ * 🛑 `<SectionForm>` does NOT mount a `FormShellContext` — it consumes whichever
+ * one the owning view provides and tolerates none, which means a view rendering
+ * only `<SectionForm>` gets section badges and no readable message anywhere.
+ * This component mounts the context AND renders `<FormErrorSummary>` itself.
+ *
+ * The submit handler is injected rather than imported: the server action lives
+ * in the consumer (`src/actions/seller.actions.ts`), and appkit must not reach
+ * into it. Same slot shape as `StoreCreateProductShell`'s `onSave`/`onPublish`.
+ */
+import React from "react";
+import { type StoreCreateInput } from "../schemas/store-create";
+export interface StoreCreateFormResult {
+    ok: boolean;
+    /** Stable error CODE, never a server message — see the submit handler. */
+    code?: string;
+    /** Which field the failure belongs to, when the server can say. */
+    field?: keyof StoreCreateInput;
+}
+export interface StoreCreateFormProps {
+    /**
+     * Performs the create. Resolves `{ ok: true }` on success, or
+     * `{ ok: false, code }` with a mapped error code.
+     */
+    onSubmit: (input: StoreCreateInput) => Promise<StoreCreateFormResult>;
+    /** Called after a successful create, for the consumer's redirect/toast. */
+    onCreated?: () => void;
+}
+export declare function StoreCreateForm({ onSubmit, onCreated }: StoreCreateFormProps): React.JSX.Element;

package/dist/features/stores/components/StoreCreateForm.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The store-creation form — step 2 of becoming a seller.
+ *
+ * 🛑 Why this exists. `createStoreAction` has been in the codebase with **no
+ * caller and no API route**, there was no `/store/create` page, and
+ * `/user/become-seller` collected ZERO fields — it was marketing copy and one
+ * button that flipped `role` to `seller` and set `storeStatus: "pending"`. So a
+ * real applicant became a seller and then could not open a storefront by any
+ * route in the product. Only `role: "tester"` got a store, via the auto-approve
+ * branch in `becomeSeller`. This form is the missing step.
+ *
+ * 🛑 `<SectionForm>`, not a bare `<Form>`. `audit-form-sectionised` is
+ * strict-zero on multi-field forms that skip the section engine, and the engine
+ * is what supplies the pinned mobile action bar, the per-section error badges
+ * and the schema-driven field rendering every other form in the app has. The
+ * sections come from `storeCreateSchema`'s own annotations, so the fields, their
+ * labels and their validation have exactly one definition.
+ *
+ * 🛑 `<SectionForm>` does NOT mount a `FormShellContext` — it consumes whichever
+ * one the owning view provides and tolerates none, which means a view rendering
+ * only `<SectionForm>` gets section badges and no readable message anywhere.
+ * This component mounts the context AND renders `<FormErrorSummary>` itself.
+ *
+ * The submit handler is injected rather than imported: the server action lives
+ * in the consumer (`src/actions/seller.actions.ts`), and appkit must not reach
+ * into it. Same slot shape as `StoreCreateProductShell`'s `onSave`/`onPublish`.
+ */
+import React from "react";
+import { Div, Stack, Text } from "../../../ui/index.js";
+import { FormShellContext, FormErrorSummary, useFormShellState } from "../../../ui/forms/index.js";
+import { SectionForm, buildSectionsFromSchema, useSectionFormNav } from "../../shell/index.js";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect.js";
+import { loadCategoryOptions } from "../../categories/utils/load-category-options.js";
+import { storeCreateSchema } from "../schemas/store-create.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
+import { useTranslations } from "next-intl";
+export function StoreCreateForm({ onSubmit, onCreated }) {
+    const t = useTranslations();
+    const [values, setValues] = React.useState({
+        storeName: "",
+        storeDescription: "",
+        storeCategory: "",
+    });
+    const [isPending, setIsPending] = React.useState(false);
+    const { shellCtx, setFieldError, clearErrors, markSubmitAttempted } = useFormShellState(storeCreateSchema);
+    const handleChange = React.useCallback((partial) => {
+        setValues((prev) => Object.assign({}, prev, partial));
+    }, []);
+    /*
+     * 🛑 `PaginatedSelect`, not the inferred text input: there are over a
+     * thousand categories, so a flat list is unscannable and the >5-options rule
+     * applies. `loadCategoryOptions` passes `listingOnly=true`, without which
+     * this offers brands and bundles as categories.
+     *
+     * 🛑 `value={… || null}` — it renders the placeholder only on `value == null`,
+     * so an empty string paints a BLANK trigger with no prompt and no hint that
+     * it is a control.
+     */
+    const sections = React.useMemo(() => buildSectionsFromSchema(storeCreateSchema, {
+        renderers: {
+            storeCategory: ({ values: v, onChange }) => (_jsx(PaginatedSelect, { name: "storeCategory", value: v.storeCategory || null, onChange: (val) => onChange({ storeCategory: val ?? "" }), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (optional)", searchPlaceholder: "Type a category name\u2026", noResultsText: "No categories found", ariaLabel: "Main category" })),
+        },
+    }), []);
+    // Declared AFTER `sections`, because it takes them — it derives the ordered
+    // open/closed set from the sections that are currently visible.
+    const nav = useSectionFormNav(sections, values);
+    async function submit() {
+        clearErrors();
+        markSubmitAttempted();
+        const parsed = storeCreateSchema.safeParse(values);
+        if (!parsed.success) {
+            for (const issue of parsed.error.issues) {
+                setFieldError(String(issue.path[0]), issue.message);
+            }
+            return;
+        }
+        setIsPending(true);
+        try {
+            const result = await onSubmit(parsed.data);
+            if (result.ok) {
+                onCreated?.();
+                return;
+            }
+            /*
+             * 🛑 `toUserMessage(code, t)`, never the server's own message. A
+             * raw-message fallback is how a Node MODULE_NOT_FOUND with a full
+             * require stack got rendered inside a buyer-facing modal (Root Cause
+             * #86). `toUserMessage` terminates at a generic string and never
+             * returns server text.
+             */
+            setFieldError(result.field ?? "storeName", toUserMessage(result.code ?? "UNKNOWN", t));
+        }
+        catch (err) {
+            // Every `NormalizedError` variant carries a non-optional `code`, so
+            // there is nothing to default here.
+            const e = normalizeError(err);
+            setFieldError("storeName", toUserMessage(e.code, t));
+        }
+        finally {
+            setIsPending(false);
+        }
+    }
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Div, { children: [_jsxs(Stack, { gap: "xs", className: "mb-4", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Open your storefront" }), _jsx(Text, { size: "sm", color: "muted", children: "You can change all of this later. Your store stays private until we review it." })] }), _jsx(SectionForm, { sections: sections, values: values, onChange: handleChange, onSubmit: submit, schema: storeCreateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isPending, submitLabel: "Create my store" }), _jsx(FormErrorSummary, {})] }) }));
+}

package/dist/features/stores/components/StoreGuideHubView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Package, ShoppingBag, Wallet, Settings, Shield, Headphones, CheckCircle2, Circle, BookOpen, } from "lucide-react";
 import { Div, Grid, Heading, Progress, Row, Section, Stack, Text, TextLink } from "../../../ui/index.js";
+import { SellerStandingPanel } from "./SellerStandingPanel.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 const CLS_CHECK_ICON = "w-5 h-5 flex-shrink-0 text-emerald-500";
 const CLS_SUCCESS_BOX = "rounded-xl border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-800 px-[var(--appkit-space-5)] py-[var(--appkit-space-4)]";
@@ -27,7 +28,7 @@ const GUIDE_CARDS = [
     {
         Icon: Settings,
         title: "Settings",
-        description: "Store profile, shipping config, return policy, and vacation mode.",
+        description: "Store profile, shipping config, return policy, vacation mode, and WhatsApp integration.",
         href: String(ROUTES.STORE.GUIDE_SETTINGS),
     },
     {
@@ -65,10 +66,22 @@ function buildChecklist(store) {
             done: (store?.shippingConfig?.providers?.length ?? 0) > 0,
             href: String(ROUTES.STORE.SHIPPING_CONFIGS),
         },
+        /*
+         * 🛑 Was "Request verified badge" → a SUPPORT TICKET, and the cast beside
+         * it (`store as StoreDocument & { isVerified?: boolean }`) was the tell
+         * that `isVerified` was not even on the type. Two things were wrong: the
+         * badge was not something to request (an admin grants it after checking
+         * identity, and no ticket category asked for it), and the step it pointed
+         * at could not complete itself.
+         *
+         * The earned tier is a real step with a real destination — the
+         * capabilities guide, where the criteria and the seller's own figures are
+         * both rendered from `SELLER_STANDING_DEFAULTS`.
+         */
         {
-            label: "Request verified badge",
-            done: Boolean(store?.isVerified),
-            href: String(ROUTES.USER.SUPPORT),
+            label: "Earn Trusted Seller status",
+            done: store?.sellerTier === "trusted",
+            href: String(ROUTES.STORE.GUIDE_CAPABILITIES),
         },
     ];
 }
@@ -77,7 +90,7 @@ export function StoreGuideHubView({ store }) {
     const storeName = store?.storeName ?? "Your Store";
     const steps = buildChecklist(store);
     const completedCount = steps.filter((s) => s.done).length;
-    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", className: "[background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_60%,var(--appkit-color-secondary-400)_100%)]", children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse-muted", className: "tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Seller Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: storeName }), _jsx(Text, { color: "inverse-muted", size: "base", children: "Everything you need to know about selling on LetItRip." })] }) }), _jsxs(Div, { layout: "grid", gap: "8", className: "grid-cols-1 lg:grid-cols-3", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Grid, { cols: "cardsWide", gap: "md", children: GUIDE_CARDS.map(({ Icon, title, description, href }) => (_jsxs(TextLink, { variant: "bare", href: href, rounded: "xl", layout: "flex-col", gap: "md", paddingX: "lg", paddingY: "lg", shadow: "hover-md", className: "group border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] hover:border-[var(--appkit-color-primary)] transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Getting started" }), _jsxs(Div, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", children: [_jsxs(Div, { className: "px-[1.25rem] pt-[1.25rem] border-b border-[var(--appkit-color-border)]", padding: "b-md", children: [_jsxs(Row, { className: "mb-2", align: "center", justify: "between", children: [_jsxs(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "medium", children: [completedCount, " of ", steps.length, " complete"] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [Math.round((completedCount / steps.length) * 100), "%"] })] }), _jsx(Progress, { value: completedCount, max: steps.length, size: "sm", variant: "gradient" })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)]", children: steps.map(({ label, done, href }) => (_jsxs(TextLink, { variant: "bare", href: done ? "#" : href, "aria-disabled": done, layout: "flex", align: "center", gap: "sm", paddingX: "lg", paddingY: "sm-tall", size: "sm", className: `transition-colors ${done
+    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", className: "[background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_60%,var(--appkit-color-secondary-400)_100%)]", children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse-muted", className: "tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Seller Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: storeName }), _jsx(Text, { color: "inverse-muted", size: "base", children: "Everything you need to know about selling on LetItRip." })] }) }), _jsxs(Div, { layout: "grid", gap: "8", className: "grid-cols-1 lg:grid-cols-3", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Grid, { cols: "cardsWide", gap: "md", children: GUIDE_CARDS.map(({ Icon, title, description, href }) => (_jsxs(TextLink, { variant: "bare", href: href, rounded: "xl", layout: "flex-col", gap: "md", paddingX: "lg", paddingY: "lg", shadow: "hover-md", className: "group border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] hover:border-[var(--appkit-color-primary)] transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) }), _jsx(SellerStandingPanel, { standing: store?.standing, tier: store?.sellerTier, showProgress: true, heading: "Your Trusted Seller standing" })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Getting started" }), _jsxs(Div, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", children: [_jsxs(Div, { className: "px-[1.25rem] pt-[1.25rem] border-b border-[var(--appkit-color-border)]", padding: "b-md", children: [_jsxs(Row, { className: "mb-2", align: "center", justify: "between", children: [_jsxs(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "medium", children: [completedCount, " of ", steps.length, " complete"] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [Math.round((completedCount / steps.length) * 100), "%"] })] }), _jsx(Progress, { value: completedCount, max: steps.length, size: "sm", variant: "gradient" })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)]", children: steps.map(({ label, done, href }) => (_jsxs(TextLink, { variant: "bare", href: done ? "#" : href, "aria-disabled": done, layout: "flex", align: "center", gap: "sm", paddingX: "lg", paddingY: "sm-tall", size: "sm", className: `transition-colors ${done
                                                 ? "cursor-default"
                                                 : "hover:bg-[var(--appkit-color-border)]/30"}`, children: [done ? (_jsx(CheckCircle2, { className: CLS_CHECK_ICON })) : (_jsx(Circle, { className: "w-5 h-5 flex-shrink-0 text-[var(--appkit-color-text-muted)]" })), _jsx(Text, { className: `leading-snug ${done
                                                         ? "line-through text-[var(--appkit-color-text-muted)]"

package/dist/features/stores/components/StoreHeader.js

@@ -4,6 +4,7 @@ import { MediaImage } from "../../media/MediaImage.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { ShareButton } from "../../products/components/ShareButton.js";
 import { SellerTrustBadge } from "../../scams/components/SellerTrustBadge.js";
+import { SellerTierBadge } from "./SellerTierBadge.js";
 import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 const __O = {
@@ -14,7 +15,7 @@ const CLS_STARS = "inline-flex items-center gap-[var(--appkit-space-1)] text-war
 const CLS_FOLLOW_BTN = "rounded-lg border border-warning px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-warning hover:bg-warning-surface transition-colors";
 const CLS_WARN_BANNER = "mt-3 rounded-lg bg-warning-surface dark:bg-warning-surface border border-warning dark:border-warning px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-warning dark:text-warning";
 export function StoreHeader({ store, labels = {}, onFollow, className = "", trust, }) {
-    return (_jsxs(Section, { surface: "default", border: "bottom", className: className, children: [store.storeBannerURL && (_jsx(Div, { className: `relative h-40 md:h-56 ${__O.hidden} bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)]`, children: _jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner" }) })), _jsxs(Div, { paddingX: "x-page", className: "max-w-7xl mx-auto", padding: "y-md", children: [_jsxs(Row, { align: "end", gap: "md", children: [store.storeLogoURL ? (_jsx(Div, { className: "relative -mt-8 h-16 w-16 border-2 border-white", rounded: "xl", shadow: "sm", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "avatar" }) })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "xl", weight: "bold", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] })), trust && _jsx(SellerTrustBadge, { trust: trust })] }), _jsx(OwnerQuickActions, { resource: "STORE", placement: "detail", editHref: String(ROUTES.ADMIN.STORE_DETAIL(store.storeSlug)), recordLabel: store.storeName }), _jsxs(Row, { textSize: "xs", className: "text-[var(--appkit-color-text-muted)] mb-0.5", gap: "3", children: [store.category && _jsx(Span, { transform: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
+    return (_jsxs(Section, { surface: "default", border: "bottom", className: className, children: [store.storeBannerURL && (_jsx(Div, { className: `relative h-40 md:h-56 ${__O.hidden} bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)]`, children: _jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner" }) })), _jsxs(Div, { paddingX: "x-page", className: "max-w-7xl mx-auto", padding: "y-md", children: [_jsxs(Row, { align: "end", gap: "md", children: [store.storeLogoURL ? (_jsx(Div, { className: "relative -mt-8 h-16 w-16 border-2 border-white", rounded: "xl", shadow: "sm", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "avatar" }) })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "xl", weight: "bold", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] })), _jsx(SellerTierBadge, { isVerified: store.isVerified, sellerTier: store.sellerTier, href: String(ROUTES.PUBLIC.HELP_SELLER_BADGES) }), trust && _jsx(SellerTrustBadge, { trust: trust })] }), _jsx(OwnerQuickActions, { resource: "STORE", placement: "detail", editHref: String(ROUTES.ADMIN.STORE_DETAIL(store.storeSlug)), recordLabel: store.storeName }), _jsxs(Row, { textSize: "xs", className: "text-[var(--appkit-color-text-muted)] mb-0.5", gap: "3", children: [store.category && _jsx(Span, { transform: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
                             labels.vacationMode ??
                             "Store is on vacation mode" }))] })] }));
 }

package/dist/features/stores/components/StoreSettingsGuideView.js

@@ -26,7 +26,11 @@ function ReturnPolicySection() {
 function VacationModeSection() {
     return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What vacation mode does" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "All your published listings are hidden from search results and browse pages." }), _jsx(Li, { className: LIST_DISC, children: "Your store profile page shows a \"On Vacation\" banner." }), _jsx(Li, { className: LIST_DISC, children: "Buyers cannot add your items to cart or checkout while on vacation." }), _jsx(Li, { className: LIST_DISC, children: "Existing orders that were placed before vacation mode must still be fulfilled." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to enable" }), _jsx(Text, { className: "leading-relaxed", children: "Go to your Store Dashboard \u2192 Settings \u2192 Storefront tab. Toggle \"Vacation mode\" on. Your listings re-appear instantly when you toggle it off." })] }), _jsx(Alert, { variant: "warning", title: "Ongoing orders are not paused", children: "Enabling vacation mode does not pause or cancel any existing orders. You are still responsible for fulfilling orders placed before vacation mode was enabled." })] }));
 }
-// -- Section 5: Visibility states ---------------------------------------------
+// -- Section 5: WhatsApp integration ------------------------------------------
+function WhatsAppSection() {
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["The WhatsApp integration allows your customers to contact you via WhatsApp from your store profile and lets you sync your product catalog to your WhatsApp Business Catalog (requires the", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "whatsapp_catalog_sync" }), " capability)."] }), _jsxs(Text, { className: "leading-relaxed", children: ["Full settings and the catalog sync toggle are at", " ", _jsx(TextLink, { variant: "bare", href: String(ROUTES.STORE.WHATSAPP), className: "underline text-[var(--appkit-color-primary)] hover:opacity-80", children: "Settings \u2192 WhatsApp" }), ". See the WhatsApp settings page for step-by-step setup instructions."] })] }));
+}
+// -- Section 6: Visibility states ---------------------------------------------
 function VisibilityStatesSection() {
     const STATES = [
         {
@@ -49,5 +53,5 @@ function VisibilityStatesSection() {
     return (_jsx(Stack, { gap: "3", children: STATES.map(({ state, note }) => (_jsxs(Row, { textSize: "sm", gap: "3", children: [_jsx(Text, { className: "shrink-0 w-32 text-[var(--appkit-color-text)]", weight: "semibold", children: state }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", children: note })] }, state))) }));
 }
 export function StoreSettingsGuideView(_props) {
-    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Settings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Store profile, shipping, returns, vacation mode, and visibility." })] }), _jsx(GuideSection, { title: "1. Store profile", children: _jsx(StoreProfileSection, {}) }), _jsx(GuideSection, { title: "2. Shipping configuration", children: _jsx(ShippingSection, {}) }), _jsx(GuideSection, { title: "3. Return policy", children: _jsx(ReturnPolicySection, {}) }), _jsx(GuideSection, { title: "4. Vacation mode", children: _jsx(VacationModeSection, {}) }), _jsx(GuideSection, { title: "5. Visibility states", children: _jsx(VisibilityStatesSection, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Settings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Store profile, shipping, returns, vacation mode, WhatsApp, and visibility." })] }), _jsx(GuideSection, { title: "1. Store profile", children: _jsx(StoreProfileSection, {}) }), _jsx(GuideSection, { title: "2. Shipping configuration", children: _jsx(ShippingSection, {}) }), _jsx(GuideSection, { title: "3. Return policy", children: _jsx(ReturnPolicySection, {}) }), _jsx(GuideSection, { title: "4. Vacation mode", children: _jsx(VacationModeSection, {}) }), _jsx(GuideSection, { title: "5. WhatsApp integration", children: _jsx(WhatsAppSection, {}) }), _jsx(GuideSection, { title: "6. Visibility states", children: _jsx(VisibilityStatesSection, {}) })] }));
 }

package/dist/features/stores/repository/store.repository.d.ts

@@ -4,7 +4,7 @@
  * Data access layer for the `stores` Firestore collection.
  * One store per seller; identified by storeSlug (used as document ID).
  */
-import { BaseRepository, type SieveModel, type FirebaseSieveResult } from "../../../providers/db-firebase";
+import { BaseRepository, type SieveModel, type FirebaseSieveResult, type DocumentSnapshot } from "../../../providers/db-firebase";
 import { StoreDocument } from "../schemas";
 import { type HistoryActor } from "../../../_internal/shared/history/index";
 import type { JsonValue } from "../../../schemas/types";
@@ -17,6 +17,28 @@ export interface StoreWriteContext {
 }
 export declare class StoreRepository extends BaseRepository<StoreDocument> {
     constructor();
+    protected mapDoc<D = StoreDocument>(snap: DocumentSnapshot): D;
+    /**
+     * LIST reads never carry the WhatsApp token — not even encrypted.
+     *
+     * `mapDoc` above decrypts it, and `listStores(model, activeOnly)` backs the
+     * PUBLIC `/stores` page. Once `sieveQuery` started routing list rows through
+     * `mapDoc` (it previously mapped documents itself and skipped every
+     * override), that decrypt would have put a plaintext Meta OAuth bearer token
+     * on a public listing — the exact shape of Root Cause #70.
+     *
+     * So the list path deliberately does NOT call `decryptSecrets`, and drops
+     * `accessToken` outright: a list has no legitimate use for it, and a value
+     * that is never in the payload cannot be leaked by a projection someone
+     * forgets to write.
+     *
+     * Detail reads are unchanged — `findBySlug`/`findById` still decrypt, so the
+     * WhatsApp settings and catalog-sync routes keep working exactly as before.
+     * Removing the decrypt from `mapDoc` itself is a separate, riskier change
+     * that CLAUDE.md explicitly defers; this closes the public-exposure half
+     * without touching the encryption round-trip at all.
+     */
+    update(id: string, data: Partial<StoreDocument>): Promise<StoreDocument>;
     /**
      * Create a new store.
      * The document ID is set to storeSlug for easy URL-based lookups.