mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-09 09:51:02 +01:00
enterprise plan signup
This commit is contained in:
parent
aeae0ba535
commit
1c5f208ef1
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -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 () {
|
||||||
|
@ -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}} ×12 mo. =
|
{{plans[model.plan].basePrice | currency:"$":2}} ×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}} ×{{plans[model.plan].seatPrice | currency:"$":2}}
|
{{model.additionalSeats || 0}} ×{{plans[model.plan].seatPrice | currency:"$":2}}
|
||||||
×12 mo. = {{(model.additionalSeats * plans[model.plan].annualSeatPrice) | currency:"$":2}} /year
|
×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}} ×{{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}}
|
||||||
|
×{{plans[model.plan].monthlySeatPrice | currency:"$":2}} =
|
||||||
|
{{((model.additionalSeats || 0) * plans[model.plan].monthlySeatPrice) | currency:"$":2}} /month
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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%;
|
||||||
|
Loading…
Reference in New Issue
Block a user