hey-pharmacist-ecommerce 1.1.28 → 1.1.30

package/src/screens/ShopScreen.tsx

@@ -6,11 +6,10 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import {
   ArrowUpDown,
   ChevronDown,
-  ChevronUp,
   Clock,
   LayoutGrid,
   LayoutList,
@@ -74,12 +73,12 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
   const { products, isLoading, pagination } = useProducts(filters, page, 20);
   const { categories, isLoading: isLoadingCategories } = useCategories();
-
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
-    if (searchQuery.trim()) {
+    const sanitized = searchQuery.trim().replace(/\s+/g, ' ');
+    if (sanitized) {
       setIsSearching(true);
-      router.push(buildPath(`/search?q=${encodeURIComponent(searchQuery.trim())}`));
+      router.push(buildPath(`/search?q=${encodeURIComponent(sanitized)}`));
     }
   };
 
@@ -90,10 +89,13 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
   // Handle search when pressing Enter
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && searchQuery.trim()) {
+    if (e.key === 'Enter') {
       e.preventDefault();
-      setIsSearching(true);
-      router.push(buildPath(`/search?q=${encodeURIComponent(searchQuery.trim())}`));
+      const sanitized = searchQuery.trim().replace(/\s+/g, ' ');
+      if (sanitized) {
+        setIsSearching(true);
+        router.push(buildPath(`/search?q=${encodeURIComponent(sanitized)}`));
+      }
     }
   };
 
@@ -120,9 +122,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     if (filters.category) updates[filters.category] = true;
     if (filters.subCategory) {
       const parent = categories.find((c) =>
-        c.categorySubCategories?.some((sc) => sc.id === filters.subCategory)
+        c.categorySubCategories?.some((sc) => (sc._id ?? sc.id) === filters.subCategory)
       );
-      if (parent?.id) updates[parent.id] = true;
+      const parentId = parent?._id ?? parent?.id;
+      if (parentId) updates[parentId] = true;
     }
     if (Object.keys(updates).length) {
       setExpandedCategories((prev) => ({ ...prev, ...updates }));
@@ -156,7 +159,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     let inStockCount = 0;
 
     products.forEach((product) => {
-      if (product.inventoryCount > 0) inStockCount += 1;
+      if (product.summary?.totalInventory > 0) inStockCount += 1;
       if (new Date(product.createdAt).getTime() >= monthAgo) newArrivals += 1;
     });
 
@@ -213,7 +216,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     if (isLoading) return products;
     let items = [...products];
     if (filters.tags?.length) {
-      items = items.filter((p) => Array.isArray(p.tags) && p.tags.some((t) => filters.tags!.includes(t)));
+      items = items.filter((p) => Array.isArray(p.tags) && p.tags.some((t: string) => filters.tags!.includes(t)));
     }
     if (filters.newArrivals) {
       const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
@@ -234,9 +237,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
     switch (sortOption) {
       case 'price-low-high':
-        return items.sort((a, b) => a.finalPrice - b.finalPrice);
+        return items.sort((a, b) => (a.variants?.[0]?.finalPrice ?? 0) - (b.variants?.[0]?.finalPrice ?? 0));
       case 'price-high-low':
-        return items.sort((a, b) => b.finalPrice - a.finalPrice);
+        return items.sort((a, b) => (b.variants?.[0]?.finalPrice ?? 0) - (a.variants?.[0]?.finalPrice ?? 0));
       case 'newest':
         return items.sort(
           (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
@@ -262,7 +265,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
   const quickSearches = useMemo(() => {
     const counts = new Map<string, number>();
     products.forEach((p) => {
-      (p.tags || []).forEach((t) => counts.set(t, (counts.get(t) || 0) + 1));
+      (p.tags || []).forEach((t: string) => counts.set(t, (counts.get(t) || 0) + 1));
     });
     return Array.from(counts.entries())
       .sort((a, b) => b[1] - a[1])
@@ -539,7 +542,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       let subName: string | undefined;
       let parentName: string | undefined;
       categories.forEach((cat) => {
-        const found = cat.categorySubCategories?.find((sc) => sc.id === subCategoryFilter);
+        const found = cat.categorySubCategories?.find((sc) => (sc._id ?? sc.id) === subCategoryFilter);
         if (found) {
           subName = found.name;
           parentName = cat.name;
@@ -551,7 +554,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
         onRemove: handleRemoveSubCategory,
       });
       if (categoryFilter) {
-        const catObj = categories.find((c) => c.id === categoryFilter);
+        const catObj = categories.find((c) => (c._id ?? c.id) === categoryFilter);
         chips.push({
           key: 'category',
           label: `Category: ${catObj?.name ?? parentName ?? categoryFilter}`,
@@ -559,7 +562,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
         });
       }
     } else if (categoryFilter) {
-      const category = categories.find((cat) => cat.id === categoryFilter);
+      const category = categories.find((cat) => (cat._id ?? cat.id) === categoryFilter);
       chips.push({
         key: 'category',
         label: `Category: ${category?.name ?? categoryFilter}`,
@@ -697,15 +700,16 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
               {expandedFilterSections.category && (
                 <div className="space-y-2">
                   {sortedCategories.map((category) => {
-                    const isCategoryActive = categoryFilter === category.id;
-                    const isExpanded = !!expandedCategories[category.id as string];
+                    const categoryId = category._id ?? category.id ?? '';
+                    const isCategoryActive = categoryFilter === categoryId;
+                    const isExpanded = !!expandedCategories[categoryId];
                     const Icon = getCategoryIconForFilter(category.name ?? '');
                     return (
                       <button
-                        key={category.id}
+                        key={categoryId}
                         onClick={() => {
-                          if (!isExpanded) toggleCategoryExpand(category.id ?? '');
-                          handleCategoryChange(category.id ?? '');
+                          if (!isExpanded) toggleCategoryExpand(categoryId);
+                          handleCategoryChange(categoryId);
                         }}
                         className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
                           ? 'bg-primary text-white shadow-lg'
@@ -955,15 +959,16 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
             {displayCategories.map((category, index) => {
               const Icon = getCategoryIcon(category.name ?? '');
-              const isSelected = categoryFilter === category.id;
+              const categoryId = category._id ?? category.id ?? '';
+              const isSelected = categoryFilter === categoryId;
 
               return (
                 <motion.button
-                  key={category.id}
+                  key={categoryId}
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: index * 0.1 }}
-                  onClick={() => handleCategoryChange(category.id ?? '')}
+                  onClick={() => handleCategoryChange(categoryId)}
                   className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
                     : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
                     }`}
@@ -1106,14 +1111,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     ) : (
                       <div className="space-y-4">
                         {displayedProducts.map((product) => {
-                          const discount =
-                            product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice
-                              ? Math.round(
-                                ((product.priceBeforeDiscount - product.finalPrice) /
-                                  product.priceBeforeDiscount) *
-                                100
-                              )
-                              : 0;
+                          const firstVariant = product.variants?.[0];
+                          const displayFinalPrice = firstVariant?.finalPrice ?? 0;
+                          const displayRetailPrice = firstVariant?.retailPrice ?? 0;
+                          const displayIsDiscounted = firstVariant?.isDiscounted ?? false;
+                          const displayInventoryCount = firstVariant?.inventoryCount ?? 0;
 
                           return (
                             <motion.div
@@ -1124,7 +1126,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                             >
                               <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
                                 <Image
-                                  src={product.productMedia[0]?.file || '/placeholder-product.jpg'}
+                                  src={product.media?.[0]?.file || '/placeholder-product.jpg'}
                                   alt={product.name}
                                   fill
                                   className="object-cover transition duration-500 group-hover:scale-105"
@@ -1133,12 +1135,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
                               <div className="flex-1 space-y-3">
                                 <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-primary-600">
-                                  {product.parentCategories.length > 0 && (
-                                    <span className="rounded-full bg-primary-50 px-3 py-1 text-primary-700">
-                                      {product.parentCategories.map((category) => category?.name).join(', ')}
-                                    </span>
-                                  )}
-                                  {product.tags?.slice(0, 3).map((tag) => (
+                                  {product.tags?.slice(0, 3).map((tag: string) => (
                                     <span
                                       key={tag}
                                       className="rounded-full bg-slate-100 px-3 py-1 text-gray-600"
@@ -1153,7 +1150,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                 <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                                   <span className="inline-flex items-center gap-2 font-medium text-primary-600">
                                     <ShieldCheck className="h-4 w-4" />
-                                    {product.inventoryCount > 0 ? 'In stock & ready to ship' : 'Restocking soon'}
+                                    {displayInventoryCount > 0 ? 'In stock & ready to ship' : 'Restocking soon'}
                                   </span>
                                   <span className="inline-flex items-center gap-2">
                                     <Clock className="h-4 w-4 text-primary-500" />
@@ -1165,11 +1162,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                               <div className="flex w-full flex-col items-end gap-3 md:w-auto">
                                 <div className="text-right">
                                   <p className="text-3xl font-semibold text-gray-900">
-                                    {formatPrice(product.finalPrice)}
+                                    {formatPrice(displayFinalPrice)}
                                   </p>
-                                  {product.isDiscounted && (
+                                  {displayIsDiscounted && (
                                     <p className="text-sm text-gray-400 line-through">
-                                      {formatPrice(product.priceBeforeDiscount)}
+                                      {formatPrice(displayRetailPrice)}
                                     </p>
                                   )}
                                 </div>

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>