Initial Spark Install

This commit is contained in:
Deon George
2017-11-03 16:26:07 +11:00
commit b1a5807eb3
766 changed files with 128896 additions and 0 deletions

View 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`;
}
}
};

View 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));
}
}
};

View 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`;
}
}
};

View 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;
}
}
};

View 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));
}
}
};