diff --git a/components/admin_console/billing/billing_history.scss b/components/admin_console/billing/billing_history.scss new file mode 100644 index 000000000000..bac9b2dcfd76 --- /dev/null +++ b/components/admin_console/billing/billing_history.scss @@ -0,0 +1,168 @@ +.BillingHistory__card { + 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; + color: var(--sys-center-channel-color); + width: 100%; + height: '463px'; +} + +.BillingHistory__cardHeader { + padding: 28px 32px 24px 32px; + border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08); + display: flex; + align-items: center; +} + +.BillingHistory__cardHeaderText-top { + font-weight: 600; + font-size: 16px; + line-height: 24px; +} + +.BillingHistory__cardHeaderText-bottom { + font-size: 14px; + line-height: 20px; +} + +.BillingHistory__cardBody { + padding: 20px; +} + +.BillingHistory__noHistory { + display: flex; + flex-direction: column; + align-items: center; +} + +.BillingHistory__noHistory-message { + margin-top: 24px; + font-size: 14px; + line-height: 20px; + color: var(--sys-center-channel-color); +} + +.BillingHistory__noHistory-link { + font-weight: 600; + font-size: 14px; + line-height: 14px; + color: var(--sys-button-bg); + margin-top: 20px; + margin-bottom: 40px; +} + +.BillingHistory__noHistory-graphic { + margin-top: 28px; +} + +.BillingHistory__table { + width: 100%; + + th, td { + padding: 8px 12px; + } +} + +.BillingHistory__table-header { + background: rgba(var(--sys-center-channel-color-rgb), 0.08); + line-height: 16px; + font-weight: 600; + border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16); + + &:last-child { + border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08); + } +} + +.BillingHistory__table-row { + border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08); + + &:nth-child(odd) { + background: rgba(var(--sys-center-channel-color-rgb), 0.04); + } +} + +.BillingHistory__table-bottomDesc { + margin-top: 4px; + color: rgba(var(--sys-center-channel-color-rgb), 0.56); + font-size: 12px; + line-height: 16px; +} + +.BillingHistory__table-headerTotal { + text-align: right; +} + +.BillingHistory__table-total { + font-weight: 600; + text-align: right; +} + +.BillingHistory__paymentStatus { + color: var(--sys-online-indicator); + + i { + font-size: 14.4px; + line-height: 17px; + + &::before { + margin: 0; + } + } + + span { + font-weight: 600; + margin-left: 4px; + } + + &.failed { + color: var(--sys-error-text); + } + + &.pending span { + color: rgba(var(--sys-center-channel-color-rgb), 0.48); + } +} + +.BillingHistory__table-invoice a { + &, &:link, &:visited, &:hover, &:focus, &:active { + text-decoration: none; + } +} + +.BillingHistory__paging { + display: flex; + justify-content: flex-end; + align-items: center; + margin-top: 4px; + + > span { + margin-right: 8px; + } + + button { + background: none; + border: none; + border-radius: 4px; + padding: 7px; + height: 32px; + margin-left: 4px; + + > i { + font-size: 18px; + + &::before { + margin: 0; + } + } + + &:disabled { + opacity: 0.6; + } + + &:hover:not(:disabled) { + background: rgba(var(--sys-center-channel-color-rgb), 0.08); + } + } +} diff --git a/components/admin_console/billing/billing_history.tsx b/components/admin_console/billing/billing_history.tsx index 292b8941a6af..1a694cd8a9a6 100644 --- a/components/admin_console/billing/billing_history.tsx +++ b/components/admin_console/billing/billing_history.tsx @@ -1,15 +1,200 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; +import React, {useState} from 'react'; +import {FormattedDate, FormattedMessage, FormattedNumber} from 'react-intl'; import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header'; +import FormattedMarkdownMessage from 'components/formatted_markdown_message'; +import noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg'; + +import './billing_history.scss'; type Props = { }; +const noBillingHistorySection = ( +
+ +
+ +
+ + + +
+); + +// TODO: Temp data +const billingInfo: any = [ + { + id: 1, + date: new Date(2020, 5, 16), + product_name: 'Mattermost Professional Cloud', + charge_desc: '50 users at full rate, 14 users with partial charges', + total: 125.5, + status: 'Payment failed', + }, + { + id: 2, + date: new Date(2020, 5, 6), + product_name: 'Mattermost Professional Cloud', + charge_desc: '50 users at full rate, 14 users with partial charges', + total: 125.5, + status: 'Pending', + invoice: 'http://www.google.com', + }, + { + id: 3, + date: new Date(2020, 5, 16), + product_name: 'Mattermost Professional Cloud', + charge_desc: '30 users at full rate, 14 users with partial charges', + total: 71.5, + status: 'Paid', + invoice: 'http://www.google.com', + }, + { + id: 4, + date: new Date(2020, 5, 6), + product_name: 'Mattermost Professional Cloud', + charge_desc: '30 users at full rate, 14 users with partial charges', + total: 71.5, + status: 'Paid', + invoice: 'http://www.google.com', + }, +]; + +const getPaymentStatus = (status: string) => { + switch (status) { + case 'Payment failed': + return ( +
+ + +
+ ); + case 'Pending': + return ( +
+ + +
+ ); + case 'Paid': + return ( +
+ + +
+ ); + default: + return null; + } +}; + const BillingHistory: React.FC = () => { + const [billingHistory, setBillingHistory] = useState(billingInfo); + + const showNoBillingHistoryView = () => { + setBillingHistory(undefined); + }; + + const previousPage = () => {}; + const nextPage = () => {}; + + const billingHistoryTable = billingHistory && ( + + + + + + + + + {billingHistory.map((info: any) => ( + + + + + + + + ))} +
+ + + + + + + + {''}
+ + +
{info.product_name}
+
{info.charge_desc}
+ 		+ + + {getPaymentStatus(info.status)} + + {info.invoice && + + + + } +
+ ); + return (
= () => { />
-
- {'Billing History Table View'} +
+
+
+
+ +
+
+ +
+
+
+
+ {billingHistory ? billingHistoryTable : noBillingHistorySection} +
+ + + +
+
+
diff --git a/i18n/en.json b/i18n/en.json index 4551e68ef7cc..5895cc617989 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -206,7 +206,19 @@ "admin.billing.company_info_edit.title": "Edit Company Information", "admin.billing.company_info.add": "Add Company Information", "admin.billing.company_info.title": "Company Information", + "admin.billing.history.allPaymentsShowHere": "All of your monthly payments will show here", + "admin.billing.history.date": "Date", + "admin.billing.history.description": "Description", + "admin.billing.history.noBillingHistory": "In the future, this is where your billing history will show.", + "admin.billing.history.pageInfo": "{startRecord} - {endRecord} of {totalRecords}", + "admin.billing.history.paid": "Paid", + "admin.billing.history.paymentFailed": "Payment failed", + "admin.billing.history.pending": "Pending", + "admin.billing.history.seeHowBillingWorks": "See how billing works", + "admin.billing.history.status": "Status", "admin.billing.history.title": "Billing History", + "admin.billing.history.total": "Total", + "admin.billing.history.transactions": "Transactions", "admin.billing.payment_info_edit.cancel": "Cancel", "admin.billing.payment_info_edit.save": "Save info", "admin.billing.payment_info_edit.title": "Edit Payment Information", 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +