♻️ [open-formulieren/open-forms#4929] Removed the need to track compl…

…etion state

We can infer the submission _complete call/result state from
the presence of the status URL in the router state, so we
no longer need to pass an onConfirmed callback down to
set this in the parent state.

src/components/Form.jsx

@@ -39,7 +39,6 @@ import {addFixedSteps, getStepsInfo} from './ProgressIndicator/utils';
 
 const initialState = {
   submission: null,
-  completed: false,
 };
 
 const reducer = (draft, action) => {
@@ -56,10 +55,6 @@ const reducer = (draft, action) => {
       draft.submission = submission;
       break;
     }
-    case 'PROCESSING_SUCCEEDED': {
-      draft.completed = true;
-      break;
-    }
     case 'DESTROY_SUBMISSION': {
       return {
         ...initialState,
@@ -196,7 +191,6 @@ const Form = () => {
   const submissionAllowedSpec = state.submission?.submissionAllowed ?? form.submissionAllowed;
   const showOverview = submissionAllowedSpec !== SUBMISSION_ALLOWED.noWithoutOverview;
   const submission = state.submission || (!!paymentMatch && routerState.submission) || null;
-  const isCompleted = state.completed;
   const formName = form.name;
   const needsPayment = submission ? submission.payment.isRequired : form.paymentRequired;
 
@@ -241,6 +235,9 @@ const Form = () => {
       // then, filter out the non-applicable steps if they should not be displayed
       .filter(step => showNonApplicableSteps || step.isApplicable);
 
+  // the statusUrl is put in the router state once the summary page is confirmed and the
+  // submission is completed.
+  const isCompleted = !!routerState?.statusUrl;
   const stepsToRender = addFixedSteps(
     intl,
     updatedSteps,
@@ -275,7 +272,6 @@ const Form = () => {
             <RequireSubmission
               retrieveSubmissionFromContext
               onFailure={onProcessingFailure}
-              onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
               component={StartPaymentView}
               donwloadPDFText={form.submissionReportDownloadLinkTitle}
             />
@@ -289,7 +285,6 @@ const Form = () => {
           <ErrorBoundary useCard>
             <ConfirmationView
               onFailure={onProcessingFailure}
-              onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
               downloadPDFText={form.submissionReportDownloadLinkTitle}
             />
           </ErrorBoundary>

src/components/PostCompletionViews/StartPaymentView.jsx

@@ -60,7 +60,7 @@ StartPaymentViewDisplay.propTypes = {
   downloadPDFText: PropTypes.node,
 };
 
-const StartPaymentView = ({onFailure, onConfirmed, downloadPDFText}) => {
+const StartPaymentView = ({onFailure, downloadPDFText}) => {
   const {statusUrl, submission} = useLocation().state || {};
   if (DEBUG) {
     if (!statusUrl) throw new Error('You must pass the status URL via the route state.');
@@ -69,19 +69,14 @@ const StartPaymentView = ({onFailure, onConfirmed, downloadPDFText}) => {
     }
   }
   return (
-    <StatusUrlPoller
-      statusUrl={statusUrl}
-      onFailure={error => onFailure(submission, error)}
-      onConfirmed={onConfirmed}
-    >
+    <StatusUrlPoller statusUrl={statusUrl} onFailure={error => onFailure(submission, error)}>
       <StartPaymentViewDisplay downloadPDFText={downloadPDFText} />
     </StatusUrlPoller>
   );
 };
 
 StartPaymentView.propTypes = {
   onFailure: PropTypes.func,
-  onConfirmed: PropTypes.func,
   downloadPDFText: PropTypes.node,
 };
 

src/components/ProgressIndicator/ProgressIndicatorItem.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
+import {useLocation} from 'react-router-dom';
 
 import Link from 'components/Link';
 import {getBEMClassName} from 'utils';
@@ -27,6 +28,7 @@ const getLinkModifiers = isActive => {
  * Once a step is completed, it is displayed with a completion checkmark in front of it.
  */
 const ProgressIndicatorItem = ({label, to, isActive, isCompleted, canNavigateTo, isApplicable}) => {
+  const location = useLocation();
   return (
     <div className={getBEMClassName('progress-indicator-item')}>
       <div className={getBEMClassName('progress-indicator-item__marker')}>
@@ -35,6 +37,7 @@ const ProgressIndicatorItem = ({label, to, isActive, isCompleted, canNavigateTo,
       <div className={getBEMClassName('progress-indicator-item__label')}>
         <Link
           to={to}
+          state={location.state}
           placeholder={!canNavigateTo}
           modifiers={canNavigateTo ? getLinkModifiers(isActive) : []}
           aria-label={label}