👌 [open-formulieren/open-forms#180] PR Feedback

open-formulieren · Jan 29, 2024 · d8d8e81 · d8d8e81
1 parent fb21ee0
commit d8d8e81
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 45 deletions.
diff --git a/src/components/AbortionButton/AbortionButton.stories.js b/src/components/AbortionButton/AbortionButton.stories.js
@@ -1,5 +1,5 @@
 import {expect} from '@storybook/jest';
-import {waitFor, within} from '@storybook/testing-library';
+import {within} from '@storybook/testing-library';
 
 import {AnalyticsToolsDecorator} from 'story-utils/decorators';
 
@@ -37,10 +37,8 @@ export const GovMetricEnabled = {
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      const abortButton = await canvas.queryByRole('button', {name: 'Abort submission'});
-      await expect(abortButton).toBeVisible();
-    });
+    const abortButton = await canvas.findByRole('button', {name: 'Abort submission'});
+    await expect(abortButton).toBeVisible();
   },
 };
 
@@ -58,10 +56,8 @@ export const AuthenticatedAndGovmetric = {
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      const abortButton = await canvas.queryByRole('button', {name: 'Uitloggen'});
-      await expect(abortButton).toBeVisible();
-    });
+    const abortButton = await canvas.findByRole('button', {name: 'Uitloggen'});
+    await expect(abortButton).toBeVisible();
   },
 };
 
@@ -72,9 +68,7 @@ export const NotAuthenticatedNoGovMetric = {
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      const abortButton = await canvas.queryByRole('button');
-      await expect(abortButton).toBeNull();
-    });
+    const abortButton = await canvas.queryByRole('button');
+    await expect(abortButton).toBeNull();
   },
 };
diff --git a/src/components/FormStep/FormStep.stories.js b/src/components/FormStep/FormStep.stories.js
@@ -1,5 +1,5 @@
 import {expect} from '@storybook/jest';
-import {waitFor, within} from '@storybook/testing-library';
+import {within} from '@storybook/testing-library';
 import produce from 'immer';
 import {getWorker} from 'msw-storybook-addon';
 import {withRouter} from 'storybook-addon-react-router-v6';
@@ -168,9 +168,7 @@ export const govmetricEnabled = {
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      const abortButton = await canvas.queryByRole('button', {name: 'Abort submission'});
-      await expect(abortButton).toBeVisible();
-    });
+    const abortButton = await canvas.findByRole('button', {name: 'Abort submission'});
+    await expect(abortButton).toBeVisible();
   },
 };
diff --git a/src/components/FormStep/index.js b/src/components/FormStep/index.js
@@ -33,7 +33,7 @@ import {useNavigate, useParams} from 'react-router-dom';
 import {useAsync} from 'react-use';
 import {useImmerReducer} from 'use-immer';
 
-import {ConfigContext, FormioTranslations} from 'Context';
+import {AnalyticsToolsConfigContext, ConfigContext, FormioTranslations} from 'Context';
 import {get, post, put} from 'api';
 import AbortionButton from 'components/AbortionButton';
 import ButtonsToolbar from 'components/ButtonsToolbar';
@@ -304,6 +304,7 @@ const FormStep = ({
   const intl = useIntl();
   const config = useContext(ConfigContext);
   const formioTranslations = useContext(FormioTranslations);
+  const analyticsToolsConfig = useContext(AnalyticsToolsConfigContext);
 
   /* component state */
   const formRef = useRef(null);
@@ -819,6 +820,9 @@ const FormStep = ({
     dispatch({type: 'FORMIO_CHANGE_HANDLED'});
   };
 
+  const showExtraToolbar =
+    submission.isAuthenticated || analyticsToolsConfig.enableGovmetricAnalytics;
+
   const isLoadingSomething = loading || isNavigating;
   return (
     <>
@@ -879,14 +883,16 @@ const FormStep = ({
                 onNavigatePrevPage={onPrevPage}
                 previousPage={getPreviousPageHref()}
               />
-              <Toolbar modifiers={['bottom', 'reverse']}>
-                <ToolbarList>
-                  <AbortionButton
-                    isAuthenticated={submission.isAuthenticated}
-                    onDestroySession={onDestroySession}
-                  />
-                </ToolbarList>
-              </Toolbar>
+              {showExtraToolbar && (
+                <Toolbar modifiers={['bottom', 'reverse']}>
+                  <ToolbarList>
+                    <AbortionButton
+                      isAuthenticated={submission.isAuthenticated}
+                      onDestroySession={onDestroySession}
+                    />
+                  </ToolbarList>
+                </Toolbar>
+              )}
             </form>
           </>
         ) : null}

diff --git a/src/components/PostCompletionViews/ConfirmationView.stories.js b/src/components/PostCompletionViews/ConfirmationView.stories.js
@@ -1,5 +1,5 @@
 import {expect} from '@storybook/jest';
-import {waitFor, within} from '@storybook/testing-library';
+import {within} from '@storybook/testing-library';
 import {withRouter} from 'storybook-addon-react-router-v6';
 
 import {AnalyticsToolsDecorator, withForm, withSubmissionPollInfo} from 'story-utils/decorators';
@@ -9,7 +9,7 @@ import {ConfirmationViewDisplay} from './ConfirmationView';
 export default {
   title: 'Private API / Post completion views / Confirmation view',
   component: ConfirmationViewDisplay,
-  decorators: [withSubmissionPollInfo, withRouter, AnalyticsToolsDecorator, withForm],
+  decorators: [withForm, AnalyticsToolsDecorator, withSubmissionPollInfo, withRouter],
   argTypes: {
     paymentUrl: {control: false},
   },
@@ -105,12 +105,10 @@ export const WithGovMetric = {
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      const feedbackLink = await canvas.findByRole('link', {name: 'Give feedback'});
-      await expect(feedbackLink).toBeVisible();
-      await expect(feedbackLink.href).toEqual(
-        'https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=a-test-form'
-      );
-    });
+    const feedbackLink = await canvas.findByRole('link', {name: 'Give feedback'});
+    await expect(feedbackLink).toBeVisible();
+    await expect(feedbackLink.href).toEqual(
+      'https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=a-test-form'
+    );
   },
 };
diff --git a/src/components/Summary/GenericSummary.js b/src/components/Summary/GenericSummary.js
@@ -17,6 +17,7 @@ const GenericSummary = ({
   submissionAllowed,
   summaryData = [],
   showPaymentInformation,
+  showExtraToolbar,
   amountToPay,
   editStepText,
   isLoading,
@@ -61,14 +62,16 @@ const GenericSummary = ({
             prevPage={prevPage}
             onPrevPage={onPrevPage}
           />
-          <Toolbar modifiers={['bottom', 'reverse']}>
-            <ToolbarList>
-              <AbortionButton
-                isAuthenticated={isAuthenticated}
-                onDestroySession={onDestroySession}
-              />
-            </ToolbarList>
-          </Toolbar>
+          {showExtraToolbar && (
+            <Toolbar modifiers={['bottom', 'reverse']}>
+              <ToolbarList>
+                <AbortionButton
+                  isAuthenticated={isAuthenticated}
+                  onDestroySession={onDestroySession}
+                />
+              </ToolbarList>
+            </Toolbar>
+          )}
         </Wrapper>
       </Formik>
     </Card>
@@ -102,6 +105,7 @@ GenericSummary.propTypes = {
     })
   ),
   showPaymentInformation: PropTypes.bool,
+  showExtraToolbar: PropTypes.bool,
   amountToPay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   editStepText: PropTypes.string,
   isLoading: PropTypes.bool,

diff --git a/src/components/Summary/SubmissionSummary.js b/src/components/Summary/SubmissionSummary.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useNavigate} from 'react-router-dom';
 import {useAsync} from 'react-use';
 import {useImmerReducer} from 'use-immer';
 
+import {AnalyticsToolsConfigContext} from 'Context';
 import {post} from 'api';
 import {LiteralsProvider} from 'components/Literal';
 import {SUBMISSION_ALLOWED} from 'components/constants';
@@ -43,6 +44,7 @@ const SubmissionSummary = ({
   const [state, dispatch] = useImmerReducer(reducer, initialState);
   const navigate = useNavigate();
   const intl = useIntl();
+  const analyticsToolsConfig = useContext(AnalyticsToolsConfigContext);
 
   const refreshedSubmission = useRefreshSubmission(submission);
 
@@ -109,6 +111,9 @@ const SubmissionSummary = ({
     return errors;
   };
 
+  const showExtraToolbar =
+    refreshedSubmission.isAuthenticated || analyticsToolsConfig.enableGovmetricAnalytics;
+
   return (
     <LiteralsProvider literals={form.literals}>
       <GenericSummary
@@ -121,6 +126,7 @@ const SubmissionSummary = ({
         submissionAllowed={refreshedSubmission.submissionAllowed}
         summaryData={summaryData}
         showPaymentInformation={paymentInfo.isRequired && !paymentInfo.hasPaid}
+        showExtraToolbar={showExtraToolbar}
         amountToPay={paymentInfo.amount}
         editStepText={form.literals.changeText.resolved}
         isLoading={loading}