From 9ae712ffa599df49ab39a37895a2f583159e7e91 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 25 Oct 2018 11:14:03 +0100
Subject: [PATCH] donate: Add modal to encourage people to donate monthly

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/donate.html | 82 +++++++++++++++++++++++++++++++++------
 1 file changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/templates/donate.html b/src/templates/donate.html
index 9d8dde6c..d89e2188 100644
--- 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 %}
-- 
2.47.3