♻️ [#467] Refactor more components to use the ErrorMessage component

open-formulieren · Nov 3, 2023 · 0644b0f · 0644b0f
1 parent babeae7
commit 0644b0f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 27 deletions.
diff --git a/src/components/MaintenanceMode.js b/src/components/MaintenanceMode.js
@@ -2,14 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
 import Card from 'components/Card';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {IsFormDesigner} from 'headers';
-import {getBEMClassName} from 'utils';
 
 const MaintenanceModeAlert = () => {
-  const alertClassName = getBEMClassName('alert', ['info']);
   const userIsFormDesigner = IsFormDesigner.getValue();
 
   let message;
@@ -32,14 +29,7 @@ const MaintenanceModeAlert = () => {
     );
   }
 
-  return (
-    <div className={alertClassName}>
-      <span className={getBEMClassName('alert__icon')}>
-        <FAIcon icon="info" />
-      </span>
-      <Body>{message}</Body>
-    </div>
-  );
+  return <ErrorMessage modifier="info">{message}</ErrorMessage>;
 };
 
 const MaintenanceMode = ({title, asToast = false}) => {

diff --git a/src/components/auth/AuthenticationOutage.js b/src/components/auth/AuthenticationOutage.js
@@ -2,10 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import useQuery from 'hooks/useQuery';
-import {getBEMClassName} from 'utils';
 
 const AUTHENTICATION_OUTAGE_QUERY_PARAM = 'of-auth-problem';
 
@@ -15,20 +13,15 @@ export const useDetectAuthenticationOutage = () => {
 };
 
 const AuthenticationOutage = ({loginOption}) => (
-  <div className={getBEMClassName('alert', ['error'])}>
-    <span className={getBEMClassName('alert__icon', ['wide'])}>
-      <FAIcon icon="exclamation-circle" />
-    </span>
-    <Body>
-      <FormattedMessage
-        description="Authentication outage message"
-        defaultMessage={`
+  <ErrorMessage>
+    <FormattedMessage
+      description="Authentication outage message"
+      defaultMessage={`
           This form is temporarily unavailable because of an outage with the {label}
           authentication service. Please try again later.`}
-        values={{label: loginOption.label}}
-      />
-    </Body>
-  </div>
+      values={{label: loginOption.label}}
+    />
+  </ErrorMessage>
 );
 
 AuthenticationOutage.propTypes = {