From 59d6a55ecee680f76739f370fc77d2d32735ef43 Mon Sep 17 00:00:00 2001
From: Kellyarias02 <kellyarias@gmail.com>
Date: Thu, 28 Aug 2025 19:34:56 -0500
Subject: [PATCH] Fix: Display the dynamic prices on the sticker category

---
 .../components/price-filter/index.tsx         |  3 +-
 .../components/product-card/index.tsx         | 36 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/routes/category/components/price-filter/index.tsx b/src/routes/category/components/price-filter/index.tsx
index 5337413..17f47d4 100644
--- a/src/routes/category/components/price-filter/index.tsx
+++ b/src/routes/category/components/price-filter/index.tsx
@@ -1,7 +1,8 @@
 import { Form } from "react-router";
 
-import { Button, Input } from "@/components/ui";
+import { Button, Container, Input } from "@/components/ui";
 import { cn } from "@/lib/utils";
+import { useState } from "react";
 
 interface PriceFilterProps {
   minPrice: string;
diff --git a/src/routes/category/components/product-card/index.tsx b/src/routes/category/components/product-card/index.tsx
index 9d48246..6a1eafa 100644
--- a/src/routes/category/components/product-card/index.tsx
+++ b/src/routes/category/components/product-card/index.tsx
@@ -29,6 +29,37 @@ export function ProductCard({
     "10*10": "10*10",
   };
 
+  // Obtener el precio base para stickers para la variante 3*3
+  const getBasePrice = () => {
+    if (categorySlug === "stickers" && product.stickersVariants?.length) {
+      const baseVariant = product.stickersVariants.find(
+        (variant) => variant.measure === "3*3"
+      );
+      return baseVariant ? baseVariant.price : product.price;
+    }
+    return product.price;
+  };
+
+  // Obtener rango de precios para las variantes filtradas
+  const getPriceRange = () => {
+    if (categorySlug === "stickers" && product.stickersVariants?.length && variants.length > 0) {
+      const filteredVariants = product.stickersVariants.filter(variant => 
+        variants.includes(variant.measure)
+      );
+      
+      if (filteredVariants.length > 0) {
+        const minPrice = Math.min(...filteredVariants.map(v => v.price));
+        const maxPrice = Math.max(...filteredVariants.map(v => v.price));
+        
+        if (minPrice === maxPrice) {
+          return `S/${minPrice}`;
+        }
+        return `S/${minPrice} - S/${maxPrice}`;
+      }
+    }
+    return null;
+  };
+
   if (categorySlug === "polos") {
     variantTitle = "Elige la talla";
     variants = ["Small", "Medium", "Large"];
@@ -49,6 +80,9 @@ export function ProductCard({
     variantParamName = "measure";
   }
 
+  const basePrice = getBasePrice();
+  const priceRange = getPriceRange();
+
   const handleVariantClick = (
     e: React.MouseEvent<HTMLButtonElement>,
     variant: string
@@ -115,7 +149,7 @@ export function ProductCard({
           <h2 className="text-sm font-medium">{product.title}</h2>
           <p className="text-sm text-muted-foreground">{product.description}</p>
           <p className="mt-auto text-base font-medium">
-            S/{hoveredPrice !== null ? hoveredPrice : product.price}
+            {hoveredPrice !== null ? `S/${hoveredPrice}` : (priceRange ? priceRange : `S/${basePrice}`)}
           </p>
         </div>
         {product.isOnSale && (