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();