feat(ui): Add per-seat cost details to manage subscription view

packages/ui/src/components/SubscriptionDetails/index.tsx

@@ -20,6 +20,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
 import { LineItems } from '@/ui/elements/LineItems';
 import { handleError } from '@/ui/utils/errorHandler';
+import { getSeatLimitAndIncludedSeatsLocalizationKey } from '@/ui/utils/billingPlanSeats';
 import { formatDate } from '@/ui/utils/formatDate';
 
 import {
@@ -511,6 +512,10 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
 // New component for individual subscription cards
 const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionItemResource }) => {
   const { t } = useLocalizations();
+  const subItemSeatsQty = subscription.seats?.quantity;
+  const firstPaidSeatTier = subscription.seats?.tiers?.find(tier => tier.total.amount > 0);
+  const monthLabel = t(localizationKeys('billing.month')).toLowerCase();
+  const seatLimitAndIncludedSeatsLocalizationKey = getSeatLimitAndIncludedSeatsLocalizationKey(subscription.plan);
 
   const fee =
     subscription.planPeriod === 'month'
@@ -604,31 +609,44 @@ const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionI
         </Flex>
       </Col>
 
-      {subscription.seats ? (
+      {typeof subItemSeatsQty !== 'undefined' ? (
         <DetailRow
           variant='header'
           labelNode={
-            <Text
-              sx={t => ({
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: t.space.$1,
-              })}
+            <Flex
+              align='center'
+              gap={1}
             >
               <Icon
                 icon={Users}
                 size='md'
                 colorScheme='neutral'
               />
               <Text localizationKey={localizationKeys('billing.seats')} />
-            </Text>
+            </Flex>
           }
-          value={
-            subscription.seats.quantity === null
-              ? localizationKeys('billing.pricingTable.seatCost.unlimitedSeats')
-              : localizationKeys('billing.pricingTable.seatCost.upToSeats', {
-                  endsAfterBlock: subscription.seats.quantity,
-                })
+          valueNode={
+            <Col
+              gap={1}
+              align='end'
+            >
+              {seatLimitAndIncludedSeatsLocalizationKey ? (
+                <Text
+                  variant='subtitle'
+                  localizationKey={seatLimitAndIncludedSeatsLocalizationKey}
+                />
+              ) : null}
+              {firstPaidSeatTier && firstPaidSeatTier.quantity ? (
+                <Text variant='subtitle'>
+                  {t(
+                    localizationKeys('organizationProfile.billingPage.subscriptionsListSection.paidSeatsUsage', {
+                      seatsQuantity: firstPaidSeatTier.quantity,
+                      amount: `${firstPaidSeatTier.feePerBlock.currencySymbol}${firstPaidSeatTier.feePerBlock.amountFormatted} / ${monthLabel}`,
+                    }),
+                  )}
+                </Text>
+              ) : null}
+            </Col>
           }
         />
       ) : null}
@@ -683,17 +701,19 @@ const DetailRow = ({
   label,
   labelNode,
   value,
+  valueNode,
   variant,
 }: {
   label?: LocalizationKey;
   labelNode?: React.ReactNode;
-  value: string | LocalizationKey;
+  value?: string | LocalizationKey;
+  valueNode?: React.ReactNode;
   variant?: 'header';
 }) => (
   <Flex
     elementDescriptor={descriptors.subscriptionDetailsDetailRow}
     justify='between'
-    align='center'
+    align={valueNode ? 'start' : 'center'}
     sx={t => ({
       paddingInline: t.space.$3,
       paddingBlock: t.space.$3,
@@ -714,19 +734,21 @@ const DetailRow = ({
       />
     ) : null}
     {labelNode ? labelNode : null}
-    {typeof value === 'string' ? (
+    {valueNode ? (
+      valueNode
+    ) : typeof value === 'string' ? (
       <Text
         elementDescriptor={descriptors.subscriptionDetailsDetailRowValue}
         colorScheme='secondary'
       >
         {value}
       </Text>
-    ) : (
+    ) : value ? (
       <Text
         localizationKey={value}
         elementDescriptor={descriptors.subscriptionDetailsDetailRowValue}
         colorScheme='secondary'
       />
-    )}
+    ) : null}
   </Flex>
 );

packages/ui/src/components/Subscriptions/SubscriptionsList.tsx

@@ -8,7 +8,7 @@ import { Fragment, useMemo } from 'react';
 import { useProtect } from '@/ui/common/Gate';
 import { ProfileSection } from '@/ui/elements/Section';
 import { common } from '@/ui/styledSystem';
-import { getIncludedSeatsUnitTier, getPlanSeatLimit, getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import { getSeatLimitAndIncludedSeatsLocalizationKey } from '@/ui/utils/billingPlanSeats';
 
 import {
   normalizeFormatted,
@@ -256,30 +256,9 @@ function SubscriptionItemRow({
   }, [fee.amountFormatted]);
 
   const subItemSeatsQty = subscriptionItem.seats?.quantity;
-  const seatUnitPrice = getSeatUnitPrice(subscriptionItem.plan);
-  const includedSeatsUnitTier = getIncludedSeatsUnitTier(seatUnitPrice);
-  const planSeatLimit = getPlanSeatLimit(subscriptionItem.plan);
-  const includedSeats =
-    includedSeatsUnitTier?.endsAfterBlock != null && seatUnitPrice
-      ? includedSeatsUnitTier.endsAfterBlock * seatUnitPrice.blockSize
-      : null;
   const seatsTotalTier = subscriptionItem.seats?.tiers?.find(t => t.total.amount > 0);
   const monthLabel = t(localizationKeys('billing.month')).toLowerCase();
-  const seatLimitAndIncludedSeatsLocalizationKey =
-    typeof planSeatLimit === 'number' && includedSeats !== null
-      ? localizationKeys('organizationProfile.billingPage.subscriptionsListSection.seatLimitAndIncludedSeats', {
-          seatLimit: planSeatLimit,
-          includedSeats,
-        })
-      : typeof planSeatLimit === 'number'
-        ? localizationKeys('organizationProfile.billingPage.subscriptionsListSection.seatLimit', {
-            seatLimit: planSeatLimit,
-          })
-        : includedSeats !== null
-          ? localizationKeys('organizationProfile.billingPage.subscriptionsListSection.includedSeatsUsage', {
-              includedSeats,
-            })
-          : null;
+  const seatLimitAndIncludedSeatsLocalizationKey = getSeatLimitAndIncludedSeatsLocalizationKey(subscriptionItem.plan);
 
   return (
     <Fragment key={subscriptionItem.id}>

packages/ui/src/utils/billingPlanSeats.ts

@@ -9,6 +9,8 @@ import type {
   OrganizationResource,
 } from '@clerk/shared/types';
 
+import { type LocalizationKey, localizationKeys } from '../localization';
+
 /**
  * Given a plan, return the unit price for seats.
  */
@@ -191,6 +193,41 @@ export const getPlanSeatLimit = (plan: BillingPlanResource): number | null | und
   return lastTier.endsAfterBlock != null ? lastTier.endsAfterBlock * seatUnitPrice.blockSize : null;
 };
 
+export const getSeatLimitAndIncludedSeatsLocalizationKey = (plan: BillingPlanResource): LocalizationKey | null => {
+  const seatUnitPrice = getSeatUnitPrice(plan);
+  const includedSeatsUnitTier = getIncludedSeatsUnitTier(seatUnitPrice);
+  const planSeatLimit = getPlanSeatLimit(plan);
+  const includedSeats =
+    includedSeatsUnitTier?.endsAfterBlock != null && seatUnitPrice
+      ? includedSeatsUnitTier.endsAfterBlock * seatUnitPrice.blockSize
+      : null;
+
+  // plan has a seat limit and included seats
+  if (typeof planSeatLimit === 'number' && includedSeats !== null) {
+    return localizationKeys('organizationProfile.billingPage.subscriptionsListSection.seatLimitAndIncludedSeats', {
+      seatLimit: planSeatLimit,
+      includedSeats,
+    });
+  }
+
+  // plan only has a seat limit
+  if (typeof planSeatLimit === 'number') {
+    return localizationKeys('organizationProfile.billingPage.subscriptionsListSection.seatLimit', {
+      seatLimit: planSeatLimit,
+    });
+  }
+
+  // plan only has included seats
+  if (includedSeats !== null) {
+    return localizationKeys('organizationProfile.billingPage.subscriptionsListSection.includedSeatsUsage', {
+      includedSeats,
+    });
+  }
+
+  // plan doesn't have a seat limit or included seats
+  return null;
+};
+
 /**
  * Given a plan and an organization, return true if the organization exceeds the seat limit for the plan.
  */