Update payment info (#1274)

* Added manual routing

* Add additional copy for free trial

* Revert

* Fix formatting

* Switch text to be on the top of the payment info

* Update to put text at top of the screen

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

@@ -67,7 +67,6 @@ export class OrganizationPlansComponent implements OnInit {
     productTypes = ProductType;
     formPromise: Promise<any>;
     singleOrgPolicyBlock: boolean = false;
-    freeTrial: boolean = false;
 
     plans: PlanResponse[];
 
@@ -176,6 +175,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 :
@@ -200,7 +203,6 @@ export class OrganizationPlansComponent implements OnInit {
             this.selectedPlan.hasAdditionalSeatsOption) {
             this.additionalSeats = 1;
         }
-        this.freeTrial = this.selectedPlan.trialPeriodDays != null;
     }
 
     changedOwnedBusiness() {

src/locales/en/messages.json

@@ -1743,13 +1743,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"