Disable Pay and Cancel buttons during loading

This commit is contained in:
silverpill 2022-07-18 19:50:37 +00:00
parent 79a14f838c
commit 00562b0dcf
2 changed files with 15 additions and 7 deletions

View file

@ -162,11 +162,10 @@ button {
color: $btn-text-hover-color; color: $btn-text-hover-color;
} }
&[disabled], &[disabled] {
&[disabled]:hover { background-color: #ddd !important;
background-color: #ddd;
box-shadow: none; box-shadow: none;
color: #999; color: #999 !important;
cursor: initial; cursor: initial;
} }
} }

View file

@ -77,7 +77,12 @@
<template v-if="!subscriptionState || subscriptionState.senderBalance.isZero()">Pay</template> <template v-if="!subscriptionState || subscriptionState.senderBalance.isZero()">Pay</template>
<template v-else>Extend</template> <template v-else>Extend</template>
</button> </button>
<button v-if="canCancel()" class="btn secondary" @click.prevent="onCancelSubscription()"> <button
v-if="isBalancePositive()"
class="btn secondary"
:disabled="!canCancel()"
@click.prevent="onCancelSubscription()"
>
Cancel Cancel
</button> </button>
</div> </div>
@ -227,7 +232,7 @@ function getPaymentAmount(): FixedNumber {
} }
function canPay(): boolean { function canPay(): boolean {
if (!subscription || !tokenBalance) { if (!subscription || !tokenBalance || isLoading) {
return false return false
} }
const amount = subscription.pricePerMonthInt.mul(paymentDuration) const amount = subscription.pricePerMonthInt.mul(paymentDuration)
@ -278,13 +283,17 @@ async function onMakeSubscriptionPayment() {
isLoading = false isLoading = false
} }
function canCancel(): boolean { function isBalancePositive(): boolean {
return ( return (
subscriptionState !== null && subscriptionState !== null &&
!subscriptionState.senderBalance.isZero() !subscriptionState.senderBalance.isZero()
) )
} }
function canCancel(): boolean {
return isBalancePositive() && !isLoading
}
async function onCancelSubscription() { async function onCancelSubscription() {
if ( if (
!instance?.blockchain_contract_address || !instance?.blockchain_contract_address ||