diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx index ed2ef47..9c83453 100644 --- a/src/components/LinkButton.tsx +++ b/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 ( + + ); + } + if (isExternal) { return ( @@ -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} diff --git a/src/components/MentorProfileCard.tsx b/src/components/MentorProfileCard.tsx index 1099d17..e0004fb 100644 --- a/src/components/MentorProfileCard.tsx +++ b/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 = ({ href={`/mentorship/mentee-registration?id=${mentor.id}`} reversed small + disabled={!IS_REGISTRATION_OPEN} > Apply for this mentor{' '} diff --git a/src/components/__tests__/MentorsProfileCard.tsx b/src/components/__tests__/MentorsProfileCard.tsx index 8f3af7b..e9fe854 100644 --- a/src/components/__tests__/MentorsProfileCard.tsx +++ b/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(); 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(); 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(); + expect( + screen.getByRole('button', { name: /apply for this mentor/i }), + ).toBeDisabled(); + }); });