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

extends ../layout
block scripts
	script(type='text/javascript').
		window.recomendedCurrency = '#{currency}'
		window.plan_code = '#{plan_code}'


block content
	- locals.supressDefaultJs = true
	script(data-main=jsPath+'main.js', src=jsPath+'libs/require.js', baseurl=jsPath)
	script(src=jsPath+'libs/recurly.min.js')

	.content.content-alt
		.container(ng-controller="NewSubscriptionController" ng-cloak)
			.row.card-group
				.col-md-6.col-md-offset-1
					.card.card-highlighted
						.page-header
							span.dropdown.changePlanButton.pull-right(ng-cloak)
								a.btn.btn-default.dropdown-toggle(
									href="#",
									data-toggle="dropdown"
								)
									| {{currencyCode}} ({{plans[currencyCode]['symbol']}}) 
									span.caret
								ul.dropdown-menu(role="menu")
									li(ng-repeat="(currency, value) in plans", dropdown-toggle)
										a(
											ng-click="changeCurrency(currency)",
										) {{currency}} ({{value['symbol']}})
							h1 #{translate("new_subscription")}
						
						#subscribeForm(style="min-height: 400px;") #{translate("loading_billing_form")}...
						
				.col-md-4
					.card.card-last
						.paymentPageFeatures
							ul.list-unstyled
								li 
									if plan.features.collaborators == -1
										- var collaboratorCount = 'Unlimited'
									else
										- var collaboratorCount = plan.features.collaborators
									i.fa.fa-check
									|  #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
								li 
									i.fa.fa-check
									|  #{translate("full_doc_history")}
								li 
									i.fa.fa-check
									|  #{translate("sync_to_dropbox")}
								li 
									i.fa.fa-check
									|  Cancel Anytime
								li 
									i.fa.fa-check
								|  100% Money Back Guarantee


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


	script(type="text/javascript").
		Recurly.config(!{recurlyConfig})
		var recurlySubscriptionFormConfig = !{subscriptionFormOptions}
		recurlySubscriptionFormConfig.successHandler = function(){
			ga('send', 'event', 'subscription-funnel', 'subscribed')
		}

		Recurly.buildSubscriptionForm(recurlySubscriptionFormConfig);

		window.ab = [
			{step:1, bucket:"14d", testName:"trial_len"},
			{step:1, bucket:"7d", testName:"trial_len"}
		]