♻️ [#4398] Pass initial data ref to backend via login URL

previously it was attempted to grab this from the query params, but the parameter was not set anymore at the time it was actually needed (when sending the submission create request, after authentication)
open-formulieren · Oct 10, 2024 · 9386ee0 · 9386ee0
1 parent 8ba7da2
commit 9386ee0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -359,7 +359,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={{initial_data_reference: initialDataReference}} />}
+      />
 
       <Route
         path="startpagina"
@@ -370,6 +374,7 @@ const Form = () => {
               submission={state.submission}
               onFormStart={onFormStart}
               onDestroySession={onDestroySession}
+              initialDataReference={initialDataReference}
             />
           </ErrorBoundary>
         }

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

diff --git a/src/components/IntroductionPage/index.js b/src/components/IntroductionPage/index.js
@@ -8,11 +8,13 @@ import Body from 'components/Body';
 import Card from 'components/Card';
 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
@@ -21,7 +23,7 @@ const IntroductionPage = () => {
         dangerouslySetInnerHTML={{__html: introductionPageContent}}
       />
 
-      <Link to="/startpagina" component={ButtonLink} appearance="primary-action-button">
+      <Link to={startUrl} component={ButtonLink} appearance="primary-action-button">
         <FormattedMessage
           description="Button text for link to continue from introduction page to start page"
           defaultMessage="Continue ➜"

diff --git a/src/components/LoginOptions/index.js b/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;