diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx index d39352e5320..a1178dc1a2b 100644 --- a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx +++ b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx @@ -105,7 +105,7 @@ const SubscriptionPage = () => { {seatsLimit.value !== undefined && ( {seatsLimit.max !== Infinity ? ( - + ) : ( )} @@ -115,7 +115,7 @@ const SubscriptionPage = () => { {macLimit.value !== undefined && ( {macLimit.max !== Infinity ? ( - + ) : ( )} diff --git a/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx b/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx index af5d4b67341..143f85bd34e 100644 --- a/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx +++ b/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx @@ -87,9 +87,11 @@ const UsagePieGraph = ({ used = 0, total = 0, label, color, size = 140 }: UsageP {used} / {unlimited ? '∞' : total} - - {label} - + {label && ( + + {label} + + )} ); }; diff --git a/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx index 4c4232034ce..14aa76db0eb 100644 --- a/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx +++ b/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 ( diff --git a/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx index 90b9a0d4302..bdcca7d44ba 100644 --- a/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx +++ b/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 (