Initial Spark Install
This commit is contained in:
Deon George
@@ -0,0 +1,48 @@
|
||||
<spark-cancel-subscription :user="user" :team="team" :billable-type="billableType" inline-template>
|
||||
<div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<button class="btn btn-danger-outline"
|
||||
@click="confirmCancellation"
|
||||
:disabled="form.busy">
|
||||
|
||||
Cancel Subscription
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Cancellation Modal -->
|
||||
<div class="modal fade" id="modal-confirm-cancellation" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
|
||||
<h4 class="modal-title">
|
||||
Cancel Subscription
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
Are you sure you want to cancel your subscription?
|
||||
</div>
|
||||
|
||||
<!-- Modal Actions -->
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">No, Go Back</button>
|
||||
|
||||
<button type="button" class="btn btn-danger" @click="cancel" :disabled="form.busy">
|
||||
<span v-if="form.busy">
|
||||
<i class="fa fa-btn fa-spinner fa-spin"></i>Cancelling
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
Yes, Cancel
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</spark-cancel-subscription>
|
||||
@@ -0,0 +1,111 @@
|
||||
<spark-resume-subscription :user="user" :team="team"
|
||||
:plans="plans" :billable-type="billableType" inline-template>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="pull-left" :class="{'btn-table-align': hasMonthlyAndYearlyPlans}">
|
||||
Resume Subscription
|
||||
</div>
|
||||
|
||||
<!-- Interval Selector Button Group -->
|
||||
<div class="pull-right">
|
||||
<div class="btn-group" v-if="hasMonthlyAndYearlyPlans">
|
||||
<!-- Monthly Plans -->
|
||||
<button type="button" class="btn btn-default"
|
||||
@click="showMonthlyPlans"
|
||||
:class="{'active': showingMonthlyPlans}">
|
||||
|
||||
Monthly
|
||||
</button>
|
||||
|
||||
<!-- Yearly Plans -->
|
||||
<button type="button" class="btn btn-default"
|
||||
@click="showYearlyPlans"
|
||||
:class="{'active': showingYearlyPlans}">
|
||||
|
||||
Yearly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body table-responsive">
|
||||
<!-- Plan Error Message - In General Will Never Be Shown -->
|
||||
<div class="alert alert-danger" v-if="planForm.errors.has('plan')">
|
||||
@{{ planForm.errors.get('plan') }}
|
||||
</div>
|
||||
|
||||
<!-- Cancellation Information -->
|
||||
<div class="p-b-lg">
|
||||
You have cancelled your subscription to the
|
||||
<strong>@{{ activePlan.name }} (@{{ activePlan.interval | capitalize }})</strong> plan.
|
||||
</div>
|
||||
|
||||
<div class="p-b-lg">
|
||||
The benefits of your subscription will continue until your current billing period ends on
|
||||
<strong>@{{ activeSubscription.ends_at | date }}</strong>. You may resume your subscription at no
|
||||
extra cost until the end of the billing period.
|
||||
</div>
|
||||
|
||||
<!-- European VAT Notice -->
|
||||
@if (Spark::collectsEuropeanVat())
|
||||
<p class="p-b-lg">
|
||||
All subscription plan prices include applicable VAT.
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<table class="table table-borderless m-b-none">
|
||||
<thead></thead>
|
||||
<tbody>
|
||||
<tr v-for="plan in paidPlansForActiveInterval">
|
||||
<!-- Plan Name -->
|
||||
<td>
|
||||
<div class="btn-table-align" @click="showPlanDetails(plan)">
|
||||
<span style="cursor: pointer;">
|
||||
<strong>@{{ plan.name }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Plan Features Button -->
|
||||
<td>
|
||||
<button class="btn btn-default m-l-sm" @click="showPlanDetails(plan)">
|
||||
<i class="fa fa-btn fa-star-o"></i>Plan Features
|
||||
</button>
|
||||
</td>
|
||||
|
||||
<!-- Plan Price -->
|
||||
<td>
|
||||
<div class="btn-table-align">
|
||||
@{{ priceWithTax(plan) | currency }} / @{{ plan.interval | capitalize }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Plan Select Button -->
|
||||
<td class="text-right">
|
||||
<button class="btn btn-plan"
|
||||
v-bind:class="{'btn-warning-outline': ! isActivePlan(plan), 'btn-warning': isActivePlan(plan)}"
|
||||
@click="updateSubscription(plan)"
|
||||
:disabled="selectingPlan">
|
||||
|
||||
<span v-if="selectingPlan === plan">
|
||||
<i class="fa fa-btn fa-spinner fa-spin"></i>Resuming
|
||||
</span>
|
||||
|
||||
<span v-if="! isActivePlan(plan) && selectingPlan !== plan">
|
||||
Switch
|
||||
</span>
|
||||
|
||||
<span v-if="isActivePlan(plan) && selectingPlan !== plan">
|
||||
Resume
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</spark-resume-subscription>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!-- Address -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('address')}">
|
||||
<label class="col-md-4 control-label">Address</label>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" v-model="form.address">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('address')">
|
||||
@{{ form.errors.get('address') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address Line 2 -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('address_line_2')}">
|
||||
<label class="col-md-4 control-label">Address Line 2</label>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" v-model="form.address_line_2">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('address_line_2')">
|
||||
@{{ form.errors.get('address_line_2') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- City -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('city')}">
|
||||
<label class="col-md-4 control-label">City</label>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" v-model="form.city">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('city')">
|
||||
@{{ form.errors.get('city') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- State & ZIP Code -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('state')}">
|
||||
<label class="col-md-4 control-label">State & ZIP / Postal Code</label>
|
||||
|
||||
<!-- State -->
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" v-model="form.state" placeholder="State">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('state')">
|
||||
@{{ form.errors.get('state') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Zip Code -->
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" v-model="form.zip" placeholder="Postal Code">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('zip')">
|
||||
@{{ form.errors.get('zip') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('country')}">
|
||||
<label class="col-md-4 control-label">Country</label>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.country">
|
||||
@foreach (app(Laravel\Spark\Repositories\Geography\CountryRepository::class)->all() as $key => $country)
|
||||
<option value="{{ $key }}">{{ $country }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('country')">
|
||||
@{{ form.errors.get('country') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- European VAT ID -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('vat_id')}" v-if="countryCollectsVat">
|
||||
<label class="col-md-4 control-label">VAT ID</label>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" v-model="form.vat_id">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('vat_id')">
|
||||
@{{ form.errors.get('vat_id') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
<spark-subscribe-braintree :user="user" :team="team"
|
||||
:plans="plans" :billable-type="billableType" inline-template>
|
||||
|
||||
<div>
|
||||
<!-- Common Subscribe Form Contents -->
|
||||
@include('spark::settings.subscription.subscribe-common')
|
||||
|
||||
<!-- Billing Information -->
|
||||
<div class="panel panel-default" v-show="selectedPlan">
|
||||
<div class="panel-heading"><i class="fa fa-btn fa-credit-card"></i>Billing Information</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<!-- Generic 500 Level Error Message / Stripe Threw Exception -->
|
||||
<div class="alert alert-danger" v-if="form.errors.has('form')">
|
||||
We had trouble validating your card. It's possible your card provider is preventing
|
||||
us from charging the card. Please contact your card provider or customer support.
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal" role="form">
|
||||
<!-- Braintree Container -->
|
||||
<div id="braintree-subscribe-container" class="m-b-md"></div>
|
||||
|
||||
<!-- Subscribe Button -->
|
||||
<div class="form-group m-b-none p-b-none">
|
||||
<div class="col-sm-6">
|
||||
<button type="submit" class="btn btn-primary" :disabled="form.busy">
|
||||
<span v-if="form.busy">
|
||||
<i class="fa fa-btn fa-spinner fa-spin"></i>Subscribing
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
Subscribe
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</spark-subscribe-braintree>
|
||||
@@ -0,0 +1,104 @@
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="pull-left" :class="{'btn-table-align': hasMonthlyAndYearlyPlans}">
|
||||
Subscribe
|
||||
</div>
|
||||
|
||||
<!-- Interval Selector Button Group -->
|
||||
<div class="pull-right">
|
||||
<div class="btn-group" v-if="hasMonthlyAndYearlyPaidPlans">
|
||||
<!-- Monthly Plans -->
|
||||
<button type="button" class="btn btn-default"
|
||||
@click="showMonthlyPlans"
|
||||
:class="{'active': showingMonthlyPlans}">
|
||||
|
||||
Monthly
|
||||
</button>
|
||||
|
||||
<!-- Yearly Plans -->
|
||||
<button type="button" class="btn btn-default"
|
||||
@click="showYearlyPlans"
|
||||
:class="{'active': showingYearlyPlans}">
|
||||
|
||||
Yearly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body table-responsive">
|
||||
<!-- Subscription Notice -->
|
||||
<div class="p-b-lg">
|
||||
You are not subscribed to a plan. Choose from the plans below to get started.
|
||||
</div>
|
||||
|
||||
<!-- European VAT Notice -->
|
||||
@if (Spark::collectsEuropeanVat())
|
||||
<p class="p-b-lg">
|
||||
All subscription plan prices are excluding applicable VAT.
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<!-- Plan Error Message -->
|
||||
<div class="alert alert-danger" v-if="form.errors.has('plan')">
|
||||
@{{ form.errors.get('plan') }}
|
||||
</div>
|
||||
|
||||
<table class="table table-borderless m-b-none">
|
||||
<thead></thead>
|
||||
<tbody>
|
||||
<tr v-for="plan in paidPlansForActiveInterval">
|
||||
<!-- Plan Name -->
|
||||
<td>
|
||||
<div class="btn-table-align" @click="showPlanDetails(plan)">
|
||||
<span style="cursor: pointer;">
|
||||
<strong>@{{ plan.name }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Plan Features Button -->
|
||||
<td>
|
||||
<button class="btn btn-default m-l-sm" @click="showPlanDetails(plan)">
|
||||
<i class="fa fa-btn fa-star-o"></i>Plan Features
|
||||
</button>
|
||||
</td>
|
||||
|
||||
<!-- Plan Price -->
|
||||
<td>
|
||||
<div class="btn-table-align">
|
||||
@{{ plan.price | currency }} / @{{ plan.interval | capitalize }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Trial Days -->
|
||||
<td>
|
||||
<div class="btn-table-align" v-if="plan.trialDays && ! hasSubscribed(plan)">
|
||||
@{{ plan.trialDays}} Day Trial
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Plan Select Button -->
|
||||
<td class="text-right">
|
||||
<button class="btn btn-primary-outline btn-plan"
|
||||
v-if="selectedPlan !== plan"
|
||||
@click="selectPlan(plan)"
|
||||
:disabled="form.busy">
|
||||
|
||||
Select
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-plan"
|
||||
v-if="selectedPlan === plan"
|
||||
disabled>
|
||||
|
||||
<i class="fa fa-btn fa-check"></i>Selected
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,135 @@
|
||||
<spark-subscribe-stripe :user="user" :team="team"
|
||||
:plans="plans" :billable-type="billableType" inline-template>
|
||||
|
||||
<div>
|
||||
<!-- Common Subscribe Form Contents -->
|
||||
@include('spark::settings.subscription.subscribe-common')
|
||||
|
||||
<!-- Billing Information -->
|
||||
<div class="panel panel-default" v-show="selectedPlan">
|
||||
<div class="panel-heading">Billing Information</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<!-- Generic 500 Level Error Message / Stripe Threw Exception -->
|
||||
<div class="alert alert-danger" v-if="form.errors.has('form')">
|
||||
We had trouble validating your card. It's possible your card provider is preventing
|
||||
us from charging the card. Please contact your card provider or customer support.
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal" role="form">
|
||||
<!-- Billing Address Fields -->
|
||||
@if (Spark::collectsBillingAddress())
|
||||
<h2><i class="fa fa-btn fa-map-marker"></i>Billing Address</h2>
|
||||
|
||||
@include('spark::settings.subscription.subscribe-address')
|
||||
|
||||
<h2><i class="fa fa-btn fa-credit-card"></i>Credit Card</h2>
|
||||
@endif
|
||||
|
||||
<!-- Cardholder's Name -->
|
||||
<div class="form-group">
|
||||
<label for="name" class="col-md-4 control-label">Cardholder's Name</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="name" v-model="cardForm.name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Number -->
|
||||
<div class="form-group" :class="{'has-error': cardForm.errors.has('number')}">
|
||||
<label for="number" class="col-md-4 control-label">Card Number</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="number" data-stripe="number" v-model="cardForm.number">
|
||||
|
||||
<span class="help-block" v-show="cardForm.errors.has('number')">
|
||||
@{{ cardForm.errors.get('number') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Code -->
|
||||
<div class="form-group">
|
||||
<label for="number" class="col-md-4 control-label">Security Code</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="cvc" data-stripe="cvc" v-model="cardForm.cvc">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expiration -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label">Expiration</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<!-- Month -->
|
||||
<div class="col-xs-6">
|
||||
<input type="text" class="form-control" name="month"
|
||||
placeholder="MM" maxlength="2" data-stripe="exp-month" v-model="cardForm.month">
|
||||
</div>
|
||||
|
||||
<!-- Year -->
|
||||
<div class="col-xs-6">
|
||||
<input type="text" class="form-control" name="year"
|
||||
placeholder="YYYY" maxlength="4" data-stripe="exp-year" v-model="cardForm.year">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZIP Code -->
|
||||
<div class="form-group" v-if=" ! spark.collectsBillingAddress">
|
||||
<label for="number" class="col-md-4 control-label">ZIP / Postal Code</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="zip" v-model="form.zip">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coupon -->
|
||||
<div class="form-group" :class="{'has-error': form.errors.has('coupon')}">
|
||||
<label class="col-md-4 control-label">Coupon</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" v-model="form.coupon">
|
||||
|
||||
<span class="help-block" v-show="form.errors.has('coupon')">
|
||||
@{{ form.errors.get('coupon') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tax / Price Information -->
|
||||
<div class="form-group" v-if="spark.collectsEuropeanVat && countryCollectsVat && selectedPlan">
|
||||
<label class="col-md-4 control-label"> </label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="alert alert-info" style="margin: 0;">
|
||||
<strong>Tax:</strong> @{{ taxAmount(selectedPlan) | currency }}
|
||||
<br><br>
|
||||
<strong>Total Price Including Tax:</strong>
|
||||
@{{ priceWithTax(selectedPlan) | currency }} / @{{ selectedPlan.interval | capitalize }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subscribe Button -->
|
||||
<div class="form-group">
|
||||
<div class="col-md-6 col-md-offset-4">
|
||||
<button type="submit" class="btn btn-primary" @click.prevent="subscribe" :disabled="form.busy">
|
||||
<span v-if="form.busy">
|
||||
<i class="fa fa-btn fa-spinner fa-spin"></i>Subscribing
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
Subscribe
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</spark-subscribe-stripe>
|
||||
@@ -0,0 +1,5 @@
|
||||
@if (Spark::billsUsingStripe())
|
||||
@include('spark::settings.subscription.subscribe-stripe')
|
||||
@else
|
||||
@include('spark::settings.subscription.subscribe-braintree')
|
||||
@endif
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="panel panel-warning" v-if="subscriptionIsOnTrial">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-btn fa-clock-o"></i>Free Trial
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
You are currently within your free trial period. Your trial will expire on <strong>@{{ trialEndsAt }}</strong>.
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,151 @@
|
||||
<spark-update-subscription :user="user" :team="team"
|
||||
:plans="plans" :billable-type="billableType" inline-template>
|
||||
<div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="pull-left" :class="{'btn-table-align': hasMonthlyAndYearlyPlans}">
|
||||
Update Subscription
|
||||
</div>
|
||||
|
||||
<!-- Interval Selector Button Group -->
|
||||
<div class="pull-right">
|
||||
<div class="btn-group" v-if="hasMonthlyAndYearlyPlans">
|
||||
<!-- Monthly Plans -->
|
||||
<button type="button" class="btn btn-default"
|
||||
@click="showMonthlyPlans"
|
||||
:class="{'active': showingMonthlyPlans}">
|
||||
|
||||
Monthly
|
||||
</button>
|
||||
|
||||
<!-- Yearly Plans -->
|
||||
<button type="button" class="btn btn-default"
|
||||
@click="showYearlyPlans"
|
||||
:class="{'active': showingYearlyPlans}">
|
||||
|
||||
Yearly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body table-responsive">
|
||||
<!-- Plan Error Message - In General Will Never Be Shown -->
|
||||
<div class="alert alert-danger" v-if="planForm.errors.has('plan')">
|
||||
@{{ planForm.errors.get('plan') }}
|
||||
</div>
|
||||
|
||||
<!-- Current Subscription (Active) -->
|
||||
<div class="p-b-lg" v-if="activePlan.active">
|
||||
You are currently subscribed to the
|
||||
<strong>@{{ activePlan.name }} (@{{ activePlan.interval | capitalize }})</strong> plan.
|
||||
</div>
|
||||
|
||||
<!-- Current Subscription (Archived) -->
|
||||
<div class="alert alert-warning m-b-lg" v-if=" ! activePlan.active">
|
||||
You are currently subscribed to the
|
||||
<strong>@{{ activePlan.name }} (@{{ activePlan.interval | capitalize }})</strong> plan.
|
||||
This plan has been discontinued, but you may continue your subscription to this plan as long as you wish.
|
||||
If you cancel your subscription and later want to begin a new subscription, you will need to choose
|
||||
from one of the active plans listed below.
|
||||
</div>
|
||||
|
||||
<!-- European VAT Notice -->
|
||||
@if (Spark::collectsEuropeanVat())
|
||||
<p class="p-b-lg">
|
||||
All subscription plan prices include applicable VAT.
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<table class="table table-borderless m-b-none">
|
||||
<thead></thead>
|
||||
<tbody>
|
||||
<tr v-for="plan in plansForActiveInterval">
|
||||
<!-- Plan Name -->
|
||||
<td>
|
||||
<div class="btn-table-align" @click="showPlanDetails(plan)">
|
||||
<span style="cursor: pointer;">
|
||||
<strong>@{{ plan.name }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Plan Features Button -->
|
||||
<td>
|
||||
<button class="btn btn-default m-l-sm" @click="showPlanDetails(plan)">
|
||||
<i class="fa fa-btn fa-star-o"></i>Plan Features
|
||||
</button>
|
||||
</td>
|
||||
|
||||
<!-- Plan Price -->
|
||||
<td>
|
||||
<div class="btn-table-align">
|
||||
<span v-if="plan.price == 0">
|
||||
Free
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
@{{ priceWithTax(plan) | currency }} / @{{ plan.interval | capitalize }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Plan Select Button -->
|
||||
<td class="text-right">
|
||||
<button class="btn btn-primary btn-plan" v-if="isActivePlan(plan)" disabled>
|
||||
<i class="fa fa-btn fa-check"></i>Current Plan
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary-outline btn-plan"
|
||||
v-if=" ! isActivePlan(plan) && selectingPlan !== plan"
|
||||
@click="confirmPlanUpdate(plan)"
|
||||
:disabled="selectingPlan">
|
||||
|
||||
Switch
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-plan"
|
||||
v-if="selectingPlan && selectingPlan === plan"
|
||||
disabled>
|
||||
|
||||
<i class="fa fa-btn fa-spinner fa-spin"></i>Updating
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Plan Update Modal -->
|
||||
<div class="modal fade" id="modal-confirm-plan-update" tabindex="-2" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content" v-if="confirmingPlan">
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">
|
||||
Update Subscription
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Are you sure you want to switch to the
|
||||
<strong>@{{ confirmingPlan.name }} (@{{ confirmingPlan.interval | capitalize }})</strong> plan?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Modal Actions -->
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">No, Go Back</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" @click="approvePlanUpdate">Yes, I'm Sure</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</spark-update-subscription>
|
||||
Reference in New Issue
Block a user