JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: add total account balance to billing page

Browse Source 
- added to top left of billing page
- credit history dropdown removed

Change-Id: I85a0db67d61a318c5ec29d67153ce4f47770bc17
This commit is contained in:
Malcolm Bouzi 2021-04-28 19:19:59 +02:00
parent 4c0817bcfb
commit 30d2a2ea7b
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -19,6 +19,26 @@
</div>
</div>
<div class="account-billing-area__title-area" v-if="userHasOwnProject" :class="{ 'custom-position': hasNoCreditCard && (isBalanceLow || isBalanceNegative) }">
<div class="account-billing-area__title-area__balance-area">
<div class="account-billing-area__title-area__balance-area__free-credits">
<span class="account-billing-area__title-area__balance-area__free-credits__amount">
Free Credits: {{ balance.freeCredits | centsToDollars }}
</span>
</div>
<div @click.stop="toggleBalanceDropdown" class="account-billing-area__title-area__balance-area__tokens-area">
<span class="account-billing-area__title-area__balance-area__tokens-area__amount" :style="{ color: balanceColor }">
Available Balance: {{ balance.coins | centsToDollars }}
</span>
<HideIcon v-if="isBalanceDropdownShown"/>
<ExpandIcon v-else/>
<HistoryDropdown
v-show="isBalanceDropdownShown"
@close="closeDropdown"
label="Balance History"
:route="balanceHistoryRoute"
/>
</div>
</div>
<PeriodSelection v-if="userHasOwnProject"/>
</div>
<EstimatedCostsAndCredits v-if="isSummaryVisible"/>
@ -163,13 +183,6 @@ export default class BillingArea extends Vue {
return this.$store.getters.projectsCount > 0;
}
/**
* Toggles free credits dropdown visibility.
*/
public toggleCreditsDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_FREE_CREDITS_DROPDOWN);
}
/**
* Toggles available balance dropdown visibility.
*/
@ -304,7 +317,7 @@ export default class BillingArea extends Vue {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
cursor: default;
margin-right: 50px;
color: #768394;