136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<Dialog
|
|
:options="{
|
|
title: 'Change Payment Mode',
|
|
actions: [
|
|
{
|
|
label: 'Change',
|
|
variant: 'solid',
|
|
loading: $resources.changePaymentMode.loading,
|
|
onClick: () => $resources.changePaymentMode.submit()
|
|
}
|
|
]
|
|
}"
|
|
:modelValue="modelValue"
|
|
@update:modelValue="$emit('update:modelValue', $event)"
|
|
>
|
|
<template v-slot:body-content>
|
|
<FormControl
|
|
label="Select Payment Mode"
|
|
type="select"
|
|
:options="paymentModeOptions"
|
|
v-model="paymentMode"
|
|
/>
|
|
<p class="mt-2 text-base text-gray-600 mb-5">
|
|
{{ paymentModeDescription }}
|
|
</p>
|
|
<ErrorMessage
|
|
class="mt-2"
|
|
:message="$resources.changePaymentMode.error"
|
|
/>
|
|
</template>
|
|
</Dialog>
|
|
<BillingInformationDialog
|
|
v-model="showBillingInformationDialog"
|
|
v-if="showBillingInformationDialog"
|
|
/>
|
|
<PrepaidCreditsDialog
|
|
v-if="showPrepaidCreditsDialog"
|
|
v-model:show="showPrepaidCreditsDialog"
|
|
:minimumAmount="$account.team.currency == 'CNY' ? 0.01 : 0.01"
|
|
@success="
|
|
() => {
|
|
$resources.upcomingInvoice.reload();
|
|
showPrepaidCreditsDialog = false;
|
|
}
|
|
"
|
|
/>
|
|
</template>
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
|
|
export default {
|
|
name: 'ChangePaymentModeDialog',
|
|
props: ['modelValue'],
|
|
emits: ['update:modelValue'],
|
|
components: {
|
|
BillingInformationDialog: defineAsyncComponent(() =>
|
|
import('./BillingInformationDialog.vue')
|
|
),
|
|
PrepaidCreditsDialog: defineAsyncComponent(() =>
|
|
import('@/components/PrepaidCreditsDialog.vue')
|
|
)
|
|
},
|
|
data() {
|
|
return {
|
|
showBillingInformationDialog: false,
|
|
showPrepaidCreditsDialog: false,
|
|
paymentMode: this.$account.team.payment_mode
|
|
};
|
|
},
|
|
watch: {
|
|
show(value) {
|
|
if (!value) {
|
|
this.paymentMode = this.$account.team.payment_mode;
|
|
}
|
|
}
|
|
},
|
|
resources: {
|
|
changePaymentMode() {
|
|
return {
|
|
url: 'jcloud.api.billing.change_payment_mode',
|
|
params: {
|
|
mode: this.paymentMode
|
|
},
|
|
onSuccess() {
|
|
this.$emit('update:modelValue', false);
|
|
this.$resources.changePaymentMode.reset();
|
|
},
|
|
validate() {
|
|
if (
|
|
this.paymentMode == 'Card' &&
|
|
!this.$account.team.default_payment_method
|
|
) {
|
|
this.$emit('update:modelValue', false);
|
|
this.showBillingInformationDialog = true;
|
|
}
|
|
|
|
if (
|
|
this.paymentMode == 'Prepaid Credits' &&
|
|
this.$account.balance === 0
|
|
) {
|
|
this.$emit('update:modelValue', false);
|
|
this.showPrepaidCreditsDialog = true;
|
|
}
|
|
|
|
if (
|
|
this.paymentMode == 'Paid By Partner' &&
|
|
!this.$account.team.partner_email
|
|
) {
|
|
return 'Please add a partner first from Partner section';
|
|
}
|
|
}
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
paymentModeDescription() {
|
|
return {
|
|
Card: `Your card will be charged for monthly subscription`,
|
|
'Prepaid Credits': `You will be charged from your account balance for monthly subscription`,
|
|
'Paid By Partner': `Your partner will be charged for monthly subscription`
|
|
}[this.paymentMode];
|
|
},
|
|
paymentModeOptions() {
|
|
if (
|
|
this.$account.team.jerp_partner ||
|
|
!this.$account.team.partner_email
|
|
) {
|
|
return ['Card', 'Prepaid Credits'];
|
|
}
|
|
return ['Card', 'Prepaid Credits', 'Paid By Partner'];
|
|
}
|
|
}
|
|
};
|
|
</script>
|