hey-pharmacist-ecommerce 1.0.5 → 1.0.7

package/src/components/ProductCard.tsx

@@ -1,122 +1,259 @@
 'use client';
 
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { ShoppingCart, Heart } from 'lucide-react';
-import { Product } from '@/lib/types';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Heart } from 'lucide-react';
+import { ExtendedProductDTO, Product } from '@/lib/Apis';
 import { formatPrice } from '@/lib/utils/format';
-import { useCart } from '@/providers/CartProvider';
+import { useWishlist } from '@/providers/WishlistProvider';
 import Image from 'next/image';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+
 
 interface ProductCardProps {
-  product: Product;
-  onClickProduct?: (product: Product) => void;
+  product: ExtendedProductDTO;
+  onClickProduct?: (product: ExtendedProductDTO) => void;
+  onFavorite?: (product: ExtendedProductDTO) => void;
+  isFavorited?: boolean;
+  showFavoriteButton?: boolean;
 }
 
-export function ProductCard({ product, onClickProduct }: ProductCardProps) {
-  const { addToCart } = useCart();
-  const [isAdding, setIsAdding] = useState(false);
-  const [isFavorited, setIsFavorited] = useState(false);
+export function ProductCard({
+  product,
+  onClickProduct,
+  onFavorite,
+  isFavorited = false,
+  showFavoriteButton = true,
+  className
+}: ProductCardProps & { className?: string }) {
+  const router = useRouter();
+  const [isFavorite, setIsFavorite] = useState(isFavorited);
+  const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+  // Handle image load state
+  const handleImageLoad = useCallback(() => {
+    setIsImageLoaded(true);
+  }, []);
+
+  // Handle card click
+  const handleCardClick = useCallback((e: React.MouseEvent) => {
+    if (onClickProduct) {
+      e.preventDefault();
+      onClickProduct(product);
+    }
+  }, [onClickProduct, product]);
+
 
-  const handleAddToCart = async (e: React.MouseEvent) => {
+  const handleFavorite = async (e: React.MouseEvent) => {
     e.stopPropagation();
-    setIsAdding(true);
     try {
-      await addToCart(product.id);
-    } finally {
-      setIsAdding(false);
+      if (isInWishlist(product?._id || '')) {
+        await removeFromWishlist(product?._id || '');
+        setIsFavorite(false);
+        toast.success('Removed from wishlist');
+      } else {
+        await addToWishlist(product as unknown as Product);
+        setIsFavorite(true);
+        toast.success('Added to wishlist');
+      }
+      onFavorite?.(product);
+    } catch (error) {
+      console.error('Error updating wishlist:', error);
+      toast.error('Failed to update wishlist');
     }
   };
 
-  const handleFavorite = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsFavorited(!isFavorited);
+  // Update favorite state when props or wishlist changes
+  useEffect(() => {
+    setIsFavorite(isInWishlist(product?._id || '') || isFavorited);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFavorited, isInWishlist, product?._id]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleCardClick(e as any);
+    }
   };
 
-  const discount = product.compareAtPrice 
-    ? Math.round(((product.compareAtPrice - product.price) / product.compareAtPrice) * 100)
-    : 0;
+
+  const imageSource = useMemo(() => {
+    return {
+      src: product.productMedia?.[0]?.file || '/placeholder-product.jpg',
+      alt: product.name || 'Product image'
+    };
+  }, [product.productMedia, product.name]);
+
+
 
   return (
-    <motion.div
-      whileHover={{ y: -8 }}
-      className="group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 cursor-pointer"
-      onClick={() => onClickProduct?.(product)}
+    <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"
+
+      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 overflow-hidden bg-gray-100">
-        <Image
-          src={product.images[0] || '/placeholder-product.jpg'}
-          alt={product.name}
-          fill
-          className="object-cover group-hover:scale-110 transition-transform duration-500"
-        />
-        
+      <div className="relative h-48 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>
+
+        {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}
+          />
+        )}
+
         {/* Badges */}
-        <div className="absolute top-4 left-4 flex flex-col gap-2">
-          {discount > 0 && (
-            <span className="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
-              -{discount}%
-            </span>
+        <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>
           )}
-          {!product.inStock && (
-            <span className="bg-gray-900 text-white px-3 py-1 rounded-full text-sm font-bold">
+
+          {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
-            </span>
+            </motion.span>
           )}
         </div>
 
         {/* Favorite Button */}
-        <button
-          onClick={handleFavorite}
-          className="absolute top-4 right-4 p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-110"
-        >
-          <Heart
-            className={`w-5 h-5 ${isFavorited ? 'fill-red-500 text-red-500' : 'text-gray-700'}`}
-          />
-        </button>
-
-        {/* Quick Add Button - Shows on hover */}
-        {product.inStock && (
+        {showFavoriteButton && (
           <motion.button
-            onClick={handleAddToCart}
-            disabled={isAdding}
-            className="absolute bottom-4 left-4 right-4 bg-primary-600 text-white py-3 rounded-xl font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-primary-700 flex items-center justify-center gap-2 shadow-lg"
+            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'}`
+            }
+            whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.95 }}
+            aria-label={isFavorite ? 'Remove from wishlist' : 'Add to wishlist'}
           >
-            <ShoppingCart className="w-5 h-5" />
-            {isAdding ? 'Adding...' : 'Quick Add'}
+            <Heart className={`w-5 h-5 ${isFavorite ? 'fill-current' : ''}`} />
           </motion.button>
         )}
+
+      </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>
 
-      {/* Content */}
+      {/* 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.category && (
+        {product.parentCategories && product.parentCategories?.length > 0 && (
           <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">
-            {product.category}
+            {product.parentCategories?.map((category) => category?.name).join(', ') || 'No categories'}
           </p>
         )}
 
-        {/* Product Name */}
-        <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">
-          {product.name}
-        </h3>
+        {/* 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}
+          </h3>
+          {product?.sku && (
+            <p className="text-xs text-gray-400 mt-1">SKU: {product.sku}</p>
+          )}
+        </div>
 
         {/* Price */}
         <div className="flex items-baseline gap-2">
-          <span className="text-2xl font-bold text-gray-900">
-            {formatPrice(product.price)}
-          </span>
-          {product.compareAtPrice && (
+          <div className="flex flex-col">
+            <span className="text-2xl font-bold text-gray-900">
+              {formatPrice(product.finalPrice)}
+            </span>
+            {product.inventoryCount > 0 && (
+              <span className="text-xs text-gray-500">
+                {product.inventoryCount > 0 ? "In Stock" : "Out of Stock"}
+              </span>
+            )}
+          </div>
+          {product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice && (
             <span className="text-sm text-gray-500 line-through">
-              {formatPrice(product.compareAtPrice)}
+              {formatPrice(product.priceBeforeDiscount)}
             </span>
           )}
         </div>
       </div>
-    </motion.div>
+      <div className="mt-auto p-4 pt-0">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            router.push(`/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`}
+        >
+          View Product
+        </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/components/ui/Button.tsx

@@ -1,5 +1,11 @@
+'use client';
+
 import React from 'react';
-import { motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
+
+const MotionDiv = dynamic(() => import('framer-motion').then((mod) => mod.motion.div), {
+  ssr: false,
+});
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
@@ -17,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';
+  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 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',
@@ -33,7 +39,7 @@ export function Button({
   };
 
   return (
-    <motion.div
+    <MotionDiv
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
       className="inline-block"
@@ -41,11 +47,13 @@ export function Button({
       <button
         className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
         disabled={disabled || isLoading}
+        aria-disabled={disabled || isLoading}
+        aria-busy={isLoading}
         {...props}
       >
         {isLoading ? (
           <>
-            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <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>
@@ -55,7 +63,7 @@ export function Button({
           children
         )}
       </button>
-    </motion.div>
+    </MotionDiv>
   );
 }
 

package/src/components/ui/Card.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+// Base card component
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function Card({ className = '', ...props }: CardProps) {
+  return (
+    <div
+      className={`rounded-lg border bg-white shadow-sm ${className}`}
+      {...props}
+    />
+  );
+}
+
+// Card Header component
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardHeader({ className = '', ...props }: CardHeaderProps) {
+  return (
+    <div
+      className={`flex flex-col space-y-1.5 p-6 ${className}`}
+      {...props}
+    />
+  );
+}
+
+// Card Title component
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export function CardTitle({ className = '', ...props }: CardTitleProps) {
+  return (
+    <h3
+      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+      {...props}
+    />
+  );
+}
+
+// Card Content component
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardContent({ className = '', ...props }: CardContentProps) {
+  return <div className={`p-6 pt-0 ${className}`} {...props} />;
+}

package/src/hooks/useAddresses.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Address, AddressesApi, CreateAddressDto, UpdateAddressDto } from '@/lib/Apis';
+import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
+
+interface UseAddressesReturn {
+  addresses: Address[];
+  defaultAddress: Address | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+  addAddress: (payload: CreateAddressDto) => Promise<Address>;
+  updateAddress: (id: string, payload: UpdateAddressDto) => Promise<Address>;
+  removeAddress: (id: string) => Promise<void>;
+  markAsDefault: (id: string) => Promise<Address>;
+}
+
+export function useAddresses(): UseAddressesReturn {
+  const [addresses, setAddresses] = useState<Address[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    const response = await new AddressesApi(AXIOS_CONFIG).getMyAddresses();
+    setAddresses(response.data || []);
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const sortedAddresses = useMemo(() => {
+    return [...addresses].sort((a, b) => {
+      if (a.isDefault === b.isDefault) {
+        return (b.updatedAt.toISOString() || '').localeCompare(a.updatedAt.toISOString() || '');
+      }
+      return a.isDefault ? -1 : 1;
+    });
+  }, [addresses]);
+
+  const defaultAddress = useMemo(
+    () => sortedAddresses.find((address) => address.isDefault) || null,
+    [sortedAddresses]
+  );
+
+  const addAddress = useCallback(async (payload: CreateAddressDto) => {
+    const response = await new AddressesApi(AXIOS_CONFIG).createAddressForUser(payload);
+    setAddresses((prev) => [...prev, response.data]);
+    return response.data;
+  }, []);
+
+  const updateAddress = useCallback(async (id: string, payload: UpdateAddressDto) => {
+    const response = await new AddressesApi(AXIOS_CONFIG).updateUserAddress(payload, id);
+    setAddresses((prev) => prev.map((address) => address.id === id ? response.data : address));
+    return response.data;
+  }, []);
+
+  const removeAddress = useCallback(async (id: string) => {
+    await new AddressesApi(AXIOS_CONFIG).deleteUserAddress(id);
+    setAddresses((prev) => prev.filter((address) => address.id !== id));
+    return
+  }, []);
+
+  const markAsDefault = useCallback(async (id: string) => {
+    const response = await new AddressesApi(AXIOS_CONFIG).updateDefaultAddress(id);
+    setAddresses((prev) => prev.map((address) => address.id === id ? response.data : address));
+    return response.data;
+  }, []);
+
+  return {
+    addresses: sortedAddresses,
+    defaultAddress,
+    isLoading,
+    error,
+    refresh,
+    addAddress,
+    updateAddress,
+    removeAddress,
+    markAsDefault,
+  };
+}

package/src/hooks/useOrders.ts

@@ -1,9 +1,16 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Order } from '@/lib/types';
-import { ordersApi } from '@/lib/api/orders';
+import { OrdersApi } from '@/lib/Apis';
+import { getApiConfiguration } from '@/lib/api-adapter';
+import { PopulatedOrder } from '@/lib/Apis/models';
+import { useAuth } from '@/providers/AuthProvider';
 
-export function useOrders(page: number = 1, limit: number = 10) {
-  const [orders, setOrders] = useState<Order[]>([]);
+export function useOrders(
+  page: number = 1,
+  limit: number = 10,
+  orderStatus?: string,
+  paymentStatus?: string
+) {
+  const [orders, setOrders] = useState<PopulatedOrder[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [pagination, setPagination] = useState({
@@ -12,20 +19,36 @@ export function useOrders(page: number = 1, limit: number = 10) {
     total: 0,
     totalPages: 0,
   });
+  const { user } = useAuth();
+  const resolvedUserId = (user as any)?._id || (user as any)?.id;
 
   const fetchOrders = useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await ordersApi.getOrders(page, limit);
-      setOrders(response.data);
-      setPagination(response.pagination);
+      const response = await new OrdersApi(getApiConfiguration()).getAllOrders(
+        paymentStatus && paymentStatus !== 'All' ? paymentStatus : undefined,
+        orderStatus && orderStatus !== 'All' ? orderStatus : undefined,
+        page,
+        limit,
+        undefined,
+        undefined,
+        undefined,
+        resolvedUserId
+      );
+      setOrders(response.data.data || []);
+      setPagination({
+        page: response.data.page || page,
+        limit: response.data.limit || limit,
+        total: response.data.total ?? 0,
+        totalPages: response.data.totalPages || 1,
+      });
     } catch (err) {
       setError(err as Error);
     } finally {
       setIsLoading(false);
     }
-  }, [page, limit]);
+  }, [page, limit, resolvedUserId, orderStatus, paymentStatus]);
 
   useEffect(() => {
     fetchOrders();
@@ -41,7 +64,7 @@ export function useOrders(page: number = 1, limit: number = 10) {
 }
 
 export function useOrder(id: string) {
-  const [order, setOrder] = useState<Order | null>(null);
+  const [order, setOrder] = useState<PopulatedOrder | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
@@ -49,10 +72,8 @@ export function useOrder(id: string) {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await ordersApi.getOrder(id);
-      if (response.success) {
-        setOrder(response.data);
-      }
+      const response = await new OrdersApi(getApiConfiguration()).getSingleOrder(id);
+      setOrder(response.data);
     } catch (err) {
       setError(err as Error);
     } finally {
@@ -70,7 +91,7 @@ export function useOrder(id: string) {
 }
 
 export function useCurrentOrders() {
-  const [orders, setOrders] = useState<Order[]>([]);
+  const [orders, setOrders] = useState<PopulatedOrder[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
@@ -78,10 +99,8 @@ export function useCurrentOrders() {
     setIsLoading(true);
     setError(null);
     try {
-      const response = await ordersApi.getCurrentOrders();
-      if (response.success) {
-        setOrders(response.data);
-      }
+      const response = await new OrdersApi(getApiConfiguration()).getUserOrders();
+      setOrders(response.data || []);
     } catch (err) {
       setError(err as Error);
     } finally {
@@ -95,4 +114,3 @@ export function useCurrentOrders() {
 
   return { orders, isLoading, error, refetch: fetchCurrentOrders };
 }
-