From f2718734f663bf0c098f4872c8919f657ce6142a Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Mon, 15 Mar 2021 19:57:17 +0200
Subject: [PATCH] web/storagenode: bug fixes

WHAT:
- fix for wrong total held calcutation on refresh
- payout history year restrictions depends on selected satellite fixed
- payout history total changed if distributed amount > 0
- dark mode info icon colors changed
- option menu closing issue fixed

Change-Id: Ia289d51f081b782ae601722b7c05c3307f56541d
---
 .../src/app/components/OptionsDropdown.vue      | 17 +++++++++--------
 .../src/app/components/SNOHeader.vue            |  4 ++--
 .../app/components/payments/EstimationArea.vue  | 14 +++++++++++++-
 .../payments/PayoutHistoryPeriodCalendar.vue    |  5 +++--
 .../payments/PayoutHistoryTableItem.vue         |  2 +-
 web/storagenode/static/styles/_variables.scss   |  4 ++++
 .../__snapshots__/EstimationArea.spec.ts.snap   | 10 +++++-----
 .../PayoutHistoryTableItem.spec.ts.snap         |  4 ++--
 8 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/web/storagenode/src/app/components/OptionsDropdown.vue b/web/storagenode/src/app/components/OptionsDropdown.vue
index 8a836ca53..9573a31d1 100644
--- a/web/storagenode/src/app/components/OptionsDropdown.vue
+++ b/web/storagenode/src/app/components/OptionsDropdown.vue
@@ -3,11 +3,11 @@
 
 <template>
     <div class="options-dropdown" v-click-outside="close">
-        <input id="theme-switch" type="checkbox" v-model="darkMode" />
+        <input id="theme-switch" type="checkbox" v-model="isDarkMode" @change="close" />
         <label class="options-dropdown__mode" for="theme-switch">
-            <SunIcon class="icon" v-if="darkMode" />
+            <SunIcon class="icon" v-if="isDarkMode" />
             <MoonIcon class="icon" v-else />
-            {{ darkMode ? 'Light Mode' : 'Dark Mode' }}
+            {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
         </label>
     </div>
 </template>
@@ -31,7 +31,7 @@ export default class OptionsDropdown extends Vue {
     /**
      * Uses for switching mode.
      */
-    public darkMode: boolean = false;
+    public isDarkMode: boolean = false;
 
     /**
      * Lifecycle hook after initial render.
@@ -52,7 +52,7 @@ export default class OptionsDropdown extends Vue {
 
         htmlElement.setAttribute('theme', theme);
         const isDarkMode = theme === SNO_THEME.DARK;
-        this.darkMode = isDarkMode;
+        this.isDarkMode = isDarkMode;
         this.$store.dispatch(APPSTATE_ACTIONS.SET_DARK_MODE, isDarkMode);
     }
 
@@ -63,12 +63,12 @@ export default class OptionsDropdown extends Vue {
         this.$emit('closeDropdown');
     }
 
-    @Watch('darkMode')
+    @Watch('isDarkMode')
     private changeMode(): void {
-        this.$store.dispatch(APPSTATE_ACTIONS.SET_DARK_MODE, this.darkMode);
+        this.$store.dispatch(APPSTATE_ACTIONS.SET_DARK_MODE, this.isDarkMode);
         const htmlElement = document.documentElement;
 
-        if (this.darkMode) {
+        if (this.isDarkMode) {
             localStorage.setItem('theme', SNO_THEME.DARK);
             htmlElement.setAttribute('theme', SNO_THEME.DARK);
 
@@ -96,6 +96,7 @@ export default class OptionsDropdown extends Vue {
         font-family: 'font_regular', sans-serif;
         font-size: 14px;
         color: var(--regular-text-color);
+        cursor: pointer;
 
         &__mode {
             display: flex;
diff --git a/web/storagenode/src/app/components/SNOHeader.vue b/web/storagenode/src/app/components/SNOHeader.vue
index 553af254a..455799a15 100644
--- a/web/storagenode/src/app/components/SNOHeader.vue
+++ b/web/storagenode/src/app/components/SNOHeader.vue
@@ -181,7 +181,7 @@ export default class SNOHeader extends Vue {
         }
 
         try {
-            await this.$store.dispatch(PAYOUT_ACTIONS.GET_ESTIMATION, this.$store.state.node.selectedSatellite.id);
+            await this.$store.dispatch(PAYOUT_ACTIONS.GET_ESTIMATION, selectedSatelliteId);
         } catch (error) {
             console.error(error);
         }
@@ -190,7 +190,7 @@ export default class SNOHeader extends Vue {
 
         try {
             await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_INFO, selectedSatelliteId);
-            await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL);
+            await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL, selectedSatelliteId);
         } catch (error) {
             console.error(error.message);
         }
diff --git a/web/storagenode/src/app/components/payments/EstimationArea.vue b/web/storagenode/src/app/components/payments/EstimationArea.vue
index a9c815673..4cedb3f5c 100644
--- a/web/storagenode/src/app/components/payments/EstimationArea.vue
+++ b/web/storagenode/src/app/components/payments/EstimationArea.vue
@@ -4,7 +4,7 @@
 <template>
     <div class="estimation-container">
         <div class="estimation-container__header">
-            <p class="estimation-container__header__title">Info & Estimation,<span class="estimation-container__header__period">{{ currentPeriod }}</span></p>
+            <p class="estimation-container__header__title">Info & Estimation, <span class="estimation-container__header__period">{{ currentPeriod }}</span></p>
             <div class="estimation-container__header__selection-area">
                 <button
                     name="Select Current Period"
@@ -765,6 +765,18 @@ export default class EstimationArea extends Vue {
         }
     }
 
+    .checks-area-image {
+        cursor: pointer;
+
+        rect {
+            fill: var(--info-icon-background);
+        }
+
+        path {
+            fill: var(--info-icon-letter);
+        }
+    }
+
     @media screen and (max-width: 870px) {
 
         .estimation-container {
diff --git a/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue b/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
index d57531b0c..d78093d45 100644
--- a/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
+++ b/web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
@@ -135,9 +135,10 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
      * Decrement year and updates current months set.
      */
     public decrementYear(): void {
-        const isSelectedYearFirstForNodeInSatellite = this.displayedYear === this.$store.state.node.selectedSatellite.joinDate.getUTCFullYear();
+        const availableYears: number[] = this.$store.state.payoutModule.payoutHistoryAvailablePeriods.map(payoutPeriod => payoutPeriod.year);
+        const minYear: number = Math.min(...availableYears);
 
-        if (isSelectedYearFirstForNodeInSatellite) return;
+        if (this.displayedYear === minYear) return;
 
         this.displayedYear -= 1;
         this.populateMonths(this.displayedYear);
diff --git a/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue b/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
index 1e450e137..72b00d686 100644
--- a/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
+++ b/web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
@@ -95,7 +95,7 @@
                             </a>
                             <ShareIcon class="payout-history-item__expanded-area__right-area__footer__transaction__icon" />
                         </div>
-                        <p class="payout-history-item__expanded-area__right-area__footer__total">{{ historyItem.paid | centsToDollars }}</p>
+                        <p class="payout-history-item__expanded-area__right-area__footer__total">{{ (historyItem.distributed > 0 ? historyItem.distributed : historyItem.paid) | centsToDollars }}</p>
                     </div>
                 </div>
             </div>
diff --git a/web/storagenode/static/styles/_variables.scss b/web/storagenode/static/styles/_variables.scss
index f0c4c382e..d9ec50af6 100644
--- a/web/storagenode/static/styles/_variables.scss
+++ b/web/storagenode/static/styles/_variables.scss
@@ -58,6 +58,8 @@
     --error-page-background-color: #f2f2f3;
     --error-page-text-color: #000;
     --error-page-button-background: #133e9c;
+    --info-icon-background: #5a667c;
+    --info-icon-letter: white;
     --wallet-feature-opted-in: #00ce7d;
     --error-page-image-path: url('../../static/images/errors/404.png');
     --tooltip-background-path: url('../../static/images/tooltipBack.png');
@@ -124,6 +126,8 @@
     --error-page-background-color: #1f2026;
     --error-page-text-color: #fff;
     --error-page-button-background: #565b6b;
+    --info-icon-background: white;
+    --info-icon-letter: #5a667c;
     --wallet-feature-opted-in: #00ce7d;
     --error-page-image-path: url('../../static/images/errors/404Dark.png');
     --tooltip-background-path: url('../../static/images/tooltipBackDark.png');
diff --git a/web/storagenode/tests/unit/components/payments/__snapshots__/EstimationArea.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/EstimationArea.spec.ts.snap
index 18c55c49e..d21d2cc62 100644
--- a/web/storagenode/tests/unit/components/payments/__snapshots__/EstimationArea.spec.ts.snap
+++ b/web/storagenode/tests/unit/components/payments/__snapshots__/EstimationArea.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`EstimationArea renders correctly with actual values and current period 1`] = `
 <div class="estimation-container">
   <div class="estimation-container__header">
-    <p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Feb 2020</span></p>
+    <p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Feb 2020</span></p>
     <div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item active">
         <p class="estimation-container__header__selection-area__item__label long-text">
           Current Period
@@ -141,7 +141,7 @@ exports[`EstimationArea renders correctly with actual values and current period
 exports[`EstimationArea renders correctly with actual values and current period and not first day on month 1`] = `
 <div class="estimation-container">
   <div class="estimation-container__header">
-    <p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Feb 2020</span></p>
+    <p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Feb 2020</span></p>
     <div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item active">
         <p class="estimation-container__header__selection-area__item__label long-text">
           Current Period
@@ -287,7 +287,7 @@ exports[`EstimationArea renders correctly with actual values and current period
 exports[`EstimationArea renders correctly with actual values and historical period with paystub 1`] = `
 <div class="estimation-container">
   <div class="estimation-container__header">
-    <p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Jan 2020</span></p>
+    <p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
     <div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
         <p class="estimation-container__header__selection-area__item__label long-text">
           Current Period
@@ -442,7 +442,7 @@ exports[`EstimationArea renders correctly with actual values and historical peri
 exports[`EstimationArea renders correctly with actual values and historical period without paystub 1`] = `
 <div class="estimation-container">
   <div class="estimation-container__header">
-    <p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Jan 2020</span></p>
+    <p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
     <div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
         <p class="estimation-container__header__selection-area__item__label long-text">
           Current Period
@@ -467,7 +467,7 @@ exports[`EstimationArea renders correctly with actual values and historical peri
 exports[`EstimationArea renders correctly with actual values and previous period without paystub 1`] = `
 <div class="estimation-container">
   <div class="estimation-container__header">
-    <p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Jan 2020</span></p>
+    <p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
     <div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
         <p class="estimation-container__header__selection-area__item__label long-text">
           Current Period
diff --git a/web/storagenode/tests/unit/components/payments/__snapshots__/PayoutHistoryTableItem.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/PayoutHistoryTableItem.spec.ts.snap
index a50d8067f..d1d8aaf5b 100644
--- a/web/storagenode/tests/unit/components/payments/__snapshots__/PayoutHistoryTableItem.spec.ts.snap
+++ b/web/storagenode/tests/unit/components/payments/__snapshots__/PayoutHistoryTableItem.spec.ts.snap
@@ -85,7 +85,7 @@ exports[`PayoutHistoryTableItem renders correctly with actual values (eth) 2`] =
             </a>
             <shareicon-stub class="payout-history-item__expanded-area__right-area__footer__transaction__icon"></shareicon-stub>
           </div>
-          <p class="payout-history-item__expanded-area__right-area__footer__total">$0.80</p>
+          <p class="payout-history-item__expanded-area__right-area__footer__total">$0.30</p>
         </div>
       </div>
     </div>
@@ -161,7 +161,7 @@ exports[`PayoutHistoryTableItem renders correctly with actual values (zksync) 1`
             </a>
             <shareicon-stub class="payout-history-item__expanded-area__right-area__footer__transaction__icon"></shareicon-stub>
           </div>
-          <p class="payout-history-item__expanded-area__right-area__footer__total">$0.80</p>
+          <p class="payout-history-item__expanded-area__right-area__footer__total">$0.30</p>
         </div>
       </div>
     </div>