chore: fix ui

frontend-prep/src/pages/User/Checkout.tsx

@@ -1,8 +1,9 @@
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCart } from '../../context/useCart';
-import { createCheckout, clearCart, extractUsernameFromToken, isUserAuthenticated, getReferralBalance, getPublicSettings, getMyProfile, getCryptoPaymentStatus } from '../../api/api';
+import { createCheckout, clearCart, extractUsernameFromToken, isUserAuthenticated, getReferralBalance, getPublicSettings, getMyProfile, getCryptoPaymentStatus, getProductById, getMediaUrl } from '../../api/api';
 import type { CheckoutData, CryptoPaymentStatus } from '../../api/api';
+import type { Product } from '../../api/api';
 import Navbar from '../../components/Navbar';
 import './Checkout.css';
 
@@ -55,6 +56,25 @@ function Checkout() {
 
   const total = cartTotal;
 
+  // Images enrichies
+  const [itemImages, setItemImages] = useState<Record<number, string>>({});
+
+  useEffect(() => {
+    if (cartItems.length === 0) return;
+    cartItems.forEach(async (item) => {
+      try {
+        const res = await getProductById(item.product_id);
+        if (res.success && res.data) {
+          const p: Product = res.data;
+          const img = p.media?.find((m: any) => m && m.type === 'image');
+          if (img?.url) {
+            setItemImages((prev) => ({ ...prev, [item.id]: getMediaUrl(img.url) }));
+          }
+        }
+      } catch { /* ignore */ }
+    });
+  }, [cartItems]);
+
   // Parrainage
   const [referralBalance, setReferralBalance] = useState(0);
   const [referralEnabled, setReferralEnabled] = useState(false);
@@ -378,7 +398,13 @@ function Checkout() {
             <div className="summary-items">
               {cartItems.map((item, index) => (
                 <div key={`${item.id}-${index}`} className="summary-item">
-                  <img src={item.image} alt={item.name_product || 'Produit'} className="summary-item-image" />
+                  {itemImages[item.id] ? (
+                    <img src={itemImages[item.id]} alt={item.name_product || 'Produit'} className="summary-item-image" />
+                  ) : (
+                    <div className="summary-item-image summary-item-image--placeholder">
+                      <i className="fas fa-leaf" />
+                    </div>
+                  )}
                   <div className="summary-item-info">
                     <p className="summary-item-name">{item.name_product}</p>
                     <p className="summary-item-details">