From 176d643360a0ca311d81b4638f6723935d9f25fd Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Tue, 18 Feb 2020 19:41:01 +0200
Subject: [PATCH] web/storagenode: payments markup

Change-Id: Ifb65f126408e9593febff153f88abf0aa3644b79
---
 web/storagenode/package.json                  |   3 +-
 .../src/app/components/SNOContentFilling.vue  |  55 ++++-
 .../components/payments/EstimationArea.vue    | 111 +++++++++
 .../payments/EstimationPeriodDropdown.vue     |  81 +++++++
 .../components/payments/EstimationTable.vue   | 189 +++++++++++++++
 .../components/payments/HeldHistoryTable.vue  | 126 ++++++++++
 .../app/components/payments/HeldProgress.vue  | 158 +++++++++++++
 .../payments/PayoutPeriodCalendar.vue         | 217 ++++++++++++++++++
 .../app/components/payments/SingleInfo.vue    |  51 ++++
 web/storagenode/src/app/router/index.ts       |   7 +
 web/storagenode/src/app/views/PayoutArea.vue  | 160 +++++++++++++
 .../static/images/BlackArrowExpand.svg        |   3 +
 .../static/images/BlackArrowHide.svg          |   3 +
 .../static/images/BlueArrowRight.svg          |   3 +
 .../static/images/payments/GrayArrowLeft.svg  |   3 +
 15 files changed, 1167 insertions(+), 3 deletions(-)
 create mode 100644 web/storagenode/src/app/components/payments/EstimationArea.vue
 create mode 100644 web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
 create mode 100644 web/storagenode/src/app/components/payments/EstimationTable.vue
 create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryTable.vue
 create mode 100644 web/storagenode/src/app/components/payments/HeldProgress.vue
 create mode 100644 web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
 create mode 100644 web/storagenode/src/app/components/payments/SingleInfo.vue
 create mode 100644 web/storagenode/src/app/views/PayoutArea.vue
 create mode 100644 web/storagenode/static/images/BlackArrowExpand.svg
 create mode 100644 web/storagenode/static/images/BlackArrowHide.svg
 create mode 100644 web/storagenode/static/images/BlueArrowRight.svg
 create mode 100644 web/storagenode/static/images/payments/GrayArrowLeft.svg

diff --git a/web/storagenode/package.json b/web/storagenode/package.json
index 43fc30424..ae90f5a96 100644
--- a/web/storagenode/package.json
+++ b/web/storagenode/package.json
@@ -79,7 +79,8 @@
       "selector-pseudo-class-parentheses-space-inside": "never",
       "selector-max-type": 1,
       "font-family-no-missing-generic-family-keyword": true,
-      "at-rule-no-unknown": true,
+      "at-rule-no-unknown": null,
+      "scss/at-rule-no-unknown": true,
       "media-feature-range-operator-space-before": "always",
       "media-feature-range-operator-space-after": "always",
       "media-feature-parentheses-space-inside": "never",
diff --git a/web/storagenode/src/app/components/SNOContentFilling.vue b/web/storagenode/src/app/components/SNOContentFilling.vue
index 7c0e57a7b..8251d73bf 100644
--- a/web/storagenode/src/app/components/SNOContentFilling.vue
+++ b/web/storagenode/src/app/components/SNOContentFilling.vue
@@ -3,7 +3,7 @@
 
 <template>
     <div class="info-area">
-        <SatelliteSelection/>
+        <SatelliteSelection />
         <div v-if="isDisqualifiedInfoShown" class="info-area__disqualified-info">
             <LargeDisqualificationIcon
                 class="info-area__disqualified-info__image"
@@ -88,11 +88,21 @@
                 />
             </div>
         </div>
-        <p class="info-area__title">Payout</p>
+<!--        <div class="info-area__payout-header">-->
+<!--            <p class="info-area__title">Payout</p>-->
+<!--            <router-link :to="PAYOUT_PATH" class="info-area__payout-header__link">-->
+<!--                <p class="info-area__payout-header__link__text">Payout Information</p>-->
+<!--                <BlueArrowRight />-->
+<!--            </router-link>-->
+<!--        </div>-->
         <PayoutArea
             label="STORJ Wallet Address"
             :wallet-address="wallet"
         />
+<!--        <section class="info-area__total-info-area">-->
+<!--            <SingleInfo width="48%" label="Total Earnings, Feb" value="$1.99" />-->
+<!--            <SingleInfo width="48%" label="Total Held Amount" value="$19.93" />-->
+<!--        </section>-->
     </div>
 </template>
 
@@ -105,11 +115,15 @@ import ChecksArea from '@/app/components/ChecksArea.vue';
 import DiskSpaceChart from '@/app/components/DiskSpaceChart.vue';
 import EgressChart from '@/app/components/EgressChart.vue';
 import IngressChart from '@/app/components/IngressChart.vue';
+import EstimationArea from '@/app/components/payments/EstimationArea.vue';
+import SingleInfo from '@/app/components/payments/SingleInfo.vue';
 import PayoutArea from '@/app/components/PayoutArea.vue';
 import SatelliteSelection from '@/app/components/SatelliteSelection.vue';
 
+import BlueArrowRight from '@/../static/images/BlueArrowRight.svg';
 import LargeDisqualificationIcon from '@/../static/images/largeDisqualify.svg';
 
+import { RouteConfig } from '@/app/router';
 import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
 import { formatBytes } from '@/app/utils/converter';
 import { BandwidthInfo, DiskSpaceInfo, SatelliteInfo } from '@/storagenode/dashboard';
@@ -129,6 +143,7 @@ class Checks {
 
 @Component ({
     components: {
+        EstimationArea,
         EgressChart,
         IngressChart,
         SatelliteSelection,
@@ -138,9 +153,12 @@ class Checks {
         ChecksArea,
         PayoutArea,
         LargeDisqualificationIcon,
+        BlueArrowRight,
+        SingleInfo,
     },
 })
 export default class SNOContentFilling extends Vue {
+    public readonly PAYOUT_PATH: string = RouteConfig.Payout.path;
     public chartWidth: number = 0;
     public chartHeight: number = 0;
 
@@ -383,6 +401,27 @@ export default class SNOContentFilling extends Vue {
             }
         }
 
+        &__payout-header {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            &__link {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-end;
+
+                &__text {
+                    font-size: 16px;
+                    line-height: 22px;
+                    color: #224ca5;
+                    margin-right: 9px;
+                }
+            }
+        }
+
         &__chart-area,
         &__checks-area {
             display: flex;
@@ -394,6 +433,18 @@ export default class SNOContentFilling extends Vue {
         &__bar-info {
             width: 339px;
         }
+
+        &__estimation-area {
+            margin-top: 11px;
+        }
+
+        &__total-info-area {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
     }
 
     .chart-container {
diff --git a/web/storagenode/src/app/components/payments/EstimationArea.vue b/web/storagenode/src/app/components/payments/EstimationArea.vue
new file mode 100644
index 000000000..26ea781a9
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/EstimationArea.vue
@@ -0,0 +1,111 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="estimation-container">
+        <div class="estimation-container__header">
+            <p class="estimation-container__header__title">Info & Estimation</p>
+            <EstimationPeriodDropdown />
+        </div>
+        <div class="estimation-container__divider"></div>
+        <EstimationTable />
+        <div class="estimation-container__payout-area">
+            <div class="estimation-container__payout-area__left-area">
+                <p class="title-text">Estimated 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">
+                <p class="title-text">$25.93</p>
+                <p class="additional-text">4 Mar 2020</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import EstimationPeriodDropdown from '@/app/components/payments/EstimationPeriodDropdown.vue';
+import EstimationTable from '@/app/components/payments/EstimationTable.vue';
+
+@Component ({
+    components: {
+        EstimationTable,
+        EstimationPeriodDropdown,
+    },
+})
+export default class EstimationArea extends Vue {}
+</script>
+
+<style scoped lang="scss">
+    .estimation-container {
+        display: flex;
+        flex-direction: column;
+        padding: 28px 40px 0 40px;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        box-sizing: border-box;
+        border-radius: 12px;
+        font-family: 'font_regular', sans-serif;
+
+        &__header {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            &__title {
+                font-weight: 500;
+                font-size: 18px;
+                color: #535f77;
+            }
+        }
+
+        &__total-held,
+        &__payout-area {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            width: calc(100% - 32px);
+            height: 87px;
+
+            &__left-area {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            &__right-area {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+            }
+        }
+
+        &__total-held {
+            border-bottom: 1px solid #eaeaea;
+        }
+
+        &__divider {
+            width: 100%;
+            height: 1px;
+            margin-top: 18px;
+            background-color: #eaeaea;
+        }
+    }
+
+    .title-text {
+        font-family: 'font_bold', sans-serif;
+        font-size: 16px;
+        line-height: 20px;
+        color: #535f77;
+    }
+
+    .additional-text {
+        font-size: 13px;
+        line-height: 17px;
+        color: #b5bdcb;
+    }
+</style>
diff --git a/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue b/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
new file mode 100644
index 000000000..70b36aa1a
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/EstimationPeriodDropdown.vue
@@ -0,0 +1,81 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="period-container" @click.stop="openPeriodDropdown">
+        <p class="period-container__label">{{ currentPeriod }}</p>
+        <BlackArrowHide v-if="isDropDownShown" />
+        <BlackArrowExpand v-else />
+        <PayoutPeriodCalendar
+            class="period-container__calendar"
+            v-if="isDropDownShown"
+            v-click-outside="closePeriodDropdown"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import PayoutPeriodCalendar from '@/app/components/payments/PayoutPeriodCalendar.vue';
+
+import BlackArrowExpand from '@/../static/images/BlackArrowExpand.svg';
+import BlackArrowHide from '@/../static/images/BlackArrowHide.svg';
+
+@Component({
+    components: {
+        PayoutPeriodCalendar,
+        BlackArrowExpand,
+        BlackArrowHide,
+    }
+})
+export default class EstimationPeriodDropdown extends Vue {
+    public currentPeriod = new Date().toDateString();
+    /**
+     * Indicates if payout period selection dropdown should be rendered.
+     */
+    public isDropDownShown: boolean = false;
+
+    /**
+     * Opens payout period selection dropdown.
+     */
+    public openPeriodDropdown(): void {
+        setTimeout(() => {
+            this.isDropDownShown = true;
+        }, 0);
+    }
+
+    /**
+     * Closes payout period selection dropdown.
+     */
+    public closePeriodDropdown(): void {
+        this.isDropDownShown = false;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .period-container {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        background-color: transparent;
+        cursor: pointer;
+
+        &__label {
+            margin-right: 8px;
+            font-family: 'font_regular', sans-serif;
+            font-weight: 500;
+            font-size: 16px;
+            color: #535f77;
+        }
+
+        &__calendar {
+            position: absolute;
+            top: 30px;
+            right: 0;
+        }
+    }
+</style>
diff --git a/web/storagenode/src/app/components/payments/EstimationTable.vue b/web/storagenode/src/app/components/payments/EstimationTable.vue
new file mode 100644
index 000000000..bf93df8f9
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/EstimationTable.vue
@@ -0,0 +1,189 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div>
+        <div class="estimation-table-container__labels-area">
+            <div class="column justify-start column-1">
+                <p class="estimation-table-container__labels-area__text">Name</p>
+            </div>
+            <div class="column justify-start column-2">
+                <p class="estimation-table-container__labels-area__text">Type</p>
+            </div>
+            <div class="column justify-start column-3">
+                <p class="estimation-table-container__labels-area__text">Disk</p>
+            </div>
+            <div class="column justify-start column-4">
+                <p class="estimation-table-container__labels-area__text">Bandwidth</p>
+            </div>
+            <div class="column justify-end column-5">
+                <p class="estimation-table-container__labels-area__text">Payout</p>
+            </div>
+        </div>
+        <div v-for="item in data" class="estimation-table-container__info-area">
+            <div class="column justify-start column-1">
+                <p class="estimation-table-container__info-area__text">{{ item.name }}</p>
+            </div>
+            <div class="column justify-start column-2">
+                <p class="estimation-table-container__info-area__text">{{ item.type }}</p>
+            </div>
+            <div class="column justify-start column-3">
+                <p class="estimation-table-container__info-area__text">{{ item.disk }}</p>
+            </div>
+            <div class="column justify-start column-4">
+                <p class="estimation-table-container__info-area__text">{{ item.bandwidth }}</p>
+            </div>
+            <div class="column justify-end column-5">
+                <p class="estimation-table-container__info-area__text">{{ item.payout }}</p>
+            </div>
+        </div>
+        <div class="estimation-table-container__held-area">
+            <p class="estimation-table-container__held-area__text">25% Held back</p>
+            <p class="estimation-table-container__held-area__text">-$0.67</p>
+        </div>
+        <div class="estimation-table-container__total-area">
+            <div class="column justify-start column-1">
+                <p class="estimation-table-container__total-area__text">TOTAL</p>
+            </div>
+            <div class="column justify-start column-2"></div>
+            <div class="column justify-start column-3">
+                <p class="estimation-table-container__total-area__text">25.45 GBm</p>
+            </div>
+            <div class="column justify-start column-4">
+                <p class="estimation-table-container__total-area__text">98.24 GB</p>
+            </div>
+            <div class="column justify-end column-5">
+                <p class="estimation-table-container__total-area__text">$1.99</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+class EstimationTableRow {
+    public constructor(
+        public name: string = '',
+        public type: string = '',
+        public disk: string = '',
+        public bandwidth: string = '',
+        public payout: string = '',
+    ) {}
+}
+
+@Component
+export default class EstimationTable extends Vue {
+    public data: EstimationTableRow[] = [
+        new EstimationTableRow('Download', 'Egress', '--', '98.24 GB', '$1.94'),
+        new EstimationTableRow('Download Repair', 'Egress', '--', '0.00 B', '$0.24'),
+        new EstimationTableRow('Download Audit', 'Egress', '--', '22.53 KB', '$0.00'),
+        new EstimationTableRow('Disk Average Month', 'Storage', '25.45 GBm', '--', '$0.48'),
+    ];
+}
+</script>
+
+<style scoped lang="scss">
+    .estimation-table-container {
+        font-family: 'font_regular', sans-serif;
+
+        &__labels-area {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            margin-top: 17px;
+            padding: 0 16px;
+            width: calc(100% - 32px);
+            height: 36px;
+            background: #f9fafc;
+
+            &__text {
+                font-weight: 500;
+                font-size: 14px;
+                color: #909bad;
+            }
+        }
+
+        &__info-area {
+            padding: 0 16px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            height: 56px;
+            border-bottom: 1px solid #a9b5c1;
+
+            &__text {
+                font-size: 14px;
+                color: #535f77;
+            }
+        }
+
+        &__held-area {
+            padding: 0 16px;
+            width: calc(100% - 32px);
+            height: 56px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            &__text {
+                font-family: 'font_bold', sans-serif;
+                font-size: 14px;
+                color: #535f77;
+            }
+        }
+
+        &__total-area {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+            width: calc(100% - 32px);
+            height: 56px;
+            background: rgba(0, 117, 255, 0.05);
+
+            &__text {
+                font-family: 'font_bold', sans-serif;
+                font-size: 14px;
+                color: #535f77;
+            }
+        }
+    }
+
+    .column {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .justify-start {
+        justify-content: flex-start;
+    }
+
+    .justify-end {
+        justify-content: flex-end;
+    }
+
+    .column-1 {
+        width: 26.9%;
+    }
+
+    .column-2 {
+        width: 18.3%;
+    }
+
+    .column-3 {
+        width: 22.2%;
+    }
+
+    .column-4 {
+        width: 23.9%;
+    }
+
+    .column-5 {
+        width: 8.7%;
+    }
+</style>
diff --git a/web/storagenode/src/app/components/payments/HeldHistoryTable.vue b/web/storagenode/src/app/components/payments/HeldHistoryTable.vue
new file mode 100644
index 000000000..d2910aecd
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/HeldHistoryTable.vue
@@ -0,0 +1,126 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div>
+        <div class="held-history-table-container__labels-area">
+            <div class="column justify-start column-1">
+                <p class="held-history-table-container__labels-area__text">Satellite</p>
+            </div>
+            <div class="column justify-start column-2">
+                <p class="held-history-table-container__labels-area__text">Month 1-3</p>
+            </div>
+            <div class="column justify-start column-3">
+                <p class="held-history-table-container__labels-area__text">Month 4-6</p>
+            </div>
+            <div class="column justify-end column-4">
+                <p class="held-history-table-container__labels-area__text">Month 7-9</p>
+            </div>
+        </div>
+        <div v-for="item in data" class="held-history-table-container__info-area">
+            <div class="column justify-start column-1">
+                <p class="held-history-table-container__info-area__text">{{ item.satelliteName }}</p>
+                <p class="held-history-table-container__info-area__text">{{ item.satelliteAge }}</p>
+            </div>
+            <div class="column justify-start column-2">
+                <p class="held-history-table-container__info-area__text">{{ item.firstPeriodAmount }}</p>
+            </div>
+            <div class="column justify-start column-3">
+                <p class="held-history-table-container__info-area__text">{{ item.secondPeriodAmount }}</p>
+            </div>
+            <div class="column justify-end column-4">
+                <p class="held-history-table-container__info-area__text">{{ item.thirdPeriodAmount }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+class HeldHistoryTableRow {
+    public constructor(
+        public satelliteName: string = '',
+        public satelliteAge: string = '',
+        public firstPeriodAmount: string = '',
+        public secondPeriodAmount: string = '',
+        public thirdPeriodAmount: string = '',
+    ) {}
+}
+
+@Component
+export default class HeldHistoryTable extends Vue {
+    public data: HeldHistoryTableRow[] = [
+        new HeldHistoryTableRow('us-central-1', '17 month', '$0.0005', '$0.0005', '$0.0005'),
+        new HeldHistoryTableRow('europe-west-1', '7 month', '$0.0005', '$0.0005', '$0.0005'),
+        new HeldHistoryTableRow('europe-west-1', '3 month', '$0.0005', '$0.0005', '$0.0005'),
+    ];
+}
+</script>
+
+<style scoped lang="scss">
+    .held-history-table-container {
+
+        &__labels-area {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 17px;
+            padding: 0 16px;
+            width: calc(100% - 32px);
+            height: 36px;
+            background: #f9fafc;
+
+            &__text {
+                font-family: 'font_medium', sans-serif;
+                font-size: 14px;
+                color: #909bad;
+            }
+        }
+
+        &__info-area {
+            padding: 0 16px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            height: 56px;
+            border-bottom: 1px solid #a9b5c1;
+
+            &:last-of-type {
+                border-bottom: none;
+            }
+
+            &__text {
+                font-family: 'font_regular', sans-serif;
+                font-size: 14px;
+                color: #535f77;
+            }
+        }
+    }
+
+    .column {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .justify-start {
+        justify-content: flex-start;
+    }
+
+    .justify-end {
+        justify-content: flex-end;
+    }
+
+    .column-1 {
+        width: 40%;
+    }
+
+    .column-2,
+    .column-3,
+    .column-4 {
+        width: 13%;
+    }
+</style>
diff --git a/web/storagenode/src/app/components/payments/HeldProgress.vue b/web/storagenode/src/app/components/payments/HeldProgress.vue
new file mode 100644
index 000000000..7ae029b4d
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/HeldProgress.vue
@@ -0,0 +1,158 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="held-progress">
+        <div class="held-progress__steps-area">
+            <div
+                v-for="step in steps"
+                :key="step.amount"
+                :class="step.className"
+            >
+                <h1 class="amount">{{ step.amount }}</h1>
+                <div class="divider"></div>
+                <h4 class="label">{{ step.label }}</h4>
+            </div>
+        </div>
+        <div class="held-progress__border"></div>
+        <p class="held-progress__main-text">It is your <span class="bold">{{ '7' }} month</span> on network</p>
+        <p class="held-progress__hint">25% of Storage Node revenue is withheld, 75% is paid to the Storage Node Operator</p>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+class HeldStep {
+    public constructor(
+        public amount: string = '0%',
+        public label: string = '',
+        public active: boolean = false,
+        public inFuture: boolean = true,
+    ) {}
+
+    public get className(): string {
+        if (this.active) return 'held-progress__steps-area__step--active';
+        if (this.inFuture) return 'held-progress__steps-area__step--future';
+
+        return 'held-progress__steps-area__step';
+    }
+}
+
+@Component
+export default class HeldProgress extends Vue {
+    public steps: HeldStep[] = [
+        new HeldStep('75%', 'Month 1-3', false, false),
+        new HeldStep('50%', 'Month 4-6', false, false),
+        new HeldStep('25%', 'Month 7-9', true, false),
+        new HeldStep('0%', 'Month 10-15', false, true),
+        new HeldStep('+50%', 'Month 15', false, true),
+    ];
+}
+</script>
+
+<style scoped lang="scss">
+    p,
+    h1,
+    h4 {
+        margin: 0;
+    }
+
+    @mixin step($active: false, $future: false) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .amount {
+            font-family: 'font_bold', sans-serif;
+            font-size: 20px;
+            color: #224ca5;
+            opacity: 0.4;
+
+            @if $active {
+                opacity: 1;
+            }
+
+            @if $future {
+                color: #909bad;
+            }
+        }
+
+        .divider {
+            width: 100%;
+            height: 4px;
+            background: #224ca5;
+            mix-blend-mode: normal;
+            opacity: 0.4;
+            border-radius: 4px;
+            margin: 16px 0 8px 0;
+
+            @if $active {
+                opacity: 1;
+            }
+
+            @if $future {
+                background: #909bad;
+            }
+        }
+
+        .label {
+            font-size: 14px;
+            color: #586c86;
+        }
+    }
+
+    .held-progress {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        box-sizing: border-box;
+        border-radius: 12px;
+        padding: 29px;
+        font-family: 'font_regular', sans-serif;
+
+        &__steps-area {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            grid-column-gap: 2px;
+
+            &__step {
+                @include step();
+
+                &--active {
+                    @include step(true);
+                }
+
+                &--future {
+                    @include step($future: true);
+                }
+            }
+        }
+
+        &__border {
+            width: 100%;
+            height: 1px;
+            background: #a9b5c1;
+            opacity: 0.3;
+            margin: 24px 0 20px 0;
+        }
+
+        &__main-text {
+            font-size: 16px;
+            color: #535f77;
+
+            .bold {
+                font-family: 'font_bold', sans-serif;
+            }
+        }
+
+        &__hint {
+            font-size: 13px;
+            line-height: 15px;
+            color: #9b9db1;
+        }
+    }
+</style>
diff --git a/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue b/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
new file mode 100644
index 000000000..ecc87aca4
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/PayoutPeriodCalendar.vue
@@ -0,0 +1,217 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="payout-period-calendar">
+        <div class="payout-period-calendar__header">
+            <div class="payout-period-calendar__header__year-selection">
+                <div class="payout-period-calendar__header__year-selection__prev">
+                    <GrayArrowLeftIcon />
+                </div>
+                <p class="payout-period-calendar__header__year-selection__year">2020</p>
+                <div class="payout-period-calendar__header__year-selection__next">
+                    <GrayArrowLeftIcon />
+                </div>
+            </div>
+            <p class="payout-period-calendar__header__all-time">All time</p>
+        </div>
+        <div class="payout-period-calendar__months-area">
+            <div
+                class="month-item"
+                :class="{ selected: item.selected, disabled: !item.active }"
+                v-for="item in displayedMonths"
+                :key="item.name"
+            >
+                <p class="month-item__label">{{ item.name }}</p>
+            </div>
+        </div>
+        <div class="payout-period-calendar__footer-area">
+            <p class="payout-period-calendar__footer-area__period">Jan - Apr, 2019</p>
+            <p class="payout-period-calendar__footer-area__ok-button">OK</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import GrayArrowLeftIcon from '@/../static/images/payments/GrayArrowLeft.svg';
+
+/**
+ * Holds all months names.
+ */
+const monthNames = [
+    'January', 'February', 'March', 'April',
+    'May', 'June', 'July',	'August',
+    'September', 'October', 'November',	'December',
+];
+
+/**
+ * Describes month button entity for calendar.
+ */
+class MonthButton {
+    public constructor(
+        public index: number = 0,
+        public active: boolean = false,
+        public selected: boolean = false,
+    ) {}
+
+    /**
+     * Returns month label depends on index.
+     */
+    public get name() {
+        return monthNames[this.index].slice(0, 3);
+    }
+}
+
+@Component({
+    components: {
+        GrayArrowLeftIcon,
+    }
+})
+export default class PayoutPeriodCalendar extends Vue {
+    /**
+     * Contains current months list depends on active and selected month state.
+     */
+    public displayedMonths: MonthButton[] = [];
+
+    public constructor() {
+        super();
+
+        for (let i = 0; i < monthNames.length; i++) {
+            this.displayedMonths.push(new MonthButton(i, true, false));
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .payout-period-calendar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        width: 170px;
+        height: 215px;
+        background: #fff;
+        box-shadow: 0 10px 25px rgba(175, 183, 193, 0.1);
+        border-radius: 5px;
+        padding: 24px;
+        font-family: 'font_regular', sans-serif;
+
+        &__header {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: 20px;
+            width: 100%;
+
+            &__year-selection {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-start;
+
+                &__prev {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    margin-right: 20px;
+                    height: 20px;
+                    width: 15px;
+                }
+
+                &__year {
+                    font-family: 'font_bold', sans-serif;
+                    font-size: 15px;
+                    line-height: 18px;
+                    color: #444c63;
+                }
+
+                &__next {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transform: rotate(180deg);
+                    margin-left: 20px;
+                    height: 20px;
+                    width: 15px;
+                }
+            }
+
+            &__all-time {
+                font-size: 12px;
+                line-height: 18px;
+                color: #224ca5;
+                cursor: pointer;
+            }
+        }
+
+        &__months-area {
+            margin: 13px 0;
+            display: grid;
+            grid-template-columns: 52px 52px 52px;
+            grid-gap: 8px;
+        }
+
+        &__footer-area {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: 20px;
+            width: 100%;
+            margin-top: 7px;
+
+            &__period {
+                font-size: 13px;
+                color: #444c63;
+            }
+
+            &__ok-button {
+                font-family: 'font_bold', sans-serif;
+                font-size: 16px;
+                line-height: 23px;
+                color: #224ca5;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .month-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 52px;
+        height: 30px;
+        background: #f1f4f9;
+        border-radius: 10px;
+        cursor: pointer;
+
+        &__label {
+            font-size: 12px;
+            line-height: 18px;
+            color: #667086;
+        }
+    }
+
+    .disabled {
+        background: #e9e9e9;
+        cursor: default;
+
+        .month-item__label {
+            color: #b1b1b1 !important;
+        }
+    }
+
+    .selected {
+        background: #224ca5;
+
+        .month-item__label {
+            color: white !important;
+        }
+    }
+</style>
diff --git a/web/storagenode/src/app/components/payments/SingleInfo.vue b/web/storagenode/src/app/components/payments/SingleInfo.vue
new file mode 100644
index 000000000..c5be08a7a
--- /dev/null
+++ b/web/storagenode/src/app/components/payments/SingleInfo.vue
@@ -0,0 +1,51 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="info-container" :style="{ width }">
+        <p class="info-container__label">{{ label }}</p>
+        <p class="info-container__value">{{ value }}</p>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class SingleInfo extends Vue {
+    @Prop({default: '100%'})
+    public readonly width: string;
+    @Prop({default: 'Label'})
+    public readonly label: string;
+    @Prop({default: 'value'})
+    public readonly value: string;
+}
+</script>
+
+<style scoped lang="scss">
+    .info-container {
+        width: 45%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        box-sizing: border-box;
+        border-radius: 10px;
+        padding: 20px 30px;
+
+        &__label,
+        &__value {
+            font-family: 'font_regular', sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            color: #535f77;
+        }
+
+        &__value {
+            font-family: 'font_bold', sans-serif;
+            font-size: 20px;
+        }
+    }
+</style>
diff --git a/web/storagenode/src/app/router/index.ts b/web/storagenode/src/app/router/index.ts
index 6405c1f71..5d4ac8c15 100644
--- a/web/storagenode/src/app/router/index.ts
+++ b/web/storagenode/src/app/router/index.ts
@@ -9,12 +9,14 @@ import Page404 from '@/app/components/errors/Page404.vue';
 import { NavigationLink } from '@/app/types/navigation';
 import DashboardArea from '@/app/views/DashboardArea.vue';
 import NotificationsArea from '@/app/views/NotificationsArea.vue';
+import PayoutArea from '@/app/views/PayoutArea.vue';
 
 Vue.use(Router);
 
 export abstract class RouteConfig {
     public static Root = new NavigationLink('', 'Root');
     public static Notifications = new NavigationLink('/notifications', 'Notifications');
+    public static Payout = new NavigationLink('/payout-information', 'Payout');
 }
 
 /**
@@ -33,6 +35,11 @@ export const router = new Router({
             name: RouteConfig.Notifications.name,
             component: NotificationsArea
         },
+        // {
+        //     path: RouteConfig.Payout.path,
+        //     name: RouteConfig.Payout.name,
+        //     component: PayoutArea
+        // },
         {
             path: '*',
             name: '404',
diff --git a/web/storagenode/src/app/views/PayoutArea.vue b/web/storagenode/src/app/views/PayoutArea.vue
new file mode 100644
index 000000000..aab2da77f
--- /dev/null
+++ b/web/storagenode/src/app/views/PayoutArea.vue
@@ -0,0 +1,160 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="payout-area-container">
+        <header class="payout-area-container__header">
+            <router-link to="/" class="payout-area-container__header__back-link">
+                <BackArrowIcon />
+            </router-link>
+            <p class="payout-area-container__header__text">Payout information</p>
+        </header>
+        <SatelliteSelection />
+        <p class="payout-area-container__section-title">Payout</p>
+        <EstimationArea class="payout-area-container__estimation" />
+        <p class="payout-area-container__section-title">Held Amount</p>
+        <p class="additional-text">Learn more about held back <a class="additional-text__link">here</a></p>
+        <section class="payout-area-container__held-info-area">
+            <SingleInfo width="48%" label="Held Amount Rate" value="25%" />
+            <SingleInfo v-if="false" width="48%" label="Total Held Amount" value="$19.93" />
+        </section>
+        <HeldProgress class="payout-area-container__process-area" />
+        <section class="payout-area-container__held-history-container">
+            <div class="payout-area-container__held-history-container__header">
+                <p class="payout-area-container__held-history-container__header__title">Held Amount history</p>
+            </div>
+            <div class="payout-area-container__held-history-container__divider"></div>
+            <HeldHistoryTable />
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import EstimationArea from '@/app/components/payments/EstimationArea.vue';
+import HeldHistoryTable from '@/app/components/payments/HeldHistoryTable.vue';
+import HeldProgress from '@/app/components/payments/HeldProgress.vue';
+import SingleInfo from '@/app/components/payments/SingleInfo.vue';
+import SatelliteSelection from '@/app/components/SatelliteSelection.vue';
+
+import BackArrowIcon from '@/../static/images/notifications/backArrow.svg';
+
+@Component ({
+    components: {
+        HeldProgress,
+        HeldHistoryTable,
+        SingleInfo,
+        SatelliteSelection,
+        EstimationArea,
+        BackArrowIcon,
+    },
+})
+export default class PayoutArea extends Vue {}
+</script>
+
+<style scoped lang="scss">
+    .payout-area-container {
+        width: 822px;
+        font-family: 'font_regular', sans-serif;
+
+        &__header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            margin: 17px 0;
+
+            &__back-link {
+                width: 25px;
+                height: 25px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            &__text {
+                font-family: 'font_bold', sans-serif;
+                font-size: 24px;
+                line-height: 57px;
+                color: #535f77;
+                margin-left: 29px;
+                text-align: center;
+            }
+        }
+
+        &__section-title {
+            margin-top: 40px;
+            font-size: 18px;
+            color: #535f77;
+        }
+
+        &__estimation {
+            margin-top: 20px;
+        }
+
+        &__content-area {
+            width: 100%;
+            height: auto;
+            max-height: 62vh;
+            background-color: #f3f4f9;
+            border-radius: 12px;
+        }
+
+        &__held-info-area {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
+
+        &__process-area {
+            margin-top: 12px;
+        }
+
+        &__held-history-container {
+            display: flex;
+            flex-direction: column;
+            padding: 28px 40px 10px 40px;
+            background: #fff;
+            border: 1px solid #eaeaea;
+            box-sizing: border-box;
+            border-radius: 12px;
+            margin: 12px 0 50px;
+
+            &__header {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+
+                &__title {
+                    font-family: 'font_medium', sans-serif;
+                    font-size: 18px;
+                    color: #535f77;
+                }
+            }
+
+            &__divider {
+                width: 100%;
+                height: 1px;
+                margin-top: 18px;
+                background-color: #eaeaea;
+            }
+        }
+    }
+
+    .additional-text {
+        margin-top: 5px;
+        font-size: 14px;
+        line-height: 17px;
+        color: #848fa2;
+
+        &__link {
+            color: #2683ff;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+    }
+</style>
diff --git a/web/storagenode/static/images/BlackArrowExpand.svg b/web/storagenode/static/images/BlackArrowExpand.svg
new file mode 100644
index 000000000..b4e1bc259
--- /dev/null
+++ b/web/storagenode/static/images/BlackArrowExpand.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.266267 0.254166C0.621289 -0.0847221 1.19689 -0.0847221 1.55192 0.254166L5 3.54555L8.44808 0.254166C8.80311 -0.0847221 9.37871 -0.0847221 9.73373 0.254166C10.0888 0.593054 10.0888 1.1425 9.73373 1.48139L5 6L0.266267 1.48139C-0.0887555 1.1425 -0.0887555 0.593054 0.266267 0.254166Z" fill="#354049"/>
+</svg>
diff --git a/web/storagenode/static/images/BlackArrowHide.svg b/web/storagenode/static/images/BlackArrowHide.svg
new file mode 100644
index 000000000..061963eca
--- /dev/null
+++ b/web/storagenode/static/images/BlackArrowHide.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.73373 5.74583C9.37871 6.08472 8.80311 6.08472 8.44808 5.74583L5 2.45445L1.55192 5.74583C1.19689 6.08472 0.621288 6.08472 0.266267 5.74583C-0.0887565 5.40694 -0.0887565 4.8575 0.266267 4.51861L5 -4.37114e-07L9.73373 4.51861C10.0888 4.8575 10.0888 5.40695 9.73373 5.74583Z" fill="#354049"/>
+</svg>
diff --git a/web/storagenode/static/images/BlueArrowRight.svg b/web/storagenode/static/images/BlueArrowRight.svg
new file mode 100644
index 000000000..b1d31f386
--- /dev/null
+++ b/web/storagenode/static/images/BlueArrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.2002 1.2L4.8002 5.4L1.2002 9.6" stroke="#224CA5" stroke-width="1.68" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/storagenode/static/images/payments/GrayArrowLeft.svg b/web/storagenode/static/images/payments/GrayArrowLeft.svg
new file mode 100644
index 000000000..bbe189b79
--- /dev/null
+++ b/web/storagenode/static/images/payments/GrayArrowLeft.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.46379 1.77339C6.46379 1.68061 6.42256 1.59814 6.3607 1.53629L5.84525 1.02083C5.78339 0.958978 5.69061 0.91774 5.60814 0.91774C5.52567 0.91774 5.43288 0.958978 5.37103 1.02083L0.566999 5.82486C0.505145 5.88672 0.463909 5.9795 0.463909 6.06197C0.463909 6.14444 0.505145 6.23723 0.566999 6.29908L5.37103 11.1031C5.43288 11.165 5.52567 11.2062 5.60814 11.2062C5.69061 11.2062 5.78339 11.165 5.84525 11.1031L6.3607 10.5877C6.42256 10.5258 6.46379 10.433 6.46379 10.3505C6.46379 10.2681 6.42256 10.1753 6.3607 10.1134L2.30923 6.06197L6.3607 2.0105C6.42256 1.94865 6.46379 1.85587 6.46379 1.77339Z" fill="#8C97B2"/>
+</svg>