move premium component to it's own route

src/app/app-routing.module.ts

@@ -18,6 +18,7 @@ import { AccountComponent } from './settings/account.component';
 import { CreateOrganizationComponent } from './settings/create-organization.component';
 import { DomainRulesComponent } from './settings/domain-rules.component';
 import { OptionsComponent } from './settings/options.component';
+import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 import { UserBillingComponent } from './settings/user-billing.component';
@@ -60,10 +61,11 @@ const routes: Routes = [
                     { path: 'options', component: OptionsComponent, canActivate: [AuthGuardService] },
                     { path: 'domain-rules', component: DomainRulesComponent, canActivate: [AuthGuardService] },
                     { path: 'two-factor', component: TwoFactorSetupComponent, canActivate: [AuthGuardService] },
+                    { path: 'premium', component: PremiumComponent, canActivate: [AuthGuardService] },
                     { path: 'billing', component: UserBillingComponent, canActivate: [AuthGuardService] },
                     {
                         path: 'create-organization',
-                        component: CreateOrganizationComponent, 
+                        component: CreateOrganizationComponent,
                         canActivate: [AuthGuardService],
                     },
                 ],

src/app/settings/premium.component.html

@@ -1,4 +1,7 @@
-<app-callout type="success" icon="fa-star" title="{{'goPremium' | i18n}}">
+<div class="page-header">
+    <h1>{{'goPremium' | i18n}}</h1>
+</div>
+<app-callout type="success">
     <p>{{'premiumSignUpAndGet' | i18n}}</p>
     <ul class="fa-ul">
         <li>

src/app/settings/premium.component.ts

@@ -1,16 +1,18 @@
 import {
     Component,
-    EventEmitter,
+    OnInit,
-    Output,
     ViewChild,
 } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { TokenService } from 'jslib/abstractions/token.service';
 
 import { PaymentComponent } from './payment.component';
 
@@ -18,9 +20,8 @@ import { PaymentComponent } from './payment.component';
     selector: 'app-premium',
     templateUrl: 'premium.component.html',
 })
-export class PremiumComponent {
+export class PremiumComponent implements OnInit {
     @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
-    @Output() onPremiumPurchased = new EventEmitter();
 
     selfHosted = false;
     premiumPrice = 10;
@@ -31,10 +32,19 @@ export class PremiumComponent {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private analytics: Angulartics2, private toasterService: ToasterService,
-        platformUtilsService: PlatformUtilsService) {
+        platformUtilsService: PlatformUtilsService, private tokenService: TokenService,
+        private router: Router, private messagingService: MessagingService) {
         this.selfHosted = platformUtilsService.isSelfHost();
     }
 
+    async ngOnInit() {
+        const premium = await this.tokenService.getPremium();
+        if (premium) {
+            this.router.navigate(['/settings/billing']);
+            return;
+        }
+    }
+
     async submit() {
         try {
             this.formPromise = this.paymentComponent.createPaymentToken().then((token) => {
@@ -53,7 +63,8 @@ export class PremiumComponent {
         await this.apiService.refreshIdentityToken();
         this.analytics.eventTrack.next({ action: 'Signed Up Premium' });
         this.toasterService.popAsync('success', null, this.i18nService.t('premiumUpdated'));
-        this.onPremiumPurchased.emit();
+        this.messagingService.send('purchasedPremium');
+        this.router.navigate(['/settings/billing']);
     }
 
     get additionalStorageTotal(): number {

src/app/settings/settings.component.html

@@ -13,9 +13,12 @@
                     <a routerLink="organizations" class="list-group-item" routerLinkActive="active">
                         Organizations
                     </a>
-                    <a routerLink="billing" class="list-group-item" routerLinkActive="active">
+                    <a routerLink="billing" class="list-group-item" routerLinkActive="active" *ngIf="premium">
                         {{'billingAndLicensing' | i18n}}
                     </a>
+                    <a routerLink="premium" class="list-group-item" routerLinkActive="active" *ngIf="!premium">
+                        {{'goPremium' | i18n}}
+                    </a>
                     <a routerLink="two-factor" class="list-group-item" routerLinkActive="active">
                         {{'twoStepLogin' | i18n}}
                     </a>

src/app/settings/settings.component.ts

@@ -1,9 +1,46 @@
 import {
     Component,
+    NgZone,
+    OnDestroy,
+    OnInit,
 } from '@angular/core';
 
+import { TokenService } from 'jslib/abstractions/token.service';
+
+import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+
+const BroadcasterSubscriptionId = 'SettingsComponent';
+
 @Component({
     selector: 'app-settings',
     templateUrl: 'settings.component.html',
 })
-export class SettingsComponent { }
+export class SettingsComponent implements OnInit, OnDestroy {
+    premium: boolean;
+
+    constructor(private tokenService: TokenService, private broadcasterService: BroadcasterService,
+        private ngZone: NgZone) { }
+
+    async ngOnInit() {
+        this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
+            this.ngZone.run(async () => {
+                switch (message.command) {
+                    case 'purchasedPremium':
+                        await this.load();
+                        break;
+                    default:
+                }
+            });
+        });
+
+        await this.load();
+    }
+
+    ngOnDestroy() {
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    }
+
+    async load() {
+        this.premium = await this.tokenService.getPremium();
+    }
+}

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

@@ -6,9 +6,8 @@
         </small>
     </h1>
 </div>
-<app-premium *ngIf="!premium" (onPremiumPurchased)="load()"></app-premium>
+<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading"></i>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="premium && !firstLoaded && loading"></i>
+<ng-container *ngIf="billing">
-<ng-container *ngIf="premium && billing">
     <app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">{{'subscriptionCanceled' | i18n}}</app-callout>
     <app-callout type="warning" title="{{'pendingCancellation' | i18n}}" *ngIf="subscriptionMarkedForCancel">
         <p>{{'subscriptionPendingCanceled' | i18n}}</p>

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

@@ -2,6 +2,7 @@ import {
     Component,
     OnInit,
 } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
@@ -20,7 +21,6 @@ import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
     templateUrl: 'user-billing.component.html',
 })
 export class UserBillingComponent implements OnInit {
-    premium = false;
     loading = false;
     firstLoaded = false;
     adjustStorageAdd = true;
@@ -36,7 +36,8 @@ export class UserBillingComponent implements OnInit {
 
     constructor(private tokenService: TokenService, private apiService: ApiService,
         private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService) {
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private router: Router) {
         this.selfHosted = platformUtilsService.isSelfHost();
     }
 
@@ -50,11 +51,15 @@ export class UserBillingComponent implements OnInit {
             return;
         }
 
-        this.premium = this.tokenService.getPremium();
+        const premium = this.tokenService.getPremium();
-        if (this.premium) {
+        if (premium) {
             this.loading = true;
             this.billing = await this.apiService.getUserBilling();
+        } else {
+            this.router.navigate(['/settings/premium']);
+            return;
         }
+
         this.loading = false;
     }