mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-27 12:36:14 +01:00
organization signup plan details
This commit is contained in:
Kyle Spearrin
parent
ebb1044c43
commit
8098ab50e8
@ -5,8 +5,32 @@
|
||||
toastr, $analytics, authService, stripe) {
|
||||
$analytics.eventTrack('settingsCreateOrganizationController', { category: 'Modal' });
|
||||
|
||||
$scope.plans = {
|
||||
free: {
|
||||
basePrice: 0
|
||||
},
|
||||
personal: {
|
||||
basePrice: 1,
|
||||
annualBasePrice: 12,
|
||||
baseUsers: 3,
|
||||
userPrice: 1,
|
||||
annualUserPrice: 12
|
||||
},
|
||||
teams: {
|
||||
basePrice: 5,
|
||||
annualBasePrice: 60,
|
||||
monthlyBasePrice: 8,
|
||||
baseUsers: 5,
|
||||
userPrice: 2,
|
||||
annualUserPrice: 24,
|
||||
monthlyUserPrice: 2.5
|
||||
}
|
||||
};
|
||||
|
||||
$scope.model = {
|
||||
plan: 'Personal'
|
||||
plan: 'personal',
|
||||
additionalUsers: 0,
|
||||
interval: 'annually'
|
||||
};
|
||||
|
||||
$scope.submit = function (model) {
|
||||
@ -15,7 +39,11 @@
|
||||
name: model.name,
|
||||
planType: model.plan,
|
||||
key: cryptoService.makeShareKey(),
|
||||
cardToken: response.id
|
||||
cardToken: response.id,
|
||||
additionalUsers: model.additionalUsers,
|
||||
billingEmail: model.billingEmail,
|
||||
businessName: model.ownedBusiness ? model.businessName : null,
|
||||
monthly: model.interval === 'monthly'
|
||||
};
|
||||
|
||||
return apiService.organizations.post(request).$promise;
|
||||
|
||||
@ -15,27 +15,94 @@
|
||||
<input type="text" id="name" name="Name" ng-model="model.name" class="form-control"
|
||||
required api-field />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.plan" name="PlanType" value="Personal">
|
||||
Personal ($1 /month)
|
||||
</label>
|
||||
<p class="help-block">Share with up to 5 users.</p>
|
||||
<div class="form-group" show-errors>
|
||||
<label for="billingEmail">Billing Email</label>
|
||||
<input type="email" id="billingEmail" name="BillingEmail" ng-model="model.billingEmail" class="form-control"
|
||||
required api-field />
|
||||
</div>
|
||||
<div class="radio">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.plan" name="PlanType" value="Teams">
|
||||
Teams ($2 /user per month)
|
||||
<input type="checkbox" ng-model="model.ownedBusiness"> This account is owned by a business.
|
||||
</label>
|
||||
<p class="help-block">Share with as many users as you need.</p>
|
||||
</div>
|
||||
<div class="form-group" ng-show="model.ownedBusiness" show-errors>
|
||||
<label for="businessName">Business Name</label>
|
||||
<input type="text" id="businessName" name="BusinessName" ng-model="model.businessName" class="form-control"
|
||||
api-field />
|
||||
</div>
|
||||
<hr />
|
||||
<h4>Choose Your Plan</h4>
|
||||
<div class="form-group">
|
||||
<div class="radio" ng-show="!model.ownedBusiness">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.plan" name="PlanType" value="free">
|
||||
Free
|
||||
</label>
|
||||
<p class="help-block">Share with 1 other user.</p>
|
||||
</div>
|
||||
<div class="radio" ng-show="!model.ownedBusiness">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.plan" name="PlanType" value="personal">
|
||||
Personal - ${{plans.personal.basePrice}} /month for {{plans.personal.baseUsers}} users,
|
||||
additional users ${{plans.personal.userPrice}} /month
|
||||
</label>
|
||||
<p class="help-block">For personal users such as families & friends.</p>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.plan" name="PlanType" value="teams">
|
||||
Teams - ${{plans.teams.basePrice}} /month for {{plans.teams.baseUsers}} users,
|
||||
additional users ${{plans.teams.userPrice}} /month
|
||||
</label>
|
||||
<p class="help-block">For businesses and other large teams.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="model.plan !== 'free'">
|
||||
<hr />
|
||||
<h4>Additional Users</h4>
|
||||
<p>
|
||||
Your plan comes with {{plans[model.plan].baseUsers}} users. You can add additional users to your plan
|
||||
for ${{plans[model.plan].userPrice}} /month.
|
||||
</p>
|
||||
<div class="form-group" show-errors>
|
||||
<label for="additionalUsers">Additional Users</label>
|
||||
<input type="number" id="additionalUsers" name="AdditionalUsers" ng-model="model.additionalUsers" min="0"
|
||||
class="form-control" api-field />
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="model.plan !== 'free'">
|
||||
<hr />
|
||||
<h4>Billing Totals</h4>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.interval" name="BillingInterval" value="annually">
|
||||
Bill me annually
|
||||
</label>
|
||||
<p class="help-block">
|
||||
Base price: {{plans[model.plan].basePrice | currency:"$":2}} ×12 mo. = {{plans[model.plan].annualBasePrice | currency:"$":2}} /year<br />
|
||||
Additional users: {{model.additionalUsers || 0}} ×{{plans[model.plan].userPrice | currency:"$":2}} ×12 mo. = {{(model.additionalUsers * plans[model.plan].annualUserPrice) | currency:"$":2}} /year<br />
|
||||
<b>Total:</b> {{((model.additionalUsers || 0) * plans[model.plan].annualUserPrice + plans[model.plan].annualBasePrice) | currency:"USD $":2}} /year
|
||||
</p>
|
||||
</div>
|
||||
<div class="radio" ng-show="model.plan !== 'personal'">
|
||||
<label>
|
||||
<input type="radio" ng-model="model.interval" name="BillingInterval" value="monthly">
|
||||
Bill me monthly
|
||||
</label>
|
||||
<p class="help-block">
|
||||
Base price: {{plans[model.plan].monthlyBasePrice | currency:"$":2}} /month<br />
|
||||
Additional users: {{model.additionalUsers || 0}} ×{{plans[model.plan].monthlyUserPrice | currency:"$":2}} = {{(model.additionalUsers * plans[model.plan].monthlyUserPrice) | currency:"$":2}} /month<br />
|
||||
<b>Total:</b> {{((model.additionalUsers || 0) * plans[model.plan].monthlyUserPrice + plans[model.plan].monthlyBasePrice) | currency:"USD $":2}} /month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="model.plan !== 'free'">
|
||||
<hr />
|
||||
<h4>Payment Information</h4>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="card_number">Card number</label>
|
||||
<label for="card_number">Card Number</label>
|
||||
<input type="text" id="card_number" name="card_number" ng-model="model.card.number" class="form-control"
|
||||
cc-number cc-eager-type required />
|
||||
</div>
|
||||
@ -52,7 +119,7 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="exp_month">Expiration month</label>
|
||||
<label for="exp_month">Expiration Month</label>
|
||||
<select id="exp_month" class="form-control" ng-model="model.card.exp_month" required cc-exp-month>
|
||||
<option value="">-- Select --</option>
|
||||
<option value="01">01 - January</option>
|
||||
@ -72,7 +139,7 @@
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="exp_year">Expiration year</label>
|
||||
<label for="exp_year">Expiration Year</label>
|
||||
<select id="exp_year" class="form-control" ng-model="model.card.exp_year" required cc-exp-year>
|
||||
<option value="">-- Select --</option>
|
||||
<option value="17">2017</option>
|
||||
@ -354,12 +421,13 @@
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="address_zip" ng-bind="model.card.address_country === 'US' ? 'Zip code' : 'Postal code'"></label>
|
||||
<label for="address_zip" ng-bind="model.card.address_country === 'US' ? 'Zip Code' : 'Postal Code'"></label>
|
||||
<input type="text" id="address_zip" ng-model="model.card.address_zip" class="form-control" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary btn-flat" ng-disabled="createOrgForm.$loading">
|
||||
<i class="fa fa-refresh fa-spin loading-icon" ng-show="createOrgForm.$loading"></i>Submit
|
||||
|
||||
Loading…
Reference in New Issue
Block a user