hey-pharmacist-ecommerce 1.1.28 → 1.1.29

package/src/screens/WishlistScreen.tsx

@@ -12,6 +12,7 @@ import {
     ShoppingBag,
     Sparkles,
     Trash2,
+    Trash
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { ProductCard } from '@/components/ProductCard';
@@ -21,7 +22,7 @@ import { useAuth } from '@/providers/AuthProvider';
 import { useWishlistProducts } from '@/hooks/useWishlistProducts';
 import Image from 'next/image';
 import { formatPrice } from '@/lib/utils/format';
-import { ExtendedProductDTO } from '@/lib/Apis';
+import { Product } from '@/lib/Apis';
 import { useBasePath } from '@/providers/BasePathProvider';
 import { useNotification } from '@/providers/NotificationProvider';
 
@@ -95,23 +96,26 @@ export default function WishlistScreen() {
     };
 
     const totalValue = useMemo(
-        () => wishlistProducts.reduce((sum, product) => sum + (product.finalPrice ?? 0), 0),
+        () => wishlistProducts.reduce((sum, product) => sum + (product.summary?.minPrice ?? 0), 0),
         [wishlistProducts]
     );
 
     const totalSavings = useMemo(
         () =>
             wishlistProducts.reduce((sum, product) => {
-                const before = product.priceBeforeDiscount ?? product.finalPrice ?? 0;
-                const after = product.finalPrice ?? 0;
-                const savings = Math.max(before - after, 0);
-                return sum + savings;
+                // Calculate savings if product has discount
+                if (product.summary?.hasDiscount) {
+                    const maxPrice = product.summary?.maxPrice ?? 0;
+                    const minPrice = product.summary?.minPrice ?? 0;
+                    return sum + (maxPrice - minPrice);
+                }
+                return sum;
             }, 0),
         [wishlistProducts]
     );
 
     const inStockCount = useMemo(
-        () => wishlistProducts.filter((product) => (product.inventoryCount ?? 0) > 0).length,
+        () => wishlistProducts.filter((product) => (product.summary?.totalInventory ?? 0) > 0).length,
         [wishlistProducts]
     );
 
@@ -119,25 +123,25 @@ export default function WishlistScreen() {
         let list = [...wishlistProducts];
 
         if (onlyInStock) {
-            list = list.filter((product) => (product.inventoryCount ?? 0) > 0);
+            list = list.filter((product) => (product.summary?.totalInventory ?? 0) > 0);
         }
 
         switch (sortOption) {
             case 'price-low':
-                list.sort((a, b) => (a.finalPrice ?? 0) - (b.finalPrice ?? 0));
+                list.sort((a, b) => (a.summary?.minPrice ?? 0) - (b.summary?.minPrice ?? 0));
                 break;
             case 'price-high':
-                list.sort((a, b) => (b.finalPrice ?? 0) - (a.finalPrice ?? 0));
+                list.sort((a, b) => (b.summary?.maxPrice ?? 0) - (a.summary?.maxPrice ?? 0));
                 break;
             case 'name':
                 list.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
                 break;
             case 'availability':
-                list.sort((a, b) => (b.inventoryCount ?? 0) - (a.inventoryCount ?? 0));
+                list.sort((a, b) => (b.summary?.totalInventory ?? 0) - (a.summary?.totalInventory ?? 0));
                 break;
             case 'featured':
             default:
-                list.sort((a, b) => (b.totalSold ?? 0) - (a.totalSold ?? 0));
+                list.sort((a, b) => (b.summary?.totalSold ?? 0) - (a.summary?.totalSold ?? 0));
                 break;
         }
 
@@ -318,9 +322,9 @@ export default function WishlistScreen() {
                                                             transition={{ duration: 0.2 }}
                                                         >
                                                             <ProductCard
-                                                                product={product as ExtendedProductDTO}
-                                                                onClickProduct={(p) => router.push(buildPath(`/products/${p.id}`))}
-                                                                onFavorite={() => handleRemoveFromWishlist(product.id)}
+                                                                product={product as Product}
+                                                                onClickProduct={(p) => router.push(buildPath(`/products/${p._id}`))}
+                                                                onFavorite={() => handleRemoveFromWishlist(product._id || product.id || '')}
                                                                 isFavorited
                                                             />
                                                         </motion.div>
@@ -343,7 +347,7 @@ export default function WishlistScreen() {
                                                             <div className="relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40">
                                                                 <Image
                                                                     fill
-                                                                    src={product.productMedia?.[0]?.file || '/placeholder-product.jpg'}
+                                                                    src={product.media?.[0]?.file || '/placeholder-product.jpg'}
                                                                     alt={product.name || 'Wishlist item'}
                                                                     className="h-full w-full object-cover"
                                                                 />
@@ -355,47 +359,47 @@ export default function WishlistScreen() {
                                                                             {product.name}
                                                                         </h3>
                                                                         <p className="text-sm text-muted">
-                                                                            {product.parentCategories?.map((category) => category?.name).join(', ') || 'General wellness'}
+                                                                            General wellness
                                                                         </p>
                                                                     </div>
                                                                     <div className="text-right">
                                                                         <p className="text-lg font-bold text-primary">
-                                                                            {formatPrice(product.finalPrice ?? 0)}
+                                                                            {formatPrice(product.summary?.minPrice ?? 0)}
                                                                         </p>
-                                                                        {product.isDiscounted && (
+                                                                        {product.summary?.hasDiscount && (
                                                                             <p className="text-xs text-emerald-500">
-                                                                                You save {formatPrice(Math.max((product.priceBeforeDiscount ?? 0) - (product.finalPrice ?? 0), 0))}
+                                                                                You save {formatPrice(Math.max((product.summary?.maxPrice ?? 0) - (product.summary?.minPrice ?? 0), 0))}
                                                                             </p>
                                                                         )}
                                                                     </div>
                                                                 </div>
                                                                 <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
-                                                                    <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-medium ${product.inventoryCount > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>
+                                                                    <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-medium ${(product.summary?.totalInventory ?? 0) > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>
                                                                         <Package className="h-3.5 w-3.5" />
-                                                                        {product.inventoryCount > 0 ? 'In stock' : 'Backordered'}
+                                                                        {(product.summary?.totalInventory ?? 0) > 0 ? 'In stock' : 'Backordered'}
                                                                     </span>
-                                                                    {product.totalSold > 0 && (
+                                                                    {(product.summary?.totalSold ?? 0) > 0 && (
                                                                         <span className="inline-flex items-center gap-1 rounded-full bg-slate-200 px-2.5 py-1 font-medium text-slate-700">
                                                                             <Sparkles className="h-3.5 w-3.5" />
-                                                                            {product.totalSold}+ purchased
+                                                                            {product.summary?.totalSold}+ purchased
                                                                         </span>
                                                                     )}
                                                                 </div>
                                                                 <div className="flex flex-wrap gap-2">
                                                                     <Button
                                                                         size="sm"
-                                                                        onClick={() => router.push(buildPath(`/products/${product.id}`))}
+                                                                        onClick={() => router.push(buildPath(`/products/${product._id}`))}
+                                                                        className='bg-primary/90 text-white hover:bg-primary/70'
                                                                     >
                                                                         View details
                                                                     </Button>
-                                                                    <Button
-                                                                        size="sm"
-                                                                        variant="outline-solid"
-                                                                        onClick={() => handleRemoveFromWishlist(product.id)}
-                                                                        className="text-secondary"
+                                                                    <button
+                                                                        onClick={() => handleRemoveFromWishlist(product._id || product.id || '')}
+                                                                        className='text-red-500 hover:text-red-600 hover:bg-red-50 transition-colors cursor-pointer border border-red-500 rounded-full px-4 py-1 text-sm flex-row'
                                                                     >
+                                                                        {/* <Trash className="h-4 w-4" /> */}
                                                                         Remove
-                                                                    </Button>
+                                                                    </button>
                                                                 </div>
                                                             </div>
                                                         </motion.div>