Overleaf/services/web/app/views/subscriptions/plans.pug

extends ../layout
block scripts
	script(type='text/javascript').
		window.recomendedCurrency = '#{recomendedCurrency}'
		window.abCurrencyFlag = '#{abCurrencyFlag}'
		window.shouldABTestPlans = #{shouldABTestPlans || false}

	script(type='text/javascript').
		(function() {var s=document.createElement('script'); s.type='text/javascript';s.async=true; 
		s.src=('https:'==document.location.protocol?'https':'http') + '://sharelatex-accounts.groovehq.com/widgets/f5ad3b09-7d99-431b-8af5-c5725e3760ce/ticket/api.js'; 
		var q = document.getElementsByTagName('script')[0];q.parentNode.insertBefore(s, q);})(); 
		
block content
	.content-alt
		.content.plans(ng-controller="PlansController")
			.container
				.row
					.col-md-12
						.page-header.centered.plans-header.text-centered
							h1(ng-cloak) #{translate("start_x_day_trial", {len:'{{trial_len}}'})}
				.row
					.col-md-8.col-md-offset-2
						p.text-centered #{translate("sl_benefits_plans")}

				.row(ng-cloak)
					.col-md-6.col-md-offset-3
						ul.nav.nav-pills
							li(ng-class="{'active': ui.view == 'monthly'}")
								a(
									href,
									ng-click="switchToMonthly()"
								) #{translate("monthly")}
							li(ng-class="{'active': ui.view == 'annual'}")
								a(
									href
									ng-click="switchToAnnual()"
								) #{translate("annual")}
							li(ng-class="{'active': ui.view == 'student'}")
								a(
									href,
									ng-click="switchToStudent()"
								) #{translate("half_price_student")} 
					.col-md-2.text-right
						.dropdown.currency-dropdown(dropdown)
							a.btn.btn-default.dropdown-toggle#currenyDropdown(
								href="#",
								data-toggle="dropdown",
								dropdown-toggle
							)
								| {{currencyCode}} ({{plans[currencyCode]['symbol']}}) 
								span.caret

							ul.dropdown-menu.dropdown-menu-right.text-right(role="menu")
								li(ng-repeat="(currency, value) in plans")
									a(
										href,
										ng-click="changeCurreny(currency)"
									) {{currency}} ({{value['symbol']}})

				div(ng-show="showPlans")
					.row(ng-cloak)
						.col-md-10.col-md-offset-1
							.row
								.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
									.col-md-4
										.card.card-first
											.card-header
												h2 #{translate("personal")} 
											.circle #{translate("free")} 
											ul.list-unstyled
												li #{translate("one_collaborator")}
												li  
												li  
												li  
												li
													br
													a.btn.btn-info(
														href="/register"
														style=(getLoggedInUserId() === undefined ? "" : "visibility: hidden")
													) #{translate("sign_up_now")}
									.col-md-4
										.card.card-highlighted
											.card-header
												h2 #{translate("collaborator")}
											.circle
												span(ng-if="ui.view == 'monthly'")
													| {{plans[currencyCode]['collaborator']['monthly']}}
													span.small /mo
												span(ng-if="ui.view == 'annual'")
													| {{plans[currencyCode]['collaborator']['annual']}}
													span.small /yr
											ul.list-unstyled
												li 
													strong(ng-show="plansVariant == 'default'") #{translate("collabs_per_proj", {collabcount:10})}
													strong(ng-show="plansVariant == 'heron'") #{translate("collabs_per_proj", {collabcount:8})}
													strong(ng-show="plansVariant == 'ibis'") #{translate("collabs_per_proj", {collabcount:12})}
												li #{translate("full_doc_history")}
												li #{translate("sync_to_dropbox")}
												li #{translate("sync_to_github")}
												li
													br
													a.btn.btn-info(
														ng-href="/user/subscription/new?planCode={{ getCollaboratorPlanCode() }}&currency={{currencyCode}}", ng-click="signUpNowClicked('collaborator')"
													)
														span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
														span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
									.col-md-4
										.card.card-last
											.card-header
												h2 #{translate("professional")}
											.circle 
												span(ng-if="ui.view == 'monthly'")
													| {{plans[currencyCode]['professional']['monthly']}}
													span.small /mo
												span(ng-if="ui.view == 'annual'")
													| {{plans[currencyCode]['professional']['annual']}}
													span.small /yr
											ul.list-unstyled
												li
													strong #{translate("unlimited_collabs")}
												li #{translate("full_doc_history")}
												li #{translate("sync_to_dropbox")}
												li #{translate("sync_to_github")}
												li
													br
													a.btn.btn-info(
														ng-href="/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('professional')"
													)
														span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
														span(ng-show="ui.view == 'annual'") #{translate("buy_now")}

								.card-group.text-centered(ng-if="ui.view == 'student'")
									.col-md-4
										.card.card-first
											.card-header
												h2 #{translate("personal")}
											.circle #{translate("free")}
											ul.list-unstyled
												li #{translate("one_collaborator")}
												li  
												li  
												li  
												li
													br
													a.btn.btn-info(
														href="/register"
														style=(getLoggedInUserId() === undefined ? "" : "visibility: hidden")
													) #{translate("sign_up_now")}

									.col-md-4
										.card.card-highlighted
											.card-header
												h2 #{translate("student")}
											.circle
												span
													| {{plans[currencyCode]['student']['monthly']}}
													span.small /mo
											ul.list-unstyled
												li
													strong(ng-show="plansVariant == 'default'") #{translate("collabs_per_proj", {collabcount:6})}
													strong(ng-show="plansVariant == 'heron'") #{translate("collabs_per_proj", {collabcount:4})}
													strong(ng-show="plansVariant == 'ibis'") #{translate("collabs_per_proj", {collabcount:8})}
												li #{translate("full_doc_history")}
												li #{translate("sync_to_dropbox")}
												li #{translate("sync_to_github")}
												li
													br
													a.btn.btn-info(
														ng-href="/user/subscription/new?planCode=student{{ plansVariant == 'default' ? planQueryString : '_'+plansVariant }}&currency={{currencyCode}}",
														ng-click="signUpNowClicked('student')"
													) #{translate("start_free_trial")}

									.col-md-4
										.card.card-last
											.card-header
												h2 #{translate("student")} (#{translate("annual")})
											.circle
												span
													| {{plans[currencyCode]['student']['annual']}}
													span.small /yr
											ul.list-unstyled
												li
													strong(ng-show="plansVariant == 'default'") #{translate("collabs_per_proj", {collabcount:6})}
													strong(ng-show="plansVariant == 'heron'") #{translate("collabs_per_proj", {collabcount:4})}
													strong(ng-show="plansVariant == 'ibis'") #{translate("collabs_per_proj", {collabcount:8})}
												li #{translate("full_doc_history")}
												li #{translate("sync_to_dropbox")}
												li #{translate("sync_to_github")}
												li
													br
													a.btn.btn-info(
														ng-href="/user/subscription/new?planCode=student-annual{{ plansVariant == 'default' ? '' : '_'+plansVariant }}&currency={{currencyCode}}",
														ng-click="signUpNowClicked('student')"
													) #{translate("buy_now")}



				.row.row-spaced(ng-cloak)
					p.text-centered #{translate("choose_plan_works_for_you", {len:'{{trial_len}}'})}
					
				.row(ng-cloak)
					.col-md-8.col-md-offset-2
						.alert.alert-info.text-centered
							| #{translate("interested_in_group_licence")}
							br
							a(href, ng-click="openGroupPlanModal()") #{translate("get_in_touch_for_details")}
						
					script(type="text/ng-template", id="groupPlanModalTemplate")
						.modal-header
							h3 #{translate("group_plan_enquiry")}
						.modal-body
							form.text-left.form(ng-controller="UniverstiesContactController", ng-submit="contactUs()", ng-cloak)
								span(ng-show="sent == false")
									.form-group
										label#title9(for='Field9')
											| Name
										input#Field9.field.text.medium.span8.form-control(ng-model="form.name", maxlength='255', tabindex='1', onkeyup='')
									label#title11.desc(for='Field11')
										| Email
									.form-group
										input#Field11.field.text.medium.span8.form-control(ng-model="form.email", name='Field11', type='email', spellcheck='false', value='', maxlength='255', tabindex='2')
									label#title12.desc(for='Field12')
										| University / Company
									.form-group
										input#Field12.field.text.medium.span8.form-control(ng-model="form.university", name='Field12', type='text', value='', maxlength='255', tabindex='3', onkeyup='')
									label#title13.desc(for='Field13')
										| Position
									.form-group
										input#Field13.field.text.medium.span8.form-control(ng-model="form.position", name='Field13', type='text', value='', maxlength='255', tabindex='4', onkeyup='')
									.form-group
										input(ng-model="form.source", type="hidden", ng-init="form.source = '__ref__'; form.subject = 'ShareLaTeX for Universities';")
									.form-group.text-center
										input#saveForm.btn-success.btn.btn-lg(name='saveForm', type='submit', ng-disabled="sending",  value='Request a quote')
								span(ng-show="sent")
									p Request Sent, Thank you.

				.row
					.col-md-12
						.page-header.plans-header.plans-subheader.text-centered
							h2 #{translate("enjoy_these_features")}
					.col-md-4
						.card.features.text-centered
							i.fa.fa-file-text-o.fa-5x
							h4 #{translate("unlimited_projects")}
							p #{translate("create_unlimited_projects")}
					.col-md-4
						.card.features.text-centered
							i.fa.fa-clock-o.fa-5x
							h4 #{translate("full_doc_history")}
							p #{translate("never_loose_work")}
					.col-md-4
						.card.features.text-centered
							i.fa.fa-dropbox.fa-5x
							|      
							i.fa.fa-github.fa-5x
							h4 #{translate("sync_to_dropbox_and_github")}
							p #{translate("access_projects_anywhere")}