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

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

@ -3,8 +3,8 @@
<template> <template>
<div class="payments-bonus-container"> <div class="payments-bonus-container">
<LogoIcon v-if="anyCreditCards" /> <LogoIcon class="banner-logo-svg" v-if="anyCreditCards" />
<GiftIcon v-else /> <GiftIcon class="banner-gift-svg" v-else />
<div class="payments-bonus-container__text-container" v-if="anyCreditCards"> <div class="payments-bonus-container__text-container" v-if="anyCreditCards">
<p class="payments-bonus-container__text-container__main-text"> <p class="payments-bonus-container__text-container__main-text">
Get free credits for paying in STORJ! 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> </style>

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

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

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

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