hey-pharmacist-ecommerce 1.1.31 → 1.1.32

package/dist/index.mjs

@@ -3,7 +3,7 @@ import React12, { createContext, forwardRef, useContext, useEffect, useState, us
 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, Bell, Zap, LogOut, Menu, Facebook, Twitter, Instagram, Shirt, Pill, Box, TrendingDown, ExternalLink, Gift, Tag, Globe, Home, CheckCircle, Edit, AlertTriangle, Info, XCircle } from 'lucide-react';
+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, Bell, LogOut, Menu, Facebook, Twitter, Instagram, Shirt, Pill, Box, TrendingDown, ExternalLink, Gift, Tag, Globe, Home, CheckCircle, Edit, AlertTriangle, Info, XCircle } from 'lucide-react';
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
 import { useRouter, useSearchParams, useParams } from 'next/navigation';
 import Image4 from 'next/image';
@@ -12434,13 +12434,6 @@ function NotificationCenterProvider({ children }) {
     setIsLoading(true);
     try {
       const response = await notificationsApi.current.getNotifications(pageNum, 20, false);
-      console.log("Raw API response:", {
-        fullResponse: response,
-        data: response.data,
-        dataType: typeof response.data,
-        isArray: Array.isArray(response.data),
-        keys: response.data ? Object.keys(response.data) : []
-      });
       const data = response.data;
       let rawNotifications = [];
       if (Array.isArray(data)) {
@@ -12460,13 +12453,6 @@ function NotificationCenterProvider({ children }) {
         createdAt: n.createdAt,
         data: n.data
       }));
-      console.log("Fetched and mapped notifications:", {
-        pageNum,
-        append,
-        rawCount: rawNotifications.length,
-        mappedCount: newNotifications.length,
-        firstNotification: newNotifications[0]
-      });
       if (append) {
         setNotifications((prev) => [...prev, ...newNotifications]);
       } else {
@@ -12485,7 +12471,6 @@ function NotificationCenterProvider({ children }) {
     setIsLoading(true);
     try {
       const response = await notificationsApi.current.getSettings();
-      console.log("Settings API response raw:", response);
       const rawData = response.data;
       let finalSettings = null;
       if (rawData) {
@@ -12530,7 +12515,6 @@ function NotificationCenterProvider({ children }) {
           finalSettings = rawData;
         }
       }
-      console.log("Parsed settings:", finalSettings);
       setSettings(finalSettings);
     } catch (error) {
       console.error("Failed to fetch settings:", error);
@@ -12546,11 +12530,12 @@ function NotificationCenterProvider({ children }) {
       }
       return;
     }
-    const token = getAuthToken();
-    if (!token) return;
     try {
       const config = getCurrentConfig();
-      const sseUrl = `${config.apiBaseUrl}/notifications/stream?token=${encodeURIComponent(token)}`;
+      const token = getAuthToken();
+      if (!token) return;
+      const baseUrl = config.apiBaseUrl.endsWith("/") ? config.apiBaseUrl.slice(0, -1) : config.apiBaseUrl;
+      const sseUrl = `${baseUrl}/notifications/stream?token=${encodeURIComponent(token)}`;
       const eventSource = new EventSource(sseUrl);
       eventSourceRef.current = eventSource;
       eventSource.onmessage = (event) => {
@@ -12671,14 +12656,13 @@ function NotificationCenterProvider({ children }) {
           }
         }))
       };
-      console.log("Updating settings with payload:", payload);
       await notificationsApi.current.updateSettings(payload);
-      setSettings(newSettings);
+      await fetchSettings();
     } catch (error) {
       console.error("Failed to update settings:", error);
       throw error;
     }
-  }, []);
+  }, [fetchSettings]);
   const value = {
     notifications,
     unreadCount,
@@ -12846,14 +12830,6 @@ function NotificationDrawer() {
   const router = useRouter();
   const { buildPath } = useBasePath();
   const scrollContainerRef = useRef(null);
-  console.log("NotificationDrawer render:", {
-    isDrawerOpen,
-    notificationsCount: notifications.length,
-    notifications: notifications.slice(0, 2),
-    // First 2 for brevity
-    unreadCount,
-    isLoading
-  });
   const handleScroll = () => {
     if (!scrollContainerRef.current || isLoading || !hasMore) return;
     const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
@@ -12885,6 +12861,7 @@ function NotificationDrawer() {
     closeDrawer();
     router.push(buildPath("/account/notifications"));
   };
+  console.log(notifications);
   return /* @__PURE__ */ jsx(AnimatePresence, { children: isDrawerOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       motion.div,
@@ -13381,7 +13358,7 @@ function ProductCard({
                 /* @__PURE__ */ jsx("h3", { className: "text-sm font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] line-clamp-2", children: product.name }),
                 selectedVariant && /* @__PURE__ */ jsx("p", { className: "text-xs font-['Poppins',sans-serif] text-[#676c80]", children: selectedVariant.name })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 ", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 my-2", children: [
                 /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
                   Star,
                   {
@@ -13389,7 +13366,7 @@ function ProductCard({
                   },
                   i
                 )) }),
-                /* @__PURE__ */ jsxs("span", { className: "font-['Poppins',sans-serif] text-[10px] text-[#676c80] mt-4", children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-['Poppins',sans-serif] text-[10px] text-[#676c80] ", children: [
                   "(",
                   product.summary?.reviewCount || 0,
                   ")"
@@ -13475,7 +13452,7 @@ function ProductCard({
                   }
                 },
                 disabled: isAddingToCart || variantImages.length > 0 && !selectedVariantId || displayInventoryCount === 0,
-                className: "w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-[#5B9BD5] text-white hover:bg-[#4a8ac4] hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed",
+                className: "w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-[#5B9BD5] text-white hover:bg-[#4a8ac4] hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
                 children: [
                   /* @__PURE__ */ jsx(ShoppingCart, { className: "h-4 w-4" }),
                   displayInventoryCount === 0 ? "Out of Stock" : "Add to Cart"
@@ -13539,7 +13516,7 @@ function Button({
   children,
   ...props
 }) {
-  const baseStyles = "font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500";
+  const baseStyles = "font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 hover:cursor-pointer";
   const variants = {
     primary: "bg-primary-600 text-white hover:bg-primary-700 shadow-lg shadow-primary-500/30 hover:shadow-xl hover:shadow-primary-500/40",
     secondary: "bg-secondary-600 text-white hover:bg-secondary-700 shadow-lg shadow-secondary-500/30 hover:shadow-xl hover:shadow-secondary-500/40",
@@ -18067,7 +18044,7 @@ function TabNavigation({ tabs: tabs2, activeTab, onTabChange }) {
       {
         onClick: () => onTabChange(tab.id),
         className: `
-                flex items-center gap-2 px-6 py-3 text-sm font-medium whitespace-nowrap
+                flex items-center gap-2 px-6 py-3 mt-2 text-sm font-medium whitespace-nowrap
                 border-b-2 transition-colors
                 ${isActive ? "bg-secondary text-white rounded-xl hover:transition-all hover:duration-300 hover:ease-in-out hover:-translate-y-1" : "bg-white text-muted rounded-xl hover:text-secondary hover:transition-all hover:duration-150 hover:ease-in-out hover:-translate-y-1"}
               `,
@@ -18747,9 +18724,6 @@ function AccountSettingsTab() {
   const router = useRouter();
   const { buildPath } = useBasePath();
   const { logout } = useAuth();
-  const [emailNotifications, setEmailNotifications] = useState(true);
-  const [orderUpdates, setOrderUpdates] = useState(true);
-  const [promotionalEmails, setPromotionalEmails] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState(null);
@@ -18769,59 +18743,6 @@ function AccountSettingsTab() {
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white p-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
-        /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-secondary" }),
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-secondary", children: "Account Preferences" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-secondary", children: "Email Notifications" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: "Receive updates about your orders" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              checked: emailNotifications,
-              onChange: (e) => setEmailNotifications(e.target.checked),
-              className: "h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-secondary", children: "Order Updates" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: "Get notified about shipping status" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              checked: orderUpdates,
-              onChange: (e) => setOrderUpdates(e.target.checked),
-              className: "h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-secondary", children: "Promotional Emails" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: "Receive special offers and discounts" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              checked: promotionalEmails,
-              onChange: (e) => setPromotionalEmails(e.target.checked),
-              className: "h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
-            }
-          )
-        ] })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white p-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
         /* @__PURE__ */ jsx(Lock, { className: "h-5 w-5 text-secondary" }),
@@ -21453,7 +21374,6 @@ function OrderReviewsScreen() {
 var NOTIFICATION_CATEGORIES = [
   {
     name: "Order Updates",
-    icon: Package,
     types: [
       {
         type: "ORDER_CONFIRMATION" /* ORDERCONFIRMATION */,
@@ -21474,7 +21394,6 @@ var NOTIFICATION_CATEGORIES = [
   },
   {
     name: "Payments",
-    icon: CreditCard,
     types: [
       {
         type: "PAYMENT_FAILED" /* PAYMENTFAILED */,
@@ -21490,7 +21409,6 @@ var NOTIFICATION_CATEGORIES = [
   },
   {
     name: "Security",
-    icon: Shield,
     types: [
       {
         type: "PASSWORD_RESET" /* PASSWORDRESET */,
@@ -21513,7 +21431,6 @@ var NOTIFICATION_CATEGORIES = [
   },
   {
     name: "Marketing",
-    icon: Bell,
     types: [
       {
         type: "ABANDONED_CART_REMINDER" /* ABANDONEDCARTREMINDER */,
@@ -21536,31 +21453,29 @@ var NOTIFICATION_CATEGORIES = [
     ]
   }
 ];
+var Switch = ({ checked, onChange, disabled }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    onClick: () => !disabled && onChange(!checked),
+    className: `relative w-9 h-5 rounded-full transition-colors duration-200 ease-in-out focus:outline-none ${checked ? "bg-black" : "bg-slate-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+    children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out ${checked ? "translate-x-4" : "translate-x-0"}`
+      }
+    )
+  }
+);
 function NotificationSettingsScreen() {
   const { settings, updateSettings, isLoading } = useNotificationCenter();
   const [localSettings, setLocalSettings] = useState(settings);
-  const [expandedCategories, setExpandedCategories] = useState(
-    new Set(NOTIFICATION_CATEGORIES.map((cat) => cat.name))
-  );
   const [isSaving, setIsSaving] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
   useEffect(() => {
-    console.log("NotificationSettingsScreen: settings updated:", settings);
     if (settings) {
       setLocalSettings(settings);
     }
   }, [settings]);
-  const toggleCategory = (categoryName) => {
-    setExpandedCategories((prev) => {
-      const next = new Set(prev);
-      if (next.has(categoryName)) {
-        next.delete(categoryName);
-      } else {
-        next.add(categoryName);
-      }
-      return next;
-    });
-  };
   const getChannelSetting = (type, channel) => {
     const activeSettings = hasChanges ? localSettings : settings;
     if (!activeSettings?.preferences || !Array.isArray(activeSettings.preferences)) {
@@ -21616,173 +21531,83 @@ function NotificationSettingsScreen() {
       setIsSaving(false);
     }
   };
-  const disableAllChannel = (channel) => {
-    setLocalSettings((prev) => {
-      const currentSettings = prev || { preferences: [] };
-      const prefIsArray = Array.isArray(currentSettings.preferences);
-      const preferences = NOTIFICATION_CATEGORIES.flatMap(
-        (cat) => cat.types.filter((t) => !t.isComingSoon).map((t) => t.type)
-      ).map((type) => {
-        const existing = prefIsArray ? currentSettings.preferences.find((p) => p.type === type) : void 0;
-        return {
-          type,
-          settings: {
-            email: channel === "email" ? false : existing?.settings?.email ?? true,
-            push: channel === "push" ? false : existing?.settings?.push ?? true,
-            inApp: existing?.settings?.inApp ?? true
-          }
-        };
-      });
-      return { ...currentSettings, preferences };
-    });
-    setHasChanges(true);
-  };
   if (isLoading && !settings) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "w-10 h-10 text-primary animate-spin mb-4" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted font-medium", children: "Loading preferences..." })
-    ] });
+    return /* @__PURE__ */ jsx("div", { className: "flex h-[50vh] flex-col items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-slate-400" }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]", children: [
-    /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-8", children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-secondary", children: "Notification Preferences" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted", children: "Manage how you receive notifications for different events" })
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl px-6 py-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-6 flex items-end justify-between border-b border-slate-100 pb-4", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-slate-900", children: "Notifications" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-slate-500", children: "Manage your notification preferences across all channels." })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto px-4 pb-32", children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-4 mb-8", children: NOTIFICATION_CATEGORIES.map((category) => /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => toggleCategory(category.name),
-            className: "w-full flex items-center justify-between p-6 hover:bg-slate-50 transition-colors",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "p-2 bg-slate-100 rounded-lg group-hover:bg-white transition-colors", children: /* @__PURE__ */ jsx(category.icon, { className: "w-5 h-5 text-secondary" }) }),
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-secondary", children: category.name })
-              ] }),
-              expandedCategories.has(category.name) ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-5 h-5 text-muted" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5 text-muted" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: expandedCategories.has(category.name) && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { height: 0, opacity: 0 },
-            animate: { height: "auto", opacity: 1 },
-            exit: { height: 0, opacity: 0 },
-            transition: { duration: 0.2 },
-            className: "border-t border-slate-100",
-            children: /* @__PURE__ */ jsx("div", { className: "p-6 space-y-4", children: category.types.map((notifType) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `rounded-xl border border-slate-200 bg-slate-50 p-4 transition-all hover:bg-white hover:shadow-sm ${notifType.isComingSoon ? "opacity-50 grayscale select-none" : ""}`,
-                children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-6", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-secondary", children: notifType.label }),
-                      notifType.isComingSoon && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider bg-slate-200 text-muted px-2 py-0.5 rounded-full", children: "Soon" })
-                    ] }),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted mt-1 leading-relaxed", children: notifType.description })
-                  ] }),
-                  !notifType.isComingSoon && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 sm:border-l sm:border-slate-200 sm:pl-6", children: [
-                    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer group/label", children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: getChannelSetting(notifType.type, "email"),
-                          onChange: (e) => updateChannelSetting(notifType.type, "email", e.target.checked),
-                          className: "w-4 h-4 text-primary border-slate-300 rounded-sm focus:ring-primary focus:ring-offset-0"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted uppercase tracking-wider group-hover/label:text-primary transition-colors", children: "Email" })
-                    ] }),
-                    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer group/label", children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: getChannelSetting(notifType.type, "push"),
-                          onChange: (e) => updateChannelSetting(notifType.type, "push", e.target.checked),
-                          className: "w-4 h-4 text-primary border-slate-300 rounded-sm focus:ring-primary focus:ring-offset-0"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted uppercase tracking-wider group-hover/label:text-primary transition-colors", children: "Push" })
-                    ] }),
-                    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer group/label", children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: getChannelSetting(notifType.type, "inApp"),
-                          onChange: (e) => updateChannelSetting(notifType.type, "inApp", e.target.checked),
-                          className: "w-4 h-4 text-primary border-slate-300 rounded-sm focus:ring-primary focus:ring-offset-0"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted uppercase tracking-wider group-hover/label:text-primary transition-colors", children: "In-App" })
-                    ] })
-                  ] })
-                ] })
-              },
-              notifType.type
-            )) })
-          }
-        ) })
-      ] }, category.name)) }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl p-6 border border-slate-200 mb-8 shadow-xs", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
-          /* @__PURE__ */ jsx(Zap, { className: "h-5 w-5 text-accent" }),
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-secondary", children: "Quick Actions" })
+    /* @__PURE__ */ jsxs("div", { className: "hidden grid-cols-12 gap-4 border-b border-slate-100 pb-3 text-xs font-medium uppercase tracking-wider text-slate-400 sm:grid", children: [
+      /* @__PURE__ */ jsx("div", { className: "col-span-8", children: "Topic" }),
+      /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center", children: "Email" }),
+      /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center", children: "Push" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-8 py-4", children: NOTIFICATION_CATEGORIES.map((category) => /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-6 text-sm font-semibold text-slate-900", children: category.name }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: category.types.map((notifType) => /* @__PURE__ */ jsxs("div", { className: "group grid grid-cols-1 sm:grid-cols-12 gap-y-3 sm:gap-x-4 items-start sm:items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "col-span-8 pr-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-sm font-medium ${notifType.isComingSoon ? "text-slate-400" : "text-slate-700"}`, children: notifType.label }),
+            notifType.isComingSoon && /* @__PURE__ */ jsx("span", { className: "rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: "Soon" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-slate-500", children: notifType.description })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline-solid",
-              size: "sm",
-              onClick: () => disableAllChannel("email"),
-              className: "rounded-xl border-slate-200 hover:bg-slate-50",
-              children: "Disable All Emails"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline-solid",
-              size: "sm",
-              onClick: () => disableAllChannel("push"),
-              className: "rounded-xl border-slate-200 hover:bg-slate-50",
-              children: "Disable All Push"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(AnimatePresence, { children: hasChanges && /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 100 },
-          animate: { opacity: 1, y: 0 },
-          exit: { opacity: 0, y: 100 },
-          className: "fixed bottom-10 left-0 right-0 flex justify-center z-50 pointer-events-none",
-          children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto px-6 py-4 bg-secondary shadow-lg rounded-3xl flex items-center gap-8 max-w-xl mx-auto transform hover:scale-[1.02] transition-all duration-300 ease-out border border-white/10", children: [
-            /* @__PURE__ */ jsxs("div", { className: "hidden sm:block", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-white leading-tight tracking-wide italic", children: "Changes Pending" }),
-              /* @__PURE__ */ jsx("p", { className: "text-[11px] text-white/60 font-medium", children: "Click to synchronize with account" })
-            ] }),
+        /* @__PURE__ */ jsxs("div", { className: "col-span-4 grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between sm:justify-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "sm:hidden text-xs text-slate-400", children: "Email" }),
             /* @__PURE__ */ jsx(
-              Button,
+              Switch,
               {
-                onClick: handleSave,
-                isLoading: isSaving,
-                disabled: isSaving,
-                variant: "secondary",
-                className: "px-8 py-3 bg-accent border-none text-white rounded-2xl font-bold text-xs uppercase tracking-widest hover:bg-accent-dark transition-all active:scale-95 shadow-lg shadow-accent/25 min-w-[180px]",
-                children: isSaving ? "Saving..." : "Sync Changes"
+                checked: getChannelSetting(notifType.type, "email"),
+                onChange: (checked) => updateChannelSetting(notifType.type, "email", checked),
+                disabled: notifType.isComingSoon
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between sm:justify-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "sm:hidden text-xs text-slate-400", children: "Push" }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: getChannelSetting(notifType.type, "push"),
+                onChange: (checked) => updateChannelSetting(notifType.type, "push", checked),
+                disabled: notifType.isComingSoon
               }
             )
           ] })
+        ] })
+      ] }, notifType.type)) })
+    ] }, category.name)) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-12 border-t border-slate-100 pt-8 text-center sm:text-left", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        className: "text-xs text-slate-400 hover:text-red-600 px-0",
+        onClick: () => {
+          if (confirm("Are you sure you want to disable all notifications?")) {
+            localSettings?.preferences ? [...localSettings.preferences] : [];
+            alert("Feature to disable all coming in next update");
+          }
+        },
+        children: "Disable all notifications"
+      }
+    ) }),
+    hasChanges && /* @__PURE__ */ jsxs("div", { className: "bg-white/80 backdrop-blur-sm fixed bottom-6 left-1/2 -translate-x-1/2 z-50 rounded-xl shadow-lg border border-slate-200 p-2 px-4 flex items-center gap-4 animate-in slide-in-from-bottom-2 fade-in duration-300", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-600", children: "Unsaved changes" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-slate-200" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleSave,
+          isLoading: isSaving,
+          disabled: isSaving,
+          variant: "primary",
+          className: "h-8 rounded-lg px-4 text-xs font-medium bg-black text-white bg-slate-800 hover:bg-slate-700",
+          children: "Save"
         }
-      ) })
+      )
     ] })
   ] });
 }