diff --git a/frontend/src/components/App/App.tsx b/frontend/src/components/App/App.tsx
index 9563c413e..e8bd2809a 100644
--- a/frontend/src/components/App/App.tsx
+++ b/frontend/src/components/App/App.tsx
@@ -18,6 +18,7 @@ import Profile from "../Profile/Profile";
import Reload from "../Reload/Reload";
import StoreProfile from "../StoreProfile/StoreProfile";
import useDisableRightClickOnTouchDevices from "../../hooks/useDisableRightClickOnTouchDevices";
+import { InternalRedirect } from "../InternalRedirect/InternalRedirect";
// App is the root component of our application
@@ -75,6 +76,8 @@ const App = () => {
+
+
{/* Experiment Collection */}
diff --git a/frontend/src/components/Final/Final.test.jsx b/frontend/src/components/Final/Final.test.jsx
index 74cb195df..4368ddf65 100644
--- a/frontend/src/components/Final/Final.test.jsx
+++ b/frontend/src/components/Final/Final.test.jsx
@@ -146,7 +146,7 @@ session="session-id"
const el = screen.getByTestId('button-link');
expect(el).to.exist;
- expect(el.getAttribute('href')).toBe('/aml');
+ expect(el.getAttribute('href')).toBe('/redirect/aml');
});
it('Uses an anchor tag to navigate when button link is absolute', () => {
@@ -162,4 +162,21 @@ session="session-id"
expect(el).to.exist;
expect(el.getAttribute('href')).toBe('https://example.com');
});
+
+ it('Calls onNext when there is no button link and the user clicks the button', async () => {
+ const onNextMock = vi.fn();
+ render(
+
+
+
+ );
+
+ fireEvent.click(screen.getByTestId('button'));
+ await waitFor(() => {
+ expect(onNextMock).toHaveBeenCalled();
+ });
+ });
});
diff --git a/frontend/src/components/Final/FinalButton.tsx b/frontend/src/components/Final/FinalButton.tsx
index 816b1db6a..e37110664 100644
--- a/frontend/src/components/Final/FinalButton.tsx
+++ b/frontend/src/components/Final/FinalButton.tsx
@@ -30,8 +30,10 @@ const FinalButton: React.FC = ({ button, onNext }) => {
// If the button has a link, it will render a Link component if the link is a relative URL
if (isRelativeUrl(button.link)) {
+ const url = `/redirect${button.link}`
+
return (
-
+
{button.text}
)
diff --git a/frontend/src/components/InternalRedirect/InternalRedirect.tsx b/frontend/src/components/InternalRedirect/InternalRedirect.tsx
new file mode 100644
index 000000000..c6b00ad2e
--- /dev/null
+++ b/frontend/src/components/InternalRedirect/InternalRedirect.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
+
+// this component is a route, so it will receive the route props
+interface InternalRedirectProps extends RouteComponentProps {}
+
+export const InternalRedirect: React.FC = (props) => {
+ const { path } = props.match.params as { path: string };
+ const { search } = props.location;
+
+ // Redirect to the experiment path
+ return ;
+}
\ No newline at end of file
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index b3461f5f6..d91b37c9f 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -31,6 +31,7 @@ export const URLS = {
experiment: "/:slug",
experimentCollectionAbout: "/collection/:slug/about",
experimentCollection: "/collection/:slug",
+ internalRedirect: "/redirect/:path",
reloadParticipant: "/participant/reload/:id/:hash",
theme: "/theme/:id",
AMLHome: