@mohasinac/appkit 2.7.27 → 2.7.31

package/dist/features/about/components/HowOffersWorkView.js

@@ -54,5 +54,14 @@ export async function HowOffersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howoffersworkview-div-135", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howoffersworkview-div-136", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howoffersworkview-div-137", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howoffersworkview-div-138", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howoffersworkview-div-139", children: icon }), _jsxs("div", { "data-section": "howoffersworkview-div-140", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🤝 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsxs(Section, { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("rulesTitle") }), _jsx("ul", { className: "space-y-2", children: RULES.map((rule) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", children: [_jsx("span", { className: "text-primary mt-0.5", children: "\u2022" }), _jsx(Text, { variant: "secondary", children: rule })] }, rule))) })] }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howoffersworkview-div-141", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] })] })] }));
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howoffersworkview-div-135", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howoffersworkview-div-136", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howoffersworkview-div-137", children: [renderOffersStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🤝 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOffersRulesSection(t, themed, RULES), renderOffersCtaSection(t, themed, flex)] })] }));
+}
+function renderOffersStepsSection(t, themed, flex, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howoffersworkview-div-138", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howoffersworkview-div-139", children: icon }), _jsxs("div", { "data-section": "howoffersworkview-div-140", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+}
+function renderOffersRulesSection(t, themed, rules) {
+    return (_jsxs(Section, { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("rulesTitle") }), _jsx("ul", { className: "space-y-2", children: rules.map((rule) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", children: [_jsx("span", { className: "text-primary mt-0.5", children: "\u2022" }), _jsx(Text, { variant: "secondary", children: rule })] }, rule))) })] }));
+}
+function renderOffersCtaSection(t, themed, flex) {
+    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howoffersworkview-div-141", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
 }

package/dist/features/about/components/HowOrdersWorkView.js

@@ -127,5 +127,14 @@ export async function HowOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep6Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howordersworkview-div-142", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howordersworkview-div-143", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howordersworkview-div-144", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx("div", { className: "space-y-3", "data-section": "howordersworkview-div-145", children: ORDER_STATUSES.map(({ status, icon, badge, desc }) => (_jsxs("div", { className: `flex items-start gap-4 p-4 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howordersworkview-div-146", children: [_jsxs(Row, { align: "center", gap: "sm", className: "flex-shrink-0 pt-0.5", children: [_jsx(Span, { className: "text-xl", children: icon }), _jsx(Span, { className: `text-xs font-semibold px-2 py-0.5 rounded-full ${badge}`, children: status })] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }, status))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howordersworkview-div-147", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howordersworkview-div-148", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howordersworkview-div-149", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howordersworkview-div-150", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), variant: "muted", children: t("ctaCheckout") })] })] })] })] }));
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howordersworkview-div-142", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howordersworkview-div-143", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howordersworkview-div-144", children: [renderOrderStatusesSection(t, themed, ORDER_STATUSES), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOrderInfoCardsSection(flex, INFO_CARDS), renderOrdersCtaSection(t, themed, flex)] })] }));
+}
+function renderOrderStatusesSection(t, themed, statuses) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx("div", { className: "space-y-3", "data-section": "howordersworkview-div-145", children: statuses.map(({ status, icon, badge, desc }) => (_jsxs("div", { className: `flex items-start gap-4 p-4 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howordersworkview-div-146", children: [_jsxs(Row, { align: "center", gap: "sm", className: "flex-shrink-0 pt-0.5", children: [_jsx(Span, { className: "text-xl", children: icon }), _jsx(Span, { className: `text-xs font-semibold px-2 py-0.5 rounded-full ${badge}`, children: status })] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }, status))) })] }));
+}
+function renderOrderInfoCardsSection(flex, cards) {
+    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howordersworkview-div-147", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howordersworkview-div-148", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howordersworkview-div-149", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+}
+function renderOrdersCtaSection(t, themed, flex) {
+    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howordersworkview-div-150", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), variant: "muted", children: t("ctaCheckout") })] })] }));
 }

package/dist/features/about/components/HowPayoutsWorkView.js

@@ -83,5 +83,14 @@ export async function HowPayoutsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpayoutsworkview-div-151", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpayoutsworkview-div-152", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpayoutsworkview-div-153", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpayoutsworkview-div-154", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpayoutsworkview-div-155", children: icon }), _jsxs("div", { "data-section": "howpayoutsworkview-div-156", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpayoutsworkview-div-157", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpayoutsworkview-div-158", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpayoutsworkview-div-159", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpayoutsworkview-div-160", children: [_jsx(TextLink, { href: String(ROUTES.STORE.PAYOUT_SETTINGS), children: t("ctaPayoutSettings") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FEES), variant: "muted", children: t("ctaFees") })] })] })] })] }));
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpayoutsworkview-div-151", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpayoutsworkview-div-152", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpayoutsworkview-div-153", children: [renderPayoutsStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPayoutsInfoCardsSection(flex, INFO_CARDS), renderPayoutsCtaSection(t, themed, flex)] })] }));
+}
+function renderPayoutsStepsSection(t, themed, flex, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpayoutsworkview-div-154", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpayoutsworkview-div-155", children: icon }), _jsxs("div", { "data-section": "howpayoutsworkview-div-156", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+}
+function renderPayoutsInfoCardsSection(flex, cards) {
+    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpayoutsworkview-div-157", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpayoutsworkview-div-158", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpayoutsworkview-div-159", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+}
+function renderPayoutsCtaSection(t, themed, flex) {
+    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpayoutsworkview-div-160", children: [_jsx(TextLink, { href: String(ROUTES.STORE.PAYOUT_SETTINGS), children: t("ctaPayoutSettings") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FEES), variant: "muted", children: t("ctaFees") })] })] }));
 }

package/dist/features/about/components/HowPreOrdersWorkView.js

@@ -83,5 +83,14 @@ export async function HowPreOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLAS
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpreordersworkview-div-161", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpreordersworkview-div-162", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpreordersworkview-div-163", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpreordersworkview-div-164", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpreordersworkview-div-165", children: icon }), _jsxs("div", { "data-section": "howpreordersworkview-div-166", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpreordersworkview-div-167", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpreordersworkview-div-168", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpreordersworkview-div-169", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpreordersworkview-div-170", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRE_ORDERS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] })] })] }));
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpreordersworkview-div-161", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpreordersworkview-div-162", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpreordersworkview-div-163", children: [renderPreOrdersStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPreOrdersInfoCardsSection(flex, INFO_CARDS), renderPreOrdersCtaSection(t, themed, flex)] })] }));
+}
+function renderPreOrdersStepsSection(t, themed, flex, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpreordersworkview-div-164", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpreordersworkview-div-165", children: icon }), _jsxs("div", { "data-section": "howpreordersworkview-div-166", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+}
+function renderPreOrdersInfoCardsSection(flex, cards) {
+    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpreordersworkview-div-167", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpreordersworkview-div-168", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpreordersworkview-div-169", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+}
+function renderPreOrdersCtaSection(t, themed, flex) {
+    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpreordersworkview-div-170", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRE_ORDERS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
 }

package/dist/features/about/components/HowReviewsWorkView.js

@@ -68,5 +68,14 @@ export async function HowReviewsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep4Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howreviewsworkview-div-171", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howreviewsworkview-div-172", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howreviewsworkview-div-173", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howreviewsworkview-div-174", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howreviewsworkview-div-175", children: icon }), _jsxs("div", { "data-section": "howreviewsworkview-div-176", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `⭐ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-3", "data-section": "howreviewsworkview-div-177", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howreviewsworkview-div-178", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howreviewsworkview-div-179", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howreviewsworkview-div-180", children: [_jsx(TextLink, { href: String(ROUTES.USER.ORDERS), children: t("ctaOrders") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaHowOrders") })] })] })] })] }));
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howreviewsworkview-div-171", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howreviewsworkview-div-172", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howreviewsworkview-div-173", children: [renderReviewsStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `⭐ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderReviewsInfoCardsSection(flex, INFO_CARDS), renderReviewsCtaSection(t, themed, flex)] })] }));
+}
+function renderReviewsStepsSection(t, themed, flex, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howreviewsworkview-div-174", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howreviewsworkview-div-175", children: icon }), _jsxs("div", { "data-section": "howreviewsworkview-div-176", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+}
+function renderReviewsInfoCardsSection(flex, cards) {
+    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-3", "data-section": "howreviewsworkview-div-177", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howreviewsworkview-div-178", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howreviewsworkview-div-179", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+}
+function renderReviewsCtaSection(t, themed, flex) {
+    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howreviewsworkview-div-180", children: [_jsx(TextLink, { href: String(ROUTES.USER.ORDERS), children: t("ctaOrders") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaHowOrders") })] })] }));
 }

package/dist/features/about/components/PublicProfileView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { getPublicUserProfile, getProfileStoreProducts, getSellerReviews } from "../../auth/actions/profile-actions";
 import { storeRepository } from "../../stores/repository/store.repository";
@@ -27,8 +27,8 @@ function toProductItem(p) {
         isSold: p.isSold,
         isPromoted: p.isPromoted,
         featured: p.featured,
-        category: p.category,
-        categoryName: p.categoryName,
+        categorySlugs: p.categorySlugs ?? (p.category ? [p.category] : []),
+        categoryNames: p.categoryNames ?? (p.categoryName ? [p.categoryName] : []),
         brand: p.brand,
         brandSlug: p.brandSlug,
         storeId: p.storeId,
@@ -78,17 +78,47 @@ export async function PublicProfileView({ userId, heroBannerClass = DEFAULT_HERO
     const storeSlug = profile?.storeSlug;
     const storeName = store?.storeName ?? pub?.storeName ?? displayName;
     const storeDescription = store?.storeDescription ?? pub?.storeDescription;
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "publicprofileview-div-186", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-10 md:py-14`, children: _jsx("div", { className: `${page.container.md}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row items-center sm:items-end gap-5", children: [_jsx("div", { className: `w-20 h-20 rounded-full bg-white/20 ${flex.center} flex-shrink-0 overflow-hidden`, children: photoURL ? (_jsx("img", { src: photoURL, alt: displayName, className: "w-full h-full object-cover" })) : (_jsx(User, { className: "w-10 h-10 text-white/60" })) }), _jsxs("div", { className: "text-center sm:text-left", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap justify-center sm:justify-start", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-white mb-0", children: displayName }), isSeller && (_jsx("span", { className: "rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-semibold text-white/90", children: t("roleSeller") }))] }), _jsx(Text, { variant: "none", className: "text-white/60 text-sm mt-1", children: memberSince })] }), isSeller && storeSlug && (_jsx("div", { className: "sm:ml-auto", children: _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "inline-flex items-center gap-1.5 rounded-full border border-white/30 bg-white/10 hover:bg-white/20 px-4 py-2 text-sm font-medium text-white transition-colors", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), t("visitStore")] }) }))] }) }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 space-y-10`, children: [_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: [
-                            { icon: ShoppingBag, label: t("statListings"), value: String(listingCount) },
-                            { icon: Star, label: t("statReviews"), value: String(reviewCount) },
-                            ...(isSeller
-                                ? [
-                                    { icon: Package, label: t("statSold"), value: String(itemsSold) },
-                                    { icon: Trophy, label: t("statAuctions"), value: String(auctionsWon) },
-                                ]
-                                : [
-                                    { icon: Trophy, label: t("statAuctions"), value: String(auctionsWon) },
-                                    { icon: Package, label: t("statOrders"), value: String(totalOrders) },
-                                ]),
-                        ].map(({ icon: Icon, label, value }) => (_jsxs("div", { className: `rounded-xl border ${themed.border} ${themed.bgPrimary} p-4 text-center`, children: [_jsx("div", { className: `${flex.center} mb-1`, children: _jsx(Icon, { className: "w-4 h-4 text-neutral-400" }) }), _jsx(Text, { className: "text-lg font-bold", children: value }), _jsx(Text, { variant: "secondary", className: "text-xs", children: label })] }, label))) }), (pub?.bio || pub?.location || pub?.website) && (_jsx(Section, { children: _jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgPrimary} p-6 space-y-3`, children: [pub.bio && (_jsx(Text, { className: "text-sm leading-relaxed text-neutral-700 dark:text-zinc-300", children: pub.bio })), _jsxs("div", { className: "flex flex-wrap gap-4", children: [pub.location && (_jsxs("span", { className: "flex items-center gap-1.5 text-sm text-neutral-500 dark:text-zinc-400", children: [_jsx(MapPin, { className: "w-4 h-4" }), pub.location] })), pub.website && (_jsxs("a", { href: pub.website, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-sm text-primary hover:underline", children: [_jsx(Globe, { className: "w-4 h-4" }), pub.website.replace(/^https?:\/\//, "")] }))] })] }) })), isSeller && storeSlug && storeDescription && (_jsx(Section, { children: _jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 3, className: "mb-2", children: storeName }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: storeDescription }), _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [t("visitStore"), " \u2192"] })] }) })), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("listingsTitle") }), products.length === 0 ? (_jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-12 text-center`, children: [_jsx(ShoppingBag, { className: "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("noListings") })] })) : (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", children: products.slice(0, 8).map((p) => (_jsx(ProductCard, { product: toProductItem(p), href: getProductHref(p) }, p.id))) })), products.length > 8 && storeSlug && (_jsx("div", { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)), className: "text-sm font-medium text-primary hover:underline", children: t("viewAllListings", { count: products.length }) }) }))] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsTitle") }), reviews.length === 0 ? (_jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-12 text-center`, children: [_jsx(Star, { className: "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("noReviews") })] })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: reviews.slice(0, 6).map((review) => (_jsx(ReviewCard, { review: review }, review.id))) })), reviews.length > 6 && storeSlug && (_jsx("div", { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_REVIEWS(storeSlug)), className: "text-sm font-medium text-primary hover:underline", children: t("viewAllReviews", { count: reviews.length }) }) }))] }), _jsx("div", { className: "flex justify-center pt-2", children: _jsxs(Link, { href: String(ROUTES.HOME), className: "text-sm text-neutral-400 dark:text-zinc-500 hover:text-neutral-600 dark:hover:text-zinc-300", children: ["\u2190 ", t("backHome")] }) })] })] }));
+    const profileHeroCtx = { displayName, photoURL, memberSince, isSeller, storeSlug, flex, page, heroBannerClass };
+    const statItems = buildProfileStatItems(t, { listingCount, reviewCount, itemsSold, auctionsWon, totalOrders, isSeller });
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "publicprofileview-div-186", children: [renderProfileHero(t, profileHeroCtx), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 space-y-10`, children: [renderProfileStatsRow(themed, flex, statItems), renderProfileBioSection(themed, pub), renderStoreDescriptionSection(themed, isSeller, storeSlug ?? null, storeDescription ?? null, storeName, t), renderProfileListingsSection(t, themed, products, storeSlug ?? null), renderProfileReviewsSection(t, themed, reviews, storeSlug ?? null), _jsx("div", { className: "flex justify-center pt-2", children: _jsxs(Link, { href: String(ROUTES.HOME), className: "text-sm text-neutral-400 dark:text-zinc-500 hover:text-neutral-600 dark:hover:text-zinc-300", children: ["\u2190 ", t("backHome")] }) })] })] }));
+}
+function buildProfileStatItems(t, ctx) {
+    const { listingCount, reviewCount, itemsSold, auctionsWon, totalOrders, isSeller } = ctx;
+    return [
+        { icon: ShoppingBag, label: t("statListings"), value: String(listingCount) },
+        { icon: Star, label: t("statReviews"), value: String(reviewCount) },
+        ...(isSeller
+            ? [
+                { icon: Package, label: t("statSold"), value: String(itemsSold) },
+                { icon: Trophy, label: t("statAuctions"), value: String(auctionsWon) },
+            ]
+            : [
+                { icon: Trophy, label: t("statAuctions"), value: String(auctionsWon) },
+                { icon: Package, label: t("statOrders"), value: String(totalOrders) },
+            ]),
+    ];
+}
+function renderProfileHero(t, ctx) {
+    const { displayName, photoURL, memberSince, isSeller, storeSlug, flex, page, heroBannerClass } = ctx;
+    return (_jsx(Section, { className: `${heroBannerClass} text-white py-10 md:py-14`, children: _jsx("div", { className: `${page.container.md}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row items-center sm:items-end gap-5", children: [_jsx("div", { className: `w-20 h-20 rounded-full bg-white/20 ${flex.center} flex-shrink-0 overflow-hidden`, children: photoURL ? _jsx("img", { src: photoURL, alt: displayName, className: "w-full h-full object-cover" }) : _jsx(User, { className: "w-10 h-10 text-white/60" }) }), _jsxs("div", { className: "text-center sm:text-left", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap justify-center sm:justify-start", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-white mb-0", children: displayName }), isSeller && _jsx("span", { className: "rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-semibold text-white/90", children: t("roleSeller") })] }), _jsx(Text, { variant: "none", className: "text-white/60 text-sm mt-1", children: memberSince })] }), isSeller && storeSlug && (_jsx("div", { className: "sm:ml-auto", children: _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "inline-flex items-center gap-1.5 rounded-full border border-white/30 bg-white/10 hover:bg-white/20 px-4 py-2 text-sm font-medium text-white transition-colors", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), t("visitStore")] }) }))] }) }) }));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderProfileStatsRow(themed, flex, statItems) {
+    return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: statItems.map(({ icon: Icon, label, value }) => (_jsxs("div", { className: `rounded-xl border ${themed.border} ${themed.bgPrimary} p-4 text-center`, children: [_jsx("div", { className: `${flex.center} mb-1`, children: _jsx(Icon, { className: "w-4 h-4 text-neutral-400" }) }), _jsx(Text, { className: "text-lg font-bold", children: value }), _jsx(Text, { variant: "secondary", className: "text-xs", children: label })] }, label))) }));
+}
+function renderProfileBioSection(themed, pub) {
+    if (!pub?.bio && !pub?.location && !pub?.website)
+        return null;
+    return (_jsx(Section, { children: _jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgPrimary} p-6 space-y-3`, children: [pub.bio && _jsx(Text, { className: "text-sm leading-relaxed text-neutral-700 dark:text-zinc-300", children: pub.bio }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [pub.location && _jsxs("span", { className: "flex items-center gap-1.5 text-sm text-neutral-500 dark:text-zinc-400", children: [_jsx(MapPin, { className: "w-4 h-4" }), pub.location] }), pub.website && _jsxs("a", { href: pub.website, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-sm text-primary hover:underline", children: [_jsx(Globe, { className: "w-4 h-4" }), pub.website.replace(/^https?:\/\//, "")] })] })] }) }));
+}
+function renderStoreDescriptionSection(themed, isSeller, storeSlug, storeDescription, storeName, t) {
+    if (!isSeller || !storeSlug || !storeDescription)
+        return null;
+    return (_jsx(Section, { children: _jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 3, className: "mb-2", children: storeName }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: storeDescription }), _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [t("visitStore"), " \u2192"] })] }) }));
+}
+function renderProfileListingsSection(t, themed, products, storeSlug) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("listingsTitle") }), products.length === 0 ? (_jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-12 text-center`, children: [_jsx(ShoppingBag, { className: "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("noListings") })] })) : (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", children: products.slice(0, 8).map((p) => _jsx(ProductCard, { product: toProductItem(p), href: getProductHref(p) }, p.id)) })), products.length > 8 && storeSlug && (_jsx("div", { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)), className: "text-sm font-medium text-primary hover:underline", children: t("viewAllListings", { count: products.length }) }) }))] }));
+}
+function renderProfileReviewsSection(t, themed, reviews, storeSlug) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsTitle") }), reviews.length === 0 ? (_jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-12 text-center`, children: [_jsx(Star, { className: "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("noReviews") })] })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: reviews.slice(0, 6).map((review) => _jsx(ReviewCard, { review: review }, review.id)) })), reviews.length > 6 && storeSlug && (_jsx("div", { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_REVIEWS(storeSlug)), className: "text-sm font-medium text-primary hover:underline", children: t("viewAllReviews", { count: reviews.length }) }) }))] }));
 }

package/dist/features/about/components/SecurityPrivacyView.js

@@ -118,5 +118,11 @@ export async function SecurityPrivacyView({ heroBannerClass = DEFAULT_HERO_CLASS
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "securityprivacyview-div-198", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "securityprivacyview-div-199", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "securityprivacyview-div-200", children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "securityprivacyview-div-201", children: SECTIONS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "securityprivacyview-div-202", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "securityprivacyview-div-203", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", className: "text-center text-sm", children: t("lastUpdated") }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "securityprivacyview-div-204", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRIVACY), children: t("ctaPrivacy") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("ctaContact") })] })] })] })] }));
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "securityprivacyview-div-198", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "securityprivacyview-div-199", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "securityprivacyview-div-200", children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(flex, SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", className: "text-center text-sm", children: t("lastUpdated") }), renderSecurityCtaSection(t, themed, flex)] })] }));
+}
+function renderSecurityCardsSection(flex, cards) {
+    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "securityprivacyview-div-201", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "securityprivacyview-div-202", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "securityprivacyview-div-203", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+}
+function renderSecurityCtaSection(t, themed, flex) {
+    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "securityprivacyview-div-204", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRIVACY), children: t("ctaPrivacy") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("ctaContact") })] })] }));
 }

package/dist/features/account/components/AddressesIndexListing.js

@@ -4,7 +4,7 @@ import { useState, useCallback, useMemo } from "react";
 import { X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useAddresses } from "../hooks/useAddresses";
-import { ListingToolbar } from "../../../ui";
+import { ListingToolbar, Text } from "../../../ui";
 import { AddressBook } from "./AddressBook";
 import { AddressFilters } from "./AddressFilters";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
@@ -75,5 +75,5 @@ export function AddressesIndexListing({ onAdd, onEdit, onDelete, }) {
         },
     });
     return (_jsxs("div", { className: "space-y-4", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
-                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx("div", { className: "px-3 sm:px-4", children: isLoading ? (_jsx("div", { className: "grid sm:grid-cols-2 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : addresses.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-zinc-500 dark:text-zinc-400", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AddressFilters, { table: pendingTable }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
+                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx("div", { className: "px-3 sm:px-4", children: isLoading ? (_jsx("div", { className: "grid sm:grid-cols-2 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { className: "py-8 text-center text-sm text-zinc-500 dark:text-zinc-400", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AddressFilters, { table: pendingTable }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

package/dist/features/account/components/NotificationBell.js

@@ -60,22 +60,33 @@ export function NotificationBell({ limit = 10, viewAllHref, labels, icons, rende
         markAllRead,
         refetch,
     ]);
+    const handleMarkReadAndClose = useCallback((notification) => {
+        if (!notification.isRead)
+            void handleMarkRead(notification.id);
+        setIsOpen(false);
+    }, [handleMarkRead, setIsOpen]);
     const renderActionLink = renderLink ??
         ((props) => (_jsx(TextLink, { href: props.href, onClick: props.onClick, className: props.className, children: props.children })));
-    return (_jsxs("div", { className: "relative", ref: dropdownRef, "data-section": "notificationbell-div-227", children: [_jsxs(Button, { onClick: handleToggle, className: `${hideOnMobile ? "hidden md:flex" : "flex"} p-2.5 md:p-3 rounded-xl transition-colors relative text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-white ${buttonClassName}`, "aria-label": labels.title, "aria-expanded": isOpen, children: [_jsx("svg", { className: "w-6 h-6 md:w-7 md:h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unreadCount > 0 && (_jsx(Span, { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs min-w-[20px] h-5 px-1.5 flex items-center justify-center rounded-full font-semibold shadow-md", children: unreadCount > 99 ? "99+" : unreadCount }))] }), isOpen && (_jsxs("div", { className: `absolute right-0 top-full mt-2 w-80 sm:w-96 rounded-xl shadow-2xl border border-zinc-200 bg-white dark:border-slate-800 dark:bg-slate-950 z-50 overflow-hidden ${dropdownClassName}`, "data-section": "notificationbell-div-228", children: [_jsxs(Row, { justify: "between", gap: "none", className: "px-4 py-3 border-b border-zinc-200 dark:border-slate-800", children: [_jsxs(Heading, { level: 3, className: "font-semibold text-zinc-900 dark:text-white", children: [labels.title, unreadCount > 0 && (_jsxs(Span, { className: "ml-2 text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 px-2 py-0.5 rounded-full font-medium", children: [unreadCount, " ", labels.unread] }))] }), unreadCount > 0 && (_jsx(Button, { onClick: handleMarkAllRead, disabled: isMarkingAll, className: "text-xs text-primary hover:underline font-medium disabled:opacity-50", children: isMarkingAll ? labels.loading : labels.markAllRead }))] }), _jsx("div", { className: "max-h-96 overflow-y-auto", "data-section": "notificationbell-div-229", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-10", "data-section": "notificationbell-div-230", children: _jsx(Spinner, { size: "md" }) })) : notifications.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 text-center", "data-section": "notificationbell-div-231", children: [_jsx("svg", { className: "w-12 h-12 text-zinc-300 dark:text-zinc-600 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), _jsx(Text, { className: "font-medium text-zinc-900 dark:text-white", children: labels.empty }), _jsx(Text, { size: "sm", className: "mt-1 text-zinc-500 dark:text-zinc-400", children: labels.emptyDesc })] })) : (_jsx(Ul, { children: notifications.map((notification) => (_jsxs(Li, { className: `group flex items-start gap-3 px-4 py-3 border-b border-zinc-200 dark:border-slate-800 last:border-0 transition-colors hover:bg-zinc-50 dark:hover:bg-slate-900 ${!notification.isRead ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [_jsx(Span, { className: "text-xl flex-shrink-0 mt-0.5", children: notificationIcons[notification.type] ?? "🔔" }), _jsxs("div", { className: "flex-1 min-w-0", "data-section": "notificationbell-div-232", children: [_jsxs("div", { className: `flex items-start justify-between ${THEME_CONSTANTS.spacing.gap.xs}`, "data-section": "notificationbell-div-233", children: [_jsxs(Text, { size: "sm", className: "font-medium text-zinc-900 dark:text-white leading-tight", children: [notification.title, !notification.isRead && (_jsx(Span, { className: "ml-1.5 inline-block w-2 h-2 rounded-full bg-primary flex-shrink-0 align-middle" }))] }), _jsx(Span, { className: "text-xs text-zinc-500 dark:text-zinc-400 flex-shrink-0", children: formatRelativeTime(notification.createdAt) })] }), _jsx(Text, { size: "sm", className: `text-zinc-600 dark:text-zinc-300 mt-0.5 ${THEME_CONSTANTS.utilities.textClamp2}`, children: notification.message }), _jsxs(Row, { gap: "3", className: "mt-1.5", children: [notification.actionUrl &&
-                                                        renderActionLink({
-                                                            href: notification.actionUrl,
-                                                            onClick: () => {
-                                                                if (!notification.isRead)
-                                                                    void handleMarkRead(notification.id);
-                                                                setIsOpen(false);
-                                                            },
-                                                            className: "text-xs text-primary hover:underline font-medium",
-                                                            children: notification.actionLabel ?? labels.viewAction,
-                                                        }), !notification.isRead && (_jsx(Button, { variant: "ghost", onClick: () => void handleMarkRead(notification.id), className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:underline p-0 h-auto", children: labels.markRead }))] })] })] }, notification.id))) })) }), viewAllHref && (_jsx("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-slate-800 text-center", "data-section": "notificationbell-div-234", children: renderActionLink({
-                            href: viewAllHref,
-                            onClick: () => setIsOpen(false),
-                            className: "text-sm text-primary hover:underline font-medium",
-                            children: labels.viewAll,
-                        }) }))] }))] }));
+    return (_jsxs("div", { className: "relative", ref: dropdownRef, "data-section": "notificationbell-div-227", children: [renderBellButton({ hideOnMobile, buttonClassName, labels, unreadCount, handleToggle, isOpen }), isOpen && renderNotificationDropdown({
+                dropdownClassName, labels, unreadCount, isMarkingAll, handleMarkAllRead,
+                isLoading, notifications: notifications, notificationIcons,
+                handleMarkRead, handleMarkReadAndClose, renderActionLink, viewAllHref,
+                setIsOpen,
+            })] }));
+}
+function renderBellButton(props) {
+    const { hideOnMobile, buttonClassName, labels, unreadCount, handleToggle, isOpen } = props;
+    return (_jsxs(Button, { onClick: handleToggle, className: `${hideOnMobile ? "hidden md:flex" : "flex"} p-2.5 md:p-3 rounded-xl transition-colors relative text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-white ${buttonClassName}`, "aria-label": labels.title, "aria-expanded": isOpen, children: [_jsx("svg", { className: "w-6 h-6 md:w-7 md:h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unreadCount > 0 && (_jsx(Span, { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs min-w-[20px] h-5 px-1.5 flex items-center justify-center rounded-full font-semibold shadow-md", children: unreadCount > 99 ? "99+" : unreadCount }))] }));
+}
+function renderNotificationDropdown(props) {
+    const { dropdownClassName, labels, unreadCount, isMarkingAll, handleMarkAllRead, isLoading, notifications, notificationIcons, handleMarkRead, handleMarkReadAndClose, renderActionLink, viewAllHref, setIsOpen } = props;
+    return (_jsxs("div", { className: `absolute right-0 top-full mt-2 w-80 sm:w-96 rounded-xl shadow-2xl border border-zinc-200 bg-white dark:border-slate-800 dark:bg-slate-950 z-50 overflow-hidden ${dropdownClassName}`, "data-section": "notificationbell-div-228", children: [_jsxs(Row, { justify: "between", gap: "none", className: "px-4 py-3 border-b border-zinc-200 dark:border-slate-800", children: [_jsxs(Heading, { level: 3, className: "font-semibold text-zinc-900 dark:text-white", children: [labels.title, unreadCount > 0 && _jsxs(Span, { className: "ml-2 text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 px-2 py-0.5 rounded-full font-medium", children: [unreadCount, " ", labels.unread] })] }), unreadCount > 0 && (_jsx(Button, { onClick: handleMarkAllRead, disabled: isMarkingAll, className: "text-xs text-primary hover:underline font-medium disabled:opacity-50", children: isMarkingAll ? labels.loading : labels.markAllRead }))] }), _jsx("div", { className: "max-h-96 overflow-y-auto", "data-section": "notificationbell-div-229", children: renderNotificationListContent({ isLoading, notifications, notificationIcons, labels, handleMarkRead, handleMarkReadAndClose, renderActionLink }) }), viewAllHref && (_jsx("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-slate-800 text-center", "data-section": "notificationbell-div-234", children: renderActionLink({ href: viewAllHref, onClick: () => setIsOpen(false), className: "text-sm text-primary hover:underline font-medium", children: labels.viewAll }) }))] }));
+}
+function renderNotificationListContent(props) {
+    const { isLoading, notifications, notificationIcons, labels, handleMarkRead, handleMarkReadAndClose, renderActionLink } = props;
+    if (isLoading)
+        return _jsx("div", { className: "flex items-center justify-center py-10", "data-section": "notificationbell-div-230", children: _jsx(Spinner, { size: "md" }) });
+    if (notifications.length === 0)
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 text-center", "data-section": "notificationbell-div-231", children: [_jsx("svg", { className: "w-12 h-12 text-zinc-300 dark:text-zinc-600 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), _jsx(Text, { className: "font-medium text-zinc-900 dark:text-white", children: labels.empty }), _jsx(Text, { size: "sm", className: "mt-1 text-zinc-500 dark:text-zinc-400", children: labels.emptyDesc })] }));
+    return (_jsx(Ul, { children: notifications.map((notification) => (_jsxs(Li, { className: `group flex items-start gap-3 px-4 py-3 border-b border-zinc-200 dark:border-slate-800 last:border-0 transition-colors hover:bg-zinc-50 dark:hover:bg-slate-900 ${!notification.isRead ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [_jsx(Span, { className: "text-xl flex-shrink-0 mt-0.5", children: notificationIcons[notification.type] ?? "🔔" }), _jsxs("div", { className: "flex-1 min-w-0", "data-section": "notificationbell-div-232", children: [_jsxs("div", { className: `flex items-start justify-between ${THEME_CONSTANTS.spacing.gap.xs}`, "data-section": "notificationbell-div-233", children: [_jsxs(Text, { size: "sm", className: "font-medium text-zinc-900 dark:text-white leading-tight", children: [notification.title, !notification.isRead && _jsx(Span, { className: "ml-1.5 inline-block w-2 h-2 rounded-full bg-primary flex-shrink-0 align-middle" })] }), _jsx(Span, { className: "text-xs text-zinc-500 dark:text-zinc-400 flex-shrink-0", children: formatRelativeTime(notification.createdAt) })] }), _jsx(Text, { size: "sm", className: `text-zinc-600 dark:text-zinc-300 mt-0.5 ${THEME_CONSTANTS.utilities.textClamp2}`, children: notification.message }), _jsxs(Row, { gap: "3", className: "mt-1.5", children: [notification.actionUrl && renderActionLink({ href: notification.actionUrl, onClick: () => { void handleMarkReadAndClose(notification); }, className: "text-xs text-primary hover:underline font-medium", children: notification.actionLabel ?? labels.viewAction }), !notification.isRead && _jsx(Button, { variant: "ghost", onClick: () => void handleMarkRead(notification.id), className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:underline p-0 h-auto", children: labels.markRead })] })] })] }, notification.id))) }));
 }

package/dist/features/account/components/NotificationPreferencesPanel.d.ts

@@ -0,0 +1,9 @@
+import type { NotificationPreferences } from "../types";
+export interface NotificationPreferencesPanelProps {
+    /** Fetch URL — defaults to /api/user/notification-preferences */
+    fetchUrl?: string;
+    /** Save URL — defaults to /api/user/notification-preferences */
+    saveUrl?: string;
+    onSave?: (prefs: NotificationPreferences) => void;
+}
+export declare function NotificationPreferencesPanel({ fetchUrl, saveUrl, onSave, }: NotificationPreferencesPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/account/components/NotificationPreferencesPanel.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Stack, Row, Text, Button, Div } from "../../../ui";
+import { useSiteSettings } from "../../../core/hooks/useSiteSettings";
+// ─── type-row config ────────────────────────────────────────────────────────
+const TYPE_ROWS = [
+    { key: "orderUpdates", label: "Order updates", description: "Placed, shipped, delivered, cancelled, refunded" },
+    { key: "bids", label: "Auction bids", description: "Outbid alerts and auction win/loss" },
+    { key: "offers", label: "Offers", description: "New offers received, counter-offers, responses" },
+    { key: "reviews", label: "Reviews", description: "Review approved, seller reply" },
+    { key: "messages", label: "Messages", description: "New buyer-seller chat messages" },
+    { key: "promotions", label: "Promotions", description: "Coupons, sales and platform events" },
+    { key: "system", label: "System & welcome", description: "Account alerts and platform announcements" },
+];
+// ─── Toggle row ─────────────────────────────────────────────────────────────
+function ToggleRow({ label, description, checked, onChange, disabled, }) {
+    return (_jsxs(Row, { align: "center", justify: "between", gap: "md", className: "py-3 border-b last:border-0 border-[var(--appkit-color-border)]", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: label }), _jsx(Text, { variant: "secondary", className: "text-xs mt-0.5", children: description })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": label, disabled: disabled, onClick: () => onChange(!checked), className: [
+                    "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent",
+                    "transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2",
+                    "focus-visible:ring-[var(--appkit-color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    checked ? "bg-[var(--appkit-color-primary)]" : "bg-[var(--appkit-color-border-strong,#a1a1aa)]",
+                ].join(" "), children: _jsx("span", { className: [
+                        "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-lg",
+                        "ring-0 transition duration-200 ease-in-out",
+                        checked ? "translate-x-4" : "translate-x-0",
+                    ].join(" ") }) })] }));
+}
+// ─── Section card ───────────────────────────────────────────────────────────
+function SectionCard({ title, children }) {
+    return (_jsxs(Div, { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", children: [_jsx(Div, { className: "px-4 py-3 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-alt,var(--appkit-color-surface))]", children: _jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: title }) }), _jsx(Div, { className: "px-4", children: children })] }));
+}
+export function NotificationPreferencesPanel({ fetchUrl = "/api/user/notification-preferences", saveUrl = "/api/user/notification-preferences", onSave, }) {
+    const { data: settings } = useSiteSettings();
+    const adminChannels = settings?.notificationChannels;
+    const [channels, setChannels] = useState({ email: true, whatsapp: true, sms: true });
+    const [types, setTypes] = useState({
+        orderUpdates: true, bids: true, promotions: true,
+        system: true, reviews: true, messages: true, offers: true,
+    });
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    useEffect(() => {
+        fetch(fetchUrl, { credentials: "include" })
+            .then((r) => r.json())
+            .then((json) => {
+            const prefs = json.data?.notificationPreferences;
+            if (prefs?.channels)
+                setChannels((prev) => ({ ...prev, ...prefs.channels }));
+            if (prefs?.types)
+                setTypes((prev) => ({ ...prev, ...prefs.types }));
+        })
+            .catch(() => { })
+            .finally(() => setLoading(false));
+    }, [fetchUrl]);
+    const setChannel = useCallback((key, val) => {
+        setChannels((prev) => ({ ...prev, [key]: val }));
+        setSaved(false);
+    }, []);
+    const setType = useCallback((key, val) => {
+        setTypes((prev) => ({ ...prev, [key]: val }));
+        setSaved(false);
+    }, []);
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        try {
+            const prefs = { channels, types };
+            await fetch(saveUrl, {
+                method: "PUT",
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(prefs),
+            });
+            setSaved(true);
+            onSave?.(prefs);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [channels, types, saveUrl, onSave]);
+    if (loading) {
+        return (_jsx(Div, { className: "py-8 text-center", children: _jsx(Text, { variant: "secondary", className: "text-sm", children: "Loading preferences\u2026" }) }));
+    }
+    // Which channels are admin-enabled (only show those toggles to the user)
+    const emailAdminEnabled = adminChannels?.email?.enabled ?? false;
+    const whatsappAdminEnabled = adminChannels?.whatsapp?.enabled ?? false;
+    const smsAdminEnabled = adminChannels?.sms?.enabled ?? false;
+    const anyChannelEnabled = emailAdminEnabled || whatsappAdminEnabled || smsAdminEnabled;
+    return (_jsxs(Stack, { gap: "lg", children: [_jsx(SectionCard, { title: "In-app notifications", children: _jsxs(Row, { align: "center", justify: "between", gap: "md", className: "py-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: "In-app notifications" }), _jsx(Text, { variant: "secondary", className: "text-xs mt-0.5", children: "Always on \u2014 displayed in the notification bell and inbox" })] }), _jsx(Div, { className: "h-5 w-9 rounded-full bg-[var(--appkit-color-primary)] flex items-center justify-end px-0.5", "aria-label": "Always on", children: _jsx("span", { className: "h-4 w-4 rounded-full bg-white shadow" }) })] }) }), anyChannelEnabled && (_jsxs(SectionCard, { title: "Notification channels", children: [emailAdminEnabled && (_jsx(ToggleRow, { label: "Email", description: "Receive notifications by email", checked: channels.email !== false, onChange: (v) => setChannel("email", v) })), whatsappAdminEnabled && (_jsx(ToggleRow, { label: "WhatsApp", description: "Receive notifications on WhatsApp", checked: channels.whatsapp !== false, onChange: (v) => setChannel("whatsapp", v) })), smsAdminEnabled && (_jsx(ToggleRow, { label: "SMS", description: "Receive SMS text notifications", checked: channels.sms !== false, onChange: (v) => setChannel("sms", v) }))] })), _jsx(SectionCard, { title: "Notification types", children: TYPE_ROWS.map((row) => (_jsx(ToggleRow, { label: row.label, description: row.description, checked: types[row.key] !== false, onChange: (v) => setType(row.key, v) }, row.key))) }), _jsxs(Row, { justify: "end", gap: "sm", children: [saved && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-success,#16a34a)] self-center", children: "Preferences saved \u2713" })), _jsx(Button, { onClick: handleSave, isLoading: saving, size: "sm", children: "Save preferences" })] })] }));
+}

package/dist/features/account/components/UserSidebar.js

@@ -6,6 +6,9 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Li, Nav, Span, Ul } from "../../../ui";
 import { BottomSheet } from "../../layout/BottomSheet";
+function isNavItemActive(item, activeHref) {
+    return activeHref === item.href || activeHref.startsWith(item.href + "/");
+}
 function NavLink({ item, isActive, onClick }) {
     return (_jsxs(Link, { href: item.href, onClick: onClick, className: `flex items-center gap-2.5 rounded-lg px-3 py-2 text-[0.8125rem] font-medium leading-tight transition-colors ${isActive
             ? "bg-primary-50 dark:bg-primary-900/25 text-primary-700 dark:text-primary-300"
@@ -35,10 +38,7 @@ function DrawerContent({ groups, items, activeHref, onItemClick, }) {
             const hasActive = group.items.some((i) => activeHref === i.href || activeHref.startsWith(i.href + "/"));
             return (_jsxs("div", { className: "mb-0.5", children: [_jsxs("button", { type: "button", onClick: () => toggle(group.title), className: `flex w-full items-center justify-between px-4 py-2 text-[0.6875rem] font-semibold uppercase tracking-widest transition-colors ${hasActive && !isOpen
                             ? "text-primary-600 dark:text-primary-400"
-                            : "text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300"}`, children: [_jsx("span", { children: group.title }), _jsx("svg", { className: `w-3 h-3 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 9l-7 7-7-7" }) })] }), isOpen && (_jsx(Ul, { className: "space-y-0.5 px-3 pb-1", children: group.items.map((item) => {
-                            const isActive = activeHref === item.href || activeHref.startsWith(item.href + "/");
-                            return (_jsx(Li, { children: _jsx(NavLink, { item: item, isActive: isActive, onClick: onItemClick }) }, item.href));
-                        }) }))] }, group.title));
+                            : "text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300"}`, children: [_jsx("span", { children: group.title }), _jsx("svg", { className: `w-3 h-3 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 9l-7 7-7-7" }) })] }), isOpen && (_jsx(Ul, { className: "space-y-0.5 px-3 pb-1", children: group.items.map((item) => (_jsx(Li, { children: _jsx(NavLink, { item: item, isActive: isNavItemActive(item, activeHref), onClick: onItemClick }) }, item.href))) }))] }, group.title));
         }) }));
 }
 function DrawerPanel({ title, onClose, children, }) {