users => seats
This commit is contained in:
parent
f63f4e0aa3
commit
40d38ec0db
|
@ -15,7 +15,7 @@
|
||||||
$scope.plan = {
|
$scope.plan = {
|
||||||
name: org.Plan,
|
name: org.Plan,
|
||||||
type: org.PlanType,
|
type: org.PlanType,
|
||||||
maxUsers: org.MaxUsers
|
seats: org.Seats
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.subscription = {
|
$scope.subscription = {
|
||||||
|
|
|
@ -15,8 +15,8 @@
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Name</dt>
|
<dt>Name</dt>
|
||||||
<dd>{{plan.name || '-'}}</dd>
|
<dd>{{plan.name || '-'}}</dd>
|
||||||
<dt>Maximum Users</dt>
|
<dt>Total Seats</dt>
|
||||||
<dd>{{plan.maxUsers || '-'}}</dd>
|
<dd>{{plan.seats || '-'}}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
|
|
|
@ -6,48 +6,51 @@
|
||||||
$scope.plans = {
|
$scope.plans = {
|
||||||
free: {
|
free: {
|
||||||
basePrice: 0,
|
basePrice: 0,
|
||||||
noAdditionalUsers: true,
|
noAdditionalSeats: true,
|
||||||
noPayment: true
|
noPayment: true
|
||||||
},
|
},
|
||||||
personal: {
|
personal: {
|
||||||
basePrice: 1,
|
basePrice: 1,
|
||||||
annualBasePrice: 12,
|
annualBasePrice: 12,
|
||||||
baseUsers: 5,
|
baseSeats: 5,
|
||||||
userPrice: 1,
|
seatPrice: 1,
|
||||||
annualUserPrice: 12,
|
annualSeatPrice: 12,
|
||||||
maxAdditionalUsers: 5
|
maxAdditionalSeats: 5,
|
||||||
|
annualPlanType: 'personalAnnually'
|
||||||
},
|
},
|
||||||
teams: {
|
teams: {
|
||||||
basePrice: 5,
|
basePrice: 5,
|
||||||
annualBasePrice: 60,
|
annualBasePrice: 60,
|
||||||
monthlyBasePrice: 8,
|
monthlyBasePrice: 8,
|
||||||
baseUsers: 5,
|
baseSeats: 5,
|
||||||
userPrice: 2,
|
seatPrice: 2,
|
||||||
annualUserPrice: 24,
|
annualSeatPrice: 24,
|
||||||
monthlyUserPrice: 2.5
|
monthlySeatPrice: 2.5,
|
||||||
|
monthPlanType: 'teamsMonthly',
|
||||||
|
annualPlanType: 'teamsAnnually'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.model = {
|
$scope.model = {
|
||||||
plan: 'free',
|
plan: 'free',
|
||||||
additionalUsers: 0,
|
additionalSeats: 0,
|
||||||
interval: 'year',
|
interval: 'year',
|
||||||
ownedBusiness: false
|
ownedBusiness: false
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.totalPrice = function () {
|
$scope.totalPrice = function () {
|
||||||
if ($scope.model.interval === 'month') {
|
if ($scope.model.interval === 'month') {
|
||||||
return ($scope.model.additionalUsers || 0) * $scope.plans[$scope.model.plan].monthlyUserPrice +
|
return ($scope.model.additionalSeats || 0) * $scope.plans[$scope.model.plan].monthlySeatPrice +
|
||||||
$scope.plans[$scope.model.plan].monthlyBasePrice;
|
$scope.plans[$scope.model.plan].monthlyBasePrice;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
return ($scope.model.additionalUsers || 0) * $scope.plans[$scope.model.plan].annualUserPrice +
|
return ($scope.model.additionalSeats || 0) * $scope.plans[$scope.model.plan].annualSeatPrice +
|
||||||
$scope.plans[$scope.model.plan].annualBasePrice;
|
$scope.plans[$scope.model.plan].annualBasePrice;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.changedPlan = function () {
|
$scope.changedPlan = function () {
|
||||||
if ($scope.model.plan !== 'teams') {
|
if ($scope.plans[$scope.model.plan].hasOwnProperty('monthPlanType')) {
|
||||||
$scope.model.interval = 'year';
|
$scope.model.interval = 'year';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -75,13 +78,13 @@
|
||||||
$scope.submitPromise = stripe.card.createToken(model.card).then(function (response) {
|
$scope.submitPromise = stripe.card.createToken(model.card).then(function (response) {
|
||||||
var paidRequest = {
|
var paidRequest = {
|
||||||
name: model.name,
|
name: model.name,
|
||||||
planType: model.plan,
|
planType: model.interval === 'month' ? $scope.plans[model.plan].monthPlanType :
|
||||||
|
$scope.plans[model.plan].annualPlanType,
|
||||||
key: shareKey,
|
key: shareKey,
|
||||||
paymentToken: response.id,
|
paymentToken: response.id,
|
||||||
additionalUsers: model.additionalUsers,
|
additionalSeats: model.additionalSeats,
|
||||||
billingEmail: model.billingEmail,
|
billingEmail: model.billingEmail,
|
||||||
businessName: model.ownedBusiness ? model.businessName : null,
|
businessName: model.ownedBusiness ? model.businessName : null
|
||||||
monthly: model.interval === 'month'
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return apiService.organizations.post(paidRequest).$promise;
|
return apiService.organizations.post(paidRequest).$promise;
|
||||||
|
|
|
@ -78,8 +78,8 @@
|
||||||
<span>- Priority customer support</span>
|
<span>- Priority customer support</span>
|
||||||
<span>- 7 day free trial, cancel anytime</span>
|
<span>- 7 day free trial, cancel anytime</span>
|
||||||
<span class="bottom-line">
|
<span class="bottom-line">
|
||||||
{{plans.personal.basePrice | currency:'$'}} /month for {{plans.personal.baseUsers}} users,
|
{{plans.personal.basePrice | currency:'$'}} /month for {{plans.personal.baseSeats}} users,
|
||||||
additional users {{plans.personal.userPrice | currency:'$'}} /month
|
additional users {{plans.personal.seatPrice | currency:'$'}} /month
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -93,8 +93,8 @@
|
||||||
<span>- Priority customer support</span>
|
<span>- Priority customer support</span>
|
||||||
<span>- 7 day free trial, cancel anytime</span>
|
<span>- 7 day free trial, cancel anytime</span>
|
||||||
<span class="bottom-line">
|
<span class="bottom-line">
|
||||||
{{plans.teams.basePrice | currency:'$'}} /month for {{plans.teams.baseUsers}} users,
|
{{plans.teams.basePrice | currency:'$'}} /month for {{plans.teams.baseSeats}} users,
|
||||||
additional users {{plans.teams.userPrice | currency:'$'}} /month
|
additional users {{plans.teams.seatPrice | currency:'$'}} /month
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -105,25 +105,25 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box box-default" ng-if="!plans[model.plan].noAdditionalUsers">
|
<div class="box box-default" ng-if="!plans[model.plan].noAdditionalSeats">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Additional Users</h3>
|
<h3 class="box-title">Additional Users (Seats)</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
<p>
|
<p>
|
||||||
Your plan comes with <b>{{plans[model.plan].baseUsers}}</b> users. You can add additional users
|
Your plan comes with <b>{{plans[model.plan].baseSeats}}</b> users (seats). You can add additional users
|
||||||
<span ng-if="plans[model.plan].maxAdditionalUsers">
|
<span ng-if="plans[model.plan].maxAdditionalSeats">
|
||||||
(up to {{plans[model.plan].maxAdditionalUsers}} more)
|
(up to {{plans[model.plan].maxAdditionalSeats}} more)
|
||||||
</span>
|
</span>
|
||||||
for {{plans[model.plan].userPrice | currency:'$'}} per user /month.
|
for {{plans[model.plan].seatPrice | currency:'$'}} per user /month.
|
||||||
</p>
|
</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="form-group" show-errors style="margin: 0;">
|
<div class="form-group" show-errors style="margin: 0;">
|
||||||
<label for="additionalUsers" class="sr-only">Additional Users</label>
|
<label for="additionalSeats" class="sr-only">Additional Users</label>
|
||||||
<input type="number" id="additionalUsers" name="AdditionalUsers" ng-model="model.additionalUsers"
|
<input type="number" id="additionalSeats" name="AdditionalSeats" ng-model="model.additionalSeats"
|
||||||
min="0" ng- class="form-control" placeholder="# of users" api-field
|
min="0" ng- class="form-control" placeholder="# of users" api-field
|
||||||
ng-attr-max="{{plans[model.plan].maxAdditionalUsers || 1000000}}" />
|
ng-attr-max="{{plans[model.plan].maxAdditionalSeats || 1000000}}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -145,8 +145,8 @@
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
Additional users:
|
Additional users:
|
||||||
{{model.additionalUsers || 0}} ×{{plans[model.plan].userPrice | currency:"$":2}}
|
{{model.additionalSeats || 0}} ×{{plans[model.plan].seatPrice | currency:"$":2}}
|
||||||
×12 mo. = {{(model.additionalUsers * plans[model.plan].annualUserPrice) | currency:"$":2}} /year
|
×12 mo. = {{(model.additionalSeats * plans[model.plan].annualSeatPrice) | currency:"$":2}} /year
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -160,8 +160,8 @@
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
Additional users:
|
Additional users:
|
||||||
{{model.additionalUsers || 0}} ×{{plans[model.plan].monthlyUserPrice | currency:"$":2}} =
|
{{model.additionalSeats || 0}} ×{{plans[model.plan].monthlySeatPrice | currency:"$":2}} =
|
||||||
{{(model.additionalUsers * plans[model.plan].monthlyUserPrice) | currency:"$":2}} /month
|
{{(model.additionalSeats * plans[model.plan].monthlySeatPrice) | currency:"$":2}} /month
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue