@mohasinac/appkit 2.7.49 → 2.7.52

package/dist/features/seller/components/SellerShippingView.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { Alert, Badge, Button, Div, FormField, Heading, Section, Stack, Text } from "../../../ui";
+import { Alert, Badge, Div, FormField, Heading, Stack, Text } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
+import { StepForm } from "../../shell";
 const DEFAULT_DRAFT = {
     method: "custom",
     customCarrierName: "",
@@ -11,6 +12,8 @@ const DEFAULT_DRAFT = {
     shiprocketEmail: "",
     shiprocketPassword: "",
     pickupAddressId: "",
+    freeShippingThreshold: "",
+    fragileSurcharge: "",
 };
 export function SellerShippingView({ apiBase = "/api/store/shipping" }) {
     const [draft, setDraft] = useState(DEFAULT_DRAFT);
@@ -19,6 +22,7 @@ export function SellerShippingView({ apiBase = "/api/store/shipping" }) {
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
+    const [currentStep, setCurrentStep] = useState(0);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -32,13 +36,19 @@ export function SellerShippingView({ apiBase = "/api/store/shipping" }) {
                 shiprocketEmail: cfg.shiprocketEmail ?? "",
                 shiprocketPassword: "",
                 pickupAddressId: "",
+                freeShippingThreshold: (res?.data?.freeShippingThreshold ?? 0)
+                    ? String(res.data.freeShippingThreshold / 100)
+                    : "",
+                fragileSurcharge: (res?.data?.fragileSurcharge ?? 0)
+                    ? String(res.data.fragileSurcharge / 100)
+                    : "",
             });
         })
             .catch(() => { })
             .finally(() => setLoading(false));
     }, [apiBase]);
-    const update = useCallback((key, value) => {
-        setDraft((prev) => ({ ...prev, [key]: value }));
+    const update = useCallback((partial) => {
+        setDraft((prev) => ({ ...prev, ...partial }));
         setSuccess(false);
     }, []);
     const handleSave = async () => {
@@ -46,7 +56,7 @@ export function SellerShippingView({ apiBase = "/api/store/shipping" }) {
         setSuccess(false);
         setSaving(true);
         try {
-            const body = draft.method === "custom"
+            const methodFields = draft.method === "custom"
                 ? {
                     method: "custom",
                     customCarrierName: draft.customCarrierName.trim(),
@@ -58,6 +68,12 @@ export function SellerShippingView({ apiBase = "/api/store/shipping" }) {
                         ? { shiprocketCredentials: { email: draft.shiprocketEmail, password: draft.shiprocketPassword } }
                         : {}),
                 };
+            const body = {
+                ...methodFields,
+                ...(draft.pickupAddressId ? { pickupAddressId: draft.pickupAddressId } : {}),
+                freeShippingThreshold: Math.round(parseFloat(draft.freeShippingThreshold || "0") * 100),
+                fragileSurcharge: Math.round(parseFloat(draft.fragileSurcharge || "0") * 100),
+            };
             const res = await fetch(apiBase, {
                 method: "PATCH",
                 headers: { "Content-Type": "application/json" },
@@ -77,13 +93,24 @@ export function SellerShippingView({ apiBase = "/api/store/shipping" }) {
             setSaving(false);
         }
     };
-    const isCustom = draft.method === "custom";
     const busy = loading || saving;
+    const steps = [
+        {
+            label: "Method",
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Method" }), current && (_jsxs(Div, { className: "flex items-center gap-2 mb-2", children: [_jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Configured" : "Not configured" }), current.method === "shiprocket" && (_jsx(Badge, { variant: current.isTokenValid ? "success" : "danger", children: current.isTokenValid ? "Shiprocket connected" : "Shiprocket token expired" }))] })), _jsx(Stack, { gap: "sm", children: ["custom", "shiprocket"].map((m) => (_jsxs("label", { className: "flex items-center gap-3 p-3 rounded-lg border border-[var(--appkit-color-border)] cursor-pointer has-[:checked]:border-[var(--appkit-color-primary)] has-[:checked]:bg-[var(--appkit-color-primary)]/5", children: [_jsx("input", { type: "radio", name: "method", value: m, checked: values.method === m, onChange: () => onChange({ method: m }), className: "accent-[var(--appkit-color-primary)]", disabled: busy }), _jsxs(Div, { children: [_jsx(Text, { className: "font-medium", children: m === "custom" ? "Custom / Manual" : "Shiprocket" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: m === "custom"
+                                                ? "Set a fixed shipping fee and carrier name for all orders."
+                                                : "Automated shipping via Shiprocket — connect your account for label generation and tracking." })] })] }, m))) }), values.method === "custom" && (_jsxs(Stack, { gap: "md", className: "mt-2", children: [_jsx(FormField, { name: "customCarrierName", label: "Carrier Name", type: "text", value: values.customCarrierName, onChange: (v) => onChange({ customCarrierName: v }), placeholder: "e.g. India Post, DTDC, Delhivery", disabled: busy }), _jsx(FormField, { name: "customShippingPrice", label: "Shipping Price (\u20B9)", type: "number", value: values.customShippingPrice, onChange: (v) => onChange({ customShippingPrice: v }), placeholder: "0 for free shipping", helpText: "Charged to buyer at checkout. Enter 0 for free shipping.", disabled: busy })] })), values.method === "shiprocket" && (_jsxs(Stack, { gap: "md", className: "mt-2", children: [_jsx(FormField, { name: "shiprocketEmail", label: "Shiprocket Email", type: "email", value: values.shiprocketEmail, onChange: (v) => onChange({ shiprocketEmail: v }), placeholder: "your@email.com", disabled: busy }), _jsx(FormField, { name: "shiprocketPassword", label: current?.isTokenValid ? "Password (leave blank to keep existing token)" : "Password", type: "password", value: values.shiprocketPassword, onChange: (v) => onChange({ shiprocketPassword: v }), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", helpText: current?.isTokenValid ? "Only fill this to re-authenticate." : "Required to connect your Shiprocket account.", disabled: busy })] }))] })),
+        },
+        {
+            label: "Pickup Address",
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Pickup Address" }), current?.pickupAddress && (_jsxs(Alert, { variant: "info", children: ["Current pickup: ", current.pickupAddress.locationName ?? "", current.pickupAddress.city ? `, ${current.pickupAddress.city}` : "", current.pickupAddress.isVerified ? " — ✓ Verified" : " — Pending OTP verification"] })), _jsx(StoreAddressSelectorCreate, { value: values.pickupAddressId, onChange: (id) => onChange({ pickupAddressId: id }), label: "Pickup Address", disabled: busy }), _jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: "Registering a pickup address sends an OTP to your phone for verification." })] })),
+        },
+        {
+            label: "Rules",
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Shipping Rules" }), _jsx(FormField, { name: "freeShippingThreshold", label: "Free Shipping Threshold (\u20B9)", type: "number", value: values.freeShippingThreshold, onChange: (v) => onChange({ freeShippingThreshold: v }), placeholder: "e.g. 500 \u2014 orders above this get free shipping", helpText: "Leave blank or 0 to disable free shipping offers.", disabled: busy }), _jsx(FormField, { name: "fragileSurcharge", label: "Fragile Item Surcharge (\u20B9)", type: "number", value: values.fragileSurcharge, onChange: (v) => onChange({ fragileSurcharge: v }), placeholder: "e.g. 50 \u2014 added for items marked fragile", helpText: "Leave blank or 0 to disable the fragile surcharge.", disabled: busy })] })),
+        },
+    ];
     return (_jsx(StackedViewShell, { portal: "seller", title: "Shipping Configuration", sections: [
-            _jsxs(Stack, { gap: "lg", children: [current && (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Configured" : "Not configured" }), current.method === "shiprocket" && (_jsx(Badge, { variant: current.isTokenValid ? "success" : "danger", children: current.isTokenValid ? "Shiprocket connected" : "Shiprocket token expired" }))] })), error && _jsx(Alert, { variant: "error", children: error }), success && _jsx(Alert, { variant: "success", children: "Shipping configuration saved." }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Shipping Method" }), _jsx(Stack, { gap: "sm", children: ["custom", "shiprocket"].map((m) => (_jsxs("label", { className: "flex items-center gap-3 p-3 rounded-lg border border-[var(--appkit-color-border)] cursor-pointer has-[:checked]:border-[var(--appkit-color-primary)] has-[:checked]:bg-[var(--appkit-color-primary)]/5", children: [_jsx("input", { type: "radio", name: "method", value: m, checked: draft.method === m, onChange: () => update("method", m), className: "accent-[var(--appkit-color-primary)]", disabled: busy }), _jsxs(Div, { children: [_jsx(Text, { className: "font-medium capitalize", children: m === "custom" ? "Custom / Manual" : "Shiprocket" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: m === "custom"
-                                                        ? "Set a fixed shipping fee and carrier name for all orders."
-                                                        : "Automated shipping via Shiprocket — connect your account for label generation and tracking." })] })] }, m))) })] }), isCustom && (_jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Custom Shipping Details" }), _jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "customCarrierName", label: "Carrier Name", type: "text", value: draft.customCarrierName, onChange: (v) => update("customCarrierName", v), placeholder: "e.g. India Post, DTDC, Delhivery", disabled: busy }), _jsx(FormField, { name: "customShippingPrice", label: "Shipping Price (\u20B9)", type: "number", value: draft.customShippingPrice, onChange: (v) => update("customShippingPrice", v), placeholder: "0 for free shipping", helpText: "Charged to buyer at checkout. Enter 0 for free shipping.", disabled: busy })] })] })), !isCustom && (_jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Shiprocket Account" }), _jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "shiprocketEmail", label: "Shiprocket Email", type: "email", value: draft.shiprocketEmail, onChange: (v) => update("shiprocketEmail", v), placeholder: "your@email.com", disabled: busy }), _jsx(FormField, { name: "shiprocketPassword", label: current?.isTokenValid ? "Password (leave blank to keep existing token)" : "Password", type: "password", value: draft.shiprocketPassword, onChange: (v) => update("shiprocketPassword", v), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", helpText: current?.isTokenValid ? "Only fill this to re-authenticate." : "Required to connect your Shiprocket account.", disabled: busy }), _jsxs(Div, { children: [_jsx(StoreAddressSelectorCreate, { value: draft.pickupAddressId, onChange: (id) => update("pickupAddressId", id), label: "Pickup Address (optional)", disabled: busy }), _jsx(Text, { className: "mt-1 text-xs text-[var(--appkit-color-text-muted)]", children: "Registering a pickup address sends an OTP to your phone for verification." })] }), current?.pickupAddress && (_jsxs(Alert, { variant: "info", children: ["Current pickup: ", current.pickupAddress.locationName ?? "", current.pickupAddress.city ? `, ${current.pickupAddress.city}` : "", current.pickupAddress.isVerified
-                                                ? " — ✓ Verified"
-                                                : " — Pending OTP verification"] }))] })] })), _jsx(Div, { className: "flex justify-end pt-2 border-t border-[var(--appkit-color-border)]", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: busy, isLoading: saving, children: "Save Configuration" }) })] }, "shipping"),
+            _jsxs("div", { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Shipping configuration saved." }), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-shipping", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Configuration", isLoading: busy })] }, "shipping"),
         ] }));
 }

package/dist/features/seller/components/SellerSidebar.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import Link from "next/link";
 import { Div, Li, Nav, Row, Span, Text, Ul } from "../../../ui";
 import { BottomSheet } from "../../layout/BottomSheet";
+import { SidebarCollapseToggle } from "../../../_internal/client/features/layout/SidebarCollapseToggle";
 const CLS_STORE_AVATAR = "h-8 w-8 rounded-md bg-cover bg-center flex-shrink-0";
 const CLS_STORE_FALLBACK = "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-primary/10 text-sm font-bold text-primary";
 const CLS_STORE_NAME = "text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate";
@@ -56,7 +57,7 @@ export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoUR
                         height: "calc(100vh - var(--header-height, 3.5rem))",
                         width: "18rem",
                         transform: desktopOpen ? "translateX(0)" : "translateX(calc(-100% + 1.25rem))",
-                    }, children: [_jsxs("div", { className: "flex-1 bg-white dark:bg-slate-950 border-r border-zinc-200 dark:border-slate-700 flex flex-col overflow-hidden shadow-xl", children: [_jsx("div", { className: "px-4 py-3.5 border-b border-zinc-100 dark:border-slate-800 shrink-0", children: _jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": storeName, className: CLS_STORE_AVATAR, style: { backgroundImage: `url(${storeLogoURL})` } })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: navContent })] }), _jsx("button", { type: "button", onClick: handleToggle, "aria-label": desktopOpen ? "Collapse sidebar" : "Expand sidebar", className: "w-9 shrink-0 flex items-center justify-center cursor-pointer rounded-r-[1.25rem] shadow-lg transition-all duration-200 hover:shadow-xl hover:brightness-110 active:scale-[0.96]", style: { background: "linear-gradient(to bottom, #c2410c, #ea580c)" }, children: _jsx("svg", { className: `w-4 h-4 text-white drop-shadow-sm transition-transform duration-300 ${desktopOpen ? "" : "rotate-180"}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) })] }), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
+                    }, children: [_jsxs("div", { className: "flex-1 bg-white dark:bg-slate-950 border-r border-zinc-200 dark:border-slate-700 flex flex-col overflow-hidden shadow-xl", children: [_jsx("div", { className: "px-4 py-3.5 border-b border-zinc-100 dark:border-slate-800 shrink-0", children: _jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": storeName, className: CLS_STORE_AVATAR, style: { backgroundImage: `url(${storeLogoURL})` } })) : (_jsx(Div, { className: CLS_STORE_FALLBACK, children: storeName?.[0]?.toUpperCase() })), _jsx(Text, { className: CLS_STORE_NAME, children: storeName || panelTitle })] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: navContent })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle })] }), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
     }
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
                 createPortal(_jsx(DrawerPanel, { title: panelTitle, onClose: close, children: navContent }), document.body), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));

package/dist/features/seller/components/SellerStoreCategoriesView.d.ts

@@ -0,0 +1,9 @@
+export interface SellerStoreCategoriesViewProps {
+    onCreateClick?: () => void;
+    onEditClick?: (id: string) => void;
+    onDelete?: (id: string) => Promise<void>;
+    onBulkDelete?: (ids: string[]) => Promise<void>;
+    onBulkActivate?: (ids: string[]) => Promise<void>;
+    onBulkDeactivate?: (ids: string[]) => Promise<void>;
+}
+export declare function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete, onBulkDelete, onBulkActivate, onBulkDeactivate, }: SellerStoreCategoriesViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/seller/components/SellerStoreCategoriesView.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Plus } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, ListingToolbar, Pagination, RowActionMenu, Text, } from "../../../ui";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next";
+import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
+import { TABLE_KEYS } from "../../../constants/table-keys";
+const PAGE_SIZE = 25;
+const DEFAULT_SORT = "displayOrder";
+const SORT_OPTIONS = [
+    { value: "displayOrder", label: "Display Order" },
+    { value: "label", label: "Label A–Z" },
+    { value: "-label", label: "Label Z–A" },
+    { value: "-createdAt", label: "Newest" },
+];
+const COLUMNS = [
+    {
+        key: "label",
+        header: "Label",
+        render: (row) => (_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium", children: row.label }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: ["/", row.slug] })] })),
+    },
+    {
+        key: "productCount",
+        header: "Products",
+        render: (row) => _jsx(Text, { className: "text-sm tabular-nums", children: row.productCount }),
+    },
+    {
+        key: "isActive",
+        header: "Status",
+        render: (row) => (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${row.isActive
+                ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300"
+                : "bg-zinc-100 text-zinc-600 dark:bg-slate-800 dark:text-slate-400"}`, children: row.isActive ? "Active" : "Hidden" })),
+    },
+];
+export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete, onBulkDelete, onBulkActivate, onBulkDeactivate, }) {
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
+    const [deleteTargetId, setDeleteTargetId] = useState(null);
+    const [deletingId, setDeletingId] = useState(null);
+    const commitSearch = useCallback(() => { table.set(TABLE_KEYS.QUERY, searchInput.trim()); }, [searchInput, table]);
+    const resetAll = useCallback(() => {
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
+        setSearchInput("");
+    }, [table]);
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) || table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT;
+    const { rows, total, isLoading, errorMessage, refetch } = useSellerListingData({
+        queryKey: ["seller", "store-categories"],
+        endpoint: SELLER_ENDPOINTS.STORE_CATEGORIES,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `cat-${index}`),
+            raw: item,
+            label: String(item.label ?? ""),
+            slug: String(item.slug ?? ""),
+            productCount: Number(item.productIds?.length ?? 0),
+            isActive: Boolean(item.isActive),
+        })),
+        getTotal: (response, rows) => typeof response.total === "number" ? response.total : rows.length,
+    });
+    const currentPage = table.getNumber(TABLE_KEYS.PAGE, 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
+    const handleDelete = useCallback(async (id) => {
+        if (!onDelete)
+            return;
+        setDeletingId(id);
+        try {
+            await onDelete(id);
+            refetch?.();
+        }
+        finally {
+            setDeletingId(null);
+            setDeleteTargetId(null);
+        }
+    }, [onDelete, refetch]);
+    const bulkActions = [
+        ...(onBulkDelete ? [{
+                id: "bulk-delete",
+                label: "Delete selected",
+                variant: "danger",
+                onClick: async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); refetch?.(); },
+            }] : []),
+        ...(onBulkActivate ? [{
+                id: "bulk-activate",
+                label: "Activate",
+                onClick: async () => { await onBulkActivate(selection.selectedIds); selection.clearSelection(); refetch?.(); },
+            }] : []),
+        ...(onBulkDeactivate ? [{
+                id: "bulk-deactivate",
+                label: "Deactivate",
+                onClick: async () => { await onBulkDeactivate(selection.selectedIds); selection.clearSelection(); refetch?.(); },
+            }] : []),
+    ];
+    const handleNavigateNew = () => {
+        if (onCreateClick) {
+            onCreateClick();
+            return;
+        }
+        window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_NEW);
+    };
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search categories by label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleNavigateNew, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Category" })] }) }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-4 py-3 text-sm text-red-700 dark:text-red-200", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-500", children: "No categories yet \u2014 add your first storefront category" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
+                                {
+                                    label: "Edit",
+                                    onClick: () => onEditClick
+                                        ? onEditClick(row.id)
+                                        : (window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_EDIT(row.id))),
+                                },
+                                ...(onDelete ? [{
+                                        label: "Delete",
+                                        destructive: true,
+                                        onClick: () => setDeleteTargetId(row.id),
+                                        disabled: deletingId === row.id,
+                                    }] : []),
+                            ] })) }))] }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Category", message: "Are you sure you want to delete this category? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+}

package/dist/features/seller/components/SellerStorefrontView.d.ts

@@ -18,13 +18,6 @@ export interface StorefrontDraft {
     isVacationMode?: boolean;
     vacationMessage?: string;
     isPublic?: boolean;
-    googleReviews?: {
-        placeId: string;
-        enabled: boolean;
-        maxReviews?: number;
-        minRating?: number;
-        layout?: "grid" | "carousel";
-    };
 }
 export interface SellerStorefrontViewProps {
     initialValues?: StorefrontDraft;

package/dist/features/seller/components/SellerStorefrontView.js

@@ -1,34 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { Section, StackedViewShell } from "../../../ui";
-import { Alert, Button, FormField, FormGroup, Heading, Stack, Text, Toggle, } from "../../../ui";
+import { StackedViewShell } from "../../../ui";
+import { Alert, FormField, FormGroup, Heading, Stack, Text, Toggle, } from "../../../ui";
 import { ImageUpload, useMediaUpload } from "../../media";
-import { useFormShell } from "../../shell";
+import { StepForm, useFormShell } from "../../shell";
 export function SellerStorefrontView({ initialValues, onSave, isLoading = false, storeSlug = "store", }) {
     const [draft, setDraft] = useState(initialValues ?? {});
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
-    const { isDirty, markDirty, markClean } = useFormShell();
+    const [currentStep, setCurrentStep] = useState(0);
+    const { markDirty, markClean } = useFormShell();
     const { upload } = useMediaUpload();
     const update = useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
         markDirty();
         setSaved(false);
     }, [markDirty]);
-    const updateSocial = (key, value) => {
-        update({ socialLinks: { ...draft.socialLinks, [key]: value } });
-    };
-    const updateGoogleReviews = (patch) => {
-        update({
-            googleReviews: {
-                placeId: draft.googleReviews?.placeId ?? "",
-                enabled: draft.googleReviews?.enabled ?? false,
-                ...draft.googleReviews,
-                ...patch,
-            },
-        });
-    };
     const handleSave = async () => {
         setSaving(true);
         setSaved(false);
@@ -42,17 +30,26 @@ export function SellerStorefrontView({ initialValues, onSave, isLoading = false,
         }
     };
     const busy = saving || isLoading;
+    const steps = [
+        {
+            label: "Store Identity",
+            validate: (values) => !values.storeName?.trim() ? "Store name is required" : null,
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Store Identity" }), _jsx(FormField, { name: "storeName", label: "Store Name", type: "text", value: values.storeName ?? "", onChange: (v) => onChange({ storeName: v }), placeholder: "e.g. Pok\u00E9mon Palace", disabled: busy }), _jsx(FormField, { name: "storeCategory", label: "Store Category", type: "text", value: values.storeCategory ?? "", onChange: (v) => onChange({ storeCategory: v }), placeholder: "e.g. Trading Cards, Action Figures", disabled: busy }), _jsx(FormField, { name: "bio", label: "Short Bio (shown in search results)", type: "textarea", value: values.bio ?? "", onChange: (v) => onChange({ bio: v }), placeholder: "One-liner about your store (max 300 chars)", disabled: busy }), _jsx(FormField, { name: "storeDescription", label: "Full Description", type: "textarea", value: values.storeDescription ?? "", onChange: (v) => onChange({ storeDescription: v }), placeholder: "Detailed store description shown on your public store page\u2026", disabled: busy })] })),
+        },
+        {
+            label: "Branding",
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Branding" }), _jsxs(FormGroup, { columns: 2, children: [_jsx(ImageUpload, { label: "Store Logo", currentImage: values.storeLogoURL, onUpload: (file) => upload(file, "stores", true, { type: "store-logo", store: storeSlug }), onChange: (url) => onChange({ storeLogoURL: url }), helperText: "Square image, min 200\u00D7200px" }), _jsx(ImageUpload, { label: "Store Banner", currentImage: values.storeBannerURL, onUpload: (file) => upload(file, "stores", true, { type: "store-banner", store: storeSlug }), onChange: (url) => onChange({ storeBannerURL: url }), helperText: "Recommended: 1200\u00D7300px" })] })] })),
+        },
+        {
+            label: "Policies",
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Policies" }), _jsx(FormField, { name: "returnPolicy", label: "Return Policy", type: "textarea", value: values.returnPolicy ?? "", onChange: (v) => onChange({ returnPolicy: v }), placeholder: "Describe your return policy\u2026", disabled: busy }), _jsx(FormField, { name: "shippingPolicy", label: "Shipping Policy", type: "textarea", value: values.shippingPolicy ?? "", onChange: (v) => onChange({ shippingPolicy: v }), placeholder: "How and when you ship orders\u2026", disabled: busy })] })),
+        },
+        {
+            label: "Contact & Visibility",
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Contact & Social" }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "website", label: "Website", type: "text", value: values.website ?? "", onChange: (v) => onChange({ website: v }), placeholder: "https://example.com", disabled: busy }), _jsx(FormField, { name: "location", label: "Location", type: "text", value: values.location ?? "", onChange: (v) => onChange({ location: v }), placeholder: "e.g. Mumbai, India", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "twitter", label: "Twitter / X URL", type: "text", value: values.socialLinks?.twitter ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, twitter: v } }), placeholder: "https://twitter.com/...", disabled: busy }), _jsx(FormField, { name: "instagram", label: "Instagram URL", type: "text", value: values.socialLinks?.instagram ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, instagram: v } }), placeholder: "https://instagram.com/...", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "facebook", label: "Facebook URL", type: "text", value: values.socialLinks?.facebook ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, facebook: v } }), placeholder: "https://facebook.com/...", disabled: busy }), _jsx(FormField, { name: "linkedin", label: "LinkedIn URL", type: "text", value: values.socialLinks?.linkedin ?? "", onChange: (v) => onChange({ socialLinks: { ...values.socialLinks, linkedin: v } }), placeholder: "https://linkedin.com/...", disabled: busy })] }), _jsx(Heading, { level: 4, className: "mt-4 mb-2", children: "Visibility" }), _jsx(Toggle, { checked: values.isPublic !== false, onChange: (checked) => onChange({ isPublic: checked }), label: "Make store public \u2014 visible to all buyers", disabled: busy }), values.isPublic === false && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Your store is hidden. Existing orders are unaffected." })), _jsx(Heading, { level: 4, className: "mt-4 mb-2", children: "Vacation Mode" }), _jsx(Toggle, { checked: !!values.isVacationMode, onChange: (checked) => onChange({ isVacationMode: checked }), label: "Enable vacation mode \u2014 your store will show a notice to buyers", disabled: busy }), values.isVacationMode && (_jsx(FormField, { name: "vacationMessage", label: "Vacation Message", type: "textarea", value: values.vacationMessage ?? "", onChange: (v) => onChange({ vacationMessage: v }), placeholder: "I'm away until\u2026 Orders placed now will ship when I return.", disabled: busy }))] })),
+        },
+    ];
     return (_jsx(StackedViewShell, { portal: "seller", title: "Storefront Settings", sections: [
-            _jsxs(Stack, { gap: "lg", children: [saved && (_jsx(Alert, { variant: "success", children: "Changes saved successfully." })), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Store Profile" }), _jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "storeName", label: "Store Name", type: "text", value: draft.storeName ?? "", onChange: (v) => update({ storeName: v }), placeholder: "e.g. Pok\u00E9mon Palace", disabled: busy }), _jsx(FormField, { name: "bio", label: "Short Bio (shown in search results)", type: "textarea", value: draft.bio ?? "", onChange: (v) => update({ bio: v }), placeholder: "One-liner about your store (max 300 chars)", disabled: busy }), _jsxs(FormGroup, { columns: 2, children: [_jsx(ImageUpload, { label: "Store Logo", currentImage: draft.storeLogoURL, onUpload: (file) => {
-                                                    return upload(file, "stores", true, {
-                                                        type: "store-logo",
-                                                        store: storeSlug,
-                                                    });
-                                                }, onChange: (url) => update({ storeLogoURL: url }), helperText: "Square image, min 200\u00D7200px" }), _jsx(ImageUpload, { label: "Store Banner", currentImage: draft.storeBannerURL, onUpload: (file) => {
-                                                    return upload(file, "stores", true, {
-                                                        type: "store-banner",
-                                                        store: storeSlug,
-                                                    });
-                                                }, onChange: (url) => update({ storeBannerURL: url }), helperText: "Recommended: 1200\u00D7300px" })] })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Store Details" }), _jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "storeCategory", label: "Store Category", type: "text", value: draft.storeCategory ?? "", onChange: (v) => update({ storeCategory: v }), placeholder: "e.g. Trading Cards, Action Figures", disabled: busy }), _jsx(FormField, { name: "storeDescription", label: "Full Description", type: "textarea", value: draft.storeDescription ?? "", onChange: (v) => update({ storeDescription: v }), placeholder: "Detailed store description shown on your public store page\u2026", disabled: busy })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Policies" }), _jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "returnPolicy", label: "Return Policy", type: "textarea", value: draft.returnPolicy ?? "", onChange: (v) => update({ returnPolicy: v }), placeholder: "Describe your return policy\u2026", disabled: busy }), _jsx(FormField, { name: "shippingPolicy", label: "Shipping Policy", type: "textarea", value: draft.shippingPolicy ?? "", onChange: (v) => update({ shippingPolicy: v }), placeholder: "How and when you ship orders\u2026", disabled: busy })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Contact & Social" }), _jsxs(Stack, { gap: "md", children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "website", label: "Website", type: "text", value: draft.website ?? "", onChange: (v) => update({ website: v }), placeholder: "https://example.com", disabled: busy }), _jsx(FormField, { name: "location", label: "Location", type: "text", value: draft.location ?? "", onChange: (v) => update({ location: v }), placeholder: "e.g. Mumbai, India", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "twitter", label: "Twitter / X URL", type: "text", value: draft.socialLinks?.twitter ?? "", onChange: (v) => updateSocial("twitter", v), placeholder: "https://twitter.com/...", disabled: busy }), _jsx(FormField, { name: "instagram", label: "Instagram URL", type: "text", value: draft.socialLinks?.instagram ?? "", onChange: (v) => updateSocial("instagram", v), placeholder: "https://instagram.com/...", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "facebook", label: "Facebook URL", type: "text", value: draft.socialLinks?.facebook ?? "", onChange: (v) => updateSocial("facebook", v), placeholder: "https://facebook.com/...", disabled: busy }), _jsx(FormField, { name: "linkedin", label: "LinkedIn URL", type: "text", value: draft.socialLinks?.linkedin ?? "", onChange: (v) => updateSocial("linkedin", v), placeholder: "https://linkedin.com/...", disabled: busy })] })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Vacation Mode" }), _jsxs(Stack, { gap: "md", children: [_jsx(Toggle, { checked: !!draft.isVacationMode, onChange: (checked) => update({ isVacationMode: checked }), label: "Enable vacation mode \u2014 your store will show a notice to buyers", disabled: busy }), draft.isVacationMode && (_jsx(FormField, { name: "vacationMessage", label: "Vacation Message", type: "textarea", value: draft.vacationMessage ?? "", onChange: (v) => update({ vacationMessage: v }), placeholder: "I'm away until\u2026 Orders placed now will ship when I return.", disabled: busy }))] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Visibility" }), _jsx(Toggle, { checked: draft.isPublic !== false, onChange: (checked) => update({ isPublic: checked }), label: "Make store public \u2014 visible to all buyers", disabled: busy }), draft.isPublic === false && (_jsx(Text, { className: "mt-2 text-sm text-[var(--appkit-color-text-muted)]", children: "Your store is hidden. Existing orders are unaffected." }))] }), _jsxs(Section, { children: [_jsx(Heading, { level: 3, className: "mb-1", children: "Google Business Reviews" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] mb-4", children: "Display real Google reviews on your store About page. Requires a Google Place ID." }), _jsxs(Stack, { gap: "md", children: [_jsx(Toggle, { checked: !!draft.googleReviews?.enabled, onChange: (checked) => updateGoogleReviews({ enabled: checked }), label: "Show Google reviews on my store About page", disabled: busy }), draft.googleReviews?.enabled && (_jsxs(_Fragment, { children: [_jsx(FormField, { name: "googlePlaceId", label: "Google Place ID", type: "text", value: draft.googleReviews.placeId ?? "", onChange: (v) => updateGoogleReviews({ placeId: v }), placeholder: "ChIJ...", helpText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id", disabled: busy }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "googleMaxReviews", label: "Max reviews to show", type: "number", value: String(draft.googleReviews.maxReviews ?? 6), onChange: (v) => updateGoogleReviews({ maxReviews: Number(v) }), disabled: busy }), _jsx(FormField, { name: "googleMinRating", label: "Minimum star rating (1\u20135)", type: "number", value: String(draft.googleReviews.minRating ?? 0), onChange: (v) => updateGoogleReviews({ minRating: Number(v) }), disabled: busy })] })] }))] })] }), _jsxs("div", { className: "flex items-center justify-end gap-3 pt-2 border-t border-[var(--appkit-color-border)]", children: [isDirty && !saving && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "You have unsaved changes." })), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: busy || !isDirty, isLoading: saving, children: "Save Changes" })] })] }, "profile"),
+            _jsxs("div", { children: [saved && (_jsx(Alert, { variant: "success", className: "mb-6", children: "Changes saved successfully." })), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-storefront", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Changes", isLoading: busy })] }, "stepform"),
         ] }));
 }

package/dist/features/seller/components/SellerTemplatesView.d.ts

@@ -0,0 +1,10 @@
+export interface SellerTemplatesViewProps {
+    onDelete?: (id: string) => Promise<void>;
+    onBulkDelete?: (ids: string[]) => Promise<void>;
+    onDuplicate?: (row: {
+        id: string;
+        name: string;
+        raw: Record<string, unknown>;
+    }) => Promise<void>;
+}
+export declare function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }: SellerTemplatesViewProps): import("react/jsx-runtime").JSX.Element;