From 35a94c6bbac5c927a51dd818aa884ac89ab16f72 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 20 May 2024 14:09:48 -0500
Subject: [PATCH] Website: Update form on new-license page (#19154)

Closes: https://github.com/fleetdm/confidential/issues/6291

Changes:
- Updated the form on the /new-license page to show the price per host
after users enter a number of hosts.
---
 website/assets/styles/pages/customers/new-license.less | 10 +++++++---
 website/views/pages/customers/new-license.ejs          |  8 ++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/website/assets/styles/pages/customers/new-license.less b/website/assets/styles/pages/customers/new-license.less
index 1942c73ff6..68dc946e8a 100644
--- a/website/assets/styles/pages/customers/new-license.less
+++ b/website/assets/styles/pages/customers/new-license.less
@@ -86,20 +86,24 @@
   [purpose='customer-portal-form'] {
     max-width: 560px;
     border-radius: 16px;
-    padding: 30px;
+    padding: 32px;
     label {
       font-weight: 700;
       margin-bottom: 4px;
     }
     .form-control {
-      height: 40px;
+      height: 48px;
       border-radius: 6px;
+      display: flex;
+      align-items: center;
     }
     .card-body {
       padding: 2em;
     }
   }
-
+  .card {
+    border-radius: 16px;
+  }
   [purpose='submit-button'] {
 
     margin-left: auto;
diff --git a/website/views/pages/customers/new-license.ejs b/website/views/pages/customers/new-license.ejs
index 5064a71649..b3a446df35 100644
--- a/website/views/pages/customers/new-license.ejs
+++ b/website/views/pages/customers/new-license.ejs
@@ -9,13 +9,13 @@
       <ajax-form action="createQuote" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="quoteFormRules" @submitted="submittedQuoteForm($event)">
         <div class="d-flex flex-column flex-sm-row">
           <div class="form-group flex-grow-1 col-12 col-sm-6 order-first px-0 mb-3 mb-sm-5">
-            <label for="numberOfHosts">Total number of devices</label>
+            <label for="numberOfHosts">Total number of hosts</label>
             <input class="form-control" min="1" purpose="quote-input" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : formErrors.numberOfHosts < 1 ]" focus-first v-model.trim="formData.numberOfHosts" v-if="!numberOfHostsQuoted">
             <div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
-            <span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 10px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
+            <span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 14px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
           </div>
 
-          <div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4">
+          <div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4" v-if="showQuotedPrice && numberOfHostsQuoted < 700">
             <p class="small">
               <strong class="pr-1" style="font-size: 18px; color: #192147">$7.00</strong>/ host / month<br>(Billed annually)
             </p>
@@ -23,7 +23,7 @@
 
         </div>
         <cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
-        <div class="mt-2 pt-3 pb-4 border-top d-flex flex-column" v-if="showQuotedPrice && formData.numberOfHosts && numberOfHostsQuoted">
+        <div class="mt-2 pt-3 border-top d-flex flex-column" v-if="showQuotedPrice && formData.numberOfHosts && numberOfHostsQuoted">
           <div class="pb-2">
             <strong>Order summary</strong>
           </div>