[MM-28212] Upgrade Mattermost Cloud sales card (#6479)

* [MM-28212] Upgrade Mattermost Cloud sales card

* Remove commented code

* Merge'd

components/admin_console/billing/billing_subscriptions.scss

@@ -68,6 +68,66 @@
  margin-top: 8px;
 }
 
+.UpgradeMattermostCloud {
+ padding: 32px;
+ display: flex;
+ flex-direction: column;
+ width: 332px;
+ margin-left: 20px;
+ align-items: center;
+}
+
+.UpgradeMattermostCloud__image {
+ flex: 0 0 auto;
+}
+
+.UpgradeMattermostCloud__title {
+ align-self: flex-start;
+ margin-top: 32px;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--sys-center-channel-color);
+}
+
+.UpgradeMattermostCloud__description {
+ margin-top: 12px;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--sys-center-channel-color);
+}
+
+.UpgradeMattermostCloud__upgradeButton {
+ margin-top: 16px;
+ box-shadow: inset 0 0 0 1px var(--sys-button-bg);
+ border: none;
+ border-radius: 4px;
+ padding: 13px 0;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 14px;
+ background: var(--button-bg);
+ color: var(--button-color);
+ width: 100%;
+
+ &:hover:not(.disabled) {
+ background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
+ }
+
+ &:active {
+ background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.32), rgba(var(--center-channel-color-rgb), 0.32)), var(--button-bg);
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+ }
+
+ &.disabled {
+ color: rgba(var(--center-channel-color-rgb), 0.32);
+ background: rgba(var(--center-channel-color-rgb), 0.08);
+ }
+}
+
 .PrivateCloudCard {
  margin-top: 20px;
  padding: 32px 54px 18px 32px;

components/admin_console/billing/billing_subscriptions.tsx

@@ -2,21 +2,49 @@
 // See LICENSE.txt for license information.
 
 import React, {useState} from 'react';
-import {Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
+import {Tooltip} from 'react-bootstrap';
 
+import AlertBanner from 'components/alert_banner';
+import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import OverlayTrigger from 'components/overlay_trigger';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 import privateCloudImage from 'images/private-cloud-image.svg';
+import upgradeMattermostCloudImage from 'images/upgrade-mattermost-cloud-image.svg';
 
 import './billing_subscriptions.scss';
-import AlertBanner from 'components/alert_banner';
 
 type Props = {
 
 };
 
+const upgradeMattermostCloud = () => (
+ <div className='UpgradeMattermostCloud'>
+ <div className='UpgradeMattermostCloud__image'>
+ <img src={upgradeMattermostCloudImage}/>
+ </div>
+ <div className='UpgradeMattermostCloud__title'>
+ <FormattedMessage
+ id='admin.billing.subscription.upgradeMattermostCloud.title'
+ defaultMessage='Need more users?'
+ />
+ </div>
+ <div className='UpgradeMattermostCloud__description'>
+ <FormattedMarkdownMessage
+ id='admin.billing.subscription.upgradeMattermostCloud.description'
+ defaultMessage='The free tier is **limited to 10 users.** Get access to more users, teams and other great features'
+ />
+ </div>
+ <button className='UpgradeMattermostCloud__upgradeButton'>
+ <FormattedMessage
+ id='admin.billing.subscription.upgradeMattermostCloud.upgradeButton'
+ defaultMessage='Upgrade Mattermost Cloud'
+ />
+ </button>
+ </div>
+);
+
 const privateCloudCard = () => (
  <div className='PrivateCloudCard'>
  <div className='PrivateCloudCard__text'>
@@ -114,7 +142,7 @@ const BillingSubscriptions: React.FC<Props> = () => {
  className='BillingSubscriptions__topWrapper'
  style={{marginTop: '20px'}}
  >
- <div style={{border: '1px solid #000', width: '568px', height: '438px'}}>
+ <div style={{border: '1px solid #000', width: '568px'}}>
  {'Plan Details Card'}
  <OverlayTrigger
  delayShow={500}
@@ -131,9 +159,7 @@ const BillingSubscriptions: React.FC<Props> = () => {
  <button>{'Right Side Test Button'}</button>
  </OverlayTrigger>
  </div>
- <div style={{border: '1px solid #000', width: '332px', marginLeft: '20px'}}>
- {'Billing Summary Card / Upgrade Mattermost Cloud'}
- </div>
+ {upgradeMattermostCloud()}
  </div>
  {privateCloudCard()}
  </div>

i18n/en.json

@@ -216,6 +216,9 @@
  "admin.billing.subscription.privateCloudCard.description": "If you need software with dedicated, single-tenant architecture, Mattermost Private Cloud (Beta) is the solution for high-trust collaboration.",
  "admin.billing.subscription.privateCloudCard.title": "Looking for a high-trust private cloud?",
  "admin.billing.subscription.title": "Subscriptions",
+ "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.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",