diff --git a/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx b/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx index 86a755703b..424eb55c2b 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx +++ b/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx @@ -6,11 +6,14 @@ import React from 'react'; import {Provider} from 'react-redux'; import {shallow} from 'enzyme'; +import {screen} from '@testing-library/react'; +import {renderWithIntlAndStore} from 'tests/react_testing_utils'; import {mountWithIntl} from 'tests/helpers/intl-test-helper'; import mockStore from 'tests/test_store'; -import BillingHistory from './billing_history'; +import {CloudLinks, HostedCustomerLinks} from 'utils/constants'; +import BillingHistory, {NoBillingHistorySection} from './billing_history'; const NO_INVOICES_LEGEND = 'All of your invoices will be shown here'; @@ -214,3 +217,17 @@ describe('BillingHistory -- self-hosted', () => { expect(invoiceTableRows.length).toBe(2); }); }); + +describe('NoBillingHistorySection', () => { + const state = {entities: {users: {}, general: {config: {}, license: {}}}} as any; + test('goes to cloud docs on cloud', () => { + renderWithIntlAndStore(, state); + expect((screen.getByRole('link') as HTMLAnchorElement).href).toContain(CloudLinks.BILLING_DOCS); + }); + + test('goes to self-hosted docs on self-hosted', () => { + renderWithIntlAndStore(, state); + expect((screen.getByRole('link') as HTMLAnchorElement).href).toContain(HostedCustomerLinks.SELF_HOSTED_BILLING); + }); +}); + diff --git a/webapp/channels/src/components/admin_console/billing/billing_history.tsx b/webapp/channels/src/components/admin_console/billing/billing_history.tsx index 9fce2a42cb..512cea1e9e 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_history.tsx +++ b/webapp/channels/src/components/admin_console/billing/billing_history.tsx @@ -16,14 +16,17 @@ import LoadingSpinner from 'components/widgets/loading/loading_spinner'; import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header'; import EmptyBillingHistorySvg from 'components/common/svg_images_components/empty_billing_history_svg'; -import {CloudLinks} from 'utils/constants'; +import {CloudLinks, HostedCustomerLinks} from 'utils/constants'; import ExternalLink from 'components/external_link'; import BillingHistoryTable from './billing_history_table'; import './billing_history.scss'; -const noBillingHistorySection = ( +interface NoBillingHistorySectionProps { + selfHosted: boolean; +} +export const NoBillingHistorySection = (props: NoBillingHistorySectionProps) => (
trackEvent('cloud_admin', 'click_billing_history', {screen: 'billing'})} > @@ -92,9 +95,7 @@ const BillingHistory = () => {
{invoices != null && ( - <> - {areInvoicesEmpty ? noBillingHistorySection : billingHistoryTable} - + areInvoicesEmpty ? : billingHistoryTable )} {invoices == null && (
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx index ad18170d15..f98291b240 100644 --- a/webapp/channels/src/utils/constants.tsx +++ b/webapp/channels/src/utils/constants.tsx @@ -1073,6 +1073,7 @@ export const CloudLinks = { export const HostedCustomerLinks = { BILLING_DOCS: 'https://mattermost.com/pl/how-self-hosted-billing-works', + SELF_HOSTED_BILLING: 'https://docs.mattermost.com/manage/self-hosted-billing.html', TERMS_AND_CONDITIONS: 'https://mattermost.com/enterprise-edition-terms/', };