From 21f3a68de577341290a5667ac77b9b99ab0d933c Mon Sep 17 00:00:00 2001
From: Vitalii Shpital <46756926+VitaliiShpital@users.noreply.github.com>
Date: Tue, 5 Nov 2019 13:05:20 +0200
Subject: [PATCH] web/satellite: removed redundant functionality from billing
 page (#3444)

---
 .../account/billing/AccountBalance.vue        | 18 ------
 .../account/billing/DepositAndBilling.vue     |  1 +
 .../account/billing/MonthlyBillingSummary.vue | 56 -------------------
 .../account/billing/PaymentMethods.vue        |  2 +-
 4 files changed, 2 insertions(+), 75 deletions(-)

diff --git a/web/satellite/src/components/account/billing/AccountBalance.vue b/web/satellite/src/components/account/billing/AccountBalance.vue
index 566e191fd..221042fc2 100644
--- a/web/satellite/src/components/account/billing/AccountBalance.vue
+++ b/web/satellite/src/components/account/billing/AccountBalance.vue
@@ -24,13 +24,6 @@
                     {{balance}}
                 </b>
             </span>
-            <VButton
-                class="button"
-                label="Earn Credits"
-                width="153px"
-                height="48px"
-                :on-press="onEarnCredits"
-            />
         </div>
     </div>
 </template>
@@ -38,7 +31,6 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import VButton from '@/components/common/VButton.vue';
 import VInfo from '@/components/common/VInfo.vue';
 
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
@@ -51,7 +43,6 @@ const {
 @Component({
     components: {
         VInfo,
-        VButton,
     },
 })
 export default class AccountBalance extends Vue {
@@ -94,14 +85,6 @@ export default class AccountBalance extends Vue {
         color: #354049;
     }
 
-    .button {
-
-        &:hover {
-            background-color: #0059d0;
-            box-shadow: none;
-        }
-    }
-
     .account-balance-area {
         display: flex;
         align-items: center;
@@ -146,7 +129,6 @@ export default class AccountBalance extends Vue {
             align-items: center;
 
             &__balance {
-                margin-right: 27px;
                 font-size: 18px;
                 color: rgba(53, 64, 73, 0.5);
 
diff --git a/web/satellite/src/components/account/billing/DepositAndBilling.vue b/web/satellite/src/components/account/billing/DepositAndBilling.vue
index 75a04e12d..260c0bb93 100644
--- a/web/satellite/src/components/account/billing/DepositAndBilling.vue
+++ b/web/satellite/src/components/account/billing/DepositAndBilling.vue
@@ -11,6 +11,7 @@
         <BillingItem
             v-for="item in billingHistoryItems"
             :billing-item="item"
+            :key="item.id"
         />
     </div>
 </template>
diff --git a/web/satellite/src/components/account/billing/MonthlyBillingSummary.vue b/web/satellite/src/components/account/billing/MonthlyBillingSummary.vue
index c2947393b..54ae85846 100644
--- a/web/satellite/src/components/account/billing/MonthlyBillingSummary.vue
+++ b/web/satellite/src/components/account/billing/MonthlyBillingSummary.vue
@@ -43,30 +43,6 @@
                     </div>
                 </div>
             </div>
-            <div class="current-month-area__content__referral-credits" @click="toggleReferralCreditsPopup">
-                <div class="current-month-area__content__referral-credits__head">
-                    <div class="current-month-area__content__referral-credits__head__name">
-                        <svg class="current-month-area__content__referral-credits__head__name__image" v-if="!areReferralCreditsShown" 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="current-month-area__content__referral-credits__head__name__image" v-if="areReferralCreditsShown" 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>Referral Credits</span>
-                    </div>
-                    <span>(+$20.00)</span>
-                </div>
-                <div class="current-month-area__content__referral-credits__content" v-if="areReferralCreditsShown" @click.stop>
-                    <div class="item">
-                        <span>Credit 1</span>
-                        <span>$21.22</span>
-                    </div>
-                    <div class="item">
-                        <span>Credit 2</span>
-                        <span>$12.88</span>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </template>
@@ -83,7 +59,6 @@ import VButton from '@/components/common/VButton.vue';
 })
 export default class MonthlyBillingSummary extends Vue {
     private areUsageChargesShown: boolean = false;
-    private areReferralCreditsShown: boolean = false;
 
     public get currentPeriod(): string {
         const months: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -102,10 +77,6 @@ export default class MonthlyBillingSummary extends Vue {
     public toggleUsageChargesPopup(): void {
         this.areUsageChargesShown = !this.areUsageChargesShown;
     }
-
-    public toggleReferralCreditsPopup(): void {
-        this.areReferralCreditsShown = !this.areReferralCreditsShown;
-    }
 }
 </script>
 
@@ -194,33 +165,6 @@ export default class MonthlyBillingSummary extends Vue {
                     cursor: default;
                 }
             }
-
-            &__referral-credits {
-                margin: 18px 0 12px 0;
-                padding: 20px 20px 20px 20px;
-                background-color: #f5f6fa;
-                border-radius: 12px;
-                cursor: pointer;
-
-                &__head {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-
-                    &__name {
-                        display: flex;
-                        align-items: center;
-
-                        &__image {
-                            margin-right: 12px;
-                        }
-                    }
-                }
-
-                &__content {
-                    cursor: default;
-                }
-            }
         }
     }
 
diff --git a/web/satellite/src/components/account/billing/PaymentMethods.vue b/web/satellite/src/components/account/billing/PaymentMethods.vue
index bc8be6901..2d5dac0d4 100644
--- a/web/satellite/src/components/account/billing/PaymentMethods.vue
+++ b/web/satellite/src/components/account/billing/PaymentMethods.vue
@@ -203,7 +203,7 @@ export default class PaymentMethods extends Vue {
 
     .payment-methods-area {
         padding: 40px;
-        margin-bottom: 47px;
+        margin-bottom: 32px;
         background-color: #fff;
         border-radius: 8px;
         font-family: 'font_regular', sans-serif;