Xor290/projet_gestion_commande
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: finish features comming soon

Browse Source
This commit is contained in:
Xor290
2026-05-19 20:11:54 +02:00
parent 929dea7249
commit 8df5bd66d3
4 changed files with 160 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-prep/src/pages/User/ProductDetail.tsx
+60 -16
View File
@@ -1,6 +1,10 @@
import { useParams, useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import { getProductById, getCategories, isUserAuthenticated } from "../../api/api";
import {
getProductById,
getCategories,
isUserAuthenticated,
} from "../../api/api";
import type { Product } from "../../api/api";
import { useCart } from "../../context/useCart";
import Navbar from "../../components/Navbar";
@@ -87,9 +91,19 @@ function ProductDetail() {
...response.data,
prices:
response.data.prices
?.filter((p: { quantity: number; price: number; active_price?: boolean }) => p.active_price !== false)
?.filter(
(p: {
quantity: number;
price: number;
active_price?: boolean;
}) => p.active_price !== false,
)
.map(
(p: { quantity: number; price: number; active_price?: boolean }) => ({
(p: {
quantity: number;
price: number;
active_price?: boolean;
}) => ({
quantity: parseFloat(String(p.quantity)),
price: parseFloat(String(p.price)),
active_price: p.active_price,
@@ -107,14 +121,20 @@ function ProductDetail() {
// Couleur de la catégorie depuis la DB
const matched = categories.find(
(c) => c.name.toLowerCase() === (response.data.category || "").toLowerCase(),
(c) =>
c.name.toLowerCase() ===
(response.data.category || "").toLowerCase(),
);
if (matched?.color) setCatColor(matched.color);
} else {
setError(response.message || "Produit non trouvé");
}
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "Erreur lors du chargement du produit");
setError(
err instanceof Error
? err.message
: "Erreur lors du chargement du produit",
);
} finally {
setLoading(false);
}
@@ -217,7 +237,8 @@ function ProductDetail() {
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const catTextColor = (r * 299 + g * 587 + b * 114) / 1000 > 128 ? "#000000" : "#ffffff";
const catTextColor =
(r * 299 + g * 587 + b * 114) / 1000 > 128 ? "#000000" : "#ffffff";
return (
<>
@@ -235,21 +256,38 @@ function ProductDetail() {
<div
className="product-detail-container"
style={{ "--cat-color": catColor, "--cat-color-rgb": catColorRgb, "--cat-text-color": catTextColor } as React.CSSProperties}
style={
{
"--cat-color": catColor,
"--cat-color-rgb": catColorRgb,
"--cat-text-color": catTextColor,
} as React.CSSProperties
}
>
<button onClick={() => navigate(-1)} className="back-button">
← Retour
</button>
<div className="product-detail-content">
<div className={`product-image-section ${isOutOfStock ? "out-of-stock" : ""}`}>
<div
className={`product-image-section ${isOutOfStock ? "out-of-stock" : ""}`}
>
<img
src={product.media?.find(m => m.type === "image")?.url || ""}
src={
product.media?.find((m) => m.type === "image")
?.url || ""
}
alt={product.name}
className="product-detail-image"
/>
{isOutOfStock && <div className="sold-out-badge">SOLD OUT</div>}
{isComingSoon && <div className="coming-soon-badge">À VENIR</div>}
{isOutOfStock && (
<div className="sold-out-badge">SOLD OUT</div>
)}
{isComingSoon && (
<div className="coming-soon-badge">
COMMING SOON
</div>
)}
</div>
<div className="product-info-section">
@@ -258,7 +296,8 @@ function ProductDetail() {
{selectedPrice > 0 && (
<p className="product-detail-price">
{selectedPrice.toFixed(2)} €{" "}
{selectedGrams && `pour ${selectedGrams}${product.unit || "g"}`}
{selectedGrams &&
`pour ${selectedGrams}${product.unit || "g"}`}
</p>
)}
@@ -296,7 +335,8 @@ function ProductDetail() {
key={p.quantity}
value={p.quantity}
>
{p.quantity}{product.unit || "g"} -{" "}
{p.quantity}
{product.unit || "g"} -{" "}
{p.price.toFixed(2)} €
</option>
))}
@@ -308,13 +348,17 @@ function ProductDetail() {
<button
className={`add-to-cart-button ${isOutOfStock || isComingSoon || selectedGrams === null ? "disabled" : ""}`}
onClick={handleAddToCart}
disabled={isOutOfStock || isComingSoon || selectedGrams === null}
disabled={
isOutOfStock ||
isComingSoon ||
selectedGrams === null
}
>
{isOutOfStock
? "Rupture de stock"
: isComingSoon
? "Bientôt disponible"
: "Ajouter au panier"}
? "Bientôt disponible"
: "Ajouter au panier"}
</button>
</div>
</div>