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

(cherry picked from commit be65f690b9)

package-lock.json

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

package.json

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

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"