93 lines
2.1 KiB
JavaScript
93 lines
2.1 KiB
JavaScript
|
module.exports = {
|
||
|
|
props: ['user', 'team', 'plans', 'billableType'],
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Load mixins for the component.
|
||
|
|
*/
|
||
|
|
mixins: [
|
||
|
|
require('./../../mixins/plans'),
|
||
|
|
require('./../../mixins/subscriptions')
|
||
|
|
],
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The component's data.
|
||
|
|
*/
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
confirmingPlan: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Prepare the component.
|
||
|
|
*/
|
||
|
|
mounted() {
|
||
|
|
this.selectActivePlanInterval();
|
||
|
|
|
||
|
|
// We need to watch the activePlan computed property for changes so we can select
|
||
|
|
// the proper active plan on the plan interval button group. So, we will watch
|
||
|
|
// this property and fire off a method anytime it changes so it can sync up.
|
||
|
|
this.$watch('activePlan', value => {
|
||
|
|
this.selectActivePlanInterval();
|
||
|
|
});
|
||
|
|
|
||
|
|
if (this.onlyHasYearlyPlans) {
|
||
|
|
this.showYearlyPlans();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* Confirm the plan update with the user.
|
||
|
|
*/
|
||
|
|
confirmPlanUpdate(plan) {
|
||
|
|
this.confirmingPlan = plan;
|
||
|
|
|
||
|
|
$('#modal-confirm-plan-update').modal('show');
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Approve the plan update.
|
||
|
|
*/
|
||
|
|
approvePlanUpdate() {
|
||
|
|
$('#modal-confirm-plan-update').modal('hide');
|
||
|
|
|
||
|
|
this.updateSubscription(this.confirmingPlan);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Select the active plan interval.
|
||
|
|
*/
|
||
|
|
selectActivePlanInterval() {
|
||
|
|
if (this.activePlanIsMonthly || this.yearlyPlans.length == 0) {
|
||
|
|
this.showMonthlyPlans();
|
||
|
|
} else {
|
||
|
|
this.showYearlyPlans();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Show the plan details for the given plan.
|
||
|
|
*
|
||
|
|
* We'll ask the parent subscription component to display it.
|
||
|
|
*/
|
||
|
|
showPlanDetails(plan) {
|
||
|
|
this.$parent.$emit('showPlanDetails', plan);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get the plan price with the applicable VAT.
|
||
|
|
*/
|
||
|
|
priceWithTax(plan) {
|
||
|
|
return plan.price + (plan.price * (this.billable.tax_rate / 100));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|