@mohasinac/appkit 3.9.1 → 4.0.0

package/dist/features/layout/FooterLayout.js

@@ -8,7 +8,7 @@ export function FooterLayout({ brandName, brandDescription, socialLinks, linkGro
     const [openGroups, setOpenGroups] = useState({});
     const toggleGroup = (idx) => setOpenGroups((prev) => ({ ...prev, [idx]: !prev[idx] }));
     const visibleTrustItems = trustBarItems.filter((item) => item.visible !== false);
-    return (_jsxs(BlockFooter, { id: id, className: "bg-zinc-50 bg-[var(--appkit-color-bg)] border-t border-[var(--appkit-color-border-subtle)]", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { border: "subtle", className: "border-b", padding: "y-xl", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-[var(--appkit-space-10)]", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { textSize: "sm", gap: "sm", className: "min-w-[160px]", children: [_jsx(Span, { className: "flex-shrink-0 text-primary-600 dark:text-secondary-400 w-5 h-5", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { size: "sm", weight: "bold", className: "block", color: "primary", children: item.label }), item.subtitle && (_jsx(Span, { size: "xs", className: "block", color: "muted", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px] lg:py-[var(--appkit-space-14)]", padding: "y-2xl", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-[var(--appkit-space-10)] lg:gap-[var(--appkit-space-16)]", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 5, size: "xl", weight: "bold", color: "primary", children: brandName }), _jsx(Text, { className: "leading-relaxed max-w-sm", color: "muted", size: "sm", children: brandDescription }), socialLinks.length > 0 && (_jsx(Row, { as: Ul, gap: "sm", children: socialLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, "aria-label": link.ariaLabel, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-9 h-9 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary hover:border-primary/40 dark:hover:border-secondary/40 transition-colors", children: link.icon }) }, link.platform))) })), newsletterEnabled && newsletterSlot && (_jsx(Div, { padding: "t-xs", children: newsletterSlot }))] }), _jsx(Div, { className: `lg:col-span-3 grid grid-cols-1 gap-[var(--appkit-space-0)] lg:gap-[var(--appkit-space-8)] ${linkGroups.length <= 3 ? "lg:grid-cols-3" :
+    return (_jsxs(BlockFooter, { id: id, className: "bg-[var(--appkit-color-bg)] border-t border-[var(--appkit-color-border-subtle)]", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { border: "subtle", className: "border-b", padding: "y-xl", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-[var(--appkit-space-10)]", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { textSize: "sm", gap: "sm", className: "min-w-[160px]", children: [_jsx(Span, { className: "flex-shrink-0 text-primary-600 dark:text-secondary-400 w-5 h-5", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { size: "sm", weight: "bold", className: "block", color: "primary", children: item.label }), item.subtitle && (_jsx(Span, { size: "xs", className: "block", color: "muted", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px] lg:py-[var(--appkit-space-14)]", padding: "y-2xl", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-[var(--appkit-space-10)] lg:gap-[var(--appkit-space-16)]", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 5, size: "xl", weight: "bold", color: "primary", children: brandName }), _jsx(Text, { className: "leading-relaxed max-w-sm", color: "muted", size: "sm", children: brandDescription }), socialLinks.length > 0 && (_jsx(Row, { as: Ul, gap: "sm", children: socialLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, "aria-label": link.ariaLabel, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-9 h-9 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary hover:border-primary/40 dark:hover:border-secondary/40 transition-colors", children: link.icon }) }, link.platform))) })), newsletterEnabled && newsletterSlot && (_jsx(Div, { padding: "t-xs", children: newsletterSlot }))] }), _jsx(Div, { className: `lg:col-span-3 grid grid-cols-1 gap-[var(--appkit-space-0)] lg:gap-[var(--appkit-space-8)] ${linkGroups.length <= 3 ? "lg:grid-cols-3" :
                                     linkGroups.length === 4 ? "lg:grid-cols-4" :
-                                        "lg:grid-cols-5"}`, children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => toggleGroup(idx), className: "w-full justify-between border-b border-zinc-200 py-[var(--appkit-space-3)] text-left text-[length:var(--appkit-text-sm)] font-semibold text-zinc-800 transition-colors hover:text-zinc-950 border-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text)] dark:hover:text-white lg:hidden", "aria-expanded": !!openGroups[idx], children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `lg:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-[var(--appkit-space-3)]" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg:block", children: [_jsx(Text, { className: "tracking-wider mb-3", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Stack, { direction: "sm-row", color: "muted", textSize: "xs", justify: "between", border: "default", className: "mt-10 border-t border-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]", padding: "t-lg", align: "center", gap: "3", children: [_jsx(Text, { size: "xs", color: "muted", children: copyrightText }), bottomLinks.length > 0 && (_jsx(Nav, { "aria-label": "Site utilities", children: _jsx(Ul, { className: "flex flex-wrap items-center gap-x-4 gap-y-1 justify-center", children: bottomLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors underline-offset-2 hover:underline", children: link.label }) }, link.href))) }) })), madeInText && (_jsx(Text, { size: "xs", color: "muted", children: madeInText }))] })] })] }));
+                                        "lg:grid-cols-5"}`, children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => toggleGroup(idx), className: "w-full justify-between border-b py-[var(--appkit-space-3)] text-left text-[length:var(--appkit-text-sm)] font-semibold transition-colors border-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text)] hover:text-primary dark:hover:text-secondary lg:hidden", "aria-expanded": !!openGroups[idx], children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `lg:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-[var(--appkit-space-3)]" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg:block", children: [_jsx(Text, { className: "tracking-wider mb-3", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Stack, { direction: "sm-row", color: "muted", textSize: "xs", justify: "between", border: "default", className: "mt-10 border-t border-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]", padding: "t-lg", align: "center", gap: "3", children: [_jsx(Text, { size: "xs", color: "muted", children: copyrightText }), bottomLinks.length > 0 && (_jsx(Nav, { "aria-label": "Site utilities", children: _jsx(Ul, { className: "flex flex-wrap items-center gap-x-4 gap-y-1 justify-center", children: bottomLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors underline-offset-2 hover:underline", children: link.label }) }, link.href))) }) })), madeInText && (_jsx(Text, { size: "xs", color: "muted", children: madeInText }))] })] })] }));
 }

package/dist/features/lottery/schemas/zod.d.ts

@@ -66,8 +66,8 @@ export declare const submitLotteryPullSchema: z.ZodEffects<z.ZodObject<{
     purchasedItemNumber: z.ZodNumber;
     userPhone: z.ZodString;
 }, "strip", z.ZodTypeAny, {
-    userId: string;
     transactionId: string;
+    userId: string;
     userPhone: string;
     sourceType: "product" | "event";
     paymentTime: string;
@@ -77,8 +77,8 @@ export declare const submitLotteryPullSchema: z.ZodEffects<z.ZodObject<{
     userDisplayName?: string | undefined;
     eventId?: string | undefined;
 }, {
-    userId: string;
     transactionId: string;
+    userId: string;
     userPhone: string;
     sourceType: "product" | "event";
     paymentTime: string;
@@ -88,8 +88,8 @@ export declare const submitLotteryPullSchema: z.ZodEffects<z.ZodObject<{
     userDisplayName?: string | undefined;
     eventId?: string | undefined;
 }>, {
-    userId: string;
     transactionId: string;
+    userId: string;
     userPhone: string;
     sourceType: "product" | "event";
     paymentTime: string;
@@ -99,8 +99,8 @@ export declare const submitLotteryPullSchema: z.ZodEffects<z.ZodObject<{
     userDisplayName?: string | undefined;
     eventId?: string | undefined;
 }, {
-    userId: string;
     transactionId: string;
+    userId: string;
     userPhone: string;
     sourceType: "product" | "event";
     paymentTime: string;

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

@@ -66,6 +66,10 @@ export interface PayoutDocument extends BaseDocument {
     netAmount?: number;
     requestedAt: Date;
     processedAt?: Date;
+    /** UTR / UPI ref / bank transfer ID entered by admin when marking paid. */
+    transactionId?: string;
+    /** Seller-set personal follow-up flag — surfaced only to the owning seller, never mutated by admin. */
+    sellerReminderFlag?: boolean;
 }
 export declare const PAYOUT_COLLECTION: "payouts";
 export declare const PAYOUT_INDEXED_FIELDS: readonly ["storeId", "status", "requestedAt", "createdAt"];
@@ -88,6 +92,8 @@ export declare const PAYOUT_FIELDS: {
 };
 export declare const PAYOUT_PUBLIC_FIELDS: readonly ["id", "storeId", "amount", "currency", "status", "paymentMethod", "requestedAt", "processedAt", "createdAt"];
 export declare const PAYOUT_ADMIN_UPDATEABLE_FIELDS: readonly ["status", "adminNote", "processedAt"];
+/** The only field a seller may write on their own payout doc. */
+export declare const PAYOUT_SELLER_UPDATEABLE_FIELDS: readonly ["sellerReminderFlag"];
 export type PayoutCreateInput = Omit<PayoutDocument, "id" | "createdAt" | "updatedAt" | "status" | "requestedAt">;
 export type PayoutUpdateInput = Partial<Pick<PayoutDocument, (typeof PAYOUT_ADMIN_UPDATEABLE_FIELDS)[number]>>;
 export declare const payoutQueryHelpers: {

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

@@ -52,6 +52,8 @@ export const PAYOUT_ADMIN_UPDATEABLE_FIELDS = [
     "adminNote",
     "processedAt",
 ];
+/** The only field a seller may write on their own payout doc. */
+export const PAYOUT_SELLER_UPDATEABLE_FIELDS = ["sellerReminderFlag"];
 export const payoutQueryHelpers = {
     byStore: (storeId) => ["storeId", "==", storeId],
     byStatus: (status) => ["status", "==", status],

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

@@ -1,8 +1,7 @@
 import React from "react";
 export interface SellerBundlesViewProps {
-    getEditHref: (row: {
-        id: string;
-    }) => string;
+    /** Plain string with an `{id}` placeholder — safe to build in a Server Component page.tsx. */
+    editHrefTemplate: string;
     newHref: string;
 }
-export declare function SellerBundlesView({ getEditHref, newHref }: SellerBundlesViewProps): React.JSX.Element;
+export declare function SellerBundlesView({ editHrefTemplate, newHref }: SellerBundlesViewProps): React.JSX.Element;

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

@@ -37,7 +37,7 @@ const COLUMNS = [
     },
     { key: "updatedAt", header: "Updated", className: "w-28" },
 ];
-export function SellerBundlesView({ getEditHref, newHref }) {
+export function SellerBundlesView({ editHrefTemplate, newHref }) {
     const config = {
         portal: "seller",
         title: "Bundles",
@@ -78,7 +78,7 @@ export function SellerBundlesView({ getEditHref, newHref }) {
                 parts.push(sieveFilter("bundleStockStatus", SIEVE_OP.EQ, filterState.bundleStockStatus));
             return parts.join(",") || undefined;
         },
-        getRowHref: getEditHref,
+        rowHrefTemplate: editHrefTemplate,
         toolbarExtra: (_jsx(Button, { asChild: true, size: "sm", variant: "primary", children: _jsx(TextLink, { href: newHref, layout: "flex", align: "center", gap: "xs", children: "+ New Bundle" }) })),
         // Rule #7: bulk-action array sourced from the SELLER_BULK_ACTIONS preset.
         buildBulkActions: (selection) => {

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

@@ -1,7 +1,4 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-export interface SellerPayoutsViewProps extends ListingLayoutProps {
-    onViewClick?: (id: string) => void;
-    onExportClick?: (id: string) => void;
-}
-export declare function SellerPayoutsView({ children, onViewClick, onExportClick, ...props }: SellerPayoutsViewProps): React.JSX.Element;
+export type SellerPayoutsViewProps = ListingLayoutProps;
+export declare function SellerPayoutsView({ children, ...props }: SellerPayoutsViewProps): React.JSX.Element;

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

@@ -1,18 +1,77 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
-import React from "react";
-import { FilterChipGroup, ListingLayout, RowActionMenu } from "../../../ui";
+import React, { useState } from "react";
+import { Badge, Div, FilterChipGroup, ListingLayout, Row, RowActionMenu, SideDrawer, Span, Stack, Text, Toggle, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
+import { apiClient } from "../../../http";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
-export function SellerPayoutsView({ children, onViewClick, onExportClick, ...props }) {
+const PAYOUT_STAGES = ["pending", "processing", "paid"];
+const PAYOUT_CYCLE_DAYS = 7;
+function formatDate(value) {
+    if (!value)
+        return "—";
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? "—" : d.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
+}
+function StatusProgress({ status }) {
+    const normalized = status.toLowerCase();
+    if (normalized === "failed") {
+        return _jsx(Badge, { variant: "danger", children: "Failed" });
+    }
+    const currentIndex = PAYOUT_STAGES.indexOf(normalized);
+    return (_jsx(Row, { gap: "xs", align: "center", children: PAYOUT_STAGES.map((stage, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Div, { className: `h-0.5 w-6 ${i <= currentIndex ? "bg-primary" : "bg-[var(--appkit-color-border)]"}` }), _jsx(Span, { size: "xs", weight: i === currentIndex ? "bold" : "medium", className: i <= currentIndex ? "text-primary" : "text-[var(--appkit-color-text-muted)]", children: stage[0].toUpperCase() + stage.slice(1) })] }, stage))) }));
+}
+export function SellerPayoutsView({ children, ...props }) {
+    const { showToast } = useToast();
+    const [selectedPayout, setSelectedPayout] = useState(null);
+    const [reminderPending, setReminderPending] = useState(false);
+    // Mirrors the raw API record per row id so the detail panel can open
+    // instantly from data already in memory (list already fetched it) —
+    // matches AdminProductsView's rawByIdRef pattern.
+    const rawByIdRef = React.useRef({});
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
     }
+    const handleExport = (rows) => {
+        const header = ["id", "amount", "currency", "status", "requestedAt", "processedAt", "transactionId"];
+        const lines = [header.join(",")];
+        for (const p of rows) {
+            lines.push(header.map((k) => JSON.stringify(p[k] ?? "")).join(","));
+        }
+        const blob = new Blob([lines.join("\n")], { type: "text/csv" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `payouts-${new Date().toISOString().slice(0, 10)}.csv`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const handleToggleReminder = async (next) => {
+        if (!selectedPayout)
+            return;
+        setReminderPending(true);
+        try {
+            await apiClient.patch(SELLER_ENDPOINTS.PAYOUT_BY_ID(String(selectedPayout.id)), {
+                sellerReminderFlag: next,
+            });
+            setSelectedPayout((prev) => (prev ? { ...prev, sellerReminderFlag: next } : prev));
+            showToast(next ? "Reminder set." : "Reminder cleared.", "success");
+        }
+        catch (err) {
+            void normalizeError(err);
+            showToast("Failed to update reminder.", "error");
+        }
+        finally {
+            setReminderPending(false);
+        }
+    };
     const config = {
         portal: "seller",
         title: "Payouts",
@@ -26,29 +85,49 @@ export function SellerPayoutsView({ children, onViewClick, onExportClick, ...pro
             { value: sortBy("createdAt", "DESC"), label: "Newest" },
             { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         ],
-        mapRows: (response) => toRecordArray(response.payouts).map((item, index) => ({
-            id: toStringValue(item.id, `payout-${index}`),
-            primary: `Payout #${toStringValue(item.payoutNumber ?? item.id, "Unknown")}`,
-            secondary: [
-                toCurrency(item.amount ?? item.totalAmount),
-                `Requested: ${toRelativeDate(item.requestedAt ?? item.createdAt)}`,
-            ].join(" · "),
-            status: toStringValue(item.status, "Pending"),
-            updatedAt: toRelativeDate(item.processedAt ?? item.updatedAt ?? item.createdAt),
-        })),
+        mapRows: (response) => toRecordArray(response.payouts).map((item, index) => {
+            const id = toStringValue(item.id, `payout-${index}`);
+            rawByIdRef.current[id] = item;
+            return {
+                id,
+                primary: `Payout #${toStringValue(item.payoutNumber ?? item.id, "Unknown")}`,
+                secondary: [
+                    toCurrency(item.amount ?? item.totalAmount),
+                    `Requested: ${toRelativeDate(item.requestedAt ?? item.createdAt)}`,
+                ].join(" · "),
+                status: toStringValue(item.status, "Pending"),
+                updatedAt: toRelativeDate(item.processedAt ?? item.updatedAt ?? item.createdAt),
+            };
+        }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
             ? response.meta.total
             : mappedRows.length,
         buildFilters: (state) => state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined,
+        // Rule #7: bulk-action array sourced from the CTA registry, not inline objects.
+        buildBulkActions: (selection) => [
+            buildBulkAction(ACTIONS.STORE["export-payout"], () => {
+                const rows = selection.selectedIds
+                    .map((id) => rawByIdRef.current[id])
+                    .filter((r) => Boolean(r));
+                handleExport(rows);
+                selection.clearSelection();
+            }),
+        ],
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                ...(onViewClick
-                    ? [{ label: ACTIONS.STORE["view-payout"].label, onClick: () => onViewClick(row.id) }]
-                    : []),
-                ...(onExportClick
-                    ? [{ label: ACTIONS.STORE["export-payout"].label, onClick: () => onExportClick(row.id) }]
-                    : []),
+                {
+                    label: ACTIONS.STORE["view-payout"].label,
+                    onClick: () => setSelectedPayout(rawByIdRef.current[row.id] ?? { id: row.id }),
+                },
+                {
+                    label: ACTIONS.STORE["export-payout"].label,
+                    onClick: () => handleExport([rawByIdRef.current[row.id] ?? { id: row.id }]),
+                },
             ] })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PAYOUT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
     };
-    return _jsx(DataListingView, { config: config });
+    const expectedByDate = selectedPayout?.requestedAt
+        ? new Date(new Date(selectedPayout.requestedAt).getTime() + PAYOUT_CYCLE_DAYS * 24 * 60 * 60 * 1000)
+        : null;
+    const orderIds = Array.isArray(selectedPayout?.orderIds) ? selectedPayout.orderIds : [];
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: Boolean(selectedPayout), onClose: () => setSelectedPayout(null), title: selectedPayout ? `Payout #${toStringValue(selectedPayout.payoutNumber ?? selectedPayout.id, "")}` : "Payout", mode: "view", children: selectedPayout && (_jsxs(Stack, { gap: "lg", children: [_jsx(StatusProgress, { status: toStringValue(selectedPayout.status, "pending") }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Amount" }), _jsx(Text, { size: "xl", weight: "bold", children: toCurrency(selectedPayout.amount ?? selectedPayout.totalAmount) })] }), selectedPayout.transactionId ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Transaction / reference ID" }), _jsx(Text, { size: "sm", className: "font-mono", children: String(selectedPayout.transactionId) })] })) : null, _jsxs(Row, { gap: "lg", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Requested" }), _jsx(Text, { size: "sm", children: formatDate(selectedPayout.requestedAt ?? selectedPayout.createdAt) })] }), selectedPayout.status === "paid" ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Paid on" }), _jsx(Text, { size: "sm", children: formatDate(selectedPayout.processedAt) })] })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Expected by" }), _jsx(Text, { size: "sm", children: expectedByDate ? formatDate(expectedByDate.toISOString()) : "—" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Payment method" }), _jsx(Text, { size: "sm", className: "capitalize", children: toStringValue(selectedPayout.paymentMethod, "—").replace("_", " ") })] })] }), orderIds.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Orders included (", orderIds.length, ")"] }), _jsx(Div, { className: "max-h-40", overflow: "y-auto", children: _jsx(Stack, { gap: "xs", children: orderIds.map((oid) => (_jsx(Text, { size: "xs", className: "font-mono", color: "muted", children: oid }, oid))) }) })] })), _jsxs(Row, { align: "center", justify: "between", border: "default", rounded: "lg", padding: "inline", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Remind me" }), _jsx(Text, { size: "xs", color: "muted", children: "Flag this payout for a personal follow-up" })] }), _jsx(Toggle, { checked: Boolean(selectedPayout.sellerReminderFlag), onChange: handleToggleReminder, disabled: reminderPending, size: "md", "aria-label": ACTIONS.STORE["set-payout-reminder"].ariaLabel })] })] })) })] }));
 }

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

@@ -111,7 +111,7 @@ export function SellerPreOrdersView({ children, onDelete, ...props }) {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==pre-order", status].filter(Boolean).join(",");
         },
-        getRowHref: (row) => String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id)),
+        rowHrefTemplate: String(ROUTES.STORE.PRE_ORDERS_EDIT("{id}")),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
                 {
                     label: ACTIONS.STORE["edit-listing"].label,

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

@@ -108,7 +108,7 @@ export function SellerPrizeDrawsView({ children, onDelete, ...props }) {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==prize-draw", status].filter(Boolean).join(",");
         },
-        getRowHref: (row) => String(ROUTES.STORE.PRIZE_DRAWS_EDIT(row.id)),
+        rowHrefTemplate: String(ROUTES.STORE.PRIZE_DRAWS_EDIT("{id}")),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
                 {
                     label: ACTIONS.STORE["edit-listing"].label,

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

@@ -18,6 +18,7 @@ import { ROUTES } from "../../../constants";
 import { normalizeListingType } from "../../products/utils/listing-type";
 import { toRecordArray, toRelativeDate, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
 import { DataTable } from "../../admin/components/DataTable";
+import { useDataViewMode } from "../../account/hooks/useDataViewMode";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
@@ -114,7 +115,7 @@ const PRODUCT_COLUMNS = [
 ];
 export function SellerProductsView({ onDeleteProduct, onCreateClick, children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
+    const { view, setView } = useDataViewMode("table");
     const dispatch = useActionDispatch();
     const { showToast } = useToast();
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
@@ -302,8 +303,11 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
                             { label: "Show sold", active: showSold, onChange: (next) => table.set("showSold", next ? "true" : "") },
                         ], extra: onCreateClick ? (_jsx(Button, { variant: "primary", size: "sm", onClick: onCreateClick, children: "+ New Listing" })) : null }), _jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "default", border: true, padding: "sm", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedIds.length > 0 && (_jsx(StickyToolbar, { offset: "header+bulk-actions", tone: "default", border: true, padding: "sm", z: "above-toolbar", children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _jsxs(Div, { paddingX: "x-sm-lg-md", padding: "y-md", children: [errorMessage && (_jsx(Alert, { variant: "error", className: "mb-4", children: errorMessage })), view !== "table" && (_jsx(SellerProductsCards, { view: view, rows: visibleRows, isLoading: isLoading, listingKind: listingKind, selectedIds: selection.selectedIdSet, toggle: selection.toggle, onEdit: handleEdit, onDuplicate: (row) => void handleDuplicate(row), onDelete: onDeleteProduct ? (row) => void handleDelete(row) : undefined })), view === "table" && (_jsx(DataTable, { columns: PRODUCT_COLUMNS, rows: visibleRows, isLoading: isLoading, emptyLabel: listingKind !== "all"
                                     ? `No ${listingKind} listings found`
-                                    : "No products listed yet", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll(), getRowHref: (row) => 
+                                    : "No products listed yet", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll(), rowHrefTemplate: (row) => 
                                 // S-STORE-2-D — row click → public detail/preview, not edit.
+                                // A function is safe here: both this view and DataTable are
+                                // already client components, and the target varies per row
+                                // (not expressible as a single {id} template string).
                                 row.listingKind === "auction"
                                     ? `/auctions/${row.id}`
                                     : row.listingKind === "pre-order"

package/dist/features/shipments/components/AdminShipmentsView.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-export interface AdminShipmentsViewProps extends ListingLayoutProps {
-    getRowHref?: (row: {
-        id: string;
-    }) => string;
-}
+export type AdminShipmentsViewProps = ListingLayoutProps;
 export declare function AdminShipmentsView({ children, ...props }: AdminShipmentsViewProps): React.JSX.Element;

package/dist/index.d.ts

@@ -132,8 +132,6 @@ export type { UseGestureOptions } from "./react/index";
 export type { UseKeyPressOptions } from "./react/index";
 export type { UsePullToRefreshOptions } from "./react/index";
 export type { UsePullToRefreshReturn } from "./react/index";
-export type { UseVisibleItemsOptions } from "./react/index";
-export type { UseVisibleItemsResult } from "./react/index";
 export { CONFIRMATION_MESSAGES } from "./values/index";
 export { INFO_MESSAGES } from "./values/index";
 export { deepClone } from "./utils/index";
@@ -3051,9 +3049,9 @@ export { Button } from "./ui/index";
 export { Heading, Spinner, IconButton, Progress, IndeterminateProgress, Pagination, PageLoader } from "./ui/index";
 export { ModalFooter, UnsavedChangesModal, ResponsiveView, Textarea, Checkbox } from "./ui/index";
 export { ToastProvider, StarRating, StepperNav, ViewToggle, PriceDisplay, SummaryCard } from "./ui/index";
-export { CountdownDisplay, ItemRow, HorizontalScroller, TabStrip } from "./ui/index";
+export { CountdownDisplay, ItemRow, HorizontalScroller } from "./ui/index";
 export { CardBody, MenuTrigger, MenuContent, MenuSeparator, RoleBadge, SkipToMain } from "./ui/index";
-export { TabsList, TabsContent, PasswordStrengthIndicator, TablePagination } from "./ui/index";
+export { Tabs, TabsList, TabsTrigger, TabsContent, PasswordStrengthIndicator, TablePagination } from "./ui/index";
 export { Stack, classNames, mergeTailwindClasses, SideModal, SideDrawer, RichText, RichTextRenderer } from "./ui/index";
 export type { RichTextRendererProps } from "./ui/index";
 export { SlottedListingView, DetailViewShell, StackedViewShell } from "./ui/index";
@@ -3067,7 +3065,7 @@ export { API_ENDPOINTS, API_ROUTES, LOGS_ENDPOINTS, AUTH_ENDPOINTS, ACCOUNT_ENDP
 export { WishlistFullError } from "./features/wishlist/server";
 export { useHistory, useHistoryMergeOnLogin, getGuestHistory, trackGuestHistory, removeGuestHistoryItem, clearGuestHistory, getGuestHistoryCount, type GuestHistoryItem, type GuestHistoryType, type UserHistoryItem, type HistoryProductType, type HistoryItemSnapshot, type TrackArgs as TrackHistoryArgs, } from "./features/history";
 export { historyRepository, UserHistoryRepository, trackHistoryView, getHistoryForUser, removeHistoryItem, clearHistory, mergeGuestHistory, } from "./features/history/server";
-export { useMediaQuery, useBreakpoint, useClickOutside, useKeyPress, useLongPress, useGesture, useSwipe, useSession, useAuth, useCountdown, useCamera, useBulkSelection, useUrlTable, usePendingFilters, usePendingTable, useUnsavedChanges, UNSAVED_CHANGES_EVENT, useBulkAction, useEntityDelete, useContainerGrid, useMessage, useVisibleItems, useModalStack, RTDBPayloadStatus, } from "./react/index";
+export { useMediaQuery, useBreakpoint, useClickOutside, useKeyPress, useLongPress, useGesture, useSwipe, useSession, useAuth, useCountdown, useCamera, useBulkSelection, useUrlTable, usePendingFilters, usePendingTable, useUnsavedChanges, UNSAVED_CHANGES_EVENT, useBulkAction, useEntityDelete, useContainerGrid, useMessage, useModalStack, RTDBPayloadStatus, } from "./react/index";
 export { RoleGate, ProtectedRoute, SocialAuthButtons, AuthStatusPanel, LoginForm, RegisterForm, ForgotPasswordView, ResetPasswordView, VerifyEmailView, OAuthLoadingView, } from "./features/auth/index";
 export type { RoleGateProps, ProtectedRouteProps, AuthGuardUser, AuthRouteConfig, LoginFormProps, LoginFormValues, RegisterFormProps, RegisterFormValues, ForgotPasswordViewProps, ResetPasswordViewProps, VerifyEmailViewProps, } from "./features/auth/index";
 export { CartItemRow, CartDrawer, CartView, CartSummary, ShippingPicker } from "./features/cart/index";

package/dist/index.js

@@ -5468,9 +5468,9 @@ export { Button } from "./ui/index";
 export { Heading, Spinner, IconButton, Progress, IndeterminateProgress, Pagination, PageLoader } from "./ui/index";
 export { ModalFooter, UnsavedChangesModal, ResponsiveView, Textarea, Checkbox } from "./ui/index";
 export { ToastProvider, StarRating, StepperNav, ViewToggle, PriceDisplay, SummaryCard } from "./ui/index";
-export { CountdownDisplay, ItemRow, HorizontalScroller, TabStrip } from "./ui/index";
+export { CountdownDisplay, ItemRow, HorizontalScroller } from "./ui/index";
 export { CardBody, MenuTrigger, MenuContent, MenuSeparator, RoleBadge, SkipToMain } from "./ui/index";
-export { TabsList, TabsContent, PasswordStrengthIndicator, TablePagination } from "./ui/index";
+export { Tabs, TabsList, TabsTrigger, TabsContent, PasswordStrengthIndicator, TablePagination } from "./ui/index";
 export { Stack, classNames, mergeTailwindClasses, SideModal, SideDrawer, RichText, RichTextRenderer } from "./ui/index";
 export { SlottedListingView, DetailViewShell, StackedViewShell } from "./ui/index";
 export { buildColumns, createColumnBuilder } from "./ui/index";
@@ -5486,7 +5486,7 @@ export { WishlistFullError } from "./features/wishlist/server";
 export { useHistory, useHistoryMergeOnLogin, getGuestHistory, trackGuestHistory, removeGuestHistoryItem, clearGuestHistory, getGuestHistoryCount, } from "./features/history";
 export { historyRepository, UserHistoryRepository, trackHistoryView, getHistoryForUser, removeHistoryItem, clearHistory, mergeGuestHistory, } from "./features/history/server";
 // Missing React hooks and providers
-export { useMediaQuery, useBreakpoint, useClickOutside, useKeyPress, useLongPress, useGesture, useSwipe, useSession, useAuth, useCountdown, useCamera, useBulkSelection, useUrlTable, usePendingFilters, usePendingTable, useUnsavedChanges, UNSAVED_CHANGES_EVENT, useBulkAction, useEntityDelete, useContainerGrid, useMessage, useVisibleItems, useModalStack, RTDBPayloadStatus, } from "./react/index";
+export { useMediaQuery, useBreakpoint, useClickOutside, useKeyPress, useLongPress, useGesture, useSwipe, useSession, useAuth, useCountdown, useCamera, useBulkSelection, useUrlTable, usePendingFilters, usePendingTable, useUnsavedChanges, UNSAVED_CHANGES_EVENT, useBulkAction, useEntityDelete, useContainerGrid, useMessage, useModalStack, RTDBPayloadStatus, } from "./react/index";
 // Missing core types (already exported above; skipped to avoid duplicates)
 // Missing auth feature components
 export { RoleGate, ProtectedRoute, SocialAuthButtons, AuthStatusPanel, LoginForm, RegisterForm, ForgotPasswordView, ResetPasswordView, VerifyEmailView, OAuthLoadingView, } from "./features/auth/index";

package/dist/react/index.d.ts

@@ -46,8 +46,6 @@ export type { BulkActionPayload, BulkActionResult, BulkActionSummary, BulkAction
 export { useContainerGrid } from "./hooks/useContainerGrid";
 export { useMessage } from "./hooks/useMessage";
 export type { UseContainerGridOptions, UseContainerGridResult, } from "./hooks/useContainerGrid";
-export { useVisibleItems } from "./hooks/useVisibleItems";
-export type { UseVisibleItemsOptions, UseVisibleItemsResult, } from "./hooks/useVisibleItems";
 export { useModalStack } from "./useModalStack";
 export type { ModalEntry } from "./useModalStack";
 export { ErrorBoundary } from "./ErrorBoundary";

package/dist/react/index.js

@@ -46,8 +46,6 @@ export { useBulkAction } from "./hooks/useBulkAction";
 export { useContainerGrid } from "./hooks/useContainerGrid";
 // Success/error message management
 export { useMessage } from "./hooks/useMessage";
-// Visible-items counter for tab strips and overflow scrollers
-export { useVisibleItems } from "./hooks/useVisibleItems";
 // Modal stack management
 export { useModalStack } from "./useModalStack";
 // Error boundary

package/dist/seed/faq-seed-data.js

@@ -1,5 +1,5 @@
 /*
- * WHY: Seeds 61 FAQs for LetItRip collectibles marketplace — covers general platform, shipping,
+ * WHY: Seeds 63 FAQs for LetItRip collectibles marketplace — covers general platform, shipping,
  *      returns, payments, auctions, pre-orders, product info, account/security, scam awareness.
  * WHAT: Mix of broad collectibles marketplace FAQs + category-specific FAQs (trading cards, action figures,
  *       diecast, Beyblade, model kits, grading, authenticity, bundles, prize draws), plus (Phase 17,
@@ -86,7 +86,7 @@ export const faqSeedData = [
         question: "How do I become a seller on LetItRip?",
         answer: html(`<p>Go to your Account → Become a Seller. Fill in your store details, upload verification documents, and submit for review. Our team typically approves sellers within 48 hours. Once approved, you can start listing immediately.</p>`),
         category: "general",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: true,
         isPinned: false,
         order: 4,
@@ -258,7 +258,7 @@ export const faqSeedData = [
         question: "Is free shipping available?",
         answer: html(`<p>Many sellers offer free shipping on orders above a certain amount. Look for the "Free Shipping" badge on product listings. You can also use the FREESHIP999 coupon for free shipping on orders ₹999+.</p>`),
         category: "shipping_delivery",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: false,
         isPinned: false,
         order: 13,
@@ -296,7 +296,7 @@ export const faqSeedData = [
         question: "How do I track my order?",
         answer: html(`<p>Once your seller ships the order, you'll receive a carrier name and tracking number via email and in-app notification. Go to Account → My Orders → click the order to see it. Paste the tracking number into the carrier's own website (India Post, DTDC, BlueDart, Delhivery, etc.) for real-time updates — sellers ship manually, so tracking is via the carrier's site, not an in-app live map.</p>`),
         category: "shipping_delivery",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: false,
         isPinned: false,
         order: 15,
@@ -373,7 +373,7 @@ export const faqSeedData = [
         question: "How do I request a refund?",
         answer: html(`<p>Go to Account → My Orders → select the order → Request Refund. Describe the issue and upload photos if the item is damaged or not as described. The seller has 48 hours to respond. If they don't, LetItRip support will step in.</p>`),
         category: "returns_refunds",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: false,
         isPinned: false,
         order: 19,
@@ -449,7 +449,7 @@ export const faqSeedData = [
         question: "What if I receive a counterfeit item?",
         answer: html(`<p>LetItRip has a <strong>zero-tolerance counterfeit policy</strong>. If you receive a counterfeit item, open a dispute with photo evidence. You'll receive a full refund and the seller's account will be reviewed for suspension. For high-value items, we recommend buying graded/certified products which come with third-party authentication.</p>`),
         category: "returns_refunds",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: true,
         isPinned: false,
         order: 23,
@@ -488,7 +488,7 @@ export const faqSeedData = [
         question: "What payment methods are accepted?",
         answer: html(`<p>LetItRip's default payment method is <strong>Manual UPI / Bank Transfer</strong> — you pay directly and submit your payment reference, which the seller or LetItRip confirms before shipping. Where enabled, you can also pay instantly via <strong>Razorpay</strong> (cards, UPI, net banking), choose <strong>Cash on Delivery</strong> (a small deposit online plus cash on arrival), or spread the cost with <strong>EMI</strong> on eligible orders. Sellers only receive payout funds after you confirm delivery (or after the dispute window closes).</p>`),
         category: "orders_payment",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: true,
         isPinned: false,
         order: 25,
@@ -660,7 +660,7 @@ export const faqSeedData = [
         question: "How can I verify if a collectible is authentic?",
         answer: html(`<p>Look for these trust signals on LetItRip: <strong>Verified Seller</strong> badge (store has passed manual review), <strong>Graded</strong> badge (PSA/BGS/CGC certified with certificate number), <strong>Sealed</strong> badge (factory-sealed product). For ungraded items, check the seller's photo quality and description detail. If in doubt, message the seller before purchasing.</p>`),
         category: "product_information",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: false,
         isPinned: false,
         order: 32,
@@ -717,7 +717,7 @@ export const faqSeedData = [
         question: "What do condition grades like NM, LP, MP mean?",
         answer: html(`<p>Sellers use standard condition grades for ungraded items: <strong>NM</strong> (Near Mint) — virtually perfect, minimal handling wear. <strong>LP</strong> (Lightly Played) — minor edge wear, small scratches. <strong>MP</strong> (Moderately Played) — visible wear, light creasing. <strong>HP</strong> (Heavily Played) — significant wear, creases, whitening. <strong>Sealed</strong> — factory sealed, never opened. Always check the seller's photos for the actual condition.</p>`),
         category: "product_information",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: false,
         isPinned: false,
         order: 35,
@@ -813,7 +813,7 @@ export const faqSeedData = [
         question: "How does bidding work on LetItRip?",
         answer: html(`<p>Place a bid on any active auction listing. You'll be notified if you're outbid. When the auction ends, the highest bidder wins. Some auctions have a Buy It Now (BIN) price — you can skip bidding and purchase immediately at the BIN price. Auctions auto-extend by 2 minutes if a bid is placed in the final 2 minutes to prevent sniping.</p>`),
         category: "general",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: true,
         isPinned: false,
         order: 40,
@@ -909,7 +909,7 @@ export const faqSeedData = [
         question: "How do pre-orders work?",
         answer: html(`<p>Pre-orders let you reserve upcoming products with a deposit (typically 20–30% of the retail price). When the product releases and ships, you pay the remaining balance. If the seller cancels the pre-order, you receive a full refund of your deposit. Pre-orders are available for upcoming trading card sets, action figure releases, and model kit drops.</p>`),
         category: "general",
-        showOnHomepage: false,
+        showOnHomepage: true,
         showInFooter: false,
         isPinned: false,
         order: 45,

package/dist/seed/homepage-sections-seed-data.js

@@ -301,7 +301,7 @@ export const homepageSectionsSeedData = [
             title: "Frequently Asked Questions",
             subtitle: "Quick answers about buying, selling, and collecting on LetItRip",
             showOnHomepage: true,
-            displayCount: 10,
+            displayCount: 16,
             linkToFullPage: true,
             showCategoryTabs: true,
             visibleTabs: ["general", "shipping_delivery", "returns_refunds", "orders_payment", "product_information", "account_security"],