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

billing: Make changing current and next cycle licenses work.

This commit is contained in:
Aman Agrawal 2023-11-08 13:58:35 +00:00
parent 9d7e10950f
commit cce5666e5d
5 changed files with 159 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
templates/corporate/billing.html
View File

@ -57,14 +57,16 @@
</a>
</label>
<div class="number-input-with-label">
<input id="current-manual-license-count" class="short-width-number-input" type="number" value="{{ licenses }}"/>
<form id="current-license-change-form">
<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 class="current-manual-license-count-update-button license-count-update-button">
<button id="current-manual-license-count-update-button" class="license-count-update-button" disabled>
<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>
</div>
<div id="billing-page-current-manual-license-count-error" class="alert alert-danger billing-page-error"></div>
<div id="current-license-change-error" class="alert alert-danger billing-page-error"></div>
</div>
{% if not downgrade_at_end_of_cycle %}
<div class="input-box billing-page-field no-validation input-box-number">
@ -75,14 +77,16 @@
</a>
</label>
<div class="number-input-with-label">
<input id="next-manual-license-count" class="short-width-number-input" type="number" value="{{ licenses }}"/>
<form id="next-license-change-form">
<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 class="next-manual-license-count-update-button license-count-update-button">
<button id="next-manual-license-count-update-button" class="license-count-update-button" disabled>
<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>
</div>
<div id="billing-page-next-manual-license-count-error" class="alert alert-danger billing-page-error"></div>
<div id="next-license-change-error" class="alert alert-danger billing-page-error"></div>
</div>
{% endif %}
<div id="licensechange-success" class="alert alert-success billing-page-success">
@ -223,13 +227,13 @@
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
<header class="modal__header">
<h1 class="modal__title dialog_heading">
{{ _('Confirm license increase') }}
{{ _('Confirm license change') }}
</h1>
<button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
</header>
<main class="modal__content">
<p>
Are you sure you want to increase the licenses from
Are you sure you want to change the licenses from
<b><span id="current_license_count_holder"></span></b> to
<b><span id="new_license_count_holder"></span></b>?
</p>

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

@ -4,14 +4,32 @@ import * as portico_modals from "../portico/portico_modals";
import * as helpers from "./helpers";
export function create_update_license_request(): void {
helpers.create_ajax_request(
"/json/billing/plan",
"licensechange",
["licenses_at_next_renewal"],
"PATCH",
() => window.location.replace("/billing/"),
);
export function create_update_current_cycle_license_request(): void {
$("#current-manual-license-count-update-button .billing-button-text").text("");
$("#current-manual-license-count-update-button .loader").show();
helpers.create_ajax_request("/json/billing/plan", "current-license-change", [], "PATCH", () => {
window.location.replace("/billing/");
$("#licensechange-success").show();
$("#current-manual-license-count-update-button .loader").hide();
$("#current-manual-license-count-update-button .billing-button-text").text("Update");
}, () => {
$("#current-manual-license-count-update-button .loader").hide();
$("#current-manual-license-count-update-button .billing-button-text").text("Update");
});
}
export function create_update_next_cycle_license_request(): void {
$("#next-manual-license-count-update-button .loader").show();
$("#next-manual-license-count-update-button .billing-button-text").text("");
helpers.create_ajax_request("/json/billing/plan", "next-license-change", [], "PATCH", () => {
window.location.replace("/billing/");
$("#licensechange-success").show();
$("#next-manual-license-count-update-button .loader").hide();
$("#next-manual-license-count-update-button .billing-button-text").text("");
}, () => {
$("#next-manual-license-count-update-button .loader").hide();
$("#next-manual-license-count-update-button .billing-button-text").text("");
});
}
export function initialize(): void {
@ -31,39 +49,84 @@ export function initialize(): void {
e.preventDefault();
});
$("#update-licenses-button").on("click", (e) => {
if (!helpers.is_valid_input($("#new_licenses_input"))) {
function get_old_and_new_license_count_for_current_cycle(): {
new_current_manual_license_count: number;
old_current_manual_license_count: number;
} {
const new_current_manual_license_count: number = Number.parseInt(
$<HTMLInputElement>("#current-manual-license-count").val()!,
10,
);
const old_current_manual_license_count: number = Number.parseInt(
$<HTMLInputElement>("#current-manual-license-count").attr("data-original-value")!,
10,
);
return {
new_current_manual_license_count,
old_current_manual_license_count,
};
}
function get_old_and_new_license_count_for_next_cycle(): {
new_next_manual_license_count: number;
old_next_manual_license_count: number;
} {
const new_next_manual_license_count: number = Number.parseInt(
$<HTMLInputElement>("#next-manual-license-count").val()!,
10,
);
const old_next_manual_license_count: number = Number.parseInt(
$<HTMLInputElement>("#next-manual-license-count").attr("data-original-value")!,
10,
);
return {
new_next_manual_license_count,
old_next_manual_license_count,
};
}
$("#current-license-change-form, #next-license-change-form").on("submit", (e) => {
// We don't want user to accidentally update the license count on pressing enter.
e.preventDefault();
e.stopPropagation();
});
$("#current-manual-license-count-update-button").on("click", (e) => {
if (!helpers.is_valid_input($("#current-license-change-form"))) {
return;
}
e.preventDefault();
const current_licenses: number = $("#licensechange-input-section").data("licenses");
const new_licenses: number = Number.parseInt(
$<HTMLInputElement>("input#new_licenses_input").val()!,
10,
);
if (new_licenses > current_licenses) {
$("#new_license_count_holder").text(new_licenses);
$("#current_license_count_holder").text(current_licenses);
portico_modals.open("confirm-licenses-modal");
} else {
create_update_license_request();
const {new_current_manual_license_count, old_current_manual_license_count} =
get_old_and_new_license_count_for_current_cycle();
$("#new_license_count_holder").text(new_current_manual_license_count);
$("#current_license_count_holder").text(old_current_manual_license_count);
$("#confirm-licenses-modal .dialog_submit_button").attr("data-cycle", "current");
portico_modals.open("confirm-licenses-modal");
});
$("#next-manual-license-count-update-button").on("click", (e) => {
if (!helpers.is_valid_input($("#next-license-change-form"))) {
return;
}
e.preventDefault();
const {new_next_manual_license_count, old_next_manual_license_count} =
get_old_and_new_license_count_for_next_cycle();
$("#new_license_count_holder").text(new_next_manual_license_count);
$("#current_license_count_holder").text(old_next_manual_license_count);
$("#confirm-licenses-modal .dialog_submit_button").attr("data-cycle", "next");
portico_modals.open("confirm-licenses-modal");
});
$("#confirm-licenses-modal .dialog_submit_button").on("click", () => {
portico_modals.close("confirm-licenses-modal");
create_update_license_request();
});
if ($("#confirm-licenses-modal .dialog_submit_button").attr("data-cycle") === "current") {
$("#update-licenses-at-next-renewal-button").on("click", (e) => {
e.preventDefault();
helpers.create_ajax_request(
"/json/billing/plan",
"licensechange",
["licenses"],
"PATCH",
() => window.location.replace("/billing/"),
);
create_update_current_cycle_license_request();
} else if (
$("#confirm-licenses-modal .dialog_submit_button").attr("data-cycle") === "next"
) {
create_update_next_cycle_license_request();
}
});
$("#change-plan-status").on("click", (e) => {
@ -77,6 +140,36 @@ export function initialize(): void {
e.preventDefault();
portico_modals.open("confirm-cancel-subscription-modal");
});
$("#current-manual-license-count").on("keyup", () => {
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-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);
} else {
$("#current-manual-license-count-update-button").prop("disabled", true);
$("#current-license-change-error").text("");
}
});
$("#next-manual-license-count").on("keyup", () => {
const {new_next_manual_license_count, old_next_manual_license_count} =
get_old_and_new_license_count_for_next_cycle();
if (
!new_next_manual_license_count ||
new_next_manual_license_count === old_next_manual_license_count
) {
$("#next-manual-license-count-update-button").prop("disabled", true);
} else {
$("#next-manual-license-count-update-button").prop("disabled", false);
}
});
}
$(() => {

2
web/src/billing/helpers.ts
View File

@ -30,6 +30,7 @@ export function create_ajax_request(
ignored_inputs: string[] = [],
type = "POST",
success_callback: (response: unknown) => void,
error_callback: (xhr: JQuery.jqXHR) => void = () => {},
): void {
const $form = $(`#${CSS.escape(form_name)}-form`);
const form_loading_indicator = `#${CSS.escape(form_name)}_loading_indicator`;
@ -85,6 +86,7 @@ export function create_ajax_request(
$(form_input_section).show();
$(zulip_limited_section).show();
$(free_trial_alert_message).show();
error_callback(xhr);
},
});
}

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

@ -427,7 +427,11 @@ input[name="licenses"] {
align-items: flex-end;
}
#billing-page .white-box .input-box-number .number-input-with-label .short-width-number-input {
#billing-page
.white-box
.input-box-number
.number-input-with-label
.short-width-number-input {
width: 100px;
}
@ -442,6 +446,20 @@ input[name="licenses"] {
margin: 0 auto;
font-size: 1.1rem;
margin-right: 0;
max-width: 100px;
&:disabled {
color: hsl(0deg 0% 80%);
&:hover {
cursor: not-allowed;
}
}
}
#billing-page #current-license-change-form,
#billing-page #next-license-change-form {
margin-bottom: 0;
}
.billing-page-success {

2
web/styles/portico/portico_signin.css
View File

@ -478,7 +478,7 @@ html {
}
.alert {
&:not(.alert-info) {
&:not(.alert-info, .billing-page-success) {
padding: 0;
margin-bottom: 5px;
font-weight: 600;