diff --git a/src/pages/GrowTentKonfigurator.js b/src/pages/GrowTentKonfigurator.js
index 94a36ae..419b919 100644
--- a/src/pages/GrowTentKonfigurator.js
+++ b/src/pages/GrowTentKonfigurator.js
@@ -116,6 +116,15 @@ class GrowTentKonfigurator extends Component {
if (prevState.selectedTentShape !== this.state.selectedTentShape && this.state.selectedTentShape !== prevState.selectedTentShape) {
this.setState({ selectedTentSize: '' });
}
+
+ // Reset ventilation selection if current selection is not deliverable for new tent shape
+ if (prevState.selectedTentShape !== this.state.selectedTentShape && this.state.selectedVentilationType) {
+ const availableVentilation = this.getVentilationForTentShape(this.state.selectedTentShape);
+ const currentVentilation = availableVentilation.find(v => v.id === this.state.selectedVentilationType);
+ if (!currentVentilation || !currentVentilation.isDeliverable) {
+ this.setState({ selectedVentilationType: '' });
+ }
+ }
// Recalculate total price when selections change
if (
@@ -341,6 +350,7 @@ class GrowTentKonfigurator extends Component {
});
// Filter products by matching tent size in "passend für Zelt" attribute
+ // Include all size-matching products, but mark availability status
const matchingProducts = products.filter(product => {
const attrs = attributesByProduct[product.id];
if (!attrs) return false;
@@ -349,18 +359,22 @@ class GrowTentKonfigurator extends Component {
const tentSizeAttr = attrs['passend für Zelt'];
if (!tentSizeAttr) return false;
- // Check if tent size matches
+ // Only filter by tent size match, not by availability
const sizeMatch = tentSizeAttr === tentShape;
-
- // Check availability - only show products that are available for delivery
+
+ console.log(`Ventilation Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}`);
+
+ return sizeMatch;
+ }).map(product => {
+ // Add availability flag to each product for UI rendering
const isAvailable = (product.available > 0) || (product.availableSupplier === 1);
-
- console.log(`Ventilation Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}, available=${isAvailable}`);
-
- return sizeMatch && isAvailable;
+ return {
+ ...product,
+ isDeliverable: isAvailable
+ };
});
- console.log('Filtered ventilation:', matchingProducts.length);
+ console.log('Filtered ventilation (including non-deliverable):', matchingProducts.length);
return matchingProducts;
}
@@ -477,7 +491,7 @@ class GrowTentKonfigurator extends Component {
if (selectedVentilationType) {
const availableVentilation = this.getVentilationForTentShape(this.state.selectedTentShape);
const ventilation = availableVentilation.find(v => v.id === selectedVentilationType);
- if (ventilation && ventilation.price) {
+ if (ventilation && ventilation.price && ventilation.isDeliverable) {
total += ventilation.price;
itemCount++;
}
@@ -550,7 +564,7 @@ class GrowTentKonfigurator extends Component {
if (selectedVentilationType) {
const availableVentilation = this.getVentilationForTentShape(this.state.selectedTentShape);
const ventilation = availableVentilation.find(v => v.id === selectedVentilationType);
- if (ventilation && ventilation.price) {
+ if (ventilation && ventilation.price && ventilation.isDeliverable) {
originalTotal += ventilation.price;
itemCount++;
}
@@ -915,18 +929,53 @@ class GrowTentKonfigurator extends Component {
flexDirection: 'column',
borderRadius: '8px',
overflow: 'hidden',
- cursor: 'pointer',
+ cursor: ventilation.isDeliverable ? 'pointer' : 'not-allowed',
border: '2px solid',
borderColor: selectedVentilationType === ventilation.id ? '#2e7d32' : '#e0e0e0',
backgroundColor: selectedVentilationType === ventilation.id ? '#f1f8e9' : '#ffffff',
- '&:hover': {
+ opacity: ventilation.isDeliverable ? 1 : 0.5,
+ filter: ventilation.isDeliverable ? 'none' : 'grayscale(50%)',
+ '&:hover': ventilation.isDeliverable ? {
boxShadow: 6,
borderColor: '#2e7d32'
- },
- transition: 'all 0.3s ease'
+ } : {},
+ transition: 'all 0.3s ease',
+ position: 'relative'
+ }}
+ onClick={() => {
+ if (ventilation.isDeliverable) {
+ this.handleVentilationSelect(ventilation.id);
+ }
}}
- onClick={() => this.handleVentilationSelect(ventilation.id)}
>
+ {/* Non-deliverable overlay */}
+ {!ventilation.isDeliverable && (
+
+
+ Nicht lieferbar
+
+
+ )}
+
{/* Image */}
{this.renderTentImage(ventilation)}
@@ -935,13 +984,16 @@ class GrowTentKonfigurator extends Component {
{/* Content */}
{/* Name */}
-
+
{ventilation.name}
{/* Price with VAT */}
{ventilation.vat && (
-
+
(incl. {ventilation.vat}% MwSt.,*)
)}
{/* Selection Indicator */}
- {selectedVentilationType === ventilation.id && (
+ {selectedVentilationType === ventilation.id && ventilation.isDeliverable && (
l.id === selectedLightType);
const availableVentilation = this.state.selectedTentShape ? this.getVentilationForTentShape(this.state.selectedTentShape) : [];
- const selectedVentilation = availableVentilation.find(v => v.id === selectedVentilationType);
+ const selectedVentilation = availableVentilation.find(v => v.id === selectedVentilationType && v.isDeliverable);
const selectedExtrasItems = extras.filter(e => selectedExtras.includes(e.id));
const savingsInfo = this.calculateSavings();