diff --git a/src/components/configurator/ExtrasSelector.js b/src/components/configurator/ExtrasSelector.js
index 98f6991..6168b5e 100644
--- a/src/components/configurator/ExtrasSelector.js
+++ b/src/components/configurator/ExtrasSelector.js
@@ -1,12 +1,9 @@
import React, { Component } from 'react';
import Grid from '@mui/material/Grid';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import CircularProgress from '@mui/material/CircularProgress';
class ExtrasSelector extends Component {
formatPrice(price) {
@@ -16,131 +13,159 @@ class ExtrasSelector extends Component {
}).format(price);
}
+ // Render product image using working code from GrowTentKonfigurator
+ renderProductImage(product) {
+ if (!window.smallPicCache) {
+ window.smallPicCache = {};
+ }
+
+ const pictureList = product.pictureList;
+
+ if (!pictureList || pictureList.length === 0 || !pictureList.split(',').length) {
+ return (
+
+ );
+ }
+
+ const bildId = pictureList.split(',')[0];
+
+ if (window.smallPicCache[bildId]) {
+ return (
+
+ );
+ }
+
+ // Load image if not cached
+ if (!this.loadingImages) this.loadingImages = new Set();
+ if (!this.loadingImages.has(bildId)) {
+ this.loadingImages.add(bildId);
+ window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
+ if (res.success) {
+ window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+ this.forceUpdate();
+ }
+ this.loadingImages.delete(bildId);
+ });
+ }
+
+ return (
+
+
+
+ );
+ }
+
renderExtraCard(extra) {
const { selectedExtras, onExtraToggle, showImage = true } = this.props;
const isSelected = selectedExtras.includes(extra.id);
return (
- onExtraToggle(extra.id)}
- >
+ onExtraToggle(extra.id)}>
+ {/* Image */}
{showImage && (
-
- )}
-
-
- {
- e.stopPropagation();
- onExtraToggle(extra.id);
- }}
- sx={{
- color: '#2e7d32',
- '&.Mui-checked': { color: '#2e7d32' },
- padding: 0
- }}
- />
- }
- label=""
- sx={{ margin: 0 }}
- onClick={(e) => e.stopPropagation()}
- />
-
-
- {this.formatPrice(extra.price)}
-
- {extra.vat && (
-
- (incl. {extra.vat}% MwSt.,*)
-
- )}
-
+
+ {this.renderProductImage(extra)}
-
+ )}
+
+ {/* Content */}
+
+ {/* Name */}
{extra.name}
-
- {extra.description}
+
+ {/* Price with VAT - Same as other sections */}
+
+ {extra.price ? this.formatPrice(extra.price) : 'Kein Preis'}
+ {extra.vat && (
+
+ (incl. {extra.vat}% MwSt.,*)
+
+ )}
-
+
+ {/* Selection Indicator - Separate line */}
{isSelected && (
-
-
- ✓ Hinzugefügt
-
-
+
+ ✓ Ausgewählt
+
)}
-
-
+
+
);
}
render() {
- const { extras, title, subtitle, groupByCategory = true, gridSize = { xs: 12, sm: 6, md: 4 } } = this.props;
-
- if (groupByCategory) {
- // Group extras by category
- const groupedExtras = extras.reduce((acc, extra) => {
- if (!acc[extra.category]) {
- acc[extra.category] = [];
- }
- acc[extra.category].push(extra);
- return acc;
- }, {});
+ const { extras, title, subtitle, gridSize = { xs: 12, sm: 6, md: 4 } } = this.props;
+ if (!extras || !Array.isArray(extras)) {
return (
{title}
- {subtitle && (
-
- {subtitle}
-
- )}
-
- {Object.entries(groupedExtras).map(([category, categoryExtras]) => (
-
-
- {category}
-
-
- {categoryExtras.map(extra => (
-
- {this.renderExtraCard(extra)}
-
- ))}
-
-
- ))}
+
+ Keine Extras verfügbar
+
);
}
- // Render without category grouping
return (
diff --git a/src/pages/GrowTentKonfigurator.js b/src/pages/GrowTentKonfigurator.js
index 3362f49..3c5aec1 100644
--- a/src/pages/GrowTentKonfigurator.js
+++ b/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 (
+
+
+ 5. Extras hinzufügen (optional)
+
+
+ Lade Extras...
+
+
+ );
+ }
+
+ const extras = Array.isArray(extrasData.products) ? extrasData.products : [];
+
+ if (extras.length === 0) {
+ return (
+
+
+ 5. Extras hinzufügen (optional)
+
+
+ Keine Extras verfügbar
+
+
+ );
+ }
+
return (
);
@@ -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 (