hey-pharmacist-ecommerce 1.1.13 → 1.1.14

package/src/components/Notification.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CheckCircle2, XCircle, AlertCircle, Info, X } from 'lucide-react';
+
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+
+export interface NotificationData {
+    id: string;
+    type: NotificationType;
+    message: string;
+    description?: string;
+    duration?: number;
+}
+
+interface NotificationProps {
+    notification: NotificationData;
+    onDismiss: (id: string) => void;
+}
+
+const notificationConfig = {
+    success: {
+        icon: CheckCircle2,
+        gradient: 'from-emerald-500 to-green-600',
+        iconColor: 'text-emerald-600',
+        bgColor: 'bg-emerald-50',
+        borderColor: 'border-emerald-200',
+    },
+    error: {
+        icon: XCircle,
+        gradient: 'from-red-500 to-rose-600',
+        iconColor: 'text-red-600',
+        bgColor: 'bg-red-50',
+        borderColor: 'border-red-200',
+    },
+    warning: {
+        icon: AlertCircle,
+        gradient: 'from-orange-500 to-amber-600',
+        iconColor: 'text-orange-600',
+        bgColor: 'bg-orange-50',
+        borderColor: 'border-orange-200',
+    },
+    info: {
+        icon: Info,
+        gradient: 'from-blue-500 to-indigo-600',
+        iconColor: 'text-blue-600',
+        bgColor: 'bg-blue-50',
+        borderColor: 'border-blue-200',
+    },
+};
+
+export function Notification({ notification, onDismiss }: NotificationProps) {
+    const [progress, setProgress] = useState(100);
+    const config = notificationConfig[notification.type];
+    const Icon = config.icon;
+    const duration = notification.duration || 4000;
+
+    useEffect(() => {
+        const startTime = Date.now();
+        const timer = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            const remaining = Math.max(0, 100 - (elapsed / duration) * 100);
+            setProgress(remaining);
+
+            if (remaining === 0) {
+                clearInterval(timer);
+                onDismiss(notification.id);
+            }
+        }, 16);
+
+        return () => clearInterval(timer);
+    }, [notification.id, duration, onDismiss]);
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: -20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, x: 100, scale: 0.95 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+            className={`relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
+        >
+            {/* Gradient accent bar */}
+            <div className={`h-1 bg-gradient-to-r ${config.gradient}`} />
+
+            <div className="p-4 flex items-start gap-3">
+                {/* Icon */}
+                <motion.div
+                    initial={{ scale: 0, rotate: -180 }}
+                    animate={{ scale: 1, rotate: 0 }}
+                    transition={{ delay: 0.1, type: 'spring', stiffness: 500 }}
+                    className={`size-10 rounded-full ${config.bgColor} flex items-center justify-center shrink-0`}
+                >
+                    <Icon className={`size-5 ${config.iconColor}`} />
+                </motion.div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                    <p className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] mb-1">
+                        {notification.message}
+                    </p>
+                    {notification.description && (
+                        <p className="font-['Poppins',sans-serif] text-[12px] text-[#676c80] leading-relaxed">
+                            {notification.description}
+                        </p>
+                    )}
+                </div>
+
+                {/* Close button */}
+                <button
+                    onClick={() => onDismiss(notification.id)}
+                    className="p-1.5 hover:bg-gray-100 rounded-full transition-colors shrink-0"
+                    aria-label="Dismiss notification"
+                >
+                    <X className="size-4 text-[#676c80]" />
+                </button>
+            </div>
+
+            {/* Progress bar */}
+            <div className="h-1 bg-gray-100">
+                <motion.div
+                    className={`h-full bg-gradient-to-r ${config.gradient}`}
+                    style={{ width: `${progress}%` }}
+                    transition={{ duration: 0.016, ease: 'linear' }}
+                />
+            </div>
+        </motion.div>
+    );
+}
+
+interface NotificationContainerProps {
+    notifications: NotificationData[];
+    onDismiss: (id: string) => void;
+}
+
+export function NotificationContainer({ notifications, onDismiss }: NotificationContainerProps) {
+    return (
+        <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3 pointer-events-none">
+            <AnimatePresence mode="popLayout">
+                {notifications.map((notification) => (
+                    <div key={notification.id} className="pointer-events-auto">
+                        <Notification notification={notification} onDismiss={onDismiss} />
+                    </div>
+                ))}
+            </AnimatePresence>
+        </div>
+    );
+}

package/src/components/ProductCard.tsx

@@ -2,16 +2,16 @@
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Heart, ShoppingCart } from 'lucide-react';
+import { Star, ShoppingCart, Eye } from 'lucide-react';
 import { ExtendedProductDTO, Product } from '@/lib/Apis';
 import { formatPrice } from '@/lib/utils/format';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { useCart } from '@/providers/CartProvider';
 import Image from 'next/image';
-import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 import { useBasePath } from '@/providers/BasePathProvider';
-
+import { QuickViewModal } from './QuickViewModal';
+import { useNotification } from '@/providers/NotificationProvider';
 
 interface ProductCardProps {
   product: ExtendedProductDTO;
@@ -38,7 +38,8 @@ export function ProductCard({
   const [isImageLoaded, setIsImageLoaded] = useState(false);
   const [selectedVariantImage, setSelectedVariantImage] = useState<string | null>(null);
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
-
+  const [showQuickView, setShowQuickView] = useState(false);
+  const notification = useNotification();
   // Handle image load state
   const handleImageLoad = useCallback(() => {
     setIsImageLoaded(true);
@@ -59,31 +60,49 @@ export function ProductCard({
       if (isInWishlist(product?._id || '')) {
         await removeFromWishlist(product?._id || '');
         setIsFavorite(false);
-        toast.success('Removed from wishlist');
+        notification.success(
+          'Removed from wishlist',
+          `${product.name} was removed from your wishlist.`
+        );
       } else {
         await addToWishlist(product as unknown as Product);
         setIsFavorite(true);
-        toast.success('Added to wishlist');
+        notification.success(
+          'Added to wishlist',
+          `${product.name} was added to your wishlist.`
+        );
       }
       onFavorite?.(product);
     } catch (error) {
       console.error('Error updating wishlist:', error);
-      toast.error('Failed to update wishlist');
+      notification.error(
+        'Could not update wishlist',
+        'We could not update your wishlist. Please try again.'
+      );
     }
   };
 
   // Update favorite state when props or wishlist changes
   useEffect(() => {
     setIsFavorite(isInWishlist(product?._id || '') || isFavorited);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFavorited, isInWishlist, product?._id]);
 
-  // Reset selected variant image when product changes
+  // Reset selected variant image when product changes and auto-select first variant
   useEffect(() => {
     setSelectedVariantImage(null);
     setSelectedVariantId(null);
     setIsImageLoaded(false);
-  }, [product._id]);
+
+    // Auto-select first variant if available
+    if (product.productVariants && product.productVariants.length > 0) {
+      const firstVariant = product.productVariants[0];
+      if (firstVariant.productMedia && firstVariant.productMedia.length > 0) {
+        setSelectedVariantImage(firstVariant.productMedia[0].file);
+        setSelectedVariantId(firstVariant.id || firstVariant._id || null);
+      }
+    }
+  }, [product._id, product.productVariants]);
 
   // Handle keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -138,108 +157,190 @@ export function ProductCard({
 
 
   return (
-    <motion.article
-      className=
-      "relative group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-gray-200 flex flex-col"
-
-      whileHover={{ y: -4 }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      aria-labelledby={`product-${product.id}-title`}
-      role="article"
-      tabIndex={0}
-      onClick={handleCardClick}
-      onKeyDown={handleKeyDown}
-    >
-      {/* Image Container */}
-      <div className="relative aspect-square w-full overflow-hidden bg-gray-50">
-        <AnimatePresence>
-          {!isImageLoaded && (
-            <motion.div
-              className="absolute inset-0 bg-gray-200 animate-pulse"
-              initial={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-            />
-          )}
-        </AnimatePresence>
-
-        <Image
-          src={imageSource.src}
-          alt={imageSource.alt}
-          fill
-          className={`h-full w-full object-cover object-center transition-opacity duration-300 ${product.inventoryCount === 0 ? 'opacity-60' : ''
-            } ${isImageLoaded ? 'opacity-100' : 'opacity-0'}`}
-          sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
-          priority={false}
-          onLoad={handleImageLoad}
-          onError={() => setIsImageLoaded(true)}
-          key={imageSource.src}
-        />
-
-        {/* Badges */}
-        <div className="absolute top-3 left-3 flex flex-col gap-2 z-10">
-          {product.isDiscounted && (
-            <motion.span
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              className="inline-flex items-center justify-center px-2.5 py-1 rounded-full text-xs font-bold text-white bg-green-600 shadow-md"
-            >
-              -{product.discountAmount}%
-            </motion.span>
-          )}
+    <>
+      <motion.div
+        className="bg-white rounded-[16px] overflow-hidden border-2 border-gray-100 hover:border-[#5B9BD5] hover:shadow-lg transition-all duration-300 group h-full flex flex-col"
+        whileHover={{ y: -4 }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        aria-labelledby={`product-${product.id}-title`}
+        role="article"
+        tabIndex={0}
+        onClick={handleCardClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div
+          onClick={handleCardClick}
+          className="relative aspect-square overflow-hidden bg-gray-50 cursor-pointer flex-shrink-0"
+        >
+          <Image
+            src={imageSource.src}
+            alt={imageSource.alt}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            height={300}
+            width={300}
+            priority={false}
+            onLoad={handleImageLoad}
+            onError={() => setIsImageLoaded(true)}
+            key={imageSource.src}
+          />
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowQuickView(true);
+            }}
+            className="absolute top-2 left-2 p-2 rounded-full bg-white/90 backdrop-blur-sm hover:bg-white shadow-md opacity-0 group-hover:opacity-100 transition-all"
+          >
+            <Eye className="size-4 text-[#2B4B7C]" />
+          </button>
 
           {product.inventoryCount === 0 && (
-            <motion.span
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              className="inline-flex items-center justify-center px-2.5 py-1 rounded-full text-xs font-bold text-white bg-red-600"
-            >
-              Out of Stock
-            </motion.span>
+            <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
+              <div className="bg-white rounded-full px-4 py-2">
+                <span className="font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase">
+                  Out of Stock
+                </span>
+              </div>
+            </div>
           )}
         </div>
 
-        {/* Favorite Button */}
-        {showFavoriteButton && (
-          <motion.button
-            type="button"
-            onClick={handleFavorite}
-            className="absolute top-2 right-2 p-2 rounded-full z-10 transition-colors bg-white shadow-md hover:shadow-lg text-primary-600 hover:text-red-500"
-            whileHover={{ scale: 1.1 }}
-            whileTap={{ scale: 0.95 }}
-            aria-label={isFavorite ? 'Remove from wishlist' : 'Add to wishlist'}
-          >
-            <Heart className={`w-5 h-5 ${isFavorite ? 'fill-red-500 text-red-500' : ''}`} />
-          </motion.button>
-        )}
+        <div className="p-4 flex-1 flex flex-col">
+          {/* Product Info */}
+          <div className="p-0 flex-1 flex flex-col">
+            {/* ALL Status Badges */}
+            <div className="flex items-center gap-1 mb-2 flex-wrap">
+              {product.isDiscounted && (
+                <span className="bg-[#E67E50] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+                  <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{product.discountAmount}%</span>
+                </span>
+              )}
+              {/* {product.dealOfWeek && (
+              <span className="bg-gradient-to-r from-[#E67E50] to-[#d66f45] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+                <TrendingUp className="size-2.5" />
+                <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">Deal</span>
+              </span>
+            )}
+            {product.bestseller && !product.dealOfWeek && (
+              <span className="bg-[#2B4B7C] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+                <TrendingUp className="size-2.5" />
+                <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">Best</span>
+              </span>
+            )}
+            {product.newArrival && (
+              <span className="bg-[#5B9BD5] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+                <Sparkles className="size-2.5" />
+                <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">New</span>
+              </span>
+            )} */}
+            </div>
+            <div className="mb-1">
+              <p className="font-['Poppins',sans-serif] text-xs text-[#5B9BD5] uppercase tracking-wide font-medium">
+                {product.brand}
+              </p>
+            </div>
 
-      </div>
-      <div className="absolute top-4 left-4 flex flex-col gap-2">
-        {product.inventoryCount === 0 && (
-          <span className="px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-800">
-            Out of Stock
-          </span>
-        )}
-      </div>
+            <h3 className="text-sm font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-3">
+              {displayName}
+            </h3>
+            {/* Rating */}
+            <div className="flex items-center gap-1.5 mb-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-[#E67E50] fill-[#E67E50]'
+                      : 'text-gray-300'
+                      }`}
+                  />
+                ))}
+              </div>
+              <span className="font-['Poppins',sans-serif] text-[10px] text-[#676c80]">
+                ({product.reviews?.length || 0})
+              </span>
+            </div>
 
-      <div className="p-4">
-        {/* Category */}
-        {product.parentCategories && product.parentCategories?.length > 0 && (
-          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">
-            {product.parentCategories?.map((category) => category?.name).join(', ') || 'No categories'}
-          </p>
-        )}
+            {/* Price */}
+            <div className="flex items-center gap-1.5 mb-3">
+              <span className="font-['Poppins',sans-serif] font-bold text-md text-primary-600">
+                ${product.finalPrice.toFixed(2)}
+              </span>
+              {product.isDiscounted && (
+                <span className="font-['Poppins',sans-serif] text-sm text-[#676c80] line-through">
+                  ${formatPrice(product.priceBeforeDiscount)}
+                </span>
+              )}
+            </div>
 
-        {/* Product Name and Variant */}
-        <div className="mb-2">
-          <h3 className="text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600 transition-colors">
-            {displayName}
-          </h3>
+            {/* Variant Image Swatches */}
+            {variantImages.length > 0 && (
+              <div className="flex items-center gap-1.5 mb-3">
+                {variantImages.map((variant, index) => (
+                  <button
+                    key={variant.variantId || index}
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      // Toggle: if clicking the same variant, deselect it
+                      if (selectedVariantId === variant.variantId) {
+                        setSelectedVariantImage(null);
+                        setSelectedVariantId(null);
+                      } else {
+                        setSelectedVariantImage(variant.image);
+                        setSelectedVariantId(variant.variantId || null);
+                      }
+                      setIsImageLoaded(false);
+                    }}
+                    className={`relative w-8 h-8 rounded-full overflow-hidden border-2 transition-all ${selectedVariantId === variant.variantId
+                      ? 'border-primary-500 ring-2 ring-primary-200'
+                      : 'border-gray-200 hover:border-primary-300'
+                      }`}
+                    aria-label={`Select ${variant.color || 'variant'} color`}
+                  >
+                    <Image
+                      src={variant.image}
+                      alt={variant.color || `Variant ${index + 1}`}
+                      fill
+                      className="object-cover"
+                      sizes="32px"
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={async (e) => {
+              e.stopPropagation();
+              if (!selectedVariantId && variantImages.length > 0) {
+                notification.error(
+                  'Select a variant',
+                  'Please choose a variant before adding this item to your cart.'
+                );
+                return;
+              }
+              try {
+                await addToCart(
+                  product._id || product.id,
+                  1,
+                  selectedVariantId || undefined
+                );
+              } catch (error) {
+                console.error('Failed to add to cart', error);
+              }
+            }}
+            disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId)}
+            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"
+          >
+            <ShoppingCart className="h-4 w-4" />
+            {selectedVariant?.inventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}
+          </button>
         </div>
 
-        {/* Price */}
-        <div className="flex items-baseline gap-2">
+        {/* prev Price */}
+        {/* <div className="flex items-baseline gap-2">
           <div className="flex flex-col">
             <span className="text-2xl font-bold text-gray-900">
               {formatPrice(product.finalPrice)}
@@ -255,83 +356,19 @@ export function ProductCard({
               {formatPrice(product.priceBeforeDiscount)}
             </span>
           )}
-        </div>
+        </div> */}
 
-        {/* Variant Image Swatches */}
-        {variantImages.length > 0 && (
-          <div className="flex items-center gap-2 mt-3">
-            {variantImages.map((variant, index) => (
-              <button
-                key={variant.variantId || index}
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // Toggle: if clicking the same variant, deselect it
-                  if (selectedVariantId === variant.variantId) {
-                    setSelectedVariantImage(null);
-                    setSelectedVariantId(null);
-                  } else {
-                    setSelectedVariantImage(variant.image);
-                    setSelectedVariantId(variant.variantId || null);
-                  }
-                  setIsImageLoaded(false);
-                }}
-                className={`relative w-8 h-8 rounded-full overflow-hidden border-2 transition-all ${
-                  selectedVariantId === variant.variantId
-                    ? 'border-primary-500 ring-2 ring-primary-200'
-                    : 'border-gray-200 hover:border-primary-300'
-                }`}
-                aria-label={`Select ${variant.color || 'variant'} color`}
-              >
-                <Image
-                  src={variant.image}
-                  alt={variant.color || `Variant ${index + 1}`}
-                  fill
-                  className="object-cover"
-                  sizes="32px"
-                />
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-      <div className="mt-auto p-4 pt-0">
-        <button
-          type="button"
-          onClick={async (e) => {
-            e.stopPropagation();
-            if (!selectedVariantId && variantImages.length > 0) {
-              toast.error('Please select a variant');
-              return;
-            }
-            try {
-              await addToCart(
-                product._id || product.id,
-                1,
-                selectedVariantId || undefined
-              );
-            } catch (error) {
-              console.error('Failed to add to cart', error);
-            }
-          }}
-          disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId)}
-          className="w-full flex items-center justify-center gap-2 rounded-full px-3 py-2.5 text-sm font-medium bg-primary-400 hover:bg-primary-500 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <ShoppingCart className="h-4 w-4" />
-          Add to Cart
-        </button>
 
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            router.push(buildPath(`/products/${product._id}`));
-          }}
-          className="mt-2 w-full flex items-center justify-center rounded-full border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
-        >
-          View More
-        </button>
-      </div>
-    </motion.article>
+      </motion.div>
+
+
+      {showQuickView && (
+        <QuickViewModal
+          product={product}
+          onClose={() => setShowQuickView(false)}
+          onNavigateToProduct={() => handleCardClick}
+        />
+      )}
+    </>
   );
 }