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

extends ../layout
block scripts
	script(type='text/javascript').
		window.recurlyPublicToken = '#{settings.apis.recurly.publicKey}'
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
						.dropdown(style="display:none;")
							a.btn.btn-primary.dropdown-toggle#currenyDropdown(
								href="#",
								data-toggle="dropdown"
							)
								| {{currencyCode}} ({{plans[currencyCode]['symbol']}})

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

				.row(ng-cloak)
					.col-md-12
						.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
							.card
								.card-header
									h2 #{translate("personal")} 
								.circle #{translate("free")} 
								ul.list-unstyled
									li #{translate("one_collaborator")}
									li  
									li  
									li
										br
										a.btn.btn-info(href="/register") #{translate("sign_up_now")}
							.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 #{translate("collabs_per_proj", {collabcount:10})}
									li #{translate("full_doc_history")}
									li #{translate("sync_to_dropbox")}
									li
										br
										a.btn.btn-info(

											ng-href="#{baseUrl}/user/subscription/new?planCode=collaborator{{ ui.view == 'annual' && '-annual' || planQueryString}}&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")}
							.card
								.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
										br
										a.btn.btn-info(
											ng-href="#{baseUrl}/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'")
							.card
								.card-header
									h2 #{translate("personal")}
								.circle #{translate("free")}
								ul.list-unstyled
									li #{translate("one_collaborator")}
									li  
									li  
									li
										br
										a.btn.btn-info(href="/register") #{translate("sign_up_now")}
							.card.highlighted
								.card-header
									h2 #{translate("student")}
								.circle
									span
										| {{plans[currencyCode]['student']['monthly']}}
										span.small /mo
								ul.list-unstyled
									li
										strong #{translate("collabs_per_proj", {collabcount:6})}
									li #{translate("full_doc_history")}
									li #{translate("sync_to_dropbox")}
									li
										br
										a.btn.btn-info(
											ng-href="#{baseUrl}/user/subscription/new?planCode=student{{planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
										) #{translate("start_free_trial")}
							.card
								.card-header
									h2 #{translate("student")} (#{translate("annual")})
								.circle
									span
										| {{plans[currencyCode]['student']['annual']}}
										span.small /yr
								ul.list-unstyled
									li
										strong #{translate("collabs_per_proj", {collabcount:6})}
									li #{translate("full_doc_history")}
									li #{translate("sync_to_dropbox")}
									li
										br
										a.btn.btn-info(
											ng-href="#{baseUrl}/user/subscription/new?planCode=student-annual&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
										) #{translate("buy_now")}

				.row(ng-cloak)
					p.text-centered #{translate("choose_plan_works_for_you", {len:14})}
					
				.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(name='form1', autocomplete='off', enctype='multipart/form-data', method='post', novalidate='', action='https://sharelatex.wufoo.com/forms/z7x3p3/#public', _lpchecked='1')
								.form-group
									label(for='Field9') #{translate("name")}
									input.form-control(name='Field9', type='text', value='', maxlength='255', tabindex='1', onkeyup='')
								
								.form-group
									label(for='Field11') #{translate("email")}
									input.form-control(name='Field11', type='email', spellcheck='false', value='', maxlength='255', tabindex='2')
								
								.form-group
									label(for='Field12') #{translate("university")}
									input.form-control(name='Field12', type='text', value='', maxlength='255', tabindex='3', onkeyup='')
									
								.form-group
									label(for='Field13') #{translate("position")}
									input.form-control(name='Field13', type='text', value='', maxlength='255', tabindex='4', onkeyup='')
								
								.form-group
									input.btn.btn-primary.btn-large(name='saveForm', type='submit', value='Send')
								div(style='display: none;')
									label(for='comment') Do Not Fill This Out
									textarea#comment(name='comment', rows='1', cols='1')
									input#idstamp(type='hidden', name='idstamp', value='xkgLkZnS/AQW71jCS1d0XrrFjq26lJryIPVk2rx0YkU=')


				.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
							h4 #{translate("sync_to_dropbox")}
							p #{translate("access_projects_anywhere")}