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

web/satellite: shortened token payments dropdown bug fix

Browse Source 
Change-Id: Ie4a77cf88fcdc5a730a23e878481277ddf6cdb79
This commit is contained in:
VitaliiShpital 2020-02-12 15:30:28 +02:00 committed by Vitalii Shpital
parent 4fb70b4383
commit dccca518da
5 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
View File

@ -44,7 +44,7 @@
</div>
<div class="payment-methods-area__adding-container__submit-area">
<img
v-if="isTransactionLoading"
v-if="isLoading"
class="payment-loading-image"
src="@/../static/images/account/billing/loading.gif"
alt="loading gif"
@ -54,7 +54,7 @@
width="251px"
height="48px"
:on-press="onConfirmAddSTORJ"
:is-disabled="isTransactionLoading"
:is-disabled="isLoading"
/>
</div>
</div>
@ -67,7 +67,7 @@
/>
<div class="payment-methods-area__adding-container__submit-area">
<img
v-if="isAddingCardLoading"
v-if="isLoading"
class="payment-loading-image"
src="@/../static/images/account/billing/loading.gif"
alt="loading gif"
@ -77,7 +77,7 @@
width="123px"
height="48px"
:on-press="onConfirmAddStripe"
:is-disabled="isAddingCardLoading"
:is-disabled="isLoading"
/>
</div>
</div>
@ -110,6 +110,7 @@ const {
GET_CREDIT_CARDS,
MAKE_TOKEN_DEPOSIT,
GET_BILLING_HISTORY,
GET_BALANCE,
} = PAYMENTS_ACTIONS;
interface StripeForm {
@ -131,8 +132,7 @@ export default class PaymentMethods extends Vue {
private readonly MAX_TOKEN_AMOUNT_IN_DOLLARS = 1000000;
private tokenDepositValue: number = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
public isAddingCardLoading: boolean = false;
public isTransactionLoading: boolean = false;
public isLoading: boolean = false;
/**
* Lifecycle hook after initial render where credit cards are fetched.
@ -219,6 +219,8 @@ export default class PaymentMethods extends Vue {
* Changes area state and token deposit value to default.
*/
public onCancel(): void {
if (this.isLoading) return;
this.areaState = PaymentMethodsBlockState.DEFAULT;
this.tokenDepositValue = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
}
@ -228,15 +230,15 @@ export default class PaymentMethods extends Vue {
* payment and return state to default
*/
public async onConfirmAddSTORJ(): Promise<void> {
if (this.isTransactionLoading) return;
if (this.isLoading) return;
this.isTransactionLoading = true;
this.isLoading = true;
if (this.tokenDepositValue >= this.MAX_TOKEN_AMOUNT_IN_DOLLARS || this.tokenDepositValue === 0) {
await this.$notify.error('Deposit amount must be more than 0 and less than 1000000');
this.tokenDepositValue = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
this.areaState = PaymentMethodsBlockState.DEFAULT;
this.isTransactionLoading = false;
this.isLoading = false;
return;
}
@ -250,7 +252,7 @@ export default class PaymentMethods extends Vue {
}
} catch (error) {
await this.$notify.error(error.message);
this.isTransactionLoading = false;
this.isLoading = false;
}
this.$segment.track(SegmentEvent.PAYMENT_METHOD_ADDED, {
@ -262,11 +264,11 @@ export default class PaymentMethods extends Vue {
await this.$store.dispatch(GET_BILLING_HISTORY);
} catch (error) {
await this.$notify.error(error.message);
this.isTransactionLoading = false;
this.isLoading = false;
}
this.areaState = PaymentMethodsBlockState.DEFAULT;
this.isTransactionLoading = false;
this.isLoading = false;
}
/**
@ -277,6 +279,7 @@ export default class PaymentMethods extends Vue {
try {
await this.$store.dispatch(GET_BILLING_HISTORY);
await this.$store.dispatch(GET_BALANCE);
} catch (error) {
await this.$notify.error(error.message);
}
@ -292,16 +295,16 @@ export default class PaymentMethods extends Vue {
* @param token from Stripe
*/
public async addCard(token: string) {
if (this.isAddingCardLoading) return;
if (this.isLoading) return;
this.isAddingCardLoading = true;
this.isLoading = true;
try {
await this.$store.dispatch(ADD_CREDIT_CARD, token);
} catch (error) {
await this.$notify.error(error.message);
this.isAddingCardLoading = false;
this.isLoading = false;
return;
}
@ -314,12 +317,12 @@ export default class PaymentMethods extends Vue {
await this.$store.dispatch(GET_CREDIT_CARDS);
} catch (error) {
await this.$notify.error(error.message);
this.isAddingCardLoading = false;
this.isLoading = false;
}
this.areaState = PaymentMethodsBlockState.DEFAULT;
this.isAddingCardLoading = false;
this.isLoading = false;
}
}
</script>

14
web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
View File

@ -3,8 +3,8 @@
<template>
<div class="payments-bonus-container">
<LogoIcon v-if="anyCreditCards" />
<GiftIcon v-else />
<LogoIcon class="banner-logo-svg" v-if="anyCreditCards" />
<GiftIcon class="banner-gift-svg" v-else />
<div class="payments-bonus-container__text-container" v-if="anyCreditCards">
<p class="payments-bonus-container__text-container__main-text">
Get free credits for paying in STORJ!
@ -80,4 +80,14 @@ export default class PaymentsBonus extends Vue {
}
}
}
.banner-logo-svg {
min-height: 60px;
min-width: 54px;
}
.banner-gift-svg {
min-height: 64px;
min-width: 50px;
}
</style>

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

@ -31,6 +31,7 @@
<div
id="paymentSelect"
class="options-container"
:class="{ 'top-expand': isExpandingTop }"
v-if="isSelectionShown"
v-click-outside="close"
>
@ -96,6 +97,10 @@ export default class TokenDepositSelection extends Vue {
return (option.value === this.current.value) && !this.isCustomAmount;
}
public get isExpandingTop(): boolean {
return this.$store.state.paymentsModule.billingHistory.length === 0;
}
/**
* isSelectionShown flag that indicate is token amount selection shown.
*/
@ -250,7 +255,6 @@ export default class TokenDepositSelection extends Vue {
color: #354049;
background-color: white;
z-index: 102;
margin: 0 10px 100px 0;
border-radius: 12px;
top: 50px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
@ -306,4 +310,9 @@ export default class TokenDepositSelection extends Vue {
top: 0;
left: 0;
}
.top-expand {
top: -290px;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.25);
}
</style>

1
web/satellite/src/components/header/AccountDropdown.vue
View File

@ -82,6 +82,7 @@ export default class AccountDropdown extends Vue {
this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR);
this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
LocalData.removeUserId();
}

1
web/satellite/src/components/project/NewProjectPopup.vue
View File

@ -139,6 +139,7 @@ export default class NewProjectPopup extends Vue {
try {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BILLING_HISTORY);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
} catch (error) {
await this.$notify.error(error.message);
}