donate: Add modal to encourage people to donate monthly

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/donate.html b/src/templates/donate.html
index 9d8dde6cebebc68057e838288982d49c414af610..d89e2188f5c8cae17195644e8d16dadfb8340ffa 100644 (file)
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -191,23 +191,39 @@
                                                                </div>
                                                        </div>
 
-                                                       <div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
+                                                       <div class="modal fade" tabindex="-1" role="dialog" id="modal-monthly-suggestions" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                                        <div class="modal-content">
                                                                                <div class="modal-header">
-                                                                                       <h5 class="modal-title">Modal title</h5>
-                                                                                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                                                       <h5 class="modal-title">{{ _("Would you like to support us monthly?") }}</h5>
+
+                                                                                       <button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
                                                                                                <span aria-hidden="true">&times;</span>
                                                                                        </button>
                                                                                </div>
 
                                                                                <div class="modal-body">
-                                                                                       <p>Modal body text goes here.</p>
-                                                                               </div>
+                                                                                       <p class="mb-4">
+                                                                                               {{ _("Long-term donations are an even better investment into our project, create lasting change for everyone who is working on the project and make IPFire even better!") }}
+                                                                                       </p>
+
+                                                                                       <div class="row mb-4">
+                                                                                               {% for factor, default in ((3, False), (2, True), (1, False)) %}
+                                                                                                       <div class="col d-flex align-items-center">
+                                                                                                               <button type="submit"
+                                                                                                                               class="btn btn-primary btn-block {% if default %}btn-lg{% else %}btn-sm{% end %} monthly-amount-suggestion"
+                                                                                                                               data-factor="{{ factor }}" data-amount="">
+                                                                                                                       <span class="EUR">€</span><span class="USD">$</span><span class="suggested-amount"></span>
+                                                                                                                       <br>
+                                                                                                                       <small>/ {{ _("month") }}</small>
+                                                                                                               </button>
+                                                                                                       </div>
+                                                                                               {% end %}
+                                                                                       </div>
 
-                                                                               <div class="modal-footer">
-                                                                                       <input type="submit" class="btn btn-primary" value="Donate Now">
-                                                                                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                                                                       <button type="submit" class="btn btn-secondary btn-block">
+                                                                                               Donate <span class="EUR">€</span><span class="USD">$</span><span class="amount"></span> once
+                                                                                       </button>
                                                                                </div>
                                                                        </div>
                                                                </div>
@@ -361,8 +377,10 @@
 {% block javascript %}
        <script type="text/javascript">
                $(document).ready(function() {
-                       var amount = $("input[name='amount']");
+                       var amount   = $("input[name='amount']");
                        var currency = $("input[name='currency']");
+                       var submit   = $("#donate");
+                       var modal    = $("#modal-monthly-suggestions");
 
                        // Adjust form to default currency
                        if (currency.val() == "EUR") {
@@ -392,11 +410,16 @@
                                var value = $(this).val();
                                if (value) {
                                        amount.val(value);
+                                       amount.change();
                                }
                        });
 
                        amount.on("change keyup mouseup", function() {
                                var value = $(this).val();
+
+                               // Enable/disable submit button
+                               submit.prop("disabled", !value);
+
                                if (value) {
                                        // Check matching elements
                                        $("input[name='amount-selector']").each(function (i, selector) {
@@ -409,18 +432,53 @@
                                                        b.removeClass("active");
                                                }
                                        });
+
+                                       // Update all amounts
+                                       $(".amount").html(value);
+
+                                       // Update suggestions
+                                       $(".monthly-amount-suggestion").each(function (i, element) {
+                                               var factor = $(element).data("factor");
+                                               if (!factor)
+                                                       return;
+
+                                               var suggested_amount = Math.floor(value / factor);
+
+                                               // Update value
+                                               $(element).data("amount", suggested_amount);
+
+                                               // Update text on button
+                                               $(element).find(".suggested-amount").html(suggested_amount);
+                                       });
                                }
                        });
 
-                       $("#donate").click(function (event) {
+                       submit.click(function (event) {
                                var frequency = $("input[name='frequency']").val();
 
-                               if (frequency == "one-time") {
+                               if (frequency == "one-time" && amount.val() > 10) {
                                        event.preventDefault();
 
-                                       $("#modal-upsell").modal("show");
+                                       modal.modal("show");
                                }
                        });
+
+                       $(".monthly-amount-suggestion").click(function (event) {
+                               // Set frequency to monthly
+                               $("input[name='frequency']").prop("checked", false);
+                               $("input[name='frequency'][value='monthly']").prop("checked", true);
+
+                               // Set amount
+                               var value = $(this).data("amount");
+                               amount.val(value);
+                               amount.change();
+
+                               // Hide the modal
+                               modal.modal("hide");
+                       });
+
+                       // Update form with initial amount
+                       amount.change();
                });
        </script>
 {% end block %}