feat: Create alert for paid plans

src/pages/RepoPage/ActivationAlert/ActivationAlert.spec.tsx

@@ -7,6 +7,8 @@ import { MemoryRouter, Route } from 'react-router-dom'
 import ActivationAlert from './ActivationAlert'
 
 jest.mock('./FreePlanSeatsTakenAlert', () => () => 'FreePlanSeatsTakenAlert')
+jest.mock('./PaidPlanSeatsTakenAlert', () => () => 'PaidPlanSeatsTakenAlert')
+jest.mock('./ActivationRequiredAlert', () => () => 'ActivationRequiredAlert')
 jest.mock('./UnauthorizedRepoDisplay', () => () => 'UnauthorizedRepoDisplay')
 
 const queryClient = new QueryClient()
@@ -100,4 +102,24 @@ describe('ActivationAlert', () => {
     )
     expect(freePlanSeatsTakenAlert).toBeInTheDocument()
   })
+
+  it('renders PaidPlanSeatsTakenAlert when on paid plan and no seats left', async () => {
+    setup(false, 'users-pro', false)
+    render(<ActivationAlert />, { wrapper })
+
+    const paidPlanSeatsTakenAlert = await screen.findByText(
+      /PaidPlanSeatsTakenAlert/
+    )
+    expect(paidPlanSeatsTakenAlert).toBeInTheDocument()
+  })
+
+  it('renders ActivationRequiredAlert when on paid plan and some seats left', async () => {
+    setup(false, 'users-pro', true)
+    render(<ActivationAlert />, { wrapper })
+
+    const activationRequiredAlert = await screen.findByText(
+      /ActivationRequiredAlert/
+    )
+    expect(activationRequiredAlert).toBeInTheDocument()
+  })
 })

src/pages/RepoPage/ActivationAlert/ActivationAlert.tsx

@@ -3,7 +3,10 @@
 import { usePlanData } from 'services/account'
 import { isFreePlan } from 'shared/utils/billing'
 
+import ActivationRequiredAlert from './ActivationRequiredAlert'
+import FreePlanSeatsTakenAlert from './FreePlanSeatsTakenAlert'
+import PaidPlanSeatsTakenAlert from './PaidPlanSeatsTakenAlert'
 import FreePlanSeatsTakenAlert from './FreePlanSeatsTakenAlert'
 import UnauthorizedRepoDisplay from './UnauthorizedRepoDisplay'
 
 interface URLParams {
@@ -21,10 +24,25 @@
   const renderFreePlanSeatsTakenAlert =
     isFreePlan(planData?.plan?.value) && !planData?.plan?.hasSeatsLeft
 
+  const renderPaidPlanSeatsTakenAlert =
+    !isFreePlan(planData?.plan?.value) && !planData?.plan?.hasSeatsLeft
+
+  const renderActivationRequiredAlert =
+    !isFreePlan(planData?.plan?.value) && planData?.plan?.hasSeatsLeft
+
+
   if (renderFreePlanSeatsTakenAlert) {
     return <FreePlanSeatsTakenAlert />
   }
 
+  if (renderPaidPlanSeatsTakenAlert) {
+    return <PaidPlanSeatsTakenAlert />
+  }
+
+  if (renderActivationRequiredAlert) {
+    return <ActivationRequiredAlert />
+  }
+
   return <UnauthorizedRepoDisplay />
 }
 

src/pages/RepoPage/ActivationAlert/ActivationRequiredAlert/ActivationRequiredAlert.spec.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import ActivationRequiredAlert from './ActivationRequiredAlert'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/gh/codecov/gazebo/new']}>
+    <Route path="/:provider/:owner/:repo/new">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('ActivationRequiredAlert', () => {
+  it('renders the banner with correct heading', () => {
+    render(<ActivationRequiredAlert />, { wrapper })
+
+    const bannerHeading = screen.getByRole('heading', {
+      name: /Activation Required/,
+    })
+    expect(bannerHeading).toBeInTheDocument()
+  })
+
+  it('renders the banner with correct description', () => {
+    render(<ActivationRequiredAlert />, { wrapper })
+
+    const description = screen.getByText(
+      /You have available seats, but activation is needed./
+    )
+    expect(description).toBeInTheDocument()
+  })
+
+  it('renders the banner with correct link', () => {
+    render(<ActivationRequiredAlert />, { wrapper })
+
+    const link = screen.getByRole('link', {
+      name: /Manage members/,
+    })
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/members/gh/codecov')
+  })
+
+  it('renders the correct img', () => {
+    render(<ActivationRequiredAlert />, { wrapper })
+
+    const img = screen.getByAltText('Forbidden')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'error-403.svg')
+  })
+})

src/pages/RepoPage/ActivationAlert/ActivationRequiredAlert/ActivationRequiredAlert.tsx

@@ -0,0 +1,24 @@
+import img403 from 'layouts/shared/NetworkErrorBoundary/assets/error-403.svg'
+import Button from 'ui/Button'
+
+const ActivationRequiredAlert = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-8 bg-ds-gray-primary pb-28 pt-12 text-center">
+      <img src={img403} alt="Forbidden" className="w-36" />
+      <div className="flex w-2/5 flex-col gap-1">
+        <h1 className="text-2xl">Activation Required</h1>
+        <p>You have available seats, but activation is needed.</p>
+      </div>
+      <Button
+        to={{ pageName: 'membersTab' }}
+        disabled={undefined}
+        hook={undefined}
+        variant="primary"
+      >
+        Manage members
+      </Button>
+    </div>
+  )
+}
+
+export default ActivationRequiredAlert

src/pages/RepoPage/ActivationAlert/ActivationRequiredAlert/index.ts

@@ -0,0 +1 @@
+export { default } from './ActivationRequiredAlert'

src/pages/RepoPage/ActivationAlert/FreePlanSeatsTakenAlert/FreePlanSeatsTakenAlert.spec.tsx

@@ -32,7 +32,7 @@ describe('FreePlanSeatsTakenAlert', () => {
     render(<FreePlanSeatsTakenAlert />, { wrapper })
 
     const link = screen.getByRole('link', {
-      name: /view plan options/,
+      name: /View plan options/,
     })
     expect(link).toBeInTheDocument()
     expect(link).toHaveAttribute('href', '/plan/gh/codecov')

src/pages/RepoPage/ActivationAlert/FreePlanSeatsTakenAlert/FreePlanSeatsTakenAlert.tsx

@@ -28,7 +28,7 @@ const FreePlanSeatsTakenAlert = () => {
         hook={undefined}
         variant="primary"
       >
-        view plan options
+        View plan options
       </Button>
     </div>
   )

src/pages/RepoPage/ActivationAlert/PaidPlanSeatsTakenAlert/PaidPlanSeatsTakenAlert.spec.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import PaidPlanSeatsTakenAlert from './PaidPlanSeatsTakenAlert'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/gh/codecov/gazebo/new']}>
+    <Route path="/:provider/:owner/:repo/new">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('PaidPlanSeatsTakenAlert', () => {
+  it('renders the banner with correct heading', () => {
+    render(<PaidPlanSeatsTakenAlert />, { wrapper })
+
+    const bannerHeading = screen.getByRole('heading', {
+      name: /Seats Limit Reached/,
+    })
+    expect(bannerHeading).toBeInTheDocument()
+  })
+
+  it('renders the banner with correct description', () => {
+    render(<PaidPlanSeatsTakenAlert />, { wrapper })
+
+    const description = screen.getByText(
+      /Your organization has utilized all available seats on this plan/
+    )
+    expect(description).toBeInTheDocument()
+  })
+
+  it('renders the banner with correct link', () => {
+    render(<PaidPlanSeatsTakenAlert />, { wrapper })
+
+    const link = screen.getByRole('link', {
+      name: /Increase seat count/,
+    })
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/plan/gh/codecov/upgrade')
+  })
+
+  it('renders the correct img', () => {
+    render(<PaidPlanSeatsTakenAlert />, { wrapper })
+
+    const img = screen.getByAltText('Forbidden')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'error-403.svg')
+  })
+})

src/pages/RepoPage/ActivationAlert/PaidPlanSeatsTakenAlert/PaidPlanSeatsTakenAlert.tsx

@@ -0,0 +1,36 @@
+import img403 from 'layouts/shared/NetworkErrorBoundary/assets/error-403.svg'
+import A from 'ui/A'
+import Button from 'ui/Button'
+
+const PaidPlanSeatsTakenAlert = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-8 bg-ds-gray-primary pb-28 pt-12 text-center">
+      <img src={img403} alt="Forbidden" className="w-36" />
+      <div className="flex w-2/5 flex-col gap-1">
+        <h1 className="text-2xl">Seats Limit Reached</h1>
+        <p>
+          Your organization has utilized all available seats on this plan. To
+          add more members, please increase your seat count.{' '}
+          <A
+            to={{ pageName: 'membersTab' }}
+            isExternal={false}
+            hook="repo-page-to-members-tab"
+            variant="semibold"
+          >
+            manage members
+          </A>
+        </p>
+      </div>
+      <Button
+        to={{ pageName: 'upgradeOrgPlan' }}
+        disabled={undefined}
+        hook={undefined}
+        variant="primary"
+      >
+        Increase seat count
+      </Button>
+    </div>
+  )
+}
+
+export default PaidPlanSeatsTakenAlert

src/pages/RepoPage/ActivationAlert/PaidPlanSeatsTakenAlert/index.ts

@@ -0,0 +1 @@
+export { default } from './PaidPlanSeatsTakenAlert'