Enhance localization in CategoryList component: Updated category fetching logic to support dynamic language changes and improved cache handling for category data based on the current language. Adjusted delivery class display in CartItem for better user experience.

src/components/CartItem.js

@@ -117,7 +117,7 @@ class CartItem extends Component {
                 )}
                 {item.versandklasse && item.versandklasse != 'standard' && item.versandklasse != 'kostenlos' && (
                   <Typography variant="body2" color="warning.main" fontWeight="medium" component="div">
-                    {item.versandklasse}
+                    {item.versandklasse == 'nur Abholung' ? this.props.t('delivery.descriptions.pickupOnly') : item.versandklasse}
                   </Typography>
                 )}
                 {item.vat && (

src/components/header/CategoryList.js

@@ -50,6 +50,9 @@ class CategoryList extends Component {
   constructor(props) {
     super(props);
 
+    // Get current language from props (provided by withI18n HOC)
+    const currentLanguage = props.languageContext?.currentLanguage || 'de';
+
     // Check for cached data during SSR/initial render
     let initialState = {
       categoryTree: null,
@@ -59,6 +62,7 @@ class CategoryList extends Component {
       activePath: [], // Array of active category objects for each level
       fetchedCategories: false,
       mobileMenuOpen: false, // State for mobile collapsible menu
+      currentLanguage: currentLanguage,
     };
 
     // Try to get cached data for SSR
@@ -68,7 +72,7 @@ class CategoryList extends Component {
                           (typeof window !== "undefined" && window.productCache);
       
       if (productCache) {
-        const cacheKey = "categoryTree_209";
+        const cacheKey = `categoryTree_209_${currentLanguage}`;
         const cachedData = productCache[cacheKey];
         if (cachedData && cachedData.categoryTree) {
           const { categoryTree, timestamp } = cachedData;
@@ -128,8 +132,27 @@ class CategoryList extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    // Handle socket connection changes
+    // Handle language changes
+    const currentLanguage = this.props.languageContext?.currentLanguage || 'de';
+    const prevLanguage = prevProps.languageContext?.currentLanguage || 'de';
+    
+    if (currentLanguage !== prevLanguage) {
+      // Language changed, need to refetch categories
+      this.setState({
+        currentLanguage: currentLanguage,
+        fetchedCategories: false,
+        categoryTree: null,
+        level1Categories: [],
+        level2Categories: [],
+        level3Categories: [],
+        activePath: [],
+      }, () => {
+        this.fetchCategories();
+      });
+      return;
+    }
 
+    // Handle socket connection changes
     const wasConnected = prevProps.socket && prevProps.socket.connected;
     const isNowConnected = this.props.socket && this.props.socket.connected;
     
@@ -169,6 +192,9 @@ class CategoryList extends Component {
       return;
     }
 
+    // Get current language from state
+    const currentLanguage = this.state.currentLanguage || 'de';
+
     // Initialize global cache object if it doesn't exist
     // @note Handle both SSR (global.window) and browser (window) environments
     const windowObj = (typeof global !== "undefined" && global.window) || 
@@ -180,7 +206,7 @@ class CategoryList extends Component {
 
     // Check if we have a valid cache in the global object
     try {
-      const cacheKey = "categoryTree_209";
+      const cacheKey = `categoryTree_209_${currentLanguage}`;
       const cachedData = windowObj && windowObj.productCache ? windowObj.productCache[cacheKey] : null;
       if (cachedData) {
         const { categoryTree, fetching } = cachedData;
@@ -217,7 +243,7 @@ class CategoryList extends Component {
     }
 
     // Mark as being fetched to prevent concurrent calls
-    const cacheKey = "categoryTree_209";
+    const cacheKey = `categoryTree_209_${currentLanguage}`;
     if (windowObj && windowObj.productCache) {
       windowObj.productCache[cacheKey] = {
         fetching: true,
@@ -227,30 +253,59 @@ class CategoryList extends Component {
     this.setState({ fetchedCategories: true });
 
     //console.log('CategoryList: Fetching categories from socket');
-    socket.emit("categoryList", { categoryId: 209 }, (response) => {
+    socket.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
-      if (response && response.categoryTree) {
+      if (response && response.success) {
+        // Use translated data if available, otherwise fall back to original
+        const categoryTreeToUse = response.translation || response.categoryTree;
 
-        // Store in global cache with timestamp
+        if (categoryTreeToUse) {
-        try {
+          // Store in global cache with timestamp
-          const cacheKey = "categoryTree_209";
+          try {
-          if (windowObj && windowObj.productCache) {
+            const cacheKey = `categoryTree_209_${currentLanguage}`;
-            windowObj.productCache[cacheKey] = {
+            if (windowObj && windowObj.productCache) {
-              categoryTree: response.categoryTree,
+              windowObj.productCache[cacheKey] = {
-              timestamp: Date.now(),
+                categoryTree: categoryTreeToUse,
-              fetching: false,
+                timestamp: Date.now(),
-            };
+                fetching: false,
+              };
+            }
+          } catch (err) {
+            console.error("Error writing to cache:", err);
           }
-        } catch (err) {
+          this.processCategoryTree(categoryTreeToUse);
-          console.error("Error writing to cache:", err);
+        } else {
+          console.error('No category tree found in response');
+          // Clear cache on error
+          try {
+            const cacheKey = `categoryTree_209_${currentLanguage}`;
+            if (windowObj && windowObj.productCache) {
+              windowObj.productCache[cacheKey] = {
+                categoryTree: null,
+                timestamp: Date.now(),
+                fetching: false,
+              };
+            }
+          } catch (err) {
+            console.error("Error writing to cache:", err);
+          }
+
+          this.setState({
+            categoryTree: null,
+            level1Categories: [],
+            level2Categories: [],
+            level3Categories: [],
+            activePath: [],
+          });
         }
-        this.processCategoryTree(response.categoryTree);
       } else {
+        console.error('Failed to fetch categories:', response);
         try {
-          const cacheKey = "categoryTree_209";
+          const cacheKey = `categoryTree_209_${currentLanguage}`;
           if (windowObj && windowObj.productCache) {
             windowObj.productCache[cacheKey] = {
               categoryTree: null,
               timestamp: Date.now(),
+              fetching: false,
             };
           }
         } catch (err) {