Fix free trial text to show at the right time (#1281)

(cherry picked from commit be65f690b9)

.github/workflows/release.yml

@@ -184,3 +184,4 @@ jobs:
           artifacts: "web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip,
                       web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
           token: ${{ secrets.GITHUB_TOKEN }}
+          draft: true

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bitwarden-web",
-  "version": "2.24.0",
+  "version": "2.24.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "bitwarden-web",
-      "version": "2.24.0",
+      "version": "2.24.4",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitwarden-web",
-  "version": "2.24.0",
+  "version": "2.24.4",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {

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

@@ -45,7 +45,7 @@
                     </ng-container>
                     </dl>
                     </div>
-            <div class="col-8">
+            <div class="col-8" *ngIf="subscription">
                 <strong class="d-block mb-1">{{'details' | i18n}}</strong>
                 <table class="table">
                     <tbody>
@@ -70,6 +70,13 @@
                 </div>
             </ng-container>
         </div>
+        <ng-container>
+            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()" *ngIf="showChangePlanButton">
+                {{'changeBillingPlan' | i18n}}
+            </button>
+            <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 +125,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

@@ -105,15 +105,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) {
@@ -216,7 +208,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');
@@ -224,4 +220,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/app/settings/organization-plans.component.html

@@ -219,6 +219,14 @@
         <hr class="my-3">
         <h2 class="spaced-header mb-4">{{ (createOrganization ? 'paymentInformation' : 'billingInformation') | i18n}}
         </h2>
+        <small class="text-muted font-italic mb-3 d-block" *ngIf="freeTrial && createOrganization; else paymentChargedImmediately">
+            {{'paymentChargedWithTrial' | i18n}}
+        </small>
+        <ng-template #paymentChargedImmediately>
+            <small class="text-muted font-italic mb-3 d-block">
+                {{'paymentCharged' | i18n : (selectedPlanInterval | i18n) }}
+            </small>
+        </ng-template>
         <app-payment *ngIf="createOrganization" [hideCredit]="true"></app-payment>
         <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
         <div id="price" class="my-4">
@@ -233,14 +241,6 @@
             <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
                 {{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
         </div>
-        <small class="text-muted font-italic" *ngIf="freeTrial && createOrganization; else paymentChargedImmediately">
-            {{'paymentChargedWithTrial' | i18n : (selectedPlanInterval | i18n) }}
-        </small>
-        <ng-template #paymentChargedImmediately>
-            <small class="text-muted font-italic mt-2 d-block">
-                {{'paymentCharged' | i18n : (selectedPlanInterval | i18n) }}
-            </small>
-        </ng-template>
         <ng-container *ngIf="!createOrganization">
             <app-payment [showMethods]="false"></app-payment>
         </ng-container>

src/app/settings/organization-plans.component.ts

@@ -68,7 +68,6 @@ export class OrganizationPlansComponent implements OnInit {
     productTypes = ProductType;
     formPromise: Promise<any>;
     singleOrgPolicyBlock: boolean = false;
-    freeTrial: boolean = false;
 
     plans: PlanResponse[];
 
@@ -177,6 +176,10 @@ export class OrganizationPlansComponent implements OnInit {
         return subTotal;
     }
 
+    get freeTrial() {
+        return this.selectedPlan.trialPeriodDays != null;
+    }
+
     get taxCharges() {
         return this.taxComponent != null && this.taxComponent.taxRate != null ?
             (this.taxComponent.taxRate / 100) * this.subtotal :
@@ -201,7 +204,6 @@ export class OrganizationPlansComponent implements OnInit {
             this.selectedPlan.hasAdditionalSeatsOption) {
             this.additionalSeats = 1;
         }
-        this.freeTrial = this.selectedPlan.trialPeriodDays != null;
     }
 
     changedOwnedBusiness() {

src/locales/en/messages.json

@@ -1736,13 +1736,7 @@
     }
   },
   "paymentChargedWithTrial": {
-    "message": "Your plan comes with a free 7 day trial. Your payment method will not be charged until the trial has ended. Billing will occur on a recurring basis each $INTERVAL$. You may cancel at any time.",
-    "placeholders": {
-      "interval": {
-        "content": "$1",
-        "example": "month or year"
-      }
-    }
+    "message": "Your plan comes with a free 7 day trial. Your payment method will not be charged until the trial has ended. You may cancel at any time."
   },
   "paymentInformation": {
     "message": "Payment Information"
@@ -2804,17 +2798,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 +2928,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": {