♻️ [open-formulieren/open-forms#4929] Remove need to track appointmen…

…t processing error

We can grab the error from the state now and make it
disappear when a new submit attempt is made with
local component state rather than needing to use
or update the context.

src/components/PostCompletionViews/viewsWithPolling.stories.jsx

@@ -18,7 +18,6 @@ export default {
     statusUrl: {control: false},
   },
   args: {
-    onFailure: fn(),
     onConfirmed: fn(),
   },
   parameters: {

src/components/appointments/CreateAppointment/Confirmation.jsx

@@ -6,12 +6,10 @@ import {useCreateAppointmentContext} from './CreateAppointmentState';
 
 const Confirmation = () => {
   const [params] = useSearchParams();
-  const {reset, setProcessingError} = useCreateAppointmentContext();
+  const {reset} = useCreateAppointmentContext();
   const statusUrl = params.get('statusUrl');
   if (!statusUrl) throw new Error('Missing statusUrl param');
-  return (
-    <ConfirmationView returnTo="../overzicht" onFailure={setProcessingError} onConfirmed={reset} />
-  );
+  return <ConfirmationView returnTo="../overzicht" onConfirmed={reset} />;
 };
 
 Confirmation.propTypes = {};

src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx

@@ -177,6 +177,14 @@ describe('Create appointment status checking', () => {
     // wait for summary page to be rendered again
     await screen.findByText('Check and confirm', undefined, {timeout: 2000});
     expect(screen.getByText('Computer says no.')).toBeVisible();
+
+    // submitting again causes error message to vanish
+    for (const checkbox of screen.getAllByRole('checkbox')) {
+      await user.click(checkbox);
+    }
+    const submitButton2 = screen.getByRole('button', {name: 'Confirm'});
+    await user.click(submitButton2);
+    expect(screen.queryByText('Computer says no.')).toBeNull();
   });
 });
 

src/components/appointments/CreateAppointment/CreateAppointmentState.jsx

@@ -24,8 +24,6 @@ export const buildContextValue = ({
   appointmentErrors = {initialTouched: {}, initialErrors: {}},
   setAppointmentErrors = () => {},
   resetSession = () => {},
-  processingError = '',
-  setProcessingError = () => {},
 }) => {
   const submittedSteps = Object.keys(appointmentData).filter(
     subObject => Object.keys(subObject).length
@@ -55,16 +53,13 @@ export const buildContextValue = ({
     submitStep: values => setAppointmentData({...appointmentData, [currentStep]: values}),
     setErrors: setAppointmentErrors,
     stepErrors: {initialTouched: stepInitialTouched, initialErrors: stepInitialErrors},
-    processingError,
-    setProcessingError,
     clearStepErrors: () => {
       const newInitialErrors = produce(initialErrors, draft => {
         errorKeys.forEach(key => delete draft[key]);
       });
       setAppointmentErrors({initialTouched, initialErrors: newInitialErrors});
     },
     reset: () => {
-      setProcessingError('');
       setAppointmentData({});
       resetSession();
     },
@@ -77,7 +72,6 @@ export const CreateAppointmentState = ({currentStep, submission, resetSession, c
     initialTouched: {},
     initialErrors: {},
   });
-  const [processingError, setProcessingError] = useState('');
 
   // check if the session is expired
   useSessionTimeout();
@@ -90,8 +84,6 @@ export const CreateAppointmentState = ({currentStep, submission, resetSession, c
     appointmentErrors,
     setAppointmentErrors,
     resetSession,
-    processingError,
-    setProcessingError,
   });
 
   return (

src/components/appointments/CreateAppointment/Summary.jsx

@@ -1,7 +1,7 @@
 import {Form, Formik} from 'formik';
 import {useContext, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
-import {createSearchParams, useNavigate} from 'react-router-dom';
+import {createSearchParams, useLocation, useNavigate} from 'react-router-dom';
 import {useAsync} from 'react-use';
 
 import {ConfigContext} from 'Context';
@@ -60,9 +60,10 @@ const getErrorsNavigateTo = errors => {
 const Summary = () => {
   const intl = useIntl();
   const {baseUrl} = useContext(ConfigContext);
+  const {state: routerState} = useLocation();
   const navigate = useNavigate();
-  const {appointmentData, submission, setErrors, processingError, setProcessingError} =
-    useCreateAppointmentContext();
+  const {appointmentData, submission, setErrors} = useCreateAppointmentContext();
+  const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState(null);
   useTitle(
     intl.formatMessage({
@@ -162,7 +163,7 @@ const Summary = () => {
    * Submit the appointment data to the backend.
    */
   const onSubmit = async statementValues => {
-    setProcessingError('');
+    setSubmitting(true);
     let appointment;
     try {
       appointment = await createAppointment(baseUrl, submission, appointmentData, statementValues);
@@ -176,6 +177,8 @@ const Summary = () => {
       }
       setSubmitError(e);
       return;
+    } finally {
+      setSubmitting(false);
     }
     // TODO: store details in sessionStorage instead, to survive hard refreshes
     navigate(
@@ -191,6 +194,7 @@ const Summary = () => {
     );
   };
 
+  const processingError = submitting ? '' : routerState?.errorMessage;
   return (
     <>
       <CardTitle