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/pretixbase/scss/_dialogs.scss

@@ -0,0 +1,174 @@
+/* Modal dialogs using HTML5 dialog tags for accessibility */
+dialog.modal-card {
+  border: none;
+  width: 80%;
+  max-width: 43em;
+  padding: 0;
+  margin-top: 60px;
+  box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+  background: white;
+  border-radius: $border-radius-large;
+
+  opacity: 0;
+  transition: opacity .5s allow-discrete;
+}
+.modal-card-inner {
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+dialog.modal-card .modal-card-icon {
+  background: $brand-primary;
+  font-size: 2em;
+  color: white;
+  text-align: center;
+  padding: 3px;
+  .rotating {
+      -webkit-animation: fa-spin 8s infinite linear;
+      animation: fa-spin 8s infinite linear;
+  }
+}
+dialog.modal-card .modal-card-content {
+  padding: 1.5em;
+  flex-grow: 1;
+}
+.modal-card-content>*:last-child {
+  margin-bottom: 0;
+}
+.modal-card-content>*:first-child {
+  margin-top: 0;
+}
+
+.modal-card-confirm {
+  margin-top: 2em;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  align-items: center;
+}
+.modal-card-confirm-spread {
+  justify-content: space-between;
+}
+
+dialog::backdrop {
+  background-color: rgba(255, 255, 255, .5);
+  opacity: 0;
+  transition: opacity .5s allow-discrete;
+  backdrop-filter: blur(2px);
+}
+dialog[open], dialog[open]::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  dialog[open], dialog[open]::backdrop  {
+    opacity: 0;
+  }
+}
+
+@media screen and (min-width: $screen-sm-min) {
+  dialog.modal-card:has(.modal-card-icon) .modal-card-inner {
+    flex-direction: row;
+  }
+  dialog.modal-card .modal-card-content {
+    padding: 2em;
+  }
+  dialog.modal-card .modal-card-icon {
+    font-size: 4em;
+    padding: 6px 16px;
+  }
+}
+
+.shake-once {
+  animation: shake .2s;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+}
+
+@keyframes shake {
+  0% { transform: skewX(0deg); }
+  20% { transform: skewX(-5deg); }
+  40% { transform: skewX(5deg); }
+  60% { transform: skewX(-5deg); }
+  80% { transform: skewX(5deg); }
+  100% { transform: skewX(0deg); }
+}
+
+
+
+/* Legacy dialogs (still used for #ajaxerr and #popupmodal) */
+body.has-modal-dialog .container, body.has-modal-dialog #wrapper {
+    -webkit-filter: blur(2px);
+    -moz-filter: blur(2px);
+    -ms-filter: blur(2px);
+    -o-filter: blur(2px);
+    filter: blur(2px);
+}
+
+.modal-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(255, 255, 255, .7);
+    z-index: 900000;
+    padding: 10px;
+  .modal-card {
+      margin: 50px auto 0;
+      width: 90%;
+      max-width: 600px;
+      max-height: calc(100vh - 100px);
+      overflow-y: auto;
+      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;
+      border: 0;
+
+      .modal-card-icon {
+          float: left;
+          width: 150px;
+          text-align: center;
+          .big-icon {
+              margin-top: 10px;
+              font-size: 100px;
+              color: $brand-primary;
+          }
+      }
+      .modal-card-content {
+          margin-left: 160px;
+          text-align: left;
+          h3 {
+              margin-top: 0;
+          }
+      }
+  }
+}
+
+@media (max-width: 700px) {
+    .modal-wrapper .modal-card {
+        margin: 25px auto 0;
+        max-height: calc(100vh - 50px - 20px);
+        .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);
+
+    .big-icon {
+        margin-top: 50px;
+        font-size: 200px;
+        color: $brand-primary;
+    }
+}