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

extends ../layout

block head-scripts
	script(type="text/javascript", nonce=scriptNonce, src="https://js.recurly.com/v4/recurly.js")
	script(type="text/javascript", nonce=scriptNonce).
		window.countryCode = !{StringHelper.stringifyJsonForScript(countryCode || '')}
		window.recurlyApiKey = "!{settings.apis.recurly.publicKey}"
		window.recomendedCurrency = !{StringHelper.stringifyJsonForScript(String(currency).slice(0,3))}

block content
	main.content.content-alt
		.container(ng-controller="NewSubscriptionController" ng-cloak)
			.row.card-group
				.col-md-5.col-md-push-4
					.card.card-highlighted.card-border(ng-hide="threeDSecureFlow")
						.alert.alert-danger(ng-show="recurlyLoadError")
							strong #{translate('payment_provider_unreachable_error')}
						.page-header(ng-hide="recurlyLoadError")
							.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}} ({{allCurrencies[currencyCode]['symbol']}})
											span.caret
										ul.dropdown-menu(role="menu")
											li(ng-repeat="(currency, value) in availableCurrencies")
												a(
													ng-click="changeCurrency(currency)",
												) {{currency}} ({{value['symbol']}})
							.row(ng-if="planCode == 'student-annual' || planCode == 'student-monthly' || planCode == 'student_free_trial_7_days'")
								.col-xs-12
									p.student-disclaimer #{translate('student_disclaimer')}

							hr.thin
							.row
								.col-md-12.text-center
									div(ng-if="trialLength")
										span !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})}
										span(ng-if="coupon.discountMonths && coupon.discountRate")   -  {{coupon.discountMonths}} #{translate("month")}s {{coupon.discountRate}}% Off

									div(ng-if="price")
										- var priceVars = { price: "{{ availableCurrencies[currencyCode]['symbol'] }}{{ price.total }}"};
										span(ng-if="!coupon.singleUse && monthlyBilling")
											| !{translate("x_price_per_month", priceVars, ['strong'] )}
										span(ng-if="!coupon.singleUse && !monthlyBilling")
											| !{translate("x_price_per_year", priceVars, ['strong'] )}
										span(ng-if="coupon.singleUse && monthlyBilling")
											| !{translate("x_price_for_first_month", priceVars, ['strong'] )}
										span(ng-if="coupon.singleUse && !monthlyBilling")
											| !{translate("x_price_for_first_year", priceVars, ['strong'] )}

									div(ng-if="coupon && coupon.normalPrice")
										- var noDiscountPriceAngularExp = "{{ availableCurrencies[currencyCode]['symbol']}}{{coupon.normalPrice | number:2 }}";
										span.small(ng-if="!coupon.singleUse && monthlyBilling")
											| !{translate("normally_x_price_per_month", { price: noDiscountPriceAngularExp } )}
										span.small(ng-if="!coupon.singleUse && !monthlyBilling")
											| !{translate("normally_x_price_per_year", { price: noDiscountPriceAngularExp } )}
										span.small(ng-if="coupon.singleUse && monthlyBilling")
											| !{translate("then_x_price_per_month", { price: noDiscountPriceAngularExp } )}
										span.small(ng-if="coupon.singleUse && !monthlyBilling")
											| !{translate("then_x_price_per_year", { price: noDiscountPriceAngularExp } )}

						.row(ng-hide="recurlyLoadError")
							div()
								.col-md-12()
									form(
										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(aria-hidden="true")
												span  
												i.fa.fa-cc-visa.fa-2x(aria-hidden="true")
												span  
												i.fa.fa-cc-amex.fa-2x(aria-hidden="true")
												span.sr-only Pay with Mastercard, Visa, or Amex
											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(aria-hidden="true")
												span.sr-only Pay with PayPal

										.alert.alert-warning.small(ng-show="genericError")
											strong {{genericError}}

										div(ng-show="paymentMethod.value === 'credit_card'")
											.row
												.col-xs-6
													.form-group(ng-class="validation.errorFields.first_name || inputHasError(simpleCCForm.firstName) ? 'has-external-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(ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-external-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
														)

											.form-group(ng-class="validation.errorFields.number ? 'has-external-error' : ''")
												label(for="card-no") #{translate("credit_card_number")}
												div#card-no(
													type="text"
													name="ccNumber"
													data-recurly='number'
												)

											.row
												.col-xs-3
													.form-group.has-feedback(ng-class="validation.errorFields.month ? 'has-external-error' : ''")
														label(for="month").capitalised #{translate("month")}
														div(
															type="number"
															name="month"
															data-recurly="month"
														)
												.col-xs-3
													.form-group.has-feedback(ng-class="validation.errorFields.year ? 'has-external-error' : ''")
														label(for="year").capitalised #{translate("year")}
														div(
															type="number"
															name="year"
															data-recurly="year"
														)

												.col-xs-6
													.form-group.has-feedback(ng-class="validation.errorFields.cvv ? 'has-external-error' : ''")
														label #{translate("security_code")}
														div(
															type="number"
															ng-model="data.cvv"
															data-recurly="cvv"
															name="cvv"
															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"
															) ?

										div
											.row
												.col-xs-12
													.form-group(ng-class="validation.errorFields.address1 || inputHasError(simpleCCForm.address1) ? 'has-external-error' : ''")
														label(for="address-line-1") #{translate('address_line_1')}
														input#address-line-1.form-control(
															type="text"
															maxlength="255"
															data-recurly="address1"
															name="address1"
															ng-model="data.address1"
															required
														)
														span.input-feedback-message  {{ simpleCCForm.address1.$error.required ? 'This field is required' : '' }}

											.row
												.col-xs-12
													.form-group.has-feedback(ng-class="validation.errorFields.address2 ? 'has-external-error' : ''")
														label(for="address-line-2") #{translate('address_line_2')}
														input#address-line-2.form-control(
															type="text"
															maxlength="255"
															data-recurly="address2"
															name="address2"
															ng-model="data.address2"
														)

											.row
												.col-xs-4
													.form-group(ng-class="validation.errorFields.postal_code || inputHasError(simpleCCForm.postalCode) ? 'has-external-error' : ''")
														label(for="postal-code") #{translate('postal_code')}
														input#postal-code.form-control(
															type="text"
															maxlength="255"
															data-recurly="postal_code"
															name="postalCode"
															ng-model="data.postal_code"
															required
														)
														span.input-feedback-message  {{ simpleCCForm.postalCode.$error.required ? 'This field is required' : '' }}

												.col-xs-8
													.form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-external-error' : ''")
														label(for="country") #{translate('country')}
														select#country.form-control(
															data-recurly="country"
															ng-model="data.country"
															name="country"
															ng-change="updateCountry()"
															ng-selected="{{country.code == data.country}}"
															ng-model-options="{ debounce: 200 }"
															required
														)
															option(value='', disabled) #{translate("country")}
															option(value='-', disabled) --------------
															option(ng-repeat="country in countries" ng-bind-html="country.name" value="{{country.code}}")
														span.input-feedback-message {{ simpleCCForm.country.$error.required ? 'This field is required' : '' }}

											.form-group
												.checkbox
													label
														input(
															type="checkbox"
															ng-model="ui.addCompanyDetails"
														)
														|
														| #{translate("add_company_details")}

											.form-group(ng-show="ui.addCompanyDetails")
												label(for="company-name") #{translate("company_name")}
												input#company-name.form-control(
													type="text"
													name="companyName"
													ng-model="data.company"
												)

											.form-group(ng-show="ui.addCompanyDetails && taxes.length")
												label(for="vat-number") #{translate("vat_number")}
												input#vat-number.form-control(
													type="text"
													name="vatNumber"
													ng-model="data.vat_number"
													ng-blur="applyVatNumber()"
												)

											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-show="taxes.length"
											)
												- var priceBreakdownVars = { total: "{{ availableCurrencies[currencyCode]['symbol'] }}{{ price.total }}", subtotal: "{{availableCurrencies[currencyCode]['symbol']}}{{ price.subtotal }}", tax: "{{availableCurrencies[currencyCode]['symbol']}}{{ price.tax }}" };
												hr.thin
												span
													| Total:
													|
													span(ng-if="!coupon.singleUse && monthlyBilling")
														| !{translate("x_price_per_month_tax", priceBreakdownVars, ['strong'] )}
													span(ng-if="!coupon.singleUse && !monthlyBilling")
														| !{translate("x_price_per_year_tax", priceBreakdownVars, ['strong'] )}
													span(ng-if="coupon.singleUse && monthlyBilling")
														| !{translate("x_price_for_first_month_tax", priceBreakdownVars, ['strong'] )}
													span(ng-if="coupon.singleUse && !monthlyBilling")
														| !{translate("x_price_for_first_year_tax", priceBreakdownVars, ['strong'] )}
												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(aria-hidden="true")
														span.sr-only #{translate('processing')}
														|  
													span(ng-if="paymentMethod.value === 'credit_card'")
														| {{ monthlyBilling ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_now")}'}}
													span(ng-if="paymentMethod.value !== 'credit_card'") #{translate("upgrade_paypal_btn")}

											p.tos-agreement-notice
												| By subscribing, you agree to our
												|
												a(
													href="/legal#Terms"
													target="_blank"
													rel="noopener noreferrer"
												) terms of service
												| .

					div.three-d-secure-container.card.card-highlighted.card-border(ng-show="threeDSecureFlow")
						.alert.alert-info.small(aria-live="assertive")
							strong #{translate('card_must_be_authenticated_by_3dsecure')}
						div.three-d-secure-recurly-container



				.col-md-3.col-md-pull-4
					if showStudentPlan
						a.btn-primary.btn.plansPageStudentLink(
							href,
							ng-click="switchToStudent()"
						) #{translate("special_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
								if plan.features.collaborators == 1
									| #{translate("collabs_per_proj_single", {collabcount:collaboratorCount})}
								else
									| #{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.track-changes-example
								| #{translate("see_what_has_been")} #[span.added #{translate("added")}]
								|  #{translate("and")} #[span.removed #{translate("removed")}].
							p
								| #{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(ng-non-bindable) We're confident that you'll love #{settings.appName}, 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.


	script(type="text/javascript", nonce=scriptNonce).
		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.