66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<Alert title="Account Setup" v-if="!$account.hasBillingInfo">
|
|
{{ message }}
|
|
<template #actions>
|
|
<Button
|
|
variant="solid"
|
|
@click="
|
|
isDefaultPaymentModeCard
|
|
? (showPrepaidCreditsDialog = true)
|
|
: (showCardDialog = true)
|
|
"
|
|
class="whitespace-nowrap"
|
|
>
|
|
{{
|
|
isDefaultPaymentModeCard ? 'Add Balance' : 'Add Billing Information'
|
|
}}
|
|
</Button>
|
|
</template>
|
|
<BillingInformationDialog v-model="showCardDialog" v-if="showCardDialog" />
|
|
<PrepaidCreditsDialog
|
|
v-if="showPrepaidCreditsDialog"
|
|
v-model:show="showPrepaidCreditsDialog"
|
|
:minimum-amount="$account.team.currency === 'CNY' ? 0.01 : 0.01"
|
|
@success="handleAddPrepaidCreditsSuccess"
|
|
/>
|
|
</Alert>
|
|
</template>
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
|
|
export default {
|
|
name: 'AlertBillingInformation',
|
|
components: {
|
|
BillingInformationDialog: defineAsyncComponent(() =>
|
|
import('./BillingInformationDialog.vue')
|
|
),
|
|
PrepaidCreditsDialog: defineAsyncComponent(() =>
|
|
import('./PrepaidCreditsDialog.vue')
|
|
)
|
|
},
|
|
data() {
|
|
return {
|
|
showCardDialog: false,
|
|
showPrepaidCreditsDialog: false
|
|
};
|
|
},
|
|
methods: {
|
|
handleAddPrepaidCreditsSuccess() {
|
|
this.showPrepaidCreditsDialog = false;
|
|
}
|
|
},
|
|
computed: {
|
|
isDefaultPaymentModeCard() {
|
|
return this.$account.team.payment_mode == 'Card';
|
|
},
|
|
message() {
|
|
if (this.isDefaultPaymentModeCard) {
|
|
return "We couldn't verify your card with micro charge. Please add some balance to your account to start creating sites.";
|
|
} else {
|
|
return "You haven't added your billing information yet. Add it to start creating sites.";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|