enterprise plan signup

This commit is contained in:
Kyle Spearrin 2017-05-08 15:20:01 -04:00
parent aeae0ba535
commit 1c5f208ef1
4 changed files with 69 additions and 13 deletions

View File

@ -46,6 +46,14 @@ angular.module('bit')
monthPlanType: 'teamsMonthly', monthPlanType: 'teamsMonthly',
annualPlanType: 'teamsAnnually', annualPlanType: 'teamsAnnually',
upgradeSortOrder: 2 upgradeSortOrder: 2
},
enterprise: {
seatPrice: 3,
annualSeatPrice: 36,
monthlySeatPrice: 4,
monthPlanType: 'enterpriseMonthly',
annualPlanType: 'enterpriseAnnually',
upgradeSortOrder: 3
} }
} }
}); });

View File

@ -14,12 +14,12 @@
$scope.totalPrice = function () { $scope.totalPrice = function () {
if ($scope.model.interval === 'month') { if ($scope.model.interval === 'month') {
return ($scope.model.additionalSeats || 0) * $scope.plans[$scope.model.plan].monthlySeatPrice + return ($scope.model.additionalSeats || 0) * ($scope.plans[$scope.model.plan].monthlySeatPrice || 0) +
$scope.plans[$scope.model.plan].monthlyBasePrice; ($scope.plans[$scope.model.plan].monthlyBasePrice || 0);
} }
else { else {
return ($scope.model.additionalSeats || 0) * $scope.plans[$scope.model.plan].annualSeatPrice + return ($scope.model.additionalSeats || 0) * ($scope.plans[$scope.model.plan].annualSeatPrice || 0) +
$scope.plans[$scope.model.plan].annualBasePrice; ($scope.plans[$scope.model.plan].annualBasePrice || 0);
} }
}; };
@ -27,6 +27,14 @@
if ($scope.plans[$scope.model.plan].hasOwnProperty('monthPlanType')) { if ($scope.plans[$scope.model.plan].hasOwnProperty('monthPlanType')) {
$scope.model.interval = 'year'; $scope.model.interval = 'year';
} }
if ($scope.plans[$scope.model.plan].noAdditionalSeats) {
$scope.model.additionalSeats = 0;
}
else if (!$scope.model.additionalSeats && !$scope.plans[$scope.model.plan].baseSeats &&
!$scope.plans[$scope.model.plan].noAdditionalSeats) {
$scope.model.additionalSeats = 1;
}
}; };
$scope.changedBusiness = function () { $scope.changedBusiness = function () {

View File

@ -98,6 +98,21 @@
</span> </span>
</label> </label>
</div> </div>
<div class="radio radio-block" ng-click="changedPlan()">
<label>
<input type="radio" ng-model="model.plan" name="PlanType" value="enterprise">
Enterprise
<span>For businesses and other large organizations.</span>
<span>- Add and share with unlimited users</span>
<span>- Create unlimited collections</span>
<span>- User groups with optional directory sync</span>
<span>- Priority customer support</span>
<span>- 7 day free trial, cancel anytime</span>
<span class="bottom-line">
{{plans.enterprise.seatPrice | currency:'$'}} per user /month
</span>
</label>
</div>
</div> </div>
<div class="box-footer" ng-show="plans[model.plan].noPayment"> <div class="box-footer" ng-show="plans[model.plan].noPayment">
<button type="submit" class="btn btn-primary btn-flat" ng-disabled="createOrgForm.$loading"> <button type="submit" class="btn btn-primary btn-flat" ng-disabled="createOrgForm.$loading">
@ -105,7 +120,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="box box-default" ng-if="!plans[model.plan].noAdditionalSeats"> <div class="box box-default" ng-if="!plans[model.plan].noAdditionalSeats && plans[model.plan].baseSeats">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title">Additional Users (Seats)</h3> <h3 class="box-title">Additional Users (Seats)</h3>
</div> </div>
@ -129,6 +144,27 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box box-default" ng-if="!plans[model.plan].noAdditionalSeats && !plans[model.plan].baseSeats">
<div class="box-header with-border">
<h3 class="box-title">Users (Seats)</h3>
</div>
<div class="box-body">
<p>
How many user seats do you need?
You can also add additional seats later if needed.
</p>
<div class="row">
<div class="col-md-4">
<div class="form-group" show-errors style="margin: 0;">
<label for="additionalSeats" class="sr-only">Users</label>
<input type="number" id="additionalSeats" name="AdditionalSeats" ng-model="model.additionalSeats"
min="1" class="form-control" placeholder="# of users" api-field
ng-attr-max="{{plans[model.plan].maxAdditionalSeats || 1000000}}" />
</div>
</div>
</div>
</div>
</div>
<div class="box box-default" ng-if="!plans[model.plan].noPayment"> <div class="box box-default" ng-if="!plans[model.plan].noPayment">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title">Billing Summary</h3> <h3 class="box-title">Billing Summary</h3>
@ -138,15 +174,17 @@
<label> <label>
<input type="radio" ng-model="model.interval" name="BillingInterval" value="year"> <input type="radio" ng-model="model.interval" name="BillingInterval" value="year">
Annually Annually
<span> <span ng-if="plans[model.plan].annualBasePrice">
Base price: Base price:
{{plans[model.plan].basePrice | currency:"$":2}} &times;12 mo. = {{plans[model.plan].basePrice | currency:"$":2}} &times;12 mo. =
{{plans[model.plan].annualBasePrice | currency:"$":2}} /year {{plans[model.plan].annualBasePrice | currency:"$":2}} /year
</span> </span>
<span> <span>
Additional users: <span ng-if="plans[model.plan].baseSeats">Additional users:</span>
<span ng-if="!plans[model.plan].baseSeats">Users:</span>
{{model.additionalSeats || 0}} &times;{{plans[model.plan].seatPrice | currency:"$":2}} {{model.additionalSeats || 0}} &times;{{plans[model.plan].seatPrice | currency:"$":2}}
&times;12 mo. = {{(model.additionalSeats * plans[model.plan].annualSeatPrice) | currency:"$":2}} /year &times;12 mo. =
{{((model.additionalSeats || 0) * plans[model.plan].annualSeatPrice) | currency:"$":2}} /year
</span> </span>
</label> </label>
</div> </div>
@ -154,14 +192,16 @@
<label> <label>
<input type="radio" ng-model="model.interval" name="BillingInterval" value="month"> <input type="radio" ng-model="model.interval" name="BillingInterval" value="month">
Monthly Monthly
<span> <span ng-if="plans[model.plan].monthlyBasePrice">
Base price: Base price:
{{plans[model.plan].monthlyBasePrice | currency:"$":2}} /month {{plans[model.plan].monthlyBasePrice | currency:"$":2}} /month
</span> </span>
<span> <span>
Additional users: <span ng-if="plans[model.plan].baseSeats">Additional users:</span>
{{model.additionalSeats || 0}} &times;{{plans[model.plan].monthlySeatPrice | currency:"$":2}} = <span ng-if="!plans[model.plan].baseSeats">Users:</span>
{{(model.additionalSeats * plans[model.plan].monthlySeatPrice) | currency:"$":2}} /month {{model.additionalSeats || 0}}
&times;{{plans[model.plan].monthlySeatPrice | currency:"$":2}} =
{{((model.additionalSeats || 0) * plans[model.plan].monthlySeatPrice) | currency:"$":2}} /month
</span> </span>
</label> </label>
</div> </div>

View File

@ -215,7 +215,7 @@ form .btn .loading-icon {
margin-left: -20px; margin-left: -20px;
} }
span { > span {
display: block; display: block;
color: @text-muted; color: @text-muted;
font-size: 90%; font-size: 90%;