React router upgrade part 3

.storybook/main.mts

@@ -17,7 +17,6 @@ const config: StorybookConfig = {
     'storybook-react-intl',
     'storybook-addon-remix-react-router',
     '@storybook/addon-coverage',
-    '@storybook/addon-webpack5-compiler-babel',
   ],
   framework: {
     name: '@storybook/react-vite',

package.json

@@ -115,10 +115,10 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test-runner": "^0.20.0",
     "@storybook/types": "^8.4.7",
-    "@testing-library/dom": ">=8.20.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@utrecht/component-library-css": "1.0.0-alpha.604",
     "@utrecht/component-library-react": "1.0.0-alpha.353",

src/api-mocks/submissions.js

@@ -73,9 +73,9 @@
     return HttpResponse.json(submission, {status: 201});
   });
 
-export const mockSubmissionGet = () =>
+export const mockSubmissionGet = (submission = buildSubmission()) =>
   http.get(`${BASE_URL}submissions/:uuid`, () => {
-    return HttpResponse.json(SUBMISSION_DETAILS, {status: 200});
+    return HttpResponse.json(submission, {status: 200});
   });
 
 export const mockSubmissionStepGet = () =>
@@ -112,6 +112,13 @@
     )
   );
 
+export const mockSubmissionCompletePost = () =>
+  http.post(`${BASE_URL}submissions/:uuid/_complete`, () =>
+    HttpResponse.json({
+      statusUrl: `${BASE_URL}submissions/${SUBMISSION_DETAILS.id}/super-random-token/status`,
+    })
+  );
+
 /**
  * Simulate a successful backend processing status without payment.
  */
@@ -160,6 +167,6 @@
     })
 );
 
-export const mockSubmissionPaymentStartGet = http.post(`${BASE_URL}payment/:uuid/demo/start`, () =>
-  HttpResponse.json({data: {method: 'get', action: 'https://example.com'}})
-);
+export const mockSubmissionPaymentStartPost = (
+  data = {type: 'get', url: 'https://example.com', data: {}}
+) => http.post(`${BASE_URL}payment/:uuid/demo/start`, () => HttpResponse.json(data));

src/components/Form.jsx

@@ -9,6 +9,7 @@
   useLocation,
   useMatch,
   useNavigate,
+  useSearchParams,
 } from 'react-router-dom';
 import {useAsync, usePrevious} from 'react-use';
 import {useImmerReducer} from 'use-immer';
@@ -20,8 +21,6 @@
 import {ConfirmationView, StartPaymentView} from 'components/PostCompletionViews';
 import ProgressIndicator from 'components/ProgressIndicator';
 import RequireSubmission from 'components/RequireSubmission';
-import {SessionTrackerModal} from 'components/Sessions';
-import {SubmissionSummary} from 'components/Summary';
 import {
   PI_TITLE,
   START_FORM_QUERY_PARAM,
@@ -32,7 +31,6 @@
 import useAutomaticRedirect from 'hooks/useAutomaticRedirect';
 import useFormContext from 'hooks/useFormContext';
 import usePageViews from 'hooks/usePageViews';
-import useQuery from 'hooks/useQuery';
 import useRecycleSubmission from 'hooks/useRecycleSubmission';
 import Types from 'types';
 
@@ -41,11 +39,7 @@
 
 const initialState = {
   submission: null,
-  submittedSubmission: null,
-  processingStatusUrl: '',
-  processingError: '',
   completed: false,
-  startingError: '',
 };
 
 const reducer = (draft, action) => {
@@ -56,29 +50,16 @@
       draft.submission = action.payload;
       break;
     }
-    case 'SUBMITTED': {
-      return {
-        ...initialState,
-        submittedSubmission: action.payload.submission,
-        processingStatusUrl: action.payload.processingStatusUrl,
-      };
-    }
     case 'PROCESSING_FAILED': {
-      // set the error message in the state
-      draft.processingError = action.payload;
-      // put the submission back in the state as well, so we can re-submit
-      draft.submission = draft.submittedSubmission;
+      // put the submission back in the state so we can re-submit
+      const {submission} = action.payload;
+      draft.submission = submission;
       break;
     }
     case 'PROCESSING_SUCCEEDED': {
-      draft.processingError = null;
       draft.completed = true;
       break;
     }
-    case 'CLEAR_PROCESSING_ERROR': {
-      draft.processingError = '';
-      break;
-    }
     case 'DESTROY_SUBMISSION': {
       return {
         ...initialState,
@@ -88,10 +69,6 @@
       const initialState = action.payload;
       return initialState;
     }
-    case 'STARTING_ERROR': {
-      draft.startingError = action.payload;
-      break;
-    }
     default: {
       throw new Error(`Unknown action ${action.type}`);
     }
@@ -110,11 +87,11 @@
   const form = useFormContext();
   const navigate = useNavigate();
   const shouldAutomaticallyRedirect = useAutomaticRedirect(form);
-  const queryParams = useQuery();
+  const [params] = useSearchParams();
   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');
@@ -175,23 +152,6 @@
     setSubmissionId(submission.id);
   };
 
-  const onSubmitForm = processingStatusUrl => {
-    removeSubmissionId();
-    dispatch({
-      type: 'SUBMITTED',
-      payload: {
-        submission: state.submission,
-        processingStatusUrl,
-      },
-    });
-
-    if (submission?.payment.isRequired && !state.submission.payment.hasPaid) {
-      navigate('/betalen');
-    } else {
-      navigate('/bevestiging');
-    }
-  };
-
   const onDestroySession = async () => {
     await destroy(`${config.baseUrl}authentication/${state.submission.id}/session`);
 
@@ -203,24 +163,23 @@
     navigate('/');
   };
 
-  const onProcessingFailure = errorMessage => {
-    // TODO: provide generic fallback message in case no explicit
-    // message is shown
-    dispatch({type: 'PROCESSING_FAILED', payload: errorMessage});
-    navigate('/overzicht');
+  const onProcessingFailure = (submission, errorMessage) => {
+    dispatch({type: 'PROCESSING_FAILED', payload: {submission}});
+    navigate('/overzicht', {state: {errorMessage}});
   };
 
   // handle redirect from payment provider to render appropriate page and include the
   // params as state for the next component.
-  if (queryParams.get('of_payment_status')) {
+  if (params.get('of_payment_status')) {
+    // TODO: store details in sessionStorage instead, to survive hard refreshes
     return (
       <Navigate
         replace
         to="/bevestiging"
         state={{
-          status: queryParams.get('of_payment_status'),
-          userAction: queryParams.get('of_payment_action'),
-          statusUrl: queryParams.get('of_submission_status'),
+          status: params.get('of_payment_status'),
+          userAction: params.get('of_payment_action'),
+          statusUrl: params.get('of_submission_status'),
         }}
       />
     );
@@ -236,7 +195,7 @@
   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;
@@ -306,37 +265,15 @@
       />
     ) : null;
 
-  if (state.startingError) throw state.startingError;
-
   // Route the correct page based on URL
   const router = (
     <Routes>
-      <Route
-        path="overzicht"
-        element={
-          <ErrorBoundary useCard>
-            <SessionTrackerModal>
-              <RequireSubmission
-                retrieveSubmissionFromContext
-                processingError={state.processingError}
-                onConfirm={onSubmitForm}
-                component={SubmissionSummary}
-                onClearProcessingErrors={() => dispatch({type: 'CLEAR_PROCESSING_ERROR'})}
-                onDestroySession={onDestroySession}
-                form={form}
-              />
-            </SessionTrackerModal>
-          </ErrorBoundary>
-        }
-      />
-
       <Route
         path="betalen"
         element={
           <ErrorBoundary useCard>
             <RequireSubmission
-              submission={state.submittedSubmission}
-              statusUrl={state.processingStatusUrl}
+              retrieveSubmissionFromContext
               onFailure={onProcessingFailure}
               onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
               component={StartPaymentView}
@@ -351,7 +288,6 @@
         element={
           <ErrorBoundary useCard>
             <ConfirmationView
-              statusUrl={state.processingStatusUrl}
               onFailure={onProcessingFailure}
               onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
               downloadPDFText={form.submissionReportDownloadLinkTitle}
@@ -370,6 +306,7 @@
           submission={state.submission}
           onSubmissionObtained={onSubmissionObtained}
           onDestroySession={onDestroySession}
+          removeSubmissionId={removeSubmissionId}
         >
           <Outlet />
           {router}
@@ -385,23 +322,42 @@
   submission: null,
   onSubmissionObtained: () => {},
   onDestroySession: () => {},
+  removeSubmissionId: () => {},
 });
 
 const SubmissionProvider = ({
   submission = null,
   onSubmissionObtained,
   onDestroySession,
+  removeSubmissionId,
   children,
 }) => (
-  <SubmissionContext.Provider value={{submission, onSubmissionObtained, onDestroySession}}>
+  <SubmissionContext.Provider
+    value={{submission, onSubmissionObtained, onDestroySession, removeSubmissionId}}
+  >
     {children}
   </SubmissionContext.Provider>
 );
 
 SubmissionProvider.propTypes = {
+  /**
+   * The submission currently being filled out / submitted / viewed. It must exist in
+   * the backend session.
+   */
   submission: Types.Submission,
+  /**
+   * Callback for when a submission was (re-)loaded to store it in the state.
+   */
   onSubmissionObtained: PropTypes.func.isRequired,
+  /**
+   * Callback for when an abort/logout/stop button is clicked which terminates the
+   * form submission / session.
+   */
   onDestroySession: PropTypes.func.isRequired,
+  /**
+   * Callback to remove the submission reference (it's ID) from the local storage.
+   */
+  removeSubmissionId: PropTypes.func.isRequired,
 };
 
 const useSubmissionContext = () => useContext(SubmissionContext);