From 6efa9f3f5522cde21d362ff245d530d57294b767 Mon Sep 17 00:00:00 2001
From: Mira Weller <weller@rami.io>
Date: Fri, 16 May 2025 21:44:50 +0200
Subject: [PATCH] add cart expiry notification

---
 .../pretixpresale/fragment_modals.html        | 17 +++++++++++++++++
 src/pretix/static/pretixpresale/js/ui/cart.js | 19 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/pretix/presale/templates/pretixpresale/fragment_modals.html b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
index e9068cddd2..68826868fa 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_modals.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
@@ -44,6 +44,23 @@
         </div>
     </div>
 </div>
+<div id="cart-extend-modal" class="modal-wrapper" hidden aria-live="polite" role="dialog"
+     aria-labelledby="cart-extend-modal-title" aria-describedby="cart-extend-modal-desc">
+    <dialog class="modal-card" id="cart-extend-modal">
+        <div class="modal-card-icon">
+            <i class="fa fa-clock-o big-icon" aria-hidden="true"></i>
+        </div>
+        <div class="modal-card-content">
+            <h3 id="cart-extend-modal-title">{% trans "Please let us know you're still there" %}</h3>
+            <div>
+                <p id="cart-extend-modal-desc">
+                    {% trans "Your cart is about to expire. If you want to continue, please click here:" %}
+                </p>
+                <p><button class="btn btn-lg btn-primary">{% trans "Continue" %}</button></p>
+            </div>
+        </div>
+    </dialog>
+</div>
 {% if request.organizer and request.organizer.settings.cookie_consent %}
     <script type="text/plain" id="cookie-consent-storage-key">cookie-consent-{{ request.organizer.slug }}</script>
     {% if cookie_consent_from_widget %}
diff --git a/src/pretix/static/pretixpresale/js/ui/cart.js b/src/pretix/static/pretixpresale/js/ui/cart.js
index 98d72ce4f0..7d2682ead1 100644
--- a/src/pretix/static/pretixpresale/js/ui/cart.js
+++ b/src/pretix/static/pretixpresale/js/ui/cart.js
@@ -20,6 +20,18 @@ var cart = {
         cart._time_offset = server_time - client_time;
     },
 
+    show_expiry_notification: function () {
+        $("#cart-extend-modal").show();
+        $("#cart-extend-modal button").focus();
+        $("body").addClass("has-modal-dialog");
+        cart._expiry_notified = true;
+    },
+
+    hide_expiry_notification: function () {
+        $("#cart-extend-modal").hide();
+        $("body").removeClass("has-modal-dialog");
+    },
+
     draw_deadline: function () {
         function pad(n, width, z) {
             z = z || '0';
@@ -57,9 +69,9 @@ var cart = {
                 pad(diff_minutes.toString(), 2) + ':' + pad(diff_seconds.toString(), 2)
             );
         }
-        $("#cart-extend-button").toggle(diff_minutes < 3);
         var can_extend_cart = diff_minutes < 3 && (diff_total_seconds < 0 || cart._deadline < cart._max_extend);
         $("#cart-extend-button").toggle(can_extend_cart);
+        if (can_extend_cart && diff_minutes < 1 && !cart._expiry_notified) cart.show_expiry_notification();
     },
 
     init: function () {
@@ -93,6 +105,11 @@ $(function () {
         cart.set_deadline(data.expiry, data.max_expiry_extend);
     });
 
+    $("#cart-extend-modal button").click(function() {
+        cart.hide_expiry_notification();
+        $("#cart-extend-form").submit();
+    });
+
     $(".toggle-container").each(function() {
         var summary = $(".toggle-summary", this);
         var content = $("> :not(.toggle-summary)", this);