[website] added supporters infrastructure.

1 files changed, 95 insertions, 23 deletions

diff --git a/website/templates/order-license.html b/website/templates/order-license.html
index 4d52d93a..91693c0a 100644
--- a/website/templates/order-license.html
+++ b/website/templates/order-license.html
@@ -1,7 +1,7 @@
 <#import "/_scaffold.html" as main>
 
 <@main.scaffold load=["/js/order-license.js"]>
-	<div class="page-header top5">
+	<div class="page-header top5 order-license">
 		<div class="row text-center">
 			<h2>Order a professional or enterprise license</h2>
 		</div>
@@ -12,34 +12,62 @@
 					<div class="form-group">
 						<label for="companyName">Company name</label>
 						<input type="text" class="form-control" aria-describedby="companyNameHelp" id="companyName" placeholder="license holder name" />
+						<div id="companyNameErr" class="formErr" hidden="hidden">Company name is a required field.</div>
 						<small id="companyNameHelp" class="form-text text-muted">If applying for an individual license, fill in your own name.</small>
 					</div>
 					<div class="form-group">
 						<label for="email">Email</label>
 						<input type="email" class="form-control" aria-describedby="emailHelp" id="email" placeholder="email of contact / holder" />
+						<div id="emailErr" class="formErr" hidden="hidden">Your email address is required; we will send the bill to this email address.</div>
 						<small id="emailHelp" class="form-text text-muted">We will never share this email with any third parties; we'll email you the invoice at this email address.</small>
 					</div>
 				</fieldset>
 				<fieldset class="form-group">
 					<legend>Type of license</legend>
+					<div class="form-group">
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input licenseType" name="licenseType" value="professional" checked="checked" />
+								Professional (€2,- per developer per month; ~ $2.50).
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input licenseType" name="licenseType" value="enterprise" />
+								Enterprise (€5,- per developer per month; ~ $6.10).
+							</label>
+						</div>
+					</div>
+					<div id="licenseTypeErr" class="formErr" hidden="hidden">License type is a required field.</div>
+					<div class="form-group">
+						<label for="seats"># of developers using lombok</label>
+						<input type="number" placeholder="# of developers" class="form-control" id="seats" />
+						<div id="seatsErr" class="formErr" hidden="hidden">We need to know the # of developers to determine the license price.</div>
+					</div>
+				</fieldset>
+				<fieldset class="form-group">
+					<legend>Payment</legend>
 					<div class="form-check">
 						<label class="form-check-label">
-							<input type="radio" class="form-check-input" name="licenseType" value="professional" checked="checked" />
-							Professional
+							<input type="radio" class="form-check-input paymentType" name="paymentType" value="yearly" checked="checked" />
+							Yearly
 						</label>
 					</div>
 					<div class="form-check">
 						<label class="form-check-label">
-							<input type="radio" class="form-check-input" name="licenseType" value="enterprise" />
-							Enterprise
+							<input type="radio" class="form-check-input paymentType" name="paymentType" value="monthly" />
+							Monthly<span id="onlyYearlyWarning" hidden="hidden" class="warning">The total license cost is sufficiently low that we'll bill you yearly.</span>
 						</label>
 					</div>
+					<div id="paymentTypeErr" class="formErr" hidden="hidden">Payment type is a required field.</div>
+					<div class="form-group" hidden="hidden" id="costIndicator">
+					</div>
 				</fieldset>
 				<fieldset class="form-group">
 					<legend>Mention</legend>
 					<div class="form-check">
 						<label class="form-check-label">
-							<input type="checkbox" class="form-check-input" name="mentionMe" checked="checked" />
+							<input type="checkbox" class="form-check-input" id="mentionMe" name="mentionMe" checked="checked" />
 							Mention me on the <em>supporters / licensees</em> page.
 						</label>
 					</div>
@@ -55,24 +83,68 @@
 						<button class="form-control" id="deleteCompanyLogo" style="display: none;">Remove logo</button>
 					</div>
 				</fieldset>
-				<button type="submit" class="btn btn-primary">Submit order</button>
+				<fieldset class="form-group">
+					<legend>Location and VAT</legend>
+					<div class="form-group">
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input locationType" name="locationType" value="eu" checked="checked" />
+								We are based in the Europe
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input locationType" name="locationType" value="usa" />
+								We are based in the USA
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input locationType" name="locationType" value="other" />
+								We are based elsewhere
+							</label>
+						</div>
+						<div id="locationTypeErr" class="formErr" hidden="hidden">Location (continent) is a required field.</div>
+					</div>
+					<div class="form-group" id="locationType_eu">
+						<label for="euVat">EU VAT number</label>
+						<input type="text" class="form-control" id="euVat" placeholder="EU VAT number" />
+						<div id="euVatErr" class="formErr" hidden="hidden">EU VAT is a required field. If you are an individual and you have no EU VAT number, consider giving us a <a href="https://www.patreon.com/lombok">patreon</a> donation.</div>
+					</div>
+					<div class="form-group" hidden="hidden" id="locationType_usa">
+						Please <a href="/W8BEN_lombok.pdf">download our W-8BEN form</a> for your tax records.
+					</div>
+					<div class="form-group" hidden="hidden" id="locationType_other">
+						Please make sure you fulfill any local tax obligations for buying software from other countries.
+					</div>
+				</fieldset>
+				<fieldset class="form-group">
+					<legend>Payment method</legend>
+					<div class="form-group">
+						<div class="form-check" id="paymentMethod_iban">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input" name="paymentMethod" value="iban" checked="checked" />
+								Pay via IBAN (european bank transfer)
+							</label>
+						</div>
+						<div class="form-check" hidden="hidden" id="paymentMethod_intl">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input" name="paymentMethod" value="intl" />
+								Pay via international bank transfer
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label" id="paymentMethod_payoneer">
+								<input type="radio" class="form-check-input" name="paymentMethod" value="payoneer" />
+								Pay with Payoneer
+							</label>
+						</div>
+						<div id="paymentMethodErr" class="formErr" hidden="hidden">Payment method is a required field.</div>
+					</div>
+				</fieldset>
+				<button type="submit" id="submit" class="btn btn-primary">Submit order</button>
+				<div id="orderHelp">If you run into issues with the order form, or you have any other questions, please send us an email at <a href="mailto:orders@projectlombok.org"><code>orders@projectlombok.org</code></a></div>
 			</p>
 		</div>
 	</div>
-	<div>
-Form fields:
-
-* EU / US / Elders
-* Naam bedrijf
-* Do you want to be mentioned?
-* Link to logo
-* Link to website
-* Professional of enterprise
-* # of developers
-* Email of contact.sta
-* In EU: VAT Number
-* In EU: How would you like to pay? IBAN or Payoneer
-* In US: How would you like to pay? International wire transfer, or Payoneer (default = payoneer).
-* Elders: We’ll get back to you..
-	</div>		
 </@main.scaffold>