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.
This commit is contained in:
Eric 2024-05-20 14:09:48 -05:00 committed by GitHub
parent d5f666bfa3
commit 35a94c6bba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 7 deletions

View file

@ -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;

View file

@ -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>