Show upgrade plan button for free orgs. (#1269)

* Show upgrade plan button for free orgs.

* Add families plan callout for subscription upgrade

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

@@ -70,6 +70,15 @@
                 </div>
             </ng-container>
         </div>
+        <ng-container>
+            <div class="d-flex">
+                <button type="button" class="btn btn-outline-secondary" (click)="changePlan()" *ngIf="showChangePlanButton">
+                    {{'changeBillingPlan' | i18n}}
+                </button>
+            </div>
+            <app-change-plan [organizationId]="organizationId" (onChanged)="closeChangePlan(true)"
+                (onCanceled)="closeChangePlan(false)" *ngIf="showChangePlan"></app-change-plan>
+        </ng-container>
         <h2 class="spaced-header">{{'manageSubscription' | i18n}}</h2>
         <p class="mb-4">{{subscriptionDesc}}</p>
         <ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">
@@ -118,8 +127,6 @@
                 <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

@@ -110,15 +110,7 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
 
     async changePlan() {
-        if (this.subscription == null && this.sub.planType === PlanType.Free) {
+        this.showChangePlan = !this.showChangePlan;
-            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) {
-            this.platformUtilsService.launchUri('https://bitwarden.com/contact');
-        }
     }
 
     closeChangePlan(changed: boolean) {
@@ -221,7 +213,11 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
 
     get subscriptionDesc() {
-        if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
+        if (this.sub.planType === PlanType.Free) {
+            return this.i18nService.t('subscriptionFreePlan', this.sub.seats.toString());
+        } else if (this.sub.planType === PlanType.FamiliesAnnually || this.sub.planType === PlanType.FamiliesAnnually2019) {
+            return this.i18nService.t('subscriptionFamiliesPlan', this.sub.seats.toString());
+        } else if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
             return this.i18nService.t('subscriptionMaxReached', this.sub.seats.toString());
         } else if (this.sub.maxAutoscaleSeats == null) {
             return this.i18nService.t('subscriptionUserSeatsUnlimitedAutoscale');
@@ -229,4 +225,8 @@ export class OrganizationSubscriptionComponent implements OnInit {
             return this.i18nService.t('subscriptionUserSeatsLimitedAutoscale', this.sub.maxAutoscaleSeats.toString());
         }
     }
+
+    get showChangePlanButton() {
+        return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
+    }
 }

src/locales/en/messages.json

@@ -2804,17 +2804,13 @@
     "description": "A billing plan/package. For example: families, teams, enterprise, etc."
   },
   "changeBillingPlan": {
-    "message": "Change Plan",
+    "message": "Upgrade Plan",
     "description": "A billing plan/package. For example: families, teams, enterprise, etc."
   },
   "changeBillingPlanUpgrade": {
     "message": "Upgrade your account to another plan by providing the information below. Please ensure that you have an active payment method added to the account.",
     "description": "A billing plan/package. For example: families, teams, enterprise, etc."
   },
-  "changeBillingPlanDesc": {
-    "message": "Contact customer support if you would like to change your plan. Please ensure that you have an active payment method added to the account.",
-    "description": "A billing plan/package. For example: families, teams, enterprise, etc."
-  },
   "invoiceNumber": {
     "message": "Invoice #$NUMBER$",
     "description": "ex. Invoice #79C66F0-0001",
@@ -2938,6 +2934,24 @@
       }
     }
   },
+  "subscriptionFreePlan": {
+    "message": "You cannot invite more than $COUNT$ users without upgrading your plan.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "2"
+      }
+    }
+  },
+  "subscriptionFamiliesPlan": {
+    "message": "You cannot invite more than $COUNT$ users without upgrading your plan. Please contact Customer Support to upgrade.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "6"
+      }
+    }
+  },
   "subscriptionMaxReached": {
     "message": "Adjustments to your subscription will result in prorated changes to your billing totals. You cannot invite more than $COUNT$ users without increasing your subscription seats.",
     "placeholders": {