From bb0b5f2d87a3c0d5b757d4e656817771e78002d9 Mon Sep 17 00:00:00 2001
From: Matt Gibson <mgibson@bitwarden.com>
Date: Mon, 1 Nov 2021 14:29:46 -0500
Subject: [PATCH] Show upgrade plan button for free orgs. (#1269)

* Show upgrade plan button for free orgs.

* Add families plan callout for subscription upgrade
---
 .../organization-subscription.component.html  | 11 +++++++--
 .../organization-subscription.component.ts    | 20 ++++++++--------
 src/locales/en/messages.json                  | 24 +++++++++++++++----
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/app/organizations/settings/organization-subscription.component.html b/src/app/organizations/settings/organization-subscription.component.html
index eb3c822cb1..b3b236007a 100644
--- a/src/app/organizations/settings/organization-subscription.component.html
+++ b/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>
diff --git a/src/app/organizations/settings/organization-subscription.component.ts b/src/app/organizations/settings/organization-subscription.component.ts
index 51d157f25d..b78529b746 100644
--- a/src/app/organizations/settings/organization-subscription.component.ts
+++ b/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;
-            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');
-        }
+        this.showChangePlan = !this.showChangePlan;
     }
 
     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;
+    }
 }
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index b32bb21bcb..0be9c58aac 100644
--- a/src/locales/en/messages.json
+++ b/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": {