Display backend validation errors when submitting the form

src/api-mocks/submissions.js

@@ -102,7 +102,7 @@ export const mockSubmissionSummaryGet = () =>
           data: [
             {
               name: SUBMISSION_STEP_DETAILS.formStep.configuration.components[0].label,
-              value: 'Compnent 1 value',
+              value: 'Component 1 value',
               component: SUBMISSION_STEP_DETAILS.formStep.configuration.components[0],
             },
           ],
@@ -119,6 +119,22 @@ export const mockSubmissionCompletePost = () =>
     })
   );
 
+export const mockSubmissionCompleteInvalidPost = invalidParams =>
+  http.post(`${BASE_URL}submissions/:uuid/_complete`, () =>
+    HttpResponse.json(
+      {
+        type: 'http://localhost:8000/fouten/ValidationError/',
+        code: 'invalid',
+        title: 'Does not validate.',
+        status: 400,
+        detail: '',
+        instance: 'urn:uuid:41e0174a-efc2-4cc0-9bf2-8366242a4e75',
+        invalidParams,
+      },
+      {status: 400}
+    )
+  );
+
 /**
  * Simulate a successful backend processing status without payment.
  */

src/components/CoSign/Cosign.spec.jsx

@@ -103,5 +103,5 @@ test('Load submission summary after backend authentication', async () => {
 
   await screen.findByRole('heading', {name: 'Check and co-sign submission', level: 1});
   // wait for summary to load from the backend
-  await screen.findByText('Compnent 1 value');
+  await screen.findByText('Component 1 value');
 });

src/components/Form.jsx

@@ -1,6 +1,6 @@
 import {useContext, useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Navigate, Outlet, useLocation, useNavigate, useSearchParams} from 'react-router';
+import {Navigate, Outlet, useLocation, useMatch, useNavigate, useSearchParams} from 'react-router';
 import {usePrevious} from 'react-use';
 
 import {ConfigContext} from 'Context';
@@ -35,6 +35,7 @@ const Form = () => {
   const intl = useIntl();
   const prevLocale = usePrevious(intl.locale);
   const {state: routerState} = useLocation();
+  const confirmationMatch = useMatch('/bevestiging');
 
   // extract the declared properties and configuration
   const config = useContext(ConfigContext);
@@ -102,10 +103,18 @@ const Form = () => {
     return <Loader modifiers={['centered']} />;
   }
 
+  // don't render the PI if the form is configured to never display the progress
+  // indicator, or we're on the final confirmation page
+  const showProgressIndicator = form.showProgressIndicator && !confirmationMatch;
+
   // render the container for the router and necessary context providers for deeply
   // nested child components
   return (
-    <FormDisplay progressIndicator={<FormProgressIndicator submission={submission} />}>
+    <FormDisplay
+      progressIndicator={
+        showProgressIndicator ? <FormProgressIndicator submission={submission} /> : null
+      }
+    >
       <AnalyticsToolsConfigProvider>
         <SubmissionProvider
           submission={submission}

src/components/FormProgressIndicator.jsx

@@ -1,5 +1,5 @@
 import {useIntl} from 'react-intl';
-import {matchPath, useLocation, useMatch} from 'react-router';
+import {matchPath, useLocation} from 'react-router';
 
 import ProgressIndicator from 'components/ProgressIndicator';
 import {addFixedSteps, getStepsInfo} from 'components/ProgressIndicator/utils';
@@ -76,15 +76,8 @@ const getMobileStepTitle = (intl, pathname, form) => {
 const FormProgressIndicator = ({submission}) => {
   const form = useFormContext();
   const {pathname: currentPathname, state: routerState} = useLocation();
-  const confirmationMatch = useMatch('/bevestiging');
   const intl = useIntl();
 
-  // don't render anything if the form is configured to never display the progress
-  // indicator, or we're on the final confirmation page
-  if (!form.showProgressIndicator || confirmationMatch) {
-    return null;
-  }
-
   // otherwise collect the necessary information to render the PI.
   const isCompleted = !!routerState?.statusUrl;
   const steps = getProgressIndicatorSteps({intl, form, submission, currentPathname, isCompleted});

src/components/Summary/GenericSummary.jsx

@@ -29,13 +29,19 @@ const GenericSummary = ({
   const Wrapper = submissionAllowed === SUBMISSION_ALLOWED.yes ? Form : 'div';
 
   if (isLoading) {
-    return <Loader modifiers={['centered']} />;
+    return (
+      <Card title={title}>
+        <Loader modifiers={['centered']} />
+      </Card>
+    );
   }
 
   return (
     <Card title={title}>
-      {errors.map(error => (
-        <ErrorMessage key={error}>{error}</ErrorMessage>
+      {errors.map((error, index) => (
+        <div className="openforms-card__alert" key={`error-${index}`}>
+          <ErrorMessage>{error}</ErrorMessage>
+        </div>
       ))}
       <Formik
         initialValues={{privacyPolicyAccepted: false, statementOfTruthAccepted: false}}
@@ -102,7 +108,7 @@ GenericSummary.propTypes = {
   editStepText: PropTypes.string,
   isLoading: PropTypes.bool,
   isAuthenticated: PropTypes.bool,
-  errors: PropTypes.arrayOf(PropTypes.string),
+  errors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
   prevPage: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onDestroySession: PropTypes.func.isRequired,

src/components/Summary/SubmissionSummary.jsx

@@ -8,11 +8,13 @@
 import {useSubmissionContext} from 'components/SubmissionProvider';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 import {findPreviousApplicableStep} from 'components/utils';
+import {ValidationError} from 'errors';
 import useFormContext from 'hooks/useFormContext';
 import useRefreshSubmission from 'hooks/useRefreshSubmission';
 import useTitle from 'hooks/useTitle';
 
 import GenericSummary from './GenericSummary';
+import ValidationErrors from './ValidationErrors';
 import {loadSummaryData} from './data';
 
 const completeSubmission = async (submission, statementValues) => {
@@ -29,7 +31,7 @@
   const {submission, onDestroySession, removeSubmissionId} = useSubmissionContext();
   const refreshedSubmission = useRefreshSubmission(submission);
 
-  const [submitError, setSubmitError] = useState('');
+  const [submitErrors, setSubmitErrors] = useState(null);
 
   const pageTitle = intl.formatMessage({
     description: 'Summary page title',
@@ -52,11 +54,17 @@
 
   const onSubmit = async statementValues => {
     if (refreshedSubmission.submissionAllowed !== SUBMISSION_ALLOWED.yes) return;
+
     let statusUrl;
     try {
       statusUrl = await completeSubmission(refreshedSubmission, statementValues);
     } catch (e) {
-      setSubmitError(e.message);
+      if (e instanceof ValidationError) {
+        const {initialErrors} = e.asFormikProps();
+        setSubmitErrors(initialErrors);
+      } else {
+        setSubmitErrors(e.message);
+      }
       return;
     }
 
@@ -86,6 +94,20 @@
     navigate(getPreviousPage());
   };
 
+  const submitError =
+    submitErrors &&
+    (typeof submitErrors === 'string' ? (
+      submitErrors
+    ) : (
+      <>
+        <FormattedMessage
+          description="Summary page generic validation error message"
+          defaultMessage="There are problems with the submitted data."
+        />
+        <ValidationErrors errors={submitErrors} summaryData={summaryData} />
+      </>
+    ));
+
   const errorMessages = [location.state?.errorMessage, submitError].filter(Boolean);
 
   return (

src/components/Summary/SubmissionSummary.stories.jsx

@@ -0,0 +1,101 @@
+import {expect, fn, userEvent, within} from '@storybook/test';
+import {withRouter} from 'storybook-addon-remix-react-router';
+
+import {buildForm} from 'api-mocks';
+import {
+  buildSubmission,
+  mockSubmissionCompleteInvalidPost,
+  mockSubmissionGet,
+  mockSubmissionSummaryGet,
+} from 'api-mocks/submissions';
+import SubmissionProvider from 'components/SubmissionProvider';
+import {ConfigDecorator, withForm} from 'story-utils/decorators';
+
+import SubmissionSummary from './SubmissionSummary';
+
+const form = buildForm();
+const submission = buildSubmission();
+
+export default {
+  title: 'Private API / SubmissionSummary',
+  component: SubmissionSummary,
+  decorators: [
+    (Story, {args}) => (
+      <SubmissionProvider
+        submission={args.submission}
+        onSubmissionObtained={fn()}
+        onDestroySession={fn()}
+        removeSubmissionId={fn()}
+      >
+        <Story />
+      </SubmissionProvider>
+    ),
+    withRouter,
+    ConfigDecorator,
+    withForm,
+  ],
+  args: {
+    form,
+    submission,
+  },
+  argTypes: {
+    form: {table: {disable: true}},
+    submission: {table: {disable: true}},
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        loadSubmission: [mockSubmissionGet(submission), mockSubmissionSummaryGet()],
+      },
+    },
+  },
+};
+
+export const Overview = {};
+
+export const BackendValidationErrors = {
+  parameters: {
+    msw: {
+      handlers: {
+        completeSubmission: [
+          mockSubmissionCompleteInvalidPost([
+            {
+              name: 'steps.0.nonFieldErrors.0',
+              code: 'invalid',
+              reason: 'Your carpet is ugly.',
+            },
+            {
+              name: 'steps.0.nonFieldErrors.1',
+              code: 'invalid',
+              reason: "And your veg ain't in season.",
+            },
+            {
+              name: 'steps.0.data.component1',
+              code: 'existential-nightmare',
+              reason: 'I was waiting in line for ten whole minutes.',
+            },
+          ]),
+        ],
+      },
+    },
+  },
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step('Submit form submission to backend', async () => {
+      await userEvent.click(
+        await canvas.findByRole('checkbox', {name: /I accept the privacy policy/})
+      );
+      await userEvent.click(canvas.getByRole('button', {name: 'Confirm'}));
+    });
+
+    await step('Check validation errors from backend', async () => {
+      const genericMessage = await canvas.findByText('There are problems with the submitted data.');
+      expect(genericMessage).toBeVisible();
+
+      expect(await canvas.findByText(/Your carpet is ugly/)).toBeVisible();
+      expect(await canvas.findByText(/And your veg/)).toBeVisible();
+      expect(await canvas.findByText(/I was waiting in line for ten whole minutes/)).toBeVisible();
+    });
+  },
+};