[MM-28200] Cloud Billing - Admin Console sections and layout (#6340)

* [MM-28200] Cloud Billing - Admin Console sections and layout

* Nit

* Test fixes

components/admin_console/admin_definition.jsx

@@ -50,6 +50,12 @@ import CustomTermsOfServiceSettings from './custom_terms_of_service_settings';
 import SessionLengthSettings from './session_length_settings';
 import LDAPFeatureDiscovery from './feature_discovery/ldap.tsx';
 import SAMLFeatureDiscovery from './feature_discovery/saml.tsx';
+import BillingSubscriptions from './billing/billing_subscriptions';
+import BillingHistory from './billing/billing_history';
+import CompanyInfo from './billing/company_info';
+import PaymentInfo from './billing/payment_info';
+import CompanyInfoEdit from './billing/company_info_edit';
+import PaymentInfoEdit from './billing/payment_info_edit';
 
 import * as DefinitionConstants from './admin_definition_constants';
 
@@ -202,6 +208,74 @@ const AdminDefinition = {
  },
  },
  },
+ billing: {
+ icon: 'fa-credit-card', // TODO: Need compass icon
+ sectionTitle: t('admin.sidebar.billing'),
+ sectionTitleDefault: 'Billing & Account',
+ isHidden: it.not(it.licensedForFeature('Cloud')),
+ subscription: {
+ url: 'billing/subscription',
+ title: t('admin.sidebar.subscription'),
+ title_default: 'Subscription',
+ searchableStrings: [
+ 'admin.billing.subscription.title',
+ ],
+ schema: {
+ id: 'BillingSubscriptions',
+ component: BillingSubscriptions,
+ },
+ },
+ billing_history: {
+ url: 'billing/billing_history',
+ title: t('admin.sidebar.billing_history'),
+ title_default: 'Billing History',
+ searchableStrings: [
+ 'admin.billing.history.title',
+ ],
+ schema: {
+ id: 'BillingHistory',
+ component: BillingHistory,
+ },
+ },
+ company_info: {
+ url: 'billing/company_info',
+ title: t('admin.sidebar.company_info'),
+ title_default: 'Company Information',
+ searchableStrings: [
+ 'admin.billing.company_info.title',
+ ],
+ schema: {
+ id: 'CompanyInfo',
+ component: CompanyInfo,
+ },
+ },
+ company_info_edit: {
+ url: 'billing/company_info_edit',
+ schema: {
+ id: 'CompanyInfoEdit',
+ component: CompanyInfoEdit,
+ },
+ },
+ payment_info: {
+ url: 'billing/payment_info',
+ title: t('admin.sidebar.payment_info'),
+ title_default: 'Payment Information',
+ searchableStrings: [
+ 'admin.billing.payment_info.title',
+ ],
+ schema: {
+ id: 'PaymentInfo',
+ component: PaymentInfo,
+ },
+ },
+ payment_info_edit: {
+ url: 'billing/payment_info_edit',
+ schema: {
+ id: 'PaymentInfoEdit',
+ component: PaymentInfoEdit,
+ },
+ },
+ },
  reporting: {
  icon: 'fa-bar-chart',
  sectionTitle: t('admin.sidebar.reporting'),

components/admin_console/billing/billing_history.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+
+type Props = {
+
+};
+
+const BillingHistory: React.FC<Props> = () => {
+ return (
+ <div className='wrapper--fixed BillingHistory'>
+ <FormattedAdminHeader
+ id='admin.billing.history.title'
+ defaultMessage='Billing History'
+ />
+ <div className='admin-console__wrapper'>
+ <div className='admin-console__content'>
+ <div style={{border: '1px solid #000', width: '100%', height: '463px'}}>
+ {'Billing History Table View'}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default BillingHistory;

components/admin_console/billing/billing_subscriptions.scss

@@ -0,0 +1,5 @@
+.BillingSubscriptions {
+ .BillingSubscriptions__topWrapper {
+ display: flex;
+ }
+}

components/admin_console/billing/billing_subscriptions.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+
+import './billing_subscriptions.scss';
+
+type Props = {
+
+};
+
+const BillingSubscriptions: React.FC<Props> = () => {
+ return (
+ <div className='wrapper--fixed BillingSubscriptions'>
+ <FormattedAdminHeader
+ id='admin.billing.subscription.title'
+ defaultMessage='Subscriptions'
+ />
+ <div className='admin-console__wrapper'>
+ <div className='admin-console__content'>
+ <div style={{border: '1px solid #000', width: '100%', height: '81px', marginBottom: '20px'}}>
+ {'Alert Banner (credit card expired/recent payment failed)'}
+ </div>
+ <div className='BillingSubscriptions__topWrapper'>
+ <div style={{border: '1px solid #000', width: '568px', height: '438px'}}>
+ {'Plan Details Card'}
+ </div>
+ <div style={{border: '1px solid #000', width: '332px', marginLeft: '20px'}}>
+ {'Billing Summary Card / Upgrade Mattermost Cloud'}
+ </div>
+ </div>
+ <div style={{border: '1px solid #000', width: '100%', height: '217px', marginTop: '20px'}}>
+ {'Private Cloud'}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default BillingSubscriptions;

components/admin_console/billing/company_info.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+import BlockableLink from 'components/admin_console/blockable_link';
+
+type Props = {
+
+};
+
+const CompanyInfo: React.FC<Props> = () => {
+ return (
+ <div className='wrapper--fixed CompanyInfo'>
+ <FormattedAdminHeader
+ id='admin.billing.company_info.title'
+ defaultMessage='Company Information'
+ />
+ <div className='admin-console__wrapper'>
+ <div className='admin-console__content'>
+ <div style={{border: '1px solid #000', width: '100%', height: '432px'}}>
+ {'Company Details Card'}
+ <BlockableLink
+ to='/admin_console/billing/company_info_edit'
+ >
+ <FormattedMessage
+ id='admin.billing.company_info.add'
+ defaultMessage='Add Company Information'
+ />
+ </BlockableLink>
+ </div>
+ <div style={{border: '1px solid #000', width: '100%', height: '194px', marginTop: '20px'}}>
+ {'Billing Admins Card'}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default CompanyInfo;

components/admin_console/billing/company_info_edit.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import BlockableLink from 'components/admin_console/blockable_link';
+import SaveButton from 'components/save_button';
+
+type Props = {
+
+};
+
+const CompanyInfoEdit: React.FC<Props> = () => {
+ return (
+ <div className='wrapper--fixed CompanyInfoEdit'>
+ <div className='admin-console__header with-back'>
+ <div>
+ <BlockableLink
+ to='/admin_console/billing/company_info'
+ className='fa fa-angle-left back'
+ />
+ <FormattedMessage
+ id='admin.billing.company_info_edit.title'
+ defaultMessage='Edit Company Information'
+ />
+ </div>
+ </div>
+ <div className='admin-console__wrapper'>
+ <div className='admin-console__content'>
+ <div style={{border: '1px solid #000', width: '100%', height: '432px'}}>
+ {'Edit Company Info View'}
+ </div>
+ </div>
+ </div>
+ <div className='admin-console-save'>
+ <SaveButton
+ saving={false} // TODO
+ // disabled={this.props.isDisabled || !this.state.saveNeeded || (this.canSave && !this.canSave())}
+ // onClick={this.handleSubmit}
+ defaultMessage={(
+ <FormattedMessage
+ id='admin.billing.company_info_edit.save'
+ defaultMessage='Save info'
+ />
+ )}
+ />
+ <BlockableLink
+ className='cancel-button'
+ to='/admin_console/billing/company_info'
+ >
+ <FormattedMessage
+ id='admin.billing.company_info_edit.cancel'
+ defaultMessage='Cancel'
+ />
+ </BlockableLink>
+ </div>
+ </div>
+ );
+};
+
+export default CompanyInfoEdit;

components/admin_console/billing/payment_info.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+import BlockableLink from 'components/admin_console/blockable_link';
+
+type Props = {
+
+};
+
+const PaymentInfo: React.FC<Props> = () => {
+ return (
+ <div className='wrapper--fixed PaymentInfo'>
+ <FormattedAdminHeader
+ id='admin.billing.payment_info.title'
+ defaultMessage='Payment Information'
+ />
+ <div className='admin-console__wrapper'>
+ <div className='admin-console__content'>
+ <div style={{border: '1px solid #000', width: '100%', height: '81px', marginBottom: '20px'}}>
+ {'Alert Banner (credit card expired/about to expire)'}
+ </div>
+ <div style={{border: '1px solid #000', width: '100%', height: '484px'}}>
+ {'Payment Details Card'}
+ <BlockableLink
+ to='/admin_console/billing/payment_info_edit'
+ >
+ <FormattedMessage
+ id='admin.billing.payment_info.add'
+ defaultMessage='Add Payment Information'
+ />
+ </BlockableLink>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default PaymentInfo;

components/admin_console/billing/payment_info_edit.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import BlockableLink from 'components/admin_console/blockable_link';
+import SaveButton from 'components/save_button';
+
+type Props = {
+
+};
+
+const PaymentInfoEdit: React.FC<Props> = () => {
+ return (
+ <div className='wrapper--fixed PaymentInfoEdit'>
+ <div className='admin-console__header with-back'>
+ <div>
+ <BlockableLink
+ to='/admin_console/billing/payment_info'
+ className='fa fa-angle-left back'
+ />
+ <FormattedMessage
+ id='admin.billing.payment_info_edit.title'
+ defaultMessage='Edit Payment Information'
+ />
+ </div>
+ </div>
+ <div className='admin-console__wrapper'>
+ <div className='admin-console__content'>
+ <div style={{border: '1px solid #000', width: '100%', height: '432px'}}>
+ {'Edit Payment Info View'}
+ </div>
+ </div>
+ </div>
+ <div className='admin-console-save'>
+ <SaveButton
+ saving={false} // TODO
+ // disabled={this.props.isDisabled || !this.state.saveNeeded || (this.canSave && !this.canSave())}
+ // onClick={this.handleSubmit}
+ defaultMessage={(
+ <FormattedMessage
+ id='admin.billing.payment_info_edit.save'
+ defaultMessage='Save info'
+ />
+ )}
+ />
+ <BlockableLink
+ className='cancel-button'
+ to='/admin_console/billing/payment_info'
+ >
+ <FormattedMessage
+ id='admin.billing.payment_info_edit.cancel'
+ defaultMessage='Cancel'
+ />
+ </BlockableLink>
+ </div>
+ </div>
+ );
+};
+
+export default PaymentInfoEdit;