@mohasinac/appkit 2.7.39 → 2.7.40

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

@@ -3,6 +3,11 @@ export interface UserNavItem {
     href: string;
     label: string;
     icon?: React.ReactNode;
+    /** When set, intercepts navigation with a confirmation prompt. */
+    confirm?: {
+        title?: string;
+        message: string;
+    };
 }
 export interface UserNavGroup {
     title: string;

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

@@ -10,7 +10,17 @@ 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
+    const handleClick = (e) => {
+        if (item.confirm && typeof window !== "undefined") {
+            const ok = window.confirm(item.confirm.message);
+            if (!ok) {
+                e.preventDefault();
+                return;
+            }
+        }
+        onClick?.();
+    };
+    return (_jsxs(Link, { href: item.href, onClick: handleClick, 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"
             : "text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: [item.icon && _jsx(Span, { className: "shrink-0 text-base opacity-70", children: item.icon }), _jsx(Span, { className: "flex-1 truncate", children: item.label })] }));
 }

package/dist/features/auctions/actions/bid-actions.js

@@ -41,13 +41,50 @@ export async function placeBid(userId, userEmail, input) {
     const baseBid = (product.currentBid ?? 0) > 0
         ? product.currentBid
         : (product.startingBid ?? product.price);
-    if (bidAmount <= baseBid) {
+    const minIncrement = product.minBidIncrement ?? 100;
+    // Proxy-bid semantics (eBay style): the buyer's `bidAmount` is treated as
+    // their **maximum** they're willing to pay; the visible price only steps up
+    // in `minIncrement` units as needed to stay ahead of the previous high bid.
+    // If `autoMaxBid` is supplied explicitly it takes precedence over bidAmount
+    // as the cap (lets clients separate desired-step from secret-cap).
+    const newCap = Math.max(bidAmount, autoMaxBid ?? bidAmount);
+    if (newCap <= baseBid) {
         throw new ValidationError(ERROR_MESSAGES.BID.BID_TOO_LOW, { code: BID_ERROR_CODES.TOO_LOW });
     }
-    const minIncrement = product.minBidIncrement ?? 100;
-    if (bidAmount < baseBid + minIncrement) {
+    if (newCap < baseBid + minIncrement) {
         throw new ValidationError(ERROR_MESSAGES.BID.INCREMENT_TOO_LOW, { code: BID_ERROR_CODES.INCREMENT_VIOLATED });
     }
+    const previousWinner = await bidRepository
+        .getWinningBid(productId)
+        .catch(() => null);
+    const prevCap = previousWinner?.data
+        ? (previousWinner.data.autoMaxBid ?? previousWinner.data.bidAmount ?? baseBid)
+        : baseBid;
+    const prevVisible = previousWinner?.data?.bidAmount ?? baseBid;
+    const sameBidder = previousWinner?.data?.userId === userId;
+    // Decide who wins after this submission and what the visible price becomes.
+    // Tie goes to the existing leader (first-bidder advantage), matching eBay.
+    let newBidWins;
+    let visibleBid;
+    let bumpedPreviousVisible = null;
+    if (sameBidder) {
+        // Raising your own cap. You stay winning; visible stays put.
+        newBidWins = true;
+        visibleBid = prevVisible;
+    }
+    else if (!previousWinner || newCap > prevCap) {
+        newBidWins = true;
+        const target = Math.max(prevCap + minIncrement, baseBid + minIncrement);
+        visibleBid = Math.min(newCap, target);
+    }
+    else {
+        // newCap <= prevCap → previous winner keeps it. Bump their visible up to
+        // outpace the new bid (capped at their own max).
+        newBidWins = false;
+        const target = newCap + minIncrement;
+        visibleBid = newCap;
+        bumpedPreviousVisible = Math.min(prevCap, target);
+    }
     const profile = await userRepository.findById(userId);
     const bid = await bidRepository.create({
         productId,
@@ -55,41 +92,44 @@ export async function placeBid(userId, userEmail, input) {
         userId,
         userName: profile?.displayName ?? userEmail ?? "Anonymous",
         userEmail: profile?.email ?? userEmail ?? "",
-        bidAmount,
+        bidAmount: visibleBid,
         currency: product.currency || getDefaultCurrency(),
         bidDate: new Date(),
-        ...(autoMaxBid ? { autoMaxBid } : {}),
+        autoMaxBid: newCap,
     });
-    // Only flip the previous winning bid (if any) — no need to rewrite every
-    // historical bid each time, which previously exceeded Firestore's 500-op
-    // batch cap on auctions with hundreds of bids ("Batch write failed").
-    const previousWinner = await bidRepository
-        .getWinningBid(productId)
-        .catch(() => null);
     await unitOfWork.runBatch((batch) => {
         if (previousWinner && previousWinner.data.id !== bid.id) {
-            unitOfWork.bids.updateInBatch(batch, previousWinner.data.id, {
-                isWinning: false,
-                status: "outbid",
-            });
+            if (newBidWins) {
+                unitOfWork.bids.updateInBatch(batch, previousWinner.data.id, {
+                    isWinning: false,
+                    status: "outbid",
+                });
+            }
+            else if (bumpedPreviousVisible !== null && bumpedPreviousVisible !== prevVisible) {
+                unitOfWork.bids.updateInBatch(batch, previousWinner.data.id, {
+                    bidAmount: bumpedPreviousVisible,
+                });
+            }
         }
         unitOfWork.bids.updateInBatch(batch, bid.id, {
-            isWinning: true,
-            status: "active",
+            isWinning: newBidWins,
+            status: newBidWins ? "active" : "outbid",
         });
+        const finalCurrentBid = newBidWins ? visibleBid : (bumpedPreviousVisible ?? prevVisible);
         unitOfWork.products.updateInBatch(batch, productId, {
-            currentBid: bidAmount,
+            currentBid: finalCurrentBid,
             bidCount: increment(1),
-            leadingBidderId: userId,
+            leadingBidderId: newBidWins ? userId : (previousWinner?.data?.userId ?? userId),
             bidsHaveStarted: true,
         });
     });
+    const finalVisibleForRtdb = newBidWins ? visibleBid : (bumpedPreviousVisible ?? prevVisible);
     try {
         const rtdb = getAdminRealtimeDb();
         await rtdb.ref(`/auction-bids/${productId}`).set({
-            currentBid: bidAmount,
+            currentBid: finalVisibleForRtdb,
             lastBid: {
-                amount: bidAmount,
+                amount: finalVisibleForRtdb,
                 bidderName: "Bidder",
                 timestamp: Date.now(),
             },
@@ -106,7 +146,9 @@ export async function placeBid(userId, userEmail, input) {
         bidId: bid.id,
         productId,
         userId,
-        bidAmount,
+        bidAmount: visibleBid,
+        maxProxyBid: newCap,
+        winning: newBidWins,
     });
     return { bid };
 }

package/dist/features/auctions/components/PlaceBidFormClient.d.ts

@@ -16,3 +16,13 @@ export interface PlaceBidFormClientProps {
     onPlaceBid: (input: PlaceBidInput) => Promise<unknown>;
 }
 export declare function PlaceBidFormClient({ productId, currentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidCount, tags, onPlaceBid, }: PlaceBidFormClientProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `PlaceBidModalButton` — opens a modal that hosts the same PlaceBidFormClient.
+ *
+ * Use this on listing-detail pages so buyers explicitly opt-in to the bid
+ * surface instead of always seeing the card inline.
+ */
+export declare function PlaceBidModalButton(props: PlaceBidFormClientProps & {
+    triggerLabel?: string;
+    triggerClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/features/auctions/components/PlaceBidFormClient.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { isAuthError } from "../../../utils/auth-error";
-import { Button, Div, Input, LoginRequiredModal, Row, Span, Stack, Text } from "../../../ui";
+import { Button, Div, Input, LoginRequiredModal, Modal, Row, Span, Stack, Text } from "../../../ui";
 const BID_ERROR_DISPLAY = {
     BID_AUCTION_ENDED: "This auction has closed. No more bids are accepted.",
     BID_AMOUNT_TOO_LOW: "Your bid must exceed the current winning bid.",
@@ -54,3 +54,14 @@ export function PlaceBidFormClient({ productId, currentBid, startingBid, minBidI
     }
     return (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5 space-y-4", children: [_jsxs(Div, { className: "space-y-1", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-xs text-zinc-500", children: "Current bid" }), _jsx(Text, { className: "text-xs text-zinc-500", children: "Starting bid" })] }), _jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(Span, { className: "text-xl font-bold text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsx(Span, { className: "text-sm text-zinc-500", children: formatCurrency(startingBid, currency) })] }), _jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids", " \u00B7 min increment", " ", formatCurrency(minBidIncrement, currency)] })] }), _jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to place a bid. Please log in or create an account to continue." }), _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "number", value: bidAmount, onChange: (e) => setBidAmount(e.target.value), placeholder: `At least ${formatCurrency(minBid, currency)}`, min: minBid, step: minBidIncrement, "aria-label": "Your bid amount", disabled: isEnded || isPending }), error && (_jsx(Text, { className: "text-xs text-red-600 dark:text-red-400", children: error })), success && (_jsx(Text, { className: "text-xs text-emerald-600 dark:text-emerald-400", children: "\u2713 Bid placed successfully!" })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded || isPending, type: "submit", children: isPending ? "Placing Bid…" : isEnded ? "Auction Ended" : "Place Bid" }), buyNowPrice !== null && !isEnded && (_jsxs(Button, { variant: "secondary", size: "md", className: "w-full", type: "button", children: ["Buy Now \u2014 ", formatCurrency(buyNowPrice, currency)] }))] }) }), tags.length > 0 && (_jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-xs text-zinc-600 dark:text-zinc-300", children: tag }, tag))) }) }))] }));
 }
+/**
+ * `PlaceBidModalButton` — opens a modal that hosts the same PlaceBidFormClient.
+ *
+ * Use this on listing-detail pages so buyers explicitly opt-in to the bid
+ * surface instead of always seeing the card inline.
+ */
+export function PlaceBidModalButton(props) {
+    const { triggerLabel = "Place a bid", triggerClassName = "", ...formProps } = props;
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: triggerClassName, disabled: props.isEnded, onClick: () => setOpen(true), children: props.isEnded ? "Auction Ended" : triggerLabel }), _jsx(Modal, { isOpen: open, onClose: () => setOpen(false), size: "md", title: "Place your bid", children: _jsx(PlaceBidFormClient, { ...formProps }) })] }));
+}

package/dist/features/layout/TitleBar.d.ts

@@ -1,5 +1,5 @@
 import type { TitleBarLayoutProps } from "./TitleBarLayout";
-export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "wishlistCount" | "hasDashboardNav" | "onToggleDashboardNav"> {
+export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "wishlistCount" | "unreadNotificationCount" | "hasDashboardNav" | "onToggleDashboardNav"> {
     /** Auth UID of the current user — used for wishlist merge-on-login and sync. */
     userId?: string | null;
     /**

package/dist/features/layout/TitleBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCartCount } from "../cart/hooks/useCartCount";
 import { useWishlistCount } from "../wishlist/hooks/useWishlistCount";
+import { useNotifications } from "../account/hooks/useNotifications";
 import { useDashboardNav } from "./DashboardNavContext";
 import { TitleBarLayout } from "./TitleBarLayout";
 /**
@@ -15,8 +16,9 @@ import { TitleBarLayout } from "./TitleBarLayout";
 export function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, userId, ...rest }) {
     const cartCount = useCartCount(!!rest.user);
     const wishlistCount = useWishlistCount(userId);
+    const { unreadCount } = useNotifications(1);
     const { hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
-    return (_jsx(TitleBarLayout, { ...rest, cartCount: cartCount, wishlistCount: wishlistCount, hasDashboardNav: suppressDashboardNav ? false : hasDashboardNav, onToggleDashboardNav: suppressDashboardNav
+    return (_jsx(TitleBarLayout, { ...rest, cartCount: cartCount, wishlistCount: wishlistCount, unreadNotificationCount: rest.user ? unreadCount : 0, hasDashboardNav: suppressDashboardNav ? false : hasDashboardNav, onToggleDashboardNav: suppressDashboardNav
             ? undefined
             : () => {
                 onBeforeToggleDashboardNav?.();

package/dist/features/layout/TitleBarLayout.d.ts

@@ -25,6 +25,8 @@ export interface TitleBarLayoutProps {
     cartHref?: string;
     cartCount?: number;
     profileHref?: string;
+    /** Unread notification count to show as a badge on the profile icon. */
+    unreadNotificationCount?: number;
     loginHref?: string;
     registerHref?: string;
     user?: TitleBarUser | null;
@@ -56,4 +58,4 @@ export interface TitleBarLayoutProps {
  *
  * Receives all domain data as props — zero domain imports.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav: _hasDashboardNav, onToggleDashboardNav: _onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav: _hasDashboardNav, onToggleDashboardNav: _onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -14,7 +14,7 @@ const countBadge = "absolute -top-0.5 -right-0.5 flex items-center justify-cente
  *
  * Receives all domain data as props — zero domain imports.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav: _hasDashboardNav, onToggleDashboardNav: _onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav: _hasDashboardNav, onToggleDashboardNav: _onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
     // ── Element builders ────────────────────────────────────────────────────────
     const promotionsEl = promotionsHref ? (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-200 dark:hover:bg-secondary-900/60 transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.37.86.58 1.41.58.55 0 1.05-.21 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" }) }), _jsx(Span, { className: "hidden sm:inline", children: "Today's Deals" })] })) : null;
     const themeBtn = onToggleTheme ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: iconBtn, children: isDark ? (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z" }) })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z" }) })) })) : null;
@@ -24,9 +24,9 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     const searchBtn = (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: iconBtn, children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }));
     const wishlistEl = wishlistHref ? (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: `relative ${iconBtn}`, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { className: countBadge, children: wishlistCount > 9 ? "9+" : wishlistCount }))] })) : null;
     const cartEl = cartHref ? (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: `relative ${iconBtn}`, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) }), cartCount > 0 && (_jsx(Span, { className: countBadge, children: cartCount > 9 ? "9+" : cartCount }))] })) : null;
-    const profileEl = profileHref ? (_jsx(Link, { href: profileHref, "aria-label": user ? `Profile — ${user.displayName ?? user.email}` : "Sign in", className: iconBtn, children: user?.photoURL ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        _jsx("img", { src: user.photoURL, alt: user.displayName ?? "Profile", width: 28, height: 28, className: "w-7 h-7 rounded-full object-cover" })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) })) })) : null;
+    const profileEl = profileHref ? (_jsxs(Link, { href: profileHref, "aria-label": user ? `Profile — ${user.displayName ?? user.email}${unreadNotificationCount > 0 ? `, ${unreadNotificationCount} unread alerts` : ""}` : "Sign in", className: `relative ${iconBtn}`, children: [user?.photoURL ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: user.photoURL, alt: user.displayName ?? "Profile", width: 28, height: 28, loading: "lazy", className: "w-7 h-7 rounded-full object-cover" })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) })), unreadNotificationCount > 0 && (_jsx(Span, { className: countBadge, children: unreadNotificationCount > 99 ? "99+" : unreadNotificationCount }))] })) : null;
     const authButtonsEl = !user && (loginHref || registerHref) ? (_jsxs(Row, { gap: "xs", className: "hidden lg:flex items-center", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-50 dark:hover:bg-slate-800", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-3 py-1.5 text-sm font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
     const hasTb2 = !!(wishlistEl || cartEl || profileEl);
     // ── Render ───────────────────────────────────────────────────────────────────

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
-import { Button, Div, Input, LoginRequiredModal, Span, Text } from "../../../ui";
+import { Button, Div, Input, LoginRequiredModal, Modal, Span, Stack, Text } from "../../../ui";
 import { isAuthError } from "../../../utils/auth-error";
 import { formatCurrency } from "../../../utils/number.formatter";
 function isActiveOfferError(msg) {
@@ -72,11 +72,6 @@ export function MakeOfferButton({ productId, listedPrice, currency, minOfferPerc
     if (state === "pending") {
         return (_jsxs(Div, { className: `rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-4 text-center space-y-1 ${className}`, children: [_jsx(Span, { className: "text-lg", children: "\u23F3" }), _jsx(Text, { className: "text-sm font-medium text-amber-800 dark:text-amber-300", children: "Offer Pending" }), _jsx(Text, { className: "text-xs text-amber-700 dark:text-amber-400", children: "You already have an offer on this item. Check My Offers for updates." })] }));
     }
-    if (state === "confirm") {
-        return (_jsxs(Div, { className: `rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900/60 p-4 space-y-3 ${className}`, children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-200", children: "Make an Offer" }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] })] }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Your offer amount" }), _jsx(Input, { type: "number", value: String(offerAmount), onChange: (e) => handleAmountChange(e.target.value), min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] })] }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Note to seller (optional)" }), _jsx(Input, { type: "text", value: buyerNote, onChange: (e) => setBuyerNote(e.target.value), placeholder: "E.g. Bundle deal, long-time fan...", maxLength: 300, "aria-label": "Note to seller" })] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The seller will accept, decline, or suggest a counter price." }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1", onClick: handleCancel, disabled: isPending, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", className: "flex-1", onClick: handleSubmit, disabled: isPending || offerAmount < minOffer, children: isPending ? "Sending…" : `Send ${fmt(offerAmount)}` })] })] }));
-    }
-    if (state === "error") {
-        return (_jsxs(Div, { className: `rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4 space-y-2 ${className}`, children: [_jsx(Text, { className: "text-xs text-red-600 dark:text-red-400 text-center", children: errorMsg }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", className: "flex-1", onClick: () => setState("confirm"), children: "Try Again" })] })] }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to make an offer. Please log in or create an account to continue." }), _jsx(Button, { variant: "ghost", size: "md", className: `w-full border border-zinc-300 dark:border-zinc-600 ${className}`, onClick: handleOpenConfirm, children: "Make Offer" })] }));
+    const modalOpen = state === "confirm" || state === "loading" || state === "error";
+    return (_jsxs(_Fragment, { children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to make an offer. Please log in or create an account to continue." }), _jsx(Button, { variant: "ghost", size: "md", className: `w-full border border-zinc-300 dark:border-zinc-600 ${className}`, onClick: handleOpenConfirm, children: "Make Offer" }), _jsx(Modal, { isOpen: modalOpen, onClose: handleCancel, size: "md", title: "Make an offer", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancel, disabled: isPending, children: "Cancel" }), _jsx(Button, { variant: "primary", size: "sm", onClick: handleSubmit, disabled: isPending || offerAmount < minOffer, children: isPending ? "Sending…" : `Send offer of ${fmt(offerAmount)}` })] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Your offer amount" }), _jsx(Input, { type: "number", value: String(offerAmount), onChange: (e) => handleAmountChange(e.target.value), min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] })] }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Note to seller (optional)" }), _jsx(Input, { type: "text", value: buyerNote, onChange: (e) => setBuyerNote(e.target.value), placeholder: "E.g. Bundle deal, long-time fan\u2026", maxLength: 300, "aria-label": "Note to seller" })] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The seller will accept, decline, or suggest a counter price." }), state === "error" && (_jsx(Text, { className: "text-xs text-red-600 dark:text-red-400", children: errorMsg }))] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.39",
+  "version": "2.7.40",
   "license": "MIT",
   "publishConfig": {
     "access": "public"