From 9a72b5fde962cbf1a7c9a3f4f1e242f727929aff Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Wed, 1 Apr 2020 13:25:41 +0300
Subject: [PATCH] web/storagenode: byte*h to byte*month conversion

Change-Id: Iec95e0d6d946426df38e5725af3a889c6d81b23a
---
 .../components/payments/EstimationArea.vue    | 51 +++++++++++++++----
 web/storagenode/src/app/views/PayoutArea.vue  |  5 ++
 2 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/web/storagenode/src/app/components/payments/EstimationArea.vue b/web/storagenode/src/app/components/payments/EstimationArea.vue
index 372b08d1a..39be6aef9 100644
--- a/web/storagenode/src/app/components/payments/EstimationArea.vue
+++ b/web/storagenode/src/app/components/payments/EstimationArea.vue
@@ -49,7 +49,19 @@
                     <p class="estimation-table-container__info-area__text">{{ item.payout | centsToDollars }}</p>
                 </div>
             </div>
-            <div class="estimation-table-container__held-area">
+            <div class="estimation-table-container__info-area" v-if="isCurrentPeriod">
+                <div class="column justify-start column-1">
+                    <p class="estimation-table-container__info-area__text">Gross Total</p>
+                </div>
+                <div class="column justify-start column-2"></div>
+                <div class="column justify-start column-3"></div>
+                <div class="column justify-start column-4"></div>
+                <div class="column justify-start column-5"></div>
+                <div class="column justify-end column-6">
+                    <p class="estimation-table-container__info-area__text">{{ grossTotal | centsToDollars }}</p>
+                </div>
+            </div>
+            <div class="estimation-table-container__held-area" v-if="isSomeSatelliteSelected">
                 <p class="estimation-table-container__held-area__text">{{ heldInfo.surgePercent }}% Held back</p>
                 <p class="estimation-table-container__held-area__text">-{{ held | centsToDollars }}</p>
             </div>
@@ -72,7 +84,7 @@
         </div>
         <div class="estimation-container__payout-area" v-if="isCurrentPeriod">
             <div class="estimation-container__payout-area__left-area">
-                <p class="title-text">Estimated Payout</p>
+                <p class="title-text">Estimated {{ !isSomeSatelliteSelected ? 'Gross' : null }} Payout</p>
                 <p class="additional-text">At the end of the month if the load keeps the same for the rest of the month.</p>
             </div>
             <div class="estimation-container__payout-area__right-area">
@@ -104,6 +116,7 @@ class EstimationTableRow {
     ) {}
 }
 
+// TODO: change calculations.
 @Component ({
     components: {
         EstimationPeriodDropdown,
@@ -126,6 +139,10 @@ export default class EstimationArea extends Vue {
         return !this.$store.state.payoutModule.periodRange.start && isCurrentMonthSelected;
     }
 
+    public get isSomeSatelliteSelected(): boolean {
+        return !!this.$store.state.node.selectedSatellite.id;
+    }
+
     /**
      * Returns estimated payout depends on bandwidth and disk space in current month.
      */
@@ -160,10 +177,12 @@ export default class EstimationArea extends Vue {
     @Watch('isCurrentPeriod')
     @Watch('heldInfo')
     public get held(): number {
+        if (this.isSomeSatelliteSelected) {
+            return 0;
+        }
+
         if (this.isCurrentPeriod) {
-            return (this.currentBandwidthDownload * this.BANDWIDTH_DOWNLOAD_PRICE_PER_TB
-                + this.currentBandwidthAuditAndRepair * this.BANDWIDTH_REPAIR_PRICE_PER_TB
-                + this.currentDiskSpace * this.DISK_SPACE_PRICE_PER_TB) / TB * this.heldInfo.surgePercent / 100;
+            return this.grossTotal * this.heldInfo.surgePercent / 100;
         }
 
         return this.heldInfo.held;
@@ -176,15 +195,23 @@ export default class EstimationArea extends Vue {
     @Watch('heldInfo')
     public get totalPayout(): number {
         if (this.isCurrentPeriod) {
-            return (this.currentBandwidthDownload * this.BANDWIDTH_DOWNLOAD_PRICE_PER_TB
-                + this.currentBandwidthAuditAndRepair * this.BANDWIDTH_REPAIR_PRICE_PER_TB
-                + this.currentDiskSpace * this.DISK_SPACE_PRICE_PER_TB) / TB
-                - this.held;
+            return this.grossTotal - this.held;
         }
 
         return this.$store.getters.totalPeriodPayout;
     }
 
+    /**
+     * Returns calculated gross payout by selected period.
+     */
+    @Watch('isCurrentPeriod')
+    @Watch('heldInfo')
+    public get grossTotal(): number {
+        return (this.currentBandwidthDownload * this.BANDWIDTH_DOWNLOAD_PRICE_PER_TB
+            + this.currentBandwidthAuditAndRepair * this.BANDWIDTH_REPAIR_PRICE_PER_TB
+            + this.currentDiskSpace * this.DISK_SPACE_PRICE_PER_TB) / TB;
+    }
+
     /**
      * Returns calculated or stored total used disk space by selected period.
      */
@@ -205,7 +232,7 @@ export default class EstimationArea extends Vue {
     @Watch('heldInfo')
     public get totalBandwidth(): string {
         if (this.isCurrentPeriod) {
-            return formatBytes(this.currentBandwidthAuditAndRepair + this.currentBandwidthDownload);
+            return formatBytes((this.currentBandwidthAuditAndRepair + this.currentBandwidthDownload));
         }
 
         const bandwidthSum = this.heldInfo.usageGet + this.heldInfo.usageGetRepair + this.heldInfo.usageGetAudit;
@@ -238,7 +265,9 @@ export default class EstimationArea extends Vue {
     private get currentDiskSpace(): number {
         if (!this.$store.state.node.storageChartData) return 0;
 
-        return this.$store.state.node.storageChartData.map(data => data.atRestTotal).reduce((previous, current) => previous + current, 0);
+        const approxHourInMonth = 730;
+
+        return this.$store.state.node.storageChartData.map(data => data.atRestTotal).reduce((previous, current) => previous + current, 0) / approxHourInMonth;
     }
 
     /**
diff --git a/web/storagenode/src/app/views/PayoutArea.vue b/web/storagenode/src/app/views/PayoutArea.vue
index 3f0c24c39..0bd02303f 100644
--- a/web/storagenode/src/app/views/PayoutArea.vue
+++ b/web/storagenode/src/app/views/PayoutArea.vue
@@ -49,7 +49,10 @@ import SatelliteSelection from '@/app/components/SatelliteSelection.vue';
 
 import BackArrowIcon from '@/../static/images/notifications/backArrow.svg';
 
+import { NODE_ACTIONS } from '@/app/store/modules/node';
+import { NOTIFICATIONS_ACTIONS } from '@/app/store/modules/notifications';
 import { PAYOUT_ACTIONS } from '@/app/store/modules/payout';
+import { NotificationsCursor } from '@/app/types/notifications';
 import { SatelliteInfo } from '@/storagenode/dashboard';
 
 @Component ({
@@ -69,6 +72,8 @@ export default class PayoutArea extends Vue {
      */
     public async mounted(): Promise<any> {
         try {
+            await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, new NotificationsCursor(1));
+            await this.$store.dispatch(NODE_ACTIONS.SELECT_SATELLITE, null);
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO, this.$store.state.node.selectedSatellite.id);
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL);
         } catch (error) {