diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.spec.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.spec.tsx
index 84861f8cc916..480759dc53f4 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.spec.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.spec.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
+import { PRICING_LINK } from '../../../utils/links';
import AppsUsageCard from './AppsUsageCard';
const appRoot = mockAppRoot().withTranslations('en', 'core', {
@@ -36,9 +37,7 @@ it('should render data as progress bars', async () => {
await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));
- expect(
- screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
- ).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'premium plans' })).toHaveAttribute('href', PRICING_LINK);
});
it('should render an upgrade button if marketplace apps reached 80% of the limit', async () => {
@@ -54,9 +53,7 @@ it('should render an upgrade button if marketplace apps reached 80% of the limit
await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));
- expect(
- screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
- ).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'premium plans' })).toHaveAttribute('href', PRICING_LINK);
});
it('should render a full progress bar with private apps disabled', async () => {
@@ -78,7 +75,5 @@ it('should render a full progress bar with private apps disabled', async () => {
await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));
- expect(
- screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
- ).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'premium plans' })).toHaveAttribute('href', PRICING_LINK);
});
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
index c23411fe492e..8b962e093a37 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
@@ -1,8 +1,10 @@
-import { Box, Skeleton } from '@rocket.chat/fuselage';
+import { Skeleton } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
import type { ReactElement } from 'react';
import React from 'react';
import { Trans, useTranslation } from 'react-i18next';
+import { PRICING_LINK } from '../../../utils/links';
import type { CardProps } from '../../FeatureUsageCard';
import FeatureUsageCard from '../../FeatureUsageCard';
import UpgradeButton from '../../UpgradeButton';
@@ -41,13 +43,11 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
const card: CardProps = {
title: t('Apps'),
infoText: (
-
- Community workspaces can enable up to {{ marketplaceAppsMaxCount }} marketplace apps. Private apps can only be enabled in{' '}
-
- premium plans
-
- .
-
+ premium plans }}
+ />
),
...(marketplaceAppsAboveWarning && {