users => seats

This commit is contained in:
Kyle Spearrin 2017-04-10 10:43:18 -04:00
parent f63f4e0aa3
commit 40d38ec0db
4 changed files with 40 additions and 37 deletions

View File

@ -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 = {

View File

@ -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">

View File

@ -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;

View File

@ -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}} &times;{{plans[model.plan].userPrice | currency:"$":2}} {{model.additionalSeats || 0}} &times;{{plans[model.plan].seatPrice | currency:"$":2}}
&times;12 mo. = {{(model.additionalUsers * plans[model.plan].annualUserPrice) | currency:"$":2}} /year &times;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}} &times;{{plans[model.plan].monthlyUserPrice | currency:"$":2}} = {{model.additionalSeats || 0}} &times;{{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>