[MM-28225] Private Cloud sales card (#6478)

mattermost · Sep 18, 2020 · 05f7c1d · 05f7c1d
1 parent 50400d9
commit 05f7c1d
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 3 deletions.
diff --git a/components/admin_console/billing/billing_subscriptions.scss b/components/admin_console/billing/billing_subscriptions.scss
@@ -67,3 +67,60 @@
  line-height: 20px;
  margin-top: 8px;
 }
+
+.PrivateCloudCard {
+ margin-top: 20px;
+ padding: 32px 54px 18px 32px;
+ display: flex;
+ 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;
+}
+
+.PrivateCloudCard__text {
+ flex-grow: 1;
+ color: var(--sys-center-channel-color);
+}
+
+.PrivateCloudCard__text-title {
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+.PrivateCloudCard__text-description {
+ margin-top: 12px;
+ font-size: 14px;
+ line-height: 20px;
+}
+
+.PrivateCloudCard__image {
+ margin-left: 96px;
+ flex: 0 0 234px;
+}
+
+.PrivateCloudCard__contactSales {
+ margin-top: 16px;
+ background: var(--sys-center-channel-bg);
+ color: var(--sys-button-bg);
+ box-shadow: inset 0 0 0 1px var(--sys-button-bg);
+ border: none;
+ border-radius: 4px;
+ padding: 13px 20px;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 14px;
+
+ &:hover:not(.disabled) {
+ background: rgba(var(--sys-button-bg-rgb), 0.04);
+ }
+
+ &:active {
+ background: rgba(var(--sys-button-bg-rgb), 0.08);
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 2px var(--sys-button-bg);
+ }
+}
diff --git a/components/admin_console/billing/billing_subscriptions.tsx b/components/admin_console/billing/billing_subscriptions.tsx
@@ -3,17 +3,48 @@
 
 import React, {useState} from 'react';
 import {Tooltip} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
 
 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 './billing_subscriptions.scss';
 import AlertBanner from 'components/alert_banner';
 
 type Props = {
 
 };
 
+const privateCloudCard = () => (
+ <div className='PrivateCloudCard'>
+ <div className='PrivateCloudCard__text'>
+ <div className='PrivateCloudCard__text-title'>
+ <FormattedMessage
+ id='admin.billing.subscription.privateCloudCard.title'
+ defaultMessage='Looking for a high-trust private cloud?'
+ />
+ </div>
+ <div className='PrivateCloudCard__text-description'>
+ <FormattedMessage
+ id='admin.billing.subscription.privateCloudCard.description'
+ defaultMessage='If you need software with dedicated, single-tenant architecture, Mattermost Private Cloud (Beta) is the solution for high-trust collaboration.'
+ />
+ </div>
+ <button className='PrivateCloudCard__contactSales'>
+ <FormattedMessage
+ id='admin.billing.subscription.privateCloudCard.contactSales'
+ defaultMessage='Contact Sales'
+ />
+ </button>
+ </div>
+ <div className='PrivateCloudCard__image'>
+ <img src={privateCloudImage}/>
+ </div>
+ </div>
+);
+
 const BillingSubscriptions: React.FC<Props> = () => {
  const testTooltipLeft = (
  <Tooltip
@@ -104,9 +135,7 @@ const BillingSubscriptions: React.FC<Props> = () => {
  {'Billing Summary Card / Upgrade Mattermost Cloud'}
  </div>
  </div>
- <div style={{border: '1px solid #000', width: '100%', height: '217px', marginTop: '20px'}}>
- {'Private Cloud'}
- </div>
+ {privateCloudCard()}
  </div>
  </div>
  </div>

diff --git a/i18n/en.json b/i18n/en.json
@@ -212,6 +212,9 @@
  "admin.billing.payment_info_edit.title": "Edit Payment Information",
  "admin.billing.payment_info.add": "Add Payment Information",
  "admin.billing.payment_info.title": "Payment Information",
+ "admin.billing.subscription.privateCloudCard.contactSales": "Contact Sales",
+ "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.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.",

diff --git a/images/private-cloud-image.svg b/images/private-cloud-image.svg