feat: Add messaging for free seats and clarify paid

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,
 }
 

src/pages/OwnerPage/Tabs/TrialReminder/TrialReminder.test.tsx

@@ -38,6 +38,7 @@ const mockResponse = {
   trialTotalDays: 0,
   pretrialUsersCount: 0,
   planUserCount: 1,
+  freeSeatCount: 0,
   hasSeatsLeft: true,
   isEnterprisePlan: false,
   isSentryPlan: false,

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

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

src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/DowngradePlan.test.jsx

@@ -47,6 +47,7 @@ const mockPlanData = {
       trialTotalDays: 0,
       pretrialUsersCount: 0,
       planUserCount: 5,
+      freeSeatCount: 0,
       hasSeatsLeft: false,
     },
   },

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx

@@ -33,7 +33,7 @@ const cardBrand = {
   },
 }
 
-function CardInformation({ subscriptionDetail, card }) {
+function CardInformation({ subscriptionDetail, card, nextBillPrice }) {
   const typeCard = cardBrand[card?.brand] ?? cardBrand?.fallback
   let nextBilling = null
 
@@ -61,7 +61,11 @@ function CardInformation({ subscriptionDetail, card }) {
       {nextBilling && (
         <p className="text-sm text-ds-gray-quinary">
           Your next billing date is{' '}
-          <span className="text-ds-gray-octonary">{nextBilling}</span>.
+          <span className="text-ds-gray-octonary">
+            {nextBilling}
+            {nextBillPrice ? ` for ${nextBillPrice}` : ''}
+          </span>
+          .
         </p>
       )}
     </div>
@@ -76,6 +80,7 @@ CardInformation.propTypes = {
     expMonth: PropTypes.number.isRequired,
     expYear: PropTypes.number.isRequired,
   }).isRequired,
+  nextBillPrice: PropTypes.string,
 }
 
 export default CardInformation

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx

@@ -2,26 +2,56 @@ import PropTypes from 'prop-types'
 import { useState } from 'react'
 
 import { accountDetailsPropType } from 'services/account/propTypes'
-import { formatTimestampToCalendarDate } from 'shared/utils/billing'
+import { usePlanData } from 'services/account/usePlanData'
+import {
+  BillingRate,
+  formatNumberToUSD,
+  formatTimestampToCalendarDate,
+} from 'shared/utils/billing'
+import {
+  calculatePriceProPlan,
+  calculatePriceTeamPlan,
+} from 'shared/utils/upgradeForm'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 
 import BankInformation from './BankInformation'
 import CardInformation from './CardInformation'
 import PaymentMethodForm from './PaymentMethodForm'
+
 function PaymentCard({ accountDetails, provider, owner }) {
   const [isFormOpen, setIsFormOpen] = useState(false)
+  const { data: planData } = usePlanData({
+    provider,
+    owner,
+  })
   const subscriptionDetail = accountDetails?.subscriptionDetail
   const card = subscriptionDetail?.defaultPaymentMethod?.card
   const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount
+  const isPerYear = planData?.plan?.billingRate === BillingRate.ANNUALLY
+  let seats =
+    (planData?.plan?.planUserCount ?? 0) - (planData?.plan?.freeSeatCount ?? 0)
+  seats = seats > 0 ? seats : 0
+  const billPrice = planData?.plan?.isProPlan
+    ? calculatePriceProPlan({
+        seats,
+        baseUnitPrice: planData?.plan?.baseUnitPrice ?? 0,
+      })
+    : calculatePriceTeamPlan({
+        seats,
+        baseUnitPrice: planData?.plan?.baseUnitPrice ?? 0,
+      })
 
   let nextBillingDisplayDate = null
   if (!subscriptionDetail?.cancelAtPeriodEnd) {
     nextBillingDisplayDate = formatTimestampToCalendarDate(
       subscriptionDetail?.currentPeriodEnd
     )
   }
+  const nextBillPrice = formatNumberToUSD(
+    isPerYear ? billPrice * 12 : billPrice
+  )
 
   return (
     <div className="flex flex-col gap-3 border-t p-4">
@@ -45,7 +75,11 @@ function PaymentCard({ accountDetails, provider, owner }) {
           accountDetails={accountDetails}
         />
       ) : card ? (
-        <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
+        <CardInformation
+          card={card}
+          subscriptionDetail={subscriptionDetail}
+          nextBillPrice={nextBillPrice}
+        />
       ) : usBankAccount ? (
         <BankInformation
           usBankAccount={usBankAccount}