u

src/components/UserMenu.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import Avatar from '@mui/material/Avatar';
+import Badge from '@mui/material/Badge';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
@@ -10,10 +11,11 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import BusinessIcon from '@mui/icons-material/Business';
 import SettingsIcon from '@mui/icons-material/Settings';
 import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
+import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
 import authAutomat, { bootstrapAuthMe } from '../automats/authAutomat';
-import { helpAutomat, toggleHelp } from '../automats';
+import { helpAutomat, toggleHelp, pwaAutomat, openPwaDialog } from '../automats';
 import CompanySettingsDialog from './CompanySettingsDialog';
 import SettingsDialog from './settings/SettingsDialog';
 import { notifyError } from '../utils/notify';
@@ -27,6 +29,7 @@ class UserMenu extends PureComponent {
       numbersOpen: false,
       user: authAutomat.state.user,
       helpEnabled: helpAutomat.state?.enabled ?? false,
+      pwaUpdateAvailable: pwaAutomat.state.needRefresh,
     };
     this.handleOpenMenu = this.handleOpenMenu.bind(this);
     this.handleCloseMenu = this.handleCloseMenu.bind(this);
@@ -35,6 +38,7 @@ class UserMenu extends PureComponent {
     this.handleOpenNumbers = this.handleOpenNumbers.bind(this);
     this.handleCloseNumbers = this.handleCloseNumbers.bind(this);
     this.handleToggleHelp = this.handleToggleHelp.bind(this);
+    this.handleOpenPwaUpdate = this.handleOpenPwaUpdate.bind(this);
     this.handleLogout = this.handleLogout.bind(this);
   }
 
@@ -43,11 +47,20 @@ class UserMenu extends PureComponent {
     this.unsubscribeHelp = helpAutomat.subscribe(this, (state) => ({
       helpEnabled: Boolean(state?.enabled),
     }));
+    this.unsubscribePwa = pwaAutomat.subscribe(this, (state) => ({
+      pwaUpdateAvailable: Boolean(state?.needRefresh),
+    }));
   }
 
   componentWillUnmount() {
     this.unsubscribeAuth?.();
     this.unsubscribeHelp?.();
+    this.unsubscribePwa?.();
+  }
+
+  handleOpenPwaUpdate() {
+    this.setState({ anchorEl: null });
+    openPwaDialog();
   }
 
   handleOpenMenu(event) {
@@ -91,7 +104,7 @@ class UserMenu extends PureComponent {
   }
 
   render() {
-    const { user, anchorEl, settingsOpen, numbersOpen, helpEnabled } = this.state;
+    const { user, anchorEl, settingsOpen, numbersOpen, helpEnabled, pwaUpdateAvailable } = this.state;
     const open = Boolean(anchorEl);
 
     const pictureSrc = (() => {
@@ -112,9 +125,17 @@ class UserMenu extends PureComponent {
             onMouseDown={(e) => e.preventDefault()}
             sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}
           >
-            <Avatar src={pictureSrc} alt={user?.email} sx={{ width: 32, height: 32 }}>
-              {user?.email?.[0]?.toUpperCase()}
-            </Avatar>
+            <Badge
+              color="primary"
+              variant="dot"
+              invisible={!pwaUpdateAvailable}
+              overlap="circular"
+              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              <Avatar src={pictureSrc} alt={user?.email} sx={{ width: 32, height: 32 }}>
+                {user?.email?.[0]?.toUpperCase()}
+              </Avatar>
+            </Badge>
           </IconButton>
         </Box>
         <Menu
@@ -124,6 +145,18 @@ class UserMenu extends PureComponent {
           anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
           transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         >
+          {pwaUpdateAvailable && (
+            <MenuItem onClick={this.handleOpenPwaUpdate} sx={{ bgcolor: 'action.hover' }}>
+              <ListItemIcon>
+                <SystemUpdateAltIcon fontSize="small" color="primary" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Update verfügbar"
+                secondary="Jetzt aktualisieren"
+                primaryTypographyProps={{ fontWeight: 600, color: 'primary.main' }}
+              />
+            </MenuItem>
+          )}
           <MenuItem disabled>{user?.email}</MenuItem>
           <MenuItem disabled={!user?.selectedCompanyId} onClick={this.handleOpenSettings}>
             <ListItemIcon>