Merge pull request #19395 from overleaf/jel-light-touch-restructure-mixins

[web] Restructure column header mixins for light touch design

GitOrigin-RevId: b8f6d9084b7a0190a0ba421d1e3ba819358c7fa2

services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug

@@ -59,8 +59,6 @@ mixin plans_table(period, config)
 					- var ariaLabel = translate("free")
 				when 'student_student'
 					- var ariaLabel = translate("student")
-				when 'student_university'
-					- var ariaLabel = translate("university")
 				default
 					- var ariaLabel = undefined
 			th(
@@ -88,8 +86,6 @@ mixin plans_table(period, config)
 							+table_head_student_free(highlighted, period)
 						when 'student_student'
 							+table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent)
-						when 'student_university'
-							+table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 	for featuresPerSection in config.features
 		- var dividerColspan = Object.values(config.tableHead).length + 1
@@ -168,16 +164,28 @@ mixin table_student(period)
 	table.card.plans-table.plans-table-student
 		+plans_table(period, plansConfig.student)
 
+//- free plan mixins
+
+mixin table_short_feature_list_free()
+	ul.plans-table-th-content-benefit
+		li #{translate("one_collaborator")}
+
 mixin table_head_individual_free(highlighted, period)
 	.plans-table-th-content
 		p.plans-table-th-content-title #{translate("free")}
 		+table_head_price('free', period)
 		.plans-table-btn-buy-container-mobile
-			+btn_buy_individual_free(highlighted)
-		ul.plans-table-th-content-benefit
-			li #{translate("one_collaborator")}
+			+btn_buy_individual_free()
+		+table_short_feature_list_free()
 		.plans-table-btn-buy-container-desktop
-			+btn_buy_individual_free(highlighted)
+			+btn_buy_individual_free()
+
+//- individual plan mixins
+
+mixin table_short_feature_list_collaborator()
+	ul.plans-table-th-content-benefit
+		li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
+		li #{translate("all_premium_features")}
 
 mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 	.plans-table-th-content
@@ -185,66 +193,87 @@ mixin table_head_individual_collaborator(highlighted, eventTrackingKey, addition
 		+table_head_price('collaborator', period)
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		ul.plans-table-th-content-benefit
-			li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
-			li #{translate("all_premium_features")}
+		+table_short_feature_list_collaborator()
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
+//- professional plan mixins
+
+mixin table_short_feature_list_professional()
+	ul.plans-table-th-content-benefit
+		li !{translate("unlimited_collabs_rt",{},["b"])}
+		li #{translate("all_premium_features")}
+
 mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 	.plans-table-th-content
 		p.plans-table-th-content-title #{translate("professional")}
 		+table_head_price('professional', period)
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		ul.plans-table-th-content-benefit
-			li !{translate("unlimited_collabs_rt",{},["b"])}
-			li #{translate("all_premium_features")}
+		+table_short_feature_list_professional()
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
+//- group_collaborator plan mixins
+
+mixin table_short_feature_list_group_collaborator()
+	ul.plans-table-th-content-benefit
+		li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
+		li
+			+table_head_group_total_per_year('collaborator')
+
+mixin table_price_group_collaborator()
+	.plans-v2-table-price-container
+		strike.plans-v2-table-price-before-discount
+			+gen_localized_price_for_plan_view('collaborator', 'annual')
+		p.plans-v2-table-price
+			span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
+		p.plans-v2-table-price-period-label
+			| #{translate('per_user_year')}
+
 mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
 	.plans-table-th-content
 		p.plans-table-th-content-title #{translate("group_standard")}
-		.plans-v2-table-price-container
-			strike.plans-v2-table-price-before-discount
-				+gen_localized_price_for_plan_view('collaborator', 'annual')
-			p.plans-v2-table-price
-				span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
-			p.plans-v2-table-price-period-label
-				| #{translate('per_user_year')}
+		+table_price_group_collaborator()
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
-		ul.plans-table-th-content-benefit
-			li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
-			li
-				+table_head_group_total_per_year('collaborator')
+		+table_short_feature_list_group_collaborator()
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
 
+//- group_professional plan mixins
+
+mixin table_short_feature_list_group_professional()
+	ul.plans-table-th-content-benefit
+		li #{translate("unlimited_collaborators_in_each_project")}
+		li
+			+table_head_group_total_per_year('professional')
+
+mixin table_price_group_professional()
+	.plans-v2-table-price-container
+		strike.plans-v2-table-price-before-discount
+			+gen_localized_price_for_plan_view('professional', 'annual')
+		p.plans-v2-table-price
+			span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
+		p.plans-v2-table-price-period-label
+			| #{translate('per_user_year')}
+
 mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
 	.plans-table-th-content
 		p.plans-table-th-content-title #{translate("group_professional")}
-		.plans-v2-table-price-container
-			strike.plans-v2-table-price-before-discount
-				+gen_localized_price_for_plan_view('professional', 'annual')
-			p.plans-v2-table-price
-				span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
-			p.plans-v2-table-price-period-label
-				| #{translate('per_user_year')}
+		+table_price_group_professional()
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_group_professional(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
-		ul.plans-table-th-content-benefit
-			li #{translate("unlimited_collaborators_in_each_project")}
-			li
-				+table_head_group_total_per_year('professional')
+		+table_short_feature_list_group_professional()
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_group_professional(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
 
+//- group mixins
+
 mixin table_head_group_total_per_year(groupPlan)
 	- var initialLicenseSize = '2'
 	span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
@@ -255,8 +284,22 @@ mixin table_head_group_total_per_year(groupPlan)
 			data-ol-plans-v2-table-th-group-license-size=licenseSize
 		) !{translate("total_per_year_for_x_users", {licenseSize})}
 
-mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
+mixin table_short_feature_list_group_organization(additionalEventSegmentation)
 	- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
+	ul.plans-table-th-content-benefit
+		li #{translate("best_choices_companies_universities_non_profits")}
+		li #{translate("for_groups_or_site_wide")}
+		li
+			a(
+				target="_blank"
+				href="/for/contact-sales"
+				event-tracking="plans-page-click"
+				event-tracking-mb="true"
+				event-tracking-trigger="click"
+				event-segmentation=segmentation
+			) #{translate("also_available_as_on_premises")}
+
+mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
 	.plans-table-th-content
 		p.plans-table-th-content-title #{translate("organization")}
 		.plans-table-comments-icon
@@ -264,59 +307,97 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_group_organization(highlighted, eventTrackingKey)
 			small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
-		ul.plans-table-th-content-benefit
-			li #{translate("best_choices_companies_universities_non_profits")}
-			li #{translate("for_groups_or_site_wide")}
-			li
-				a(
-					target="_blank"
-					href="/for/contact-sales"
-					event-tracking="plans-page-click"
-					event-tracking-mb="true"
-					event-tracking-trigger="click"
-					event-segmentation=segmentation
-				) #{translate("also_available_as_on_premises")}
+		+table_short_feature_list_group_organization(additionalEventSegmentation)
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_group_organization(highlighted, eventTrackingKey)
 			small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
 
+
+mixin group_plans_license_picker()
+	form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
+		.plans-v2-license-picker-select-container
+			span #{translate("number_of_users_with_colon")}
+			select.plans-v2-license-picker-select(
+				name="plans-v2-license-picker-select"
+				id="plans-v2-license-picker-select"
+				autocomplete="off"
+				data-ol-plans-v2-license-picker-select
+				event-tracking="plans-page-group-size"
+				event-tracking-mb="true"
+				event-tracking-trigger="click"
+				event-tracking-element="select"
+			)
+				option(value="2") 2
+				option(value="3") 3
+				option(value="4") 4
+				option(value="5") 5
+				option(value="10") 10
+				option(value="20") 20
+				option(value="50") 50
+		.plans-v2-license-picker-educational-discount
+			label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label)
+				input.plans-v2-license-picker-educational-discount-checkbox(
+					type="checkbox"
+					id="license-picker-educational-discount"
+					autocomplete="off"
+					data-ol-plans-v2-license-picker-educational-discount-input
+					event-tracking="plans-page-edu-discount"
+					event-tracking-mb="true"
+					event-tracking-trigger="click"
+					event-tracking-element="checkbox"
+				)
+				span #{translate("apply_educational_discount")}
+			//- will only appear on screen width >= 768px (using CSS)
+			i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon(
+				data-toggle="tooltip"
+				title=translate("apply_educational_discount_info"),
+				data-placement="bottom"
+			)
+			//- will only appear on screen width < 768px (using CSS)
+			span.plans-v2-license-picker-educational-discount-learn-more-container
+				span (
+				span.plans-v2-license-picker-educational-discount-learn-more-text(
+					data-toggle="tooltip"
+					title=translate("apply_educational_discount_info"),
+					data-placement="bottom"
+				) #{translate("learn_more_lowercase")}
+				span )
+			span.sr-only #{translate("apply_educational_discount_info")}
+
+//- student free plan mixins
+
 mixin table_head_student_free(highlighted, period)
 	div.plans-table-th-content
 		p.plans-table-th-content-title #{translate("free")}
 		+table_head_price('free', period)
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_student_free(highlighted)
-		ul.plans-table-th-content-benefit
-			li #{translate("one_collaborator")}
+		+table_short_feature_list_free()
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_student_free(highlighted)
 
+//- student plan mixins
+
+mixin table_short_feature_list_student_student(showExtraContent)
+	ul.plans-table-th-content-benefit
+		li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
+		li #{translate("all_premium_features")}
+		if showExtraContent
+			li 
+				b !{translate("for_students_only")}
+
 mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent)
 	div.plans-table-th-content
 		p.plans-table-th-content-title #{translate("student")}
 		+table_head_price('student', period)
 		.plans-table-btn-buy-container-mobile
 			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		ul.plans-table-th-content-benefit
-			li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
-			li #{translate("all_premium_features")}
-			if showExtraContent
-				li 
-					b !{translate("for_students_only")}
+		+table_short_feature_list_student_student(showExtraContent)
 
 		.plans-table-btn-buy-container-desktop
 			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
-mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-	div.plans-table-th-content
-		p.plans-table-th-content-title #{translate("university")}
-		div.plans-table-comments-icon
-			i.fa.fa-comments-o
-		.plans-table-btn-buy-container-mobile
-			+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		p.plans-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
-		.plans-table-btn-buy-container-desktop
-			+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
+//- all plans mixins
 
 mixin table_head_price(plan, period)
 	div.plans-v2-table-price-container
@@ -350,56 +431,7 @@ mixin table_cell(feature, plan)
 					span(aria-hidden="true") -
 					span.sr-only #{translate("feature_not_included")}
 
-mixin group_plans_license_picker()
-	form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
-		.plans-v2-license-picker-select-container
-			span #{translate("number_of_users_with_colon")}
-			select.plans-v2-license-picker-select(
-				name="plans-v2-license-picker-select"
-				id="plans-v2-license-picker-select"
-				autocomplete="off"
-				data-ol-plans-v2-license-picker-select
-				event-tracking="plans-page-group-size"
-				event-tracking-mb="true"
-				event-tracking-trigger="click"
-				event-tracking-element="select"
-			)
-				option(value="2") 2
-				option(value="3") 3
-				option(value="4") 4
-				option(value="5") 5
-				option(value="10") 10
-				option(value="20") 20
-				option(value="50") 50
-		.plans-v2-license-picker-educational-discount
-			label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label)
-				input.plans-v2-license-picker-educational-discount-checkbox(
-					type="checkbox"
-					id="license-picker-educational-discount"
-					autocomplete="off"
-					data-ol-plans-v2-license-picker-educational-discount-input
-					event-tracking="plans-page-edu-discount"
-					event-tracking-mb="true"
-					event-tracking-trigger="click"
-					event-tracking-element="checkbox"
-				)
-				span #{translate("apply_educational_discount")}
-			//- will only appear on screen width >= 768px (using CSS)
-			i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon(
-				data-toggle="tooltip"
-				title=translate("apply_educational_discount_info"),
-				data-placement="bottom"
-			)
-			//- will only appear on screen width < 768px (using CSS)
-			span.plans-v2-license-picker-educational-discount-learn-more-container
-				span (
-				span.plans-v2-license-picker-educational-discount-learn-more-text(
-					data-toggle="tooltip"
-					title=translate("apply_educational_discount_info"),
-					data-placement="bottom"
-				) #{translate("learn_more_lowercase")}
-				span )
-			span.sr-only #{translate("apply_educational_discount_info")}
+//- CTA mixins
 
 mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period) 
 	a.btn.plans-v2-table-btn-buy(
@@ -496,19 +528,6 @@ mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegm
 	if (period === 'monthly')
 		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period)
 
-mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-	- var segmentation = JSON.stringify(Object.assign({}, {button: 'student-university', location: 'table-header-list', period}, additionalEventSegmentation))
-	a.btn.plans-v2-table-btn-buy(
-		href="/for/contact-sales"
-		target="_blank"
-		event-tracking=eventTrackingKey
-		event-tracking-mb="true"
-		event-tracking-trigger="click"
-		event-segmentation=segmentation
-		class=(highlighted ? 'btn-primary' : 'btn-default')
-	)
-		span #{translate("contact_us_lowercase")}
-
 mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
 	- var buttonSegmentation = plan + '-link'
 	- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
@@ -539,6 +558,8 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
 			event-segmentation=segmentation
 		) #{translate("buy_now_no_exclamation_mark")}
 
+//- table header and control mixins
+
 mixin plans_v2_table_sticky_header(withSwitch, config)
 	- var tableHeadKeys = Object.keys(config.tableHead)
 	.row.plans-table-sticky-header.sticky(