✨ [open-formulieren/open-forms#5033] User friendly error in case of 503

src/components/Errors/ErrorBoundary.jsx

@@ -4,6 +4,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
+import FormUnavailable from 'components/Errors/FormUnavailable';
 import FormMaximumSubmissions from 'components/FormMaximumSubmissions';
 import Link from 'components/Link';
 import MaintenanceMode from 'components/MaintenanceMode';
@@ -139,13 +140,9 @@ const UnprocessableEntityError = ({wrapper: Wrapper, error}) => {
 UnprocessableEntityError.propTypes = GenericError.propTypes;
 
 const ServiceUnavailableError = ({wrapper: Wrapper, error}) => {
-  if (!['form-maintenance', 'form-maximum-submissions'].includes(error.code)) {
-    return <GenericError wrapper={Wrapper} error={error} />;
-  }
-
-  // handle maintenance mode forms
-  if (error.code === 'form-maintenance') {
-    return (
+  const defaultComponent = <GenericError wrapper={Wrapper} error={error} />;
+  const componentMapping = {
+    'form-maintenance': (
       <MaintenanceMode
         title={
           <FormattedMessage
@@ -154,13 +151,12 @@ const ServiceUnavailableError = ({wrapper: Wrapper, error}) => {
           />
         }
       />
-    );
-  }
+    ),
+    'form-maximum-submissions': <FormMaximumSubmissions />,
+    service_unavailable: <FormUnavailable wrapper={Wrapper} />,
+  };
 
-  // handle submission limit forms
-  if (error.code === 'form-maximum-submissions') {
-    return <FormMaximumSubmissions />;
-  }
+  return componentMapping[error.code] || defaultComponent;
 };
 
 // map the error class to the component to render it

src/components/Errors/FormUnavailable.jsx

@@ -0,0 +1,24 @@
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import ErrorMessage from 'components/Errors/ErrorMessage';
+
+const FormUnavailable = ({wrapper: Wrapper}) => {
+  const intl = useIntl();
+  // Wrapper may be a DOM element, which can't handle <FormattedMessage />
+  const title = intl.formatMessage({
+    description: 'Open Forms service unavailable error title',
+    defaultMessage: 'Form unavailable',
+  });
+  return (
+    <Wrapper title={title}>
+      <ErrorMessage modifier="error">
+        <FormattedMessage
+          description="Open Forms service unavailable error message"
+          defaultMessage="Unfortunately, this form is currently unavailable due to an outage. Please try again later."
+        />
+      </ErrorMessage>
+    </Wrapper>
+  );
+};
+
+export default FormUnavailable;