136 lines
3.1 KiB
JavaScript
136 lines
3.1 KiB
JavaScript
|
module.exports = {
|
||
|
|
/**
|
||
|
|
* Load mixins for the component.
|
||
|
|
*/
|
||
|
|
mixins: [
|
||
|
|
require('./../mixins/braintree'),
|
||
|
|
require('./../mixins/plans'),
|
||
|
|
require('./../mixins/register')
|
||
|
|
],
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The component's data.
|
||
|
|
*/
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
query: null,
|
||
|
|
|
||
|
|
coupon: null,
|
||
|
|
invalidCoupon: false,
|
||
|
|
|
||
|
|
registerForm: $.extend(true, new SparkForm({
|
||
|
|
braintree_type: '',
|
||
|
|
braintree_token: '',
|
||
|
|
plan: '',
|
||
|
|
team: '',
|
||
|
|
team_slug: '',
|
||
|
|
name: '',
|
||
|
|
email: '',
|
||
|
|
password: '',
|
||
|
|
password_confirmation: '',
|
||
|
|
terms: false,
|
||
|
|
coupon: null,
|
||
|
|
invitation: null
|
||
|
|
}), Spark.forms.register)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
/**
|
||
|
|
* Watch the team name for changes.
|
||
|
|
*/
|
||
|
|
'registerForm.team': function (val, oldVal) {
|
||
|
|
if (this.registerForm.team_slug == '' ||
|
||
|
|
this.registerForm.team_slug == oldVal.toLowerCase().replace(/[\s\W-]+/g, '-')
|
||
|
|
) {
|
||
|
|
this.registerForm.team_slug = val.toLowerCase().replace(/[\s\W-]+/g, '-');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The component has been created by Vue.
|
||
|
|
*/
|
||
|
|
created() {
|
||
|
|
this.getPlans();
|
||
|
|
|
||
|
|
this.query = URI(document.URL).query(true);
|
||
|
|
|
||
|
|
if (this.query.coupon) {
|
||
|
|
this.getCoupon();
|
||
|
|
|
||
|
|
this.registerForm.coupon = this.query.coupon;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.query.invitation) {
|
||
|
|
this.getInvitation();
|
||
|
|
|
||
|
|
this.registerForm.invitation = this.query.invitation;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Prepare the component.
|
||
|
|
*/
|
||
|
|
mounted() {
|
||
|
|
this.configureBraintree();
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
configureBraintree() {
|
||
|
|
if ( ! Spark.cardUpFront) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.braintree('braintree-container', response => {
|
||
|
|
this.registerForm.braintree_type = response.type;
|
||
|
|
this.registerForm.braintree_token = response.nonce;
|
||
|
|
|
||
|
|
this.register();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get the coupon specified in the query string.
|
||
|
|
*/
|
||
|
|
getCoupon() {
|
||
|
|
axios.get('/coupon/' + this.query.coupon)
|
||
|
|
.then(response => {
|
||
|
|
this.coupon = response.data;
|
||
|
|
})
|
||
|
|
.catch(response => {
|
||
|
|
this.invalidCoupon = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Attempt to register with the application.
|
||
|
|
*/
|
||
|
|
register() {
|
||
|
|
Spark.post('/register', this.registerForm)
|
||
|
|
.then(response => {
|
||
|
|
window.location = response.redirect;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
/**
|
||
|
|
* Get the displayable discount for the coupon.
|
||
|
|
*/
|
||
|
|
discount() {
|
||
|
|
if (this.coupon) {
|
||
|
|
return Vue.filter('currency')(this.coupon.amount_off);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|