Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/corporate/billing.html
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/> <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> </form>
<span class="licence-count-in-use">licenses ({{ seat_count }} in use)</span> <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> <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> <object class="loader billing-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button> </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/> <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> </form>
<span class="licence-count-in-use">licenses ({{ seat_count }} in use)</span> <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> <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> <object class="loader billing-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button> </button>

10
web/src/billing/billing.ts
View File

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

10
web/styles/portico/billing.css
View File

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