feat: Activation required banner

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationBanner.spec.tsx

@@ -8,6 +8,7 @@ import ActivationBanner from './ActivationBanner'
 
 jest.mock('./TrialEligibleBanner', () => () => 'TrialEligibleBanner')
 jest.mock('./FreePlanSeatsLimitBanner', () => () => 'FreePlanSeatsLimitBanner')
+jest.mock('./ActivationRequiredBanner', () => () => 'ActivationRequiredBanner')
 
 const queryClient = new QueryClient()
 
@@ -110,4 +111,14 @@ describe('ActivationBanner', () => {
     )
     expect(FreePlanSeatsLimitBanner).toBeInTheDocument()
   })
+
+  it('renders activation required banner if user is not on free plan and has seats left', async () => {
+    setup(true, 'ONGOING', 'users-pro', true)
+    render(<ActivationBanner />, { wrapper })
+
+    const ActivationRequiredBanner = await screen.findByText(
+      /ActivationRequiredBanner/
+    )
+    expect(ActivationRequiredBanner).toBeInTheDocument()
+  })
 })

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationBanner.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 import { TrialStatuses, usePlanData } from 'services/account'
 import { isBasicPlan, isFreePlan } from 'shared/utils/billing'
 
+import ActivationRequiredBanner from './ActivationRequiredBanner'
 import FreePlanSeatsLimitBanner from './FreePlanSeatsLimitBanner'
 import TrialEligibleBanner from './TrialEligibleBanner'
 
@@ -32,6 +33,10 @@ function ActivationBanner() {
     return <FreePlanSeatsLimitBanner />
   }
 
+  if (!seatsLimitReached && !isFreePlan(planData?.plan?.value)) {
+    return <ActivationRequiredBanner />
+  }
+
   return null
 }
 

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationRequiredBanner/ActivationRequiredBanner.spec.tsx

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

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationRequiredBanner/ActivationRequiredBanner.tsx

@@ -0,0 +1,33 @@
+import Banner from 'ui/Banner'
+import BannerContent from 'ui/Banner/BannerContent'
+import BannerHeading from 'ui/Banner/BannerHeading'
+import Button from 'ui/Button'
+
+function ActivationRequiredBanner() {
+  return (
+    <Banner variant="plain">
+      <BannerContent>
+        <BannerHeading>
+          <h2 className="font-semibold">&#8505; Activation Required</h2>
+        </BannerHeading>
+        <div className="flex justify-between">
+          <p>You have available seats, but activation is needed.</p>
+          <div className="mt-[-9px]">
+            <Button
+              hook="trial-eligible-banner-start-trial"
+              to={{
+                pageName: 'membersTab',
+              }}
+              disabled={false}
+              variant="primary"
+            >
+              Manage Members
+            </Button>
+          </div>
+        </div>
+      </BannerContent>
+    </Banner>
+  )
+}
+
+export default ActivationRequiredBanner

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationRequiredBanner/index.ts

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