[MM-29302] Billing Summary Card - No Billing History case (#6639)

components/admin_console/billing/billing_subscriptions.tsx

@@ -15,6 +15,7 @@ import privateCloudImage from 'images/private-cloud-image.svg';
 import upgradeMattermostCloudImage from 'images/upgrade-mattermost-cloud-image.svg';
 
 import './billing_subscriptions.scss';
+import BillingSummary from './billing_summary';
 
 type Props = {
 
@@ -74,6 +75,9 @@ const privateCloudCard = () => (
  </div>
 );
 
+// TODO: temp
+const isFree = false;
+
 const BillingSubscriptions: React.FC<Props> = () => {
  const testTooltipLeft = (
  <Tooltip
@@ -172,7 +176,7 @@ const BillingSubscriptions: React.FC<Props> = () => {
  <button>{'Right Side Test Button'}</button>
  </OverlayTrigger>
  </div>
- {upgradeMattermostCloud()}
+ {isFree ? upgradeMattermostCloud() : <BillingSummary/>}
  </div>
  {privateCloudCard()}
  </div>

components/admin_console/billing/billing_summary.scss

@@ -0,0 +1,42 @@
+.BillingSummary {
+ background-color: var(--sys-center-channel-bg);
+ border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
+ border-radius: 4px;
+ width: 332px;
+ margin-left: 20px;
+ padding: 28px 32px;
+}
+
+.BillingSummary__noBillingHistory {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+
+.BillingSummary__noBillingHistory-graphic {
+ align-self: center;
+}
+
+.BillingSummary__noBillingHistory-title {
+ font-size: 16px;
+ line-height: 24px;
+ margin-top: 32px;
+ font-weight: 600;
+}
+
+.BillingSummary__noBillingHistory-message {
+ margin-top: 8px;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--sys-center-channel-color);
+}
+
+.BillingSummary__noBillingHistory-link {
+ font-weight: 600;
+ font-size: 12px;
+ color: var(--sys-button-bg);
+ margin-top: 16px;
+ margin-bottom: 24px;
+}

components/admin_console/billing/billing_summary.tsx

@@ -0,0 +1,51 @@
+// 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 noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg';
+
+import './billing_summary.scss';
+
+const noBillingHistory = (
+ <div className='BillingSummary__noBillingHistory'>
+ <img
+ className='BillingSummary__noBillingHistory-graphic'
+ src={noBillingHistoryGraphic}
+ />
+ <div className='BillingSummary__noBillingHistory-title'>
+ <FormattedMessage
+ id='admin.billing.subscriptions.billing_summary.noBillingHistory.title'
+ defaultMessage='No billing history yet'
+ />
+ </div>
+ <div className='BillingSummary__noBillingHistory-message'>
+ <FormattedMessage
+ id='admin.billing.subscriptions.billing_summary.noBillingHistory.description'
+ defaultMessage='In the future, this is where your most recent bill summary will show.'
+ />
+ </div>
+ <a
+ target='_blank'
+ rel='noopener noreferrer'
+ href='http:https://www.google.com'
+ className='BillingSummary__noBillingHistory-link'
+ >
+ <FormattedMessage
+ id='admin.billing.subscriptions.billing_summary.noBillingHistory.link'
+ defaultMessage='See how billing works'
+ />
+ </a>
+ </div>
+);
+
+const BillingSummary: React.FC = () => {
+ return (
+ <div className='BillingSummary'>
+ {noBillingHistory}
+ </div>
+ );
+};
+
+export default BillingSummary;

i18n/en.json

@@ -219,6 +219,9 @@
  "admin.billing.subscription.upgradeMattermostCloud.description": "The free tier is **limited to 10 users.** Get access to more users, teams and other great features",
  "admin.billing.subscription.upgradeMattermostCloud.title": "Need more users?",
  "admin.billing.subscription.upgradeMattermostCloud.upgradeButton": "Upgrade Mattermost Cloud",
+ "admin.billing.subscriptions.billing_summary.noBillingHistory.description": "In the future, this is where your most recent bill summary will show.",
+ "admin.billing.subscriptions.billing_summary.noBillingHistory.link": "See how billing works",
+ "admin.billing.subscriptions.billing_summary.noBillingHistory.title": "No billing history yet",
  "admin.bleve.bulkIndexingTitle": "Bulk Indexing:",
  "admin.bleve.createJob.help": "All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete.",
  "admin.bleve.createJob.title": "Index Now",