adjust storage implementation

src/app/app.module.ts

@@ -33,6 +33,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
 import { AccountComponent } from './settings/account.component';
+import { AdjustStorageComponent } from './settings/adjust-storage.component';
 import { ChangeEmailComponent } from './settings/change-email.component';
 import { ChangePasswordComponent } from './settings/change-password.component';
 import { DeauthorizeSessionsComponent } from './settings/deauthorize-sessions.component';
@@ -106,6 +107,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
     declarations: [
         AccountComponent,
         AddEditComponent,
+        AdjustStorageComponent,
         ApiActionDirective,
         AppComponent,
         AttachmentsComponent,

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

@@ -0,0 +1,25 @@
+<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="card-body">
+        <div class="row">
+            <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">
+            </div>
+        </div>
+        <div *ngIf="add" class="mb-3">
+            <strong>{{'total' | i18n}}:</strong> {{storageAdjustment || 0}} GB &times; {{storageGbPrice | currency:'$'}} = {{adjustedStorageTotal
+            | 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 ? 'storageAddNote' : 'storageRemoveNote') | i18n}}
+        </small>
+    </div>
+</form>

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

@@ -0,0 +1,60 @@
+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 { StorageRequest } from 'jslib/models/request/storageRequest';
+
+@Component({
+    selector: 'app-adjust-storage',
+    templateUrl: 'adjust-storage.component.html',
+})
+export class AdjustStorageComponent {
+    @Input() storageGbPrice = 0;
+    @Input() add = true;
+    @Input() user = true;
+    @Input() interval = 'year';
+    @Output() onAdjusted = new EventEmitter<number>();
+    @Output() onCanceled = new EventEmitter();
+
+    storageAdjustment = 0;
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
+
+    async submit() {
+        try {
+            const request = new StorageRequest();
+            request.storageGbAdjustment = this.storageAdjustment;
+            if (!this.add) {
+                request.storageGbAdjustment *= -1;
+            }
+
+            if (this.user) {
+                this.formPromise = this.apiService.postAccountStorage(request);
+            }
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.add ? 'Added Storage' : 'Removed Storage' });
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t('adjustedStorage', request.storageGbAdjustment.toString()));
+            this.onAdjusted.emit(this.storageAdjustment);
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+
+    get adjustedStorageTotal(): number {
+        return this.storageGbPrice * this.storageAdjustment;
+    }
+}

src/app/settings/user-billing.component.html

@@ -69,12 +69,16 @@
             </div>
             <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel && paymentSource">
                 <div class="mt-3">
-                    <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
-                        {{'addStorage' | i18n}}
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(false)">
-                        {{'removeStorage' | i18n}}
-                    </button>
+                    <ng-container *ngIf="!showAdjustStorage">
+                        <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
+                            {{'addStorage' | i18n}}
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(false)">
+                            {{'removeStorage' | i18n}}
+                        </button>
+                    </ng-container>
+                    <app-adjust-storage [storageGbPrice]="4" [add]="adjustStorageAdd" [user]="true" (onAdjusted)="adjustedStorage($event)" (onCanceled)="canceledAdjustStorage()"
+                        *ngIf="showAdjustStorage"></app-adjust-storage>
                 </div>
             </ng-container>
             <h2 class="spaced-header">{{'paymentMethod' | i18n}}</h2>

src/app/settings/user-billing.component.ts

@@ -15,6 +15,8 @@ import { TokenService } from 'jslib/abstractions/token.service';
 
 import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
 
+import { AdjustStorageComponent } from './adjust-storage.component';
+
 @Component({
     selector: 'app-user-billing',
     templateUrl: 'user-billing.component.html',
@@ -23,6 +25,8 @@ export class UserBillingComponent implements OnInit {
     premium = false;
     loading = false;
     firstLoaded = false;
+    adjustStorageAdd = true;
+    showAdjustStorage = false;
     billing: BillingResponse;
     paymentMethodType = PaymentMethodType;
 
@@ -101,7 +105,17 @@ export class UserBillingComponent implements OnInit {
     }
 
     adjustStorage(add: boolean) {
+        this.adjustStorageAdd = add;
+        this.showAdjustStorage = true;
+    }
 
+    adjustedStorage(gbAmount: number) {
+        this.showAdjustStorage = false;
+        this.load();
+    }
+
+    canceledAdjustStorage() {
+        this.showAdjustStorage = false;
     }
 
     changePayment() {