Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
[MM-28211] Plan Details Card (#6582)
Browse files Browse the repository at this point in the history 
* WIP

* WIP

* Hookups to back-end (WIP)

* UX fixes

* Added the product info, still waiting on the actual SKUs for now

* Redux update and lint and translation fixes

* Update to 99.0%

* Lint fix

* Changes to incorporate free vs. paid tier

* Translation fix
  • Loading branch information
@devinbinnie
devinbinnie committed Oct 7, 2020
1 parent 07858e0 commit 5d7cb86
Show file tree
Hide file tree
Showing 7 changed files with 438 additions and 63 deletions.
4 changes: 4 additions & 0 deletions components/admin_console/billing/billing_subscriptions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@
width: 332px;
margin-left: 20px;
align-items: center;
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;
}

.UpgradeMattermostCloud__image {
Expand Down
74 changes: 14 additions & 60 deletions components/admin_console/billing/billing_subscriptions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {useState} from 'react';
import React, {useState, useEffect} from 'react';
import {useDispatch, useStore} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {Tooltip} from 'react-bootstrap';

import {getCloudSubscription, getCloudProducts} from 'mattermost-redux/actions/cloud';
import {DispatchFunc} from 'mattermost-redux/types/actions';

import AlertBanner from 'components/alert_banner';
import DropdownInput from 'components/dropdown_input';
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 PlanDetails from './plan_details';

import './billing_subscriptions.scss';
import BillingSummary from './billing_summary';

Expand Down Expand Up @@ -79,40 +81,18 @@ const privateCloudCard = () => (
const isFree = false;

const BillingSubscriptions: React.FC<Props> = () => {
const testTooltipLeft = (
<Tooltip
id='BillingSubscriptions__testTooltip'
className='BillingSubscriptions__tooltip BillingSubscriptions__tooltip-left'
>
<div className='BillingSubscriptions__tooltipTitle'>
{'Seat count overages'}
</div>
<div className='BillingSubscriptions__tooltipMessage'>
{'Prolonged overages may result in additional charges. See how billing works'}
</div>
</Tooltip>
);
const dispatch = useDispatch<DispatchFunc>();
const store = useStore();

const testTooltipRight = (
<Tooltip
id='BillingSubscriptions__testTooltip'
className='BillingSubscriptions__tooltip BillingSubscriptions__tooltip-right'
>
<div className='BillingSubscriptions__tooltipTitle'>
{'What are partial charges?'}
</div>
<div className='BillingSubscriptions__tooltipMessage'>
{'Users who have not been enabled for the full duration of the month are charged at a prorated monthly rate.'}
</div>
</Tooltip>
);
useEffect(() => {
getCloudSubscription()(dispatch, store.getState());
getCloudProducts()(dispatch, store.getState());
}, []);

const [showDanger, setShowDanger] = useState(true);
const [showWarning, setShowWarning] = useState(true);
const [showInfo, setShowInfo] = useState(true);

const [dropdownValue, setDropdownValue] = useState<{label: string, value: string} | undefined>(undefined);

return (
<div className='wrapper--fixed BillingSubscriptions'>
<FormattedAdminHeader
Expand Down Expand Up @@ -149,33 +129,7 @@ const BillingSubscriptions: React.FC<Props> = () => {
className='BillingSubscriptions__topWrapper'
style={{marginTop: '20px'}}
>
<div style={{border: '1px solid #000', width: '568px', padding: '8px', backgroundColor: '#fff'}}>
{'Plan Details Card'}
<DropdownInput
onChange={(value) => setDropdownValue(value)}
value={dropdownValue}
options={[{label: 'Option 1', value: 'option-1'}, {label: 'Option 2', value: 'option-2'}, {label: 'Option 3', value: 'option-3'}]}
legend={'Test dropdown'}
placeholder='Select item here'
name='BillingSubscriptions__testDropdown'
error={dropdownValue ? undefined : 'This field is required'}
/>
<br/>
<OverlayTrigger
delayShow={500}
placement='bottom'
overlay={testTooltipLeft}
>
<button>{'Left Side Test Button'}</button>
</OverlayTrigger>
<OverlayTrigger
delayShow={500}
placement='bottom'
overlay={testTooltipRight}
>
<button>{'Right Side Test Button'}</button>
</OverlayTrigger>
</div>
<PlanDetails/>
{isFree ? upgradeMattermostCloud() : <BillingSummary/>}
</div>
{privateCloudCard()}
Expand Down
144 changes: 144 additions & 0 deletions components/admin_console/billing/plan_details.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
.PlanDetails {
padding: 28px 32px;
border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
background: var(--sys-center-channel-bg);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
width: 568px;
border-radius: 4px;
}

.PlanDetails__top {
display: flex;
align-items: center;
}

.PlanDetails__productName {
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: var(--sys-center-channel-color);
}

.PlanDetails__userCount {
font-weight: 600;
font-size: 14px;
line-height: 20px;
margin-left: auto;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);

&.withinLimit {
color: var(--sys-sidebar-text-active-border);
}

&.overLimit {
color: var(--sys-error-text);
}
}

.PlanDetails__plan {
margin-top: 16px;
display: flex;
color: var(--sys-center-channel-color);
align-items: flex-end;
}

.PlanDetails__planName {
font-weight: 600;
font-size: 32px;
line-height: 32px;
}

.PlanDetails__planCaveat {
font-size: 14px;
line-height: 20px;
margin-left: 4px;
}

.PlanDetails__teamAndChannelCount {
margin-top: 24px;
font-weight: 600;
font-size: 12px;
line-height: 16px;
color: var(--sys-center-channel-color);
}

.PlanDetails__feature {
margin-top: 12px;
color: var(--sys-center-channel-color);
line-height: 16px;

i {
font-size: 14.4px;

&::before {
margin: 0;
}
}

span {
margin-left: 8px;
font-size: 12px;
}
}

.PlanDetails__currentPlan {
margin-top: 24px;
color: var(--sys-sidebar-text-active-border);
display: flex;
align-items: center;

i {
font-size: 18px;
line-height: 21px;

&::before {
margin: 0;
}
}

span {
margin-left: 8px;
font-weight: 600;
font-size: 14px;
line-height: 14px;
}
}

.PlanDetails__seatsAndSubscriptionDates {
margin-top: 24px;
font-size: 14px;
line-height: 20px;
color: var(--sys-center-channel-color);
}

.PlanDetails__seats {
font-weight: 600;
display: flex;
}

.PlanDetails__seats-registered {
margin-left: 4px;
color: rgba(var(--sys-center-channel-color-rgb), 0.56);

&.overLimit {
color: var(--sys-error-text);
}

i {
font-size: 14.4px;
line-height: 17px;
margin-left: 4px;

&::before {
margin: 0;
}
}
}

.PlanDetails__subscriptionDate {
margin-top: 8px;
}

#BillingSubscriptions__seatOverageTooltip {
margin-left: -5px;
}
Loading

0 comments on commit 5d7cb86

Please sign in to comment.