From f5d26a178a6be19935d96624e8b99d8a98af55fa Mon Sep 17 00:00:00 2001 From: Nikolay Yurchenko Date: Thu, 12 Dec 2019 15:23:14 +0200 Subject: [PATCH] web/satellite: billing page behaviour (#3711) --- .../billing/balance/AccountBalance.vue | 6 +- .../monthlySummary/MonthlyBillingSummary.vue | 6 +- .../paymentMethods/TokenDepositSelection.vue | 104 ++++++++++++------ web/satellite/src/store/modules/appState.ts | 12 +- 4 files changed, 78 insertions(+), 50 deletions(-) diff --git a/web/satellite/src/components/account/billing/balance/AccountBalance.vue b/web/satellite/src/components/account/billing/balance/AccountBalance.vue index a26d31cd3..28de30b03 100644 --- a/web/satellite/src/components/account/billing/balance/AccountBalance.vue +++ b/web/satellite/src/components/account/billing/balance/AccountBalance.vue @@ -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 }; } diff --git a/web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue b/web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue index b6d827ba2..4eaa102ab 100644 --- a/web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue +++ b/web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue @@ -14,7 +14,7 @@
-
+
@@ -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; } } diff --git a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue index d743b33f4..95af8bdbc 100644 --- a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue +++ b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue @@ -2,9 +2,9 @@ // See LICENSE for copying information. @@ -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(); } } @@ -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; diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts index 60e7017af..781c16901 100644 --- a/web/satellite/src/store/modules/appState.ts +++ b/web/satellite/src/store/modules/appState.ts @@ -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);