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

web/satellite: billing page behaviour (#3711)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2019-12-12 15:23:14 +02:00 committed by GitHub
parent f659d98a4d
commit f5d26a178a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/satellite/src/components/account/billing/balance/AccountBalance.vue
View File

@ -59,16 +59,12 @@ export default class AccountBalance extends Vue {
} }
public get balanceStyle() { public get balanceStyle() {
let color: string = '#DBF1D3'; let color: string = '#000';
if (this.$store.state.paymentsModule.balance < 0) { if (this.$store.state.paymentsModule.balance < 0) {
color = '#FF0000'; color = '#FF0000';
} }
if (this.$store.state.paymentsModule.balance === 0) {
color = '#000';
}
return { color }; return { color };
} }

6
web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue
View File

@ -14,7 +14,7 @@
<div class="current-month-area__content__usage-charges" @click="toggleUsageChargesPopup"> <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">
<div class="current-month-area__content__usage-charges__head__name"> <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"> <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"/> <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> </svg>
@ -96,6 +96,10 @@ export default class MonthlyBillingSummary extends Vue {
* toggleUsageChargesPopup is used to open/close area with list of project charges. * toggleUsageChargesPopup is used to open/close area with list of project charges.
*/ */
public toggleUsageChargesPopup(): void { public toggleUsageChargesPopup(): void {
if (this.usageCharges.length === 0) {
return;
}
this.areUsageChargesShown = !this.areUsageChargesShown; this.areUsageChargesShown = !this.areUsageChargesShown;
} }
} }

104
web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
View File

@ -2,9 +2,9 @@
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div> <div class="form-container">
<div class="selected-container" v-if="!isCustomAmount"> <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> <p class="selected-container__label-container__label">{{current.label}}</p>
<div class="selected-container__label-container__svg"> <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"> <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -12,22 +12,6 @@
</svg> </svg>
</div> </div>
</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> </div>
<label class="label" v-if="isCustomAmount"> <label class="label" v-if="isCustomAmount">
<input <input
@ -37,12 +21,40 @@
v-model="customAmount" v-model="customAmount"
@input="onCustomAmountChange" @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"> <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"/> <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> </svg>
</div> </div>
</label> </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> </div>
</template> </template>
@ -69,6 +81,10 @@ export default class TokenDepositSelection extends Vue {
public customAmount: string = ''; public customAmount: string = '';
public isCustomAmount = false; 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 * 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 { public open(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION); 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)); this.$emit('onChangeTokenValue', parseInt(this.customAmount, 10));
} }
/** public openCustomAmountSelection(): void {
* toggleCustomAmount toggles custom amount input and changes token value in parent this.isCustomAmount = true;
*/ this.close();
public toggleCustomAmount(): void { this.$emit('onChangeTokenValue', 0);
this.isCustomAmount = !this.isCustomAmount; }
if (this.isCustomAmount) { public closeCustomAmountSelection(): void {
this.$emit('onChangeTokenValue', 0); this.open();
this.$emit('onChangeTokenValue', this.current.value);
return;
}
this.$emit('onChangeTokenValue', this.paymentOptions[0].value);
} }
/** /**
* select standard value from list and emits it value to parent component * select standard value from list and emits it value to parent component
*/ */
public select(option: PaymentAmountOption): void { public select(option: PaymentAmountOption): void {
this.isCustomAmount = false;
this.current = option; this.current = option;
this.$emit('onChangeTokenValue', option.value); this.$emit('onChangeTokenValue', option.value);
this.toggleSelection(); this.close();
} }
} }
</script> </script>
@ -137,6 +157,10 @@ export default class TokenDepositSelection extends Vue {
margin: 0; margin: 0;
} }
.form-container {
position: relative;
}
.label { .label {
position: relative; position: relative;
} }
@ -147,6 +171,11 @@ export default class TokenDepositSelection extends Vue {
right: 20px; right: 20px;
transform: translate(0, -50%); transform: translate(0, -50%);
cursor: pointer; cursor: pointer;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
} }
.selected-container { .selected-container {
@ -193,10 +222,13 @@ export default class TokenDepositSelection extends Vue {
z-index: 102; z-index: 102;
margin-right: 10px; margin-right: 10px;
border-radius: 12px; border-radius: 12px;
top: calc(100% + 10px); top: 50px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
&__custom-container { &__custom-container {
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom-left-radius: 12px; border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;
padding: 0 20px; padding: 0 20px;

12
web/satellite/src/store/modules/appState.ts
View File

@ -91,8 +91,8 @@ export const appStateModule = {
}, },
// Mutation changing payment selection visibility // Mutation changing payment selection visibility
[APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: any): void { [APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: any, value: boolean): void {
state.appState.isPaymentSelectionShown = !state.appState.isPaymentSelectionShown; state.appState.isPaymentSelectionShown = value;
}, },
[APP_STATE_MUTATIONS.SET_NAME](state: any, satelliteName: string): void { [APP_STATE_MUTATIONS.SET_NAME](state: any, satelliteName: string): void {
state.satelliteName = satelliteName; state.satelliteName = satelliteName;
@ -189,12 +189,8 @@ export const appStateModule = {
[APP_STATE_ACTIONS.CHANGE_STATE]: function ({commit}: any, newFetchState: AppState): void { [APP_STATE_ACTIONS.CHANGE_STATE]: function ({commit}: any, newFetchState: AppState): void {
commit(APP_STATE_MUTATIONS.CHANGE_STATE, newFetchState); commit(APP_STATE_MUTATIONS.CHANGE_STATE, newFetchState);
}, },
[APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({commit, state}: any): void { [APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({commit, state}: any, value: boolean): void {
if (!state.appState.isPaymentSelectionShown) { commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION);
}, },
[APP_STATE_ACTIONS.SET_SATELLITE_NAME]: function ({commit}: any, satelliteName: string): void { [APP_STATE_ACTIONS.SET_SATELLITE_NAME]: function ({commit}: any, satelliteName: string): void {
commit(APP_STATE_MUTATIONS.SET_NAME, satelliteName); commit(APP_STATE_MUTATIONS.SET_NAME, satelliteName);