feat: disable mentor apply button when registration is closed (#299)

src/components/LinkButton.tsx

@@ -6,6 +6,7 @@ type LinkButtonProps = {
   href: string;
   reversed?: boolean;
   small?: boolean;
+  disabled?: boolean;
   children: React.ReactNode;
   'data-testid'?: string;
 };
@@ -14,11 +15,37 @@ export const LinkButton = ({
   href,
   reversed,
   small,
+  disabled = false,
   children,
   'data-testid': dataTestId,
 }: LinkButtonProps) => {
   const isExternal = href.startsWith('https');
 
+  const buttonSx = {
+    backgroundColor: reversed ? '#fff' : 'primary.main',
+    color: reversed ? 'primary.main' : '#fff',
+    borderRadius: '100px',
+    textTransform: 'none',
+    fontWeight: 600,
+    fontSize: small ? '0.8rem' : '1rem',
+    padding: small ? '7px 16px' : '10px 32px',
+  };
+
+  if (disabled) {
+    return (
+      <Button
+        component="button"
+        type="button"
+        disabled
+        variant="contained"
+        data-testid={dataTestId}
+        sx={buttonSx}
+      >
+        {children}
+      </Button>
+    );
+  }
+
   if (isExternal) {
     return (
       <Button
@@ -28,15 +55,7 @@ export const LinkButton = ({
         rel="noopener noreferrer"
         variant="contained"
         data-testid={dataTestId}
-        sx={{
-          backgroundColor: reversed ? '#fff' : 'primary.main',
-          color: reversed ? 'primary.main' : '#fff',
-          borderRadius: '100px',
-          textTransform: 'none',
-          fontWeight: 600,
-          fontSize: '1rem',
-          padding: '10px 32px',
-        }}
+        sx={buttonSx}
       >
         {children}
       </Button>
@@ -49,16 +68,7 @@ export const LinkButton = ({
         component="a"
         variant="contained"
         data-testid={dataTestId}
-        sx={{
-          backgroundColor: reversed ? '#fff' : 'primary.main',
-          color: reversed ? 'primary.main' : '#fff',
-          borderRadius: '100px',
-          textTransform: 'none',
-          fontWeight: 600,
-          // width: small ? 'fit-content' : '100%',
-          fontSize: small ? '0.8rem' : '1rem',
-          padding: small ? '7px 16px' : '10px 32px',
-        }}
+        sx={buttonSx}
       >
         {children}
       </Button>

src/components/MentorProfileCard.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image';
 import React, { useState } from 'react';
 
 import { LinkButton } from '@components';
+import { IS_REGISTRATION_OPEN } from '@utils/mentorshipConstants';
 import { useIsMobile } from '@utils/theme-utils';
 import { Mentor, Network } from '@utils/types';
 
@@ -130,6 +131,7 @@ export const MentorProfileCard: React.FC<MentorProfileCardProps> = ({
           href={`/mentorship/mentee-registration?id=${mentor.id}`}
           reversed
           small
+          disabled={!IS_REGISTRATION_OPEN}
         >
           Apply for this mentor{' '}
         </LinkButton>

src/components/__tests__/MentorsProfileCard.tsx

@@ -70,7 +70,19 @@ const mockMentor: Mentor = {
   },
 };
 
+let mockIsRegistrationOpen = true;
+
+jest.mock('../../utils/mentorshipConstants', () => ({
+  ...jest.requireActual('../../utils/mentorshipConstants'),
+  get IS_REGISTRATION_OPEN() {
+    return mockIsRegistrationOpen;
+  },
+}));
+
 describe('MentorProfileCard', () => {
+  beforeEach(() => {
+    mockIsRegistrationOpen = true;
+  });
   it('renders mentor basic info', () => {
     render(<MentorProfileCard mentor={mockMentor} />);
     expect(screen.getByText('Test Mentor')).toBeInTheDocument();
@@ -115,10 +127,18 @@ describe('MentorProfileCard', () => {
     expect(screen.getAllByTestId('StarIcon').length).toBe(5);
   });
 
-  it('renders the Apply for this mentor button', () => {
+  it('renders the Apply for this mentor link when registration is open', () => {
     render(<MentorProfileCard mentor={mockMentor} />);
     expect(
-      screen.getByRole('link', { name: /Apply for this mentor/i }),
+      screen.getByRole('link', { name: /apply for this mentor/i }),
     ).toBeInTheDocument();
   });
+
+  it('disables Apply button when registration is closed', () => {
+    mockIsRegistrationOpen = false;
+    render(<MentorProfileCard mentor={mockMentor} />);
+    expect(
+      screen.getByRole('button', { name: /apply for this mentor/i }),
+    ).toBeDisabled();
+  });
 });