Merge pull request #628 from open-formulieren/feature/3726-payment-vi…

…ews-rework [OF#3726] Payment views rework
open-formulieren · Jan 10, 2024 · c4ea5f8 · c4ea5f8
2 parents 4bfec86 + 3622c59
commit c4ea5f8
Show file tree

Hide file tree

Showing 31 changed files with 859 additions and 746 deletions.
diff --git a/src/api-mocks/forms.js b/src/api-mocks/forms.js
@@ -5,7 +5,7 @@ import {PRIVACY_POLICY_ACCEPTED} from 'components/SummaryConfirmation/mocks';
 
 import {BASE_URL, getDefaultFactory} from './base';
 
-const FORM_DEFAULTS = {
+export const FORM_DEFAULTS = {
   uuid: 'e450890a-4166-410e-8d64-0a54ad30ba01',
   name: 'Mock form',
   slug: 'mock',

diff --git a/src/api-mocks/submissions.js b/src/api-mocks/submissions.js
@@ -84,7 +84,7 @@ export const mockSubmissionCheckLogicPost = () =>
   });
 
 /**
- * Simulate a succesful backend processing status without payment.
+ * Simulate a successful backend processing status without payment.
  */
 export const mockSubmissionProcessingStatusGet = rest.get(
   `${BASE_URL}submissions/:uuid/:token/status`,
@@ -97,7 +97,7 @@ export const mockSubmissionProcessingStatusGet = rest.get(
         publicReference: 'OF-L337',
         confirmationPageContent: `<p>Thank you for doing <span style="font-style: italic;">the thing</span>.`,
         reportDownloadUrl: '#',
-        paymentUrl: '',
+        paymentUrl: `${BASE_URL}payment/4b0e86a8-dc5f-41cc-b812-c89857b9355b/demo/start`,
         mainWebsiteUrl: '#',
       })
     )
@@ -136,3 +136,10 @@ export const mockSubmissionProcessingStatusErrorGet = rest.get(
       })
     )
 );
+
+export const mockSubmissionPaymentStartGet = rest.post(
+  `${BASE_URL}payment/:uuid/demo/start`,
+  (req, res, ctx) => {
+    return res(ctx.json({data: {method: 'get', action: 'https://example.com'}}));
+  }
+);
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -10,11 +10,10 @@ import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormStart from 'components/FormStart';
 import FormStep from 'components/FormStep';
 import Loader from 'components/Loader';
-import PaymentOverview from 'components/PaymentOverview';
+import {ConfirmationView, StartPaymentView} from 'components/PostCompletionViews';
 import ProgressIndicator from 'components/ProgressIndicator';
 import RequireSubmission from 'components/RequireSubmission';
 import {RequireSession} from 'components/Sessions';
-import SubmissionConfirmation from 'components/SubmissionConfirmation';
 import SubmissionSummary from 'components/Summary';
 import {START_FORM_QUERY_PARAM} from 'components/constants';
 import {findNextApplicableStep} from 'components/utils';
@@ -105,6 +104,7 @@ const Form = () => {
   // TODO replace absolute path check with relative
   const stepMatch = useMatch('/stap/:step');
   const summaryMatch = useMatch('/overzicht');
+  const paymentMatch = useMatch('/betalen');
   const confirmationMatch = useMatch('/bevestiging');
 
   // extract the declared properties and configuration
@@ -153,8 +153,6 @@ const Form = () => {
     [intl.locale, prevLocale, removeSubmissionId, state.submission] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const paymentOverviewMatch = useMatch('/betaaloverzicht');
-
   /**
    * When the form is started, create a submission and add it to the state.
    *
@@ -204,7 +202,12 @@ const Form = () => {
         processingStatusUrl,
       },
     });
-    navigate('/bevestiging');
+
+    if (form.paymentRequired && !state.submission.payment.hasPaid) {
+      navigate('/betalen');
+    } else {
+      navigate('/bevestiging');
+    }
   };
 
   const destroySession = async confirmationMessage => {
@@ -256,10 +259,11 @@ const Form = () => {
     return (
       <Navigate
         replace
-        to="/betaaloverzicht"
+        to="/bevestiging"
         state={{
           status: queryParams.get('of_payment_status'),
           userAction: queryParams.get('of_payment_action'),
+          statusUrl: queryParams.get('of_submission_status'),
         }}
       />
     );
@@ -271,13 +275,13 @@ const Form = () => {
 
   // Progress Indicator
 
-  const isStartPage = !summaryMatch && stepMatch == null && !confirmationMatch;
+  const isStartPage = !summaryMatch && stepMatch == null && !paymentMatch;
   const submissionAllowedSpec = state.submission?.submissionAllowed ?? form.submissionAllowed;
   const showOverview = submissionAllowedSpec !== SUBMISSION_ALLOWED.noWithoutOverview;
-  const showConfirmation = submissionAllowedSpec === SUBMISSION_ALLOWED.yes;
   const submission = state.submission || state.submittedSubmission;
   const isCompleted = state.completed;
   const formName = form.name;
+  const needsPayment = form.paymentRequired;
 
   // Figure out the slug from the currently active step IF we're looking at a step
   const stepSlug = stepMatch ? stepMatch.params.step : '';
@@ -288,8 +292,8 @@ const Form = () => {
     activeStepTitle = intl.formatMessage(STEP_LABELS.login);
   } else if (summaryMatch) {
     activeStepTitle = intl.formatMessage(STEP_LABELS.overview);
-  } else if (confirmationMatch) {
-    activeStepTitle = intl.formatMessage(STEP_LABELS.confirmation);
+  } else if (paymentMatch) {
+    activeStepTitle = intl.formatMessage(STEP_LABELS.payment);
   } else {
     const step = steps.find(step => step.slug === stepSlug);
     activeStepTitle = step.formDefinition;
@@ -324,14 +328,14 @@ const Form = () => {
     submission,
     currentPathname,
     showOverview,
-    showConfirmation,
+    needsPayment,
     isCompleted
   );
 
   // Show the progress indicator if enabled on the form AND we're not in the payment
-  // status/overview screen.
+  // confirmation screen.
   const progressIndicator =
-    form.showProgressIndicator && !paymentOverviewMatch ? (
+    form.showProgressIndicator && !confirmationMatch ? (
       <ProgressIndicator
         title={PI_TITLE}
         formTitle={formName}
@@ -380,26 +384,31 @@ const Form = () => {
       />
 
       <Route
-        path="bevestiging"
+        path="betalen"
         element={
           <ErrorBoundary useCard>
             <RequireSubmission
               submission={state.submittedSubmission}
               statusUrl={state.processingStatusUrl}
               onFailure={onProcessingFailure}
               onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
-              component={SubmissionConfirmation}
+              component={StartPaymentView}
               donwloadPDFText={form.submissionReportDownloadLinkTitle}
             />
           </ErrorBoundary>
         }
       />
 
       <Route
-        path="betaaloverzicht"
+        path="bevestiging"
         element={
           <ErrorBoundary useCard>
-            <PaymentOverview />
+            <ConfirmationView
+              statusUrl={state.processingStatusUrl}
+              onFailure={onProcessingFailure}
+              onConfirmed={() => dispatch({type: 'PROCESSING_SUCCEEDED'})}
+              downloadPDFText={form.submissionReportDownloadLinkTitle}
+            />
           </ErrorBoundary>
         }
       />

diff --git a/src/components/PaymentOverview/__snapshots__/test.spec.js.snap b/src/components/PaymentOverview/__snapshots__/test.spec.js.snap