From e065ad00169ae8132084dae939ad13b3aef2fdc6 Mon Sep 17 00:00:00 2001
From: Nikolay Yurchenko <nickolai.yurchenko@gmail.com>
Date: Mon, 11 Nov 2019 13:12:32 +0200
Subject: [PATCH] detailed usage charges info markup added (#3528)

---
 .../account/billing/BillingArea.vue           |  8 +-
 .../billing/{ => balance}/AccountBalance.vue  |  2 +-
 .../BillingHistory.vue                        |  4 +-
 .../{ => depositAndBilling}/BillingItem.vue   |  0
 .../DepositAndBilling.vue                     |  4 +-
 .../{ => depositAndBilling}/SortingHeader.vue |  0
 .../MonthlyBillingSummary.vue                 | 23 ++---
 .../monthlySummary/UsageChargeItem.vue        | 96 +++++++++++++++++++
 .../{ => paymentMethods}/CardComponent.vue    |  2 +-
 .../{ => paymentMethods}/CardDialog.vue       |  2 +-
 .../{ => paymentMethods}/PaymentMethods.vue   |  6 +-
 .../{ => paymentMethods}/StorjInput.vue       |  0
 .../{ => paymentMethods}/StripeInput.vue      |  0
 web/satellite/src/router/index.ts             |  2 +-
 14 files changed, 119 insertions(+), 30 deletions(-)
 rename web/satellite/src/components/account/billing/{ => balance}/AccountBalance.vue (98%)
 rename web/satellite/src/components/account/billing/{ => depositAndBilling}/BillingHistory.vue (95%)
 rename web/satellite/src/components/account/billing/{ => depositAndBilling}/BillingItem.vue (100%)
 rename web/satellite/src/components/account/billing/{ => depositAndBilling}/DepositAndBilling.vue (93%)
 rename web/satellite/src/components/account/billing/{ => depositAndBilling}/SortingHeader.vue (100%)
 rename web/satellite/src/components/account/billing/{ => monthlySummary}/MonthlyBillingSummary.vue (91%)
 create mode 100644 web/satellite/src/components/account/billing/monthlySummary/UsageChargeItem.vue
 rename web/satellite/src/components/account/billing/{ => paymentMethods}/CardComponent.vue (98%)
 rename web/satellite/src/components/account/billing/{ => paymentMethods}/CardDialog.vue (96%)
 rename web/satellite/src/components/account/billing/{ => paymentMethods}/PaymentMethods.vue (96%)
 rename web/satellite/src/components/account/billing/{ => paymentMethods}/StorjInput.vue (100%)
 rename web/satellite/src/components/account/billing/{ => paymentMethods}/StripeInput.vue (100%)

diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue
index f77db5de8..19feef24a 100644
--- a/web/satellite/src/components/account/billing/BillingArea.vue
+++ b/web/satellite/src/components/account/billing/BillingArea.vue
@@ -29,10 +29,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import AccountBalance from '@/components/account/billing/AccountBalance.vue';
-import DepositAndBilling from '@/components/account/billing/DepositAndBilling.vue';
-import MonthlyBillingSummary from '@/components/account/billing/MonthlyBillingSummary.vue';
-import PaymentMethods from '@/components/account/billing/PaymentMethods.vue';
+import AccountBalance from '@/components/account/billing/balance/AccountBalance.vue';
+import DepositAndBilling from '@/components/account/billing/depositAndBilling/DepositAndBilling.vue';
+import MonthlyBillingSummary from '@/components/account/billing/monthlySummary/MonthlyBillingSummary.vue';
+import PaymentMethods from '@/components/account/billing/paymentMethods/PaymentMethods.vue';
 
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 
diff --git a/web/satellite/src/components/account/billing/AccountBalance.vue b/web/satellite/src/components/account/billing/balance/AccountBalance.vue
similarity index 98%
rename from web/satellite/src/components/account/billing/AccountBalance.vue
rename to web/satellite/src/components/account/billing/balance/AccountBalance.vue
index 28660f163..b0ef7226a 100644
--- a/web/satellite/src/components/account/billing/AccountBalance.vue
+++ b/web/satellite/src/components/account/billing/balance/AccountBalance.vue
@@ -140,7 +140,7 @@ export default class AccountBalance extends Vue {
     }
 
     /deep/ .info__message-box {
-        background-image: url('../../../../static/images/account/billing/MessageBox.png');
+        background-image: url('../../../../../static/images/account/billing/MessageBox.png');
         background-repeat: no-repeat;
         min-height: 80px;
         min-width: 195px;
diff --git a/web/satellite/src/components/account/billing/BillingHistory.vue b/web/satellite/src/components/account/billing/depositAndBilling/BillingHistory.vue
similarity index 95%
rename from web/satellite/src/components/account/billing/BillingHistory.vue
rename to web/satellite/src/components/account/billing/depositAndBilling/BillingHistory.vue
index 92842f02d..ffda7103f 100644
--- a/web/satellite/src/components/account/billing/BillingHistory.vue
+++ b/web/satellite/src/components/account/billing/depositAndBilling/BillingHistory.vue
@@ -31,8 +31,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import BillingItem from '@/components/account/billing/BillingItem.vue';
-import SortingHeader from '@/components/account/billing/SortingHeader.vue';
+import BillingItem from '@/components/account/billing/depositAndBilling/BillingItem.vue';
+import SortingHeader from '@/components/account/billing/depositAndBilling/SortingHeader.vue';
 import VPagination from '@/components/common/VPagination.vue';
 
 import { RouteConfig } from '@/router';
diff --git a/web/satellite/src/components/account/billing/BillingItem.vue b/web/satellite/src/components/account/billing/depositAndBilling/BillingItem.vue
similarity index 100%
rename from web/satellite/src/components/account/billing/BillingItem.vue
rename to web/satellite/src/components/account/billing/depositAndBilling/BillingItem.vue
diff --git a/web/satellite/src/components/account/billing/DepositAndBilling.vue b/web/satellite/src/components/account/billing/depositAndBilling/DepositAndBilling.vue
similarity index 93%
rename from web/satellite/src/components/account/billing/DepositAndBilling.vue
rename to web/satellite/src/components/account/billing/depositAndBilling/DepositAndBilling.vue
index 4eb09f93f..a260d7896 100644
--- a/web/satellite/src/components/account/billing/DepositAndBilling.vue
+++ b/web/satellite/src/components/account/billing/depositAndBilling/DepositAndBilling.vue
@@ -19,8 +19,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import BillingItem from '@/components/account/billing/BillingItem.vue';
-import SortingHeader from '@/components/account/billing/SortingHeader.vue';
+import BillingItem from '@/components/account/billing/depositAndBilling/BillingItem.vue';
+import SortingHeader from '@/components/account/billing/depositAndBilling/SortingHeader.vue';
 
 import { RouteConfig } from '@/router';
 import { BillingHistoryItem } from '@/types/payments';
diff --git a/web/satellite/src/components/account/billing/SortingHeader.vue b/web/satellite/src/components/account/billing/depositAndBilling/SortingHeader.vue
similarity index 100%
rename from web/satellite/src/components/account/billing/SortingHeader.vue
rename to web/satellite/src/components/account/billing/depositAndBilling/SortingHeader.vue
diff --git a/web/satellite/src/components/account/billing/MonthlyBillingSummary.vue b/web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue
similarity index 91%
rename from web/satellite/src/components/account/billing/MonthlyBillingSummary.vue
rename to web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue
index 54ae85846..7b43db070 100644
--- a/web/satellite/src/components/account/billing/MonthlyBillingSummary.vue
+++ b/web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue
@@ -33,14 +33,7 @@
                     <span>Estimated total $82.44</span>
                 </div>
                 <div class="current-month-area__content__usage-charges__content" v-if="areUsageChargesShown" @click.stop>
-                    <div class="item">
-                        <span>Project 1</span>
-                        <span>$21.22</span>
-                    </div>
-                    <div class="item">
-                        <span>Project 2</span>
-                        <span>$12.88</span>
-                    </div>
+                    <UsageChargeItem class="item"></UsageChargeItem>
                 </div>
             </div>
         </div>
@@ -50,11 +43,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import UsageChargeItem from '@/components/account/billing/monthlySummary/UsageChargeItem.vue';
 import VButton from '@/components/common/VButton.vue';
 
 @Component({
     components: {
         VButton,
+        UsageChargeItem,
     },
 })
 export default class MonthlyBillingSummary extends Vue {
@@ -140,8 +135,8 @@ export default class MonthlyBillingSummary extends Vue {
             }
 
             &__usage-charges {
+                position: relative;
                 margin: 18px 0 0 0;
-                padding: 20px 20px 20px 20px;
                 background-color: #f5f6fa;
                 border-radius: 12px;
                 cursor: pointer;
@@ -150,6 +145,7 @@ export default class MonthlyBillingSummary extends Vue {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
+                    padding: 20px;
 
                     &__name {
                         display: flex;
@@ -163,18 +159,15 @@ export default class MonthlyBillingSummary extends Vue {
 
                 &__content {
                     cursor: default;
+                    max-height: 228px;
+                    overflow-y: auto;
+                    padding: 0 20px 20px 20px;
                 }
             }
         }
     }
 
     .item {
-        font-size: 16px;
-        line-height: 21px;
-        display: flex;
-        justify-content: space-between;
-        padding-top: 20px;
-        margin-top: 20px;
         border-top: 1px solid rgba(169, 181, 193, 0.3);
     }
 </style>
diff --git a/web/satellite/src/components/account/billing/monthlySummary/UsageChargeItem.vue b/web/satellite/src/components/account/billing/monthlySummary/UsageChargeItem.vue
new file mode 100644
index 000000000..14ce09d6a
--- /dev/null
+++ b/web/satellite/src/components/account/billing/monthlySummary/UsageChargeItem.vue
@@ -0,0 +1,96 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="usage-charge-item-container">
+        <div class="usage-charge-item-container__summary" @click="toggleDetailedInfo">
+            <div class="usage-charge-item-container__summary__name-container">
+                <svg class="usage-charge-item-container__summary__name-container__expand-image" v-if="!isDetailedInfoShown" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"/>
+                </svg>
+                <svg class="usage-charge-item-container__summary__name-container__expand-image" v-if="isDetailedInfoShown" width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"/>
+                </svg>
+                <span>Project 2</span>
+            </div>
+            <span class="small-font-size">$12.88</span>
+        </div>
+        <div class="usage-charge-item-container__detailed-info-container" v-if="isDetailedInfoShown">
+            <div class="usage-charge-item-container__detailed-info-container__item">
+                <span>Storage</span>
+                <span>$18.00</span>
+            </div>
+            <div class="usage-charge-item-container__detailed-info-container__item">
+                <span>Egress</span>
+                <span>$2.00</span>
+            </div>
+            <div class="usage-charge-item-container__detailed-info-container__item">
+                <span>Objects</span>
+                <span>$1.22</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class UsageChargeItem extends Vue {
+    public isDetailedInfoShown: boolean = false;
+
+    public toggleDetailedInfo(): void {
+        this.isDetailedInfoShown = !this.isDetailedInfoShown;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .usage-charge-item-container {
+        font-size: 16px;
+        line-height: 21px;
+        padding: 20px 0;
+
+        &__summary {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &__name-container {
+                display: flex;
+                align-items: center;
+
+                &__expand-image {
+                    width: 14px;
+                    height: 14px;
+                    margin-right: 12px;
+                }
+            }
+        }
+
+        &__detailed-info-container {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: space-between;
+            padding: 16px 0 0 26px;
+
+            &__item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                font-family: 'font_regular', sans-serif;
+                font-size: 14px;
+                line-height: 18px;
+                color: #6f7a83;
+                margin-top: 5px;
+            }
+        }
+    }
+
+    .small-font-size {
+        font-size: 14px;
+        line-height: 18px;
+    }
+</style>
diff --git a/web/satellite/src/components/account/billing/CardComponent.vue b/web/satellite/src/components/account/billing/paymentMethods/CardComponent.vue
similarity index 98%
rename from web/satellite/src/components/account/billing/CardComponent.vue
rename to web/satellite/src/components/account/billing/paymentMethods/CardComponent.vue
index 403391ae1..36fef147d 100644
--- a/web/satellite/src/components/account/billing/CardComponent.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/CardComponent.vue
@@ -38,7 +38,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import CardDialog from '@/components/account/billing/CardDialog.vue';
+import CardDialog from '@/components/account/billing/paymentMethods/CardDialog.vue';
 
 import AmericanExpressIcon from '@/../static/images/payments/cardIcons/americanexpress.svg';
 import DefaultIcon from '@/../static/images/payments/cardIcons/default.svg';
diff --git a/web/satellite/src/components/account/billing/CardDialog.vue b/web/satellite/src/components/account/billing/paymentMethods/CardDialog.vue
similarity index 96%
rename from web/satellite/src/components/account/billing/CardDialog.vue
rename to web/satellite/src/components/account/billing/paymentMethods/CardDialog.vue
index 0ab1e615c..ca0535a5f 100644
--- a/web/satellite/src/components/account/billing/CardDialog.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/CardDialog.vue
@@ -57,7 +57,7 @@ export default class CardDialog extends Vue {
         align-items: center;
         justify-content: flex-end;
         z-index: 100;
-        background-image: url('../../../../static/images/payments/Dialog.png');
+        background-image: url('../../../../../static/images/payments/Dialog.png');
         background-size: contain;
         width: 167px;
         height: 122px;
diff --git a/web/satellite/src/components/account/billing/PaymentMethods.vue b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
similarity index 96%
rename from web/satellite/src/components/account/billing/PaymentMethods.vue
rename to web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
index 2d5dac0d4..799638d05 100644
--- a/web/satellite/src/components/account/billing/PaymentMethods.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
@@ -66,9 +66,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import CardComponent from '@/components/account/billing/CardComponent.vue';
-import StorjInput from '@/components/account/billing/StorjInput.vue';
-import StripeInput from '@/components/account/billing/StripeInput.vue';
+import CardComponent from '@/components/account/billing/paymentMethods/CardComponent.vue';
+import StorjInput from '@/components/account/billing/paymentMethods/StorjInput.vue';
+import StripeInput from '@/components/account/billing/paymentMethods/StripeInput.vue';
 import VButton from '@/components/common/VButton.vue';
 
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
diff --git a/web/satellite/src/components/account/billing/StorjInput.vue b/web/satellite/src/components/account/billing/paymentMethods/StorjInput.vue
similarity index 100%
rename from web/satellite/src/components/account/billing/StorjInput.vue
rename to web/satellite/src/components/account/billing/paymentMethods/StorjInput.vue
diff --git a/web/satellite/src/components/account/billing/StripeInput.vue b/web/satellite/src/components/account/billing/paymentMethods/StripeInput.vue
similarity index 100%
rename from web/satellite/src/components/account/billing/StripeInput.vue
rename to web/satellite/src/components/account/billing/paymentMethods/StripeInput.vue
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 7f0b3cca2..364b1d79e 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -6,7 +6,7 @@ import Router, { RouteRecord } from 'vue-router';
 
 import AccountArea from '@/components/account/AccountArea.vue';
 import AccountBilling from '@/components/account/billing/BillingArea.vue';
-import BillingHistory from '@/components/account/billing/BillingHistory.vue';
+import BillingHistory from '@/components/account/billing/depositAndBilling/BillingHistory.vue';
 import ProfileArea from '@/components/account/ProfileArea.vue';
 import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
 import BucketArea from '@/components/buckets/BucketArea.vue';