Fixed: Update final_action_with_optional_button and Final component (#…

…1000)

* chore: Update final_action_with_optional_button to handle and add participant_id_url in redirect URL if participant has participant_id_url

* refactor: Update Final component to use Link instead of anchor tag for button navigation

backend/experiment/actions/utils.py

@@ -15,14 +15,21 @@ def final_action_with_optional_button(session, final_text='', title=_('End'), bu
     return a Final.action, which has a button to continue to the next experiment if series is defined
     """
     collection_slug = session.load_json_data().get(COLLECTION_KEY)
+
+    if session.participant.participant_id_url:
+        participant_id_url = session.participant.participant_id_url
+        redirect_url = f'/collection/{collection_slug}?participant_id_url={participant_id_url}'
+    else:
+        redirect_url = f'/collection/{collection_slug}'
+
     if collection_slug:
         return Final(
             title=title,
             session=session,
             final_text=final_text,
             button={
                 'text': button_text,
-                'link': f'/collection/{collection_slug}'
+                'link': redirect_url
             }
         )
     else:

frontend/src/components/Final/Final.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { withRouter } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 
 import Rank from "../Rank/Rank";
 import Social from "../Social/Social";
@@ -65,9 +65,9 @@ const Final = ({ experiment, participant, score, final_text, action_texts, butto
             </div>
             {button && (
                 <div className="text-center pt-4">
-                    <a className='btn btn-primary btn-lg' href={button.link} onClick={button.link ? undefined : onNext}>
+                    <Link className='btn btn-primary btn-lg' to={button.link} onClick={button.link ? undefined : onNext}>
                         {button.text}
-                    </a>
+                    </Link>
                 </div>
             )}
             {logo && (