♻️ [open-formulieren/open-forms#4929] Ensure summary -> payment flow …

…isn't broken because of previous refactor

The Form component sometimes needs to grab the submission from the
router state too, in particular to render the payment start
page.

src/components/Form.jsx

@@ -97,7 +97,7 @@ const Form = () => {
   usePageViews();
   const intl = useIntl();
   const prevLocale = usePrevious(intl.locale);
-  const {pathname: currentPathname} = useLocation();
+  const {pathname: currentPathname, state: routerState} = useLocation();
 
   // TODO replace absolute path check with relative
   const introductionMatch = useMatch('/introductie');
@@ -201,7 +201,7 @@ const Form = () => {
   const isStartPage = !isIntroductionPage && !summaryMatch && stepMatch == null && !paymentMatch;
   const submissionAllowedSpec = state.submission?.submissionAllowed ?? form.submissionAllowed;
   const showOverview = submissionAllowedSpec !== SUBMISSION_ALLOWED.noWithoutOverview;
-  const submission = state.submission || state.submittedSubmission;
+  const submission = state.submission || (!!paymentMatch && routerState.submission) || null;
   const isCompleted = state.completed;
   const formName = form.name;
   const needsPayment = submission ? submission.payment.isRequired : form.paymentRequired;
@@ -281,7 +281,7 @@ const Form = () => {
         element={
           <ErrorBoundary useCard>
             <RequireSubmission
-              submission={state.submittedSubmission}
+              retrieveSubmissionFromContext
               onFailure={onProcessingFailure}
               onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
               component={StartPaymentView}

src/components/Form.spec.jsx

@@ -12,6 +12,7 @@ import {
   mockSubmissionGet,
   mockSubmissionPost,
   mockSubmissionProcessingStatusErrorGet,
+  mockSubmissionProcessingStatusGet,
   mockSubmissionStepGet,
   mockSubmissionSummaryGet,
 } from 'api-mocks/submissions';
@@ -191,3 +192,43 @@ test('Submitting the form with failing background processing', async () => {
   expect(await screen.findByRole('heading', {name: 'Check and confirm'})).toBeVisible();
   expect(screen.getByText('Computer says no.')).toBeVisible();
 });
+
+test.only('Submitting form with payment requirement', async () => {
+  const user = userEvent.setup({
+    advanceTimers: vi.advanceTimersByTime,
+  });
+  // The summary page submits the form and needs to trigger the appropriate redirects.
+  // When the status check reports failure, we need to be redirected back to the summary
+  // page for a retry.
+  const form = buildForm({loginRequired: false, submissionStatementsConfiguration: []});
+  const submission = buildSubmission({
+    submissionAllowed: SUBMISSION_ALLOWED.yes,
+    payment: {
+      isRequired: true,
+      amount: '42.69',
+      hasPaid: false,
+    },
+    MARKER: true,
+  });
+  mswServer.use(
+    mockAnalyticsToolConfigGet(),
+    mockSubmissionGet(submission),
+    mockSubmissionSummaryGet(),
+    mockSubmissionCompletePost(),
+    mockSubmissionProcessingStatusGet
+  );
+
+  render(<Wrapper form={form} initialEntry={`/overzicht?submission_uuid=${submission.id}`} />);
+  expect(await screen.findByRole('heading', {name: 'Check and confirm'})).toBeVisible();
+
+  // confirm the submission and complete it
+  vi.useFakeTimers();
+  await user.click(screen.getByRole('button', {name: 'Confirm'}));
+  expect(await screen.findByRole('heading', {name: 'Processing...'})).toBeVisible();
+  const loader = await screen.findByRole('status');
+  vi.runOnlyPendingTimers();
+  vi.useRealTimers();
+  await waitForElementToBeRemoved(loader);
+
+  expect(await screen.findByText('A payment is required for this product.')).toBeVisible();
+});