@mohasinac/appkit 2.4.7 → 2.4.8

package/dist/features/admin/components/AdminProductEditorView.js

@@ -6,6 +6,7 @@ import { Button, DynamicSelect, InlineCreateSelect, Form, Stack, StackedViewShel
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ProductForm } from "../../products/components/ProductForm";
+import { GroupSettingsPanel } from "../../products/components/GroupSettingsPanel";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
 import { BrandQuickCreateForm } from "./BrandQuickCreateForm";
 function modeFromProduct(product) {
@@ -134,7 +135,9 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, ...rest
             _jsxs(Form, { onSubmit: (e) => {
                     e.preventDefault();
                     saveMutation.mutate();
-                }, className: "space-y-6", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Listing type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "standard", children: "Standard" }), _jsx(TabsTrigger, { value: "auction", children: "Auction" }), _jsx(TabsTrigger, { value: "preorder", children: "Pre-order" })] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(DynamicSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(InlineCreateSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(InlineCreateSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                }, className: "space-y-6", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Listing type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "standard", children: "Standard" }), _jsx(TabsTrigger, { value: "auction", children: "Auction" }), _jsx(TabsTrigger, { value: "preorder", children: "Pre-order" })] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(DynamicSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
+                            ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: !!p.isAuction, storeProductsEndpoint: "/api/admin/products", onGroupChanged: () => productQuery.refetch() }))
+                            : undefined, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(InlineCreateSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(InlineCreateSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
                                     if (confirm("Delete this product? This cannot be undone.")) {
                                         deleteMutation.mutate();
                                     }

package/dist/features/auth/hooks/useAuth.js

@@ -51,45 +51,96 @@ export function useLogin(options) {
 export function useGoogleLogin(options) {
     const authEvent = useAuthEvent();
     const [initiating, setInitiating] = useState(false);
+    // popupPending stays true from popup open until auth resolves (success/error/timeout)
+    const [popupPending, setPopupPending] = useState(false);
+    // calledRef prevents both RTDB and postMessage from firing the callbacks
+    const calledRef = useRef(false);
     const onSuccessRef = useRef(options?.onSuccess);
     const onErrorRef = useRef(options?.onError);
     const onSessionSyncedRef = useRef(options?.onSessionSynced);
-    useEffect(() => {
-        onSuccessRef.current = options?.onSuccess;
-    }, [options?.onSuccess]);
-    useEffect(() => {
-        onErrorRef.current = options?.onError;
-    }, [options?.onError]);
-    useEffect(() => {
-        onSessionSyncedRef.current = options?.onSessionSynced;
-    }, [options?.onSessionSynced]);
+    const authEventResetRef = useRef(authEvent.reset);
+    useEffect(() => { onSuccessRef.current = options?.onSuccess; }, [options?.onSuccess]);
+    useEffect(() => { onErrorRef.current = options?.onError; }, [options?.onError]);
+    useEffect(() => { onSessionSyncedRef.current = options?.onSessionSynced; }, [options?.onSessionSynced]);
+    useEffect(() => { authEventResetRef.current = authEvent.reset; }, [authEvent.reset]);
+    // RTDB status watcher — fast path when RTDB is available.
+    // FAILED is intentionally not forwarded to onError here: RTDB connection
+    // failures (e.g. missing database URL) should fall through to the postMessage
+    // fallback so the user still gets a result from the popup.
     useEffect(() => {
         if (authEvent.status === RealtimeEventStatus.SUCCESS) {
+            setPopupPending(false);
+            if (calledRef.current)
+                return;
+            calledRef.current = true;
             Promise.resolve(onSessionSyncedRef.current?.()).then(() => {
                 onSuccessRef.current?.(authEvent.data);
             });
         }
-        else if (authEvent.status === RealtimeEventStatus.FAILED ||
-            authEvent.status === RealtimeEventStatus.TIMEOUT) {
-            onErrorRef.current?.(new Error(authEvent.error ?? "Sign-in failed. Please try again."));
+        else if (authEvent.status === RealtimeEventStatus.TIMEOUT) {
+            // RTDB timed out AND postMessage never arrived (popup likely closed without completing)
+            setPopupPending(false);
+            if (calledRef.current)
+                return;
+            calledRef.current = true;
+            onErrorRef.current?.(new Error(authEvent.error ?? "Sign-in timed out. Please try again."));
         }
+        // FAILED: do not call onError — wait for the postMessage from /auth/close
     }, [authEvent.status, authEvent.error, authEvent.data]);
+    // postMessage fallback — fires when /auth/close sends window.opener.postMessage.
+    // This covers two cases:
+    //   1. RTDB is unavailable (the primary channel failed)
+    //   2. RTDB fires FAILED (connection issue) — postMessage still arrives from the popup
+    // calledRef guards against double-resolution when both RTDB and postMessage fire.
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (event.origin !== window.location.origin)
+                return;
+            if (!event.data || event.data.type !== "letitrip_auth_close")
+                return;
+            if (calledRef.current)
+                return;
+            calledRef.current = true;
+            setPopupPending(false);
+            authEventResetRef.current();
+            if (event.data.status === "success") {
+                const data = event.data.uid
+                    ? { uid: event.data.uid, role: event.data.role ?? "user", isNewUser: Boolean(event.data.isNewUser) }
+                    : null;
+                Promise.resolve(onSessionSyncedRef.current?.()).then(() => {
+                    onSuccessRef.current?.(data);
+                });
+            }
+            else {
+                onErrorRef.current?.(new Error(event.data.error ?? "Sign-in failed. Please try again."));
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, []); // mount once — uses refs, no stale closure risk
     const mutate = useCallback(async () => {
+        calledRef.current = false; // reset for each new auth flow
         const popup = window.open(`${window.location.origin}/auth.html`, "oauth_google", "width=500,height=660,left=400,top=100");
         if (!popup) {
             onErrorRef.current?.(new Error("Popup blocked. Please allow popups for this site."));
             return;
         }
+        setPopupPending(true);
         try {
             setInitiating(true);
             authEvent.reset();
-            const { eventId, customToken } = await apiClient.post(AUTH_ENDPOINTS.EVENT_INIT, {});
+            const { eventId, customToken, rtdbEnabled } = await apiClient.post(AUTH_ENDPOINTS.EVENT_INIT, {});
             const url = `${window.location.origin}${AUTH_ENDPOINTS.GOOGLE_START}?eventId=${encodeURIComponent(eventId)}`;
             localStorage.setItem("letitrip_oauth_redirect", url);
-            authEvent.subscribe(eventId, customToken);
+            // Only subscribe to RTDB if it's available — skipping avoids an immediate
+            // FAILED status (token sign-in error) that would block the postMessage fallback.
+            if (rtdbEnabled !== false) {
+                authEvent.subscribe(eventId, customToken);
+            }
         }
         catch (err) {
             popup.close();
+            setPopupPending(false);
             onErrorRef.current?.(err instanceof Error ? err : new Error("Failed to start sign-in."));
         }
         finally {
@@ -97,6 +148,7 @@ export function useGoogleLogin(options) {
         }
     }, [authEvent]);
     const isLoading = initiating ||
+        popupPending ||
         authEvent.status === RealtimeEventStatus.SUBSCRIBING ||
         authEvent.status === RealtimeEventStatus.PENDING;
     return { mutate, isLoading };

package/dist/features/auth/repository/user.repository.d.ts

@@ -8,6 +8,7 @@ export declare class UserRepository extends BaseRepository<UserDocument> {
     private decryptUser;
     private encryptUserData;
     protected mapDoc<D = UserDocument>(snap: DocumentSnapshot): D;
+    createWithId(id: string, data: Partial<UserDocument>): Promise<UserDocument>;
     create(input: Omit<UserDocument, "id" | "createdAt" | "updatedAt">): Promise<UserDocument>;
     findByEmail(email: string): Promise<UserDocument | null>;
     findByPhone(phoneNumber: string): Promise<UserDocument | null>;

package/dist/features/auth/repository/user.repository.js

@@ -1,6 +1,6 @@
 import { DatabaseError } from "../../../errors";
 import { BaseRepository, getFirestoreCount, prepareForFirestore, } from "../../../providers/db-firebase";
-import { USER_PII_FIELDS, USER_PII_INDEX_MAP, addPiiIndices, decryptPayoutDetails, decryptPiiFields, decryptShippingConfig, encryptPayoutDetails, encryptPiiFields, encryptShippingConfig, piiBlindIndex, } from "../../../security";
+import { USER_PII_FIELDS, decryptPayoutDetails, decryptPiiFields, decryptShippingConfig, encryptPayoutDetails, encryptPiiFields, encryptShippingConfig, piiBlindIndex, } from "../../../security";
 import { USER_COLLECTION, USER_FIELDS, createUserId, } from "../schemas";
 export class UserRepository extends BaseRepository {
     constructor() {
@@ -17,12 +17,12 @@ export class UserRepository extends BaseRepository {
         return decrypted;
     }
     encryptUserData(data) {
+        // encryptPiiFields encrypts each PII field in-place AND adds the corresponding
+        // blind-index sibling (e.g. email → emailIndex) from the plaintext value.
+        // addPiiIndices is intentionally NOT called here — it spreads the original
+        // plaintext `data` back into the result, which would overwrite the encrypted
+        // ciphertext with the original plaintext values, defeating the encryption.
         let encrypted = encryptPiiFields(data, [...USER_PII_FIELDS]);
-        encrypted = addPiiIndices(data, USER_PII_INDEX_MAP);
-        encrypted = {
-            ...encryptPiiFields(data, [...USER_PII_FIELDS]),
-            ...encrypted,
-        };
         if (encrypted.payoutDetails) {
             encrypted.payoutDetails =
                 encryptPayoutDetails(encrypted.payoutDetails);
@@ -37,6 +37,10 @@ export class UserRepository extends BaseRepository {
         const raw = super.mapDoc(snap);
         return this.decryptUser(raw);
     }
+    async createWithId(id, data) {
+        const encrypted = this.encryptUserData(data);
+        return super.createWithId(id, encrypted);
+    }
     async create(input) {
         const firstName = input.displayName?.split(" ")[0] || "user";
         const lastName = input.displayName?.split(" ").slice(1).join(" ") || "account";

package/dist/features/pre-orders/components/PreOrderDetailPageView.js

@@ -16,6 +16,7 @@ import { ProductGalleryClient } from "../../products/components/ProductGalleryCl
 import { ProductFeatureBadges } from "../../products/components/ProductFeatureBadges";
 import { ShareButton } from "../../products/components/ShareButton";
 import { SublistingCarouselSection } from "../../products/components/SublistingCarouselSection";
+import { ShowGroupSection } from "../../products/components/ShowGroupSection";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -97,6 +98,9 @@ export async function PreOrderDetailPageView({ id, onReserveNow }) {
         : [];
     const descriptionHtml = toDescriptionHtml(p.description);
     const sublistingCategoryId = typeof p.sublistingCategoryId === "string" ? p.sublistingCategoryId : null;
+    const groupId = typeof p.groupId === "string" ? p.groupId : null;
+    const isGroupParent = p.isGroupParent === true;
+    const groupTitle = typeof p.groupTitle === "string" ? p.groupTitle : undefined;
     return (_jsx(Main, { children: _jsxs(Container, { size: "xl", className: "px-4 py-6", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between flex-wrap gap-2", children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400 flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRE_ORDERS), className: "hover:text-primary-600 transition-colors", children: "Pre-Orders" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 transition-colors", children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "text-zinc-700 dark:text-zinc-300 truncate max-w-[200px]", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title })), renderInfo: () => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", className: "mb-1.5 flex-wrap", children: [_jsx(Span, { className: "inline-block rounded-full bg-indigo-100 dark:bg-indigo-900/30 px-2.5 py-0.5 text-xs font-semibold text-indigo-700 dark:text-indigo-300", children: "Pre-Order" }), productionStatus && (_jsx(Span, { className: "inline-block rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-0.5 text-xs font-medium text-zinc-600 dark:text-zinc-300", children: PRODUCTION_STATUS_LABELS[productionStatus] ?? productionStatus }))] }), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title })] }), price !== null && (_jsx(Span, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) })), deliveryDate && (_jsxs(Row, { align: "center", gap: "xs", className: "text-sm text-zinc-600 dark:text-zinc-400", children: [_jsx(Span, { children: "\uD83D\uDCC5" }), _jsx(Span, { children: "Estimated delivery:" }), _jsx(Span, { className: "font-medium", children: deliveryDate.toLocaleDateString(undefined, { year: "numeric", month: "long" }) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: isCancellable, labels: {
                                     featured: "Featured",
                                     fasterDelivery: "Faster Delivery",
@@ -113,6 +117,8 @@ export async function PreOrderDetailPageView({ id, onReserveNow }) {
                                     categoryProductCount: (n, cat) => `${n} in ${cat}`,
                                 } }), (categoryName || category || brand) && (_jsxs(Row, { align: "center", gap: "xs", className: "text-xs text-zinc-400 dark:text-zinc-500 flex-wrap", children: [category ? (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: categoryName || category })) : (categoryName ? _jsx(Span, { children: categoryName }) : null), brand && (categoryName || category) && (_jsx(Span, { className: "text-zinc-300 dark:text-zinc-600", children: "\u00B7" })), brand && (brandSlug ? (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: brand })) : (_jsx(Span, { children: brand })))] })), features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx("ul", { className: "space-y-1.5", children: features.map((f, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-4" })), safeSeller && (_jsx(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-3", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-0.5", children: "Sold by" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-3 py-1.5 text-xs font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderSublistingSection: sublistingCategoryId
                         ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
+                        : undefined, renderGroupSection: groupId
+                        ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
                         : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, customTabs: customSections.map((s) => ({
                             id: s.id,
                             label: s.title,

package/dist/features/products/components/GroupSettingsPanel.d.ts

@@ -0,0 +1,13 @@
+export interface GroupSettingsPanelProps {
+    productId: string;
+    productSlug: string;
+    groupId?: string;
+    isGroupParent?: boolean;
+    groupParentSlug?: string;
+    groupChildSlugs?: string[];
+    groupTitle?: string;
+    isAuction?: boolean;
+    storeProductsEndpoint: string;
+    onGroupChanged: () => void;
+}
+export declare function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, isAuction, storeProductsEndpoint, onGroupChanged, }: GroupSettingsPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/products/components/GroupSettingsPanel.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, FormField, Heading, Modal, Row, SideDrawer, Stack, Text, Tabs, TabsContent, TabsList, TabsTrigger, DynamicSelect, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+const CONDITION_OPTIONS = [
+    { value: "new", label: "New" },
+    { value: "used", label: "Used" },
+    { value: "like_new", label: "Like New" },
+    { value: "graded", label: "Graded" },
+    { value: "refurbished", label: "Refurbished" },
+];
+export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, isAuction, storeProductsEndpoint, onGroupChanged, }) {
+    const { showToast } = useToast();
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [editTitle, setEditTitle] = useState(groupTitle ?? "");
+    const [showAddModal, setShowAddModal] = useState(false);
+    const [addTab, setAddTab] = useState("create");
+    const [createForm, setCreateForm] = useState({
+        title: "",
+        price: "",
+        condition: "new",
+    });
+    const [linkTarget, setLinkTarget] = useState(null);
+    const [children, setChildren] = useState(null);
+    if (isAuction)
+        return null;
+    const groupEndpoint = `${storeProductsEndpoint}/${productId}/group`;
+    const childrenEndpoint = `${groupEndpoint}/children`;
+    async function loadChildren() {
+        if (!groupId || !isGroupParent)
+            return;
+        setLoading(true);
+        try {
+            const res = (await apiClient.get(`/api/products/group/${encodeURIComponent(groupId)}`));
+            setChildren(res.data?.items ?? []);
+        }
+        catch {
+            setChildren([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function startGroup() {
+        setLoading(true);
+        try {
+            await apiClient.post(groupEndpoint, { slug: productSlug });
+            showToast("Group started. You are now the parent listing.", "success");
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to start group.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function saveTitle() {
+        setLoading(true);
+        try {
+            await apiClient.patch(groupEndpoint, { groupTitle: editTitle });
+            showToast("Group title saved.", "success");
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to save title.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function dissolveGroup() {
+        if (!confirm("Dissolve this group? All members will be unlinked. This cannot be undone."))
+            return;
+        setLoading(true);
+        try {
+            await apiClient.delete(groupEndpoint);
+            showToast("Group dissolved.", "success");
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to dissolve group.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function unlinkChild(childId) {
+        if (!confirm("Remove this listing from the group?"))
+            return;
+        setLoading(true);
+        try {
+            await apiClient.delete(`${childrenEndpoint}/${childId}`);
+            showToast("Listing removed from group.", "success");
+            setChildren((prev) => prev?.filter((c) => c.id !== childId) ?? null);
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to unlink.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function addCreateChild() {
+        if (!createForm.title || !createForm.price) {
+            showToast("Title and price are required.", "error");
+            return;
+        }
+        setLoading(true);
+        try {
+            await apiClient.post(childrenEndpoint, {
+                mode: "create",
+                title: createForm.title,
+                price: Math.round(parseFloat(createForm.price) * 100),
+                condition: createForm.condition,
+                parentId: productId,
+            });
+            showToast("Child listing created and linked.", "success");
+            setShowAddModal(false);
+            setCreateForm({ title: "", price: "", condition: "new" });
+            loadChildren();
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to create child.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function addLinkChild() {
+        if (!linkTarget) {
+            showToast("Select a listing to link.", "error");
+            return;
+        }
+        setLoading(true);
+        try {
+            await apiClient.post(childrenEndpoint, { mode: "link", childId: linkTarget, parentId: productId });
+            showToast("Listing linked to group.", "success");
+            setShowAddModal(false);
+            setLinkTarget(null);
+            loadChildren();
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to link listing.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function leaveGroup() {
+        if (!confirm("Leave this group? This listing will become standalone."))
+            return;
+        setLoading(true);
+        try {
+            await apiClient.delete(`${storeProductsEndpoint}/${productId}/group/leave`);
+            showToast("Left the group.", "success");
+            onGroupChanged();
+        }
+        catch (e) {
+            showToast(e?.message ?? "Failed to leave group.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function loadLinkOptions(query, page) {
+        const params = new URLSearchParams({ page: String(page), pageSize: "25" });
+        if (query)
+            params.set("q", query);
+        params.set("filters", "isAuction==false");
+        const res = (await apiClient.get(`${storeProductsEndpoint}?${params.toString()}`));
+        const items = (res.products ?? res.items ?? []).map((p) => ({ value: p.id, label: p.title }));
+        return { items, hasMore: false };
+    }
+    const childSlugsCount = groupChildSlugs?.length ?? 0;
+    return (_jsxs(Div, { children: [_jsxs("button", { type: "button", onClick: () => {
+                    const next = !open;
+                    setOpen(next);
+                    if (next && isGroupParent && children === null)
+                        loadChildren();
+                }, className: "w-full flex items-center justify-between py-2 text-left group", "aria-expanded": open, children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Group Settings" }), _jsx("span", { className: "text-xs text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors", children: open ? "▲" : "▼" })] }), open && (_jsxs(Stack, { gap: "sm", className: "mt-3 p-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50/50 dark:bg-zinc-800/30", children: [!groupId && !groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Group related listings together \u2014 e.g. a set, bundle, or multi-part item. Parts can be sold individually but shown together." }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: startGroup, isLoading: loading, children: "Start a group" })] })), isGroupParent && groupId && (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { align: "start", gap: "sm", className: "flex-wrap", children: [_jsx("div", { className: "flex-1 min-w-[200px]", children: _jsx(FormField, { name: "groupTitle", label: "Group title", type: "text", value: editTitle, onChange: setEditTitle, placeholder: "e.g. Human Toy Complete Set" }) }), _jsx("div", { className: "pt-6", children: _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: saveTitle, isLoading: loading, children: "Save title" }) })] }), _jsxs(Div, { children: [_jsxs(Text, { className: "text-xs font-semibold text-zinc-600 dark:text-zinc-400 mb-2", children: ["Members (", childSlugsCount + 1, " \u2014 including this listing)"] }), loading && !children ? (_jsx(Text, { className: "text-xs text-zinc-400", children: "Loading\u2026" })) : (_jsxs("div", { className: "divide-y divide-zinc-100 dark:divide-zinc-800", children: [_jsxs(Row, { align: "center", gap: "sm", className: "py-2", children: [_jsx("span", { className: "rounded bg-[var(--appkit-color-primary,#6366f1)]/10 text-[var(--appkit-color-primary,#6366f1)] text-[10px] font-semibold px-1.5 py-0.5", children: "Parent" }), _jsx(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200 flex-1", children: productSlug })] }), (children ?? []).filter((c) => c.id !== productId).map((child) => (_jsxs(Row, { align: "center", gap: "sm", className: "py-2", children: [child.images?.[0] ? (
+                                                    // eslint-disable-next-line @next/next/no-img-element
+                                                    _jsx("img", { src: child.images[0], alt: child.title, className: "w-8 h-8 rounded-full object-cover border border-zinc-200 dark:border-zinc-700" })) : (_jsx("div", { className: "w-8 h-8 rounded-full bg-zinc-100 dark:bg-zinc-800" })), _jsx(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200 flex-1 truncate", children: child.title }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => unlinkChild(child.id), isLoading: loading, className: "text-red-500 hover:text-red-600 text-xs", children: "Unlink" })] }, child.id)))] }))] }), _jsxs(Row, { gap: "sm", className: "flex-wrap", children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setShowAddModal(true), children: "Add child listing" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: dissolveGroup, isLoading: loading, className: "text-red-500 hover:text-red-600", children: "Dissolve group" })] })] })), !isGroupParent && groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400", children: ["Part of:", " ", _jsx("span", { className: "font-medium text-zinc-800 dark:text-zinc-200", children: groupTitle ?? groupParentSlug })] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Parent listing: ", _jsx("code", { className: "font-mono", children: groupParentSlug })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: leaveGroup, isLoading: loading, className: "text-red-500 hover:text-red-600 w-fit", children: "Leave group" })] }))] })), (groupChildSlugs?.length ?? 0) >= 4 ? (_jsx(SideDrawer, { isOpen: showAddModal, onClose: () => setShowAddModal(false), title: "Add child listing", children: _jsx(AddChildContent, { addTab: addTab, setAddTab: setAddTab, createForm: createForm, setCreateForm: setCreateForm, productSlug: productSlug, linkTarget: linkTarget, setLinkTarget: setLinkTarget, loadLinkOptions: loadLinkOptions, onAddCreate: addCreateChild, onAddLink: addLinkChild, loading: loading }) })) : (_jsx(Modal, { open: showAddModal, onClose: () => setShowAddModal(false), title: "Add child listing", size: "lg", children: _jsx(AddChildContent, { addTab: addTab, setAddTab: setAddTab, createForm: createForm, setCreateForm: setCreateForm, productSlug: productSlug, linkTarget: linkTarget, setLinkTarget: setLinkTarget, loadLinkOptions: loadLinkOptions, onAddCreate: addCreateChild, onAddLink: addLinkChild, loading: loading }) }))] }));
+}
+function AddChildContent({ addTab, setAddTab, createForm, setCreateForm, productSlug, linkTarget, setLinkTarget, loadLinkOptions, onAddCreate, onAddLink, loading, }) {
+    return (_jsx(Stack, { gap: "md", children: _jsxs(Tabs, { value: addTab, onChange: (v) => setAddTab(v), children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "create", children: "Create new child" }), _jsx(TabsTrigger, { value: "link", children: "Link existing" })] }), _jsx(TabsContent, { value: "create", children: _jsxs(Stack, { gap: "sm", className: "mt-4", children: [_jsx(FormField, { name: "childTitle", label: "Title *", type: "text", value: createForm.title, onChange: (v) => setCreateForm({ ...createForm, title: v }), placeholder: `${productSlug}-part` }), _jsx(FormField, { name: "childPrice", label: "Price (\u20B9) *", type: "number", value: createForm.price, onChange: (v) => setCreateForm({ ...createForm, price: v }), placeholder: "0" }), _jsxs("div", { children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Condition" }), _jsx("select", { value: createForm.condition, onChange: (e) => setCreateForm({ ...createForm, condition: e.target.value }), className: "w-full rounded-md border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-800 dark:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary,#6366f1)]", children: CONDITION_OPTIONS.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }), _jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: "Other fields (category, brand, shipping, return policy) are inherited from this parent listing. Need more control? Edit the full listing after saving." }), _jsx(Button, { type: "button", onClick: onAddCreate, isLoading: loading, disabled: !createForm.title || !createForm.price, children: "Create and link child" })] }) }), _jsx(TabsContent, { value: "link", children: _jsxs(Stack, { gap: "sm", className: "mt-4", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Search your existing products or pre-orders. Auctions cannot be linked." }), _jsx(DynamicSelect, { value: linkTarget, onChange: (v) => setLinkTarget(v), loadOptions: loadLinkOptions, placeholder: "Search listings\u2026", searchPlaceholder: "Type title or slug\u2026", noResultsText: "No matching listings found", ariaLabel: "Listing to link" }), _jsx(Button, { type: "button", onClick: onAddLink, isLoading: loading, disabled: !linkTarget, children: "Link to group" })] }) })] }) }));
+}

package/dist/features/products/components/PreOrderDetailView.d.ts

@@ -10,7 +10,9 @@ export interface PreOrderDetailViewProps extends Omit<DetailViewShellProps, "mai
     renderBuyBar?: () => React.ReactNode;
     /** Rendered between the main grid and the below-fold tabs (e.g. sub-listing carousel). */
     renderSublistingSection?: () => React.ReactNode;
+    /** Rendered below the sub-listing section and above the tabs (e.g. group carousel). */
+    renderGroupSection?: () => React.ReactNode;
     renderTabs?: () => React.ReactNode;
     renderRelated?: () => React.ReactNode;
 }
-export declare function PreOrderDetailView({ renderGallery, renderInfo, renderBuyBar, renderSublistingSection, renderTabs, renderRelated, isLoading, ...rest }: PreOrderDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function PreOrderDetailView({ renderGallery, renderInfo, renderBuyBar, renderSublistingSection, renderGroupSection, renderTabs, renderRelated, isLoading, ...rest }: PreOrderDetailViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/PreOrderDetailView.js

@@ -1,9 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { DetailViewShell } from "../../../ui";
-export function PreOrderDetailView({ renderGallery, renderInfo, renderBuyBar, renderSublistingSection, renderTabs, renderRelated, isLoading = false, ...rest }) {
+export function PreOrderDetailView({ renderGallery, renderInfo, renderBuyBar, renderSublistingSection, renderGroupSection, renderTabs, renderRelated, isLoading = false, ...rest }) {
+    const sublistingNode = renderSublistingSection?.();
+    const groupNode = renderGroupSection?.();
+    const afterMainNode = sublistingNode || groupNode ? (_jsxs(React.Fragment, { children: [sublistingNode, groupNode] })) : undefined;
     return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: "grid-2", isLoading: isLoading, mainSlots: [
             renderGallery?.(isLoading),
             _jsxs(React.Fragment, { children: [renderInfo?.(isLoading), renderBuyBar?.()] }, "info"),
-        ], afterMain: renderSublistingSection?.(), belowFold: [renderTabs?.(), renderRelated?.()] }));
+        ], afterMain: afterMainNode, belowFold: [renderTabs?.(), renderRelated?.()] }));
 }

package/dist/features/products/components/ProductDetailPageView.js

@@ -17,6 +17,7 @@ import { BuyBar } from "./BuyBar";
 import { ShareButton } from "./ShareButton";
 import { CustomSectionTabContent } from "./CustomSectionTabContent";
 import { SublistingCarouselSection } from "./SublistingCarouselSection";
+import { ShowGroupSection } from "./ShowGroupSection";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -157,6 +158,9 @@ export async function ProductDetailPageView({ slug, renderOfferAction, }) {
             : null;
     const descriptionHtml = toDescriptionHtml(p.description);
     const sublistingCategoryId = typeof p.sublistingCategoryId === "string" ? p.sublistingCategoryId : null;
+    const groupId = typeof p.groupId === "string" ? p.groupId : null;
+    const isGroupParent = p.isGroupParent === true;
+    const groupTitle = typeof p.groupTitle === "string" ? p.groupTitle : undefined;
     // -- Fetch reviews + related in parallel ------------------------------------
     const [reviewDocs, relatedDocs] = await Promise.all([
         reviewRepository
@@ -214,6 +218,8 @@ export async function ProductDetailPageView({ slug, renderOfferAction, }) {
                                         { icon: "⭐", label: "Quality\nGuarantee" },
                                     ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { className: "text-base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] })), renderSublistingSection: sublistingCategoryId
                         ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
+                        : undefined, renderGroupSection: groupId
+                        ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
                         : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                             id: s.id,
                             label: s.title,

package/dist/features/products/components/ProductDetailView.d.ts

@@ -10,6 +10,8 @@ export interface ProductDetailViewProps extends Omit<DetailViewShellProps, "main
     renderActions?: () => React.ReactNode;
     /** Rendered between the main grid and the below-fold tabs (e.g. sub-listing carousel). */
     renderSublistingSection?: () => React.ReactNode;
+    /** Rendered below the sub-listing section and above the tabs (e.g. group carousel). */
+    renderGroupSection?: () => React.ReactNode;
     renderTabs?: () => React.ReactNode;
     renderRelated?: () => React.ReactNode;
     /**
@@ -23,4 +25,4 @@ export interface ProductDetailViewProps extends Omit<DetailViewShellProps, "main
      */
     stickyRailOffset?: string;
 }
-export declare function ProductDetailView({ renderGallery, renderInfo, renderActions, renderSublistingSection, renderTabs, renderRelated, isLoading, stickyActionRail, stickyRailOffset, ...rest }: ProductDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductDetailView({ renderGallery, renderInfo, renderActions, renderSublistingSection, renderGroupSection, renderTabs, renderRelated, isLoading, stickyActionRail, stickyRailOffset, ...rest }: ProductDetailViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/ProductDetailView.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { DetailViewShell } from "../../../ui";
-export function ProductDetailView({ renderGallery, renderInfo, renderActions, renderSublistingSection, renderTabs, renderRelated, isLoading = false, stickyActionRail = true, stickyRailOffset = "top-20", ...rest }) {
+export function ProductDetailView({ renderGallery, renderInfo, renderActions, renderSublistingSection, renderGroupSection, renderTabs, renderRelated, isLoading = false, stickyActionRail = true, stickyRailOffset = "top-20", ...rest }) {
+    const sublistingNode = renderSublistingSection?.();
+    const groupNode = renderGroupSection?.();
+    const afterMainNode = sublistingNode || groupNode ? (_jsxs(React.Fragment, { children: [sublistingNode, groupNode] })) : undefined;
     return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: "grid-3", isLoading: isLoading, stickyActionRail: stickyActionRail, stickyRailOffset: stickyRailOffset, mainSlots: [
             renderGallery?.(isLoading),
             renderInfo?.(isLoading),
             renderActions?.(),
-        ], afterMain: renderSublistingSection?.(), belowFold: [renderTabs?.(), renderRelated?.()] }));
+        ], afterMain: afterMainNode, belowFold: [renderTabs?.(), renderRelated?.()] }));
 }

package/dist/features/products/components/ProductForm.d.ts

@@ -60,6 +60,11 @@ export interface ProductFormProps {
     onMediaAbort?: (stagedUrls: string[]) => void | Promise<void>;
     /** Currency prefix for numeric money inputs (e.g. "₹", "$", "€"). */
     currencyPrefix?: string;
+    /**
+     * Render a Group Settings panel (GP2). Only passed when editing an existing
+     * non-auction product. Returns null/undefined to omit.
+     */
+    renderGroupSettings?: (product: ProductFormValue) => React.ReactNode;
 }
-export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, renderGroupSettings, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/products/components/ProductForm.js

@@ -16,7 +16,7 @@ export const PRODUCT_STATUS_OPTIONS = [
     { value: "discontinued", label: "Discontinued" },
     { value: "sold", label: "Sold" },
 ];
-export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", }) {
+export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", renderGroupSettings, }) {
     const t = useTranslations("adminProducts");
     const { upload } = useMediaUpload();
     const galleryIndexRef = useRef(0);
@@ -137,5 +137,5 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                     value: product.pickupAddressId || "",
                     onChange: (value) => update({ pickupAddressId: value }),
                     disabled: isReadonly,
-                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(SublistingCategorySelect, { value: product.sublistingCategoryId ?? "", onChange: (id) => update({ sublistingCategoryId: id || undefined }), disabled: isReadonly }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1 text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Custom Sections" }), _jsx(Text, { className: "mb-3 text-xs text-zinc-500 dark:text-zinc-400", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
+                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(SublistingCategorySelect, { value: product.sublistingCategoryId ?? "", onChange: (id) => update({ sublistingCategoryId: id || undefined }), disabled: isReadonly }), !product.isAuction && renderGroupSettings?.(product), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1 text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Custom Sections" }), _jsx(Text, { className: "mb-3 text-xs text-zinc-500 dark:text-zinc-400", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
 }

package/dist/features/products/components/ShowGroupSection.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    groupId: string;
+    currentSlug: string;
+    isParent: boolean;
+    groupTitle?: string;
+}
+export declare function ShowGroupSection({ groupId, currentSlug, isParent, groupTitle }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};