Add mentor registration page

src/App.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Home from './components/Home/Home';
 import MainLayout from './components/Layout/MainLayout';
 import { UserContext, type UserContextType } from './contexts/UserContext';
+import MentorRegistrationPage from './components/MentorRegistrationPage';
 
 const App: React.FC = () => {
   const { user, getUser } = useContext(UserContext) as UserContextType;
@@ -15,9 +17,17 @@ const App: React.FC = () => {
     console.log(`user is authenticated as ${user.primary_email}`);
 
   return (
-    <MainLayout>
-      <Home />
-    </MainLayout>
+    <BrowserRouter>
+      <MainLayout>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route
+            path="/mentor-registration"
+            element={<MentorRegistrationPage />}
+          />
+        </Routes>
+      </MainLayout>
+    </BrowserRouter>
   );
 };
 

src/components/Layout/Navbar/Navbar.tsx

@@ -18,6 +18,7 @@ import {
   type UserContextType,
 } from './../../../contexts/UserContext';
 import LogoutModal from '../../LogoutModal';
+import { useNavigate } from 'react-router-dom';
 
 const { Text } = Typography;
 
@@ -27,6 +28,8 @@ const Navbar: React.FC = () => {
   const [isRegisterModalVisible, setIsRegisterModalVisible] = useState(false);
   const [isLogoutModalVisible, setIsLogoutModalVisible] = useState(false);
 
+  const navigate = useNavigate();
+
   const { user } = useContext(UserContext) as UserContextType;
 
   const handleLoginModalClose = (): void => {
@@ -53,6 +56,14 @@ const Navbar: React.FC = () => {
     setIsLogoutModalVisible(true);
   };
 
+  const handleMentorRegistration = (): void => {
+    if (user === null) {
+      handleLoginModalOpen();
+    } else {
+      navigate('/mentor-registration');
+    }
+  };
+
   return (
     <>
       <Row align={'middle'} justify={'start'}>
@@ -84,6 +95,12 @@ const Navbar: React.FC = () => {
                 <Text className={styles.antTypography}>Join Us</Text>
               </a>
             </div>
+            <Button
+              className={styles.loginButton}
+              onClick={handleMentorRegistration}
+            >
+              Become a Mentor
+            </Button>
           </Space>
         </Col>
         <Col md={4} lg={4} xl={3} className={styles.socialMediaContainer}>

src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx

@@ -0,0 +1,92 @@
+import { expect } from '@storybook/jest';
+import { waitFor, within } from '@storybook/testing-library';
+import { screen, fireEvent } from '@testing-library/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import MentorRegistrationPage from './';
+
+const meta: Meta<typeof MentorRegistrationPage> = {
+  component: MentorRegistrationPage,
+  title: 'Mentor Registration Page',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const firstNameInput = canvas.getByLabelText('First Name');
+    const lastNameInput = canvas.getByLabelText('Last Name');
+    const linkedinUrlInput = canvas.getByLabelText('LinkedIn URL');
+    const researchGateUrlInput = canvas.getByLabelText('ResearchGate URL');
+    const googleScholarUrlInput = canvas.getByLabelText('GoogleScholar URL');
+    const nextButton = canvas.getByText('Next');
+
+    fireEvent.change(firstNameInput, { target: { value: 'John' } });
+    fireEvent.change(lastNameInput, { target: { value: 'Doe' } });
+    fireEvent.change(linkedinUrlInput, {
+      target: { value: 'https://linkedin.com/johndoe' },
+    });
+    fireEvent.change(researchGateUrlInput, {
+      target: { value: 'https://researchgate.com/johndoe' },
+    });
+    fireEvent.change(googleScholarUrlInput, {
+      target: { value: 'https://scholar.google.com/johndoe' },
+    });
+
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Category')).toBeVisible();
+    });
+
+    const categorySelect = canvas.getByLabelText('Category');
+    const countryInput = canvas.getByLabelText('What is your country?');
+    const expertiseInput = canvas.getByLabelText('What is your expertise?');
+    const previousButton = canvas.getByText('Previous');
+
+    fireEvent.change(categorySelect, { target: { value: '1' } });
+    fireEvent.change(countryInput, { target: { value: 'United States' } });
+    fireEvent.change(expertiseInput, {
+      target: { value: 'Software Engineering' },
+    });
+
+    fireEvent.click(previousButton);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('LinkedIn URL')).toBeVisible();
+    });
+
+    fireEvent.click(nextButton);
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByLabelText('What is your mentoring strategy?')
+      ).toBeVisible();
+    });
+
+    const mentoringStrategyTextarea = canvas.getByLabelText(
+      'What is your mentoring strategy?'
+    );
+
+    fireEvent.change(mentoringStrategyTextarea, {
+      target: { value: 'I believe in personalized guidance.' },
+    });
+
+    const secondPreviousButton = canvas.getByText('Previous');
+    fireEvent.click(secondPreviousButton);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('What is your expertise?')).toBeVisible();
+    });
+
+    fireEvent.click(nextButton);
+    const submitButton = canvas.getByText('Submit');
+    fireEvent.click(submitButton);
+  },
+};