Allow users to increase cancellation fees (#1622)

* Allow users to increase cancellation fees

* Fix typo

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

@@ -14,6 +14,14 @@ function ngettext(singular, plural, count) {
     return plural;
 }
 
+function interpolate(fmt, object, named) {
+    if (named) {
+        return fmt.replace(/%\(\w+\)s/g, function(match){return String(obj[match.slice(2,-2)])});
+    } else {
+        return fmt.replace(/%s/g, function(match){return String(obj.shift())});
+    }
+}
+
 var form_handlers = function (el) {
     el.find(".datetimepicker").each(function () {
         $(this).datetimepicker({
@@ -300,6 +308,44 @@ $(function () {
 
     form_handlers($("body"));
 
+    var cancel_fee_slider_update = function () {
+        if (typeof django === "undefined") {
+            window.setTimeout(cancel_fee_slider_update, 100);
+            return;
+        }
+        $("#cancel-fee-keep").text(interpolate(
+            gettext("We keep %(currency)s %(amount)s"),
+            {
+                'currency': $("body").attr("data-currency"),
+                'amount': floatformat(cancel_fee_slider.getValue(), 2)
+            },
+            true
+        ));
+        $("#cancel-fee-refund").text(interpolate(
+            gettext("You get %(currency)s %(amount)s back"),
+            {
+                'currency': $("body").attr("data-currency"),
+                'amount': floatformat((cancel_fee_slider.getAttribute("max") - cancel_fee_slider.getValue()), 2)
+            },
+            true
+        ));
+    }
+    var cancel_fee_slider = $('#cancel-fee-slider').slider({
+    }).on('slide', function () {
+        cancel_fee_slider_update();
+    }).data('slider');
+    if (cancel_fee_slider) {
+        cancel_fee_slider_update();
+        $("#cancel-fee-custom").click(function () {
+            try {
+                var newinp = parseFloat(prompt(gettext("Please enter the amount we can keep."), cancel_fee_slider.getValue().toString()).replace(',', '.'));
+                cancel_fee_slider.setValue(newinp);
+                cancel_fee_slider_update();
+            } catch {
+            }
+        });
+    }
+
     // Lightbox
     lightbox.init();
 });

src/pretix/static/pretixpresale/scss/_event.scss

@@ -196,3 +196,34 @@ section.front-page {
 h2.subevent-head {
     margin-top: 10px;
 }
+.cancel-fee-slider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .slider-selection {
+        background: $brand-success;
+    }
+    .slider-handle {
+        @include slider_background-image($brand-success, darken($brand-success, 5%), mix($brand-success, darken($brand-success, 5%)));
+    }
+
+    input {
+        flex: 0;
+    }
+    & > div {
+        flex: 1;
+        font-weight: bold;
+    }
+    & > div:first-child {
+        text-align: right;
+        padding-right: 20px;
+    }
+    & > div:last-child {
+        text-align: left;
+        padding-left: 20px;
+    }
+}
+#cancel-fee-custom-link {
+    margin-bottom: 20px;
+}

src/pretix/static/pretixpresale/scss/main.scss

@@ -3,6 +3,7 @@
 @import "../../pretixbase/scss/_theme.scss";
 @import "../../lightbox/css/lightbox.scss";
 @import "../../datetimepicker/_bootstrap-datetimepicker.scss";
+@import "../../slider/_bootstrap-slider.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
 
 @import "_theme.scss";