[open-formulieren/open-forms#4321] Handle max submissions errors per …

…form

src/components/App.stories.jsx

@@ -113,6 +113,7 @@ const render = args => {
     explanationTemplate: '<p>Toelichtingssjabloon...</p>',
     submissionAllowed: args['submissionAllowed'],
     hideNonApplicableSteps: args['hideNonApplicableSteps'],
+    submissionLimitReached: args['form.submissionLimitReached'],
     steps: args['steps'],
   });
   return <Wrapper form={form} showExternalHeader={args.showExternalHeader} />;
@@ -409,3 +410,19 @@ export const SeveralStepsInMobileViewport = {
     },
   },
 };
+
+export const MaximumSubmissionsReached = {
+  render,
+  decorators: [LayoutDecorator],
+  args: {
+    'form.submissionLimitReached': true,
+  },
+};
+
+export const MaximumSubmissionsNotReached = {
+  render,
+  decorators: [LayoutDecorator],
+  args: {
+    'form.submissionLimitReached': false,
+  },
+};

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 FormMaximumSubmissions from 'components/FormMaximumSubmissions';
 import Link from 'components/Link';
 import MaintenanceMode from 'components/MaintenanceMode';
 import {PermissionDenied, ServiceUnavailable, UnprocessableEntity} from 'errors';
@@ -138,21 +139,28 @@ const UnprocessableEntityError = ({wrapper: Wrapper, error}) => {
 UnprocessableEntityError.propTypes = GenericError.propTypes;
 
 const ServiceUnavailableError = ({wrapper: Wrapper, error}) => {
-  if (error.code !== 'form-maintenance') {
+  if (!['form-maintenance', 'form-maximum-submissions'].includes(error.code)) {
     return <GenericError wrapper={Wrapper} error={error} />;
   }
 
   // handle maintenance mode forms
-  return (
-    <MaintenanceMode
-      title={
-        <FormattedMessage
-          description="'Maintenance mode form' error title"
-          defaultMessage="Form temporarily unavailable"
-        />
-      }
-    />
-  );
+  if (error.code === 'form-maintenance') {
+    return (
+      <MaintenanceMode
+        title={
+          <FormattedMessage
+            description="'Maintenance mode form' error title"
+            defaultMessage="Form temporarily unavailable"
+          />
+        }
+      />
+    );
+  }
+
+  // handle submission limit forms
+  if (error.code === 'form-maximum-submissions') {
+    return <FormMaximumSubmissions />;
+  }
 };
 
 // map the error class to the component to render it

src/components/FormMaximumSubmissions.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import ErrorMessage from 'components/Errors/ErrorMessage';
+
+const FormMaximumSubmissions = () => {
+  return (
+    <ErrorMessage modifier="error">
+      <FormattedMessage
+        description="Maximum form submissions error message"
+        defaultMessage="Unfortunately, this form is no longer available for submissions."
+      />
+    </ErrorMessage>
+  );
+};
+
+export default FormMaximumSubmissions;

src/components/FormStart/index.jsx

@@ -6,6 +6,7 @@ import {useAsync} from 'react-use';
 import Body from 'components/Body';
 import Card from 'components/Card';
 import ExistingSubmissionOptions from 'components/ExistingSubmissionOptions';
+import FormMaximumSubmissions from 'components/FormMaximumSubmissions';
 import {LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
 import LoginOptions from 'components/LoginOptions';
@@ -112,6 +113,7 @@ const FormStart = ({form, submission, onFormStart, onDestroySession, initialData
   return (
     <LiteralsProvider literals={form.literals}>
       <Card title={form.name}>
+        {form.submissionLimitReached ? <FormMaximumSubmissions /> : null}
         {userIsFormDesigner && form.maintenanceMode && <MaintenanceMode asToast />}
 
         {!!authErrors ? <AuthenticationErrors parameters={authErrors} /> : null}

src/i18n/compiled/en.json

@@ -2127,6 +2127,12 @@
       "value": "Abort submission"
     }
   ],
+  "uPtko4": [
+    {
+      "type": 0,
+      "value": "Unfortunately, this form is no longer available for submissions."
+    }
+  ],
   "uZBPwA": [
     {
       "type": 0,

src/i18n/compiled/nl.json

@@ -2131,6 +2131,12 @@
       "value": "Afbreken"
     }
   ],
+  "uPtko4": [
+    {
+      "type": 0,
+      "value": "Unfortunately, this form is no longer available for submissions."
+    }
+  ],
   "uZBPwA": [
     {
       "type": 0,

src/i18n/messages/en.json

@@ -1009,6 +1009,11 @@
     "description": "Button label to abort submission",
     "originalDefault": "Abort submission"
   },
+  "uPtko4": {
+    "defaultMessage": "Unfortunately, this form is no longer available for submissions.",
+    "description": "Maximum form submissions error message",
+    "originalDefault": "Unfortunately, this form is no longer available for submissions."
+  },
   "uZBPwA": {
     "defaultMessage": "Number must be {exact, select, true {exactly equal to} other {{inclusive, select, true {less than or equal to} other {less than}}} } {maximum}.",
     "description": "ZOD 'too_big' error message, for numbers",

src/i18n/messages/nl.json

@@ -1021,6 +1021,11 @@
     "description": "Button label to abort submission",
     "originalDefault": "Abort submission"
   },
+  "uPtko4": {
+    "defaultMessage": "Unfortunately, this form is no longer available for submissions.",
+    "description": "Maximum form submissions error message",
+    "originalDefault": "Unfortunately, this form is no longer available for submissions."
+  },
   "uZBPwA": {
     "defaultMessage": "Het getal moet {exact, select, true {exact gelijk aan} other {{inclusive, select, true {minder dan of gelijk aan} other {minder dan}}} } {maximum} zijn.",
     "description": "ZOD 'too_big' error message, for numbers",