refactor: replace socket prop usage with window.socketManager for consistent socket handling across components

src/components/header/ButtonGroup.js

@@ -34,9 +34,8 @@ class ButtonGroup extends Component {
 
   componentDidMount() { 
     this.cart = () => {
-      // @note Only emit if socket exists, is connected, AND the update didn't come from socket
-      if (this.props.socket && this.props.socket.connected && !this.isUpdatingFromSocket) {
-        this.props.socket.emit('updateCart', window.cart);
+      if (!this.isUpdatingFromSocket) {
+        window.socketManager.emit('updateCart', window.cart);
       }
 
       this.setState({
@@ -53,19 +52,6 @@ class ButtonGroup extends Component {
     this.addSocketListeners();
   }
 
-  componentDidUpdate(prevProps) {
-    // Handle socket connection changes
-    const wasConnected = prevProps.socket && prevProps.socket.connected;
-    const isNowConnected = this.props.socket && this.props.socket.connected;
-    
-    if (!wasConnected && isNowConnected) {
-      // Socket just connected, add listeners
-      this.addSocketListeners();
-    } else if (wasConnected && !isNowConnected) {
-      // Socket just disconnected, remove listeners
-      this.removeSocketListeners();
-    }
-  }
 
   componentWillUnmount() {
     window.removeEventListener('cart', this.cart); 
@@ -74,17 +60,17 @@ class ButtonGroup extends Component {
   }
 
   addSocketListeners = () => {
-    if (this.props.socket && this.props.socket.connected) {
+
       // Remove existing listeners first to avoid duplicates
       this.removeSocketListeners();
-      this.props.socket.on('cartUpdated', this.handleCartUpdated);
-    }
+      window.socketManager.on('cartUpdated', this.handleCartUpdated);
+
   }
 
   removeSocketListeners = () => {
-    if (this.props.socket) {
-      this.props.socket.off('cartUpdated', this.handleCartUpdated);
-    }
+
+      window.socketManager.off('cartUpdated', this.handleCartUpdated);
+
   }
 
   handleCartUpdated = (id,user,cart) => {
@@ -118,7 +104,7 @@ class ButtonGroup extends Component {
   }
 
   render() {
-    const { socket, navigate, t } = this.props;
+    const { navigate, t } = this.props;
     const { isCartOpen } = this.state;
     const cartItems = Array.isArray(window.cart) ? window.cart : [];
     
@@ -126,7 +112,7 @@ class ButtonGroup extends Component {
       <Box sx={{ display: 'flex', gap: { xs: 0.5, sm: 1 } }}>
         
         <LanguageSwitcher />
-        <LoginComponent socket={socket} />
+        <LoginComponent/>
                 
         <IconButton 
           color="inherit" 
@@ -172,7 +158,7 @@ class ButtonGroup extends Component {
             </Box>
             <Divider sx={{ mb: 2 }} />
             
-            <CartDropdown cartItems={cartItems} socket={socket} onClose={this.toggleCart} onCheckout={()=>{
+            <CartDropdown cartItems={cartItems} onClose={this.toggleCart} onCheckout={()=>{
               /*open the Drawer inside <LoginComponent */ 
               
               if (isUserLoggedIn().isLoggedIn) {