chore: finish features comming soon

frontend-prep/src/components/ProductCard.tsx

@@ -7,7 +7,13 @@ import "./ProductCard.css";
 
 function getTextColor(hex: string): string {
     const h = hex.replace("#", "");
-    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const full =
+        h.length === 3
+            ? h
+                  .split("")
+                  .map((c) => c + c)
+                  .join("")
+            : h;
     const r = parseInt(full.slice(0, 2), 16);
     const g = parseInt(full.slice(2, 4), 16);
     const b = parseInt(full.slice(4, 6), 16);
@@ -160,7 +166,7 @@ function ProductCard({
                         <div className="sold-out-overlay">SOLD OUT</div>
                     )}
                     {isComingSoon && (
-                        <div className="coming-soon-overlay">À VENIR</div>
+                        <div className="coming-soon-overlay">COMMING SOON</div>
                     )}
                 </div>
 
@@ -188,15 +194,18 @@ function ProductCard({
                             disabled={isOutOfStock || isComingSoon}
                             style={
                                 categoryColor && !isOutOfStock && !isComingSoon
-                                    ? { background: categoryColor, color: getTextColor(categoryColor) }
+                                    ? {
+                                          background: categoryColor,
+                                          color: getTextColor(categoryColor),
+                                      }
                                     : undefined
                             }
                         >
                             {isOutOfStock
                                 ? "Rupture de stock"
                                 : isComingSoon
-                                ? "Bientôt disponible"
-                                : "Ajouter rapidement"}
+                                  ? "Bientôt disponible"
+                                  : "Ajouter rapidement"}
                         </button>
 
                         {showQuantitySelect && prices && prices.length > 0 && (
@@ -217,8 +226,9 @@ function ProductCard({
                                         key={priceOption.quantity}
                                         value={priceOption.quantity}
                                     >
-                                        {priceOption.quantity}{unit} -{" "}
-                                        {priceOption.price.toFixed(2)} €
+                                        {priceOption.quantity}
+                                        {unit} - {priceOption.price.toFixed(2)}{" "}
+                                        €
                                     </option>
                                 ))}
                             </select>
@@ -228,32 +238,34 @@ function ProductCard({
             </div>
 
             {/* ✨ Modal vidéo — rendu via Portal pour éviter le clipping du transform:scale sur .product-card */}
-            {showVideo && videoUrl && createPortal(
-                <div className="video-modal" onClick={handleCloseVideo}>
-                    <div
-                        className="video-modal-content"
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        <button
-                            className="video-close-btn"
-                            onClick={handleCloseVideo}
-                            aria-label="Fermer la vidéo"
+            {showVideo &&
+                videoUrl &&
+                createPortal(
+                    <div className="video-modal" onClick={handleCloseVideo}>
+                        <div
+                            className="video-modal-content"
+                            onClick={(e) => e.stopPropagation()}
                         >
-                            <X size={18} />
-                        </button>
-                        <video
-                            src={videoUrl}
-                            controls
-                            autoPlay
-                            className="video-player"
-                        >
-                            Votre navigateur ne supporte pas la lecture de
-                            vidéos.
-                        </video>
-                    </div>
-                </div>,
-                document.body
-            )}
+                            <button
+                                className="video-close-btn"
+                                onClick={handleCloseVideo}
+                                aria-label="Fermer la vidéo"
+                            >
+                                <X size={18} />
+                            </button>
+                            <video
+                                src={videoUrl}
+                                controls
+                                autoPlay
+                                className="video-player"
+                            >
+                                Votre navigateur ne supporte pas la lecture de
+                                vidéos.
+                            </video>
+                        </div>
+                    </div>,
+                    document.body,
+                )}
         </div>
     );
 }