[MM-28214] Billing Summary - Last Invoice View (mattermost#6900)

* WIP * Styling for billing summary card * WIP * Remove mock data * Changed to use integer storage for price values * Use type from the InvoiceListItem object instead of the metadata * Redux update * Added pending state for billing summary * Translation fix
Revanth47 · Oct 26, 2020 · 93e7c5d · 93e7c5d
1 parent 33319f4
commit 93e7c5d
Show file tree

Hide file tree

Showing 4 changed files with 387 additions and 4 deletions.
diff --git a/components/admin_console/billing/billing_history.tsx b/components/admin_console/billing/billing_history.tsx
@@ -184,8 +184,8 @@ const BillingHistory: React.FC<Props> = () => {
  <th>{''}</th>
  </tr>
  {billingHistory.map((invoice: Invoice) => {
- const fullUsers = invoice.line_items.filter((item) => item.metadata.type === 'full').reduce((val, item) => val + item.quantity, 0);
- const partialUsers = invoice.line_items.filter((item) => item.metadata.type === 'partial').reduce((val, item) => val + item.quantity, 0);
+ const fullUsers = invoice.line_items.filter((item) => item.type === 'full').reduce((val, item) => val + item.quantity, 0);
+ const partialUsers = invoice.line_items.filter((item) => item.type === 'partial').reduce((val, item) => val + item.quantity, 0);
 
  return (
  <tr

diff --git a/components/admin_console/billing/billing_summary.scss b/components/admin_console/billing/billing_summary.scss
@@ -40,3 +40,146 @@
  margin-top: 16px;
  margin-bottom: 24px;
 }
+
+.BillingSummary__lastInvoice {
+ color: var(--sys-center-channel-color);
+
+ hr {
+ margin: 12px 0;
+ border-color: rgba(var(--sys-center-channel-color-rgb), 0.32);
+ }
+}
+
+.BillingSummary__lastInvoice-header {
+ display: flex;
+ align-items: center;
+}
+
+.BillingSummary__lastInvoice-headerTitle {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 28px;
+}
+
+.BillingSummary__lastInvoice-headerStatus {
+ margin-left: auto;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+
+ &.paid {
+ color: var(--sys-online-indicator);
+ }
+
+ &.failed {
+ color: var(--sys-error-text);
+ }
+
+ &.pending {
+ color: rgba(var(--sys-center-channel-color-rgb), 0.48);
+ }
+
+ i {
+ margin-left: 4px;
+ font-size: 14.4px;
+
+ &::before {
+ margin: 0;
+ }
+ }
+}
+
+.BillingSummary__lastInvoice-date {
+ margin-top: 8px;
+ color: rgba(var(--sys-center-channel-color-rgb), 0.72);
+}
+
+.BillingSummary__lastInvoice-productName {
+ margin-top: 32px;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 24px;
+}
+
+.BillingSummary__lastInvoice-charge {
+ display: flex;
+ margin: 12px 0;
+
+ &.total {
+ font-weight: 600;
+ }
+}
+
+.BillingSummary__lastInvoice-chargeAmount {
+ margin-left: auto;
+}
+
+.BillingSummary__lastInvoice-partialCharges {
+ font-size: 12px;
+ line-height: 16px;
+ color: rgba(var(--sys-center-channel-color-rgb), 0.56);
+
+ & + .BillingSummary__lastInvoice-charge {
+ margin-top: 4px;
+ }
+}
+
+.BillingSummary__lastInvoice-download {
+ margin-top: 32px;
+ margin-bottom: 16px;
+}
+
+.BillingSummary__lastInvoice-downloadButton {
+ background: var(--sys-button-bg);
+ padding: 11px 20px;
+ border-radius: 4px;
+ width: fit-content;
+ display: flex;
+ color: var(--sys-button-color);
+ align-items: center;
+
+ &:hover:not(.disabled) {
+ background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.16), rgba(var(--sys-center-channel-color-rgb), 0.16)), var(--sys-button-bg);
+ text-decoration: none;
+ color: var(--sys-button-color);
+ }
+
+ &:active {
+ background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.32), rgba(var(--sys-center-channel-color-rgb), 0.32)), var(--sys-button-bg);
+ text-decoration: none;
+ color: var(--sys-button-color);
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 2px var(--sys-sidebar-text-active-border);
+ text-decoration: none;
+ color: var(--sys-button-color);
+ }
+
+ &.disabled {
+ color: rgba(var(--sys-center-channel-color-rgb), 0.32);
+ background: rgba(var(--sys-center-channel-color-rgb), 0.08);
+ }
+
+ > i {
+ font-size: 18px;
+ line-height: 21px;
+
+ &::before {
+ margin: 0;
+ }
+ }
+
+ > span {
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 14px;
+ margin-left: 8px;
+ }
+}
+
+.BillingSummary__lastInvoice-billingHistory {
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 9.5px;
+}