Main card and no billing history view

components/admin_console/billing/billing_history.scss

@@ -0,0 +1,50 @@
+.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__noHistory {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 48px;
+}
+
+.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: 12px;
+}

components/admin_console/billing/billing_history.tsx

@@ -2,13 +2,41 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+import noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg';
+
+import './billing_history.scss';
 
 type Props = {
 
 };
 
+const noBillingHistorySection = (
+ <div className='BillingHistory__noHistory'>
+ <img
+ className='BillingHistory__noHistory-graphic'
+ src={noBillingHistoryGraphic}
+ />
+ <div className='BillingHistory__noHistory-message'>
+ <FormattedMessage
+ id='admin.billing.history.noBillingHistory'
+ defaultMessage='In the future, this is where your billing history will show.'
+ />
+ </div>
+ <a
+ href='http:https://www.google.com'
+ className='BillingHistory__noHistory-link'
+ >
+ <FormattedMessage
+ id='admin.billing.history.seeHowBillingWorks'
+ defaultMessage='See how billing works'
+ />
+ </a>
+ </div>
+);
+
 const BillingHistory: React.FC<Props> = () => {
  return (
  <div className='wrapper--fixed BillingHistory'>
@@ -18,8 +46,26 @@ const BillingHistory: React.FC<Props> = () => {
  />
  <div className='admin-console__wrapper'>
  <div className='admin-console__content'>
- <div style={{border: '1px solid #000', width: '100%', height: '463px'}}>
- {'Billing History Table View'}
+ <div className='BillingHistory__card'>
+ <div className='BillingHistory__cardHeader'>
+ <div className='BillingHistory__cardHeaderText'>
+ <div className='BillingHistory__cardHeaderText-top'>
+ <FormattedMessage
+ id='admin.billing.history.transactions'
+ defaultMessage='Transactions'
+ />
+ </div>
+ <div className='BillingHistory__cardHeaderText-bottom'>
+ <FormattedMessage
+ id='admin.billing.history.allPaymentsShowHere'
+ defaultMessage='All of your monthly payments will show here'
+ />
+ </div>
+ </div>
+ </div>
+ <div className='BillingHistory__cardBody'>
+ {noBillingHistorySection}
+ </div>
  </div>
  </div>
  </div>