overleaf/services/web/app/views/subscriptions/new.pug

extends ../layout

block scripts
	script(src="https://js.recurly.com/v3/recurly.js")

	script(type='text/javascript').
		window.countryCode = '#{countryCode}'
		window.plan_code = '#{plan_code}'
		window.recurlyApiKey = "!{settings.apis.recurly.publicKey}"
		window.couponCode = !{JSON.stringify(couponCode)}
		window.recomendedCurrency = !{JSON.stringify(currency.slice(0,3))}

block content
	.content.content-alt
		.container(ng-controller="NewSubscriptionController" ng-cloak)
			.row.card-group
				.col-md-5.col-md-push-4
					.card.card-highlighted
						.page-header
							.row
								.col-xs-9
									h2 {{planName}}
								.col-xs-3
									div.dropdown.changePlanButton.pull-right(ng-cloak, dropdown)
										a.btn.btn-default.dropdown-toggle(
											href="#",
											data-toggle="dropdown",
											dropdown-toggle
										)
											| {{currencyCode}} ({{plans[currencyCode]['symbol']}}) 
											span.caret
										ul.dropdown-menu(role="menu")
											li(ng-repeat="(currency, value) in plans")
												a(
													ng-click="changeCurrency(currency)",
												) {{currency}} ({{value['symbol']}})
							hr.thin
							.row
								.col-md-12.text-center
									div(ng-if="trialLength") 
										span !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})}
										span(ng-if="discountMonths && discountRate")   -  {{discountMonths}} #{translate("month")}s {{discountRate}}% Off
									div(ng-if="price")
										strong {{price.currency.symbol}}{{price.next.total}} 
										span(ng-if="monthlyBilling")  #{translate("every")} #{translate("month")}
										span(ng-if="!monthlyBilling")  #{translate("every")} #{translate("year")}
									div(ng-if="normalPrice")
										span.small Normally {{price.currency.symbol}}{{normalPrice}}
						.row
							div()
								.col-md-12()
									form(
										ng-if="planName"
										name="simpleCCForm"
										novalidate
									)
										div.payment-method-toggle
											a.payment-method-toggle-switch(
												href
												ng-click="setPaymentMethod('credit_card');"
												ng-class="paymentMethod.value === 'credit_card' ? 'payment-method-toggle-switch-selected' : ''"
											)
												i.fa.fa-cc-mastercard.fa-2x
												span  
												i.fa.fa-cc-visa.fa-2x
												span  
												i.fa.fa-cc-amex.fa-2x
											a.payment-method-toggle-switch(
												href
												ng-click="setPaymentMethod('paypal');"
												ng-class="paymentMethod.value === 'paypal' ? 'payment-method-toggle-switch-selected' : ''"
											)
												i.fa.fa-cc-paypal.fa-2x
										
										.alert.alert-warning.small(ng-show="genericError")
											strong {{genericError}}

										div(ng-if="paymentMethod.value === 'credit_card'")
											.row
												.col-xs-6
													.form-group(ng-class="validation.errorFields.first_name || inputHasError(simpleCCForm.firstName) ? 'has-error' : ''")
														label(for="first-name") #{translate('first_name')}
														input#first-name.form-control(
															type="text"
															maxlength='255'
															data-recurly="first_name"
															name="firstName"
															ng-model="data.first_name"
															required
														)
														span.input-feedback-message  {{ simpleCCForm.firstName.$error.required ? 'This field is required' : '' }}
												.col-xs-6
													.form-group(for="last-name",ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-error' : ''")
														label(for="last-name") #{translate('last_name')}
														input#last-name.form-control(
															type="text"
															maxlength='255'
															data-recurly="last_name"
															name="lastName"
															ng-model="data.last_name"
															required
														)
														span.input-feedback-message {{ simpleCCForm.lastName.$error.required ? 'This field is required' : '' }}

											.form-group(ng-class="validation.correctCardNumber == false || validation.errorFields.number || inputHasError(simpleCCForm.ccNumber) ? 'has-error' : ''")
												label(for="card-no") #{translate("credit_card_number")}
												input#card-no.form-control(
													type="text"
													ng-model="data.number"
													name="ccNumber"
													ng-focus="validation.correctCardNumber = true; validation.errorFields.number = false;"
													ng-blur="validateCardNumber();"
													required
													cc-format-card-number
												)
												span.input-feedback-message {{ simpleCCForm.ccNumber.$error.required ? 'This field is required' : 'Please re-check the card number' }}

											.row
												.col-xs-6
													.form-group.has-feedback(ng-class="validation.correctExpiry == false || validation.errorFields.expiry || inputHasError(simpleCCForm.expiry) ? 'has-error' : ''")
														label #{translate("expiry")}
														input.form-control(
															type="text"
															ng-model="data.mmYY"
															name="expiry"
															placeholder="MM / YY"
															ng-focus="validation.correctExpiry = true; validation.errorFields.expiry = false;"
															ng-blur="updateExpiry(); validateExpiry()"
															required
															cc-format-expiry
														)
														span.input-feedback-message {{ simpleCCForm.expiry.$error.required ? 'This field is required' : 'Please re-check the expiry date' }}

												.col-xs-6
													.form-group.has-feedback(ng-class="validation.correctCvv == false || validation.errorFields.cvv || inputHasError(simpleCCForm.cvv) ? 'has-error' : ''")
														label #{translate("security_code")}
														input.form-control(
															type="text"
															ng-model="data.cvv"
															ng-focus="validation.correctCvv = true; validation.errorFields.cvv = false;"
															ng-blur="validateCvv()"
															name="cvv"
															required
															cc-format-sec-code
														)
														.form-control-feedback
															a.form-helper(
																href
																tabindex="-1"
																tooltip-template="'cvv-tooltip-tpl.html'"
																tooltip-trigger="mouseenter"
																tooltip-append-to-body="true"
															) ?
														span.input-feedback-message {{ simpleCCForm.cvv.$error.required ? 'This field is required' : 'Please re-check the security code' }}

										
										div
											.form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-error' : ''")
												label(for="country") #{translate('country')}
												select#country.form-control(
													data-recurly="country"
													ng-model="data.country"
													name="country"
													ng-change="updateCountry()"
													required
												)
													+countries_options()
												span.input-feedback-message {{ simpleCCForm.country.$error.required ? 'This field is required' : '' }}

											if (showVatField)
												.form-group
													label(for="vat-no") #{translate('vat_number')}
													input#vat-no.form-control(
														type="text"
														ng-blur="applyVatNumber()"
														ng-model="data.vat_number"
													)
											if (showCouponField)
												.form-group
													label(for="coupon-code") #{translate('coupon_code')}
													input#coupon-code.form-control(
														type="text"
														ng-blur="applyCoupon()"
														ng-model="data.coupon"
													)
											
											p(ng-if="paymentMethod.value === 'paypal'") #{translate("paypal_upgrade")}
											
											div.price-breakdown(ng-if="price.next.tax !== '0.00'")
												hr.thin
												span Total: 
												strong {{price.currency.symbol}}{{price.next.total}} 
												span ({{price.currency.symbol}}{{price.next.subtotal}} + {{price.currency.symbol}}{{price.next.tax}} tax) 
												span(ng-if="monthlyBilling") #{translate("every")} #{translate("month")}
												span(ng-if="!monthlyBilling") #{translate("every")} #{translate("year")}
												hr.thin

											div.payment-submit
												button.btn.btn-success.btn-block(
													ng-click="submit()"
													ng-disabled="processing || !isFormValid(simpleCCForm);"
												) 
													span(ng-show="processing") 
														i.fa.fa-spinner.fa-spin
														|  
													| {{ paymentMethod.value === 'credit_card' ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_paypal_btn")}' }}


				.col-md-3.col-md-pull-4
					if showStudentPlan == 'true'
						a.btn-primary.btn.plansPageStudentLink(
							href,
							ng-click="switchToStudent()"
						) #{translate("half_price_student")} 

					.card.card-first
						.paymentPageFeatures
							h3 #{translate("unlimited_projects")}
							p #{translate("create_unlimited_projects")}
						
							h3
								if plan.features.collaborators == -1
									- var collaboratorCount = 'Unlimited'
								else
									- var collaboratorCount = plan.features.collaborators
								| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
							p #{translate("work_on_single_version")}. #{translate("view_collab_edits")} in real time.
							
							h3 #{translate("full_doc_history")}
							p #{translate("see_what_has_been")} 
								span.added #{translate("added")} 
								| #{translate("and")} 
								span.removed #{translate("removed")}. 
								| #{translate("restore_to_any_older_version")}.
							
							h3 #{translate("sync_to_dropbox")}
							p
								| #{translate("acces_work_from_anywhere")}. 
								| #{translate("work_offline_and_sync_with_dropbox")}.
								
							hr
								
							p.small.text-center We're confident that you'll love ShareLaTeX, but if not you can cancel anytime. We'll give you your money back, no questions asked, if you let us know within 30 days.
							hr
							span                          
							a(href="https://www.positivessl.com" style="font-family: arial; font-size: 10px; color: #212121; text-decoration: none;")
								img(src="https://www.positivessl.com/images-new/PositiveSSL_tl_trans.png" alt="SSL Certificate" title="SSL Certificate" border="0")
								div(style="font-family: arial;font-weight:bold;font-size:15px;color:#86BEE0;")
									a(href="https://www.positivessl.com" style="color:#86BEE0; text-decoration: none;")


	script(type="text/javascript").
		ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")

	script(
		type="text/ng-template"
		id="cvv-tooltip-tpl.html"
	)
		p For #[strong Visa, MasterCard and Discover], the #[strong 3 digits] on the #[strong back] of your card.
		p For #[strong American Express], the #[strong 4 digits] on the #[strong front] of your card.

mixin countries_options()
	option(value='', disabled, selected) #{translate("country")}
	option(value='-') --------------
	option(value='AF') Afghanistan
	option(value='AL') Albania
	option(value='DZ') Algeria
	option(value='AS') American Samoa
	option(value='AD') Andorra
	option(value='AO') Angola
	option(value='AI') Anguilla
	option(value='AQ') Antarctica
	option(value='AG') Antigua and Barbuda
	option(value='AR') Argentina
	option(value='AM') Armenia
	option(value='AW') Aruba
	option(value='AC') Ascension Island
	option(value='AU') Australia
	option(value='AT') Austria
	option(value='AZ') Azerbaijan
	option(value='BS') Bahamas
	option(value='BH') Bahrain
	option(value='BD') Bangladesh
	option(value='BB') Barbados
	option(value='BE') Belgium
	option(value='BZ') Belize
	option(value='BJ') Benin
	option(value='BM') Bermuda
	option(value='BT') Bhutan
	option(value='BO') Bolivia
	option(value='BA') Bosnia and Herzegovina
	option(value='BW') Botswana
	option(value='BV') Bouvet Island
	option(value='BR') Brazil
	option(value='BQ') British Antarctic Territory
	option(value='IO') British Indian Ocean Territory
	option(value='VG') British Virgin Islands
	option(value='BN') Brunei
	option(value='BG') Bulgaria
	option(value='BF') Burkina Faso
	option(value='BI') Burundi
	option(value='KH') Cambodia
	option(value='CM') Cameroon
	option(value='CA') Canada
	option(value='IC') Canary Islands
	option(value='CT') Canton and Enderbury Islands
	option(value='CV') Cape Verde
	option(value='KY') Cayman Islands
	option(value='CF') Central African Republic
	option(value='EA') Ceuta and Melilla
	option(value='TD') Chad
	option(value='CL') Chile
	option(value='CN') China
	option(value='CX') Christmas Island
	option(value='CP') Clipperton Island
	option(value='CC') Cocos [Keeling] Islands
	option(value='CO') Colombia
	option(value='KM') Comoros
	option(value='CD') Congo [DRC]
	option(value='CK') Cook Islands
	option(value='CR') Costa Rica
	option(value='HR') Croatia
	option(value='CU') Cuba
	option(value='CY') Cyprus
	option(value='CZ') Czech Republic
	option(value='DK') Denmark
	option(value='DG') Diego Garcia
	option(value='DJ') Djibouti
	option(value='DM') Dominica
	option(value='DO') Dominican Republic
	option(value='NQ') Dronning Maud Land
	option(value='TL') East Timor
	option(value='EC') Ecuador
	option(value='EG') Egypt
	option(value='SV') El Salvador
	option(value='EE') Estonia
	option(value='ET') Ethiopia
	option(value='FK') Falkland Islands [Islas Malvinas]
	option(value='FO') Faroe Islands
	option(value='FJ') Fiji
	option(value='FI') Finland
	option(value='FR') France
	option(value='GF') French Guiana
	option(value='PF') French Polynesia
	option(value='TF') French Southern Territories
	option(value='FQ') French Southern and Antarctic Territories
	option(value='GA') Gabon
	option(value='GM') Gambia
	option(value='GE') Georgia
	option(value='DE') Germany
	option(value='GH') Ghana
	option(value='GI') Gibraltar
	option(value='GR') Greece
	option(value='GL') Greenland
	option(value='GD') Grenada
	option(value='GP') Guadeloupe
	option(value='GU') Guam
	option(value='GT') Guatemala
	option(value='GG') Guernsey
	option(value='GW') Guinea-Bissau
	option(value='GY') Guyana
	option(value='HT') Haiti
	option(value='HM') Heard Island and McDonald Islands
	option(value='HN') Honduras
	option(value='HK') Hong Kong
	option(value='HU') Hungary
	option(value='IS') Iceland
	option(value='IN') India
	option(value='ID') Indonesia
	option(value='IE') Ireland
	option(value='IM') Isle of Man
	option(value='IL') Israel
	option(value='IT') Italy
	option(value='JM') Jamaica
	option(value='JP') Japan
	option(value='JE') Jersey
	option(value='JT') Johnston Island
	option(value='JO') Jordan
	option(value='KZ') Kazakhstan
	option(value='KE') Kenya
	option(value='KI') Kiribati
	option(value='KW') Kuwait
	option(value='KG') Kyrgyzstan
	option(value='LA') Laos
	option(value='LV') Latvia
	option(value='LS') Lesotho
	option(value='LY') Libya
	option(value='LI') Liechtenstein
	option(value='LT') Lithuania
	option(value='LU') Luxembourg
	option(value='MO') Macau
	option(value='MK') Macedonia [FYROM]
	option(value='MG') Madagascar
	option(value='MW') Malawi
	option(value='MY') Malaysia
	option(value='MV') Maldives
	option(value='ML') Mali
	option(value='MT') Malta
	option(value='MH') Marshall Islands
	option(value='MQ') Martinique
	option(value='MR') Mauritania
	option(value='MU') Mauritius
	option(value='YT') Mayotte
	option(value='FX') Metropolitan France
	option(value='MX') Mexico
	option(value='FM') Micronesia
	option(value='MI') Midway Islands
	option(value='MD') Moldova
	option(value='MC') Monaco
	option(value='MN') Mongolia
	option(value='ME') Montenegro
	option(value='MS') Montserrat
	option(value='MA') Morocco
	option(value='MZ') Mozambique
	option(value='NA') Namibia
	option(value='NR') Nauru
	option(value='NP') Nepal
	option(value='NL') Netherlands
	option(value='AN') Netherlands Antilles
	option(value='NT') Neutral Zone
	option(value='NC') New Caledonia
	option(value='NZ') New Zealand
	option(value='NI') Nicaragua
	option(value='NE') Niger
	option(value='NG') Nigeria
	option(value='NU') Niue
	option(value='NF') Norfolk Island
	option(value='VD') North Vietnam
	option(value='MP') Northern Mariana Islands
	option(value='NO') Norway
	option(value='OM') Oman
	option(value='QO') Outlying Oceania
	option(value='PC') Pacific Islands Trust Territory
	option(value='PK') Pakistan
	option(value='PW') Palau
	option(value='PS') Palestinian Territories
	option(value='PA') Panama
	option(value='PZ') Panama Canal Zone
	option(value='PY') Paraguay
	option(value='YD') People's Democratic Republic of Yemen
	option(value='PE') Peru
	option(value='PH') Philippines
	option(value='PN') Pitcairn Islands
	option(value='PL') Poland
	option(value='PT') Portugal
	option(value='PR') Puerto Rico
	option(value='QA') Qatar
	option(value='RO') Romania
	option(value='RU') Russia
	option(value='RW') Rwanda
	option(value='RE') Réunion
	option(value='BL') Saint Barthélemy
	option(value='SH') Saint Helena
	option(value='KN') Saint Kitts and Nevis
	option(value='LC') Saint Lucia
	option(value='MF') Saint Martin
	option(value='PM') Saint Pierre and Miquelon
	option(value='VC') Saint Vincent and the Grenadines
	option(value='WS') Samoa
	option(value='SM') San Marino
	option(value='SA') Saudi Arabia
	option(value='SN') Senegal
	option(value='RS') Serbia
	option(value='CS') Serbia and Montenegro
	option(value='SC') Seychelles
	option(value='SL') Sierra Leone
	option(value='SG') Singapore
	option(value='SK') Slovakia
	option(value='SI') Slovenia
	option(value='SB') Solomon Islands
	option(value='ZA') South Africa
	option(value='GS') South Georgia and the South Sandwich Islands
	option(value='KR') South Korea
	option(value='ES') Spain
	option(value='LK') Sri Lanka
	option(value='SR') Suriname
	option(value='SJ') Svalbard and Jan Mayen
	option(value='SZ') Swaziland
	option(value='SE') Sweden
	option(value='CH') Switzerland
	option(value='ST') São Tomé and Príncipe
	option(value='TW') Taiwan
	option(value='TJ') Tajikistan
	option(value='TZ') Tanzania
	option(value='TH') Thailand
	option(value='TG') Togo
	option(value='TK') Tokelau
	option(value='TO') Tonga
	option(value='TT') Trinidad and Tobago
	option(value='TA') Tristan da Cunha
	option(value='TN') Tunisia
	option(value='TR') Turkey
	option(value='TM') Turkmenistan
	option(value='TC') Turks and Caicos Islands
	option(value='TV') Tuvalu
	option(value='UM') U.S. Minor Outlying Islands
	option(value='PU') U.S. Miscellaneous Pacific Islands
	option(value='VI') U.S. Virgin Islands
	option(value='UG') Uganda
	option(value='UA') Ukraine
	option(value='AE') United Arab Emirates
	option(value='GB') United Kingdom
	option(value='US') United States
	option(value='UY') Uruguay
	option(value='UZ') Uzbekistan
	option(value='VU') Vanuatu
	option(value='VA') Vatican City
	option(value='VE') Venezuela
	option(value='VN') Vietnam
	option(value='WK') Wake Island
	option(value='WF') Wallis and Futuna
	option(value='EH') Western Sahara
	option(value='YE') Yemen
	option(value='ZM') Zambia
	option(value='AX') Åland Islands