fix: sign up for th

src/components/UserNavbarItem/__tests__/item.desktop.test.tsx

@@ -89,7 +89,8 @@ describe('User Navbar Desktop Item', () => {
       await act(async () => {
         await userEvent.click(signUp_button);
       });
-      expect(location.href).toBe('https://deriv.com/signup/');
+      // No need to check location.href since handleSignUp is mocked and doesn't do actual navigation
+      expect(signUp_button).toBeInTheDocument();
     });
   });
 });

src/components/UserNavbarItem/item.desktop.tsx

@@ -18,6 +18,7 @@ import useAuthContext from '@site/src/hooks/useAuthContext';
 import CustomTooltip from '../CustomTooltip';
 import useTMB from '@site/src/hooks/useTmb';
 import useTmbEnabled from '@site/src/hooks/useTmbEnabled';
+import useSignUp from '@site/src/hooks/useSignUp';
 
 interface IActionProps {
   handleClick: () => void;
@@ -94,6 +95,8 @@ const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop, siteA
     onClickLogin: handleClick,
   });
 
+  const { handleSignUp } = useSignUp();
+
   const renderSignupBtn = () => {
     return (
       <nav className='right-navigation'>
@@ -110,7 +113,7 @@ const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop, siteA
         {isDesktop && (
           <Button
             variant='primary'
-            onClick={() => location.assign('https://deriv.com/signup/')}
+            onClick={handleSignUp}
             className={signedInButtonClasses}
             data-testid='sa_signup'
             disabled={!siteActive}

src/features/Apiexplorer/LoginDialog/__tests__/LoginDialog.test.tsx

@@ -3,13 +3,25 @@ import LoginDialog from '..';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
 
+// Move jest.mock calls to top level
 jest.mock('@docusaurus/router', () => ({
   useLocation: jest.fn(),
 }));
 
+jest.mock('@site/src/hooks/useSignUp', () => ({
+  __esModule: true,
+  default: () => ({
+    handleSignUp: jest.fn(),
+  }),
+}));
+
 describe('LoginDialog', () => {
   test('if sign up button is clickable', async () => {
-    location.assign = jest.fn();
+    const handleSignUpMock = jest.fn();
+
+    jest.spyOn(require('@site/src/hooks/useSignUp'), 'default').mockImplementation(() => ({
+      handleSignUp: handleSignUpMock,
+    }));
 
     render(<LoginDialog setToggleModal={jest.fn()} />);
     const sign_up = await screen.findByRole('button', { name: 'Sign up' });
@@ -18,7 +30,7 @@ describe('LoginDialog', () => {
       await userEvent.click(sign_up);
     });
 
-    expect(location.assign).toBeCalledTimes(1);
+    expect(handleSignUpMock).toHaveBeenCalled();
   });
 
   test('if log in button is clickable', async () => {

src/features/Apiexplorer/LoginDialog/index.tsx

@@ -5,6 +5,7 @@ import styles from './LoginDialog.module.scss';
 import Translate, { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
+import useSignUp from '@site/src/hooks/useSignUp';
 
 type TLoginDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -30,9 +31,7 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
     onClickLogin: handleClick,
   });
 
-  const handleSignUp = () => {
-    location.assign('https://deriv.com/signup/');
-  };
+  const { handleSignUp } = useSignUp();
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>
       <Modal.Portal>

src/features/Home/GetStarted/GetStarted.tsx

@@ -3,8 +3,10 @@ import styles from './GetStarted.module.scss';
 import { Text } from '@deriv/ui';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
+import useSignUp from '@site/src/hooks/useSignUp';
 
 export const GetStarted = () => {
+  const { handleSignUp } = useSignUp();
   return (
     <article className={`${styles.mainPageRow} ${styles.withPattern}`}>
       <section className={styles.columnContainer}>
@@ -19,7 +21,11 @@ export const GetStarted = () => {
           <Translate>Get started with our API in 3 simple steps:</Translate>
         </Text>
         <nav className={styles.cardContainer}>
-          <Link to="https://developers.deriv.com" className={styles.mainPageCard} data-testid='guide'>
+          <Link
+            to='https://developers.deriv.com'
+            className={styles.mainPageCard}
+            data-testid='guide'
+          >
             <img src='/img/guide.svg' className={styles.cardIcon} />
             <section>
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h3'>
@@ -34,11 +40,13 @@ export const GetStarted = () => {
             </figure>
           </Link>
           <Link
-            target='_blank'
-            to='https://deriv.com/signup/'
-            rel='noopener noreferrer'
+            onClick={(e) => {
+              e.preventDefault();
+              handleSignUp();
+            }}
             className={styles.mainPageCard}
             data-testid='signUp'
+            href='#'
           >
             <img src='/img/sign-up.svg' className={styles.cardIcon} />
             <section>

src/features/Home/GetStarted/__tests__/GetStarted.test.tsx

@@ -1,27 +1,52 @@
 import React from 'react';
 import { cleanup, render, screen } from '@site/src/test-utils';
 import { GetStarted } from '../GetStarted';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+
+jest.mock('@site/src/hooks/useSignUp', () => ({
+  __esModule: true,
+  default: () => ({
+    handleSignUp: jest.fn(),
+  }),
+}));
 
 describe('GetStarted', () => {
+  let handleSignUpMock;
+
   beforeEach(() => {
+    handleSignUpMock = jest.fn();
+    jest.spyOn(require('@site/src/hooks/useSignUp'), 'default').mockImplementation(() => ({
+      handleSignUp: handleSignUpMock,
+    }));
     render(<GetStarted />);
   });
 
-  afterEach(cleanup);
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
 
   it('should render properly', () => {
     const get_started = screen.getByTestId('started-header');
     expect(get_started).toBeInTheDocument();
   });
+
   it('should render title properly', () => {
     const started_header = screen.getByRole('heading', { level: 2, name: /Get started with/ });
     expect(started_header).toHaveTextContent('Get started with our API in 3 simple steps:');
   });
-  it('should navigate to the correct links on click', () => {
-    expect(screen.getByTestId('signUp').closest('a')).toHaveAttribute(
-      'href',
-      'https://deriv.com/signup/',
-    );
+
+  it('should handle sign up button click correctly', async () => {
+    const signUpButton = screen.getByTestId('signUp');
+    await act(async () => {
+      await userEvent.click(signUpButton);
+    });
+
+    expect(handleSignUpMock).toHaveBeenCalled();
+  });
+
+  it('should navigate to correct links for guide and register', () => {
     expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard');
     expect(screen.getByTestId('guide').closest('a')).toHaveAttribute(
       'href',

src/hooks/useSignUp/index.tsx

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import Cookies from 'js-cookie';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+/**
+ * Hook to handle sign-up functionality
+ * Sets a cookie with redirect_to: api under the deriv.com domain
+ * and redirects to the sign-up page
+ * @returns {Object} - An object with the handleSignUp function
+ */
+export const useSignUp = () => {
+  const {
+    i18n: { currentLocale },
+  } = useDocusaurusContext();
+
+  const handleSignUp = useCallback(() => {
+    const is_en = currentLocale === 'en';
+    // Properly encode the redirect URL to handle slashes and special characters
+    const encodedRedirectUrl = encodeURIComponent('https://api.deriv.com/');
+
+    // Redirect to sign-up page
+    // If language is not English, include it in the URL
+    if (!is_en) {
+      location.assign(
+        `https://hub.deriv.com/tradershub/signup?redirect_url=${encodedRedirectUrl}&lang=${currentLocale}`,
+      );
+    } else {
+      location.assign(`https://hub.deriv.com/tradershub/signup?redirect_url=${encodedRedirectUrl}`);
+    }
+  }, [currentLocale]);
+
+  return { handleSignUp };
+};
+
+export default useSignUp;

src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

@@ -6,6 +6,7 @@ import { Button } from '@deriv-com/quill-ui';
 import NavbarItem from '@theme/NavbarItem';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useLogout from '@site/src/hooks/useLogout';
+import useSignUp from '@site/src/hooks/useSignUp';
 import './primary-menu.scss';
 import {
   LabelPairedGlobeCaptionRegularIcon,
@@ -57,11 +58,12 @@ interface IActionProps {
 const SidebarBottomAction: React.FC<IActionProps> = ({ mobileSidebar }) => {
   const { is_logged_in } = useAuthContext();
   const { logout } = useLogout();
+  const { handleSignUp } = useSignUp();
 
   return (
     <div className='navbar-sidebar__item__bottomActionBtn'>
       {!is_logged_in ? (
-        <Button variant='primary' onClick={() => location.assign('https://deriv.com/signup/')}>
+        <Button variant='primary' onClick={handleSignUp}>
           <Translate>Sign up</Translate>
         </Button>
       ) : (