@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/stores/hooks/useStores.d.ts

@@ -3,6 +3,7 @@ interface UseStoresOptions {
     enabled?: boolean;
     endpoint?: string;
     initialData?: any;
+    staleTime?: number;
 }
 export declare function useStores(params?: StoreListParams, opts?: UseStoresOptions): {
     stores: import("..").StoreListItem[];
@@ -44,13 +45,19 @@ export declare function useStoreAuctions(storeSlug: string, params?: string, opt
     error: string | null;
     refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreAuctionsResponse, Error>>;
 };
-export declare function useStoreReviews(storeSlug: string, opts?: {
+export declare function useStoreReviews(storeSlug: string, params?: {
+    rating?: number;
+    page?: number;
+    pageSize?: number;
+}, opts?: {
     enabled?: boolean;
     endpoint?: string;
 }): {
     reviews: import("..").StoreReview[];
     averageRating: number;
     totalReviews: number;
+    totalFiltered: number;
+    totalPages: number;
     ratingDistribution: Record<number, number>;
     isLoading: boolean;
     error: string | null;

package/dist/features/stores/hooks/useStores.js

@@ -3,6 +3,8 @@ import { apiClient } from "../../../http";
 import { STORE_ENDPOINTS } from "../../../constants/api-endpoints";
 export function useStores(params = {}, opts) {
     const sp = new URLSearchParams();
+    if (params.q)
+        sp.set("q", params.q);
     if (params.category)
         sp.set("category", params.category);
     if (params.page)
@@ -19,6 +21,7 @@ export function useStores(params = {}, opts) {
         queryKey: ["stores", qs],
         queryFn: () => apiClient.get(endpoint),
         initialData: opts?.initialData,
+        staleTime: opts?.staleTime ?? (opts?.initialData !== undefined ? Infinity : 0),
         enabled: opts?.enabled ?? true,
     });
     return {
@@ -77,10 +80,19 @@ export function useStoreAuctions(storeSlug, params, opts) {
         refetch,
     };
 }
-export function useStoreReviews(storeSlug, opts) {
-    const endpoint = opts?.endpoint ?? STORE_ENDPOINTS.REVIEWS(storeSlug);
+export function useStoreReviews(storeSlug, params, opts) {
+    const sp = new URLSearchParams();
+    if (params?.rating)
+        sp.set("rating", String(params.rating));
+    if (params?.page && params.page > 1)
+        sp.set("page", String(params.page));
+    if (params?.pageSize)
+        sp.set("pageSize", String(params.pageSize));
+    const qs = sp.toString();
+    const baseEndpoint = opts?.endpoint ?? STORE_ENDPOINTS.REVIEWS(storeSlug);
+    const endpoint = qs ? `${baseEndpoint}?${qs}` : baseEndpoint;
     const { data, isLoading, error, refetch } = useQuery({
-        queryKey: ["store-reviews", storeSlug],
+        queryKey: ["store-reviews", storeSlug, qs],
         queryFn: () => apiClient.get(endpoint),
         enabled: (opts?.enabled ?? true) && !!storeSlug,
     });
@@ -88,6 +100,8 @@ export function useStoreReviews(storeSlug, opts) {
         reviews: data?.reviews ?? [],
         averageRating: data?.averageRating ?? 0,
         totalReviews: data?.totalReviews ?? 0,
+        totalFiltered: data?.totalFiltered ?? 0,
+        totalPages: data?.totalPages ?? 1,
         ratingDistribution: data?.ratingDistribution ?? {},
         isLoading,
         error: error instanceof Error ? error.message : null,

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

@@ -4,6 +4,7 @@
  * Canonical Firestore document interfaces, collection names, field constants,
  * and helpers for the stores feature.
  */
+import type { StoreCapability } from "../../auth/permissions/constants";
 export declare const StoreStatusValues: {
     readonly PENDING: "pending";
     readonly ACTIVE: "active";
@@ -41,9 +42,42 @@ export interface StoreDocument {
         totalReviews: number;
         averageRating?: number;
     };
+    /**
+     * Explicit capability set for this store. Defaults: ["suggest_brands", "create_coupons"].
+     * Checked server-side on every relevant API route.
+     */
+    capabilities?: StoreCapability[];
+    /**
+     * Custom platform commission rate (0–100 as a percentage).
+     * Only meaningful when capabilities includes "lower_commission_rate".
+     */
+    customCommissionRate?: number;
+    whatsappConfig?: {
+        /** Seller's WhatsApp Business phone number, digits-only with country code e.g. "919876543210" */
+        phoneNumber?: string;
+        /** Meta WABA ID for this store */
+        wabaId?: string;
+        /** Meta Commerce Catalog ID linked to this store */
+        catalogId?: string;
+        /** Encrypted access token (AES-256-GCM via encryptPii) — never returned to client */
+        accessToken?: string;
+        /** Whether catalog sync is enabled for this store */
+        catalogSyncEnabled: boolean;
+        /** Timestamp of last successful catalog sync */
+        lastCatalogSyncAt?: Date;
+        /** Number of products synced in last run */
+        lastSyncCount?: number;
+        /** Status of last sync attempt */
+        lastSyncStatus?: "success" | "partial" | "failed";
+        /** True when wabaId + catalogId + accessToken are all set */
+        connected: boolean;
+        /** When the seller first connected their account */
+        connectedAt?: Date;
+    };
     createdAt: Date;
     updatedAt: Date;
 }
+export type { StoreCapability } from "../../auth/permissions/constants";
 export declare const STORE_COLLECTION: "stores";
 export declare const STORE_FIELDS: {
     readonly ID: "id";

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

@@ -35,34 +35,34 @@ export declare const storeListItemSchema: z.ZodObject<{
     id: string;
     status: string;
     storeName: string;
-    storeSlug: string;
     ownerId: string;
+    storeSlug: string;
     isPublic: boolean;
     createdAt?: string | undefined;
     itemsSold?: number | undefined;
     totalProducts?: number | undefined;
-    averageRating?: number | undefined;
-    totalReviews?: number | undefined;
-    storeLogoURL?: string | undefined;
     storeDescription?: string | undefined;
     storeCategory?: string | undefined;
+    storeLogoURL?: string | undefined;
     storeBannerURL?: string | undefined;
+    totalReviews?: number | undefined;
+    averageRating?: number | undefined;
 }, {
     id: string;
     status: string;
     storeName: string;
-    storeSlug: string;
     ownerId: string;
+    storeSlug: string;
     isPublic: boolean;
     createdAt?: string | undefined;
     itemsSold?: number | undefined;
     totalProducts?: number | undefined;
-    averageRating?: number | undefined;
-    totalReviews?: number | undefined;
-    storeLogoURL?: string | undefined;
     storeDescription?: string | undefined;
     storeCategory?: string | undefined;
+    storeLogoURL?: string | undefined;
     storeBannerURL?: string | undefined;
+    totalReviews?: number | undefined;
+    averageRating?: number | undefined;
 }>;
 export declare const storeListParamsSchema: z.ZodObject<{
     category: z.ZodOptional<z.ZodString>;
@@ -72,14 +72,14 @@ export declare const storeListParamsSchema: z.ZodObject<{
     filters: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     sort?: string | undefined;
+    category?: string | undefined;
     page?: number | undefined;
     pageSize?: number | undefined;
     filters?: string | undefined;
-    category?: string | undefined;
 }, {
     sort?: string | undefined;
+    category?: string | undefined;
     page?: number | undefined;
     pageSize?: number | undefined;
     filters?: string | undefined;
-    category?: string | undefined;
 }>;

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

@@ -69,6 +69,7 @@ export interface StoreProductsResponse {
     hasMore: boolean;
 }
 export interface StoreListParams {
+    q?: string;
     category?: string;
     page?: number;
     pageSize?: number;
@@ -98,5 +99,7 @@ export interface StoreReviewsData {
     reviews: StoreReview[];
     averageRating: number;
     totalReviews: number;
+    totalFiltered: number;
+    totalPages: number;
     ratingDistribution: Record<number, number>;
 }

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

@@ -0,0 +1,30 @@
+/**
+ * Sublisting Categories Firestore Document Types & Constants
+ *
+ * Sublisting categories are curated sub-collections within a root/leaf category.
+ * Examples: "Base Set (102/102)" within Trading Cards, "Vintage Redlines 1968–1977"
+ * within Diecast Vehicles. Products are associated via SublistingCategoryDocument.productIds
+ * OR via `sublistingCategoryId` on the product document.
+ *
+ * Used in Session 85 (SC1–SC4).
+ */
+export interface SublistingCategoryDocument {
+    id: string;
+    slug: string;
+    title: string;
+    parentCategorySlug: string;
+    rootCategorySlug: string;
+    description?: string;
+    coverImage?: string;
+    sortOrder: number;
+    isActive: boolean;
+    isFeatured: boolean;
+    productCount: number;
+    productIds?: string[];
+    seoTitle?: string;
+    seoDescription?: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export declare const SUBLISTING_CATEGORIES_COLLECTION: "sublistingCategories";
+export declare const SUBLISTING_CATEGORIES_INDEXED_FIELDS: readonly ["parentCategorySlug", "rootCategorySlug", "isActive", "isFeatured", "sortOrder", "createdAt"];

package/dist/features/sublisting/schemas/firestore.js

@@ -0,0 +1,19 @@
+/**
+ * Sublisting Categories Firestore Document Types & Constants
+ *
+ * Sublisting categories are curated sub-collections within a root/leaf category.
+ * Examples: "Base Set (102/102)" within Trading Cards, "Vintage Redlines 1968–1977"
+ * within Diecast Vehicles. Products are associated via SublistingCategoryDocument.productIds
+ * OR via `sublistingCategoryId` on the product document.
+ *
+ * Used in Session 85 (SC1–SC4).
+ */
+export const SUBLISTING_CATEGORIES_COLLECTION = "sublistingCategories";
+export const SUBLISTING_CATEGORIES_INDEXED_FIELDS = [
+    "parentCategorySlug",
+    "rootCategorySlug",
+    "isActive",
+    "isFeatured",
+    "sortOrder",
+    "createdAt",
+];

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

@@ -0,0 +1,113 @@
+/**
+ * Support Ticket Firestore Document Types & Constants
+ *
+ * Canonical types for the supportTickets collection. Tickets are the primary
+ * channel through which users contest bans and report order/billing issues.
+ *
+ * Collection: supportTickets
+ * Document ID prefix: ticket- (semantic, no auto-ID)
+ *
+ * Ticket creation rules (enforced server-side, never client-trusted):
+ *  - Max 2 active general tickets per user
+ *  - Max 1 ticket per active (non-completed) order
+ *  - No guest creation — authentication required
+ *  - No creation if user has create_support_tickets soft ban
+ *  - No new ticket in the same category while existing one is waiting_on_user
+ */
+export declare const TicketCategoryValues: {
+    readonly ORDER_ISSUE: "order_issue";
+    readonly BILLING_PAYMENT: "billing_payment";
+    readonly ACCOUNT: "account";
+    readonly LISTING_DISPUTE: "listing_dispute";
+    readonly SCAM_REPORT: "scam_report";
+    readonly REFUND_REQUEST: "refund_request";
+    readonly AUCTION_DISPUTE: "auction_dispute";
+    readonly GENERAL: "general";
+};
+export type TicketCategory = (typeof TicketCategoryValues)[keyof typeof TicketCategoryValues];
+export declare const TicketStatusValues: {
+    readonly OPEN: "open";
+    readonly IN_PROGRESS: "in_progress";
+    readonly WAITING_ON_USER: "waiting_on_user";
+    readonly RESOLVED: "resolved";
+    readonly CLOSED: "closed";
+};
+export type TicketStatus = (typeof TicketStatusValues)[keyof typeof TicketStatusValues];
+export declare const TicketPriorityValues: {
+    readonly LOW: "low";
+    readonly NORMAL: "normal";
+    readonly HIGH: "high";
+    readonly URGENT: "urgent";
+};
+export type TicketPriority = (typeof TicketPriorityValues)[keyof typeof TicketPriorityValues];
+/** Statuses considered "active" for limit-enforcement purposes. */
+export declare const ACTIVE_TICKET_STATUSES: TicketStatus[];
+/** Order statuses that are eligible for a support ticket. */
+export declare const ELIGIBLE_ORDER_STATUSES_FOR_TICKET: readonly ["PENDING", "PROCESSING", "SHIPPED", "RETURN_REQUESTED"];
+export interface TicketMessage {
+    id: string;
+    authorId: string;
+    authorRole: "user" | "support" | "admin";
+    /** Plain text or safe HTML body. */
+    body: string;
+    /** Media URLs (screenshots, attachments — /media/ proxy URLs, never raw Storage). */
+    attachments?: string[];
+    createdAt: Date;
+}
+export interface SupportTicketDocument {
+    id: string;
+    userId: string;
+    /** Denormalized — for admin table display. */
+    userEmail: string;
+    /** Denormalized — for admin table display. */
+    userDisplayName: string;
+    category: TicketCategory;
+    subject: string;
+    /** Initial description written by the user when opening the ticket. */
+    description: string;
+    /** Linked order ID — required when category === "order_issue". */
+    orderId?: string;
+    status: TicketStatus;
+    priority: TicketPriority;
+    /** UID of the assigned employee. */
+    assignedTo?: string;
+    /** Denormalized display name of the assignee. */
+    assignedToName?: string;
+    /**
+     * Internal-only notes visible only to admins/employees, never shown to the ticket author.
+     * Append-only — never overwrite, always append with timestamp.
+     */
+    internalNotes?: string;
+    /** Threaded conversation. Ordered by createdAt asc. */
+    messages: TicketMessage[];
+    resolvedAt?: Date;
+    closedAt?: Date;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export type SupportTicketCreateInput = Pick<SupportTicketDocument, "userId" | "userEmail" | "userDisplayName" | "category" | "subject" | "description" | "orderId">;
+export type SupportTicketUpdateInput = Partial<Pick<SupportTicketDocument, "status" | "priority" | "assignedTo" | "assignedToName" | "internalNotes" | "resolvedAt" | "closedAt">>;
+export declare const SUPPORT_TICKET_COLLECTION: "supportTickets";
+export declare const SUPPORT_TICKET_ID_PREFIX: "ticket-";
+export declare const SUPPORT_TICKET_INDEXED_FIELDS: readonly ["userId", "status", "category", "priority", "assignedTo", "orderId", "createdAt", "updatedAt"];
+export declare const DEFAULT_SUPPORT_TICKET_DATA: Partial<SupportTicketDocument>;
+export declare const SUPPORT_TICKET_FIELDS: {
+    readonly ID: "id";
+    readonly USER_ID: "userId";
+    readonly USER_EMAIL: "userEmail";
+    readonly USER_DISPLAY_NAME: "userDisplayName";
+    readonly CATEGORY: "category";
+    readonly SUBJECT: "subject";
+    readonly DESCRIPTION: "description";
+    readonly ORDER_ID: "orderId";
+    readonly STATUS: "status";
+    readonly PRIORITY: "priority";
+    readonly ASSIGNED_TO: "assignedTo";
+    readonly ASSIGNED_TO_NAME: "assignedToName";
+    readonly INTERNAL_NOTES: "internalNotes";
+    readonly MESSAGES: "messages";
+    readonly RESOLVED_AT: "resolvedAt";
+    readonly CLOSED_AT: "closedAt";
+    readonly CREATED_AT: "createdAt";
+    readonly UPDATED_AT: "updatedAt";
+};

package/dist/features/support/schemas/firestore.js

@@ -0,0 +1,95 @@
+/**
+ * Support Ticket Firestore Document Types & Constants
+ *
+ * Canonical types for the supportTickets collection. Tickets are the primary
+ * channel through which users contest bans and report order/billing issues.
+ *
+ * Collection: supportTickets
+ * Document ID prefix: ticket- (semantic, no auto-ID)
+ *
+ * Ticket creation rules (enforced server-side, never client-trusted):
+ *  - Max 2 active general tickets per user
+ *  - Max 1 ticket per active (non-completed) order
+ *  - No guest creation — authentication required
+ *  - No creation if user has create_support_tickets soft ban
+ *  - No new ticket in the same category while existing one is waiting_on_user
+ */
+// ============================================================================
+// ENUMS
+// ============================================================================
+export const TicketCategoryValues = {
+    ORDER_ISSUE: "order_issue",
+    BILLING_PAYMENT: "billing_payment",
+    ACCOUNT: "account",
+    LISTING_DISPUTE: "listing_dispute",
+    SCAM_REPORT: "scam_report",
+    REFUND_REQUEST: "refund_request",
+    AUCTION_DISPUTE: "auction_dispute",
+    GENERAL: "general",
+};
+export const TicketStatusValues = {
+    OPEN: "open",
+    IN_PROGRESS: "in_progress",
+    WAITING_ON_USER: "waiting_on_user",
+    RESOLVED: "resolved",
+    CLOSED: "closed",
+};
+export const TicketPriorityValues = {
+    LOW: "low",
+    NORMAL: "normal",
+    HIGH: "high",
+    URGENT: "urgent",
+};
+/** Statuses considered "active" for limit-enforcement purposes. */
+export const ACTIVE_TICKET_STATUSES = [
+    "open",
+    "in_progress",
+    "waiting_on_user",
+];
+/** Order statuses that are eligible for a support ticket. */
+export const ELIGIBLE_ORDER_STATUSES_FOR_TICKET = [
+    "PENDING",
+    "PROCESSING",
+    "SHIPPED",
+    "RETURN_REQUESTED",
+];
+// ============================================================================
+// COLLECTION CONSTANTS
+// ============================================================================
+export const SUPPORT_TICKET_COLLECTION = "supportTickets";
+export const SUPPORT_TICKET_ID_PREFIX = "ticket-";
+export const SUPPORT_TICKET_INDEXED_FIELDS = [
+    "userId",
+    "status",
+    "category",
+    "priority",
+    "assignedTo",
+    "orderId",
+    "createdAt",
+    "updatedAt",
+];
+export const DEFAULT_SUPPORT_TICKET_DATA = {
+    status: "open",
+    priority: "normal",
+    messages: [],
+};
+export const SUPPORT_TICKET_FIELDS = {
+    ID: "id",
+    USER_ID: "userId",
+    USER_EMAIL: "userEmail",
+    USER_DISPLAY_NAME: "userDisplayName",
+    CATEGORY: "category",
+    SUBJECT: "subject",
+    DESCRIPTION: "description",
+    ORDER_ID: "orderId",
+    STATUS: "status",
+    PRIORITY: "priority",
+    ASSIGNED_TO: "assignedTo",
+    ASSIGNED_TO_NAME: "assignedToName",
+    INTERNAL_NOTES: "internalNotes",
+    MESSAGES: "messages",
+    RESOLVED_AT: "resolvedAt",
+    CLOSED_AT: "closedAt",
+    CREATED_AT: "createdAt",
+    UPDATED_AT: "updatedAt",
+};

package/dist/features/whatsapp-bot/components/SellerWhatsAppSettingsView.d.ts

@@ -0,0 +1,5 @@
+export interface SellerWhatsAppSettingsViewProps {
+    /** Whether this store has the whatsapp_catalog_sync capability */
+    hasCapability: boolean;
+}
+export declare function SellerWhatsAppSettingsView({ hasCapability }: SellerWhatsAppSettingsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/whatsapp-bot/components/SellerWhatsAppSettingsView.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Form, FormActions, Input, Toggle, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { WHATSAPP_SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { buildPurchaseAnnouncementMessage } from "../helpers/whatsapp";
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+function MaskedTokenInput({ label, value, onChange, placeholder, helperText, }) {
+    const [revealed, setRevealed] = React.useState(false);
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { label: label, value: value, onChange: (e) => onChange(e.target.value), type: revealed ? "text" : "password", placeholder: placeholder, helperText: helperText }), _jsx("button", { type: "button", onClick: () => setRevealed((r) => !r), className: "absolute right-3 top-8 text-xs text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200", children: revealed ? "Hide" : "Reveal" })] }));
+}
+const STEPS = [
+    {
+        n: 1,
+        title: "Create a Meta Business Account",
+        body: "Go to business.facebook.com and create (or use) a Meta Business Manager account.",
+        checkKey: undefined,
+    },
+    {
+        n: 2,
+        title: "Set up a WhatsApp Business App",
+        body: "In Meta for Developers, create an App → add the WhatsApp product → note your Phone Number ID and WABA ID from the API Setup page.",
+        checkKey: "wabaId",
+    },
+    {
+        n: 3,
+        title: "Generate a System User access token",
+        body: 'In Meta Business Manager → System Users → create a System User → assign "WhatsApp Business Management" + "WhatsApp Business Messaging" permissions → generate a token.',
+        checkKey: "accessToken",
+    },
+    {
+        n: 4,
+        title: "Create a WhatsApp Catalog",
+        body: "In Meta Commerce Manager → Catalogs → create a catalog → copy the Catalog ID.",
+        checkKey: "catalogId",
+    },
+    {
+        n: 5,
+        title: "Paste credentials below and save",
+        body: "Fill the form below and click Save & Connect. Once connected, you can sync your products.",
+        checkKey: "connected",
+    },
+];
+const STATUS_COLOR = {
+    success: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
+    partial: "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
+    failed: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
+};
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+export function SellerWhatsAppSettingsView({ hasCapability }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const { data, isLoading } = useQuery({
+        queryKey: ["store", "whatsapp-settings"],
+        queryFn: async () => {
+            const res = await apiClient.get(WHATSAPP_SELLER_ENDPOINTS.SETTINGS);
+            return (res?.whatsappConfig ?? null);
+        },
+    });
+    const cfg = data ?? null;
+    // Connection form state
+    const [phoneNumber, setPhoneNumber] = React.useState("");
+    const [wabaId, setWabaId] = React.useState("");
+    const [catalogId, setCatalogId] = React.useState("");
+    const [accessToken, setAccessToken] = React.useState("");
+    const [syncEnabled, setSyncEnabled] = React.useState(false);
+    React.useEffect(() => {
+        if (!cfg)
+            return;
+        setPhoneNumber(cfg.phoneNumber ?? "");
+        setWabaId(cfg.wabaId ?? "");
+        setCatalogId(cfg.catalogId ?? "");
+        setAccessToken(cfg.accessToken ?? "");
+        setSyncEnabled(cfg.catalogSyncEnabled ?? false);
+    }, [cfg]);
+    // Save mutation
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                catalogSyncEnabled: syncEnabled,
+            };
+            if (phoneNumber)
+                payload.phoneNumber = phoneNumber;
+            if (wabaId)
+                payload.wabaId = wabaId;
+            if (catalogId)
+                payload.catalogId = catalogId;
+            // Only send accessToken if user has typed a new value (not the masked placeholder)
+            if (accessToken && accessToken !== "••••••")
+                payload.accessToken = accessToken;
+            return apiClient.put(WHATSAPP_SELLER_ENDPOINTS.SETTINGS, payload);
+        },
+        onSuccess: () => {
+            showToast("WhatsApp settings saved", "success");
+            void queryClient.invalidateQueries({ queryKey: ["store", "whatsapp-settings"] });
+        },
+        onError: (err) => {
+            const msg = err instanceof Error ? err.message : "Failed to save settings";
+            showToast(msg, "error");
+        },
+    });
+    // Catalog sync mutation
+    const syncMutation = useMutation({
+        mutationFn: async () => apiClient.post(WHATSAPP_SELLER_ENDPOINTS.CATALOG_SYNC, {}),
+        onSuccess: (res) => {
+            const r = res ?? {};
+            showToast(`Synced ${r.successCount ?? 0} product${(r.successCount ?? 0) !== 1 ? "s" : ""} to WhatsApp catalog`, "success");
+            void queryClient.invalidateQueries({ queryKey: ["store", "whatsapp-settings"] });
+        },
+        onError: (err) => {
+            const msg = err instanceof Error ? err.message : "Sync failed";
+            showToast(msg, "error");
+        },
+    });
+    if (!hasCapability) {
+        return (_jsx("div", { className: "max-w-xl mx-auto py-8 px-4", children: _jsxs(Alert, { variant: "warning", children: [_jsx("p", { className: "font-medium", children: "WhatsApp catalog sync is not enabled for your store." }), _jsx("p", { className: "text-sm mt-1", children: "Contact LetItRip support to request access to the WhatsApp Business integration." })] }) }));
+    }
+    return (_jsxs("div", { className: "max-w-2xl mx-auto space-y-8 py-6 px-4", children: [_jsxs("section", { children: [_jsx("h2", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100 mb-4", children: "How to connect your WhatsApp Business account" }), _jsx("ol", { className: "space-y-3", children: STEPS.map((step) => {
+                            const done = step.checkKey === undefined
+                                ? false
+                                : step.checkKey === "connected"
+                                    ? cfg?.connected === true
+                                    : Boolean(cfg?.[step.checkKey]);
+                            return (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: `flex-shrink-0 w-6 h-6 rounded-full text-xs font-bold flex items-center justify-center mt-0.5 ${done
+                                            ? "bg-green-500 text-white"
+                                            : "bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300"}`, children: done ? "✓" : step.n }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: step.title }), _jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: step.body })] })] }, step.n));
+                        }) })] }), _jsxs("section", { className: "border border-zinc-200 dark:border-zinc-700 rounded-xl p-5", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h2", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Connection" }), isLoading ? null : cfg?.connected ? (_jsx("span", { className: "text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300", children: "Connected" })) : (_jsx("span", { className: "text-xs font-medium px-2 py-0.5 rounded-full bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400", children: "Not configured" }))] }), _jsxs(Form, { onSubmit: (e) => {
+                            e.preventDefault();
+                            saveMutation.mutate();
+                        }, className: "space-y-4", children: [_jsx(Input, { label: "WhatsApp Business Phone Number", value: phoneNumber, onChange: (e) => setPhoneNumber(e.target.value), placeholder: "919876543210", helperText: "Digits only, include country code (e.g. 91 for India)" }), _jsx(Input, { label: "WABA ID (WhatsApp Business Account ID)", value: wabaId, onChange: (e) => setWabaId(e.target.value), placeholder: "123456789012345", helperText: "From Meta Business Manager \u2192 WhatsApp Accounts" }), _jsx(Input, { label: "Catalog ID", value: catalogId, onChange: (e) => setCatalogId(e.target.value), placeholder: "987654321098765", helperText: "From Meta Commerce Manager \u2192 Catalogs" }), _jsx(MaskedTokenInput, { label: "System User Access Token", value: accessToken, onChange: setAccessToken, placeholder: "EAAxxxxxxxx\u2026", helperText: "Long-lived token with WhatsApp Business permissions" }), _jsx(FormActions, { align: "right", children: _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: saveMutation.isPending, children: saveMutation.isPending ? "Saving…" : "Save & Connect" }) })] })] }), _jsxs("section", { className: "border border-zinc-200 dark:border-zinc-700 rounded-xl p-5", children: [_jsx("h2", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-4", children: "Catalog Sync" }), _jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-zinc-700 dark:text-zinc-300", children: "Enable catalog sync" }), _jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "When enabled, your published standard products can be synced to WhatsApp." })] }), _jsx(Toggle, { checked: syncEnabled, onChange: setSyncEnabled, disabled: !cfg?.connected })] }), cfg?.lastCatalogSyncAt && (_jsxs("div", { className: "flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400 mb-3", children: [_jsxs("span", { children: ["Last sync: ", new Date(cfg.lastCatalogSyncAt).toLocaleString("en-IN")] }), cfg.lastSyncCount !== undefined && _jsxs("span", { children: ["\u00B7 ", cfg.lastSyncCount, " products"] }), cfg.lastSyncStatus && (_jsx("span", { className: `px-1.5 py-0.5 rounded ${STATUS_COLOR[cfg.lastSyncStatus] ?? ""}`, children: cfg.lastSyncStatus }))] })), _jsx("p", { className: "text-xs text-zinc-400 dark:text-zinc-500 mb-3", children: "Only published standard products are synced. Auctions and pre-orders are excluded. Batches of up to 50 products per call." }), _jsx(Button, { onClick: () => syncMutation.mutate(), isLoading: syncMutation.isPending, disabled: !cfg?.connected || !syncEnabled || syncMutation.isPending, variant: "secondary", children: syncMutation.isPending ? "Syncing…" : "Sync Now" })] }), _jsxs("section", { className: "border border-zinc-200 dark:border-zinc-700 rounded-xl p-5", children: [_jsx("h2", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-2", children: "Purchase Announcement Preview" }), _jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400 mb-3", children: "This message is sent automatically to your phone and the platform admin when a new order is placed." }), _jsx("div", { className: "bg-zinc-50 dark:bg-zinc-800/60 rounded-lg px-4 py-3 text-sm text-zinc-700 dark:text-zinc-200 font-mono", children: buildPurchaseAnnouncementMessage({
+                            buyerName: "Ravi K.",
+                            firstItemName: "Charizard PSA 9",
+                            additionalItemCount: 2,
+                            totalAmount: 450000,
+                            orderId: "order-3-20260510-a1b2c3",
+                        }) })] })] }));
+}

package/dist/features/whatsapp-bot/components/index.d.ts

@@ -1 +1,3 @@
 export { WhatsAppChatButton } from "./WhatsAppChatButton";
+export { SellerWhatsAppSettingsView } from "./SellerWhatsAppSettingsView";
+export type { SellerWhatsAppSettingsViewProps } from "./SellerWhatsAppSettingsView";

package/dist/features/whatsapp-bot/components/index.js

@@ -1 +1,2 @@
 export { WhatsAppChatButton } from "./WhatsAppChatButton";
+export { SellerWhatsAppSettingsView } from "./SellerWhatsAppSettingsView";