From c82cd5ea78f192d1a03490040d43ff4ed08218f9 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Fri, 3 Oct 2025 14:13:18 +0200
Subject: [PATCH] Fix SearchBar React warnings and improve price display

- Fix duplicate key warning by using seoName-index combination
- Fix deprecated button prop warning by using component='button'
- Add proper button styling (remove default browser styles)
- Fix translation namespace access (use dot notation for nested keys)
- Improve price formatting and prominence in search suggestions
- Align VAT info and delivery time at same height level
---
 src/components/header/SearchBar.js | 43 +++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/header/SearchBar.js b/src/components/header/SearchBar.js
index 213dd91..e4c99bf 100644
--- a/src/components/header/SearchBar.js
+++ b/src/components/header/SearchBar.js
@@ -17,7 +17,7 @@ const SearchBar = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
-  const { t } = useTranslation(['product', 'delivery']);
+  const { t } = useTranslation();
 
   // State management
   const [searchQuery, setSearchQuery] = React.useState(
@@ -182,9 +182,9 @@ const SearchBar = () => {
   // Get delivery days based on availability
   const getDeliveryDays = (product) => {
     if (product.available === 1) {
-      return t('delivery:times.standard2to3Days');
+      return t('delivery.times.standard2to3Days');
     } else if (product.incoming === 1 || product.availableSupplier === 1) {
-      return t('delivery:times.supplier7to9Days');
+      return t('delivery.times.supplier7to9Days');
     }
   };
 
@@ -297,12 +297,19 @@ const SearchBar = () => {
           <List disablePadding>
             {suggestions.map((suggestion, index) => (
               <ListItem
-                key={suggestion.seoName || index}
-                button
+                key={`${suggestion.seoName || 'suggestion'}-${index}`}
+                component="button"
                 selected={index === selectedIndex}
                 onClick={() => handleSuggestionClick(suggestion)}
                 sx={{
                   cursor: "pointer",
+                  border: "none",
+                  background: "none",
+                  padding: 0,
+                  margin: 0,
+                  width: "100%",
+                  textAlign: "left",
+                  px: 2, // Add horizontal padding back
                   "&:hover": {
                     backgroundColor: "action.hover",
                   },
@@ -317,14 +324,24 @@ const SearchBar = () => {
               >
                 <ListItemText
                   primary={
-                    <Typography variant="body2" noWrap>
-                      {suggestion.name}
-                    </Typography>
-                  }
-                  secondary={
-                    <Typography variant="caption" color="text.secondary">
-                      {suggestion.price?.toFixed(2)}€ ({t('product:inclVat', { vat: suggestion.vat })}) · {getDeliveryDays(suggestion)}
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
+                      <Box sx={{ flexGrow: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+                        <Typography variant="body2" noWrap sx={{ mb: 0.5 }}>
+                          {suggestion.name}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
+                          {getDeliveryDays(suggestion)}
+                        </Typography>
+                      </Box>
+                      <Box sx={{ textAlign: 'right', flexShrink: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+                        <Typography variant="body1" color="primary" sx={{ fontWeight: 'bold', mb: 0.5 }}>
+                          {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(suggestion.price)}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.65rem' }}>
+                          {t('product.inclVat', { vat: suggestion.vat })}
+                        </Typography>
+                      </Box>
+                    </Box>
                   }
                 />
               </ListItem>