From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 30 Dec 2021 19:00:24 +0000 (+0000)
Subject: donate: Update page design
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2bc302e67ead83d18aac5dd44ca31dad5672bdac;p=ipfire.org.git

donate: Update page design

Controls for organizations have been added which are required in order
process VAT correctly.

We are also asking for VAT numbers in order to issue VAT-free invoices
wherever possible.

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

diff --git a/src/templates/donate/donate.html b/src/templates/donate/donate.html
index ca7ca403..c81179e0 100644
--- a/src/templates/donate/donate.html
+++ b/src/templates/donate/donate.html
@@ -26,28 +26,28 @@
 					<form action="" method="POST">
 						{% raw xsrf_form_html() %}
 
-						<div class="row">
-							<div class="col-12">
-								<h6>Frequency</h6>
+						<div class="p-4 bg-light rounded">
+							<div class="form-group">
+								<h6>I am an ...</h6>
 
-								<input type="hidden" name="frequency" value="{{ frequency }}">
+								<input type="hidden" name="type" value="individual">
 
 								<div class="custom-control custom-radio custom-control-inline">
-									<input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-one-time"
-										value="one-time" {% if frequency == "one-time" %}checked{% end %}>
-									<label class="custom-control-label" for="frequency-one-time">{{ _("One Time") }}</label>
+									<input class="custom-control-input" type="radio"
+										name="type-selector" id="type-individual" value="individual" checked>
+									<label class="custom-control-label" for="type-individual">{{ _("Individual") }}</label>
 								</div>
 
 								<div class="custom-control custom-radio custom-control-inline">
-									<input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-monthly"
-										value="monthly" {% if frequency == "monthly" %}checked{% end %}>
-									<label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label>
+									<input class="custom-control-input" type="radio"
+										name="type-selector" id="type-organization" value="organization">
+									<label class="custom-control-label" for="type-organization">{{ _("Organization") }}</label>
 								</div>
 							</div>
-						</div>
 
-						<div class="mt-5 mb-3 p-4 bg-light rounded">
-							<h6>{{ _("Choose an amount") }}</h6>
+							<h6>
+								{{ _("Choose an amount") }}
+							</h6>
 
 							<input type="hidden" name="currency" value="{{ currency }}">
 
@@ -60,11 +60,36 @@
 								{% end %}
 							</div>
 
-							<p class="text-center small">
-								<a data-toggle="collapse" href="#more" role="button">
-									{{ _("More Options") }}
-								</a>
-							</p>
+							<div class="form-group d-flex justify-content-center">
+								<input type="hidden" name="frequency" value="{{ frequency }}">
+
+								<div class="custom-control custom-radio custom-control-inline">
+									<input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-one-time"
+										value="one-time" {% if frequency == "one-time" %}checked{% end %}>
+									<label class="custom-control-label" for="frequency-one-time">{{ _("One Time Donation") }}</label>
+								</div>
+
+								<div class="custom-control custom-radio custom-control-inline">
+									<input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-monthly"
+										value="monthly" {% if frequency == "monthly" %}checked{% end %}>
+									<label class="custom-control-label" for="frequency-monthly">{{ _("Monthly Recurring") }}</label>
+								</div>
+							</div>
+
+							<div class="form-group">
+								<ul class="list-inline text-center small mb-0">
+									<li class="list-inline-item">
+										<span class="vat-included">includes VAT (if applicable)</span>
+										<span class="vat-excluded">excludes VAT</span>
+									</li>
+
+									<li class="list-inline-item">
+										<a data-toggle="collapse" href="#more" role="button">
+											{{ _("More Options") }}
+										</a>
+									</li>
+								</ul>
+							</div>
 
 							<div class="collapse" id="more">
 								<div class="form-group row">
@@ -91,151 +116,156 @@
 								</p>
 							</div>
 
-							<div class="row my-5">
-								<div class="col d-flex flex-column">
-									<div class="form-row">
-										<div class="col">
-											<div class="custom-control custom-radio custom-control-inline mb-3">
-												<input class="custom-control-input" type="radio" name="title" id="mr" value="Mr." checked>
-												<label class="custom-control-label" for="mr">{{ _("Mr.") }}</label>
-											</div>
-											<div class="custom-control custom-radio custom-control-inline mb-3">
-												<input class="custom-control-input" type="radio" name="title" id="mrs" value="Mrs.">
-												<label class="custom-control-label" for="mrs">{{ _("Mrs.") }}</label>
-											</div>
-										</div>
-									</div>
+							<div class="form-group organization organization-required">
+								<input type="text" class="form-control" name="organization"
+									placeholder="{{ _("Organization") }}">
+							</div>
 
-									<div class="form-row">
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="first_name"
-													placeholder="{{ _("First Name" )}}" required
-													{% if first_name %}value="{{ first_name }}"{% end %}>
-											</div>
-										</div>
+							<div class="form-group organization">
+								<input type="text" class="form-control" name="vat_number"
+									placeholder="{{ _("VAT Number") }}">
 
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="last_name"
-													placeholder="{{ _("Last Name" )}}" required
-													{% if last_name %}value="{{ last_name }}"{% end %}>
-											</div>
-										</div>
-									</div>
+								<small class="form-text text-muted">
+									If you are an organization in Europe and you are VAT-registered, please provide your VAT number here.
+									It will make your donation VAT free (if applicable) and the project will benefit from more of your help.
+									Please see the FAQ below for more details about VAT.
+								</small>
+							</div>
 
-									<div class="form-group">
-										<input type="email" class="form-control" name="email"
-											placeholder="{{ _("Email Address") }}" required>
+							<div class="form-row">
+								<div class="form-group col">
+									<div class="custom-control custom-radio custom-control-inline">
+										<input class="custom-control-input" type="radio" name="title" id="mr" value="Mr." checked>
+										<label class="custom-control-label" for="mr">{{ _("Mr.") }}</label>
 									</div>
-
-									<div class="form-group">
-										<input type="text" class="form-control" name="street1"
-											placeholder="{{ _("Address Line 1") }}" required>
+									<div class="custom-control custom-radio custom-control-inline">
+										<input class="custom-control-input" type="radio" name="title" id="mrs" value="Mrs.">
+										<label class="custom-control-label" for="mrs">{{ _("Mrs.") }}</label>
 									</div>
+								</div>
+							</div>
 
-									<div class="form-group">
-										<input type="text" class="form-control" name="street2"
-											placeholder="{{ _("Address Line 2") }}">
-									</div>
+							<div class="form-row">
+								<div class="form-group col-sm-6">
+									<input type="text" class="form-control" name="first_name"
+										placeholder="{{ _("First Name" )}}" required
+										{% if first_name %}value="{{ first_name }}"{% end %}>
+								</div>
 
-									<div class="form-row">
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="city"
-													placeholder="{{ _("City") }}" required>
-											</div>
-										</div>
+								<div class="form-group col-sm-6">
+									<input type="text" class="form-control" name="last_name"
+										placeholder="{{ _("Last Name" )}}" required
+										{% if last_name %}value="{{ last_name }}"{% end %}>
+								</div>
+							</div>
 
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="post_code"
-													placeholder="{{ _("Post Code") }}" required>
-											</div>
-										</div>
-									</div>
+							<div class="form-group">
+								<input type="email" class="form-control" name="email"
+									placeholder="{{ _("Email Address") }}" required>
+							</div>
 
-									<div class="form-row">
-										<div class="col-sm-6">
-											<div class="form-group">
-												<select class="form-control" name="country_code" required>
-													<option value="">- {{ _("Country") }} -</option>
+							<div class="form-group">
+								<input type="text" class="form-control" name="street1"
+									placeholder="{{ _("Address Line 1") }}" required>
+							</div>
 
-													{% for c in countries %}
-														<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-													{% end %}
-												</select>
-											</div>
-										</div>
+							<div class="form-group">
+								<input type="text" class="form-control" name="street2"
+									placeholder="{{ _("Address Line 2") }}">
+							</div>
 
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="state"
-													placeholder="{{ _("State (optional)") }}">
-											</div>
-										</div>
-									</div>
+							<div class="form-row">
+								<div class="form-group col-sm-6">
+									<input type="text" class="form-control" name="city"
+										placeholder="{{ _("City") }}" required>
+								</div>
+
+								<div class="form-group col-sm-6">
+									<input type="text" class="form-control" name="post_code"
+										placeholder="{{ _("Post Code") }}" required>
+								</div>
+							</div>
+
+							<div class="form-row">
+								<div class="form-group col-sm-6">
+									<select class="form-control" name="country_code" required>
+										<option value="">- {{ _("Country") }} -</option>
+
+										{% for c in countries %}
+											<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+										{% end %}
+									</select>
+								</div>
 
-									<input type="submit" class="btn btn-primary btn-lg"
-										id="donate" value="{{ _("Donate Now") }}">
+								<div class="form-group col-sm-6">
+									<input type="text" class="form-control" name="state"
+										placeholder="{{ _("State (optional)") }}">
 								</div>
 							</div>
 
-							<div class="row">
-								<div class="col d-flex justify-content-around text-muted">
-									<span class="pf pf-2x pf-american-express"></span>
-									<span class="pf pf-2x pf-mastercard-alt"></span>
-									<span class="pf pf-2x pf-visa"></span>
-									<span class="pf pf-2x pf-sepa"></span>
-									<span class="pf pf-2x pf-paypal"></span>
+							<div class="form-group">
+								<div class="custom-control custom-checkbox">
+									<input type="checkbox" class="custom-control-input" id="tc-accepted" required>
+
+									<label class="custom-control-label" for="tc-accepted">
+										I read and accept the <a href="#t-and-cs">terms &amp; conditions</a>
+									</label>
 								</div>
 							</div>
 
-							<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">{{ _("Would you like to support us monthly?") }}</h5>
+							<div class="form-group">
+								<input type="submit" class="btn btn-primary btn-block btn-lg"
+									id="donate" value="{{ _("Donate Now") }}">
+							</div>
+						</div>
 
-											<button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
-												<span aria-hidden="true">&times;</span>
-											</button>
-										</div>
+						<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">{{ _("Would you like to support us monthly?") }}</h5>
 
-										<div class="modal-body">
-											<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>
+										<button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
+											<span aria-hidden="true">&times;</span>
+										</button>
+									</div>
 
-											<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 class="modal-body">
+										<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>
+
+										<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>
 						</div>
 
-						<p class="small text-muted mb-0">
-							The organization you will be donating to is Lightning Wire Labs GmbH who is
-							kindly handling donations for the IPFire project.
-							After clicking "Donate Now", you will be redirected to Lightning Wire Labs
-							where you will be able to complete the transaction.
-						</p>
+						<div class="row my-5">
+							<div class="col d-flex justify-content-around text-muted">
+								<span class="pf pf-2x pf-american-express"></span>
+								<span class="pf pf-2x pf-mastercard-alt"></span>
+								<span class="pf pf-2x pf-visa"></span>
+								<span class="pf pf-2x pf-sepa"></span>
+								<span class="pf pf-2x pf-paypal"></span>
+							</div>
+						</div>
 					</form>
 				</div>
 			</div>
@@ -425,11 +455,18 @@
 			</div>
 		</div>
 	</section>
+
+	<section class="inverse" id="t-and-cs">
+		<div class="container">
+			<h4>{{ _("Terms & Conditions") }}</h4>
+		</div>
+	</section>
 {% end block %}
 
 {% block javascript %}
 	<script type="text/javascript">
 		$(document).ready(function() {
+			var type      = $("input[name='type']");
 			var amount    = $("input[name='amount']");
 			var currency  = $("input[name='currency']");
 			var frequency = $("input[name='frequency']");
@@ -448,6 +485,33 @@
 				amount.change();
 			}
 
+			// Copy selected type
+			$("input[name='type-selector']").on("change", function() {
+				var value = $(this).val();
+				if (value) {
+					type.val(value);
+					type.change();
+				}
+			});
+
+			type.on("change", function() {
+				var value = $(this).val();
+
+				if (value == "individual") {
+					$(".organization").hide();
+					$(".organization-required").find("input").prop("required", false);
+
+					$(".vat-included").show();
+					$(".vat-excluded").hide();
+				} else if (value == "organization") {
+					$(".organization").show();
+					$(".organization-required").find("input").prop("required", true);
+
+					$(".vat-included").hide();
+					$(".vat-excluded").show();
+				}
+			});
+
 			$(".toggleCurrency").click(function(event) {
 				event.preventDefault();
 
@@ -545,6 +609,9 @@
 				modal.modal("hide");
 			});
 
+			// Update everything depending on type
+			type.change();
+
 			// Update form with initial amount
 			amount.change();
 		});