✨ [open-formulieren/open-forms#4320] Make it possible to let the back…

…end drive the content of the confirmation page more Added example with simulated backend data for the cosign confirmation page.
open-formulieren · Nov 18, 2024 · 65681e0 · 65681e0
1 parent 14bbe90
commit 65681e0
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 8 deletions.
diff --git a/src/components/PostCompletionViews/ConfirmationView.jsx b/src/components/PostCompletionViews/ConfirmationView.jsx
@@ -44,8 +44,13 @@ const ConfirmationViewDisplay = ({downloadPDFText}) => {
   const paymentStatus = location?.state?.status;
   const userAction = location?.state?.userAction;
 
-  const {publicReference, reportDownloadUrl, confirmationPageContent, mainWebsiteUrl} =
-    useContext(SubmissionStatusContext);
+  const {
+    publicReference,
+    reportDownloadUrl,
+    confirmationPageTitle,
+    confirmationPageContent,
+    mainWebsiteUrl,
+  } = useContext(SubmissionStatusContext);
 
   const paymentStatusMessage = STATUS_MESSAGES[paymentStatus];
   let Wrapper = React.Fragment;
@@ -80,11 +85,13 @@ const ConfirmationViewDisplay = ({downloadPDFText}) => {
         defaultMessage: 'Confirmation',
       })}
       header={
-        <FormattedMessage
-          description="Confirmation page title"
-          defaultMessage="Confirmation: {reference}"
-          values={{reference: publicReference}}
-        />
+        confirmationPageTitle || (
+          <FormattedMessage
+            description="Confirmation page title"
+            defaultMessage="Confirmation: {reference}"
+            values={{reference: publicReference}}
+          />
+        )
       }
       body={body}
       mainWebsiteUrl={mainWebsiteUrl}

diff --git a/src/components/PostCompletionViews/ConfirmationViewCosign.stories.js b/src/components/PostCompletionViews/ConfirmationViewCosign.stories.js
@@ -0,0 +1,62 @@
+import {withRouter} from 'storybook-addon-remix-react-router';
+
+import {buildForm} from 'api-mocks';
+import {AnalyticsToolsDecorator, withForm, withSubmissionPollInfo} from 'story-utils/decorators';
+
+import {ConfirmationViewDisplay} from './ConfirmationView';
+
+export default {
+  title: 'Views / Cosign / Submission completed',
+  component: ConfirmationViewDisplay,
+  decorators: [withForm, AnalyticsToolsDecorator, withSubmissionPollInfo, withRouter],
+  args: {
+    publicReference: 'OF-1234',
+    reportDownloadUrl: '/dummy',
+    confirmationPageTitle: 'Request incomplete',
+    confirmationPageContent: `
+      <p>Your request is not yet complete.</p>
+      <h2>Cosigning required</h2>
+      <p>
+        We've sent an email with a cosign request to
+        <a href="mailto:[email protected]">[email protected]</a>. Once the submission has
+        been cosigned we will start processing your request.
+      </p>
+      <p>
+        If you need to contact us about this submission, you can use the reference
+        <strong>OF-1234</strong>.
+      </p>
+      `,
+    mainWebsiteUrl: 'https://example.com',
+    paymentUrl: '',
+  },
+  argTypes: {
+    paymentUrl: {control: false},
+  },
+  parameters: {
+    formContext: {
+      form: buildForm({
+        cosignLoginOptions: [
+          {
+            identifier: 'digid',
+            label: 'DigiD',
+            url: 'http://localhost:8000/auth/digid/?next=http://localhost:8000/cosign&amp;code=123',
+            logo: {
+              title: 'DigiD simulatie',
+              imageSrc: './digid.png',
+              href: 'https://www.digid.nl/',
+              appearance: 'dark',
+            },
+            isForGemachtigde: false,
+          },
+        ],
+      }),
+    },
+    reactRouter: {
+      location: {state: {}},
+    },
+  },
+};
+
+export const Default = {
+  name: 'Submission completed',
+};
diff --git a/src/components/PostCompletionViews/StatusUrlPoller.jsx b/src/components/PostCompletionViews/StatusUrlPoller.jsx
@@ -11,7 +11,14 @@ import usePoll from 'hooks/usePoll';
 const RESULT_FAILED = 'failed';
 const RESULT_SUCCESS = 'success';
 
-const SubmissionStatusContext = React.createContext();
+const SubmissionStatusContext = React.createContext({
+  publicReference: '',
+  paymentUrl: '',
+  reportDownloadUrl: '',
+  confirmationPageTitle: '',
+  confirmationPageContent: '',
+  mainWebsiteUrl: '',
+});
 SubmissionStatusContext.displayName = 'SubmissionStatusContext';
 
 const StatusUrlPoller = ({statusUrl, onFailure, onConfirmed, children}) => {
@@ -74,6 +81,7 @@ const StatusUrlPoller = ({statusUrl, onFailure, onConfirmed, children}) => {
     paymentUrl,
     publicReference,
     reportDownloadUrl,
+    confirmationPageTitle,
     confirmationPageContent,
     mainWebsiteUrl,
   } = statusResponse;
@@ -88,6 +96,7 @@ const StatusUrlPoller = ({statusUrl, onFailure, onConfirmed, children}) => {
         publicReference,
         paymentUrl,
         reportDownloadUrl,
+        confirmationPageTitle,
         confirmationPageContent,
         mainWebsiteUrl,
       }}

diff --git a/src/story-utils/decorators.jsx b/src/story-utils/decorators.jsx
@@ -158,6 +158,7 @@ export const withSubmissionPollInfo = (Story, {parameters, args}) => {
         publicReference: args.publicReference,
         paymentUrl: args.paymentUrl,
         reportDownloadUrl: args.reportDownloadUrl,
+        confirmationPageTitle: args.confirmationPageTitle,
         confirmationPageContent: args.confirmationPageContent,
         mainWebsiteUrl: args.mainWebsiteUrl,
       }}