From fb81af833b76f498cc780e2d762be6b9ebbd4e8e Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 6 Feb 2023 11:59:39 -0600
Subject: [PATCH] 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  | 14 +++++++++++---
 website/assets/styles/pages/pricing.less |  3 +++
 website/views/pages/pricing.ejs          |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/website/assets/js/pages/pricing.page.js b/website/assets/js/pages/pricing.page.js
index 5fccff8de2..a59b03d0e1 100644
--- a/website/assets/js/pages/pricing.page.js
+++ b/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;
+      }
+
     },
   }
 });
diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index 01cd9e393b..bbd356565c 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -104,6 +104,9 @@
         color: #ff5c83;
         margin-bottom: 8px;
       }
+      .show-estimated-price {
+        color: @core-vibrant-blue;
+      }
     }
 
     strong {
diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index 4078f9970e..4153762660 100644
--- a/website/views/pages/pricing.ejs
+++ b/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>