97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
|
module.exports = {
|
||
|
|
props: ['user', 'team', 'plans', 'billableType'],
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Load mixins for the component.
|
||
|
|
*/
|
||
|
|
mixins: [
|
||
|
|
require('./../../mixins/braintree'),
|
||
|
|
require('./../../mixins/plans'),
|
||
|
|
require('./../../mixins/subscriptions')
|
||
|
|
],
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The component's data.
|
||
|
|
*/
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: new SparkForm({
|
||
|
|
braintree_type: '',
|
||
|
|
braintree_token: '',
|
||
|
|
plan: '',
|
||
|
|
coupon: null
|
||
|
|
})
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Prepare the component.
|
||
|
|
*/
|
||
|
|
mounted() {
|
||
|
|
// If only yearly subscription plans are available, we will select that interval so that we
|
||
|
|
// can show the plans. Then we'll select the first available paid plan from the list and
|
||
|
|
// start the form in a good default spot. The user may then select another plan later.
|
||
|
|
if (this.onlyHasYearlyPaidPlans) {
|
||
|
|
this.showYearlyPlans();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Next, we will configure the braintree container element on the page and handle the nonce
|
||
|
|
// received callback. We'll then set the nonce and fire off the subscribe method so this
|
||
|
|
// nonce can be used to create the subscription for the billable entity being managed.
|
||
|
|
this.braintree('braintree-subscribe-container', response => {
|
||
|
|
this.form.braintree_type = response.type;
|
||
|
|
this.form.braintree_token = response.nonce;
|
||
|
|
|
||
|
|
this.subscribe();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* Mark the given plan as selected.
|
||
|
|
*/
|
||
|
|
selectPlan(plan) {
|
||
|
|
this.selectedPlan = plan;
|
||
|
|
|
||
|
|
this.form.plan = this.selectedPlan.id;
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Subscribe to the specified plan.
|
||
|
|
*/
|
||
|
|
subscribe() {
|
||
|
|
Spark.post(this.urlForNewSubscription, this.form)
|
||
|
|
.then(response => {
|
||
|
|
Bus.$emit('updateUser');
|
||
|
|
Bus.$emit('updateTeam');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
/**
|
||
|
|
* Get the URL for subscribing to a plan.
|
||
|
|
*/
|
||
|
|
urlForNewSubscription() {
|
||
|
|
return this.billingUser
|
||
|
|
? '/settings/subscription'
|
||
|
|
: `/settings/${Spark.pluralTeamString}/${this.team.id}/subscription`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|