Update address field logic (Z#23163120) (#4659)

* Move country-dependent JS logic to separate file (avoids code duplication for presale and control) * Correctly apply "required" attribute to address state field * Load address format information when selecting country * Fix some other bugs and inconsistencies
2024-11-29 14:56:56 +01:00
parent a1bf7be244
commit e8e9698a31
11 changed files with 168 additions and 138 deletions
--- a/src/pretix/static/pretixbase/js/addressform.js
+++ b/src/pretix/static/pretixbase/js/addressform.js
@@ -0,0 +1,56 @@
+$(function () {
+    "use strict";
+
+    $("select[data-country-information-url]").each(function () {
+        let xhr;
+        const dependency = $(this),
+            loader = $("<span class='fa fa-cog fa-spin'></span>").hide().prependTo(dependency.closest(".form-group").find("label")),
+            url = this.getAttribute('data-country-information-url'),
+            form = dependency.closest(".panel-body, form, .profile-scope"),
+            isRequired = dependency.closest(".form-group").is(".required"),
+            dependents =  {
+                'city': form.find("input[name$=city]"),
+                'zipcode': form.find("input[name$=zipcode]"),
+                'street': form.find("textarea[name$=street]"),
+                'state': form.find("select[name$=state]"),
+                'vat_id': form.find("input[name$=vat_id]"),
+            },
+            update = function (ev) {
+                if (xhr) {
+                    xhr.abort();
+                }
+                for (var k in dependents) dependents[k].prop("disabled", true);
+                loader.fadeIn();
+                xhr = $.getJSON(url + '?country=' + dependency.val(), function (data) {
+                    var selected_value = dependents.state.prop("data-selected-value");
+                    if (selected_value) dependents.state.prop("data-selected-value", "");
+                    dependents.state.find("option:not([value=''])").remove();
+                    if (data.data.length > 0) {
+                        $.each(data.data, function (k, s) {
+                            var o = $("<option>").attr("value", s.code).text(s.name);
+                            if (selected_value == s.code) o.prop("selected", true);
+                            dependents.state.append(o);
+                        });
+                    }
+                    for(var k in dependents) {
+                        const options = data[k],
+                            dependent = dependents[k],
+                            visible = 'visible' in options ? options.visible : true,
+                            required = 'required' in options && options.required && isRequired && visible;
+
+                        dependent.closest(".form-group").toggle(visible).toggleClass('required', required);
+                        dependent.prop("required", required);
+                    }
+                    for (var k in dependents) dependents[k].prop("disabled", false);
+                }).always(function() {
+                    loader.fadeOut();
+                }).fail(function(){
+                    // TODO: handle failed request
+                });
+            };
+        dependents.state.prop("data-selected-value", dependents.state.val());
+        update();
+        dependency.on("change", update);
+    });
+
+});