web/satellite: billing page behaviour (#3711)
This commit is contained in:
Nikolay Yurchenko
GitHub
parent
f659d98a4d
commit
f5d26a178a
@ -59,16 +59,12 @@ export default class AccountBalance extends Vue {
|
||||
}
|
||||
|
||||
public get balanceStyle() {
|
||||
let color: string = '#DBF1D3';
|
||||
let color: string = '#000';
|
||||
|
||||
if (this.$store.state.paymentsModule.balance < 0) {
|
||||
color = '#FF0000';
|
||||
}
|
||||
|
||||
if (this.$store.state.paymentsModule.balance === 0) {
|
||||
color = '#000';
|
||||
}
|
||||
|
||||
return { color };
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="current-month-area__content__usage-charges" @click="toggleUsageChargesPopup">
|
||||
<div class="current-month-area__content__usage-charges__head">
|
||||
<div class="current-month-area__content__usage-charges__head__name">
|
||||
<div class="current-month-area__content__usage-charges__head__name__image-container">
|
||||
<div class="current-month-area__content__usage-charges__head__name__image-container" v-if="usageCharges.length > 0">
|
||||
<svg class="current-month-area__content__usage-charges__head__name__image-container__image" v-if="!areUsageChargesShown" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
@ -96,6 +96,10 @@ export default class MonthlyBillingSummary extends Vue {
|
||||
* toggleUsageChargesPopup is used to open/close area with list of project charges.
|
||||
*/
|
||||
public toggleUsageChargesPopup(): void {
|
||||
if (this.usageCharges.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.areUsageChargesShown = !this.areUsageChargesShown;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="form-container">
|
||||
<div class="selected-container" v-if="!isCustomAmount">
|
||||
<div id="paymentSelectButton" class="selected-container__label-container" @click="toggleSelection">
|
||||
<div id="paymentSelectButton" class="selected-container__label-container" @click="open">
|
||||
<p class="selected-container__label-container__label">{{current.label}}</p>
|
||||
<div class="selected-container__label-container__svg">
|
||||
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@ -12,22 +12,6 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="paymentSelect" class="options-container" v-if="isSelectionShown">
|
||||
<div
|
||||
class="options-container__item"
|
||||
v-for="option in paymentOptions"
|
||||
:key="option.label"
|
||||
@click.prevent.stop="select(option)"
|
||||
>
|
||||
<div class="options-container__item__svg" v-if="option.value === current.value">
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="options-container__item__label">{{option.label}}</p>
|
||||
</div>
|
||||
<div class="options-container__custom-container" @click.prevent="toggleCustomAmount">Custom Amount</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="label" v-if="isCustomAmount">
|
||||
<input
|
||||
@ -37,12 +21,40 @@
|
||||
v-model="customAmount"
|
||||
@input="onCustomAmountChange"
|
||||
>
|
||||
<div class="input-svg" @click="toggleCustomAmount">
|
||||
<div class="input-svg" @click.self.stop="closeCustomAmountSelection">
|
||||
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
<div
|
||||
id="paymentSelect"
|
||||
class="options-container"
|
||||
v-if="isSelectionShown"
|
||||
v-click-outside="close"
|
||||
>
|
||||
<div
|
||||
class="options-container__item"
|
||||
v-for="option in paymentOptions"
|
||||
:key="option.label"
|
||||
@click.prevent.stop="select(option)"
|
||||
>
|
||||
<div class="options-container__item__svg" v-if="isOptionSelected(option)">
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="options-container__item__label">{{option.label}}</p>
|
||||
</div>
|
||||
<div class="options-container__custom-container" @click.stop.prevent="openCustomAmountSelection">
|
||||
<div class="options-container__item__svg" v-if="isCustomAmount">
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
Custom Amount
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -69,6 +81,10 @@ export default class TokenDepositSelection extends Vue {
|
||||
public customAmount: string = '';
|
||||
public isCustomAmount = false;
|
||||
|
||||
public isOptionSelected(option: PaymentAmountOption): boolean {
|
||||
return option.value === this.current.value && !this.isCustomAmount;
|
||||
}
|
||||
|
||||
/**
|
||||
* isSelectionShown flag that indicate is token amount selection shown
|
||||
*/
|
||||
@ -77,10 +93,17 @@ export default class TokenDepositSelection extends Vue {
|
||||
}
|
||||
|
||||
/**
|
||||
* toggleSelection toggles token amount selection
|
||||
* opens token amount selection
|
||||
*/
|
||||
public toggleSelection(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION);
|
||||
public open(): void {
|
||||
setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION, true), 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* closes token amount selection
|
||||
*/
|
||||
public close(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION, false);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -90,28 +113,25 @@ export default class TokenDepositSelection extends Vue {
|
||||
this.$emit('onChangeTokenValue', parseInt(this.customAmount, 10));
|
||||
}
|
||||
|
||||
/**
|
||||
* toggleCustomAmount toggles custom amount input and changes token value in parent
|
||||
*/
|
||||
public toggleCustomAmount(): void {
|
||||
this.isCustomAmount = !this.isCustomAmount;
|
||||
public openCustomAmountSelection(): void {
|
||||
this.isCustomAmount = true;
|
||||
this.close();
|
||||
this.$emit('onChangeTokenValue', 0);
|
||||
}
|
||||
|
||||
if (this.isCustomAmount) {
|
||||
this.$emit('onChangeTokenValue', 0);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('onChangeTokenValue', this.paymentOptions[0].value);
|
||||
public closeCustomAmountSelection(): void {
|
||||
this.open();
|
||||
this.$emit('onChangeTokenValue', this.current.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* select standard value from list and emits it value to parent component
|
||||
*/
|
||||
public select(option: PaymentAmountOption): void {
|
||||
this.isCustomAmount = false;
|
||||
this.current = option;
|
||||
this.$emit('onChangeTokenValue', option.value);
|
||||
this.toggleSelection();
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -137,6 +157,10 @@ export default class TokenDepositSelection extends Vue {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
}
|
||||
@ -147,6 +171,11 @@ export default class TokenDepositSelection extends Vue {
|
||||
right: 20px;
|
||||
transform: translate(0, -50%);
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.selected-container {
|
||||
@ -193,10 +222,13 @@ export default class TokenDepositSelection extends Vue {
|
||||
z-index: 102;
|
||||
margin-right: 10px;
|
||||
border-radius: 12px;
|
||||
top: calc(100% + 10px);
|
||||
top: 50px;
|
||||
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
|
||||
|
||||
&__custom-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
padding: 0 20px;
|
||||
|
||||
@ -91,8 +91,8 @@ export const appStateModule = {
|
||||
},
|
||||
|
||||
// Mutation changing payment selection visibility
|
||||
[APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: any): void {
|
||||
state.appState.isPaymentSelectionShown = !state.appState.isPaymentSelectionShown;
|
||||
[APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: any, value: boolean): void {
|
||||
state.appState.isPaymentSelectionShown = value;
|
||||
},
|
||||
[APP_STATE_MUTATIONS.SET_NAME](state: any, satelliteName: string): void {
|
||||
state.satelliteName = satelliteName;
|
||||
@ -189,12 +189,8 @@ export const appStateModule = {
|
||||
[APP_STATE_ACTIONS.CHANGE_STATE]: function ({commit}: any, newFetchState: AppState): void {
|
||||
commit(APP_STATE_MUTATIONS.CHANGE_STATE, newFetchState);
|
||||
},
|
||||
[APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({commit, state}: any): void {
|
||||
if (!state.appState.isPaymentSelectionShown) {
|
||||
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
|
||||
}
|
||||
|
||||
commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION);
|
||||
[APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({commit, state}: any, value: boolean): void {
|
||||
commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
|
||||
},
|
||||
[APP_STATE_ACTIONS.SET_SATELLITE_NAME]: function ({commit}: any, satelliteName: string): void {
|
||||
commit(APP_STATE_MUTATIONS.SET_NAME, satelliteName);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user