♻️ [open-formulieren/open-forms#4398] Cache initialDataReference to pass it with submissionCreate

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={<Navigate replace to={introductionPageContent ? 'introductie' : 'startpagina'} />}
  />
 
- <Route path="introductie" element={<IntroductionPage />} />
+ <Route
+ path="introductie"
+ // Ensure the initialDataReference is preserved when continuing to the Form start
+ element={<IntroductionPage extraParams={extraStartUrlParams} />}
+ />
 
  <Route
  path="startpagina"
@@ -370,6 +376,7 @@ const Form = () => {
  submission={state.submission}
  onFormStart={onFormStart}
  onDestroySession={onDestroySession}
+ initialDataReference={initialDataReference}
  />
  </ErrorBoundary>
  }

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}
  />
  ) : (
- <LoginOptions form={form} onFormStart={onFormStart} />
+ <LoginOptions
+ form={form}
+ onFormStart={onFormStart}
+ extraParams={{initial_data_reference: initialDataReference}}
+ />
  )}
  </Card>
  </LiteralsProvider>

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(
+ <Wrap>
+ <FormStart
+ form={testLoginForm}
+ onFormStart={onFormStart}
+ onDestroySession={onDestroySession}
+ initialDataReference="1234"
+ />
+ </Wrap>,
+ 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'
+ );
+});

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');
+ },
+};

src/components/IntroductionPage/index.js

@@ -9,11 +9,13 @@
 import FAIcon from 'components/FAIcon';
 import Link from 'components/Link';
 
-const IntroductionPage = () => {
+const IntroductionPage = ({extraParams = {}}) => {
  const {name, introductionPageContent = ''} = useContext(FormContext);
  if (!introductionPageContent) {
  return <Navigate replace to="startpagina" />;
  }
+ let startUrl = '/startpagina';
+ if (extraParams) startUrl = `${startUrl}?${new URLSearchParams(extraParams).toString()}`;
  return (
  <Card title={name}>
  <Body
@@ -23,7 +25,7 @@
  />
 
  <Link
- to="/startpagina"
+ to={startUrl}
  component={ButtonLink}
  appearance="primary-action-button"
  className="openforms-start-link"

src/components/LoginOptions/index.js

@@ -9,7 +9,7 @@ import Types from 'types';
 
 import LoginOptionsDisplay from './LoginOptionsDisplay';
 
-const LoginOptions = ({form, onFormStart}) => {
+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 = (
  <FormattedMessage
  description="Login button label"
@@ -81,6 +81,7 @@ const LoginOptions = ({form, onFormStart}) => {
 LoginOptions.propTypes = {
  form: Types.Form.isRequired,
  onFormStart: PropTypes.func.isRequired,
+ extraParams: PropTypes.object,
 };
 
 export default LoginOptions;