From 33ad3dd20b1e5a5c0e3124e15918f86263acb18c Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Fri, 12 Sep 2025 10:36:50 +0200
Subject: [PATCH] feat(ui): add product detail view button to Extras and
 Product selectors

Enhance the ExtrasSelector and ProductSelector components by introducing a button that links to detailed product views. The button features a ZoomInIcon and is styled for a consistent user experience. This addition improves navigation and accessibility for users seeking more information on products.
---
 src/components/configurator/ExtrasSelector.js | 16 ++++++++
 .../configurator/ProductSelector.js           | 17 ++++++++
 src/pages/GrowTentKonfigurator.js             | 40 +++++++++++++++++++
 3 files changed, 73 insertions(+)

diff --git a/src/components/configurator/ExtrasSelector.js b/src/components/configurator/ExtrasSelector.js
index e460e2f..f8986b1 100644
--- a/src/components/configurator/ExtrasSelector.js
+++ b/src/components/configurator/ExtrasSelector.js
@@ -3,7 +3,11 @@ import Grid from '@mui/material/Grid';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import CircularProgress from '@mui/material/CircularProgress';
+import { Link } from 'react-router-dom';
+import IconButton from '@mui/material/IconButton';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 
 class ExtrasSelector extends Component {
   formatPrice(price) {
@@ -149,6 +153,18 @@ class ExtrasSelector extends Component {
               ✓ Ausgewählt
             </Typography>
           )}
+          <Stack direction="row" spacing={1} justifyContent="center">
+            <IconButton
+              component={Link}
+              to={`/Artikel/${extra.seoName}`}
+              size="small"
+              aria-label="Produktdetails anzeigen"
+              sx={{ mr: 1, color: 'text.secondary' }}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <ZoomInIcon />
+            </IconButton>
+          </Stack>
         </Box>
       </Box>
     );
diff --git a/src/components/configurator/ProductSelector.js b/src/components/configurator/ProductSelector.js
index d1b0d2e..d8ee98f 100644
--- a/src/components/configurator/ProductSelector.js
+++ b/src/components/configurator/ProductSelector.js
@@ -6,6 +6,10 @@ import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import { Link } from 'react-router-dom';
+import IconButton from '@mui/material/IconButton';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 
 class ProductSelector extends Component {
   formatPrice(price) {
@@ -65,6 +69,19 @@ class ProductSelector extends Component {
                 ✓ Ausgewählt
               </Typography>
             )}
+
+            <Stack direction="row" spacing={1} justifyContent="center">
+              <IconButton
+                component={Link}
+                to={`/Artikel/${product.seoName}`}
+                size="small"
+                aria-label="Produktdetails anzeigen"
+                sx={{ mr: 1, color: 'text.secondary' }}
+                onClick={(event) => event.stopPropagation()}
+              >
+                <ZoomInIcon />
+              </IconButton>
+            </Stack>
           </Box>
         </CardContent>
       </Card>
diff --git a/src/pages/GrowTentKonfigurator.js b/src/pages/GrowTentKonfigurator.js
index e1ec35e..7b34b13 100644
--- a/src/pages/GrowTentKonfigurator.js
+++ b/src/pages/GrowTentKonfigurator.js
@@ -13,10 +13,14 @@ import {
   Grid,
   CardMedia,
   CircularProgress,
+  Stack,
 } from '@mui/material';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { TentShapeSelector, ExtrasSelector } from '../components/configurator/index.js';
 import { tentShapes } from '../data/configuratorData.js';
+import { Link } from 'react-router-dom';
+import IconButton from '@mui/material/IconButton';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 
 function setCachedCategoryData(categoryId, data) {
   if (!window.productCache) {
@@ -800,6 +804,18 @@ class GrowTentKonfigurator extends Component {
                       ✓ Ausgewählt
                     </Typography>
                   )}
+                  <Stack direction="row" spacing={1} justifyContent="center">
+                    <IconButton
+                      component={Link}
+                      to={`/Artikel/${product.seoName}`}
+                      size="small"
+                      aria-label="Produktdetails anzeigen"
+                      sx={{ mr: 1, color: 'text.secondary' }}
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Stack>
                 </Box>
               </Box>
             </Grid>
@@ -927,6 +943,18 @@ class GrowTentKonfigurator extends Component {
                       ✓ Ausgewählt
                     </Typography>
                   )}
+                  <Stack direction="row" spacing={1} justifyContent="center">
+                    <IconButton
+                      component={Link}
+                      to={`/Artikel/${lamp.seoName}`}
+                      size="small"
+                      aria-label="Produktdetails anzeigen"
+                      sx={{ mr: 1, color: 'text.secondary' }}
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Stack>
                 </Box>
               </Box>
             </Grid>
@@ -1092,6 +1120,18 @@ class GrowTentKonfigurator extends Component {
                       ✓ Ausgewählt
                     </Typography>
                   )}
+                  <Stack direction="row" spacing={1} justifyContent="center">
+                    <IconButton
+                      component={Link}
+                      to={`/Artikel/${ventilation.seoName}`}
+                      size="small"
+                      aria-label="Produktdetails anzeigen"
+                      sx={{ mr: 1, color: 'text.secondary' }}
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Stack>
                 </Box>
               </Box>
             </Grid>