Initial Spark Install
This commit is contained in:
48
spark/resources/assets/js/settings/subscription/cancel-subscription.js
vendored
Normal file
48
spark/resources/assets/js/settings/subscription/cancel-subscription.js
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
module.exports = {
|
||||
props: ['user', 'team', 'billableType'],
|
||||
|
||||
/**
|
||||
* The component's data.
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
form: new SparkForm({})
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Confirm the cancellation operation.
|
||||
*/
|
||||
confirmCancellation() {
|
||||
$('#modal-confirm-cancellation').modal('show');
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Cancel the current subscription.
|
||||
*/
|
||||
cancel() {
|
||||
Spark.delete(this.urlForCancellation, this.form)
|
||||
.then(() => {
|
||||
Bus.$emit('updateUser');
|
||||
Bus.$emit('updateTeam');
|
||||
|
||||
$('#modal-confirm-cancellation').modal('hide');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Get the URL for the subscription cancellation.
|
||||
*/
|
||||
urlForCancellation() {
|
||||
return this.billingUser
|
||||
? '/settings/subscription'
|
||||
: `/settings/${Spark.pluralTeamString}/${this.team.id}/subscription`;
|
||||
}
|
||||
}
|
||||
};
|
41
spark/resources/assets/js/settings/subscription/resume-subscription.js
vendored
Normal file
41
spark/resources/assets/js/settings/subscription/resume-subscription.js
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
module.exports = {
|
||||
props: ['user', 'team', 'plans', 'billableType'],
|
||||
|
||||
/**
|
||||
* Load mixins for the component.
|
||||
*/
|
||||
mixins: [
|
||||
require('./../../mixins/plans'),
|
||||
require('./../../mixins/subscriptions')
|
||||
],
|
||||
|
||||
|
||||
/**
|
||||
* Prepare the component.
|
||||
*/
|
||||
mounted() {
|
||||
if (this.onlyHasYearlyPlans) {
|
||||
this.showYearlyPlans();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 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));
|
||||
}
|
||||
}
|
||||
};
|
96
spark/resources/assets/js/settings/subscription/subscribe-braintree.js
vendored
Normal file
96
spark/resources/assets/js/settings/subscription/subscribe-braintree.js
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
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`;
|
||||
}
|
||||
}
|
||||
};
|
216
spark/resources/assets/js/settings/subscription/subscribe-stripe.js
vendored
Normal file
216
spark/resources/assets/js/settings/subscription/subscribe-stripe.js
vendored
Normal file
@@ -0,0 +1,216 @@
|
||||
module.exports = {
|
||||
props: ['user', 'team', 'plans', 'billableType'],
|
||||
|
||||
/**
|
||||
* Load mixins for the component.
|
||||
*/
|
||||
mixins: [
|
||||
require('./../../mixins/plans'),
|
||||
require('./../../mixins/subscriptions'),
|
||||
require('./../../mixins/vat')
|
||||
],
|
||||
|
||||
|
||||
/**
|
||||
* The component's data.
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
taxRate: 0,
|
||||
|
||||
form: new SparkForm({
|
||||
stripe_token: '',
|
||||
plan: '',
|
||||
coupon: null,
|
||||
address: '',
|
||||
address_line_2: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zip: '',
|
||||
country: 'US',
|
||||
vat_id: ''
|
||||
}),
|
||||
|
||||
cardForm: new SparkForm({
|
||||
name: '',
|
||||
number: '',
|
||||
cvc: '',
|
||||
month: '',
|
||||
year: '',
|
||||
zip: ''
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* Watch for changes on the entire billing address.
|
||||
*/
|
||||
'currentBillingAddress': function (value) {
|
||||
if ( ! Spark.collectsEuropeanVat) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.refreshTaxRate(this.form);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Prepare the component.
|
||||
*/
|
||||
mounted() {
|
||||
Stripe.setPublishableKey(Spark.stripeKey);
|
||||
|
||||
this.initializeBillingAddress();
|
||||
|
||||
if (this.onlyHasYearlyPaidPlans) {
|
||||
this.showYearlyPlans();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Initialize the billing address form for the billable entity.
|
||||
*/
|
||||
initializeBillingAddress() {
|
||||
this.form.address = this.billable.billing_address;
|
||||
this.form.address_line_2 = this.billable.billing_address_line_2;
|
||||
this.form.city = this.billable.billing_city;
|
||||
this.form.state = this.billable.billing_state;
|
||||
this.form.zip = this.billable.billing_zip;
|
||||
this.form.country = this.billable.billing_country || 'US';
|
||||
this.form.vat_id = this.billable.vat_id;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Mark the given plan as selected.
|
||||
*/
|
||||
selectPlan(plan) {
|
||||
this.selectedPlan = plan;
|
||||
|
||||
this.form.plan = this.selectedPlan.id;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Subscribe to the specified plan.
|
||||
*/
|
||||
subscribe() {
|
||||
this.cardForm.errors.forget();
|
||||
|
||||
this.form.startProcessing();
|
||||
|
||||
// Here we will build out the payload to send to Stripe to obtain a card token so
|
||||
// we can create the actual subscription. We will build out this data that has
|
||||
// this credit card number, CVC, etc. and exchange it for a secure token ID.
|
||||
const payload = {
|
||||
name: this.cardForm.name,
|
||||
number: this.cardForm.number,
|
||||
cvc: this.cardForm.cvc,
|
||||
exp_month: this.cardForm.month,
|
||||
exp_year: this.cardForm.year,
|
||||
address_line1: this.form.address,
|
||||
address_line2: this.form.address_line_2,
|
||||
address_city: this.form.city,
|
||||
address_state: this.form.state,
|
||||
address_zip: this.form.zip,
|
||||
address_country: this.form.country
|
||||
};
|
||||
|
||||
// Next, we will send the payload to Stripe and handle the response. If we have a
|
||||
// valid token we can send that to the server and use the token to create this
|
||||
// subscription on the back-end. Otherwise, we will show the error messages.
|
||||
Stripe.card.createToken(payload, (status, response) => {
|
||||
if (response.error) {
|
||||
this.cardForm.errors.set({number: [
|
||||
response.error.message
|
||||
]})
|
||||
|
||||
this.form.busy = false;
|
||||
} else {
|
||||
this.createSubscription(response.id);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
* After obtaining the Stripe token, create subscription on the Spark server.
|
||||
*/
|
||||
createSubscription(token) {
|
||||
this.form.stripe_token = token;
|
||||
|
||||
Spark.post(this.urlForNewSubscription, this.form)
|
||||
.then(response => {
|
||||
Bus.$emit('updateUser');
|
||||
Bus.$emit('updateTeam');
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Determine if the user has subscribed to the given plan before.
|
||||
*/
|
||||
hasSubscribed(plan) {
|
||||
return !!_.where(this.billable.subscriptions, {provider_plan: plan.id}).length
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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 billable entity's "billable" name.
|
||||
*/
|
||||
billableName() {
|
||||
return this.billingUser ? this.user.name : this.team.owner.name;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Determine if the selected country collects European VAT.
|
||||
*/
|
||||
countryCollectsVat() {
|
||||
return this.collectsVat(this.form.country);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Get the URL for subscribing to a plan.
|
||||
*/
|
||||
urlForNewSubscription() {
|
||||
return this.billingUser
|
||||
? '/settings/subscription'
|
||||
: `/settings/${Spark.pluralTeamString}/${this.team.id}/subscription`;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Get the current billing address from the subscribe form.
|
||||
*
|
||||
* This used primarily for wathcing.
|
||||
*/
|
||||
currentBillingAddress() {
|
||||
return this.form.address +
|
||||
this.form.address_line_2 +
|
||||
this.form.city +
|
||||
this.form.state +
|
||||
this.form.zip +
|
||||
this.form.country +
|
||||
this.form.vat_id;
|
||||
}
|
||||
}
|
||||
};
|
92
spark/resources/assets/js/settings/subscription/update-subscription.js
vendored
Normal file
92
spark/resources/assets/js/settings/subscription/update-subscription.js
vendored
Normal file
@@ -0,0 +1,92 @@
|
||||
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));
|
||||
}
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user