fix: usesInvoice should hide change plan button on members page (#3782)

Author: ajay-sentry

src/pages/MembersPage/MembersActivation/Activation/Activation.jsx

@@ -4,7 +4,7 @@ import { useAccountDetails } from 'services/account/useAccountDetails'
 import { TrialStatuses, usePlanData } from 'services/account/usePlanData'
 import A from 'ui/A/A'
 
-import ChangePlanLink from './ChangePlanLink'
+import ChangePlanLink from './ChangePlanLink/ChangePlanLink'
 
 function Activation() {
   const { owner, provider } = useParams()

src/pages/MembersPage/MembersActivation/Activation/Activation.test.jsx

@@ -9,7 +9,7 @@ import { BillingRate, Plans } from 'shared/utils/billing'
 
 import Activation from './Activation'
 
-vi.mock('./ChangePlanLink', () => ({
+vi.mock('./ChangePlanLink/ChangePlanLink', () => ({
   default: vi.fn(() => 'ChangePlanLink'),
 }))
 

src/pages/MembersPage/MembersActivation/Activation/ChangePlanLink/ChangePlanLink.jsx

@@ -0,0 +1,143 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { MemoryRouter, Route } from 'react-router-dom'
+import { z } from 'zod'
+
+import config from 'config'
+
+import { AccountDetailsSchema } from 'services/account/useAccountDetails'
+import { Plan } from 'services/account/usePlanData'
+
+import ChangePlanLink from './ChangePlanLink'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/members/gh/critical-role']}>
+    <Route path="/:provider/:owner/:repo">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('Members ChangePlanLink', () => {
+  describe('When user is non enterprise', () => {
+    it('Renders change plan link', async () => {
+      const mockedAccountDetailsNonEnterprise = {
+        subscriptionDetail: {
+          collectionMethod: 'paid',
+        },
+      } as z.infer<typeof AccountDetailsSchema>
+      const mockedPlan = {
+        isEnterprisePlan: false,
+      } as Plan
+      render(
+        <ChangePlanLink
+          accountDetails={mockedAccountDetailsNonEnterprise}
+          plan={mockedPlan}
+        />,
+        { wrapper }
+      )
+
+      const changePlanLink = await screen.findByRole('link', {
+        name: 'change plan',
+      })
+      expect(changePlanLink).toBeInTheDocument()
+    })
+  })
+
+  describe('When config is self hosted', () => {
+    beforeEach(() => {
+      config.IS_SELF_HOSTED = true
+    })
+
+    it('Does not render change plan link', async () => {
+      const mockedAccountDetailsNonEnterprise = {
+        subscriptionDetail: {
+          collectionMethod: 'paid',
+        },
+      } as z.infer<typeof AccountDetailsSchema>
+      const mockedPlan = {
+        isEnterprisePlan: false,
+      } as Plan
+
+      render(
+        <ChangePlanLink
+          accountDetails={mockedAccountDetailsNonEnterprise}
+          plan={mockedPlan}
+        />,
+        { wrapper }
+      )
+
+      await waitFor(() => {
+        expect(screen.queryByText(/change plan/)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('When user has enterprise plan', () => {
+    it('Does not render change plan link', async () => {
+      const mockedAccountDetailsEnterprise = {
+        subscriptionDetail: {
+          collectionMethod: 'paid',
+        },
+      } as z.infer<typeof AccountDetailsSchema>
+      const mockedPlan = {
+        isEnterprisePlan: true,
+      } as Plan
+
+      render(
+        <ChangePlanLink
+          accountDetails={mockedAccountDetailsEnterprise}
+          plan={mockedPlan}
+        />,
+        { wrapper }
+      )
+
+      await waitFor(() => {
+        expect(screen.queryByText(/change plan/)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('When user is invoiced user', () => {
+    it('Does not render change plan link when send_invoice', async () => {
+      const mockedAccountDetailsInvoiceUser = {
+        subscriptionDetail: {
+          collectionMethod: 'send_invoice',
+        },
+      } as z.infer<typeof AccountDetailsSchema>
+      const mockedPlan = {
+        isEnterprisePlan: false,
+      } as Plan
+
+      render(
+        <ChangePlanLink
+          accountDetails={mockedAccountDetailsInvoiceUser}
+          plan={mockedPlan}
+        />,
+        { wrapper }
+      )
+
+      await waitFor(() => {
+        expect(screen.queryByText(/change plan/)).not.toBeInTheDocument()
+      })
+    })
+    it('Does not render change plan link when usesInvoice', async () => {
+      const mockedAccountDetailsInvoiceUser = {
+        usesInvoice: true,
+      } as z.infer<typeof AccountDetailsSchema>
+      const mockedPlan = {
+        isEnterprisePlan: false,
+      } as Plan
+
+      render(
+        <ChangePlanLink
+          accountDetails={mockedAccountDetailsInvoiceUser}
+          plan={mockedPlan}
+        />,
+        { wrapper }
+      )
+
+      await waitFor(() => {
+        expect(screen.queryByText(/change plan/)).not.toBeInTheDocument()
+      })
+    })
+  })
+})

src/pages/MembersPage/MembersActivation/Activation/ChangePlanLink/ChangePlanLink.test.jsx

@@ -0,0 +1,38 @@
+import { z } from 'zod'
+
+import config from 'config'
+
+import { AccountDetailsSchema } from 'services/account/useAccountDetails'
+import { Plan } from 'services/account/usePlanData'
+import { CollectionMethods } from 'shared/utils/billing'
+import A from 'ui/A'
+
+interface ChangePlanLinkProps {
+  accountDetails: z.infer<typeof AccountDetailsSchema>
+  plan: Plan
+}
+
+function ChangePlanLink({ accountDetails, plan }: ChangePlanLinkProps) {
+  const isInvoicedCustomer =
+    accountDetails?.subscriptionDetail?.collectionMethod ===
+      CollectionMethods.INVOICED_CUSTOMER_METHOD || accountDetails?.usesInvoice
+
+  if (config.IS_SELF_HOSTED || isInvoicedCustomer || plan?.isEnterprisePlan) {
+    return null
+  }
+
+  return (
+    <span className="text-xs">
+      <A
+        to={{ pageName: 'upgradeOrgPlan' }}
+        hook="change-plan-link"
+        isExternal={false}
+        variant="semibold"
+      >
+        change plan
+      </A>
+    </span>
+  )
+}
+
+export default ChangePlanLink