spalmurray/account details card (#3382)

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router'
+
+import AccountOrgs from './AccountOrgs'
+
+import { Account } from '../hooks/useEnterpriseAccountDetails'
+
+const mockAccount: Account = {
+  name: 'my-account',
+  totalSeatCount: 10,
+  activatedUserCount: 3,
+  organizations: {
+    totalCount: 4,
+  },
+}
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/plan/gh/codecov']}>
+    <Route path="/plan/:provider/:owner">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('AccountOrgs', () => {
+  it('renders Header', async () => {
+    render(<AccountOrgs account={mockAccount} />, { wrapper })
+
+    const header = await screen.findByText('Account details')
+    expect(header).toBeInTheDocument()
+    const description = await screen.findByText(
+      /To modify your orgs and seats, please/
+    )
+    expect(description).toBeInTheDocument()
+  })
+
+  it('renders total orgs', async () => {
+    render(<AccountOrgs account={mockAccount} />, { wrapper })
+
+    const label = await screen.findByText('Total organizations')
+    expect(label).toBeInTheDocument()
+
+    const number = await screen.findByText(mockAccount.organizations.totalCount)
+    expect(number).toBeInTheDocument()
+  })
+
+  it('renders total seats', async () => {
+    render(<AccountOrgs account={mockAccount} />, { wrapper })
+
+    const label = await screen.findByText('Total seats')
+    expect(label).toBeInTheDocument()
+
+    const number = await screen.findByText(mockAccount.totalSeatCount)
+    expect(number).toBeInTheDocument()
+  })
+
+  it('renders seats remaining', async () => {
+    render(<AccountOrgs account={mockAccount} />, { wrapper })
+
+    const label = await screen.findByText('Seats remaining')
+    expect(label).toBeInTheDocument()
+
+    const number = await screen.findByText(
+      mockAccount.totalSeatCount - mockAccount.activatedUserCount
+    )
+    expect(number).toBeInTheDocument()
+  })
+})

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx

@@ -0,0 +1,38 @@
+import A from 'ui/A'
+import { Card } from 'ui/Card'
+
+import { Account } from '../hooks/useEnterpriseAccountDetails'
+
+interface AccountOrgsArgs {
+  account: Account
+}
+
+export default function AccountOrgs({ account }: AccountOrgsArgs) {
+  return (
+    <Card>
+      <Card.Header>
+        <Card.Title size="sm">Account details</Card.Title>
+        <Card.Description className="text-sm text-ds-gray-quinary">
+          To modify your orgs and seats, please {/* @ts-ignore-error */}
+          <A to={{ pageName: 'enterpriseSupport' }}>contact support</A>.
+        </Card.Description>
+      </Card.Header>
+      <Card.Content className="m-0 flex divide-x font-medium">
+        <div className="flex-1 p-4">
+          <p>Total organizations</p>
+          <p className="pt-2 text-xl">{account.organizations.totalCount}</p>
+        </div>
+        <div className="flex-1 p-4">
+          <p>Total seats</p>
+          <p className="pt-2 text-xl">{account.totalSeatCount}</p>
+        </div>
+        <div className="flex-1 p-4">
+          <p>Seats remaining</p>
+          <p className="pt-2 text-xl">
+            {account.totalSeatCount - account.activatedUserCount}
+          </p>
+        </div>
+      </Card.Content>
+    </Card>
+  )
+}

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/index.ts

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

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.test.tsx

@@ -16,6 +16,7 @@ import { useEnterpriseAccountDetails } from './hooks/useEnterpriseAccountDetails
 vi.mock('./BillingDetails', () => ({ default: () => 'BillingDetails' }))
 vi.mock('./CurrentPlanCard', () => ({ default: () => 'CurrentPlanCard' }))
 vi.mock('./LatestInvoiceCard', () => ({ default: () => 'LatestInvoiceCard' }))
+vi.mock('./AccountOrgs', () => ({ default: () => 'AccountOrgs' }))
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -417,5 +418,13 @@ describe('CurrentOrgPlan', () => {
         expect(banner).toBeInTheDocument()
       })
     })
+
+    it('renders AccountOrgs', async () => {
+      setup({ enterpriseAccountDetails: mockEnterpriseAccountDetails })
+      render(<CurrentOrgPlan />, { wrapper })
+
+      const accountOrgs = await screen.findByText(/AccountOrgs/)
+      expect(accountOrgs).toBeInTheDocument()
+    })
   })
 })

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx

@@ -6,6 +6,7 @@ import { getScheduleStart } from 'shared/plan/ScheduledPlanDetails/ScheduledPlan
 import A from 'ui/A'
 import { Alert } from 'ui/Alert'
 
+import AccountOrgs from './AccountOrgs'
 import BillingDetails from './BillingDetails'
 import CurrentPlanCard from './CurrentPlanCard'
 import { useEnterpriseAccountDetails } from './hooks/useEnterpriseAccountDetails'
@@ -85,6 +86,7 @@ function CurrentOrgPlan() {
               <LatestInvoiceCard />
             </>
           ) : null}
+          {account ? <AccountOrgs account={account} /> : null}
         </div>
       ) : null}
     </div>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useEnterpriseAccountDetails.ts

@@ -4,19 +4,21 @@ import { z } from 'zod'
 import Api from 'shared/api/api'
 import { NetworkErrorObject } from 'shared/api/helpers'
 
+const AccountSchema = z.object({
+  name: z.string(),
+  totalSeatCount: z.number(),
+  activatedUserCount: z.number(),
+  organizations: z.object({
+    totalCount: z.number(),
+  }),
+})
+
+export type Account = z.infer<typeof AccountSchema>
+
 const RequestSchema = z.object({
   owner: z
     .object({
-      account: z
-        .object({
-          name: z.string(),
-          totalSeatCount: z.number(),
-          activatedUserCount: z.number(),
-          organizations: z.object({
-            totalCount: z.number(),
-          }),
-        })
-        .nullable(),
+      account: AccountSchema.nullable(),
     })
     .nullable(),
 })
@@ -31,7 +33,6 @@ const query = `query EnterpriseAccountDetails($owner: String!) {
         totalCount
       }
     }
-    activatedUserCount
   }
 }`
 

src/ui/Card/Card.tsx

@@ -30,6 +30,7 @@ Header.displayName = 'Card.Header'
 const title = cva(['font-semibold'], {
   variants: {
     size: {
+      sm: ['text-sm'],
       base: ['text-base'],
       lg: ['text-lg'],
       xl: ['text-xl'],