donate: Pre-fill form with the user's profile

[ipfire.org.git] / src / templates / donate / donate.html

{% extends "../base.html" %}

{% block title %}{{ _("Donate") }}{% end block %}

{% block container %}
	{% set amounts = (10, 25, 50, 75, 100, 250) %}

	<section class="hero is-primary">
		<div class="hero-body">
			<div class="container">
				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
					<ul>
						<li>
							<a href="/">Home</a>
						</li>
						<li class="is-active">
							<a href="#" aria-current="page">Donate</a>
						</li>
					</ul>
				</nav>
				<h1 class="title is-1">
					Donate
				</h1>
				<p class="subtitle">{{ _("Please support our project with your donation today") }}</p>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<div class="columns">
				<div class="column is-8">
					<form id="donation-form" action="" method="POST">
						{% raw xsrf_form_html() %}

						<h5 class="title is-5">I am an ...</h5>

						<input type="hidden" name="type" value="individual">

						<div class="block">
							<div class="control">
								<label class="radio">
									<input class="custom-control-input" type="radio"
										name="type-selector" id="type-individual" value="individual" checked>

										{{ _("Individual") }}
								</label>
								<label class="custom-control-label" for="type-individual"></label>
								<label class="radio">
									<input class="custom-control-input" type="radio"
										name="type-selector" id="type-organization" value="organization">

										{{ _("Organization") }}
								</label>
								<label class="custom-control-label" for="type-organization"></label>
							</div>
						</div>

						<h5 class="title is-5">Frequency</h5>

						<input type="hidden" name="frequency" value="{{ frequency }}">

						<div class="block">
							<div class="control">
								<label class="radio">
									<input class="form-check-input" type="radio" name="frequency-selector" id="frequency-one-time"
										value="one-time" {% if frequency == "one-time" %}checked{% end %}>

									{{ _("One Time") }}
								</label>
								<label class="form-check-label" for="frequency-one-time"></label>

								<label class="radio">
									<input class="form-check-input" type="radio" name="frequency-selector" id="frequency-monthly"
										value="monthly" {% if frequency == "monthly" %}checked{% end %}>

									{{ _("Monthly") }}
								</label>
								<label class="form-check-label" for="frequency-monthly"></label>
							</div>
						</div>

						<div class="block">
							<h5 class="title is-5">{{ _("Choose an amount") }}</h5>
						</div>

						<input type="hidden" name="currency" value="{{ currency }}">

						<div class="block">
							<div class="buttons" data-toggle="buttons">
								<p class="control">
									{% for a in amounts %}
										<label class="button is-outlined is-primary">
											<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
												autocomplete="off" class="is-hidden"> <span class="EUR">€</span><span class="USD">$</span>{{ a }}
										</label>
									{% end %}
								</p>
							</div>
						</div>

						<div class="block">
							<h6 class="title is-6">Or Enter your own</h6>

							<div class="columns">
								<div class="column is-3">
									<div class="field">
										<p class="control has-icons-left">
											<input type="number" class="input" name="amount" min="5" step="0.01"
											{% if amount %}value="{{ "%.2f" % amount }}"{% end %}>
											<span class="input-group-text EUR icon is-small is-left">
												<i class="fas fa-euro-sign"></i>
											</span>
											<span class="input-group-text USD icon is-small is-left">
												<i class="fas fa-dollar-sign"></i>
											</span>
										</p>
									</div>
								</div>
							</div>

							<p class="small text-end">
								<a class="toggleCurrency EUR" href="#">{{ _("Prefer donating in US Dollar?") }}</a>
								<a class="toggleCurrency USD" href="#">{{ _("Prefer donating in Euro?") }}</a>
							</p>
						</div>

						<div class="block">
							<div class="organization organization-required">
								<input type="text" class="input" name="organization"
									placeholder="{{ _("Organization") }}">
							</div>
						</div>
						<div class="block">
							<div class="organization">
								<input type="text" class="input" name="vat_number"
									placeholder="{{ _("VAT Number") }}">
							</div>
						</div>
						<div class="block">
							<div class="organization">
								<p class="is-size-6">
									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.
								</p>
							</div>
						</div>

						<div class="columns">
							<div class="column is-2">
								<div class="form-check form-check-inline mb-3">
									<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
									<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
								</div>
							</div>
							<div class="column is-2">
								<div class="form-check form-check-inline mb-3">
									<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
									<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
								</div>
							</div>
						</div>

						<div class="columns">
							<div class="column">
								<input type="text" class="input" name="first_name"
									placeholder="{{ _("First Name" )}}" required
									{% if current_user %}value="{{ current_user.first_name }}"{% end %}>
							</div>

							<div class="column">
								<input type="text" class="input" name="last_name"
									placeholder="{{ _("Last Name" )}}" required
									{% if current_user %}value="{{ current_user.last_name }}"{% end %}>
							</div>
						</div>

						<div class="block">
								<input type="email" class="input" name="email"
									placeholder="{{ _("Email Address") }}" required
									{% if current_user %}value="{{ current_user.email }}"{% end %}>
						</div>

						{% set lines = current_user.street.splitlines() if current_user else [] %}

						<div class="block">
							<input type="text" class="input" name="street1"
								placeholder="{{ _("Address Line 1") }}" required
								{% if lines %}value="{{ lines[0] }}"{% end %}>
						</div>

						<div class="block">
							<input type="text" class="input" name="street2"
								placeholder="{{ _("Address Line 2") }}"
								{% if lines and len(lines) > 1 %}value="{{ lines[1] }}"{% end %}>
						</div>

						<div class="columns">
							<div class="column">
								<input type="text" class="input" name="city"
									placeholder="{{ _("City") }}" required
									{% if current_user %}value="{{ current_user.city }}"{% end %}>
							</div>
							<div class="column">
								<input type="text" class="input" name="post_code"
									placeholder="{{ _("Post Code") }}" required
									{% if current_user %}value="{{ current_user.postal_code }}"{% end %}>
							</div>
						</div>

						<div class="columns">
							<div class="column is-half">
								<div class="select">
									<select 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>
							</div>

							<div class="column">
								<input type="text" class="input" name="state"
									placeholder="{{ _("State (optional)") }}">
							</div>
						</div>

						<div class="block">
							<input type="submit" class="button is-primary is-outlined is-fullwidth is-medium"
							id="donate" value="{{ _("Donate Now") }}">
						</div>

						<div class="block">
							<div class="level">
								<div class="level-item has-text-centered">
									<span class="pf pf-2x pf-american-express"></span>
								</div>
								<div class="level-item has-text-centered">
									<span class="pf pf-2x pf-mastercard-alt"></span>
								</div>
								<div class="level-item has-text-centered">
									<span class="pf pf-2x pf-visa"></span>
								</div>
								<div class="level-item has-text-centered">
									<span class="pf pf-2x pf-sepa"></span>
								</div>
								<div class="level-item has-text-centered">
									<span class="pf pf-2x pf-paypal"></span>
								</div>
							</div>
						</div>

						<p class="is-size-6">
							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>
					</form>
				</div>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<div class="columns">
				<div class="column is-8">
					<div class="block">
						<h5 class="title is-5">Why should I donate?</h5>

						<p>
							At IPFire, we are working hard to provide you with a free firewall distribution
							that is like no other. We release updates regularly and enhance functionality
							to make IPFire more secure, faster and easier to use.
						</p>

						<p>
							To achieve our high standards that we have set for ourselves, we need your help.

							Only with your donation, we can get the right tools, people and utilities that
							we need to make our work most efficient and reach our maximum potential.

							Only with your donation, we can achieve our vision to make the Internet a safer
							place that is fair for everyone and giving equal opportunities.
						</p>
					</div>

					<div class="block">
						<h5 class="title is-5">How much should I give?</h5>

						<p>
							We are grateful for every single donation, but of course, we appreciate
							if you help us as much as you can.
						</p>

						<p>
							We rely on steady contributions from companies to keep the project healthy
							and encourage them to set up a monthly donation.
						</p>
					</div>

					<div class="faq">
						<h5 class="title is-5">Frequently Asked Questions</h5>

						<div class="block">
							<h6 class="title is-6">
									Do you accept bank transfer via SEPA?
							</h6>

							<p>
								We do accept direct transfers through SEPA. These are our bank details:
							</p>

							<dl>
								<dt>Bank Account Owner</dt>
								<dd>IPFire Project</dd>

								<dt>IBAN</dt>
								<dd>DE76 3605 0105 1010 8206 84</dd>

								<dt>BIC</dt>
								<dd>SPESDE3EXXX</dd>
							</dl>
						</div>

						<div class="block">
							<h6 class="title is-6">
								Why do you need my address in order to process a donation?
							</h6>

							<p>
								We understand that your privacy is very important.
							</p>

							<p>
								We ask for a minimum amount of information required to process
								credit card donations, including billing addresses.
								This allows our payment processor to verify your identity,
								process your payment, and prevent fraudulent charges to your credit card.
							</p>

							<p>
								We keep your information private - if you have questions, please refer to
								Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
							</p>

							<p>
								If you would rather not fill in your information on our online donation form,
								you can send your donation via SEPA bank transfer.
							</p>
						</div>

						<div class="block">
							<h6 class="title is-6">
								I am concerned about losing my credit card details
							</h6>

							<p>
								Credit card fraud is a serious and common problem.
								To avoid that you and we fall victim of that, we comply with
								<a href="https://en.wikipedia.org/wiki/Payment_Card_Industry_Data_Security_Standard">PCI DSS</a>,
								which is mandatory in Europe.
							</p>

							<p>
								That means that we never handle any credit card data
								or store it on our systems. The entire transaction
								is securely handled by our payment provider and our
								systems are regularly audited to ensure that we
								implement this standard correctly.
							</p>
						</div>

						<div class="block">
							<h6 class="title is-6">
								Is my donation tax deductible?
							</h6>

							<p>
								IPFire is not registered as a charitable organization and therefore donations
								are not tax deductible in Germany or the European Union.
							</p>

							<p>
								For donors outside of the European Union, please consult your tax advisor
								about whether your donation is tax deductible.
							</p>
						</div>

						<div class="block">
							<h6 class="title is-6">
								What will be charged to my credit card?
							</h6>

							<p>
								We are based in Germany. Donations by credit card from other countries
								may be subject to an international payment fee charged by your credit card issuer.
								This is usually a small fee around 1%, but please check with your bank
								before donating.
							</p>

							<p>
								If you consider this charge too high, please consider using SEPA direct
								Debit or Bank Transfer if you can.
								Even with this charge, it is a lot cheaper than paying the higher processing
								fees of other payment services like PayPal which keep a lot more of the
								donation to themselves.
							</p>
						</div>

						<div class="block">
							<h6 class="title is-6">
								How do I cancel or change my recurring donation?
							</h6>

							<p>
								Your credit card statements or bank statements will contain a link
								that you can follow to cancel your donation at any time.
							</p>
						</div>

						<div class="block">
							<h6 class="title is-6">
								Who can I email directly with questions about donating?
							</h6>

							<p>
								If you have a question about donating to the IPFire Project,
								please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
							</p>
						</div>
					</div>
				</div>
			</div>
		</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']");
			var submit    = $("#donate");
			var modal     = $("#modal-monthly-suggestions");
			var form      = $("#donation-form");

			// Adjust form to default currency
			if (currency.val() == "EUR") {
				$(".USD").hide();
			} else if (currency.val() == "USD") {
				$(".EUR").hide();
			}

			if (amount.val()) {
				//$("#more").collapse("show");
				amount.change();
			}

			// Copy selected type
 			$("input[name='type-selector']").on("change", function() {
            	var value = $(this).val();
				if (value) {
						type.val(value);
						type.change();
				}
			});

			//  Update Organization / Individual on radio-click
			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();

				if (currency.val() == "EUR") {
					currency.val("USD");

					$(".EUR").hide();
					$(".USD").show();
				} else if (currency.val() == "USD") {
					currency.val("EUR");

					$(".EUR").show();
					$(".USD").hide();
				}
			});


			// Copy amount when clicking on a radio buttons
			$("input[name='amount-selector']").on("change", function() {
				var value = $(this).val();
				if (value) {
					amount.val(value);
					amount.change();
				}
			});

			// Copy frequency when clicking on a radio buttons
			$("input[name='frequency-selector']").on("change", function() {
				var value = $(this).val();
				if (value) {
					frequency.val(value);
				}
			});

			amount.on("change keyup mouseup", function() {
				var value = $(this).val();
				value = parseFloat(value);

				// Enable/disable submit button
				submit.prop("disabled", !value);

				if (value) {
					// Check matching elements
					$("input[name='amount-selector']").each(function (i, selector) {
						var s = $(selector);
						var b = s.parent(".button");
						var v = parseFloat(s.val());

						if (value == v) {
							b.removeClass("is-outlined");
						} else {
							b.addClass("is-outlined");
						}
					});

					// 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);
					});
				}
			});

			submit.click(function (event) {
				if (frequency.val() == "one-time" && amount.val() > 10) {
					event.preventDefault();

					modal.modal("show");
				}
			});

			// Disable all submit buttons after the form has been submitted
			form.one("submit", function() {
				submit.prop("disabled", true);
				$(".monthly-amount-suggestion").prop("disabled", true);
			});

			$(".monthly-amount-suggestion").click(function (event) {
				// Set frequency to monthly
				$("input[name='frequency-selector']").prop("checked", false);
				$("input[name='frequency-selector'][value='monthly']").prop("checked", true);
				frequency.val("monthly");

				// Set amount
				var value = $(this).data("amount");
				amount.val(value);
				amount.change();

				// Hide the modal
				modal.modal("hide");
			});

			// Update everything depending on type
			type.change();

			// Update form with initial amount
			amount.change();
		});
	</script>
{% end block %}