Disable Pay and Cancel buttons during loading
This commit is contained in:
parent
79a14f838c
commit
00562b0dcf
2 changed files with 15 additions and 7 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 ||
|
||||||
|
|
Loading…
Reference in a new issue