From 39d2f14abec6cab33ce25563e3db9640c4b50beb Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 29 Jan 2024 12:48:19 +0100 Subject: [PATCH] :ok_hand: [open-formulieren/open-forms#180] PR Feedback --- .../AbortionButton/AbortionButton.stories.js | 20 ++++++---------- src/components/FormStep/FormStep.stories.js | 8 +++---- src/components/FormStep/index.js | 24 ++++++++++++------- .../ConfirmationView.stories.js | 16 ++++++------- src/components/Summary/GenericSummary.js | 20 +++++++++------- src/components/Summary/SubmissionSummary.js | 8 ++++++- 6 files changed, 51 insertions(+), 45 deletions(-) diff --git a/src/components/AbortionButton/AbortionButton.stories.js b/src/components/AbortionButton/AbortionButton.stories.js index 8e93c479e..6681a6ebe 100644 --- 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 index d58d2b786..63c9aeabc 100644 --- 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 index 9eac5c826..8ebbe5f7f 100644 --- 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()} /> - - - - - + {showExtraToolbar && ( + + + + + + )} ) : null} diff --git a/src/components/PostCompletionViews/ConfirmationView.stories.js b/src/components/PostCompletionViews/ConfirmationView.stories.js index a9b0ea6e1..1b6b02263 100644 --- 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 index 6b496df54..aaf42b80e 100644 --- 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} /> - - - - - + {showExtraToolbar && ( + + + + + + )} @@ -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 index 1e96ba9df..c80ca1926 100644 --- 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 = + submission.isAuthenticated || analyticsToolsConfig.enableGovmetricAnalytics; + return (