Merge pull request #264 from codeableorg/branch-Jeff4

Refactor: To add functions about as filters for stickers category

Author: Kellyarias02

src/routes/category/components/product-card/index.tsx

@@ -7,9 +7,16 @@ import { Button } from "@/components/ui";
 interface ProductCardProps {
   product: Product;
   categorySlug: string;
+  minPrice?: string;
+  maxPrice?: string;
 }
 
-export function ProductCard({ product, categorySlug }: ProductCardProps) {
+export function ProductCard({
+  product,
+  categorySlug,
+  minPrice,
+  maxPrice,
+}: ProductCardProps) {
   const navigate = useNavigate();
   const [hoveredPrice, setHoveredPrice] = useState<number | null>(null);
   let variantTitle: string | null = null;
@@ -18,8 +25,8 @@ export function ProductCard({ product, categorySlug }: ProductCardProps) {
 
   const variantMap: Record<string, string> = {
     "3*3": "3*3",
-    "5*5": "5*5", 
-    "10*10": "10*10"
+    "5*5": "5*5",
+    "10*10": "10*10",
   };
 
   if (categorySlug === "polos") {
@@ -28,7 +35,17 @@ export function ProductCard({ product, categorySlug }: ProductCardProps) {
     variantParamName = "size";
   } else if (categorySlug === "stickers") {
     variantTitle = "Elige la medida";
-    variants = ["3*3", "5*5", "10*10"]; 
+
+    const min = minPrice ? parseFloat(minPrice) : 0;
+    const max = maxPrice ? parseFloat(maxPrice) : Infinity;
+
+    if (product.stickersVariants?.length) {
+      variants = product.stickersVariants
+        .filter((variant) => variant.price >= min && variant.price <= max)
+        .map((variant) => variant.measure);
+    } else {
+      variants = ["3*3", "5*5", "10*10"];
+    }
     variantParamName = "measure";
   }
 

src/routes/category/index.tsx

@@ -31,19 +31,29 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     const filterProductsByPrice = (
       products: Product[],
       minPrice: string,
-      maxPrice: string
+      maxPrice: string,
+      categorySlug: string
     ) => {
       const min = minPrice ? parseFloat(minPrice) : 0;
       const max = maxPrice ? parseFloat(maxPrice) : Infinity;
-      return products.filter(
-        (product) => product.price >= min && product.price <= max
-      );
+      return products.filter((product) => {
+        if (
+          categorySlug === "stickers" &&
+          product.stickersVariants?.length
+        ) {
+          return product.stickersVariants.some(
+            (variant) => variant.price >= min && variant.price <= max
+          );
+        }
+        return product.price >= min && product.price <= max;
+      });
     };
 
     const filteredProducts = filterProductsByPrice(
       products,
       minPrice,
-      maxPrice
+      maxPrice,
+      categorySlug
     );
 
     return {
@@ -86,6 +96,8 @@ export default function Category({ loaderData }: Route.ComponentProps) {
                   product={product}
                   key={product.id}
                   categorySlug={category.slug}
+                  minPrice={minPrice}
+                  maxPrice={maxPrice}
                 />
               ))}
             </div>