From fb3450aa239889bf61f9da07620718b17f0114ea Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Sat, 5 Jul 2025 13:57:29 +0200
Subject: [PATCH] =?UTF-8?q?Implement=20availability=20filters=20in=20Conte?=
 =?UTF-8?q?nt=20and=20ProductList=20components=20to=20enhance=20product=20?=
 =?UTF-8?q?filtering=20functionality.=20Active=20filters=20for=20"auf=20La?=
 =?UTF-8?q?ger",=20"Neu",=20and=20"Bald=20verf=C3=BCgbar"=20are=20now=20dy?=
 =?UTF-8?q?namically=20displayed=20based=20on=20product=20availability,=20?=
 =?UTF-8?q?improving=20user=20experience=20and=20filtering=20accuracy.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Content.js     | 27 ++++++++++++++++++++++++++-
 src/components/ProductList.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/components/Content.js b/src/components/Content.js
index 6dd00e1..07344bd 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -138,7 +138,31 @@ function getFilteredProducts(unfilteredProducts, attributes) {
     const manufacturer = uniqueManufacturersWithName.find(manufacturer => manufacturer.id === filter);
     return {name: manufacturer.value, value: manufacturer.id};
   });
-  return {filteredProducts,activeAttributeFilters:activeAttributeFiltersWithNames,activeManufacturerFilters:activeManufacturerFiltersWithNames};
+
+  // Extract active availability filters
+  const availabilityFilter = sessionStorage.getItem('filter_availability');
+  const activeAvailabilityFilters = [];
+  
+  // Check if there are actually products with these characteristics
+  const hasNewProducts = (unfilteredProducts || []).some(product => isNew(product.neu));
+  const hasComingSoonProducts = (unfilteredProducts || []).some(product => !product.available && product.incoming);
+  
+  // Check for "auf Lager" filter (in stock) - it's active when filter_availability is NOT set to '1'
+  if (availabilityFilter !== '1') {
+    activeAvailabilityFilters.push({id: '1', name: 'auf Lager'});
+  }
+  
+  // Check for "Neu" filter (new) - only show if there are actually new products and filter is active
+  if (availabilityFilters.includes('2') && hasNewProducts) {
+    activeAvailabilityFilters.push({id: '2', name: 'Neu'});
+  }
+  
+  // Check for "Bald verfügbar" filter (coming soon) - only show if there are actually coming soon products and filter is active
+  if (availabilityFilters.includes('3') && hasComingSoonProducts) {
+    activeAvailabilityFilters.push({id: '3', name: 'Bald verfügbar'});
+  }
+
+  return {filteredProducts,activeAttributeFilters:activeAttributeFiltersWithNames,activeManufacturerFilters:activeManufacturerFiltersWithNames,activeAvailabilityFilters};
 }
 function setCachedCategoryData(categoryId, data) {
   if (!window.productCache) {
@@ -685,6 +709,7 @@ class Content extends Component {
                 products={this.state.filteredProducts || []}
                 activeAttributeFilters={this.state.activeAttributeFilters || []}
                 activeManufacturerFilters={this.state.activeManufacturerFilters || []}
+                activeAvailabilityFilters={this.state.activeAvailabilityFilters || []}
                 onFilterChange={()=>{this.filterProducts()}}
                 dataType={this.state.dataType}
                 dataParam={this.state.dataParam}
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index cccd469..cef39ab 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -192,6 +192,34 @@ class ProductList extends Component {
               order: { xs: 2, sm: 1 },
               px: { xs: 1, sm: 0 }
             }}>
+              {this.props.activeAvailabilityFilters && this.props.activeAvailabilityFilters.map((filter,index) => (
+                <Chip 
+                  size="medium"
+                  key={`availability-${index}`} 
+                  label={filter.name} 
+                  onClick={() => {
+                    if (filter.id === '1') {
+                      // Add "auf Lager" filter by setting the sessionStorage item to '1'
+                      sessionStorage.setItem('filter_availability', '1');
+                    } else {
+                      // Remove "Neu" or "Bald verfügbar" filters
+                      removeSessionSetting(`filter_availability_${filter.id}`);
+                    }
+                    this.props.onFilterChange();
+                  }}
+                  onDelete={() => {
+                    if (filter.id === '1') {
+                      // Add "auf Lager" filter by setting the sessionStorage item to '1'
+                      sessionStorage.setItem('filter_availability', '1');
+                    } else {
+                      // Remove "Neu" or "Bald verfügbar" filters
+                      removeSessionSetting(`filter_availability_${filter.id}`);
+                    }
+                    this.props.onFilterChange();
+                  }} 
+                  clickable
+                />
+              ))}
               {this.props.activeAttributeFilters.map((filter,index) => (
                 <Chip 
                   size="medium"                
@@ -224,6 +252,7 @@ class ProductList extends Component {
                   clickable
                 />
               ))}
+
             </Box>
 
             <Box sx={{