web/storagenode: payments markup

Change-Id: Ifb65f126408e9593febff153f88abf0aa3644b79

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",

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 {

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>

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>

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>

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>

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>

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>

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>

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',

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>

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>

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>

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>

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>