diff --git a/src/components/Form.js b/src/components/Form.js index d43c0056d..0fbf47d97 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -350,6 +350,8 @@ const Form = () => { ) : null; if (state.startingError) throw state.startingError; + const extraStartUrlParams = {}; + if (initialDataReference) extraStartUrlParams.initial_data_reference = initialDataReference; // Route the correct page based on URL const router = ( @@ -359,7 +361,11 @@ const Form = () => { element={} /> - } /> + } + /> { submission={state.submission} onFormStart={onFormStart} onDestroySession={onDestroySession} + initialDataReference={initialDataReference} /> } diff --git a/src/components/FormStart/index.js b/src/components/FormStart/index.js index ae0fc9679..70acd9940 100644 --- a/src/components/FormStart/index.js +++ b/src/components/FormStart/index.js @@ -41,7 +41,7 @@ const FormStartMessage = ({form}) => { * This is shown when the form is initially loaded and provides the explicit user * action to start the form, or present the login button (DigiD, eHerkenning...) */ -const FormStart = ({form, submission, onFormStart, onDestroySession}) => { +const FormStart = ({form, submission, onFormStart, onDestroySession, initialDataReference}) => { const hasActiveSubmission = !!submission; const isAuthenticated = hasActiveSubmission && submission.isAuthenticated; const doStart = useStartSubmission(); @@ -121,7 +121,11 @@ const FormStart = ({form, submission, onFormStart, onDestroySession}) => { isAuthenticated={isAuthenticated} /> ) : ( - + )} diff --git a/src/components/FormStart/tests.spec.js b/src/components/FormStart/tests.spec.js index b648ecbba..f837d88e3 100644 --- a/src/components/FormStart/tests.spec.js +++ b/src/components/FormStart/tests.spec.js @@ -10,7 +10,7 @@ import {buildSubmission} from 'api-mocks'; import useQuery from 'hooks/useQuery'; import FormStart from '.'; -import {testForm} from './fixtures'; +import {testForm, testLoginForm} from './fixtures'; jest.mock('hooks/useQuery'); let scrollIntoViewMock = jest.fn(); @@ -116,3 +116,26 @@ it('Form start page does not show login buttons if an active submission is prese expect(screen.queryByRole('button', {name: 'Continue existing submission'})).toBeInTheDocument(); expect(screen.queryByRole('button', {name: 'Abort submission'})).toBeInTheDocument(); }); + +it('Form start page with initial_data_reference', () => { + useQuery.mockReturnValue(new URLSearchParams()); + const onFormStart = jest.fn(); + const onDestroySession = jest.fn(); + + renderTest( + + + , + container + ); + const loginLink = screen.getByRole('link', {name: 'Login with DigiD'}); + expect(loginLink).toHaveAttribute( + 'href', + 'https://openforms.nl/auth/form-name/digid/start?initial_data_reference=1234&next=http%3A%2F%2Flocalhost%2F%3F_start%3D1' + ); +}); diff --git a/src/components/IntroductionPage/IntroductionPage.stories.js b/src/components/IntroductionPage/IntroductionPage.stories.js index 75426d914..1df91fcc2 100644 --- a/src/components/IntroductionPage/IntroductionPage.stories.js +++ b/src/components/IntroductionPage/IntroductionPage.stories.js @@ -1,3 +1,4 @@ +import {expect, userEvent, within} from '@storybook/test'; import {withRouter} from 'storybook-addon-remix-react-router'; import {buildForm} from 'api-mocks'; @@ -48,3 +49,15 @@ export default { export const Default = { name: 'IntroductionPage', }; + +export const IntroductionPageWithInitialDataReference = { + name: 'IntroductionPage with initial data reference', + args: { + extraParams: {initial_data_reference: '1234'}, + }, + play: async ({canvasElement}) => { + const canvas = within(canvasElement); + const continueLink = canvas.getByRole('link', {name: 'Continue'}); + await expect(continueLink).toHaveAttribute('href', '/startpagina?initial_data_reference=1234'); + }, +}; diff --git a/src/components/IntroductionPage/index.js b/src/components/IntroductionPage/index.js index af64e0694..0b6cb6ee0 100644 --- a/src/components/IntroductionPage/index.js +++ b/src/components/IntroductionPage/index.js @@ -9,11 +9,13 @@ import Card from 'components/Card'; import FAIcon from 'components/FAIcon'; import Link from 'components/Link'; -const IntroductionPage = () => { +const IntroductionPage = ({extraParams = {}}) => { const {name, introductionPageContent = ''} = useContext(FormContext); if (!introductionPageContent) { return ; } + let startUrl = '/startpagina'; + if (extraParams) startUrl = `${startUrl}?${new URLSearchParams(extraParams).toString()}`; return ( { /> { +const LoginOptions = ({form, onFormStart, extraParams = {}}) => { const config = useContext(ConfigContext); const loginAsYourselfOptions = []; @@ -18,7 +18,7 @@ const LoginOptions = ({form, onFormStart}) => { form.loginOptions.forEach(option => { let readyOption = {...option}; - readyOption.url = getLoginUrl(option); + readyOption.url = getLoginUrl(option, extraParams); readyOption.label = ( { LoginOptions.propTypes = { form: Types.Form.isRequired, onFormStart: PropTypes.func.isRequired, + extraParams: PropTypes.object, }; export default LoginOptions;