u

src/components/CompanySetupDialog.jsx

@@ -20,13 +20,19 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
 import BusinessIcon from '@mui/icons-material/Business';
+import BackendError from './BackendError';
 import { company } from '../api';
-import { createCompany, logout, selectCompany } from '../store/authSlice';
+import {
+  createCompany as createCompanyThunk,
+  logout as logoutThunk,
+  selectCompany as selectCompanyThunk,
+} from '../store/authSlice';
 import {
   defaultIso639,
   ISO639_OPTIONS,
   parseTaxRate,
 } from '../utils/companyForm';
+import { backendErrorFrom, isBackendFailure } from '../utils/backendError';
 
 class CompanySetupDialog extends Component {
   constructor(props) {
@@ -44,6 +50,7 @@ class CompanySetupDialog extends Component {
     this.handleSelect = this.handleSelect.bind(this);
     this.handleCreate = this.handleCreate.bind(this);
     this.handleLogout = this.handleLogout.bind(this);
+    this.handleClose = this.handleClose.bind(this);
   }
 
   componentDidMount() {
@@ -67,7 +74,7 @@ class CompanySetupDialog extends Component {
     try {
       await this.props.selectCompany(companyId).unwrap();
     } catch (err) {
-      this.setState({ error: err.message });
+      this.setState({ error: backendErrorFrom(err) });
     } finally {
       this.setState({ busy: false });
     }
@@ -100,7 +107,7 @@ class CompanySetupDialog extends Component {
         })
         .unwrap();
     } catch (err) {
-      this.setState({ error: err.message });
+      this.setState({ error: backendErrorFrom(err) });
     } finally {
       this.setState({ busy: false });
     }
@@ -110,6 +117,10 @@ class CompanySetupDialog extends Component {
     void this.props.logout();
   }
 
+  handleClose(_event, reason) {
+    if (reason === 'backdropClick' || reason === 'escapeKeyDown') return;
+  }
+
   render() {
     const { companies, loading, busy, error, name, iso639, taxrate, reducedtaxrate } =
       this.state;
@@ -123,7 +134,7 @@ class CompanySetupDialog extends Component {
       parsedReducedtaxrate != null;
 
     return (
-      <Dialog open disableEscapeKeyDown maxWidth="sm" fullWidth>
+      <Dialog open onClose={this.handleClose} maxWidth="sm" fullWidth>
         <DialogTitle>
           {loading
             ? 'Unternehmen'
@@ -141,9 +152,13 @@ class CompanySetupDialog extends Component {
           ) : null}
 
           {error ? (
-            <Alert severity="error" sx={{ mb: 2 }}>
-              {error}
-            </Alert>
+            isBackendFailure(error) ? (
+              <BackendError error={error} sx={{ mb: 2 }} />
+            ) : (
+              <Alert severity="error" sx={{ mb: 2 }}>
+                {typeof error === 'string' ? error : error.message}
+              </Alert>
+            )
           ) : null}
 
           {loading ? (
@@ -268,9 +283,9 @@ class CompanySetupDialog extends Component {
 }
 
 const mapDispatchToProps = (dispatch) => ({
-  createCompany: (payload) => dispatch(createCompany(payload)),
-  selectCompany: (companyId) => dispatch(selectCompany(companyId)),
-  logout: () => dispatch(logout()),
+  createCompany: (payload) => dispatch(createCompanyThunk(payload)),
+  selectCompany: (companyId) => dispatch(selectCompanyThunk(companyId)),
+  logout: () => dispatch(logoutThunk()),
 });
 
 export default connect(null, mapDispatchToProps)(CompanySetupDialog);