feat: update ExtrasSelector and GrowTentKonfigurator for VAT display and extras handling

- Refactored ExtrasSelector to include VAT information for each extra, enhancing clarity for users.
- Removed unused extras data from configuratorData.js to streamline the codebase.
- Updated GrowTentKonfigurator to dynamically retrieve extras from cached data, ensuring accurate pricing and VAT display for selected items.
- Improved UI layout for price and VAT information across various components for better user experience.

src/components/configurator/ExtrasSelector.js

@@ -67,9 +67,16 @@ class ExtrasSelector extends Component {
               sx={{ margin: 0 }}
               onClick={(e) => e.stopPropagation()}
             />
-            <Typography variant="h6" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
-              {this.formatPrice(extra.price)}
-            </Typography>
+            <Box sx={{ textAlign: 'right' }}>
+              <Typography variant="h6" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+                {this.formatPrice(extra.price)}
+              </Typography>
+              {extra.vat && (
+                <Typography variant="caption" sx={{ color: '#77aa77', fontSize: '0.6em' }}>
+                  (incl. {extra.vat}% MwSt.,*)
+                </Typography>
+              )}
+            </Box>
           </Box>
           
           <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>

src/data/configuratorData.js

@@ -41,54 +41,3 @@ export const tentShapes = [
     visualDepth: 60
   }
 ];
-
-export const extras = [
-  {
-    id: 'ph_tester',
-    name: 'pH-Messgerät',
-    description: 'Digitales pH-Meter',
-    price: 29.99,
-    image: '/assets/images/nopicture.jpg',
-    category: 'Messung'
-  },
-  {
-    id: 'nutrients_starter',
-    name: 'Dünger Starter-Set',
-    description: 'Komplettes Nährstoff-Set',
-    price: 39.99,
-    image: '/assets/images/nopicture.jpg',
-    category: 'Nährstoffe'
-  },
-  {
-    id: 'grow_pots',
-    name: 'Grow-Töpfe Set (5x)',
-    description: '5x Stofftöpfe 11L',
-    price: 24.99,
-    image: '/assets/images/nopicture.jpg',
-    category: 'Töpfe'
-  },
-  {
-    id: 'timer_socket',
-    name: 'Zeitschaltuhr',
-    description: 'Digitale Zeitschaltuhr',
-    price: 19.99,
-    image: '/assets/images/nopicture.jpg',
-    category: 'Steuerung'
-  },
-  {
-    id: 'thermometer',
-    name: 'Thermo-Hygrometer',
-    description: 'Min/Max Temperatur & Luftfeuchtigkeit',
-    price: 14.99,
-    image: '/assets/images/nopicture.jpg',
-    category: 'Messung'
-  },
-  {
-    id: 'pruning_shears',
-    name: 'Gartenschere',
-    description: 'Präzisions-Gartenschere',
-    price: 16.99,
-    image: '/assets/images/nopicture.jpg',
-    category: 'Werkzeug'
-  }
-]; 

src/pages/GrowTentKonfigurator.js

@@ -16,7 +16,7 @@ import {
 } from '@mui/material';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { TentShapeSelector, ExtrasSelector } from '../components/configurator/index.js';
-import { tentShapes, extras } from '../data/configuratorData.js';
+import { tentShapes } from '../data/configuratorData.js';
 
 function setCachedCategoryData(categoryId, data) {
   if (!window.productCache) {
@@ -497,6 +497,7 @@ class GrowTentKonfigurator extends Component {
       }
     }
     
+    const extras = getCachedCategoryData('Extras');
     // Add extras prices
     selectedExtras.forEach(extraId => {
       const extra = extras.find(e => e.id === extraId);
@@ -570,6 +571,7 @@ class GrowTentKonfigurator extends Component {
       }
     }
     
+    const extras = getCachedCategoryData('Extras');
     selectedExtras.forEach(extraId => {
       const extra = extras.find(e => e.id === extraId);
       if (extra) {
@@ -1034,7 +1036,7 @@ class GrowTentKonfigurator extends Component {
 
   renderExtrasSection() {
     const { selectedExtras } = this.state;
-    
+    const extras = getCachedCategoryData('Extras');
     return (
       <ExtrasSelector
         extras={extras}
@@ -1062,6 +1064,7 @@ class GrowTentKonfigurator extends Component {
     const selectedLight = availableLamps.find(l => l.id === selectedLightType);
     const availableVentilation = this.state.selectedTentShape ? this.getVentilationForTentShape(this.state.selectedTentShape) : [];
     const selectedVentilation = availableVentilation.find(v => v.id === selectedVentilationType && v.isDeliverable);
+    const extras = getCachedCategoryData('Extras');
     const selectedExtrasItems = extras.filter(e => selectedExtras.includes(e.id));
     const savingsInfo = this.calculateSavings();
     
@@ -1086,11 +1089,15 @@ class GrowTentKonfigurator extends Component {
               <ListItem>
                 <ListItemText
                   primary={`Growbox: ${selectedTent.name}`}
-                  secondary={selectedTent.description}
                 />
                 <ListItemSecondaryAction>
-                  <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                    {this.formatPrice(selectedTent.price)}
+                  <Typography variant="h6" sx={{ fontWeight: 'bold', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                    <span>{this.formatPrice(selectedTent.price)}</span>
+                    {selectedTent.vat && (
+                      <small style={{ color: '#77aa77', fontSize: '0.6em' }}>
+                        (incl. {selectedTent.vat}% MwSt.,*)
+                      </small>
+                    )}
                   </Typography>
                 </ListItemSecondaryAction>
               </ListItem>
@@ -1100,11 +1107,15 @@ class GrowTentKonfigurator extends Component {
               <ListItem>
                 <ListItemText
                   primary={`Beleuchtung: ${selectedLight.name}`}
-                  secondary={selectedLight.description}
                 />
                 <ListItemSecondaryAction>
-                  <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                    {this.formatPrice(selectedLight.price)}
+                  <Typography variant="h6" sx={{ fontWeight: 'bold', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                    <span>{this.formatPrice(selectedLight.price)}</span>
+                    {selectedLight.vat && (
+                      <small style={{ color: '#77aa77', fontSize: '0.6em' }}>
+                        (incl. {selectedLight.vat}% MwSt.,*)
+                      </small>
+                    )}
                   </Typography>
                 </ListItemSecondaryAction>
               </ListItem>
@@ -1114,11 +1125,15 @@ class GrowTentKonfigurator extends Component {
               <ListItem>
                 <ListItemText
                   primary={`Belüftung: ${selectedVentilation.name}`}
-                  secondary={selectedVentilation.description}
                 />
                 <ListItemSecondaryAction>
-                  <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                    {this.formatPrice(selectedVentilation.price)}
+                  <Typography variant="h6" sx={{ fontWeight: 'bold', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                    <span>{this.formatPrice(selectedVentilation.price)}</span>
+                    {selectedVentilation.vat && (
+                      <small style={{ color: '#77aa77', fontSize: '0.6em' }}>
+                        (incl. {selectedVentilation.vat}% MwSt.,*)
+                      </small>
+                    )}
                   </Typography>
                 </ListItemSecondaryAction>
               </ListItem>
@@ -1128,11 +1143,15 @@ class GrowTentKonfigurator extends Component {
               <ListItem key={extra.id}>
                 <ListItemText
                   primary={`Extra: ${extra.name}`}
-                  secondary={extra.description}
                 />
                 <ListItemSecondaryAction>
-                  <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                    {this.formatPrice(extra.price)}
+                  <Typography variant="h6" sx={{ fontWeight: 'bold', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                    <span>{this.formatPrice(extra.price)}</span>
+                    {extra.vat && (
+                      <small style={{ color: '#77aa77', fontSize: '0.6em' }}>
+                        (incl. {extra.vat}% MwSt.,*)
+                      </small>
+                    )}
                   </Typography>
                 </ListItemSecondaryAction>
               </ListItem>
@@ -1146,6 +1165,9 @@ class GrowTentKonfigurator extends Component {
               <Typography variant="h6" sx={{ color: '#d32f2f', fontWeight: 'bold' }}>
                 Sie sparen: {this.formatPrice(savingsInfo.savings)} ({savingsInfo.discountPercentage}% Bundle-Rabatt)
               </Typography>
+              <Typography variant="caption" sx={{ color: '#77aa77' }}>
+                (incl. 19% MwSt.,*)
+              </Typography>
             </Box>
           )}
           
@@ -1153,9 +1175,14 @@ class GrowTentKonfigurator extends Component {
             <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
               Gesamtpreis:
             </Typography>
-            <Typography variant="h5" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
-              {this.formatPrice(totalPrice)}
-            </Typography>
+            <Box sx={{ textAlign: 'right' }}>
+              <Typography variant="h5" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+                {this.formatPrice(totalPrice)}
+              </Typography>
+              <Typography variant="caption" sx={{ color: '#77aa77' }}>
+                (incl. 19% MwSt.,*)
+              </Typography>
+            </Box>
           </Box>
           
                      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>