feat: Add messaging for free seats and clarify paid (#3925)

Author: calvin-codecov

package.json

@@ -123,6 +123,7 @@
     "@types/js-cookie": "3.0.6",
     "@types/lodash": "4.17.6",
     "@types/node": "^22.9.0",
+    "@types/pluralize": "^0.0.33",
     "@types/prismjs": "^1.26.4",
     "@types/prop-types": "15.7.12",
     "@types/qs": "6.9.15",

src/pages/AccountSettings/AccountSettings.test.jsx

@@ -38,6 +38,7 @@ const mockPlanData = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 0,
   hasSeatsLeft: true,
 }
 

src/pages/AccountSettings/AccountSettingsSideMenu.test.jsx

@@ -26,6 +26,7 @@ const mockPlanData = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 0,
   hasSeatsLeft: true,
 }
 

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

@@ -1,3 +1,4 @@
+import pluralize from 'pluralize'
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account/useAccountDetails'
@@ -74,6 +75,9 @@ function Activation() {
         activated members of{' '}
         <span className="text-lg font-semibold">{planQuantity}</span> available
         seats{' '}
+        {planData?.plan?.freeSeatCount
+          ? `(${planData?.plan?.freeSeatCount} free ${pluralize('seat', planData?.plan?.freeSeatCount)} included) `
+          : ''}
         {accountDetails && (
           <ChangePlanLink
             accountDetails={accountDetails}

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

@@ -44,6 +44,7 @@ const mockPlanData = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 9,
+  freeSeatCount: 2,
   hasSeatsLeft: true,
 }
 
@@ -140,6 +141,15 @@ describe('Activation', () => {
       expect(availableSeats).toBeInTheDocument()
     })
 
+    it('displays number of plan free seats', async () => {
+      setup()
+
+      render(<Activation />, { wrapper: wrapper() })
+
+      const freeSeats = await screen.findByText(/2 free seats included/)
+      expect(freeSeats).toBeInTheDocument()
+    })
+
     it('displays change plan link', async () => {
       setup()
 

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

@@ -39,6 +39,7 @@ const mockPlanData = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 1,
   hasSeatsLeft: true,
   isEnterprisePlan: false,
   isFreePlan: false,

src/pages/MembersPage/MembersList/MembersTable/MembersTable.test.tsx

@@ -126,6 +126,7 @@ const mockPlanData = {
   trialEndDate: '',
   trialTotalDays: 0,
   pretrialUsersCount: 0,
+  freeSeatCount: 0,
 }
 
 const server = setupServer()

src/pages/OwnerPage/HeaderBanners/ExceededUploadsAlert/ExceededUploadsAlert.test.jsx

@@ -36,6 +36,7 @@ const mockPlanDataResponse = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 0,
   hasSeatsLeft: true,
   isEnterprisePlan: false,
   isFreePlan: false,

src/pages/OwnerPage/HeaderBanners/HeaderBanners.test.jsx

@@ -39,6 +39,7 @@ const mockPlanDataResponse = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 0,
   hasSeatsLeft: true,
   isEnterprisePlan: false,
   isFreePlan: false,

src/pages/OwnerPage/HeaderBanners/ReachingUploadLimitAlert/ReachingUploadLimitAlert.test.jsx

@@ -42,6 +42,7 @@ const mockPlanDataResponse = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 0,
   hasSeatsLeft: true,
 }