overleaf/services/web/app/views/subscriptions/plans-marketing/_mixins.pug

//- Buy Buttons
mixin btn_buy_collaborator(location)
	a.btn.btn-primary(
		data-ol-start-new-subscription='collaborator'
		data-ol-location=location
	)
		span(data-ol-view='monthly') #{translate("start_free_trial")}
		span(hidden data-ol-view='annual') #{translate("buy_now")}
mixin btn_buy_personal(location)
	a.btn.btn-primary(
		data-ol-start-new-subscription='paid-personal'
		data-ol-tracking-plan='personal'
		data-ol-location=location
	)
		span(data-ol-view='monthly') #{translate("start_free_trial")}
		span(hidden data-ol-view='annual') #{translate("buy_now")}
mixin btn_buy_free(location)
	a.btn.btn-primary(
		data-ol-has-custom-href
		href="/register"
		style=(getLoggedInUserId() === null ? "" : "visibility: hidden")
		data-ol-start-new-subscription='free'
		data-ol-location=location
	)
		span.text-capitalize #{translate('get_started_now')}
mixin btn_buy_professional(location)
	a.btn.btn-primary(
		data-ol-start-new-subscription='professional'
		data-ol-location=location
	)
		span(data-ol-view='monthly') #{translate("start_free_trial")}
		span(hidden data-ol-view='annual') #{translate("buy_now")}
mixin btn_buy_student(location, plan)
	if plan == 'annual'
		a.btn.btn-primary(
			data-ol-start-new-subscription='student'
			data-ol-item-view='annual'
			data-ol-tracking-label='student-annual'
			data-ol-location=location
		) #{translate("buy_now")}
	else
		a.btn.btn-primary(
			data-ol-start-new-subscription='student'
			data-ol-item-view='monthly'
			data-ol-tracking-label='student-monthly'
			data-ol-location=location
		) #{translate("start_free_trial")}

//- Cards
mixin card_student_annual(location)
	.best-value
		strong #{translate('best_value')}
	.card-header
		h2 #{translate("student")} (#{translate("annual")})
	h5.tagline #{translate('tagline_student_annual')}
	.circle
		span
			+price_student_annual
	+features_student(location, 'annual')
mixin card_student_monthly(location)
	.card-header
		h2 #{translate("student")}
	h5.tagline #{translate('tagline_student_monthly')}
	.circle
		span
			+price_student_monthly
	+features_student(location, 'monthly')

//- Features Lists, used within cards
mixin features_collaborator(location)
	ul.list-unstyled
		li
			strong #{translate("collabs_per_proj", {collabcount:10})}
		+features_premium
		li
			br
			+btn_buy_collaborator(location)
mixin features_free(location)
	ul.list-unstyled
		li #{translate("one_collaborator")}
		li(class="hidden-xs hidden-sm")  
		li(class="hidden-xs hidden-sm")  
		li(class="hidden-xs hidden-sm")  
		li(class="hidden-xs hidden-sm")  
		li(class="hidden-xs hidden-sm")  
		li(class="hidden-xs hidden-sm")  
		li
			br
			+btn_buy_free(location)
mixin features_personal(location)
	ul.list-unstyled
		li #{translate("one_collaborator")}
		li  
		li
			strong #{translate('premium_features')}
		li #{translate('sync_dropbox_github')}
		li #{translate('full_doc_history')}
		li + #{translate('more').toLowerCase()}
		li(class="hidden-xs hidden-sm")  
		li
			br
			+btn_buy_personal(location)
mixin features_premium
	li  
	li
		strong #{translate('all_premium_features')}
	li #{translate('sync_dropbox_github')}
	li #{translate('full_doc_history')}
	li #{translate('track_changes')}
	li + #{translate('more').toLowerCase()}
mixin features_professional(location)
	ul.list-unstyled
		li
			strong #{translate("unlimited_collabs")}
			+features_premium
		li
			br
			+btn_buy_professional(location)
mixin features_student(location, plan)
	ul.list-unstyled
		li
			strong #{translate("collabs_per_proj", {collabcount:6})}
			+features_premium
			li
				br
				+btn_buy_student(location, plan)

mixin gen_localized_price_for_plan_view(plan, view)
	for currencyCode in Object.keys(settings.localizedPlanPricing)
		span(
			hidden=(currencyCode !== recommendedCurrency)
			data-ol-currencyCode=currencyCode
		) #{settings.localizedPlanPricing[currencyCode][plan][view]}

mixin gen_localized_price_for_plan(plan)
	div(data-ol-view='monthly')
		+gen_localized_price_for_plan_view(plan, 'monthly')
		span.small /mo
	div(hidden data-ol-view='annual')
		+gen_localized_price_for_plan_view(plan, 'annual')
		span.small /yr

//- Prices
mixin price_personal
	+gen_localized_price_for_plan('personal')
mixin price_collaborator
	+gen_localized_price_for_plan('collaborator')
mixin price_professional
	+gen_localized_price_for_plan('professional')
mixin price_student_annual
	+gen_localized_price_for_plan_view('student', 'annual')
	span.small /yr
mixin price_student_monthly
	+gen_localized_price_for_plan_view('student', 'monthly')
	span.small /mo

//- UI Control
mixin currency_dropdown
	.dropdown.currency-dropdown(dropdown)
		a.btn.btn-default.dropdown-toggle(
			href="#",
			data-toggle="dropdown",
			dropdown-toggle
		)
			for currencyCode in Object.keys(settings.localizedPlanPricing)
				span(
					hidden=(currencyCode !== recommendedCurrency)
					data-ol-currencyCode=currencyCode
				) #{currencyCode} (#{settings.localizedPlanPricing[currencyCode]['symbol']})
			span.caret

		ul.dropdown-menu.dropdown-menu-right.text-right(role="menu")
			for currencyCode in Object.keys(settings.localizedPlanPricing)
				li
					a(
						href='#'
						data-ol-currencyCode-switch=currencyCode
					) #{currencyCode} #{settings.localizedPlanPricing[currencyCode]['symbol']}

mixin plan_switch(location)
	ul.nav.nav-pills
		li.active(data-ol-view-tab='monthly')
			a.btn.btn-default-outline(
				href="#"
			) #{translate("monthly")}
		li(data-ol-view-tab='annual')
			a.btn.btn-default-outline(
				href="#"
			) #{translate("annual")}
		li(data-ol-view-tab='student')
			a.btn.btn-default-outline(
				href="#"
			) #{translate("special_price_student")}

mixin allCardsAndControls(controlsRowSpaced, listLocation)
	- var location = listLocation ? 'card_' + listLocation : 'card'
	.row.top-switch(class=(controlsRowSpaced ? "row-spaced" : ""))
		.col-md-6.col-md-offset-3
			+plan_switch('card')
		.col-md-2.text-right
			+currency_dropdown

	.row
		.col-md-10.col-md-offset-1
			.row
				for view in ['monthly', 'annual']
					.card-group.text-centered(data-ol-view=view hidden=(view==='annual'))
						.col-md-4
							.card.card-first
								.card-header
									h2 #{translate("personal")}
								h5.tagline #{translate("tagline_personal")}
								.circle
									+price_personal
								+features_personal(location)
						.col-md-4
							.card.card-highlighted
								.best-value
									strong #{translate('best_value')}
								.card-header
									h2 #{translate("collaborator")}
								h5.tagline #{translate("tagline_collaborator")}
								.circle
									+price_collaborator
								+features_collaborator(location)
						.col-md-4
							.card.card-last
								.card-header
									h2 #{translate("professional")}
								h5.tagline #{translate("tagline_professional")}
								.circle
									+price_professional
								+features_professional(location)

				.card-group.text-centered(hidden data-ol-view='student')
					.col-md-4
						.card.card-first
							.card-header
								h2 #{translate("free")}
							h5.tagline #{translate("tagline_free")}
							.circle #{translate("free")}
							+features_free(location)

					.col-md-4
						.card.card-highlighted
							+card_student_annual(location)

					.col-md-4
						.card.card-last
							+card_student_monthly(location)