osb/spark/resources/assets/js/auth/register-braintree.js

136 lines
3.1 KiB
JavaScript
Raw Normal View History

2017-11-03 05:26:07 +00:00
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);
}
}
}
};