diff --git a/.eslintrc.json b/.eslintrc.json index 5b53283323..a45de2f664 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -30,6 +30,7 @@ "alert_words_ui": false, "attachments_ui": false, "avatar": false, + "billing": false, "blueslip": false, "bot_data": false, "bridge": false, @@ -66,6 +67,7 @@ "gear_menu": false, "hash_util": false, "hashchange": false, + "helpers": false, "home_msg_list": false, "hotspots": false, "i18n": false, @@ -192,6 +194,7 @@ "unread": false, "unread_ops": false, "unread_ui": false, + "upgrade": false, "upload": false, "upload_widget": false, "user_events": false, diff --git a/static/js/billing/billing.js b/static/js/billing/billing.js index 314e84fd08..ac4500b80b 100644 --- a/static/js/billing/billing.js +++ b/static/js/billing/billing.js @@ -1,84 +1,10 @@ -$(function () { - function is_in_array(value, array) { - return array.indexOf(value) > -1; - } - - function create_ajax_request(url, form_name, stripe_token = null) { - var form = $("#" + form_name + "-form"); - var form_loading_indicator = "#" + form_name + "_loading_indicator"; - var form_input_section = "#" + form_name + "-input-section"; - var form_success = "#" + form_name + "-success"; - var form_error = "#" + form_name + "-error"; - var form_loading = "#" + form_name + "-loading"; - - var numeric_inputs = ["licenses"]; - - loading.make_indicator($(form_loading_indicator), - {text: 'Processing ...', abs_positioned: true}); - $(form_input_section).hide(); - $(form_error).hide(); - $(form_loading).show(); - - var data = {}; - if (stripe_token) { - data.stripe_token = JSON.stringify(stripe_token.id); - } - - form.serializeArray().forEach(function (item) { - if (is_in_array(item.name, numeric_inputs)) { - data[item.name] = item.value; - } else { - data[item.name] = JSON.stringify(item.value); - } - }); - - $.post({ - url: url, - data: data, - success: function () { - $(form_loading).hide(); - $(form_error).hide(); - $(form_success).show(); - location.reload(); - }, - error: function (xhr) { - $(form_loading).hide(); - $(form_error).show().text(JSON.parse(xhr.responseText).msg); - $(form_input_section).show(); - }, - }); - } - - if (window.location.pathname === '/billing/') { - var stripe_key = $("#payment-method").data("key"); - var card_change_handler = StripeCheckout.configure({ // eslint-disable-line no-undef - key: stripe_key, - image: '/static/images/logo/zulip-icon-128x128.png', - locale: 'auto', - token: function (stripe_token) { - create_ajax_request("/json/billing/sources/change", "cardchange", stripe_token = stripe_token); - }, - }); - - $('#update-card-button').on('click', function (e) { - var email = $("#payment-method").data("email"); - card_change_handler.open({ - name: 'Zulip', - zipCode: true, - billingAddress: true, - panelLabel: "Update card", - email: email, - label: "Update card", - allowRememberMe: false, - }); - e.preventDefault(); - }); - } +var billing = (function () { +var exports = {}; +exports.initialize = function () { var hash = window.location.hash; if (hash) { $('#billing-tabs.nav a[href="' + hash + '"]').tab('show'); - $('#upgrade-tabs.nav a[href="' + hash + '"]').tab('show'); $('html,body').scrollTop(0); } @@ -88,101 +14,40 @@ $(function () { $('html,body').scrollTop(0); }); - $('#upgrade-tabs.nav-tabs a').click(function () { - $(this).tab('show'); - window.location.hash = this.hash; - $('html,body').scrollTop(0); + var stripe_key = $("#payment-method").data("key"); + var card_change_handler = StripeCheckout.configure({ // eslint-disable-line no-undef + key: stripe_key, + image: '/static/images/logo/zulip-icon-128x128.png', + locale: 'auto', + token: function (stripe_token) { + helpers.create_ajax_request("/json/billing/sources/change", "cardchange", stripe_token = stripe_token); + }, }); - function format_money(cents) { - // allow for small floating point errors - cents = Math.ceil(cents - 0.001); - var precision; - if (cents % 100 === 0) { - precision = 0; - } else { - precision = 2; - } - // TODO: Add commas for thousands, millions, etc. - return (cents / 100).toFixed(precision); - } - - if (window.location.pathname === '/upgrade/') { - var add_card_handler = StripeCheckout.configure({ // eslint-disable-line no-undef - key: $("#autopay-form").data("key"), - image: '/static/images/logo/zulip-icon-128x128.png', - locale: 'auto', - token: function (stripe_token) { - create_ajax_request("/json/billing/upgrade", "autopay", stripe_token = stripe_token); - }, + $('#update-card-button').on('click', function (e) { + var email = $("#payment-method").data("email"); + card_change_handler.open({ + name: 'Zulip', + zipCode: true, + billingAddress: true, + panelLabel: "Update card", + email: email, + label: "Update card", + allowRememberMe: false, }); + e.preventDefault(); + }); +}; - $('#add-card-button').on('click', function (e) { - var license_management = $('input[type=radio][name=license_management]:checked').val(); - if ($("#" + license_management + "_license_count")[0].checkValidity() === false) { - return; - } - add_card_handler.open({ - name: 'Zulip', - zipCode: true, - billingAddress: true, - panelLabel: "Make payment", - email: $("#autopay-form").data("email"), - label: "Add card", - allowRememberMe: false, - description: "Zulip Cloud Standard", - }); - e.preventDefault(); - }); +return exports; +}()); - $("#invoice-button").on("click", function (e) { - if ($("#invoiced_licenses")[0].checkValidity() === false) { - return; - } - e.preventDefault(); - create_ajax_request("/json/billing/upgrade", "invoice"); - }); +if (typeof module !== 'undefined') { + module.exports = billing; +} - var prices = {}; - prices.annual = page_params.annual_price * (1 - page_params.percent_off / 100); - prices.monthly = page_params.monthly_price * (1 - page_params.percent_off / 100); +window.billing = billing; - function update_charged_amount(schedule) { - $("#charged_amount").text( - format_money(page_params.seat_count * prices[schedule]) - ); - } - - function show_license_section(license) { - $("#license-automatic-section").hide(); - $("#license-manual-section").hide(); - $("#license-mix-section").hide(); - - $("#automatic_license_count").prop('disabled', true); - $("#manual_license_count").prop('disabled', true); - $("#mix_license_count").prop('disabled', true); - - var section_id = "#license-" + license + "-section"; - $(section_id).show(); - var input_id = "#" + license + "_license_count"; - $(input_id).prop("disabled", false); - } - - $('input[type=radio][name=license_management]').change(function () { - show_license_section($(this).val()); - }); - - $('input[type=radio][name=schedule]').change(function () { - update_charged_amount($(this).val()); - }); - - $("#autopay_annual_price").text(format_money(prices.annual)); - $("#autopay_annual_price_per_month").text(format_money(prices.annual / 12)); - $("#autopay_monthly_price").text(format_money(prices.monthly)); - $("#invoice_annual_price").text(format_money(prices.annual)); - $("#invoice_annual_price_per_month").text(format_money(prices.annual / 12)); - - show_license_section($('input[type=radio][name=license_management]:checked').val()); - update_charged_amount($('input[type=radio][name=schedule]:checked').val()); - } +$(function () { + billing.initialize(); }); diff --git a/static/js/billing/helpers.js b/static/js/billing/helpers.js new file mode 100644 index 0000000000..b096f512b9 --- /dev/null +++ b/static/js/billing/helpers.js @@ -0,0 +1,95 @@ +var helpers = (function () { +var exports = {}; + +exports.is_in_array = function (value, array) { + return array.indexOf(value) > -1; +}; + +exports.create_ajax_request = function (url, form_name, stripe_token = null) { + var form = $("#" + form_name + "-form"); + var form_loading_indicator = "#" + form_name + "_loading_indicator"; + var form_input_section = "#" + form_name + "-input-section"; + var form_success = "#" + form_name + "-success"; + var form_error = "#" + form_name + "-error"; + var form_loading = "#" + form_name + "-loading"; + + var numeric_inputs = ["licenses"]; + + loading.make_indicator($(form_loading_indicator), + {text: 'Processing ...', abs_positioned: true}); + $(form_input_section).hide(); + $(form_error).hide(); + $(form_loading).show(); + + var data = {}; + if (stripe_token) { + data.stripe_token = JSON.stringify(stripe_token.id); + } + + form.serializeArray().forEach(function (item) { + if (exports.is_in_array(item.name, numeric_inputs)) { + data[item.name] = item.value; + } else { + data[item.name] = JSON.stringify(item.value); + } + }); + + $.post({ + url: url, + data: data, + success: function () { + $(form_loading).hide(); + $(form_error).hide(); + $(form_success).show(); + location.reload(); + }, + error: function (xhr) { + $(form_loading).hide(); + $(form_error).show().text(JSON.parse(xhr.responseText).msg); + $(form_input_section).show(); + }, + }); +}; + +exports.format_money = function (cents) { + // allow for small floating point errors + cents = Math.ceil(cents - 0.001); + var precision; + if (cents % 100 === 0) { + precision = 0; + } else { + precision = 2; + } + // TODO: Add commas for thousands, millions, etc. + return (cents / 100).toFixed(precision); +}; + +exports.update_charged_amount = function (prices, schedule) { + $("#charged_amount").text( + exports.format_money(page_params.seat_count * prices[schedule]) + ); +}; + +exports.show_license_section = function (license) { + $("#license-automatic-section").hide(); + $("#license-manual-section").hide(); + $("#license-mix-section").hide(); + + $("#automatic_license_count").prop('disabled', true); + $("#manual_license_count").prop('disabled', true); + $("#mix_license_count").prop('disabled', true); + + var section_id = "#license-" + license + "-section"; + $(section_id).show(); + var input_id = "#" + license + "_license_count"; + $(input_id).prop("disabled", false); +}; + +return exports; +}()); + +if (typeof module !== 'undefined') { + module.exports = helpers; +} + +window.helpers = helpers; diff --git a/static/js/billing/upgrade.js b/static/js/billing/upgrade.js new file mode 100644 index 0000000000..08f51b7ea6 --- /dev/null +++ b/static/js/billing/upgrade.js @@ -0,0 +1,85 @@ +var upgrade = (function () { +var exports = {}; + +exports.initialize = () => { + var hash = window.location.hash; + if (hash) { + $('#upgrade-tabs.nav a[href="' + hash + '"]').tab('show'); + $('html,body').scrollTop(0); + } + + $('#upgrade-tabs.nav-tabs a').click(function () { + $(this).tab('show'); + window.location.hash = this.hash; + $('html,body').scrollTop(0); + }); + + var add_card_handler = StripeCheckout.configure({ // eslint-disable-line no-undef + key: $("#autopay-form").data("key"), + image: '/static/images/logo/zulip-icon-128x128.png', + locale: 'auto', + token: function (stripe_token) { + helpers.create_ajax_request("/json/billing/upgrade", "autopay", stripe_token = stripe_token); + }, + }); + + $('#add-card-button').on('click', function (e) { + var license_management = $('input[type=radio][name=license_management]:checked').val(); + if ($("#" + license_management + "_license_count")[0].checkValidity() === false) { + return; + } + add_card_handler.open({ + name: 'Zulip', + zipCode: true, + billingAddress: true, + panelLabel: "Make payment", + email: $("#autopay-form").data("email"), + label: "Add card", + allowRememberMe: false, + description: "Zulip Cloud Standard", + }); + e.preventDefault(); + }); + + $("#invoice-button").on("click", function (e) { + if ($("#invoiced_licenses")[0].checkValidity() === false) { + return; + } + e.preventDefault(); + helpers.create_ajax_request("/json/billing/upgrade", "invoice"); + }); + + var prices = {}; + prices.annual = page_params.annual_price * (1 - page_params.percent_off / 100); + prices.monthly = page_params.monthly_price * (1 - page_params.percent_off / 100); + + $('input[type=radio][name=license_management]').change(function () { + helpers.show_license_section($(this).val()); + }); + + $('input[type=radio][name=schedule]').change(function () { + helpers.update_charged_amount(prices, $(this).val()); + }); + + $("#autopay_annual_price").text(helpers.format_money(prices.annual)); + $("#autopay_annual_price_per_month").text(helpers.format_money(prices.annual / 12)); + $("#autopay_monthly_price").text(helpers.format_money(prices.monthly)); + $("#invoice_annual_price").text(helpers.format_money(prices.annual)); + $("#invoice_annual_price_per_month").text(helpers.format_money(prices.annual / 12)); + + helpers.show_license_section($('input[type=radio][name=license_management]:checked').val()); + helpers.update_charged_amount(prices, $('input[type=radio][name=schedule]:checked').val()); +}; + +return exports; +}()); + +if (typeof module !== 'undefined') { + module.exports = upgrade; +} + +window.upgrade = upgrade; + +$(function () { + upgrade.initialize(); +}); diff --git a/templates/corporate/upgrade.html b/templates/corporate/upgrade.html index db097db797..b68e24854e 100644 --- a/templates/corporate/upgrade.html +++ b/templates/corporate/upgrade.html @@ -12,7 +12,7 @@ {% block customhead %} {{ render_bundle('landing-page') }} -{{ render_bundle('billing') }} +{{ render_bundle('upgrade') }} {% endblock %} diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json index ef32ea5600..98ba792f63 100644 --- a/tools/webpack.assets.json +++ b/tools/webpack.assets.json @@ -17,6 +17,7 @@ "./static/templates/compiled.js" ], "billing": [ + "./static/js/billing/helpers.js", "./static/js/billing/billing.js", "./node_modules/handlebars/dist/handlebars.runtime.js", "./static/js/templates.js", @@ -24,6 +25,15 @@ "./static/js/loading.js", "./static/styles/billing.scss" ], + "upgrade": [ + "./static/js/billing/helpers.js", + "./static/js/billing/upgrade.js", + "./node_modules/handlebars/dist/handlebars.runtime.js", + "./static/js/templates.js", + "./static/templates/compiled.js", + "./static/js/loading.js", + "./static/styles/billing.scss" + ], "portico": [ "./static/js/portico/header.js", "./static/styles/portico-styles.scss"