feat: introduce ProductImage component to streamline image handling in PrerenderProduct and ProductDetailPage

src/components/ProductDetailPage.js

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import parse from "html-react-parser";
 import AddToCartButton from "./AddToCartButton.js";
 import Images from "./Images.js";
+import ProductImage from "./ProductImage.js";
 import { withI18n } from "../i18n/withTranslation.js";
 import ArticleQuestionForm from "./ArticleQuestionForm.js";
 import ArticleRatingForm from "./ArticleRatingForm.js";
@@ -669,38 +670,15 @@ class ProductDetailPage extends Component {
             boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
           }}
         >
-          <Box
-            sx={{
-              width: { xs: "100%", sm: "555px" },
-              maxWidth: "100%",
-              minHeight: "400px",
-              background: "#f8f8f8",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            {!product.pictureList && (
-              <CardMedia
-                component="img"
-                height="400"
-                image="/assets/images/nopicture.jpg"
-                alt={product.name}
-                sx={{ objectFit: "cover" }}
-              />
-            )}
-            {product.pictureList && (
-              <Images
-                socket={this.props.socket}
-                socketB={this.props.socketB}
-                pictureList={product.pictureList}
-                fullscreenOpen={this.state.imageDialogOpen}
-                onOpenFullscreen={this.handleOpenDialog}
-                onCloseFullscreen={this.handleCloseDialog}
-              />
-            )}
-          </Box>
+          <ProductImage
+            product={product}
+            socket={this.props.socket}
+            socketB={this.props.socketB}
+            fullscreenOpen={this.state.imageDialogOpen}
+            onOpenFullscreen={this.handleOpenDialog}
+            onCloseFullscreen={this.handleCloseDialog}
+            isPrerender={false}
+          />
 
           {/* Product Details */}
           <Box