From dd70ba69f1576d38c420d02761684f4c6f33c103 Mon Sep 17 00:00:00 2001 From: Devin Binnie Date: Mon, 5 Oct 2020 17:05:39 -0400 Subject: [PATCH] [MM-29302] Billing Summary Card - No Billing History case --- .../billing/billing_subscriptions.tsx | 6 +- .../billing/billing_summary.scss | 42 +++++++ .../admin_console/billing/billing_summary.tsx | 51 +++++++++ i18n/en.json | 3 + images/no_billing_history_graphic.svg | 105 ++++++++++++++++++ 5 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 components/admin_console/billing/billing_summary.scss create mode 100644 components/admin_console/billing/billing_summary.tsx create mode 100644 images/no_billing_history_graphic.svg diff --git a/components/admin_console/billing/billing_subscriptions.tsx b/components/admin_console/billing/billing_subscriptions.tsx index 2eb708d7ea81..899e1f1b4b53 100644 --- a/components/admin_console/billing/billing_subscriptions.tsx +++ b/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 = () => ( ); +// TODO: temp +const isFree = false; + const BillingSubscriptions: React.FC = () => { const testTooltipLeft = ( = () => { - {upgradeMattermostCloud()} + {isFree ? upgradeMattermostCloud() : } {privateCloudCard()} diff --git a/components/admin_console/billing/billing_summary.scss b/components/admin_console/billing/billing_summary.scss new file mode 100644 index 000000000000..3691d02092c5 --- /dev/null +++ b/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; +} diff --git a/components/admin_console/billing/billing_summary.tsx b/components/admin_console/billing/billing_summary.tsx new file mode 100644 index 000000000000..df40213533dd --- /dev/null +++ b/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 = ( +
+ +
+ +
+
+ +
+ + + +
+); + +const BillingSummary: React.FC = () => { + return ( +
+ {noBillingHistory} +
+ ); +}; + +export default BillingSummary; diff --git a/i18n/en.json b/i18n/en.json index 4551e68ef7cc..8bd7dad63b0c 100644 --- a/i18n/en.json +++ b/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", diff --git a/images/no_billing_history_graphic.svg b/images/no_billing_history_graphic.svg new file mode 100644 index 000000000000..5e2bf2fcf132 --- /dev/null +++ b/images/no_billing_history_graphic.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +