billing: Separate billing.js into multiple modules.

.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,

static/js/billing/billing.js

@@ -1,84 +1,10 @@
-$(function () {
+var billing = (function () {
-    function is_in_array(value, array) {
+var exports = {};
-        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();
-        });
-    }
 
+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 () {
+    var stripe_key = $("#payment-method").data("key");
-        $(this).tab('show');
+    var card_change_handler = StripeCheckout.configure({ // eslint-disable-line no-undef
-        window.location.hash = this.hash;
+        key: stripe_key,
-        $('html,body').scrollTop(0);
+        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) {
+    $('#update-card-button').on('click', function (e) {
-        // allow for small floating point errors
+        var email = $("#payment-method").data("email");
-        cents = Math.ceil(cents - 0.001);
+        card_change_handler.open({
-        var precision;
+            name: 'Zulip',
-        if (cents % 100 === 0) {
+            zipCode: true,
-            precision = 0;
+            billingAddress: true,
-        } else {
+            panelLabel: "Update card",
-            precision = 2;
+            email: email,
-        }
+            label: "Update card",
-        // TODO: Add commas for thousands, millions, etc.
+            allowRememberMe: false,
-        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);
-            },
         });
+        e.preventDefault();
+    });
+};
 
-        $('#add-card-button').on('click', function (e) {
+return exports;
-            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 (typeof module !== 'undefined') {
-            if ($("#invoiced_licenses")[0].checkValidity() === false) {
+    module.exports = billing;
-                return;
+}
-            }
-            e.preventDefault();
-            create_ajax_request("/json/billing/upgrade", "invoice");
-        });
 
-        var prices = {};
+window.billing = billing;
-        prices.annual = page_params.annual_price * (1 - page_params.percent_off / 100);
-        prices.monthly = page_params.monthly_price * (1 - page_params.percent_off / 100);
 
-        function update_charged_amount(schedule) {
+$(function () {
-            $("#charged_amount").text(
+    billing.initialize();
-                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());
-    }
 });

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;

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();
+});

templates/corporate/upgrade.html

@@ -12,7 +12,7 @@
 {% block customhead %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {{ render_bundle('landing-page') }}
-{{ render_bundle('billing') }}
+{{ render_bundle('upgrade') }}
 <script src="https://checkout.stripe.com/checkout.js"></script>
 {% endblock %}
 

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"