chore: remove `required` on subscription page (#30992)

apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx

@@ -105,7 +105,7 @@ const SubscriptionPage = () => {
 							{seatsLimit.value !== undefined && (
 								<Grid.Item lg={6} xs={4} p={8}>
 									{seatsLimit.max !== Infinity ? (
-										<SeatsCard value={seatsLimit.value} max={seatsLimit.max} />
+										<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
 									) : (
 										<CountSeatsCard activeUsers={seatsLimit?.value} />
 									)}
@@ -115,7 +115,7 @@ const SubscriptionPage = () => {
 							{macLimit.value !== undefined && (
 								<Grid.Item lg={6} xs={4} p={8}>
 									{macLimit.max !== Infinity ? (
-										<MACCard max={macLimit.max} value={macLimit.value} />
+										<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
 									) : (
 										<CountMACCard macsCount={macLimit.value} />
 									)}

apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx

@@ -87,9 +87,11 @@ const UsagePieGraph = ({ used = 0, total = 0, label, color, size = 140 }: UsageP
 			<Box is='span' fontScale='p2' color='font-secondary-info'>
 				{used} / {unlimited ? '∞' : total}
 			</Box>
-			<Box is='span' mbs={4} color='font-secondary-info'>
-				{label}
-			</Box>
+			{label && (
+				<Box is='span' mbs={4} color='font-secondary-info'>
+					{label}
+				</Box>
+			)}
 		</Box>
 	);
 };

apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx

@@ -7,7 +7,15 @@ import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
 import UsagePieGraph from '../UsagePieGraph';
 
-const MACCard = ({ value = 0, max }: { value: number; max: number }): ReactElement => {
+const MACCard = ({
+	value = 0,
+	max,
+	hideManageSubscription,
+}: {
+	value: number;
+	max: number;
+	hideManageSubscription?: boolean;
+}): ReactElement => {
 	const { t } = useTranslation();
 
 	const pieGraph = {
@@ -22,15 +30,18 @@ const MACCard = ({ value = 0, max }: { value: number; max: number }): ReactEleme
 	const card: CardProps = {
 		title: t('Monthly_active_contacts'),
 		infoText: t('MAC_InfoText'),
-		upgradeButtonText: t('Buy_more'),
-		...(nearLimit && {
-			upgradeButtonText: t('Upgrade'),
+
+		...(!hideManageSubscription && {
+			upgradeButtonText: t('Buy_more'),
+			...(nearLimit && {
+				upgradeButtonText: t('Upgrade'),
+			}),
 		}),
 	};
 
 	const color = nearLimit ? Palette.statusColor['status-font-on-danger'].toString() : undefined;
 
-	const message = macLeft > 0 ? t('MAC_Available', { macLeft }) : t('MAC_Required', { macRequired: -macLeft });
+	const message = macLeft > 0 ? t('MAC_Available', { macLeft }) : undefined;
 
 	return (
 		<FeatureUsageCard card={card}>

apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx

@@ -10,9 +10,10 @@ import UsagePieGraph from '../UsagePieGraph';
 type SeatsCardProps = {
 	value: number;
 	max: number;
+	hideManageSubscription?: boolean;
 };
 
-const SeatsCard = ({ value, max }: SeatsCardProps): ReactElement => {
+const SeatsCard = ({ value, max, hideManageSubscription }: SeatsCardProps): ReactElement => {
 	const { t } = useTranslation();
 
 	const pieGraph = {
@@ -25,15 +26,16 @@ const SeatsCard = ({ value, max }: SeatsCardProps): ReactElement => {
 	const card: CardProps = {
 		title: t('Seats'),
 		infoText: t('Seats_InfoText'),
-		...(nearLimit && {
-			upgradeButtonText: t('Buy_more'),
-		}),
+		...(!hideManageSubscription &&
+			nearLimit && {
+				upgradeButtonText: t('Buy_more'),
+			}),
 	};
 
 	const seatsLeft = pieGraph.total - pieGraph.used;
 	const color = pieGraph.used / pieGraph.total >= 0.8 ? Palette.statusColor['status-font-on-danger'].toString() : undefined;
 
-	const message = seatsLeft > 0 ? t('Seats_Available', { seatsLeft }) : t('Seats_Required', { seatsRequired: -seatsLeft });
+	const message = seatsLeft > 0 ? t('Seats_Available', { seatsLeft }) : undefined;
 	return (
 		<FeatureUsageCard card={card}>
 			<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />