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 && {