u

src/components/UserMenu.jsx

@@ -9,8 +9,12 @@ import ListItemText from '@mui/material/ListItemText';
 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 Switch from '@mui/material/Switch';
+import Divider from '@mui/material/Divider';
 import { StorageManagerContext } from '../api/storageManagerContext';
 import authAutomat from '../automats/authAutomat';
+import { helpAutomat, toggleHelp } from '../automats';
 import CompanySettingsDialog from './CompanySettingsDialog';
 import SettingsDialog from './settings/SettingsDialog';
 import { notifyError } from '../utils/notify';
@@ -25,6 +29,7 @@ class UserMenu extends PureComponent {
       settingsOpen: false,
       numbersOpen: false,
       user: authAutomat.state.user,
+      helpEnabled: helpAutomat.state?.enabled ?? false,
     };
     this.handleOpenMenu = this.handleOpenMenu.bind(this);
     this.handleCloseMenu = this.handleCloseMenu.bind(this);
@@ -32,15 +37,20 @@ class UserMenu extends PureComponent {
     this.handleCloseSettings = this.handleCloseSettings.bind(this);
     this.handleOpenNumbers = this.handleOpenNumbers.bind(this);
     this.handleCloseNumbers = this.handleCloseNumbers.bind(this);
+    this.handleToggleHelp = this.handleToggleHelp.bind(this);
     this.handleLogout = this.handleLogout.bind(this);
   }
 
   componentDidMount() {
-    this.unsubscribe = authAutomat.subscribe(this, 'user');
+    this.unsubscribeAuth = authAutomat.subscribe(this, 'user');
+    this.unsubscribeHelp = helpAutomat.subscribe(this, (state) => ({
+      helpEnabled: Boolean(state?.enabled),
+    }));
   }
 
   componentWillUnmount() {
-    this.unsubscribe?.();
+    this.unsubscribeAuth?.();
+    this.unsubscribeHelp?.();
   }
 
   handleOpenMenu(event) {
@@ -67,6 +77,12 @@ class UserMenu extends PureComponent {
     this.setState({ numbersOpen: false });
   }
 
+  handleToggleHelp(e) {
+    e?.preventDefault?.();
+    e?.stopPropagation?.();
+    toggleHelp();
+  }
+
   async handleLogout() {
     this.setState({ anchorEl: null });
     try {
@@ -78,7 +94,7 @@ class UserMenu extends PureComponent {
   }
 
   render() {
-    const { user, anchorEl, settingsOpen, numbersOpen } = this.state;
+    const { user, anchorEl, settingsOpen, numbersOpen, helpEnabled } = this.state;
     const open = Boolean(anchorEl);
 
     const pictureSrc = (() => {
@@ -124,6 +140,19 @@ class UserMenu extends PureComponent {
             </ListItemIcon>
             <ListItemText>Einstellungen</ListItemText>
           </MenuItem>
+          <MenuItem onClick={this.handleToggleHelp}>
+            <ListItemIcon>
+              <HelpOutlineRoundedIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Hilfe</ListItemText>
+            <Switch
+              edge="end"
+              size="small"
+              checked={helpEnabled}
+              sx={{ pointerEvents: 'none' }}
+            />
+          </MenuItem>
+          <Divider />
           <MenuItem onClick={this.handleLogout}>
             <ListItemIcon>
               <LogoutIcon fontSize="small" />