organization signup plan details

src/app/settings/settingsCreateOrganizationController.js

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

src/app/settings/views/settingsCreateOrganization.html

@@ -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="form-group" show-errors>
-            <div class="radio">
+            <label for="billingEmail">Billing Email</label>
-                <label>
+            <input type="email" id="billingEmail" name="BillingEmail" ng-model="model.billingEmail" class="form-control"
-                    <input type="radio" ng-model="model.plan" name="PlanType" value="Personal">
+                   required api-field />
-                    Personal ($1 /month)
-                </label>
-                <p class="help-block">Share with up to 5 users.</p>
         </div>
-            <div class="radio">
+        <div class="checkbox">
             <label>
-                    <input type="radio" ng-model="model.plan" name="PlanType" value="Teams">
+                <input type="checkbox" ng-model="model.ownedBusiness"> This account is owned by a business.
-                    Teams ($2 /user per month)
             </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 &amp; 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}} &times;12 mo. = {{plans[model.plan].annualBasePrice | currency:"$":2}} /year<br />
+                    Additional users: {{model.additionalUsers || 0}} &times;{{plans[model.plan].userPrice | currency:"$":2}} &times;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}} &times;{{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