hey-pharmacist-ecommerce 1.1.13 → 1.1.15

package/src/components/QuickViewModal.tsx

@@ -0,0 +1,314 @@
+import { useState } from 'react';
+import { X, ShoppingCart, Check, Star, Package, ExternalLink, Minus, Plus } from 'lucide-react';
+import { ExtendedProductDTO, Product } from '@/lib/Apis';
+import { useCart } from '@/providers/CartProvider';
+import Image from 'next/image';
+import { ProductVariantInventoryStatusEnum } from '@/lib/Apis';
+import { useNotification } from '@/providers/NotificationProvider';
+
+interface QuickViewModalProps {
+  product: ExtendedProductDTO;
+  onClose: () => void;
+  onNavigateToProduct?: (productId: string) => void;
+}
+
+export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickViewModalProps) {
+  const [selectedVariantIndex, setSelectedVariantIndex] = useState(0);
+  const [selectedSizeIndex, setSelectedSizeIndex] = useState(0);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [addedToCart, setAddedToCart] = useState(false);
+  const [quantity, setQuantity] = useState(1);
+  const { addToCart } = useCart();
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+  const notification = useNotification();
+
+  const handleQuantityChange = (newQuantity: number) => {
+    if (newQuantity >= 1 && newQuantity <= (selectedVariant.inventoryCount || 10)) {
+      setQuantity(newQuantity);
+    }
+  };
+  const selectedVariant = product.productVariants[selectedVariantIndex];
+  const selectedSize = selectedVariant.productMedia[selectedSizeIndex];
+  const displayPrice = product.finalPrice;
+
+  const handleAddToCart = async () => {
+    if (!product || !selectedVariant) return;
+
+    setIsAddingToCart(true);
+    try {
+      console.log(selectedVariant)
+      await addToCart(
+        product.id,
+        quantity,
+        selectedVariant._id
+      );
+      notification.success(
+        'Added to cart',
+        `${quantity} × ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ''} added to your cart.`
+      );
+    } catch (error) {
+      console.error('Failed to add to cart', error);
+      notification.error(
+        'Could not add to cart',
+        'Something went wrong while adding this item. Please try again.'
+      );
+    } finally {
+      setIsAddingToCart(false);
+    }
+  };
+
+  return (
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-white rounded-[32px] max-w-5xl w-full max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-8">
+          {/* Header */}
+          <div className="flex items-start justify-between mb-6">
+            <div>
+              <p className="font-['Poppins',sans-serif] text-[11px] text-primary uppercase tracking-wide font-medium mb-2">
+                {product.brand} • {product.parentCategories[0].name}
+              </p>
+              <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1px]">
+                {product.name}
+              </h2>
+              
+              {/* Rating */}
+              <div className="flex items-center gap-2 mt-2">
+                <div className="flex items-center gap-0.5">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className={`size-4 ${
+                        i < Math.floor(product.rating? product.rating : 0)
+                          ? 'text-accent fill-accent'
+                          : 'text-gray-300'
+                      }`}
+                    />
+                  ))}
+                </div>
+                <span className="font-['Poppins',sans-serif] text-[13px] text-muted">
+                  {product.rating} ({product.reviews? product.reviews.length : 0} reviews)
+                </span>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+            >
+              <X className="size-6 text-muted" />
+            </button>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Product Image */}
+            <div className="space-y-4">
+              <div className="relative aspect-[3/4] rounded-[24px] overflow-hidden bg-gray-50">
+                <img
+                  src={selectedVariant.productMedia[selectedImageIndex]?.file || selectedVariant.productMedia[0]?.file}
+                  alt={product.name}
+                  className="w-full h-full object-cover"
+                />
+                {/* Badges */}
+                <div className="absolute top-4 left-4 flex flex-col gap-2">
+                  {product.finalPrice && (
+                    <div className="bg-accent text-white rounded-full px-3 py-1.5">
+                      <span className="font-['Poppins',sans-serif] font-bold text-[11px] uppercase">
+                        -{product.discountAmount}%
+                      </span>
+                    </div>
+                  )}
+                  {/* {product.bestseller && (
+                    <div className="bg-secondary text-white rounded-full px-3 py-1.5">
+                      <span className="font-['Poppins',sans-serif] font-semibold text-[10px] uppercase">
+                        Bestseller
+                      </span>
+                    </div>
+                  )} */}
+                </div>
+              </div>
+
+              {/* Thumbnail Images */}
+              {selectedVariant.productMedia.length > 1 && (
+                <div className="grid grid-cols-4 gap-3">
+                  {selectedVariant.productMedia.map((image: any, index: any) => (
+                    <div 
+                      key={index} 
+                      className={`aspect-square rounded-xl overflow-hidden cursor-pointer transition-opacity ${selectedImageIndex === index ? 'ring-2 ring-primary' : 'bg-gray-50 hover:opacity-75'}`}
+                      onClick={() => setSelectedImageIndex(index)}
+                    >
+                      <img 
+                        src={image.file} 
+                        alt={`${product.name} ${index + 1}`} 
+                        className="w-full h-full object-cover" 
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Product Details */}
+            <div className="flex flex-col">
+              {/* Price */}
+              <div className="flex items-center gap-3 mb-4">
+                <span className="font-['Poppins',sans-serif] font-bold text-[32px] text-accent">
+                  ${displayPrice.toFixed(2)}
+                </span>
+                {product.isDiscounted && (
+                  <span className="font-['Poppins',sans-serif] text-[20px] text-muted line-through">
+                    ${product.finalPrice.toFixed(2)}
+                  </span>
+                )}
+              </div>
+
+              {/* Stock Status */}
+              <div className="mb-6">
+                {selectedVariant.inventoryCount === 0 ? (
+                  <span className="font-['Poppins',sans-serif] text-[12px] text-red-500 font-medium">
+                    Out of Stock
+                  </span>
+                ) : selectedVariant.inventoryCount <= 10 ? (
+                  <span className="font-['Poppins',sans-serif] text-[12px] text-orange-500 font-medium flex items-center gap-1">
+                    <Package className="size-3" />
+                    Only {selectedVariant.inventoryCount} left in stock
+                  </span>
+                ) : (
+                  <span className="font-['Poppins',sans-serif] text-[12px] text-green-600 font-medium flex items-center gap-1">
+                    <Package className="size-3" />
+                    In Stock
+                  </span>
+                )}
+              </div>
+
+              {/* Description */}
+              <p className="font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-6">
+                <div dangerouslySetInnerHTML={{ __html: product.description }} />
+              </p>
+
+              {/* Color Selection */}
+              <div className="mb-6">
+                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                  Selected Variant: <span className="font-normal text-muted">{product.productVariants[selectedVariantIndex].name}</span>
+                </h3>
+                <div className="flex flex-wrap gap-3">
+                  {product.productVariants.map((variant: any, index: any) => (
+                    <button
+                      key={variant.id}
+                      onClick={() => {
+                        setSelectedVariantIndex(index);
+                        setSelectedSizeIndex(0);
+                        setSelectedImageIndex(0); // Reset selected image index when variant changes
+                      }}
+                      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}
+                    >
+                        <Image
+                          src={variant.productMedia?.[0]?.file || ''}
+                          alt={variant.color || `Variant ${index + 1}`}
+                          className="object-cover"
+                          height={32}
+                          width={32}
+                        />
+                    </button>
+                  ))}
+                </div>
+              </div>
+              {/* Quick Features */}
+              <div className="mb-6 p-4 bg-gray-50 rounded-xl">
+                <ul className="space-y-2">
+                  {product.tags.slice(0, 3).map((feature: any, index: any) => (
+                    <li key={index} className="flex items-start gap-2">
+                      <Check className="size-4 text-primary shrink-0 mt-0.5" />
+                      <span className="font-['Poppins',sans-serif] text-[12px] text-muted">
+                        {feature}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Quantity Selector */}
+              <div className="mb-6">
+                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                  Quantity
+                </h3>
+                <div className="flex items-center gap-4">
+                  <button
+                    onClick={() => handleQuantityChange(quantity - 1)}
+                    disabled={quantity <= 1}
+                    className="p-2 rounded-full border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Minus className="size-4 text-secondary" />
+                  </button>
+                  <span className="w-8 text-center font-medium">{quantity}</span>
+                  <button
+                    onClick={() => handleQuantityChange(quantity + 1)}
+                    disabled={quantity >= (selectedVariant.inventoryCount || 10)}
+                    className="p-2 rounded-full border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Plus className="size-4 text-secondary" />
+                  </button>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col gap-3 mt-auto">
+                <button
+                  onClick={handleAddToCart}
+                  disabled={addedToCart || selectedVariant.inventoryCount === 0}
+                  className={`w-full font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 ${
+                    addedToCart
+                      ? 'bg-green-500 text-white'
+                      : 'bg-accent text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed'
+                  }`}
+                >
+                  {isAddingToCart ? (
+                  <>
+                    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Loading...
+                  </>
+                ) : (
+                  <>
+                  <ShoppingCart className="h-4 w-4" />
+                  {!selectedVariant
+                    ? 'Select a variant'
+                    : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK
+                      ? 'Out of Stock'
+                      : 'Add to Cart'}
+                  
+                  </>
+                )
+                }
+                </button>
+
+                <button
+                  onClick={() => {
+                    onClose();
+                    onNavigateToProduct?.(product.id);
+                  }}
+                  className="w-full font-['Poppins',sans-serif] font-medium text-[13px] px-6 py-3 rounded-full bg-white text-secondary border-2 border-primary hover:bg-gray-50 transition-all flex items-center justify-center gap-2"
+                >
+                  View Full Details
+                  <ExternalLink className="size-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/TabNavigation.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface Tab {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+}
+
+interface TabNavigationProps {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+}
+
+export function TabNavigation({ tabs, activeTab, onTabChange }: TabNavigationProps) {
+    return (
+        <div className="mx-auto flex items-center max-w-7xl px-4 py-4">
+            <nav className="flex overflow-x-auto scrollbar-hide justify-center gap-4" aria-label="Account tabs">
+                {tabs.map((tab) => {
+                    const isActive = activeTab === tab.id;
+                    const Icon = tab.icon;
+
+                    return (
+                        <button
+                            key={tab.id}
+                            onClick={() => onTabChange(tab.id)}
+                            className={`
+                flex items-center gap-2 px-6 py-3 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'
+                                }
+              `}
+                            aria-current={isActive ? 'page' : undefined}
+                        >
+                            <Icon className="h-5 w-5" />
+                            {tab.label}
+                        </button>
+                    );
+                })}
+            </nav>
+        </div>
+    );
+}

package/src/components/ui/Button.tsx

@@ -23,7 +23,7 @@ export function Button({
   children,
   ...props
 }: ButtonProps) {
-  const baseStyles = 'font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none 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-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500';
   
   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',

package/src/components/ui/ConfirmModal.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React from 'react';
+import { Modal } from './Modal';
+import { Button } from './Button';
+import { AlertTriangle } from 'lucide-react';
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'danger' | 'warning' | 'info';
+    isLoading?: boolean;
+}
+
+export function ConfirmModal({
+    isOpen,
+    onClose,
+    onConfirm,
+    title,
+    message,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    variant = 'danger',
+    isLoading = false,
+}: ConfirmModalProps) {
+    const handleConfirm = () => {
+        onConfirm();
+    };
+
+    const variantStyles = {
+        danger: {
+            icon: 'text-red-600 bg-red-100',
+            button: 'secondary' as const,
+        },
+        warning: {
+            icon: 'text-amber-600 bg-amber-100',
+            button: 'primary' as const,
+        },
+        info: {
+            icon: 'text-secondary bg-blue-100',
+            button: 'primary' as const,
+        },
+    };
+
+    const style = variantStyles[variant];
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} size="sm">
+            <div className="flex flex-col items-center text-center">
+                {/* Icon */}
+                <div className={`w-12 h-12 rounded-full ${style.icon} flex items-center justify-center mb-4`}>
+                    <AlertTriangle className="w-6 h-6" />
+                </div>
+
+                {/* Title */}
+                <h3 className="text-xl font-semibold text-secondary mb-2">{title}</h3>
+
+                {/* Message */}
+                <p className="text-muted mb-6">{message}</p>
+
+                {/* Actions */}
+                <div className="flex gap-3 w-full justify-center">
+                    <button
+                        className='px-6 py-2 border border-slate-200 rounded-full text-slate-700 hover:bg-slate-100 transition-colors'
+                        onClick={onClose}
+                    >
+                        {cancelText}
+                    </button>
+                    <button
+                        className='px-6 py-2 border border-red-600 rounded-full text-red-600 hover:bg-red-100 transition-colors bg-red-50'
+                        onClick={handleConfirm}
+                    >
+                        {confirmText}
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    );
+}

package/src/hooks/usePaymentMethods.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from 'react';
+import { PaymentMethodsApi } from '@/lib/Apis';
+import { getApiConfiguration } from '@/lib/api-adapter';
+import { PaymentMethod } from '@/lib/Apis/models';
+
+export function usePaymentMethods() {
+    const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    const fetchPaymentMethods = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await new PaymentMethodsApi(getApiConfiguration()).getPaymentMethods();
+            setPaymentMethods(response.data.paymentMethods || []);
+        } catch (err) {
+            setError(err as Error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, []);
+
+    const deletePaymentMethod = useCallback(async (paymentMethodId: string) => {
+        try {
+            await new PaymentMethodsApi(getApiConfiguration()).detachPaymentMethod({
+                paymentMethodId,
+            });
+            await fetchPaymentMethods();
+        } catch (err) {
+            throw err;
+        }
+    }, [fetchPaymentMethods]);
+
+    const setDefaultPaymentMethod = useCallback(async (paymentMethodId: string) => {
+        try {
+            await new PaymentMethodsApi(getApiConfiguration()).changeDefaultPayment({
+                paymentMethodId,
+            });
+            await fetchPaymentMethods();
+        } catch (err) {
+            throw err;
+        }
+    }, [fetchPaymentMethods]);
+
+    useEffect(() => {
+        fetchPaymentMethods();
+    }, [fetchPaymentMethods]);
+
+    return {
+        paymentMethods,
+        isLoading,
+        error,
+        refetch: fetchPaymentMethods,
+        deletePaymentMethod,
+        setDefaultPaymentMethod,
+    };
+}

package/src/index.ts

@@ -21,7 +21,6 @@ export { CurrentOrdersScreen } from './screens/CurrentOrdersScreen';
 export { AddressesScreen } from './screens/AddressesScreen';
 export { default as WishlistScreen } from './screens/WishlistScreen';
 export { default as SearchResultsScreen } from './screens/SearchResultsScreen';
-export { CategoriesScreen } from './screens/CategoriesScreen';
 export { default as NewAddressScreen } from './screens/NewAddressScreen';
 
 // Components

package/src/providers/CartProvider.tsx

@@ -2,10 +2,10 @@
 
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { useAuth } from './AuthProvider';
-import { toast } from 'sonner';
 import { CartResponseDto } from '@/lib/Apis/models';
 import { CartApi } from '@/lib/Apis';
 import { getApiConfiguration } from '@/lib/api-adapter';
+import { useNotification } from './NotificationProvider';
 
 interface CartContextValue {
   cart: CartResponseDto | null;
@@ -35,6 +35,7 @@ export function CartProvider({ children }: CartProviderProps) {
   const [cart, setCart] = useState<CartResponseDto | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const { isAuthenticated } = useAuth();
+  const notification = useNotification();
 
   const refreshCart = useCallback(async () => {
     if (!isAuthenticated) {
@@ -85,9 +86,15 @@ export function CartProvider({ children }: CartProviderProps) {
       
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
-      toast.success('Added to cart!');
+      notification.success(
+        'Added to cart',
+        'The item was added to your cart.'
+      );
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to add to cart');
+      notification.error(
+        'Could not add to cart',
+        error.response?.data?.message || 'Something went wrong while adding this item to your cart.'
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -114,7 +121,10 @@ export function CartProvider({ children }: CartProviderProps) {
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to update cart');
+      notification.error(
+        'Could not update cart',
+        error.response?.data?.message || 'There was a problem updating the item quantity. Please try again.'
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -131,7 +141,10 @@ export function CartProvider({ children }: CartProviderProps) {
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to remove from cart');
+      notification.error(
+        'Could not remove item',
+        error.response?.data?.message || 'There was a problem removing this item from your cart.'
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -144,7 +157,10 @@ export function CartProvider({ children }: CartProviderProps) {
       const response = await new CartApi(getApiConfiguration()).clearCart();
       setCart(null);
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to clear cart');
+      notification.error(
+        'Could not clear cart',
+        error.response?.data?.message || 'We could not clear your cart. Please try again.'
+      );
       throw error;
     } finally {
       setIsLoading(false);

package/src/providers/EcommerceProvider.tsx

@@ -8,9 +8,9 @@ import { CartProvider } from './CartProvider';
 import { WishlistProvider } from './WishlistProvider';
 import { BasePathProvider } from './BasePathProvider';
 import { initializeApiAdapter } from '@/lib/api-adapter';
-import { Toaster } from 'sonner';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { QueryClient } from '@tanstack/react-query';
+import { NotificationProvider } from './NotificationProvider';
 
 interface EcommerceProviderProps {
   config: EcommerceConfig;
@@ -34,12 +34,13 @@ export function EcommerceProvider({ config, children, withToaster = true, basePa
     <ThemeProvider config={config}>
       <BasePathProvider basePath={basePath}>
         <AuthProvider>
-          <CartProvider>
-            <WishlistProvider>
-              {children}
-              {withToaster && <Toaster position="top-right" richColors />}
-            </WishlistProvider>
-          </CartProvider>
+          <NotificationProvider>
+            <CartProvider>
+              <WishlistProvider>
+                {children}
+              </WishlistProvider>
+            </CartProvider>
+          </NotificationProvider>
         </AuthProvider>
       </BasePathProvider>
     </ThemeProvider>

package/src/providers/FavoritesProvider.tsx

@@ -2,7 +2,7 @@
 
 import { ExtendedProductDTO } from '@/lib/Apis';
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { toast } from 'sonner';
+import { useNotification } from './NotificationProvider';
 
 interface FavoritesContextType {
   favorites: string[];
@@ -17,6 +17,7 @@ const FavoritesContext = createContext<FavoritesContextType | undefined>(undefin
 export function FavoritesProvider({ children }: { children: ReactNode }) {
   const [favorites, setFavorites] = useState<string[]>([]);
   const [isClient, setIsClient] = useState(false);
+  const notification = useNotification();
 
   const getFavoritesKey = () => {
     if (typeof window === 'undefined') return 'favorites';
@@ -55,13 +56,19 @@ export function FavoritesProvider({ children }: { children: ReactNode }) {
   const addToFavorites = (product: ExtendedProductDTO) => {
     if (!favorites.includes(product.id)) {
       setFavorites(prev => [...prev, product.id]);
-      toast.success(`${product.name} added to favorites`);
+      notification.success(
+        'Added to favorites',
+        `${product.name} was added to your favorites.`
+      );
     }
   };
 
   const removeFromFavorites = (productId: string) => {
     setFavorites(prev => prev.filter(id => id !== productId));
-    toast.info('Removed from favorites');
+    notification.info(
+      'Removed from favorites',
+      'The item has been removed from your favorites.'
+    );
   };
 
   const toggleFavorite = (product: ExtendedProductDTO) => {