hey-pharmacist-ecommerce 1.1.11 → 1.1.13

package/src/components/ProductCard.tsx

@@ -2,10 +2,11 @@
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Heart } from 'lucide-react';
+import { Heart, ShoppingCart } 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';
@@ -32,8 +33,11 @@ export function ProductCard({
   const { buildPath } = useBasePath();
   const [isFavorite, setIsFavorite] = useState(isFavorited);
   const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
+  const { addToCart, isLoading: isAddingToCart } = useCart();
   const [isHovered, setIsHovered] = useState(false);
   const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const [selectedVariantImage, setSelectedVariantImage] = useState<string | null>(null);
+  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
 
   // Handle image load state
   const handleImageLoad = useCallback(() => {
@@ -74,6 +78,13 @@ export function ProductCard({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFavorited, isInWishlist, product?._id]);
 
+  // Reset selected variant image when product changes
+  useEffect(() => {
+    setSelectedVariantImage(null);
+    setSelectedVariantId(null);
+    setIsImageLoaded(false);
+  }, [product._id]);
+
   // Handle keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -83,19 +94,53 @@ export function ProductCard({
   };
 
 
+  // Get variant images (first image from each variant that has images)
+  const variantImages = useMemo(() => {
+    if (!product.productVariants || product.productVariants.length === 0) {
+      return [];
+    }
+    return product.productVariants
+      .filter((variant) => variant.productMedia && variant.productMedia.length > 0)
+      .map((variant) => ({
+        variantId: variant.id || variant._id,
+        variantName: variant.name,
+        image: variant.productMedia[0].file,
+        color: variant.attribute?.color || variant.attribute?.Color || null,
+      }));
+  }, [product.productVariants]);
+
+  // Get selected variant
+  const selectedVariant = useMemo(() => {
+    if (!selectedVariantId || !product.productVariants) return null;
+    return product.productVariants.find(
+      (variant) => (variant.id || variant._id) === selectedVariantId
+    );
+  }, [selectedVariantId, product.productVariants]);
+
+  // Get display name (variant name if selected, otherwise product name)
+  const displayName = useMemo(() => {
+    return selectedVariant?.name || product.name;
+  }, [selectedVariant, product.name]);
+
   const imageSource = useMemo(() => {
+    const src = selectedVariantImage || product.productMedia?.[0]?.file || '/placeholder-product.jpg';
     return {
-      src: product.productMedia?.[0]?.file || '/placeholder-product.jpg',
+      src,
       alt: product.name || 'Product image'
     };
-  }, [product.productMedia, product.name]);
+  }, [product.productMedia, product.name, selectedVariantImage]);
+
+  // Reset image loaded state when image source changes
+  useEffect(() => {
+    setIsImageLoaded(false);
+  }, [imageSource.src]);
 
 
 
   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 h-[420px] flex-col"
+      "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)}
@@ -107,7 +152,7 @@ export function ProductCard({
       onKeyDown={handleKeyDown}
     >
       {/* Image Container */}
-      <div className="relative h-48 w-full overflow-hidden bg-gray-50">
+      <div className="relative aspect-square w-full overflow-hidden bg-gray-50">
         <AnimatePresence>
           {!isImageLoaded && (
             <motion.div
@@ -119,18 +164,18 @@ export function ProductCard({
           )}
         </AnimatePresence>
 
-        {product.productMedia?.[0]?.file && (
-          <Image
-            src={product.productMedia?.[0]?.file || '/placeholder-product.jpg'}
-            alt={product.name || 'Product image'}
-            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}
-          />
-        )}
+        <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">
@@ -160,14 +205,12 @@ export function ProductCard({
           <motion.button
             type="button"
             onClick={handleFavorite}
-            className={
-              `absolute top-2 right-2 p-2 rounded-full z-10 transition-colors bg-white/90 backdrop-blur-sm shadow-md hover:shadow-lg ${isFavorite ? 'text-red-500' : 'text-primary-600 hover:text-red-500'} ${isHovered || isFavorite ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`
-            }
+            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-current' : ''}`} />
+            <Heart className={`w-5 h-5 ${isFavorite ? 'fill-red-500 text-red-500' : ''}`} />
           </motion.button>
         )}
 
@@ -180,23 +223,10 @@ export function ProductCard({
         )}
       </div>
 
-      {/* Favorite Button */}
-      {showFavoriteButton && (
-        <button
-          type="button"
-          onClick={handleFavorite}
-          className={`absolute top-2 right-2 p-2 rounded-full transition-colors ${isFavorite ? 'text-red-500' : 'text-gray-400 hover:text-red-500'
-            }`}
-          aria-label={isFavorite ? 'Remove from wishlist' : 'Add to wishlist'}
-        >
-          <Heart className={`w-5 h-5 ${isFavorite ? 'fill-current' : ''}`} />
-        </button>
-      )}
-
       <div className="p-4">
         {/* Category */}
         {product.parentCategories && product.parentCategories?.length > 0 && (
-          <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">
             {product.parentCategories?.map((category) => category?.name).join(', ') || 'No categories'}
           </p>
         )}
@@ -204,11 +234,8 @@ export function ProductCard({
         {/* 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">
-            {product.name}
+            {displayName}
           </h3>
-          {product?.sku && (
-            <p className="text-xs text-gray-400 mt-1">SKU: {product.sku}</p>
-          )}
         </div>
 
         {/* Price */}
@@ -229,32 +256,81 @@ export function ProductCard({
             </span>
           )}
         </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={`w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium  bg-primary-600 hover:bg-primary-700 text-white`}
+          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 Product
+          View More
         </button>
-
-        {showFavoriteButton && (
-          <button
-            type="button"
-            onClick={handleFavorite}
-            className="mt-2 w-full flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-primary-600 hover:bg-gray-50"
-            aria-label={isFavorite ? 'Remove from wishlist' : 'Add to wishlist'}
-          >
-            <Heart
-              className={`mr-2 h-4 w-4 ${isFavorite ? 'fill-red-500 text-red-500' : 'text-primary-600'}`}
-            />
-            {isFavorite ? 'Saved' : 'Save for later'}
-          </button>
-        )}
       </div>
     </motion.article>
   );

package/src/hooks/useOrders.ts

@@ -37,6 +37,7 @@ export function useOrders(
         resolvedUserId
       );
       setOrders(response.data.data || []);
+      console.log(response.data);
       setPagination({
         page: response.data.page || page,
         limit: response.data.limit || limit,

package/src/lib/types/index.ts

@@ -34,6 +34,7 @@ export interface ProductFilters {
   inStock?: boolean;
   ids?: string[];
   newArrivals?: boolean;
+  brand?: string;
 }
 
 // Order Types

package/src/providers/CartProvider.tsx

@@ -57,7 +57,33 @@ export function CartProvider({ children }: CartProviderProps) {
   const addToCart = async (productId: string, quantity: number = 1, variantId?: string) => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items: [{ productVariantId: variantId || productId, quantity }] });
+      // Get current cart items
+      const currentItems = cart?.cartBody?.items || [];
+      const targetVariantId = variantId || productId;
+      
+      // Check if item already exists in cart
+      const existingItemIndex = currentItems.findIndex(
+        (item: any) => item.productVariantId === targetVariantId
+      );
+      
+      // Build the items array
+      const items = [...currentItems];
+      
+      if (existingItemIndex >= 0) {
+        // Update quantity if item exists
+        items[existingItemIndex] = {
+          ...items[existingItemIndex],
+          quantity: (items[existingItemIndex].quantity || 0) + quantity
+        };
+      } else {
+        // Add new item
+        (items as any).push({
+          productVariantId: targetVariantId,
+          quantity,
+        });
+      }
+      
+      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
       toast.success('Added to cart!');
     } catch (error: any) {
@@ -71,7 +97,21 @@ export function CartProvider({ children }: CartProviderProps) {
   const updateQuantity = async (productId: string, quantity: number) => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items: [{ productVariantId: productId, quantity }] });
+      // Get current cart items
+      const currentItems = cart?.cartBody?.items || [];
+      
+      // Build the items array with updated quantity
+      const items = currentItems.map((item: any) => {
+        if (item.productVariantId === productId) {
+          return {
+            ...item,
+            quantity
+          };
+        }
+        return item;
+      });
+      
+      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error: any) {
       toast.error(error.response?.data?.message || 'Failed to update cart');
@@ -84,7 +124,11 @@ export function CartProvider({ children }: CartProviderProps) {
   const removeFromCart = async (productId: string) => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items: [{ productVariantId: productId, quantity: 0 }] });
+      // Get current cart items and filter out the item to remove
+      const currentItems = cart?.cartBody?.items || [];
+      const items = currentItems.filter((item: any) => item.productVariantId !== productId);
+      
+      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');