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

@@ -19,7 +19,7 @@ vi.mock('./subRoutes/TeamPlanSpecialOffer', () => ({
 const teamPlans = [
   {
     baseUnitPrice: 6,
-    benefits: ['Up to 10 users'],
+    benefits: ['Up to 10 paid users'],
     billingRate: BillingRate.MONTHLY,
     marketingName: 'Users Team',
     monthlyUploadLimit: 2500,
@@ -29,7 +29,7 @@ const teamPlans = [
   },
   {
     baseUnitPrice: 5,
-    benefits: ['Up to 10 users'],
+    benefits: ['Up to 10 paid users'],
     billingRate: BillingRate.ANNUALLY,
     marketingName: 'Users Team',
     monthlyUploadLimit: 2500,
@@ -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/CancelPlanPage/subRoutes/TeamPlanSpecialOffer/TeamPlanCard/TeamPlanCard.test.tsx

@@ -87,7 +87,7 @@ const mockAvailablePlans = [
   },
   {
     baseUnitPrice: 6,
-    benefits: ['Up to 10 users'],
+    benefits: ['Up to 10 paid users'],
     billingRate: BillingRate.MONTHLY,
     marketingName: 'Users Team',
     monthlyUploadLimit: 2500,
@@ -97,7 +97,7 @@ const mockAvailablePlans = [
   },
   {
     baseUnitPrice: 5,
-    benefits: ['Up to 10 users'],
+    benefits: ['Up to 10 paid users'],
     billingRate: BillingRate.ANNUALLY,
     marketingName: 'Users Team',
     monthlyUploadLimit: 2500,

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

@@ -12,6 +12,8 @@ interface URLParams {
   owner: string
 }
 
+export const MONTHS_PER_YEAR = 12
+
 function BillingDetails() {
   const { provider, owner } = useParams<URLParams>()
   const { data: accountDetails } = useAccountDetails({

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

@@ -1,27 +1,80 @@
 import PropTypes from 'prop-types'
-import { useState } from 'react'
+import { useMemo, 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,
+  calculatePriceSentryPlan,
+  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'
+
+import { MONTHS_PER_YEAR } from '../BillingDetails'
 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
-
   let nextBillingDisplayDate = null
   if (!subscriptionDetail?.cancelAtPeriodEnd) {
     nextBillingDisplayDate = formatTimestampToCalendarDate(
       subscriptionDetail?.currentPeriodEnd
     )
   }
+  const scheduledPhaseQuantity =
+    accountDetails?.scheduleDetail?.scheduledPhase?.quantity
+
+  const nextBillPrice = useMemo(() => {
+    const isPerYear = planData?.plan?.billingRate === BillingRate.ANNUALLY
+    let seats =
+      scheduledPhaseQuantity ??
+      (planData?.plan?.planUserCount ?? 0) -
+        (planData?.plan?.freeSeatCount ?? 0)
+    seats = Math.max(seats, 0)
+    const planBaseUnitPrice = planData?.plan?.baseUnitPrice ?? 0
+    const billPrice = planData?.plan?.isProPlan
+      ? calculatePriceProPlan({
+          seats,
+          baseUnitPrice: planBaseUnitPrice,
+        })
+      : planData?.plan?.isTeamPlan
+        ? calculatePriceTeamPlan({
+            seats,
+            baseUnitPrice: planBaseUnitPrice,
+          })
+        : calculatePriceSentryPlan({
+            seats,
+            baseUnitPrice: planBaseUnitPrice,
+          })
+
+    return formatNumberToUSD(
+      isPerYear ? billPrice * MONTHS_PER_YEAR : billPrice
+    )
+  }, [
+    planData?.plan?.billingRate,
+    planData?.plan?.baseUnitPrice,
+    planData?.plan?.planUserCount,
+    planData?.plan?.freeSeatCount,
+    planData?.plan?.isProPlan,
+    planData?.plan?.isTeamPlan,
+    scheduledPhaseQuantity,
+  ])
 
   return (
     <div className="flex flex-col gap-3 border-t p-4">
@@ -45,7 +98,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}