@mohasinac/appkit 3.2.20 → 3.3.0

package/dist/features/seller/actions/seller-actions.js

@@ -5,10 +5,8 @@
  * explicit params. Called by letitrip thin wrappers that handle auth,
  * rate-limiting, and user-facing validation.
  *
- * Note: Shiprocket-specific actions (updateSellerShipping,
- * verifyShiprocketPickupOtp, shiprocketShipOrder) remain in the letitrip
- * thin wrapper because they use the @/lib/shiprocket/client SDK which is
- * a permanent letitrip-only dependency.
+ * Note: updateSellerShipping remains in the letitrip thin wrapper
+ * (src/actions/seller.actions.ts) alongside the other seller server actions.
  */
 import { serverLogger } from "../../../monitoring";
 import { isAdminUser, isSellerUser } from "../../auth/role-predicates";
@@ -23,7 +21,8 @@ import { payoutRepository } from "../../payments/repository/payout.repository";
 import { PAYOUT_FIELDS } from "../../payments/schemas";
 import { couponsRepository } from "../../promotions/repository/coupons.repository";
 import { generateStoreSlug } from "../../stores/schemas/firestore";
-import { DEFAULT_PLATFORM_FEE_RATE } from "../../payments/schemas/firestore";
+import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
+import { computePayoutDeduction } from "../../../_internal/shared/fees/calculator";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { finalizeStagedMediaUrl, finalizeStagedMediaField, finalizeStagedMediaArray, } from "../../media/finalize";
 // --- Helper -------------------------------------------------------------------
@@ -169,14 +168,17 @@ async function computeSellerEarnings(sellerId) {
     const paidOutIds = await payoutRepository.getPaidOutOrderIds(sellerId);
     const eligibleOrders = deliveredOrders.filter((o) => !paidOutIds.has(o.id));
     const grossAmount = eligibleOrders.reduce((sum, o) => sum + (o.totalPrice ?? 0), 0);
-    const platformFee = parseFloat((grossAmount * DEFAULT_PLATFORM_FEE_RATE).toFixed(2));
-    const netAmount = parseFloat((grossAmount - platformFee).toFixed(2));
+    const siteSettings = await siteSettingsRepository.getSingleton();
+    const deduction = computePayoutDeduction(grossAmount, siteSettings.commissions);
     return {
         eligibleOrders,
         grossAmount,
-        platformFee,
-        netAmount,
+        platformFee: deduction.platformFee,
+        gatewayFee: deduction.gatewayFee,
+        gstAmount: deduction.gstOnFee,
+        netAmount: deduction.netAmount,
         productCount: products.length,
+        commissions: siteSettings.commissions,
     };
 }
 export async function requestPayout(userId, userName, userEmail, input) {
@@ -195,7 +197,11 @@ export async function requestPayout(userId, userName, userEmail, input) {
         amount: earnings.netAmount,
         grossAmount: earnings.grossAmount,
         platformFee: earnings.platformFee,
-        platformFeeRate: DEFAULT_PLATFORM_FEE_RATE,
+        platformFeeRate: earnings.commissions.platformFeePercent / 100,
+        gatewayFee: earnings.gatewayFee,
+        gatewayFeeRate: (earnings.commissions.gatewayFeePercent ?? 0) / 100,
+        gstAmount: earnings.gstAmount,
+        gstRate: earnings.commissions.gstPercent / 100,
         currency: getDefaultCurrency(),
         paymentMethod: input.paymentMethod,
         ...(input.bankAccount && { bankAccount: input.bankAccount }),
@@ -245,23 +251,32 @@ export async function bulkSellerOrder(userId, userRole, userDisplayName, userEma
             skipped.push(id);
             continue;
         }
+        if (order.emiEnabled && !order.emiComplete) {
+            // Delivered via the seller's allowShipBeforeEmiComplete override, but the
+            // buyer hasn't finished paying — hold the payout until emiComplete.
+            skipped.push(id);
+            continue;
+        }
         eligible.push(order);
     }
     if (eligible.length === 0)
         throw new ValidationError("No eligible orders found.");
-    const PLATFORM_COMMISSION_RATE = DEFAULT_PLATFORM_FEE_RATE;
     const grossAmount = eligible.reduce((sum, o) => sum + (o.totalPrice ?? 0), 0);
-    const platformFee = Math.round(grossAmount * PLATFORM_COMMISSION_RATE * 100) / 100;
-    const netAmount = Math.round((grossAmount - platformFee) * 100) / 100;
+    const bulkSiteSettings = await siteSettingsRepository.getSingleton();
+    const bulkDeduction = computePayoutDeduction(grossAmount, bulkSiteSettings.commissions);
     const payoutDoc = await payoutRepository.create({
         storeId: userId,
         sellerName: userDisplayName,
         sellerEmail: userEmail,
         orderIds: eligible.map((o) => o.id),
-        amount: netAmount,
+        amount: bulkDeduction.netAmount,
         grossAmount,
-        platformFee,
-        platformFeeRate: PLATFORM_COMMISSION_RATE,
+        platformFee: bulkDeduction.platformFee,
+        platformFeeRate: bulkSiteSettings.commissions.platformFeePercent / 100,
+        gatewayFee: bulkDeduction.gatewayFee,
+        gatewayFeeRate: (bulkSiteSettings.commissions.gatewayFeePercent ?? 0) / 100,
+        gstAmount: bulkDeduction.gstOnFee,
+        gstRate: bulkSiteSettings.commissions.gstPercent / 100,
         currency: getDefaultCurrency(),
         paymentMethod: userDoc.payoutDetails.method === "upi"
             ? "upi"
@@ -281,7 +296,7 @@ export async function bulkSellerOrder(userId, userRole, userDisplayName, userEma
         userId,
         payoutId,
         orderCount: eligible.length,
-        netAmount,
+        netAmount: bulkDeduction.netAmount,
     });
     return {
         payoutId,
@@ -289,9 +304,9 @@ export async function bulkSellerOrder(userId, userRole, userDisplayName, userEma
         skipped,
         eligibleCount: eligible.length,
         skippedCount: skipped.length,
-        netAmount,
+        netAmount: bulkDeduction.netAmount,
         grossAmount,
-        platformFee,
+        platformFee: bulkDeduction.platformFee,
     };
 }
 // --- Create Seller Product ----------------------------------------------------
@@ -314,14 +329,7 @@ export async function getSellerShipping(userId) {
     const userData = await userRepository.findById(userId);
     if (!userData)
         return null;
-    const config = userData.shippingConfig;
-    if (!config)
-        return null;
-    if (config.method === "shiprocket" && config.shiprocketToken) {
-        const { shiprocketToken: _removed, ...safe } = config;
-        return safe;
-    }
-    return config;
+    return userData.shippingConfig ?? null;
 }
 export async function getSellerPayoutSettings(userId) {
     const userData = await userRepository.findById(userId);
@@ -458,6 +466,23 @@ export async function sellerDeleteProduct(userId, userRole, productId) {
     serverLogger.info("sellerDeleteProduct", { userId, productId });
 }
 // --- Custom Ship Order --------------------------------------------------------
+/**
+ * EMI orders stay unshipped until every installment is paid, UNLESS every
+ * product in the order has its `allowShipBeforeEmiComplete` flag set. This
+ * is the single choke point for the "ship" transition, so it can't be
+ * bypassed by a different route/action reaching `orderRepository.update`
+ * directly with `status: "shipped"`.
+ */
+export async function assertEmiShippable(order) {
+    if (!order.emiEnabled || order.emiComplete)
+        return;
+    const productIds = (order.items ?? []).map((i) => i.productId).filter(Boolean);
+    const products = await Promise.all(productIds.map((id) => productRepository.findById(id)));
+    const allAllowEarlyShip = products.length > 0 && products.every((p) => p?.allowShipBeforeEmiComplete === true);
+    if (!allAllowEarlyShip) {
+        throw new ValidationError("This order is still on an EMI plan — it can't ship until all installments are paid, unless the seller has enabled early shipping for every item in the order.");
+    }
+}
 export async function customShipOrder(userId, userRole, orderId, input) {
     const order = await orderRepository.findById(orderId);
     if (!order)
@@ -469,6 +494,7 @@ export async function customShipOrder(userId, userRole, orderId, input) {
         throw new ValidationError("Order is already shipped");
     if (order.status !== OrderStatusValues.CONFIRMED)
         throw new ValidationError("Order must be confirmed before shipping");
+    await assertEmiShippable(order);
     await orderRepository.update(orderId, {
         status: OrderStatusValues.SHIPPED,
         shippingMethod: "custom",
@@ -485,3 +511,51 @@ export async function customShipOrder(userId, userRole, orderId, input) {
     });
     return { orderId, method: "custom" };
 }
+/**
+ * Records collection of one EMI installment. Seller/admin marks the
+ * installment paid after verifying the buyer's manual transfer (UTR +
+ * proof). Recomputes `emiRemainingBalance` from the still-pending
+ * installments and flips `emiComplete` once none remain — that flag is the
+ * single gate `assertEmiShippable` reads, so this is the only place an
+ * EMI order can become shippable.
+ */
+export async function markEmiInstallmentPaid(userId, userRole, orderId, input) {
+    const order = await orderRepository.findById(orderId);
+    if (!order)
+        throw new NotFoundError("Order not found");
+    if (userRole !== "admin" && order.storeId !== userId)
+        throw new AuthorizationError("You do not own this order");
+    if (!order.emiEnabled)
+        throw new ValidationError("This order is not on an EMI plan");
+    const installments = order.emiInstallments ?? [];
+    const target = installments.find((i) => i.index === input.installmentIndex);
+    if (!target)
+        throw new ValidationError(`Installment ${input.installmentIndex} not found on this order`);
+    if (target.status === "paid")
+        throw new ValidationError("This installment is already marked paid");
+    const updatedInstallments = installments.map((i) => i.index === input.installmentIndex
+        ? {
+            ...i,
+            status: "paid",
+            paidAt: new Date(),
+            transactionId: input.transactionId,
+            proofUrl: input.proofUrl,
+        }
+        : i);
+    const emiRemainingBalance = updatedInstallments
+        .filter((i) => i.status !== "paid")
+        .reduce((sum, i) => sum + i.amount, 0);
+    const emiComplete = updatedInstallments.every((i) => i.status === "paid");
+    const updated = await orderRepository.update(orderId, {
+        emiInstallments: updatedInstallments,
+        emiRemainingBalance,
+        emiComplete,
+    });
+    serverLogger.info("markEmiInstallmentPaid", {
+        orderId,
+        userId,
+        installmentIndex: input.installmentIndex,
+        emiComplete,
+    });
+    return updated;
+}

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

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

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

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SellerArtView — seller browse/manage of art print listings
+ * (EMI/art-stickers session). Mirrors SellerClassifiedView's pattern.
+ */
+import { Badge, sortBy } from "@mohasinac/appkit";
+import { useState, useCallback } from "react";
+import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
+import { ConfirmDeleteModal, RowActionMenu, Text } from "../../../ui";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { ROUTES } from "../../..";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../../admin/hooks/useAdminListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
+const COLUMNS = [
+    { key: "title", header: "Listing", render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.title }) },
+    { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "tabular-nums", size: "sm", children: row.price }) },
+    {
+        key: "size",
+        header: "Size",
+        render: (row) => _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.size || "—" }),
+    },
+    {
+        key: "status",
+        header: "Status",
+        render: (row) => (_jsx(Badge, { variant: row.status === "active" ? "active" : "inactive", size: "xs", className: "capitalize", children: row.status })),
+    },
+    {
+        key: "createdAt",
+        header: "Created",
+        render: (row) => _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.createdAt }),
+    },
+];
+export function SellerArtView({ onCreateClick, onEditClick, onDelete, onBulkDelete, }) {
+    const [deleteTargetId, setDeleteTargetId] = useState(null);
+    const { deletingId, handleDelete: performDelete } = useEntityDelete({
+        endpoint: (id) => `/api/store/products/${id}`,
+        deleteFn: onDelete,
+        successMessage: "Listing deleted.",
+        fetchOptions: { credentials: "include" },
+    });
+    const handleDelete = useCallback(async (id) => {
+        await performDelete(id);
+        setDeleteTargetId(null);
+    }, [performDelete]);
+    const handleEdit = useCallback((id) => {
+        if (onEditClick)
+            onEditClick(id);
+        else
+            window.location.href = String(ROUTES.STORE.ART_EDIT(id));
+    }, [onEditClick]);
+    const handleCreate = useCallback(() => {
+        if (onCreateClick)
+            onCreateClick();
+        else
+            window.location.href = String(ROUTES.STORE.ART_NEW);
+    }, [onCreateClick]);
+    const config = {
+        portal: "seller",
+        title: "Art",
+        searchPlaceholder: "Search art prints...",
+        emptyLabel: "No art listings yet — list your first print",
+        filterKeys: [],
+        defaultSort: sortBy("createdAt", "DESC"),
+        queryKey: ["seller", "art"],
+        endpoint: SELLER_ENDPOINTS.PRODUCTS,
+        sortOptions: [
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+            { value: "productTitle", label: "Name A–Z" },
+            { value: sortBy("price", "ASC"), label: "Price: Low–High" },
+            { value: sortBy("price", "DESC"), label: "Price: High–Low" },
+        ],
+        columns: COLUMNS,
+        mapRows: (response) => toRecordArray(response.products).map((item, index) => {
+            const printMeta = (item.printMeta ?? {});
+            return {
+                id: toStringValue(item.id, `art-${index}`),
+                title: toStringValue(item.productTitle ?? item.title, "Untitled"),
+                price: toRupees(item.price),
+                size: toStringValue(printMeta.size, ""),
+                status: toStringValue(item.status, "draft"),
+                createdAt: toRelativeDate(item.createdAt),
+            };
+        }),
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
+        buildFilters: () => "listingType==art",
+        primaryAction: { label: "New Art Print", onClick: () => handleCreate() },
+        buildBulkActions: onBulkDelete
+            ? (selection) => [
+                {
+                    id: "bulk-delete",
+                    label: ACTIONS.STORE["delete-listing"].label,
+                    variant: "danger",
+                    onClick: async () => {
+                        await onBulkDelete(selection.selectedIds);
+                        selection.clearSelection();
+                    },
+                },
+            ]
+            : undefined,
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                { label: ACTIONS.STORE["edit-listing"].label, onClick: () => handleEdit(row.id) },
+                {
+                    label: ACTIONS.STORE["delete-listing"].label,
+                    destructive: true,
+                    onClick: () => setDeleteTargetId(row.id),
+                    disabled: deletingId === row.id,
+                },
+            ] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Art Listing", message: "Are you sure you want to delete this art listing? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+}

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

@@ -48,6 +48,11 @@ const UPDATE_STATUS_OPTIONS = [
     { value: "delivered", label: "Delivered" },
     { value: "cancelled", label: "Cancelled" },
 ];
+const EMI_INSTALLMENT_BADGE_VARIANT = {
+    paid: "success",
+    pending: "warning",
+    overdue: "danger",
+};
 // ---------------------------------------------------------------------------
 // Order Detail Drawer
 // ---------------------------------------------------------------------------
@@ -61,6 +66,9 @@ function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
     const [trackingNumber, setTrackingNumber] = useState("");
     const [carrier, setCarrier] = useState("");
     const [trackingUrl, setTrackingUrl] = useState("");
+    const [markingPaidIndex, setMarkingPaidIndex] = useState(null);
+    const [emiError, setEmiError] = useState(null);
+    const { showToast } = useToast();
     React.useEffect(() => {
         setLoading(true);
         setFetchError(null);
@@ -76,6 +84,31 @@ function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
             .catch(() => setFetchError("Failed to load order details"))
             .finally(() => setLoading(false));
     }, [orderId, apiBase]);
+    const handleMarkInstallmentPaid = async (installmentIndex) => {
+        setMarkingPaidIndex(installmentIndex);
+        setEmiError(null);
+        try {
+            const res = await fetch(`${apiBase}/${orderId}/emi-installment`, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ installmentIndex }),
+            });
+            const json = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(json?.error ?? "Failed to mark installment paid");
+            setOrder(json?.data ?? json);
+            showToast("Installment marked paid.", "success");
+        }
+        catch (err) {
+            void normalizeError(err);
+            const message = err instanceof Error ? err.message : "Failed to mark installment paid.";
+            setEmiError(message);
+            showToast(message, "error");
+        }
+        finally {
+            setMarkingPaidIndex(null);
+        }
+    };
     const handleSave = async () => {
         if (!order)
             return;
@@ -118,7 +151,11 @@ function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
     };
     const addr = order?.shippingAddress ?? {};
     const addrLine = [addr.addressLine1, addr.city, addr.state, addr.pincode].filter(Boolean).join(", ");
-    return (_jsxs(SideDrawer, { isOpen: true, title: `Order ${order?.id ?? orderId}`, onClose: onClose, children: [loading && (_jsx(Row, { align: "center", justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), fetchError && (_jsx(Div, { textSize: "sm", className: "mx-4 mt-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", children: [_jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "5", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[order.status?.toUpperCase()] ?? "default", children: order.status ?? "Unknown" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: toRelativeDate(order.createdAt) })] }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)] mb-2", weight: "semibold", children: "Items" }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.items ?? []).map((item, i) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "truncate", weight: "medium", children: item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: ["Qty: ", item.quantity ?? 1] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toRupees(item.price ?? 0) })] }, i))) })] })), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", justify: "between", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-primary)]", weight: "bold", children: toRupees(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Shipping address" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] })), order.paymentMethod && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Payment" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", transform: "capitalize", children: order.paymentMethod })] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", gap: "3", children: [_jsx(Heading, { level: 4, size: "sm", weight: "semibold", children: "Update order" }), _jsx(Select, { label: "New status", value: newStatus, options: UPDATE_STATUS_OPTIONS, onChange: (e) => setNewStatus(e.target.value) }), _jsx(Input, { label: "Tracking number", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. 12345678901234" }), _jsx(Input, { label: "Carrier", value: carrier, onChange: (e) => setCarrier(e.target.value), placeholder: "e.g. Delhivery, Bluedart" }), _jsx(Input, { label: "Tracking URL (optional)", value: trackingUrl, onChange: (e) => setTrackingUrl(e.target.value), placeholder: "https://...", type: "url" }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }), _jsxs(Row, { border: "top", paddingY: "y-sm-tall", padding: "x-md", align: "center", justify: "end", gap: "3", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Close" }), _jsx(Button, { onClick: handleSave, isLoading: saving, disabled: saving, children: "Save" })] })] }))] }));
+    return (_jsxs(SideDrawer, { isOpen: true, title: `Order ${order?.id ?? orderId}`, onClose: onClose, children: [loading && (_jsx(Row, { align: "center", justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), fetchError && (_jsx(Div, { textSize: "sm", className: "mx-4 mt-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", children: [_jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "5", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[order.status?.toUpperCase()] ?? "default", children: order.status ?? "Unknown" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: toRelativeDate(order.createdAt) })] }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)] mb-2", weight: "semibold", children: "Items" }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.items ?? []).map((item, i) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "truncate", weight: "medium", children: item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: ["Qty: ", item.quantity ?? 1] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toRupees(item.price ?? 0) })] }, i))) })] })), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", justify: "between", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-primary)]", weight: "bold", children: toRupees(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Shipping address" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] })), order.paymentMethod && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Payment" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", transform: "capitalize", children: order.paymentMethod })] })), order.emiEnabled && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: ["EMI plan ", order.emiTenureMonths ? `· ${order.emiTenureMonths} months` : ""] }), _jsx(Badge, { variant: order.emiComplete ? "success" : "warning", children: order.emiComplete ? "Fully paid" : "In progress" })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsx(Text, { size: "xs", color: "muted", children: "Token collected" }), _jsx(Text, { size: "xs", weight: "medium", children: toRupees(order.emiTokenAmount ?? 0) })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-3", children: [_jsx(Text, { size: "xs", color: "muted", children: "Remaining balance" }), _jsx(Text, { size: "xs", weight: "medium", children: toRupees(order.emiRemainingBalance ?? 0) })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.emiInstallments ?? []).map((inst) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Installment ", inst.index, " \u00B7 ", toRupees(inst.amount)] }), _jsx(Text, { size: "xs", color: "muted", children: inst.status === "paid" && inst.paidAt
+                                                                ? `Paid ${toRelativeDate(inst.paidAt)}`
+                                                                : inst.dueDate
+                                                                    ? `Due ${toRelativeDate(inst.dueDate)}`
+                                                                    : "" })] }), _jsxs(Row, { align: "center", gap: "sm", className: "shrink-0", children: [_jsx(Badge, { variant: EMI_INSTALLMENT_BADGE_VARIANT[inst.status] ?? "default", children: inst.status }), inst.status !== "paid" && (_jsx(Button, { action: ACTIONS.STORE["mark-installment-paid"], size: "sm", variant: "outline", isLoading: markingPaidIndex === inst.index, disabled: markingPaidIndex !== null, onClick: () => handleMarkInstallmentPaid(inst.index), children: "Mark paid" }))] })] }, inst.index))) }), emiError && (_jsx(Div, { textSize: "xs", className: "mt-2 border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: emiError }))] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", gap: "3", children: [_jsx(Heading, { level: 4, size: "sm", weight: "semibold", children: "Update order" }), _jsx(Select, { label: "New status", value: newStatus, options: UPDATE_STATUS_OPTIONS, onChange: (e) => setNewStatus(e.target.value) }), _jsx(Input, { label: "Tracking number", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. 12345678901234" }), _jsx(Input, { label: "Carrier", value: carrier, onChange: (e) => setCarrier(e.target.value), placeholder: "e.g. Delhivery, Bluedart" }), _jsx(Input, { label: "Tracking URL (optional)", value: trackingUrl, onChange: (e) => setTrackingUrl(e.target.value), placeholder: "https://...", type: "url" }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }), _jsxs(Row, { border: "top", paddingY: "y-sm-tall", padding: "x-md", align: "center", justify: "end", gap: "3", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Close" }), _jsx(Button, { onClick: handleSave, isLoading: saving, disabled: saving, children: "Save" })] })] }))] }));
 }
 // ---------------------------------------------------------------------------
 // Main view

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

@@ -1,5 +1,5 @@
 import React from "react";
-export type ProductListingMode = "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | "classified" | "digital-code" | "live";
+export type ProductListingMode = "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | "classified" | "digital-code" | "live" | "art" | "stickers";
 export interface SellerProductDraft {
     title?: string;
     slug?: string;
@@ -61,6 +61,10 @@ export interface SellerProductDraft {
     liveCites?: boolean;
     /** Barcode ID of the physical sticker on this item. Auto-generated on save if blank. */
     barcodeId?: string;
+    printSize?: string;
+    printMaterial?: string;
+    printFinish?: string;
+    printEditionSize?: number;
 }
 export interface SellerProductShellProps {
     mode: "create" | "edit";

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

@@ -10,7 +10,21 @@ import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
 import { QuickProductForm } from "./QuickProductForm";
 import { BarcodeField } from "./BarcodeField";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
 import { normalizeError } from "../../../errors/normalize";
+/**
+ * "bundle" is a categoryType, not a ListingType, so it can't live in
+ * LISTING_TYPE_REGISTRY — this is the single, explicit escape hatch that
+ * lets the seller form's registry lookups also cover it.
+ */
+const BUNDLE_PLUGIN_FALLBACK = {
+    priceLabel: "Price (₹)",
+    typeLabel: "Bundle",
+    showsStockQuantity: false,
+};
+function pluginForMode(mode) {
+    return mode === "bundle" ? BUNDLE_PLUGIN_FALLBACK : pluginFor(mode);
+}
 const sellerProductSchema = z.object({
     title: z.string().min(1, "Product title is required").max(200),
     description: z.string().max(10000).optional().or(z.literal("")),
@@ -114,18 +128,59 @@ const LIVE_TRANSPORT_OPTIONS = [
 function StepLiveItemSettings({ values, onChange, }) {
     return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "warning", children: "Live animal / plant listings must comply with all applicable laws, CITES regulations, and local jurisdiction rules. LetItRip is not responsible for legal compliance \u2014 this is solely the seller's responsibility." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "liveSpecies", label: "Species / Common Name", type: "text", value: values.liveSpecies ?? "", onChange: (v) => onChange({ liveSpecies: v }), placeholder: "e.g. Axolotl (Ambystoma mexicanum)" }), _jsx(FormField, { name: "liveAgeMonths", label: "Age (months, optional)", type: "number", value: String(values.liveAgeMonths ?? ""), onChange: (v) => onChange({ liveAgeMonths: v ? Number(v) : undefined }), placeholder: "e.g. 6" })] }), _jsx(FormField, { name: "liveSex", label: "Sex", type: "select", value: values.liveSex ?? "unknown", onChange: (v) => onChange({ liveSex: v }), options: LIVE_SEX_OPTIONS }), _jsx(FormField, { name: "liveCareInfo", label: "Care Instructions (optional)", type: "textarea", value: values.liveCareInfo ?? "", onChange: (v) => onChange({ liveCareInfo: v }), placeholder: "Diet, temperature, habitat requirements\u2026" }), _jsx(FormField, { name: "liveTransportMethod", label: "Transport Method", type: "select", value: values.liveTransportMethod ?? "in-person", onChange: (v) => onChange({ liveTransportMethod: v }), options: LIVE_TRANSPORT_OPTIONS }), values.liveTransportMethod !== "in-person" && (_jsx(FormField, { name: "liveHandlingFee", label: "Handling / Transport Fee (\u20B9, optional)", type: "number", value: toRupees(values.liveHandlingFee), onChange: (v) => onChange({ liveHandlingFee: v ? toPaise(v) : undefined }), placeholder: "0" })), _jsx(FormField, { name: "liveJurisdictions", label: "Jurisdictions where sale is permitted (comma-separated)", type: "text", value: (values.liveJurisdictions ?? []).join(", "), onChange: (v) => onChange({ liveJurisdictions: v.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "e.g. Maharashtra, Karnataka", helpText: "List all Indian states / UTs where you can legally sell" }), _jsx(Toggle, { checked: !!values.liveCites, onChange: (checked) => onChange({ liveCites: checked }), label: "This species requires CITES documentation" })] }));
 }
+// ── Step: Print Meta (art / stickers) ───────────────────────────────────────
+// Shared by both "art" and "stickers" — identical field set, only the intro
+// copy differs (set by the caller via `intro`).
+function StepPrintMetaSettings({ values, onChange, intro, }) {
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: intro }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "printSize", label: "Size", type: "text", value: values.printSize ?? "", onChange: (v) => onChange({ printSize: v }), placeholder: "e.g. A4, 12x18 in" }), _jsx(FormField, { name: "printMaterial", label: "Material", type: "text", value: values.printMaterial ?? "", onChange: (v) => onChange({ printMaterial: v }), placeholder: "e.g. Matte photo paper, Vinyl" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "printFinish", label: "Finish (optional)", type: "text", value: values.printFinish ?? "", onChange: (v) => onChange({ printFinish: v }), placeholder: "e.g. Glossy, Matte, Holographic" }), _jsx(FormField, { name: "printEditionSize", label: "Edition Size (optional)", type: "number", value: String(values.printEditionSize ?? ""), onChange: (v) => onChange({ printEditionSize: v ? Number(v) : undefined }), placeholder: "Leave blank for an open edition" })] })] }));
+}
+const TYPE_SPECIFIC_STEPS = {
+    auction: {
+        id: "auction",
+        label: "Auction Settings",
+        render: ({ values, onChange }) => (_jsx(StepAuctionSettings, { values: values, onChange: onChange })),
+        validate: (v) => (!v.startingBid ? "Starting bid is required" : !v.auctionEndDate ? "Auction end date is required" : null),
+    },
+    "pre-order": {
+        id: "preorder",
+        label: "Pre-Order",
+        sectionHeading: "Pre-Order Settings",
+        render: ({ values, onChange }) => (_jsx(StepPreOrderSettings, { values: values, onChange: onChange })),
+        validate: (v) => (!v.preOrderDeliveryDate ? "Estimated delivery date is required" : null),
+    },
+    classified: {
+        id: "classified",
+        label: "Meetup Details",
+        render: ({ values, onChange }) => (_jsx(StepClassifiedSettings, { values: values, onChange: onChange })),
+        validate: (v) => (!v.classifiedCity?.trim() ? "City is required for classified listings" : null),
+    },
+    "digital-code": {
+        id: "digitalcode",
+        label: "Code Details",
+        render: ({ values, onChange }) => (_jsx(StepDigitalCodeSettings, { values: values, onChange: onChange })),
+    },
+    live: {
+        id: "live",
+        label: "Live Item Details",
+        render: ({ values, onChange }) => (_jsx(StepLiveItemSettings, { values: values, onChange: onChange })),
+        validate: (v) => (!v.liveSpecies?.trim() ? "Species name is required" : null),
+    },
+    art: {
+        id: "printmeta",
+        label: "Print Details",
+        render: ({ values, onChange }) => (_jsx(StepPrintMetaSettings, { values: values, onChange: onChange, intro: "Art prints are sold as physical, printed-only reproductions \u2014 no original artwork or digital files." })),
+    },
+    stickers: {
+        id: "printmeta",
+        label: "Print Details",
+        render: ({ values, onChange }) => (_jsx(StepPrintMetaSettings, { values: values, onChange: onChange, intro: "Sticker listings are sold as physical, printed sheets or packs \u2014 no digital files." })),
+    },
+};
 // ── Step: Pricing ─────────────────────────────────────────────────────────
 function StepPricing({ values, onChange, listingType, }) {
-    const priceLabel = listingType === "auction"
-        ? "Suggested Retail Price (₹)"
-        : listingType === "pre-order"
-            ? "Pre-Order Price (₹)"
-            : listingType === "classified"
-                ? "Asking Price (₹)"
-                : listingType === "digital-code"
-                    ? "Price per Code (₹)"
-                    : "Price (₹)";
-    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "All prices in Indian Rupees (\u20B9)." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: priceLabel, type: "number", value: toRupees(values.price), onChange: (v) => onChange({ price: toPaise(v) }), placeholder: "999" }), _jsx(FormField, { name: "compareAtPrice", label: "Compare-at Price (\u20B9, optional)", type: "number", value: toRupees(values.compareAtPrice), onChange: (v) => onChange({ compareAtPrice: v ? toPaise(v) : undefined }), placeholder: "1299", helpText: "Original price shown as strikethrough" })] }), (listingType === "standard" || listingType === "classified" || listingType === "live") && (_jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? ""), onChange: (v) => onChange({ stockQuantity: Number(v) }), placeholder: "1" })), _jsxs(FormGroup, { columns: 2, children: [_jsx(Toggle, { checked: !!values.featured, onChange: (checked) => onChange({ featured: checked }), label: "Mark as Featured" }), _jsx(Toggle, { checked: !!values.isNew, onChange: (checked) => onChange({ isNew: checked }), label: "Mark as New Arrival" })] })] }));
+    const listingPlugin = pluginForMode(listingType);
+    const priceLabel = listingPlugin.priceLabel;
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "All prices in Indian Rupees (\u20B9)." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: priceLabel, type: "number", value: toRupees(values.price), onChange: (v) => onChange({ price: toPaise(v) }), placeholder: "999" }), _jsx(FormField, { name: "compareAtPrice", label: "Compare-at Price (\u20B9, optional)", type: "number", value: toRupees(values.compareAtPrice), onChange: (v) => onChange({ compareAtPrice: v ? toPaise(v) : undefined }), placeholder: "1299", helpText: "Original price shown as strikethrough" })] }), listingPlugin.showsStockQuantity && (_jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? ""), onChange: (v) => onChange({ stockQuantity: Number(v) }), placeholder: "1" })), _jsxs(FormGroup, { columns: 2, children: [_jsx(Toggle, { checked: !!values.featured, onChange: (checked) => onChange({ featured: checked }), label: "Mark as Featured" }), _jsx(Toggle, { checked: !!values.isNew, onChange: (checked) => onChange({ isNew: checked }), label: "Mark as New Arrival" })] })] }));
 }
 // ── Step: Shipping ────────────────────────────────────────────────────────
 function StepShipping({ values, onChange, renderAddressSelector, }) {
@@ -235,49 +290,8 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
             showToast(err instanceof Error ? err.message : "Failed to publish.", "error");
         }
     }, [draft, onPublish, markClean, showToast]);
-    const listingTypeLabel = listingType === "auction"
-        ? "Auction"
-        : listingType === "pre-order"
-            ? "Pre-Order"
-            : listingType === "bundle"
-                ? "Bundle"
-                : listingType === "classified"
-                    ? "Classified"
-                    : listingType === "digital-code"
-                        ? "Digital Code"
-                        : listingType === "live"
-                            ? "Live Item"
-                            : "Product";
-    const typeSpecificStep = listingType === "auction"
-        ? {
-            label: "Auction Settings",
-            render: ({ values, onChange }) => (_jsx(StepAuctionSettings, { values: values, onChange: onChange })),
-            validate: (v) => (!v.startingBid ? "Starting bid is required" : !v.auctionEndDate ? "Auction end date is required" : null),
-        }
-        : listingType === "pre-order"
-            ? {
-                label: "Pre-Order",
-                render: ({ values, onChange }) => (_jsx(StepPreOrderSettings, { values: values, onChange: onChange })),
-                validate: (v) => (!v.preOrderDeliveryDate ? "Estimated delivery date is required" : null),
-            }
-            : listingType === "classified"
-                ? {
-                    label: "Meetup Details",
-                    render: ({ values, onChange }) => (_jsx(StepClassifiedSettings, { values: values, onChange: onChange })),
-                    validate: (v) => (!v.classifiedCity?.trim() ? "City is required for classified listings" : null),
-                }
-                : listingType === "digital-code"
-                    ? {
-                        label: "Code Details",
-                        render: ({ values, onChange }) => (_jsx(StepDigitalCodeSettings, { values: values, onChange: onChange })),
-                    }
-                    : listingType === "live"
-                        ? {
-                            label: "Live Item Details",
-                            render: ({ values, onChange }) => (_jsx(StepLiveItemSettings, { values: values, onChange: onChange })),
-                            validate: (v) => (!v.liveSpecies?.trim() ? "Species name is required" : null),
-                        }
-                        : null;
+    const listingTypeLabel = pluginForMode(listingType).typeLabel;
+    const typeSpecificStep = TYPE_SPECIFIC_STEPS[listingType] ?? null;
     const steps = [
         {
             label: "Basic",
@@ -349,11 +363,7 @@ export function SellerProductShell({ mode, listingType = "standard", initialValu
     // Edit mode — FormShell with section nav + full form
     const editSections = [
         ...EDIT_SECTIONS,
-        ...(listingType === "auction" ? [{ id: "auction", label: "Auction" }] : []),
-        ...(listingType === "pre-order" ? [{ id: "preorder", label: "Pre-Order" }] : []),
-        ...(listingType === "classified" ? [{ id: "classified", label: "Meetup Details" }] : []),
-        ...(listingType === "digital-code" ? [{ id: "digitalcode", label: "Code Details" }] : []),
-        ...(listingType === "live" ? [{ id: "live", label: "Live Item" }] : []),
+        ...(typeSpecificStep ? [{ id: typeSpecificStep.id, label: typeSpecificStep.label }] : []),
     ];
-    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), listingType === "auction" && (_jsxs(Section, { id: "auction", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Auction Settings" }), _jsx(StepAuctionSettings, { values: draft, onChange: update })] })), listingType === "pre-order" && (_jsxs(Section, { id: "preorder", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pre-Order Settings" }), _jsx(StepPreOrderSettings, { values: draft, onChange: update })] })), listingType === "classified" && (_jsxs(Section, { id: "classified", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Meetup Details" }), _jsx(StepClassifiedSettings, { values: draft, onChange: update })] })), listingType === "digital-code" && (_jsxs(Section, { id: "digitalcode", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Code Details" }), _jsx(StepDigitalCodeSettings, { values: draft, onChange: update })] })), listingType === "live" && (_jsxs(Section, { id: "live", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Live Item Details" }), _jsx(StepLiveItemSettings, { values: draft, onChange: update })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
+    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", previewSlot: previewSlot, children: _jsx(FormShellProvider, { isDirty: isDirty, values: draft, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Section, { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector, renderTemplateSelector: renderTemplateSelector })] }), _jsxs(Section, { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), typeSpecificStep && (_jsxs(Section, { id: typeSpecificStep.id, children: [_jsx(Heading, { level: 3, className: "mb-4", children: typeSpecificStep.sectionHeading ?? typeSpecificStep.label }), typeSpecificStep.render({ values: draft, onChange: update, errors: {} })] })), _jsxs(Section, { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs(Section, { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs(Section, { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update }), onSaveAsTemplate && (_jsxs(Div, { className: "mt-4 border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onSaveAsTemplate(draft), children: "Save as Template" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-secondary-text)]", size: "xs", children: "Save these settings as a reusable template for future listings." })] }))] })] }) }) }));
 }