Merge pull request #274 from codeableorg/grupo-3-mike-5

feat: update variant attribute values and improve product pricing logic

Author: mykeVera

.react-router/types/+register.ts

@@ -29,4 +29,5 @@ type Params = {
   "/account/orders": {};
   "/not-found": {};
   "/verify-email": {};
+  "/chat": {};
 };

prisma/initial_data.ts

@@ -424,7 +424,7 @@ export const variantAttributeValues = [
 
   { attributeId: 2, productId: 17, value: "3x3 cm", price: 2.99 },
   { attributeId: 2, productId: 17, value: "5x5 cm", price: 3.99 },
-  { attributeId: 2, productId: 17, value: "10x10 cm", price: 4.99 },
+  { attributeId: 2, productId: 17, value: "10x10 cm", price: .99 },
 
   // --- TAZAS (no aplica: Único) ---
   { attributeId: 3, productId: 18, value: "Único", price: 14.99 },

src/models/cart.model.ts

@@ -3,13 +3,15 @@ import { type Product } from "./product.model";
 import type {
   Cart as PrismaCart,
   CartItem as PrismaCartItem,
+  VariantAttributeValue
 } from "@/../generated/prisma/client";
 
 export type CartItem = PrismaCartItem & {
   product: Pick<
     Product,
     "id" | "title" | "imgSrc" | "alt" | "price" | "isOnSale"
   >;
+  variantAttributeValue?: VariantAttributeValue;
 };
 
 export type Cart = PrismaCart;
@@ -34,6 +36,7 @@ export type CartItemWithProduct = {
   product: CartProductInfo;
   quantity: number;
   attributeValueId: number;
+  variantAttributeValue?: VariantAttributeValue;
 };
 
 // Tipo para el carrito con items y productos incluidos

src/models/variant-attribute.model.ts

@@ -1,2 +1,5 @@
-import type { VariantAttributeValue as PrismaVariantAttributeValue } from "@/../generated/prisma/client";
-export type VariantAttributeValue= PrismaVariantAttributeValue
+import type { VariantAttributeValue as PrismaVariantAttributeValue, VariantAttribute } from "@/../generated/prisma/client";
+
+export type VariantAttributeValue = PrismaVariantAttributeValue & {
+  variantAttribute?: VariantAttribute;
+};

src/routes/cart/add-item/index.tsx

@@ -13,8 +13,6 @@ export async function action({ request }: Route.ActionArgs) {
   const session = await getSession(request.headers.get("Cookie"));
   const sessionCartId = session.get("sessionCartId");
   const userId = session.get("userId");
-
   await addToCart(userId, sessionCartId, attributeValueId, quantity);
-
   return redirect(redirectTo || "/cart");
 }

src/routes/category/components/price-filter/index.tsx

@@ -1,11 +1,11 @@
-import { Form } from "react-router";
+import { useSubmit } from "react-router";
 
 import { Button, Input } from "@/components/ui";
 import { cn } from "@/lib/utils";
 
 interface PriceFilterProps {
-  minPrice: string;
-  maxPrice: string;
+  minPrice?: number;
+  maxPrice?: number;
   className?: string;
 }
 
@@ -14,15 +14,24 @@ export function PriceFilter({
   maxPrice,
   className,
 }: PriceFilterProps) {
+  const submit = useSubmit()
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const minPrice = formData.get("minPrice")
+    const maxPrice = formData.get("maxPrice")
+    if (!minPrice && !maxPrice) return
+    if (maxPrice && minPrice && maxPrice < minPrice) return
+    submit(formData, { method: 'get', action: window.location.pathname })
+  }
   return (
-    <Form className={cn("flex flex-col gap-6", className)}>
+    <form onSubmit={handleSubmit} className={cn("flex flex-col gap-6", className)}>
       <fieldset>
         <legend className="text-base font-medium mb-4">Precio</legend>
         <div className="flex gap-6">
           <div className="flex flex-col gap-2">
             <label className="text-sm font-medium">Min</label>
             <Input
-              type="number"
               name="minPrice"
               defaultValue={minPrice}
               min="0"
@@ -31,7 +40,6 @@ export function PriceFilter({
           <div className="flex flex-col gap-2">
             <label className="text-sm font-medium">Max</label>
             <Input
-              type="number"
               name="maxPrice"
               defaultValue={maxPrice}
               min="0"
@@ -42,6 +50,6 @@ export function PriceFilter({
       <Button type="submit" size="xl" variant="secondary" className="w-full">
         Filtrar Productos
       </Button>
-    </Form>
+    </form>
   );
 }

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

@@ -31,25 +31,23 @@ export function ProductCard({ product }: ProductCardProps) {
         <div className="flex grow flex-col gap-2 p-4">
           <h2 className="text-sm font-medium">{product.title}</h2>
           <p className="text-sm text-muted-foreground">{product.description}</p>
-            {product.categoryId === 3 ? (
-          <div className="text-xs text-muted-foreground">
-            <p className="text-base font-semibold text-accent-foreground">
-              Desde
-            </p>
-            <p className="font-medium text-foreground text-base">
-              S/{product.minPrice} - S/{product.maxPrice}
-            </p>
-          </div>
+          {isSticker ? (
+            <div className="text-xs text-muted-foreground">
+              <p className="text-base font-semibold text-accent-foreground">
+                Entre
+              </p>
+              <p className="font-medium text-foreground text-base">
+                S/{product.minPrice} - S/{product.maxPrice}
+              </p>
+            </div>
           ) : (
-          <div className="text-xs text-muted-foreground">
-            <p className="text-base font-semibold text-accent-foreground">
-              Precio
-            </p>
-            <p className="font-medium text-foreground text-base">
-              S/{product.price}
-            </p>
-          </div>
-        )}
+            <div className="text-xs text-muted-foreground">
+              <p className="text-base font-semibold text-accent-foreground">
+                Precio
+              </p>
+              <p className="mt-auto text-base font-medium">S/{product.price}</p>
+            </div>
+          )}
         </div>
         {product.isOnSale && (
           <span className="absolute top-0 right-0 rounded-bl-xl bg-primary px-2 py-1 text-sm font-medium text-primary-foreground">

src/routes/category/index.tsx

@@ -2,9 +2,8 @@ import { redirect } from "react-router";
 
 import { Container } from "@/components/ui";
 import { isValidCategorySlug, type Category } from "@/models/category.model";
-import type { Product } from "@/models/product.model";
 import { getCategoryBySlug } from "@/services/category.service";
-import { getProductsByCategorySlug } from "@/services/product.service";
+import { filterByMinMaxPrice } from "@/services/product.service";
 
 import { PriceFilter } from "./components/price-filter";
 import { ProductCard } from "./components/product-card";
@@ -19,54 +18,25 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   }
 
   const url = new URL(request.url);
-  const minPrice = url.searchParams.get("minPrice") || "";
-  const maxPrice = url.searchParams.get("maxPrice") || "";
+  const minPrice = url.searchParams.get("minPrice");
+  const minValue = minPrice ? parseFloat(minPrice) : undefined;
+  const maxPrice = url.searchParams.get("maxPrice");
+  const maxValue = maxPrice ? parseFloat(maxPrice) : undefined;
+
 
   try {
-    const [category, products] = await Promise.all([
+    const [category] = await Promise.all([
       getCategoryBySlug(categorySlug),
-      getProductsByCategorySlug(categorySlug),
     ]);
-
-    const filterProductsByPrice = (
-      products: Product[],
-      minPrice: string,
-      maxPrice: string
-    ) => {
-      const min = minPrice ? parseFloat(minPrice) : 0;
-      const max = maxPrice ? parseFloat(maxPrice) : Infinity;
-      return products.filter(
-        (product) => {
-          const minProductPrice = product.minPrice||0
-          const maxProductPrice = product.maxPrice ||0
-          const productPrice = product.price || 0
-
-          if (min && max) {
-            return ((productPrice||minProductPrice) >= min) && ((productPrice||maxProductPrice) <= max)
-          }
-
-          if (min) {
-            return (productPrice||minProductPrice) >= min 
-          }
-
-          if (max) {
-            return (productPrice||maxProductPrice) <= max 
-          }
-          return true
-    });
-    };
-
-    const filteredProducts = filterProductsByPrice(
-      products,
-      minPrice,
-      maxPrice
-    );
+    console.log({categorySlug, minValue, maxValue})
+    const finalProducts = await filterByMinMaxPrice(categorySlug, minValue, maxValue);
 
     return {
       category,
-      products: filteredProducts,
-      minPrice,
-      maxPrice,
+      products: finalProducts,
+      minPrice: minValue,
+      maxPrice: maxValue,
+      finalProducts
     };
   } catch (e) {
     throw new Response("Error loading category: " + e, { status: 500 });