hey-pharmacist-ecommerce 1.1.36 → 1.1.38

package/dist/index.mjs

@@ -1,9 +1,9 @@
 "use client";
-import React12, { createContext, forwardRef, useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import React10, { createContext, forwardRef, useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import globalAxios21 from 'axios';
 import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion';
-import { Trash2, X, CheckCheck, Settings, BellOff, Eye, Star, ShoppingCart, Sparkles, ShieldCheck, TrendingUp, Search, Package, ArrowUpDown, ChevronDown, LayoutGrid, LayoutList, Clock, User, MessageCircle, Filter, ChevronLeft, Check, Heart, Truck, RotateCcw, Shield, Minus, Plus, ShoppingBag, ArrowRight, CheckCircle2, MapPin, CreditCard, Edit3, AlertCircle, Lock, EyeOff, UserPlus, Mail, Send, ArrowLeft, MessageSquare, ChevronRight, ArrowUpRight, PackageCheck, Warehouse, BellRing, Crown, Phone, Grid, List, Loader2, Calendar, ExternalLink, Info, Bell, LogOut, Menu, Facebook, Twitter, Instagram, Shirt, Pill, Box, TrendingDown, Gift, Tag, Globe, Home, CheckCircle, Edit, AlertTriangle, XCircle } from 'lucide-react';
+import { Eye, Star, ShoppingCart, Sparkles, ShieldCheck, TrendingUp, Search, Package, ArrowUpDown, ChevronDown, LayoutGrid, LayoutList, X, Clock, User, MessageCircle, Filter, ChevronLeft, Check, Heart, Truck, RotateCcw, Shield, Trash2, Minus, Plus, ShoppingBag, ArrowRight, CheckCircle2, MapPin, CreditCard, Edit3, AlertCircle, Lock, EyeOff, UserPlus, Mail, Send, ArrowLeft, MessageSquare, Settings, ChevronRight, ArrowUpRight, PackageCheck, Warehouse, BellRing, Crown, Phone, Grid, List, Loader2, Calendar, ExternalLink, Info, Bell, LogOut, Menu, Facebook, Twitter, Instagram, CheckCheck, BellOff, Shirt, Pill, Box, Gift, Tag, Globe, Home, TrendingDown, CheckCircle, Edit, AlertTriangle, XCircle } from 'lucide-react';
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
 import { useRouter, useSearchParams, useParams } from 'next/navigation';
 import Image4 from 'next/image';
@@ -12681,285 +12681,14 @@ function NotificationCenterProvider({ children }) {
   };
   return /* @__PURE__ */ jsx(NotificationCenterContext.Provider, { value, children });
 }
-var getNotificationIcon = (type) => {
-  const className = "w-5 h-5";
-  switch (type) {
-    case "ORDER_CONFIRMATION":
-    case "ORDER_SHIPPED":
-    case "ORDER_DELIVERED":
-      return /* @__PURE__ */ jsx(Package, { className });
-    case "PAYMENT_FAILED":
-    case "REFUND_PROCESSED":
-      return /* @__PURE__ */ jsx(CreditCard, { className });
-    case "PASSWORD_RESET":
-    case "NEW_DEVICE_LOGIN":
-    case "TWO_FA_CODE":
-      return /* @__PURE__ */ jsx(Lock, { className });
-    case "ABANDONED_CART_REMINDER":
-      return /* @__PURE__ */ jsx(ShoppingCart, { className });
-    case "PRICE_DROP_ALERT":
-      return /* @__PURE__ */ jsx(TrendingDown, { className });
-    case "BACK_IN_STOCK":
-    default:
-      return /* @__PURE__ */ jsx(Bell, { className });
-  }
-};
-var getNotificationColor = (type) => {
-  switch (type) {
-    case "ORDER_CONFIRMATION":
-    case "ORDER_DELIVERED":
-    case "REFUND_PROCESSED":
-      return "bg-green-100 text-green-600";
-    case "ORDER_SHIPPED":
-      return "bg-blue-100 text-blue-600";
-    case "PAYMENT_FAILED":
-      return "bg-red-100 text-red-600";
-    case "PASSWORD_RESET":
-    case "NEW_DEVICE_LOGIN":
-    case "TWO_FA_CODE":
-      return "bg-purple-100 text-purple-600";
-    case "ABANDONED_CART_REMINDER":
-    case "PRICE_DROP_ALERT":
-    case "BACK_IN_STOCK":
-      return "bg-orange-100 text-orange-600";
-    default:
-      return "bg-gray-100 text-gray-600";
-  }
-};
-var formatRelativeTime = (dateString) => {
-  const date = new Date(dateString);
-  const diff = Date.now() - date.getTime();
-  const mins = Math.floor(diff / 6e4);
-  const hours = Math.floor(diff / 36e5);
-  const days = Math.floor(diff / 864e5);
-  if (mins < 1) return "Just now";
-  if (mins < 60) return `${mins} min ago`;
-  if (hours < 24) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
-  if (days < 7) return `${days} day${days > 1 ? "s" : ""} ago`;
-  return date.toLocaleDateString();
-};
-function NotificationCard({
-  notification,
-  onMarkAsRead,
-  onDelete
-}) {
-  const router = useRouter();
-  const { buildPath } = useBasePath();
-  const hasDragged = useRef(false);
-  const handleClick = () => {
-    if (hasDragged.current) return;
-    if (!notification.isRead) {
-      onMarkAsRead(notification._id);
-    }
-    if (notification.data?.orderId) {
-      router.push(buildPath(`/account/orders/${notification.data.orderId}`));
-    } else if (notification.data?.productId) {
-      router.push(buildPath(`/products/${notification.data.productId}`));
-    }
-  };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    onDelete(notification._id);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-end px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-white", children: [
-      /* @__PURE__ */ jsx(Trash2, { className: "w-5 h-5" }),
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider", children: "Remove" })
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        drag: "x",
-        initial: { opacity: 0, x: 0 },
-        animate: { opacity: 1, x: 0 },
-        className: `relative z-10 p-4 border cursor-pointer select-none touch-pan-y transition-colors ${notification.isRead ? "bg-white border-gray-200" : "bg-blue-50 border-blue-200"}`,
-        onClick: handleClick,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${getNotificationColor(
-                notification.type
-              )}`,
-              children: getNotificationIcon(notification.type)
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 text-sm line-clamp-1", children: notification.title }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleDelete,
-                  className: "flex-shrink-0 p-1 bg-gray-100 rounded-full hover:bg-red-50",
-                  "aria-label": "Delete notification",
-                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-gray-400 hover:text-red-500" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-1 line-clamp-2", children: notification.body }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: formatRelativeTime(notification.createdAt) }),
-              !notification.isRead && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "w-2 h-2 bg-blue-500 rounded-full",
-                  "aria-label": "Unread"
-                }
-              )
-            ] })
-          ] })
-        ] })
-      }
-    )
-  ] });
-}
-function NotificationDrawer() {
-  const {
-    isDrawerOpen,
-    closeDrawer,
-    notifications,
-    unreadCount,
-    isLoading,
-    markAsRead,
-    markAllAsRead,
-    deleteNotification,
-    loadMore,
-    hasMore
-  } = useNotificationCenter();
-  const router = useRouter();
-  const { buildPath } = useBasePath();
-  const scrollContainerRef = useRef(null);
-  const handleScroll = () => {
-    if (!scrollContainerRef.current || isLoading || !hasMore) return;
-    const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-    if (scrollPercentage > 0.8) {
-      loadMore();
-    }
-  };
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape" && isDrawerOpen) {
-        closeDrawer();
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isDrawerOpen, closeDrawer]);
-  useEffect(() => {
-    if (isDrawerOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isDrawerOpen]);
-  const handleSettingsClick = () => {
-    closeDrawer();
-    router.push(buildPath("/account/notifications"));
-  };
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isDrawerOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        className: "fixed inset-0 bg-black/50 z-40",
-        onClick: closeDrawer
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        initial: { x: "100%" },
-        animate: { x: 0 },
-        exit: { x: "100%" },
-        transition: { type: "spring", damping: 25, stiffness: 200 },
-        className: "fixed right-0 top-0 bottom-0 w-full sm:w-[480px] bg-white shadow-2xl z-50 flex flex-col max-w-[480px]",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 bg-white", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Notifications" }),
-              unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full", children: unreadCount })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              unreadCount > 0 && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: markAllAsRead,
-                  className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-                  title: "Mark all as read",
-                  children: /* @__PURE__ */ jsx(CheckCheck, { className: "w-5 h-5 text-gray-600" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleSettingsClick,
-                  className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-                  title: "Notification settings",
-                  children: /* @__PURE__ */ jsx(Settings, { className: "w-5 h-5 text-gray-600" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: closeDrawer,
-                  className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-                  "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5 text-gray-600" })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: scrollContainerRef,
-              onScroll: handleScroll,
-              className: "flex-1 overflow-y-auto p-4 space-y-3",
-              children: notifications.length === 0 && !isLoading ? (
-                // Empty state
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center py-12", children: [
-                  /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(BellOff, { className: "w-10 h-10 text-gray-400" }) }),
-                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: "No notifications yet" }),
-                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 max-w-xs", children: "When you receive notifications, they'll appear here" })
-                ] })
-              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                notifications.map((notification) => /* @__PURE__ */ jsx(
-                  NotificationCard,
-                  {
-                    notification,
-                    onMarkAsRead: markAsRead,
-                    onDelete: deleteNotification
-                  },
-                  notification._id
-                )),
-                isLoading && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 border-2 border-primary-600 border-t-transparent rounded-full animate-spin" }) }),
-                !hasMore && notifications.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-sm text-gray-500", children: "You're all caught up! \u{1F389}" })
-              ] })
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
-}
 function EcommerceProvider({ config, children, withToaster = true, basePath = "" }) {
-  React12.useMemo(() => {
+  React10.useMemo(() => {
     initializeApiAdapter(config);
   }, [config]);
-  const [client] = React12.useState(
+  const [client] = React10.useState(
     new QueryClient({ defaultOptions: { queries: { staleTime: 5e3 } } })
   );
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client, children: /* @__PURE__ */ jsx(ThemeProvider, { config, children: /* @__PURE__ */ jsx(BasePathProvider, { basePath, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(NotificationProvider, { children: /* @__PURE__ */ jsx(NotificationCenterProvider, { children: /* @__PURE__ */ jsx(CartProvider, { children: /* @__PURE__ */ jsx(DiscountProvider, { children: /* @__PURE__ */ jsxs(WishlistProvider, { children: [
-    children,
-    /* @__PURE__ */ jsx(NotificationDrawer, {})
-  ] }) }) }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client, children: /* @__PURE__ */ jsx(ThemeProvider, { config, children: /* @__PURE__ */ jsx(BasePathProvider, { basePath, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(NotificationProvider, { children: /* @__PURE__ */ jsx(NotificationCenterProvider, { children: /* @__PURE__ */ jsx(CartProvider, { children: /* @__PURE__ */ jsx(DiscountProvider, { children: /* @__PURE__ */ jsx(WishlistProvider, { children }) }) }) }) }) }) }) }) });
 }
 
 // src/lib/constants/assets.ts
@@ -13122,7 +12851,7 @@ function QuickViewModal({ product, onClose, onNavigateToProduct }) {
                         setSelectedSizeIndex(0);
                         setSelectedImageIndex(0);
                       },
-                      className: `size-10 rounded-full border-2 transition-all ${selectedVariantIndex === index ? "border-primary scale-110" : "border-gray-200 hover:border-primary/50"}`,
+                      className: `size-10 rounded-full border-2 transition-all ${selectedVariantIndex === index ? "border-primary scale-110" : "border-gray-200 hover:border-primary-50"}`,
                       style: { backgroundColor: variant.colorHex },
                       title: variant.color,
                       children: /* @__PURE__ */ jsx(
@@ -14395,7 +14124,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
             type: "button",
             onClick: applyCustomPrice,
             disabled: !isCustomPriceDirty,
-            className: "w-full rounded-lg border border-primary bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary/20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400",
+            className: "w-full rounded-lg border border-primary bg-primary-10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary-20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400",
             children: "Apply"
           }
         )
@@ -14463,7 +14192,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
             animate: { opacity: 1, y: 0 },
             className: `group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${!categoryFilter ? "bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105" : "bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary"}`,
             children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx("div", { className: `size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter ? "bg-white/20" : "bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110"}`, children: /* @__PURE__ */ jsx(Package, { className: `size-6 ${!categoryFilter ? "text-white" : "text-primary"}` }) }),
+              /* @__PURE__ */ jsx("div", { className: `size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter ? "bg-white/20" : "bg-linear-to-br from-primary-10 to-secondary-10 group-hover:scale-110"}`, children: /* @__PURE__ */ jsx(Package, { className: `size-6 ${!categoryFilter ? "text-white" : "text-primary"}` }) }),
               /* @__PURE__ */ jsx("h3", { className: `font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? "text-white" : "text-secondary"}`, children: "All Products" }),
               /* @__PURE__ */ jsx("p", { className: `font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? "text-white/80" : "text-muted"}`, children: "Browse Everything" })
             ] })
@@ -14482,7 +14211,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
               onClick: () => handleCategoryChange(categoryId),
               className: `group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${isSelected ? "bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105" : "bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary"}`,
               children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx("div", { className: `size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected ? "bg-white/20" : "bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110"}`, children: /* @__PURE__ */ jsx(Icon, { className: `size-6 ${isSelected ? "text-white" : "text-primary"}` }) }),
+                /* @__PURE__ */ jsx("div", { className: `size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected ? "bg-white/20" : "bg-linear-to-br from-primary-10 to-secondary-10 group-hover:scale-110"}`, children: /* @__PURE__ */ jsx(Icon, { className: `size-6 ${isSelected ? "text-white" : "text-primary"}` }) }),
                 /* @__PURE__ */ jsx("h3", { className: `font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? "text-white" : "text-secondary"}`, children: category.name }),
                 /* @__PURE__ */ jsx("p", { className: `font-['Poppins',sans-serif] text-[11px] ${isSelected ? "text-white/80" : "text-muted"}`, children: category.description })
               ] })
@@ -14890,7 +14619,7 @@ function StarRating({
   onChange,
   className
 }) {
-  const [hoverRating, setHoverRating] = React12.useState(0);
+  const [hoverRating, setHoverRating] = React10.useState(0);
   const handleClick = (index) => {
     if (interactive && onChange) {
       onChange(index + 1);
@@ -15022,7 +14751,7 @@ function ReviewCard({ review, showProductInfo = false }) {
 function ReviewsList({ reviews, isLoading }) {
   const [filterRating, setFilterRating] = useState("all");
   const [sortBy, setSortBy] = useState("recent");
-  const filteredReviews = React12.useMemo(() => {
+  const filteredReviews = React10.useMemo(() => {
     let filtered = [...reviews];
     if (filterRating !== "all") {
       filtered = filtered.filter((review) => Math.floor(review.rating) === filterRating);
@@ -15425,7 +15154,7 @@ function ProductDetailScreen({ productId }) {
             {
               type: "button",
               onClick: () => setActiveImageIndex(index),
-              className: `relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index ? "border-primary/50 ring-2 ring-primary/80 ring-offset-2 shadow-md" : "border-slate-200 hover:border-primary/50"}`,
+              className: `relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index ? "border-primary-50 ring-2 ring-primary-80 ring-offset-2 shadow-md" : "border-slate-200 hover:border-primary-50"}`,
               children: /* @__PURE__ */ jsx(
                 Image4,
                 {
@@ -15519,7 +15248,7 @@ function ProductDetailScreen({ productId }) {
                   {
                     type: "button",
                     onClick: () => handleVariantSelect(variant),
-                    className: `flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected ? "border-primary bg-primary/5" : "border-gray-200 hover:border-primary/50"}`,
+                    className: `flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected ? "border-primary bg-primary-5" : "border-gray-200 hover:border-primary-50"}`,
                     children: [
                       /* @__PURE__ */ jsx("div", { className: `relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? "border-primary" : "border-slate-200"}`, children: /* @__PURE__ */ jsx(
                         Image4,
@@ -15598,7 +15327,7 @@ function ProductDetailScreen({ productId }) {
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary/5 transition-all flex items-center justify-center",
+                  className: "sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary-5 transition-all flex items-center justify-center",
                   onClick: handleToggleFavorite,
                   children: /* @__PURE__ */ jsx(Heart, { className: `h-4 w-4  ${isFavorited ? "fill-red-500 text-red-500" : "text-primary"}` })
                 }
@@ -16858,7 +16587,7 @@ function CheckoutScreen() {
       setIsSubmitting(false);
     }
   };
-  React12.useEffect(() => {
+  React10.useEffect(() => {
     if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
       router.push(buildPath("/cart"));
     }
@@ -17416,9 +17145,9 @@ function LoginScreen() {
               status && /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${status.type === "success" ? "border-green-200 bg-green-50 text-green-800" : "border-red-200 bg-red-50 text-red-700"}`,
+                  className: `flex flex-row items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${status.type === "success" ? "border-green-200 bg-green-50 text-green-800" : "border-red-200 bg-red-50 text-red-700"}`,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "mt-[2px] text-base", children: status.type === "success" ? "\u2714" : "!" }),
+                    /* @__PURE__ */ jsx("span", { className: " text-base", children: status.type === "success" ? "\u2714" : "!" }),
                     /* @__PURE__ */ jsx("span", { children: status.message })
                   ]
                 }
@@ -18842,7 +18571,7 @@ function AccountPage() {
   const [activeTab, setActiveTab] = useState("overview");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isLoggingOut, setIsLoggingOut] = useState(false);
-  React12.useEffect(() => {
+  React10.useEffect(() => {
     const handleTabSwitch = (event) => {
       setActiveTab(event.detail);
     };
@@ -20265,7 +19994,7 @@ function WishlistScreen() {
                       {
                         size: "sm",
                         onClick: () => router.push(buildPath(`/products/${product._id}`)),
-                        className: "bg-primary/90 text-white hover:bg-primary/70",
+                        className: "bg-primary-90 text-white hover:bg-primary-70",
                         children: "View details"
                       }
                     ),
@@ -21125,7 +20854,7 @@ function OrderReviewsScreen() {
   const { orders, isLoading, error, refetch } = useCurrentOrders();
   const [selectedOrder, setSelectedOrder] = useState(null);
   const [selectedProduct, setSelectedProduct] = useState(null);
-  React12.useEffect(() => {
+  React10.useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       router.push("/login");
     }
@@ -21577,7 +21306,7 @@ function OrderDetailScreen({ id }) {
   const { order, isLoading, error } = useOrder(id);
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-primary/20 border-t-primary rounded-full animate-spin mb-4" }),
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-primary-20 border-t-primary rounded-full animate-spin mb-4" }),
       /* @__PURE__ */ jsx("p", { className: "text-muted font-medium animate-pulse", children: "Retrieving order details..." })
     ] });
   }
@@ -21747,7 +21476,7 @@ function OrderDetailScreen({ id }) {
         {
           initial: { opacity: 0, x: 20 },
           animate: { opacity: 1, x: 0 },
-          className: "bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary/20 sticky top-8",
+          className: "bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary-20 sticky top-8",
           children: [
             /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mb-6 flex items-center gap-2", children: "Summary View" }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-4 mb-8", children: [
@@ -21849,103 +21578,440 @@ function ChangePasswordScreen() {
             /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-slate-900", children: "Change password" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-slate-600", children: "Use a strong password that you have not used elsewhere. Updating your password will sign you out of other active sessions." }),
-        status && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-slate-600", children: "Use a strong password that you have not used elsewhere. Updating your password will sign you out of other active sessions." }),
+        status && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `mt-4 flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${status.type === "success" ? "border-green-200 bg-green-50 text-green-800" : "border-red-200 bg-red-50 text-red-700"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-[2px] text-base", children: status.type === "success" ? "\u2714" : "!" }),
+              /* @__PURE__ */ jsx("span", { children: status.message })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "mt-8 space-y-5", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              label: "Current password",
+              placeholder: "Enter current password",
+              ...register("currentPassword"),
+              error: errors.currentPassword?.message
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              label: "New password",
+              placeholder: "Enter new password",
+              ...register("newPassword"),
+              error: errors.newPassword?.message
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              label: "Confirm new password",
+              placeholder: "Re-type new password",
+              ...register("confirmPassword"),
+              error: errors.confirmPassword?.message
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                type: "submit",
+                size: "lg",
+                isLoading: isSubmitting,
+                children: "Save password"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline-solid",
+                size: "lg",
+                className: "border-slate-300 text-slate-800 hover:bg-slate-50",
+                onClick: () => router.push(buildPath("/account")),
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600", children: [
+          /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4 text-primary-600" }),
+          "Strong passwords and up-to-date contact details help pharmacists verify changes quickly."
+        ] })
+      ]
+    }
+  ) }) });
+}
+var getNotificationIcon = (type) => {
+  const className = "w-5 h-5";
+  switch (type) {
+    case "ORDER_CONFIRMATION":
+    case "ORDER_SHIPPED":
+    case "ORDER_DELIVERED":
+      return /* @__PURE__ */ jsx(Package, { className });
+    case "PAYMENT_FAILED":
+    case "REFUND_PROCESSED":
+      return /* @__PURE__ */ jsx(CreditCard, { className });
+    case "PASSWORD_RESET":
+    case "NEW_DEVICE_LOGIN":
+    case "TWO_FA_CODE":
+      return /* @__PURE__ */ jsx(Lock, { className });
+    case "ABANDONED_CART_REMINDER":
+      return /* @__PURE__ */ jsx(ShoppingCart, { className });
+    case "PRICE_DROP_ALERT":
+      return /* @__PURE__ */ jsx(TrendingDown, { className });
+    case "BACK_IN_STOCK":
+    default:
+      return /* @__PURE__ */ jsx(Bell, { className });
+  }
+};
+var getNotificationColor = (type) => {
+  switch (type) {
+    case "ORDER_CONFIRMATION":
+    case "ORDER_DELIVERED":
+    case "REFUND_PROCESSED":
+      return "bg-green-100 text-green-600";
+    case "ORDER_SHIPPED":
+      return "bg-blue-100 text-blue-600";
+    case "PAYMENT_FAILED":
+      return "bg-red-100 text-red-600";
+    case "PASSWORD_RESET":
+    case "NEW_DEVICE_LOGIN":
+    case "TWO_FA_CODE":
+      return "bg-purple-100 text-purple-600";
+    case "ABANDONED_CART_REMINDER":
+    case "PRICE_DROP_ALERT":
+    case "BACK_IN_STOCK":
+      return "bg-orange-100 text-orange-600";
+    default:
+      return "bg-gray-100 text-gray-600";
+  }
+};
+var formatRelativeTime = (dateString) => {
+  const date = new Date(dateString);
+  const diff = Date.now() - date.getTime();
+  const mins = Math.floor(diff / 6e4);
+  const hours = Math.floor(diff / 36e5);
+  const days = Math.floor(diff / 864e5);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins} min ago`;
+  if (hours < 24) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+  if (days < 7) return `${days} day${days > 1 ? "s" : ""} ago`;
+  return date.toLocaleDateString();
+};
+function NotificationCard({
+  notification,
+  onMarkAsRead,
+  onDelete
+}) {
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const hasDragged = useRef(false);
+  const handleClick = () => {
+    if (hasDragged.current) return;
+    if (!notification.isRead) {
+      onMarkAsRead(notification._id);
+    }
+    if (notification.data?.orderId) {
+      router.push(buildPath(`/account/orders/${notification.data.orderId}`));
+    } else if (notification.data?.productId) {
+      router.push(buildPath(`/products/${notification.data.productId}`));
+    }
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDelete(notification._id);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-end px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-white", children: [
+      /* @__PURE__ */ jsx(Trash2, { className: "w-5 h-5" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider", children: "Remove" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        drag: "x",
+        initial: { opacity: 0, x: 0 },
+        animate: { opacity: 1, x: 0 },
+        className: `relative z-10 p-4 border cursor-pointer select-none touch-pan-y transition-colors ${notification.isRead ? "bg-white border-gray-200" : "bg-blue-50 border-blue-200"}`,
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${getNotificationColor(
+                notification.type
+              )}`,
+              children: getNotificationIcon(notification.type)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 text-sm line-clamp-1", children: notification.title }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleDelete,
+                  className: "flex-shrink-0 p-1 bg-gray-100 rounded-full hover:bg-red-50",
+                  "aria-label": "Delete notification",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-gray-400 hover:text-red-500" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-1 line-clamp-2", children: notification.body }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: formatRelativeTime(notification.createdAt) }),
+              !notification.isRead && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "w-2 h-2 bg-blue-500 rounded-full",
+                  "aria-label": "Unread"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+var modalVariants = {
+  hidden: { opacity: 0, y: -8, scale: 0.96 },
+  visible: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: -8, scale: 0.96 }
+};
+function NotificationModal() {
+  const {
+    isDrawerOpen,
+    closeDrawer,
+    notifications,
+    unreadCount,
+    isLoading,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    loadMore,
+    hasMore
+  } = useNotificationCenter();
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const scrollRef = useRef(null);
+  const modalRef = useRef(null);
+  const lastScrollTrigger = useRef(0);
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current || isLoading || !hasMore) return;
+    const now = Date.now();
+    if (now - lastScrollTrigger.current < 300) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    if ((scrollTop + clientHeight) / scrollHeight > 0.8) {
+      lastScrollTrigger.current = now;
+      loadMore();
+    }
+  }, [isLoading, hasMore, loadMore]);
+  const handleSettingsClick = useCallback(() => {
+    closeDrawer();
+    router.push(buildPath("/account/notifications"));
+  }, [closeDrawer, router, buildPath]);
+  useEffect(() => {
+    if (!isDrawerOpen) return;
+    modalRef.current?.focus();
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") closeDrawer();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isDrawerOpen, closeDrawer]);
+  useEffect(() => {
+    if (!isDrawerOpen) return;
+    const handleClickOutside = (e) => {
+      const bellButton = document.getElementById("notification-bell-button");
+      if (modalRef.current && !modalRef.current.contains(e.target) && !bellButton?.contains(e.target)) {
+        closeDrawer();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isDrawerOpen, closeDrawer]);
+  const hasNotifications = notifications.length > 0;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isDrawerOpen && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: modalRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "notification-title",
+      tabIndex: -1,
+      variants: modalVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      transition: { type: "spring", stiffness: 350, damping: 28 },
+      className: "absolute top-full lg:right-0 mt-1 lg:w-screen lg:max-w-sm bg-white rounded-2xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.15)] z-[100] flex flex-col overflow-hidden border border-gray-100 origin-top-right rounded-lg border border-slate-200 bg-white shadow-lg",
+      style: { maxHeight: "calc(100vh - 120px)" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute -top-1 right-5 w-3 h-3 bg-white border-l border-t border-gray-100 transform rotate-45 z-10" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-primary-50 to-white", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: "notification-title",
+                className: "text-lg font-bold text-gray-900",
+                children: "Notifications"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-live": "polite",
+                className: "bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full",
+                children: unreadCount
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            unreadCount > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: markAllAsRead,
+                title: "Mark all as read",
+                className: "p-2 rounded-lg hover:bg-white transition",
+                children: /* @__PURE__ */ jsx(CheckCheck, { className: "w-4 h-4 text-gray-600" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleSettingsClick,
+                title: "Notification settings",
+                className: "p-2 rounded-lg hover:bg-white transition",
+                children: /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4 text-gray-600" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: closeDrawer,
+                "aria-label": "Close notifications",
+                className: "p-2 rounded-lg hover:bg-red-50 transition",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-gray-600" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: `mt-4 flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${status.type === "success" ? "border-green-200 bg-green-50 text-green-800" : "border-red-200 bg-red-50 text-red-700"}`,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "mt-[2px] text-base", children: status.type === "success" ? "\u2714" : "!" }),
-              /* @__PURE__ */ jsx("span", { children: status.message })
-            ]
+            ref: scrollRef,
+            onScroll: handleScroll,
+            className: "flex-1 overflow-y-auto p-3 space-y-2 bg-gray-50 scrollbar-thin scrollbar-thumb-gray-300",
+            children: !hasNotifications && !isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-14 text-center", children: [
+              /* @__PURE__ */ jsx(BellOff, { className: "w-10 h-10 text-gray-400 mb-3" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "No notifications yet" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: "You\u2019re all caught up \u{1F389}" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              notifications.map((notification) => /* @__PURE__ */ jsx(
+                NotificationCard,
+                {
+                  notification,
+                  onMarkAsRead: markAsRead,
+                  onDelete: deleteNotification
+                },
+                notification._id
+              )),
+              isLoading && /* @__PURE__ */ jsx("div", { className: "space-y-2 py-2", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-16 rounded-xl bg-gray-200 animate-pulse"
+                },
+                i
+              )) }),
+              !hasMore && hasNotifications && /* @__PURE__ */ jsx("div", { className: "text-center py-3 text-xs text-gray-500", children: "You\u2019re all caught up \u{1F389}" })
+            ] })
           }
-        ),
-        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "mt-8 space-y-5", children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "password",
-              label: "Current password",
-              placeholder: "Enter current password",
-              ...register("currentPassword"),
-              error: errors.currentPassword?.message
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "password",
-              label: "New password",
-              placeholder: "Enter new password",
-              ...register("newPassword"),
-              error: errors.newPassword?.message
-            }
-          ),
+        )
+      ]
+    }
+  ) }) });
+}
+function NotificationBell() {
+  const { unreadCount, isDrawerOpen, openDrawer, closeDrawer } = useNotificationCenter();
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    if (isDrawerOpen) {
+      closeDrawer();
+    } else {
+      openDrawer();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        id: "notification-bell-button",
+        onClick: handleToggle,
+        onMouseDown: (e) => e.stopPropagation(),
+        className: `relative p-2.5 rounded-xl transition-all duration-300 group flex items-center justify-center ${isDrawerOpen ? "bg-primary-50 text-primary-600" : "hover:bg-gradient-to-br hover:from-primary-50 hover:to-primary-100/50 text-gray-700"}`,
+        "aria-label": "Notifications",
+        whileHover: isDrawerOpen ? {} : { scale: 1.05 },
+        whileTap: { scale: 0.95 },
+        children: [
           /* @__PURE__ */ jsx(
-            Input,
+            Bell,
             {
-              type: "password",
-              label: "Confirm new password",
-              placeholder: "Re-type new password",
-              ...register("confirmPassword"),
-              error: errors.confirmPassword?.message
+              className: `w-6 h-6 transition-colors duration-300 ${isDrawerOpen ? "text-primary-600 bg-gray-100 rounded-lg p-2 w-10 h-10 transition-all duration-300" : "group-hover:text-primary-600"}`,
+              strokeWidth: 2
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: unreadCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              Button,
+              motion.span,
               {
-                variant: "primary",
-                type: "submit",
-                size: "lg",
-                isLoading: isSubmitting,
-                children: "Save password"
+                initial: { scale: 0.8, opacity: 0 },
+                animate: {
+                  scale: [1, 1.4, 1.4],
+                  opacity: [0.6, 0, 0]
+                },
+                exit: { scale: 0, opacity: 0 },
+                transition: {
+                  duration: 2,
+                  repeat: Infinity,
+                  repeatDelay: 0.5
+                },
+                className: "absolute -top-0.5 -right-0.5 w-6 h-6 bg-red-500 rounded-full"
               }
             ),
             /* @__PURE__ */ jsx(
-              Button,
+              motion.span,
               {
-                type: "button",
-                variant: "outline-solid",
-                size: "lg",
-                className: "border-slate-300 text-slate-800 hover:bg-slate-50",
-                onClick: () => router.push(buildPath("/account")),
-                children: "Cancel"
+                initial: { scale: 0, rotate: -180 },
+                animate: { scale: 1, rotate: 0 },
+                exit: { scale: 0, rotate: 180 },
+                transition: {
+                  type: "spring",
+                  damping: 15,
+                  stiffness: 300
+                },
+                className: "absolute -top-1 -right-1 min-w-[20px] h-5 bg-gradient-to-br from-red-500 to-red-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center px-1.5 shadow-lg shadow-red-500/40 border-2 border-white",
+                children: unreadCount > 99 ? "99+" : unreadCount
               }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600", children: [
-          /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4 text-primary-600" }),
-          "Strong passwords and up-to-date contact details help pharmacists verify changes quickly."
-        ] })
-      ]
-    }
-  ) }) });
-}
-function NotificationBell() {
-  const { unreadCount, openDrawer } = useNotificationCenter();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: openDrawer,
-      className: "relative p-2 hover:bg-gray-100 rounded-lg transition-colors",
-      "aria-label": "Notifications",
-      children: [
-        /* @__PURE__ */ jsx(Bell, { className: "w-6 h-6 text-gray-700" }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: unreadCount > 0 && /* @__PURE__ */ jsx(
-          motion.span,
-          {
-            initial: { scale: 0 },
-            animate: { scale: 1 },
-            exit: { scale: 0 },
-            className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center",
-            children: unreadCount > 99 ? "99+" : unreadCount
-          }
-        ) })
-      ]
-    }
-  );
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(NotificationModal, {})
+  ] });
 }
 function Header() {
   const { config } = useTheme();
@@ -22290,6 +22356,141 @@ function Footer() {
     ] })
   ] }) });
 }
+function NotificationDrawer() {
+  const {
+    isDrawerOpen,
+    closeDrawer,
+    notifications,
+    unreadCount,
+    isLoading,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    loadMore,
+    hasMore
+  } = useNotificationCenter();
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const scrollContainerRef = useRef(null);
+  const handleScroll = () => {
+    if (!scrollContainerRef.current || isLoading || !hasMore) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+    if (scrollPercentage > 0.8) {
+      loadMore();
+    }
+  };
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isDrawerOpen) {
+        closeDrawer();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isDrawerOpen, closeDrawer]);
+  useEffect(() => {
+    if (isDrawerOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isDrawerOpen]);
+  const handleSettingsClick = () => {
+    closeDrawer();
+    router.push(buildPath("/account/notifications"));
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isDrawerOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/50 z-40",
+        onClick: closeDrawer
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { x: "100%" },
+        animate: { x: 0 },
+        exit: { x: "100%" },
+        transition: { type: "spring", damping: 25, stiffness: 200 },
+        className: "fixed right-0 top-0 bottom-0 w-full sm:w-[480px] bg-white shadow-2xl z-50 flex flex-col max-w-[480px]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 bg-white", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Notifications" }),
+              unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full", children: unreadCount })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              unreadCount > 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: markAllAsRead,
+                  className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+                  title: "Mark all as read",
+                  children: /* @__PURE__ */ jsx(CheckCheck, { className: "w-5 h-5 text-gray-600" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleSettingsClick,
+                  className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+                  title: "Notification settings",
+                  children: /* @__PURE__ */ jsx(Settings, { className: "w-5 h-5 text-gray-600" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: closeDrawer,
+                  className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5 text-gray-600" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollContainerRef,
+              onScroll: handleScroll,
+              className: "flex-1 overflow-y-auto p-4 space-y-3",
+              children: notifications.length === 0 && !isLoading ? (
+                // Empty state
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center py-12", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(BellOff, { className: "w-10 h-10 text-gray-400" }) }),
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: "No notifications yet" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 max-w-xs", children: "When you receive notifications, they'll appear here" })
+                ] })
+              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                notifications.map((notification) => /* @__PURE__ */ jsx(
+                  NotificationCard,
+                  {
+                    notification,
+                    onMarkAsRead: markAsRead,
+                    onDelete: deleteNotification
+                  },
+                  notification._id
+                )),
+                isLoading && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 border-2 border-primary-600 border-t-transparent rounded-full animate-spin" }) }),
+                !hasMore && notifications.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-sm text-gray-500", children: "You're all caught up! \u{1F389}" })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
 
 export { AccountReviewsTab, AddressAddressTypeEnum, AddressCreatedRequestAddressTypeEnum, AddressesScreen, ApiKeyInfoDtoKeyTypeEnum, AuthProvider, Badge, BulkChannelToggleDtoCategoryEnum, Button, CampaignDraftDtoStatusEnum, CampaignDraftScheduleDtoStatusEnum, CampaignDraftSendingDtoStatusEnum, CartItem, CartProvider, CartScreen, ChangePasswordScreen, CheckoutScreen, CreateAddressDtoAddressTypeEnum, CreateDiscountDtoStateEnum, CreateDiscountDtoTypeEnum, CreateDiscountDtoValueTypeEnum, CreateStoreAddressDtoAddressTypeEnum, CreateUserDtoCustomerTypeEnum, CreateUserDtoRoleEnum, CurrentOrdersScreen, DiscountStateEnum, DiscountTypeEnum, DiscountValueTypeEnum, EcommerceProvider, EditProfileScreen, EmptyState, Footer, ForgotPasswordScreen, Header, Input, LoginScreen, ManualDiscountDtoValueTypeEnum, ManualOrderDTOOrderStatusEnum, ManualOrderDTOPaymentMethodEnum, ManualOrderDTOPaymentStatusEnum, Modal, NewAddressPage as NewAddressScreen, NotificationBell, NotificationCard, NotificationCenterProvider, NotificationDrawer, NotificationSettingsScreen, OrderCard, OrderCardSkeleton, OrderDetailScreen, OrderOrderTypeEnum, OrderReviewsScreen, OrderTimeLineDTOTypeEnum, OrderTypeEnum, OrdersScreen, PaymentPaymentMethodEnum, PaymentPaymentStatusEnum, PaymentTimeLineDTOTitleEnum, PopulatedDiscountStateEnum, PopulatedDiscountTypeEnum, PopulatedDiscountValueTypeEnum, PopulatedOrderOrderTypeEnum, PopulatedOrderTypeEnum, PreferenceUpdateItemTypeEnum, ProductCard, ProductCardSkeleton, ProductDetailScreen, ProductReviewsSection, ProductVariantInventoryStatusEnum, AccountPage as ProfileScreen, RatingDistribution, RegisterScreen, ReorderProductsDtoContainerTypeEnum, ResetPasswordScreen, ReviewCard, ReviewForm, ReviewPromptBanner, ReviewsList, SearchPage as SearchResultsScreen, ShipmentDetailsDtoStatusEnum, ShippingInfoStatusEnum, ShopScreen, SingleProductMediaTypeEnum, Skeleton, StarRating, ThemeProvider, UpdateAddressDtoAddressTypeEnum, UpdateDiscountDtoStateEnum, UpdateDiscountDtoTypeEnum, UpdateDiscountDtoValueTypeEnum, UpdateManualShipmentStatusDtoStatusEnum, UpdateUserDtoCustomerTypeEnum, UpdateUserDtoRoleEnum, UserEntityCustomerTypeEnum, UserEntityRoleEnum, UserWithNoIdCustomerTypeEnum, UserWithNoIdRoleEnum, WishlistProvider, WishlistScreen, formatDate, formatPrice, generateColorShades, getApiConfiguration, getInitials, hexToRgb, initializeApiAdapter, truncate, useAddresses, useAuth, useBasePath, useCart, useCategories, useCreateReview, useCurrentOrders, useDeleteReview, useNotificationCenter, useOrder, useOrders, useProduct, useProductReviews, useProducts, useReviewStats, useReviewsByRating, useStoreCapabilities, useTheme, useUpdateReview, useUserReviews, useWishlist };
 //# sourceMappingURL=index.mjs.map