org billing seat adjustments

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { UserAddEditComponent as OrgUserAddEditComponent } from './organizations
 import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/manage/user-groups.component';
 
 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
+import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
 import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
@@ -149,6 +150,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         AccountComponent,
         AddEditComponent,
         AdjustPaymentComponent,
+        AdjustSeatsComponent,
         AdjustStorageComponent,
         ApiActionDirective,
         AppComponent,

src/app/organizations/settings/adjust-seats.component.html

@@ -0,0 +1,26 @@
+<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="card-body">
+        <h3 class="card-body-header">{{(add ? 'addSeats' : 'removeSeats') | i18n}}</h3>
+        <div class="row">
+            <div class="form-group col-6">
+                <label for="seatAdjustment">{{(add ? 'seatsToAdd' : 'seatsToRemove') | i18n}}</label>
+                <input id="seatAdjustment" class="form-control" type="number" name="SeatAdjustment" [(ngModel)]="seatAdjustment" min="0"
+                    step="1" required>
+            </div>
+        </div>
+        <div *ngIf="add" class="mb-3">
+            <strong>{{'total' | i18n}}:</strong> {{seatAdjustment || 0}} &times; {{seatPrice | currency:'$'}} = {{adjustedSeatTotal
+            | currency:'$'}} /{{interval | i18n}}
+        </div>
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+            <i class="fa fa-spinner fa-spin"></i>
+            <span>{{'submit' | i18n}}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
+            {{'cancel' | i18n}}
+        </button>
+        <small class="d-block text-muted mt-3">
+            {{(add ? 'seatsAddNote' : 'seatsRemoveNote') | i18n}}
+        </small>
+    </div>
+</form>

src/app/organizations/settings/adjust-seats.component.ts

@@ -0,0 +1,58 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { SeatRequest } from 'jslib/models/request/seatRequest';
+
+@Component({
+    selector: 'app-adjust-seats',
+    templateUrl: 'adjust-seats.component.html',
+})
+export class AdjustSeatsComponent {
+    @Input() seatPrice = 0;
+    @Input() add = true;
+    @Input() organizationId: string;
+    @Input() interval = 'year';
+    @Output() onAdjusted = new EventEmitter<number>();
+    @Output() onCanceled = new EventEmitter();
+
+    seatAdjustment = 0;
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
+
+    async submit() {
+        try {
+            const request = new SeatRequest();
+            request.seatAdjustment = this.seatAdjustment;
+            if (!this.add) {
+                request.seatAdjustment *= -1;
+            }
+
+            this.formPromise = this.apiService.postOrganizationSeat(this.organizationId, request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.add ? 'Added Seats' : 'Removed Seats' });
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t('adjustedSeats', request.seatAdjustment.toString()));
+            this.onAdjusted.emit(this.seatAdjustment);
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+
+    get adjustedSeatTotal(): number {
+        return this.seatAdjustment * this.seatAdjustment;
+    }
+}

src/app/organizations/settings/organization-billing.component.html

@@ -90,6 +90,22 @@
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>
+        <h2 class="spaced-header">{{'userSeats' | i18n}}</h2>
+        <p>{{'subscriptionUserSeats' | i18n : billing.seats}}</p>
+        <ng-container *ngIf="subscription && canAdjustSeats">
+            <div class="mt-3">
+                <div class="d-flex" *ngIf="!showAdjustSeats">
+                    <button type="button" class="btn btn-outline-secondary" (click)="adjustSeats(true)">
+                        {{'addSeats' | i18n}}
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustSeats(false)">
+                        {{'removeSeats' | i18n}}
+                    </button>
+                </div>
+                <app-adjust-seats [seatPrice]="seatPrice" [add]="adjustSeatsAdd" [organizationId]="organizationId" [interval]="billingInterval"
+                    (onAdjusted)="closeSeats(true)" (onCanceled)="closeSeats(false)" *ngIf="showAdjustSeats"></app-adjust-seats>
+            </div>
+        </ng-container>
         <h2 class="spaced-header">{{'storage' | i18n}}</h2>
         <p>{{'subscriptionStorage' | i18n : billing.maxStorageGb || 0 : billing.storageName || '0 MB'}}</p>
         <div class="progress">

src/app/organizations/settings/organization-billing.component.ts

@@ -30,6 +30,8 @@ export class OrganizationBillingComponent implements OnInit {
     loading = false;
     firstLoaded = false;
     organizationId: string;
+    adjustSeatsAdd = true;
+    showAdjustSeats = false;
     adjustStorageAdd = true;
     showAdjustStorage = false;
     showAdjustPayment = false;
@@ -146,6 +148,18 @@ export class OrganizationBillingComponent implements OnInit {
         }
     }
 
+    adjustSeats(add: boolean) {
+        this.adjustSeatsAdd = add;
+        this.showAdjustSeats = true;
+    }
+
+    closeSeats(load: boolean) {
+        this.showAdjustSeats = false;
+        if (load) {
+            this.load();
+        }
+    }
+
     adjustStorage(add: boolean) {
         this.adjustStorageAdd = add;
         this.showAdjustStorage = true;
@@ -216,6 +230,23 @@ export class OrganizationBillingComponent implements OnInit {
     }
 
     get seatPrice() {
-        return 4;
+        switch (this.billing.planType) {
+            case PlanType.EnterpriseMonthly:
+                return 4;
+            case PlanType.EnterpriseAnnually:
+                return 3;
+            case PlanType.TeamsMonthly:
+                return 2.5;
+            case PlanType.TeamsAnnually:
+                return 2;
+            default:
+                return 0;
+        }
+    }
+
+    get canAdjustSeats() {
+        return this.billing.planType === PlanType.EnterpriseMonthly ||
+            this.billing.planType === PlanType.EnterpriseAnnually ||
+            this.billing.planType === PlanType.TeamsMonthly || this.billing.planType === PlanType.TeamsAnnually;
     }
 }

src/app/settings/adjust-storage.component.html

@@ -5,7 +5,7 @@
             <div class="form-group col-6">
                 <label for="storageAdjustment">{{(add ? 'gbStorageAdd' : 'gbStorageRemove') | i18n}}</label>
                 <input id="storageAdjustment" class="form-control" type="number" name="StroageGbAdjustment" [(ngModel)]="storageAdjustment"
-                    min="0" max="99" step="1">
+                    min="0" max="99" step="1" required>
             </div>
         </div>
         <div *ngIf="add" class="mb-3">