sub out change plan component

src/app/app.module.ts

@@ -57,6 +57,7 @@ import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/m
 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
 import { ApiKeyComponent as OrgApiKeyComponent } from './organizations/settings/api-key.component';
+import { ChangePlanComponent } from './organizations/settings/change-plan.component';
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
 import { DownloadLicenseComponent } from './organizations/settings/download-license.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
@@ -250,6 +251,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         ChangeEmailComponent,
         ChangeKdfComponent,
         ChangePasswordComponent,
+        ChangePlanComponent,
         CiphersComponent,
         CollectionsComponent,
         ColorPasswordPipe,

src/app/organizations/settings/change-plan.component.html

@@ -0,0 +1,14 @@
+<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="card-body">
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <h3 class="card-body-header">{{'changeBillingPlan' | i18n}}</h3>
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <span>{{'submit' | i18n}}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
+            {{'cancel' | i18n}}
+        </button>
+    </div>
+</form>

src/app/organizations/settings/change-plan.component.ts

@@ -0,0 +1,34 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-change-plan',
+    templateUrl: 'change-plan.component.html',
+})
+export class ChangePlanComponent {
+    @Input() organizationId: string;
+    @Output() onChanged = new EventEmitter();
+    @Output() onCanceled = new EventEmitter();
+
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
+
+    async submit() {
+        try {
+            this.platformUtilsService.eventTrack('Changed Plan');
+            this.onChanged.emit();
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+}

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

@@ -85,7 +85,7 @@
     </ng-container>
     <ng-container *ngIf="!selfHosted">
         <div class="d-flex">
-            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()">
+            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()" *ngIf="!showChangePlan">
                 {{'changeBillingPlan' | i18n}}
             </button>
             <button type="button" class="btn btn-outline-secondary ml-1" (click)="downloadLicense()"
@@ -99,6 +99,8 @@
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>
+        <app-change-plan [organizationId]="organizationId" (onChanged)="closeChangePlan(true)"
+            (onCanceled)="closeChangePlan(false)" *ngIf="showChangePlan"></app-change-plan>
         <div class="mt-3" *ngIf="showDownloadLicense">
             <app-download-license [organizationId]="organizationId" (onDownloaded)="closeDownloadLicense()"
                 (onCanceled)="closeDownloadLicense()"></app-download-license>

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

@@ -31,6 +31,7 @@ export class OrganizationSubscriptionComponent implements OnInit {
     showAdjustStorage = false;
     showUpdateLicense = false;
     showDownloadLicense = false;
+    showChangePlan = false;
     sub: OrganizationSubscriptionResponse;
     selfHosted = false;
 
@@ -102,6 +103,10 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
 
     async changePlan() {
+        if (this.subscription == null) {
+            this.showChangePlan = !this.showChangePlan;
+            return;
+        }
         const contactSupport = await this.platformUtilsService.showDialog(this.i18nService.t('changeBillingPlanDesc'),
             this.i18nService.t('changeBillingPlan'), this.i18nService.t('contactSupport'), this.i18nService.t('close'));
         if (contactSupport) {
@@ -109,6 +114,10 @@ export class OrganizationSubscriptionComponent implements OnInit {
         }
     }
 
+    closeChangePlan(changed: boolean) {
+        this.showChangePlan = false;
+    }
+
     downloadLicense() {
         this.showDownloadLicense = !this.showDownloadLicense;
     }