hey-pharmacist-ecommerce 1.1.27 → 1.1.29

package/src/screens/SearchResultsScreen.tsx

@@ -1,87 +1,204 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { ProductsApi } from '@/lib/Apis';
-import { ExtendedProductDTO } from '@/lib/Apis';
+import { Product } from '@/lib/Apis';
 import { ProductCard } from '@/components/ProductCard';
 import { Skeleton } from '@/components/ui/Skeleton';
 import { Input } from '@/components/ui/Input';
-import { Search, X } from 'lucide-react';
+import { Search, X, TrendingUp, Clock } from 'lucide-react';
 import Link from 'next/link';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { useRouter } from 'next/navigation';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export default function SearchPage() {
     const router = useRouter();
     const { buildPath } = useBasePath();
     const searchParams = useSearchParams();
     const searchQuery = searchParams.get('q') || '';
-    const [products, setProducts] = useState<ExtendedProductDTO[]>([]);
+    const [products, setProducts] = useState<Product[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [searchInput, setSearchInput] = useState(searchQuery);
     const [hasSearched, setHasSearched] = useState(false);
     const { isInWishlist } = useWishlist();
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+    // Load recent searches from localStorage
+    useEffect(() => {
+        const stored = localStorage.getItem('recent_searches');
+        if (stored) {
+            try {
+                setRecentSearches(JSON.parse(stored));
+            } catch (e) {
+                console.error('Failed to parse recent searches', e);
+            }
+        }
+    }, []);
+
+    // Save search query to recent searches
+    const saveRecentSearch = useCallback((query: string) => {
+        if (!query.trim()) return;
+
+        setRecentSearches((prev) => {
+            const updated = [query, ...prev.filter(s => s !== query)].slice(0, 5);
+            localStorage.setItem('recent_searches', JSON.stringify(updated));
+            return updated;
+        });
+    }, []);
+
+    // Generate suggestions based on product data
+    const generateSuggestions = useMemo(() => {
+        if (!searchInput.trim() || searchInput.length < 2) {
+            return [];
+        }
+
+        const query = searchInput.toLowerCase().trim();
+        const suggestionSet = new Set<string>();
+
+        // Extract suggestions from product names, brands, categories, and tags
+        products.forEach((product) => {
+            // Product name matches
+            if (product.name?.toLowerCase().includes(query)) {
+                suggestionSet.add(product.name);
+            }
+
+            // Brand matches
+            if (product.brand?.toLowerCase().includes(query)) {
+                suggestionSet.add(product.brand);
+            }
+
+            // Tag matches
+            product.tags?.forEach((tag) => {
+                if (tag.toLowerCase().includes(query)) {
+                    suggestionSet.add(tag);
+                }
+            });
+        });
+
+        return Array.from(suggestionSet).slice(0, 5);
+    }, [searchInput, products]);
+
+    useEffect(() => {
+        setSuggestions(generateSuggestions);
+    }, [generateSuggestions]);
+
+    // Sanitize search input to handle special characters
+    const sanitizeSearchInput = useCallback((input: string): string => {
+        // Remove leading/trailing whitespace
+        let sanitized = input.trim();
+
+        // Replace multiple spaces with single space
+        sanitized = sanitized.replace(/\s+/g, ' ');
+
+        // Escape special regex characters for safe processing
+        // but keep the original input for search API
+        return sanitized;
+    }, []);
 
     useEffect(() => {
         const fetchSearchResults = async () => {
-            if (!searchQuery.trim()) {
+            const sanitizedQuery = sanitizeSearchInput(searchQuery);
+
+            if (!sanitizedQuery) {
                 setProducts([]);
                 setIsLoading(false);
+                setHasSearched(false);
                 return;
             }
 
             try {
                 setIsLoading(true);
                 const api = new ProductsApi(AXIOS_CONFIG);
-                const response = await api.getAllProductsForStore(
-                    searchQuery,
-                    undefined, // productType
-                    undefined, // categoryId
+
+                // Search for products using getAllProducts
+                let response = await api.getAllProducts(
+                    sanitizedQuery, // searchTerm
                     undefined, // maxPrice
                     undefined, // minPrice
                     undefined, // brandFilter
-                    'in-stock', // availability
+                    undefined, // availability
                     'relevance', // sort
-                    true, // includeNoVariantProducts
+                    undefined, // subCategoryId
+                    undefined, // categoryId
                     true, // isActive
                     20, // limit
                     1 // page
                 );
 
+                console.log('Search API Response:', {
+                    query: sanitizedQuery,
+                    status: response.status,
+                    dataLength: response.data?.data?.length,
+                    totalItems: response.data?.totalItems
+                });
+
                 if (response.data?.data) {
-                    const transformedProducts = response.data.data.map((item: ExtendedProductDTO) => ({
+                    const transformedProducts = response.data.data.map((item: Product) => ({
                         ...item,
                         id: item._id || '',
                     }));
 
                     setProducts(transformedProducts);
+
+                    // Save to recent searches if results found
+                    if (transformedProducts.length > 0) {
+                        saveRecentSearch(sanitizedQuery);
+                    }
                 } else {
                     setProducts([]);
                 }
                 setHasSearched(true);
             } catch (error) {
                 console.error('Error fetching search results:', error);
+                if (error instanceof Error) {
+                    console.error('Error details:', error.message);
+                }
                 setProducts([]);
+                setHasSearched(true);
             } finally {
                 setIsLoading(false);
             }
         };
 
         fetchSearchResults();
-    }, [searchQuery]);
+    }, [searchQuery, sanitizeSearchInput, saveRecentSearch]);
 
     const handleSearch = (e: React.FormEvent) => {
         e.preventDefault();
-        if (searchInput.trim()) {
-            window.location.href = `/search?q=${encodeURIComponent(searchInput.trim())}`;
+        const sanitized = sanitizeSearchInput(searchInput);
+        if (sanitized) {
+            setShowSuggestions(false);
+            router.push(buildPath(`/search?q=${encodeURIComponent(sanitized)}`));
         }
     };
 
     const clearSearch = () => {
         setSearchInput('');
+        setShowSuggestions(false);
+    };
+
+    const handleSuggestionClick = (suggestion: string) => {
+        setSearchInput(suggestion);
+        setShowSuggestions(false);
+        router.push(buildPath(`/search?q=${encodeURIComponent(suggestion)}`));
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setSearchInput(value);
+        setShowSuggestions(value.trim().length >= 2);
+    };
+
+    const handleInputFocus = () => {
+        if (searchInput.trim().length >= 2) {
+            setShowSuggestions(true);
+        }
     };
 
     return (
@@ -93,9 +210,12 @@ export default function SearchPage() {
                         <Input
                             type="text"
                             value={searchInput}
-                            onChange={(e) => setSearchInput(e.target.value)}
+                            onChange={handleInputChange}
+                            onFocus={handleInputFocus}
+                            onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
                             placeholder="Search for products..."
                             className="pl-10 pr-10 py-6 text-base rounded-lg border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                            autoComplete="off"
                         />
                         {searchInput && (
                             <button
@@ -106,10 +226,70 @@ export default function SearchPage() {
                                 <X className="h-5 w-5" />
                             </button>
                         )}
+
+                        {/* Search Suggestions Dropdown */}
+                        <AnimatePresence>
+                            {showSuggestions && (suggestions.length > 0 || recentSearches.length > 0) && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: -10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                    transition={{ duration: 0.2 }}
+                                    className="absolute z-50 w-full mt-2 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden"
+                                >
+                                    {/* Real-time Suggestions */}
+                                    {suggestions.length > 0 && (
+                                        <div className="p-2">
+                                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
+                                                <TrendingUp className="h-3 w-3" />
+                                                Suggestions
+                                            </div>
+                                            {suggestions.map((suggestion, index) => (
+                                                <button
+                                                    key={index}
+                                                    type="button"
+                                                    onClick={() => handleSuggestionClick(suggestion)}
+                                                    className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2 group"
+                                                >
+                                                    <Search className="h-4 w-4 text-gray-400 group-hover:text-primary-500" />
+                                                    <span className="text-sm text-gray-700 group-hover:text-gray-900">
+                                                        {suggestion}
+                                                    </span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    {/* Recent Searches */}
+                                    {recentSearches.length > 0 && !searchInput.trim() && (
+                                        <div className="p-2 border-t border-gray-100">
+                                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
+                                                <Clock className="h-3 w-3" />
+                                                Recent Searches
+                                            </div>
+                                            {recentSearches.map((search, index) => (
+                                                <button
+                                                    key={index}
+                                                    type="button"
+                                                    onClick={() => handleSuggestionClick(search)}
+                                                    className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2 group"
+                                                >
+                                                    <Clock className="h-4 w-4 text-gray-400 group-hover:text-primary-500" />
+                                                    <span className="text-sm text-gray-700 group-hover:text-gray-900">
+                                                        {search}
+                                                    </span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    )}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
                     </div>
                     <button
                         type="submit"
-                        className="mt-4 w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+                        className="mt-4 w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                        disabled={!searchInput.trim()}
                     >
                         Search
                     </button>
@@ -144,21 +324,79 @@ export default function SearchPage() {
                     </div>
                 ) : hasSearched ? (
                     <div className="text-center py-12">
-                        <div className="text-gray-500 text-lg mb-4">
-                            No products found for &quot;{searchQuery}&quot;
+                        <div className="mb-6">
+                            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                <Search className="h-8 w-8 text-gray-400" />
+                            </div>
+                            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                                No products found
+                            </h3>
+                            <p className="text-gray-500 text-base mb-1">
+                                We couldn&apos;t find any products matching &quot;{searchQuery}&quot;
+                            </p>
+                            <button
+                                onClick={clearSearch}
+                                className="px-6 py-2.5 mt-4 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium border border-gray-300 bg-white cursor-pointer"
+                            >
+                                Clear Search
+                            </button>
                         </div>
-                        <p className="text-gray-500 mb-6">
-                            Try different keywords or check out our{" "}
-                            <Link href="/shop" className="text-primary-600 hover:underline ml-1 font-medium">
-                                featured products
+
+                        <div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
+
+                            <Link
+                                href={buildPath('/shop')}
+                                className="px-6 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+                            >
+                                Browse All Products
                             </Link>
-                        </p>
+                        </div>
+
+                        {recentSearches.length > 0 && (
+                            <div className="mt-8 pt-8 border-t border-gray-200">
+                                <p className="text-sm font-medium text-gray-700 mb-3">Recent Searches:</p>
+                                <div className="flex flex-wrap gap-2 justify-center">
+                                    {recentSearches.map((search, index) => (
+                                        <button
+                                            key={index}
+                                            onClick={() => handleSuggestionClick(search)}
+                                            className="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors"
+                                        >
+                                            {search}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
                     </div>
                 ) : (
                     <div className="text-center py-12">
-                        <p className="text-gray-500">
-                            Enter a search term to find products
+                        <div className="w-16 h-16 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <Search className="h-8 w-8 text-primary-500" />
+                        </div>
+                        <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                            Start Searching
+                        </h3>
+                        <p className="text-gray-500 mb-6">
+                            Enter a search term above to find products
                         </p>
+                        {recentSearches.length > 0 && (
+                            <div className="max-w-md mx-auto">
+                                <p className="text-sm font-medium text-gray-700 mb-3">Recent Searches:</p>
+                                <div className="flex flex-wrap gap-2 justify-center">
+                                    {recentSearches.map((search, index) => (
+                                        <button
+                                            key={index}
+                                            onClick={() => handleSuggestionClick(search)}
+                                            className="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors flex items-center gap-2"
+                                        >
+                                            <Clock className="h-3 w-3" />
+                                            {search}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
                     </div>
                 )}
             </div>

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>