billing: Don't show license update buttons until valid change in value.

This commit is contained in:
Aman Agrawal 2023-11-12 04:08:17 +00:00 committed by Tim Abbott
parent 775a90771e
commit 17573cd1fb
3 changed files with 10 additions and 14 deletions

View File

@ -61,7 +61,7 @@
<input min="{{ licenses }}" type="number" name="licenses" autocomplete="off" id="current-manual-license-count" class="short-width-number-input" data-original-value="{{ licenses }}" value="{{ licenses }}" required/>
</form>
<span class="licence-count-in-use">licenses ({{ seat_count }} in use)</span>
<button id="current-manual-license-count-update-button" class="license-count-update-button" disabled>
<button id="current-manual-license-count-update-button" class="license-count-update-button hide">
<span class="billing-button-text">Update</span>
<object class="loader billing-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button>
@ -81,7 +81,7 @@
<input type="number" name="licenses_at_next_renewal" autocomplete="off" id="next-manual-license-count" class="short-width-number-input" data-original-value="{{ licenses_at_next_renewal }}" value="{{ licenses_at_next_renewal }}" required/>
</form>
<span class="licence-count-in-use">licenses ({{ seat_count }} in use)</span>
<button id="next-manual-license-count-update-button" class="license-count-update-button" disabled>
<button id="next-manual-license-count-update-button" class="license-count-update-button hide">
<span class="billing-button-text">Update</span>
<object class="loader billing-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button>

View File

@ -194,15 +194,15 @@ export function initialize(): void {
const {new_current_manual_license_count, old_current_manual_license_count} =
get_old_and_new_license_count_for_current_cycle();
if (new_current_manual_license_count > old_current_manual_license_count) {
$("#current-manual-license-count-update-button").prop("disabled", false);
$("#current-manual-license-count-update-button").toggleClass("hide", false);
$("#current-license-change-error").text("");
} else if (new_current_manual_license_count < old_current_manual_license_count) {
$("#current-license-change-error").text(
"You can only increase the number of licenses for the current billing period.",
);
$("#current-manual-license-count-update-button").prop("disabled", true);
$("#current-manual-license-count-update-button").toggleClass("hide", true);
} else {
$("#current-manual-license-count-update-button").prop("disabled", true);
$("#current-manual-license-count-update-button").toggleClass("hide", true);
$("#current-license-change-error").text("");
}
}, 300); // Wait for 300ms after the user stops typing
@ -221,9 +221,9 @@ export function initialize(): void {
new_next_manual_license_count < 0 ||
new_next_manual_license_count === old_next_manual_license_count
) {
$("#next-manual-license-count-update-button").prop("disabled", true);
$("#next-manual-license-count-update-button").toggleClass("hide", true);
} else {
$("#next-manual-license-count-update-button").prop("disabled", false);
$("#next-manual-license-count-update-button").toggleClass("hide", false);
}
}, 300); // Wait for 300ms after the user stops typing
});

View File

@ -457,14 +457,10 @@ input[name="licenses"] {
font-size: 1.1rem;
margin-right: 0;
width: 100px;
&:disabled {
color: hsl(0deg 0% 80%);
&:hover {
cursor: not-allowed;
}
}
#billing-page .license-count-update-button.hide {
display: none;
}
#billing-page #current-license-change-form,