feat: enhance ExtrasSelector and GrowTentKonfigurator for improved extras handling and UI

- Refactored ExtrasSelector to implement dynamic image loading with caching, improving performance and user experience.
- Updated GrowTentKonfigurator to fetch and display extras from a new category, ensuring accurate pricing and availability.
- Enhanced UI elements for better layout and clarity, including loading indicators and improved styling for extras display.
- Added handling for cases when no extras are available, providing clear feedback to users.

src/pages/GrowTentKonfigurator.js

@@ -109,6 +109,7 @@ class GrowTentKonfigurator extends Component {
     this.fetchCategoryData("Zelte");
     this.fetchCategoryData("Lampen");
     this.fetchCategoryData("Abluft-sets");
+    this.fetchCategoryData("Set-zubehoer");
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -497,15 +498,19 @@ class GrowTentKonfigurator extends Component {
       }
     }
     
-    const extras = getCachedCategoryData('Extras');
-    // Add extras prices
-    selectedExtras.forEach(extraId => {
-      const extra = extras.find(e => e.id === extraId);
-      if (extra) {
-        total += extra.price;
-        itemCount++;
-      }
-    });
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+    if (!extrasData || !Array.isArray(extrasData.products)) {
+      console.warn('Extras data not available; skipping extras price in total calculation');
+    } else {
+      // Add extras prices
+      selectedExtras.forEach(extraId => {
+        const extra = extrasData.products.find(e => e.id === extraId);
+        if (extra) {
+          total += extra.price;
+          itemCount++;
+        }
+      });
+    }
     
     // Apply bundle discount
     let discountPercentage = 0;
@@ -571,14 +576,18 @@ class GrowTentKonfigurator extends Component {
       }
     }
     
-    const extras = getCachedCategoryData('Extras');
-    selectedExtras.forEach(extraId => {
-      const extra = extras.find(e => e.id === extraId);
-      if (extra) {
-        originalTotal += extra.price;
-        itemCount++;
-      }
-    });
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+    if (!extrasData || !Array.isArray(extrasData.products)) {
+      console.warn('Extras data not available; skipping extras in savings calculation');
+    } else {
+      selectedExtras.forEach(extraId => {
+        const extra = extrasData.products.find(e => e.id === extraId);
+        if (extra) {
+          originalTotal += extra.price;
+          itemCount++;
+        }
+      });
+    }
     
     // Progressive discount based on number of selected items
     let discountPercentage = 0;
@@ -1036,14 +1045,42 @@ class GrowTentKonfigurator extends Component {
 
   renderExtrasSection() {
     const { selectedExtras } = this.state;
-    const extras = getCachedCategoryData('Extras');
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+
+    if (!extrasData) {
+      return (
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+            5. Extras hinzufügen (optional)
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+            Lade Extras...
+          </Typography>
+        </Box>
+      );
+    }
+
+    const extras = Array.isArray(extrasData.products) ? extrasData.products : [];
+
+    if (extras.length === 0) {
+      return (
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+            5. Extras hinzufügen (optional)
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+            Keine Extras verfügbar
+          </Typography>
+        </Box>
+      );
+    }
+
     return (
       <ExtrasSelector
         extras={extras}
         selectedExtras={selectedExtras}
         onExtraToggle={this.handleExtraToggle}
         title="5. Extras hinzufügen (optional)"
-        groupByCategory={true}
         gridSize={{ xs: 12, sm: 6, md: 4 }}
       />
     );
@@ -1064,8 +1101,10 @@ 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 extrasData = getCachedCategoryData('Set-zubehoer');
+    const selectedExtrasItems = Array.isArray(extrasData?.products)
+      ? extrasData.products.filter(e => selectedExtras.includes(e.id))
+      : [];
     const savingsInfo = this.calculateSavings();
     
     return (