chore: build

frontend-prep/src/components/ProductCard.css

@@ -122,6 +122,13 @@
     text-align: center;
 }
 
+.product-price-strike {
+    color: var(--text-muted);
+    text-decoration: line-through;
+    font-size: 0.75em;
+    font-weight: 500;
+}
+
 .product-stock {
     color: var(--text-muted);
     font-size: clamp(0.85rem, 2.5vw, 1rem);

frontend-prep/src/components/ProductCard.tsx

@@ -28,7 +28,13 @@ interface ProductCardProps {
     image: string;
     stock: number;
     category: string;
-    prices?: Array<{ quantity: number; price: number; active_price?: boolean }>;
+    prices?: Array<{
+        quantity: number;
+        price: number;
+        active_price?: boolean;
+        promo_price?: number | null;
+        promo_percent?: number;
+    }>;
     hasVideo?: boolean;
     videoUrl?: string; // ✨ Nouveau prop pour l'URL de la vidéo
     categoryColor?: string;
@@ -63,6 +69,11 @@ function ProductCard({
     const isOutOfStock = stock === 0;
     const isComingSoon = coming_soon === true;
     const normalizedCategory = (category || "autre").toLowerCase().trim();
+    const firstPromoPrice =
+        prices?.[0]?.promo_price != null &&
+        prices[0].promo_price < prices[0].price
+            ? prices[0].promo_price
+            : null;
 
     const handleDetailsClick = (e: React.MouseEvent) => {
         e.stopPropagation();
@@ -171,9 +182,20 @@ function ProductCard({
                 <div className="product-info">
                     <h3 className="product-name">{name}</h3>
                     <p className="product-price">
-                        {price > 0
-                            ? `${price.toFixed(2)} €`
-                            : "Prix non disponible"}
+                        {price > 0 ? (
+                            firstPromoPrice !== null ? (
+                                <>
+                                    <span className="product-price-strike">
+                                        {price.toFixed(2)} €
+                                    </span>{" "}
+                                    {firstPromoPrice.toFixed(2)} €
+                                </>
+                            ) : (
+                                `${price.toFixed(2)} €`
+                            )
+                        ) : (
+                            "Prix non disponible"
+                        )}
                     </p>
                 </div>
             </div>
@@ -224,9 +246,11 @@ function ProductCard({
                                         key={priceOption.quantity}
                                         value={priceOption.quantity}
                                     >
-                                        {priceOption.quantity}
-                                        {unit} - {priceOption.price.toFixed(2)}{" "}
-                                        €
+                                        {priceOption.promo_price != null &&
+                                        priceOption.promo_price <
+                                            priceOption.price
+                                            ? `${priceOption.quantity}${unit} - ${priceOption.promo_price.toFixed(2)} € (au lieu de ${priceOption.price.toFixed(2)} €, -${priceOption.promo_percent}%)`
+                                            : `${priceOption.quantity}${unit} - ${priceOption.price.toFixed(2)} €`}
                                     </option>
                                 ))}
                             </select>