Website: Update pricing calculator (#9700)

Changes: 
- Updated the Fleet Ultimate card to show two decimal places on the
price per host, and to change color when the price per host changes
because of the pricing calculator.
- Fixed a bug where the pricing calculator would display as $NaN/month
when each field of the pricing calculator is set to 0 hosts.

website/assets/js/pages/pricing.page.js

@@ -7,6 +7,7 @@ parasails.registerPage('pricing', {
     estimatedCost: '', // For pricing calculator
     estimatedUltimateCostPerHost: 7,
     displaySecurityPricingMode: true, // For pricing mode switch
+    estimatedUltimateCostPerHostHasBeenUpdated: false,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -38,15 +39,22 @@ parasails.registerPage('pricing', {
       let total =
       (7 * (this.formData.macos ? this.formData.macos : 0)) +
       (7 * (this.formData.windows ? this.formData.windows : 0)) +
-      (7 * (this.formData.linux ? this.formData.linux : 0)) +
-      (1.50 * (this.formData.other ? this.formData.other : 0));
+      (2 * (this.formData.linux ? this.formData.linux : 0)) +
+      (2 * (this.formData.other ? this.formData.other : 0));
       let totalNumberOfDevices =
       (1 * (this.formData.macos ? this.formData.macos : 0)) +
       (1 * (this.formData.windows ? this.formData.windows : 0)) +
       (1 * (this.formData.linux ? this.formData.linux : 0)) +
       (1 * (this.formData.other ? this.formData.other : 0));
       this.estimatedCost = Number(total);
-      this.estimatedUltimateCostPerHost = Math.floor(this.estimatedCost / totalNumberOfDevices);
+      if(totalNumberOfDevices < 1){
+        this.estimatedUltimateCostPerHost = 7;
+        this.estimatedUltimateCostPerHostHasBeenUpdated = false;
+      } else {
+        this.estimatedUltimateCostPerHost = this.estimatedCost / totalNumberOfDevices;
+        this.estimatedUltimateCostPerHostHasBeenUpdated = true;
+      }
+
     },
   }
 });

website/assets/styles/pages/pricing.less

@@ -104,6 +104,9 @@
         color: #ff5c83;
         margin-bottom: 8px;
       }
+      .show-estimated-price {
+        color: @core-vibrant-blue;
+      }
     }
 
     strong {

website/views/pages/pricing.ejs

@@ -59,7 +59,7 @@
               <h2>Fleet Ultimate</h2>
               <h3>For orgs with large deployments</h3>
               <p>Over 500 hosts*</p>
-              <h2>${{estimatedUltimateCostPerHost}}/host</h2>
+              <h2>$<span :class="[estimatedUltimateCostPerHostHasBeenUpdated ? 'show-estimated-price' : '']">{{ estimatedUltimateCostPerHost.toFixed(2) }}</span>/host</h2>
             </div>
             <div>
               <p><strong>All of Premium plus</strong></p>