zero state for billing history has self hosted link when on self hosted (#22715)

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(<NoBillingHistorySection selfHosted={false}/>, state);
+        expect((screen.getByRole('link') as HTMLAnchorElement).href).toContain(CloudLinks.BILLING_DOCS);
+    });
+
+    test('goes to self-hosted docs on self-hosted', () => {
+        renderWithIntlAndStore(<NoBillingHistorySection selfHosted={true}/>, state);
+        expect((screen.getByRole('link') as HTMLAnchorElement).href).toContain(HostedCustomerLinks.SELF_HOSTED_BILLING);
+    });
+});
+

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) => (
     <div className='BillingHistory__noHistory'>
         <EmptyBillingHistorySvg
             width={300}
@@ -37,7 +40,7 @@ const noBillingHistorySection = (
         </div>
         <ExternalLink
             location='billing_history'
-            href={CloudLinks.BILLING_DOCS}
+            href={props.selfHosted ? HostedCustomerLinks.SELF_HOSTED_BILLING : CloudLinks.BILLING_DOCS}
             className='BillingHistory__noHistory-link'
             onClick={() => trackEvent('cloud_admin', 'click_billing_history', {screen: 'billing'})}
         >
@@ -92,9 +95,7 @@ const BillingHistory = () => {
 
                         <div className='BillingHistory__cardBody'>
                             {invoices != null && (
-                                <>
+                                areInvoicesEmpty ? <NoBillingHistorySection selfHosted={!isCloud}/> : billingHistoryTable
-                                    {areInvoicesEmpty ? noBillingHistorySection : billingHistoryTable}
-                                </>
                             )}
                             {invoices == null && (
                                 <div className='BillingHistory__spinner'>

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/',
 };