From 703519a031dae44ad62b032a40eab95a464ce555 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 17 Jan 2025 18:26:08 +0100
Subject: [PATCH] :recycle: [open-formulieren/open-forms#4929] Removed the need
 to track completion 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                               | 11 +++--------
 src/components/Form.spec.jsx                          |  2 +-
 .../PostCompletionViews/StartPaymentView.jsx          |  9 ++-------
 .../ProgressIndicator/ProgressIndicatorItem.jsx       |  3 +++
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/Form.jsx b/src/components/Form.jsx
index 8a924cdc1..71032e63a 100644
--- a/src/components/Form.jsx
+++ b/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>
diff --git a/src/components/Form.spec.jsx b/src/components/Form.spec.jsx
index 9464236fb..5af746a1f 100644
--- a/src/components/Form.spec.jsx
+++ b/src/components/Form.spec.jsx
@@ -236,7 +236,7 @@ test('Submitting the form with successful background processing', async () => {
   expect(await screen.findByRole('heading', {name: 'Confirmation: OF-L337'})).toBeVisible();
 });
 
-test.only('Submitting form with payment requirement', async () => {
+test('Submitting form with payment requirement', async () => {
   const user = userEvent.setup({
     advanceTimers: vi.advanceTimersByTime,
   });
diff --git a/src/components/PostCompletionViews/StartPaymentView.jsx b/src/components/PostCompletionViews/StartPaymentView.jsx
index fb0b3257a..150ccf342 100644
--- a/src/components/PostCompletionViews/StartPaymentView.jsx
+++ b/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,11 +69,7 @@ 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>
   );
@@ -81,7 +77,6 @@ const StartPaymentView = ({onFailure, onConfirmed, downloadPDFText}) => {
 
 StartPaymentView.propTypes = {
   onFailure: PropTypes.func,
-  onConfirmed: PropTypes.func,
   downloadPDFText: PropTypes.node,
 };
 
diff --git a/src/components/ProgressIndicator/ProgressIndicatorItem.jsx b/src/components/ProgressIndicator/ProgressIndicatorItem.jsx
index 9b7a08c56..f149cf7fa 100644
--- a/src/components/ProgressIndicator/ProgressIndicatorItem.jsx
+++ b/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}