Dialog for cart renewal, async task without page refresh (#5148)

* async_task: deduplicate response handling code

* extend cart without full page reload

* update dialog markup

* fix error response from CartExtend

* refactor asynctask, make sure waitingDialog.show() re-initializes dialog contents

* add cart expiry notification

* add aria references to other dialogs

* improve error handling

* fix error if max_extend=None

* different message for expiring soon and expired carts

* refactor dialog css

* add classes to further dialog elements

* switch extend-cart-dialog and loadingmodal to <dialog>

* Backport simple_block_tag from Django 5.2

* Use simple_block_tag for {% dialog %} tag

* add alertdialog role

* Update src/pretix/static/pretixbase/scss/_dialogs.scss

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* fix mobile dialog styles not being overwritten

* asynctask dialog: prevent close by escape on chrome

* remove dynamic aria-live from #cart-deadline

dynamic aria-live is generally not well supported and as we have the dialog now anyways, we can remove it

* move continue-button to right

* Update src/pretix/static/pretixpresale/js/ui/cart.js

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Fix CSS for old-style dialog

* fix heading display/level

* align dialogs at the top as they originally were

* fix </div> from merge-conflict

* fix missing grow for dialog-content

* improve cart-extend-button ui

* do not show cart-extend-dialog onload

* improve message if 0 minutes

* do not save messae in session if ajax_dont_redirect

* add ajax_dont_redirect to async_task_check_url

* improve draw_deadline to only update #cart-deadline if necessary

* add renew-confirmation-message

---------

Co-authored-by: Richard Schreiber <schreiber@rami.io>
Co-authored-by: Raphael Michel <michel@rami.io>

src/pretix/static/pretixcontrol/js/ui/main.js

@@ -51,32 +51,6 @@ function formatPrice(price, currency, locale) {
     }
 }
 
-var waitingDialog = {
-    show: function (message) {
-        "use strict";
-        $("#loadingmodal").find("h1").html(message);
-        $("body").addClass("loading");
-    },
-    hide: function () {
-        "use strict";
-        $("body").removeClass("loading");
-    }
-};
-
-var ajaxErrDialog = {
-    show: function (c) {
-        "use strict";
-        $("#ajaxerr").html(c);
-        $("#ajaxerr .links").html("<a class='btn btn-default ajaxerr-close'>"
-            + gettext("Close message") + "</a>");
-        $("body").addClass("ajaxerr");
-    },
-    hide: function () {
-        "use strict";
-        $("body").removeClass("ajaxerr");
-    }
-};
-
 var apiGET = function (url, callback) {
     $.getJSON(url, function (data) {
         callback(data);

src/pretix/static/pretixcontrol/scss/main.scss

@@ -3,6 +3,7 @@
 @import "../../bootstrap/scss/_bootstrap.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
 @import "../../pretixbase/scss/_theme.scss";
+@import "../../pretixbase/scss/_dialogs.scss";
 @import "../../typeahead/typeahead.scss";
 @import "../../charts/morris.scss";
 @import "../../cropper/cropper.scss";
@@ -234,91 +235,6 @@ p.bigger {
     }
 }
 
-body.loading #wrapper {
-    -webkit-filter: blur(2px);
-    -moz-filter: blur(2px);
-    -ms-filter: blur(2px);
-    -o-filter: blur(2px);
-    filter: blur(2px);
-}
-
-#loadingmodal, #ajaxerr {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(255, 255, 255, .7);
-    opacity: 0;
-    z-index: 900000;
-    visibility: hidden;
-    padding: 10px;
-
-    .big-icon {
-        margin-top: 50px;
-        font-size: 200px;
-        color: $brand-primary;
-    }
-
-    .modal-card {
-        margin: 50px auto 0;
-        top: 50px;
-        width: 90%;
-        max-width: 600px;
-        background: white;
-        border-radius: $border-radius-large;
-        box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
-        padding: 20px;
-        min-height: 160px;
-
-        .modal-card-icon {
-            float: left;
-            width: 150px;
-            text-align: center;
-
-            .big-rotating-icon {
-                font-size: 120px;
-                margin: 0;
-            }
-        }
-        .modal-card-content {
-            margin-left: 160px;
-            text-align: left;
-            h3 {
-                margin-top: 0;
-            }
-        }
-    }
-}
-@media (max-width: 700px) {
-    #loadingmodal, #ajaxerr {
-        .modal-card {
-            .modal-card-icon {
-                float: none;
-                width: 100%;
-            }
-            .modal-card-content {
-                text-align: center;
-                margin-left: 0;
-                margin-right: 0;
-                margin-top: 10px;
-            }
-        }
-    }
-}
-
-#ajaxerr {
-    background: rgba(236, 236, 236, .9);
-}
-
-.loading #loadingmodal, .ajaxerr #ajaxerr {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity .5s ease-in-out;
-    -moz-transition: opacity .5s ease-in-out;
-    -webkit-transition: opacity .5s ease-in-out;
-}
-
 .big-rotating-icon {
     margin-top: 50px;
     -webkit-animation: fa-spin 8s infinite linear;