Fix interstitial page student plans have wrong button background color (#8489)

GitOrigin-RevId: f9f3ec239c06c9ecc7e608aaf879d69041c0a9a3

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

@@ -4,32 +4,33 @@ mixin plans_v2_table(period, config)
 		- for (var i = 0; i < 4; i++)
 			- var tableHeadKey = Object.keys(config.tableHead)[i]
 			- var tableHeadOptions = Object.values(config.tableHead)[i]
+			- var highlighted = i === config.highlightedColumn.index
 			th(
 				class=(i === config.highlightedColumn.index ? 'plans-v2-table-green-highlighted' : (i === config.highlightedColumn.index - 1 ? 'plans-v2-table-cell-before-highlighted-column' : ''))
 			)
-				if (i === config.highlightedColumn.index)
+				if (highlighted)
 					p.plans-v2-table-green-highlighted-text !{config.highlightedColumn.text[period]}
 				case tableHeadKey
 					when 'individual_free'
-						+table_head_individual_free(period)
+						+table_head_individual_free(highlighted, period)
 					when 'individual_personal'
-						+table_head_individual_personal(period)
+						+table_head_individual_personal(highlighted, period)
 					when 'individual_collaborator'
-						+table_head_individual_collaborator(period)
+						+table_head_individual_collaborator(highlighted, period)
 					when 'individual_professional'
-						+table_head_individual_professional(period)
+						+table_head_individual_professional(highlighted, period)
 					when 'group_collaborator'
-						+table_head_group_collaborator()
+						+table_head_group_collaborator(highlighted)
 					when 'group_professional'
-						+table_head_group_professional()
+						+table_head_group_professional(highlighted)
 					when 'group_organization'
-						+table_head_group_organization()
+						+table_head_group_organization(highlighted)
 					when 'student_free'
-						+table_head_student_free(period)
+						+table_head_student_free(highlighted, period)
 					when 'student_student'
-						+table_head_student_student(period, tableHeadOptions.showExtraContent)
+						+table_head_student_student(highlighted, period, tableHeadOptions.showExtraContent)
 					when 'student_university'
-						+table_head_student_university(period)
+						+table_head_student_university(highlighted, period)
 
 	for featuresPerSection in config.features
 		if featuresPerSection.divider
@@ -95,54 +96,54 @@ mixin table_student(period)
 	table.card.plans-v2-table.plans-v2-table-student
 		+plans_v2_table(period, plansV2Config.student)
 	
-mixin table_head_individual_free(period)
+mixin table_head_individual_free(highlighted, period)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("free")}
 		+table_head_price('free', period)
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_individual_free()
+			+btn_buy_individual_free(highlighted)
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("one_collaborator")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_individual_free()
+			+btn_buy_individual_free(highlighted)
 
-mixin table_head_individual_personal(period)
+mixin table_head_individual_personal(highlighted, period)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("personal")}
 		+table_head_price('personal', period)
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_individual_personal(period)
+			+btn_buy_individual_personal(highlighted, period)
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("one_collaborator")}
 			li #{translate("most_premium_features")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_individual_personal(period)
+			+btn_buy_individual_personal(highlighted, period)
 
-mixin table_head_individual_collaborator(period)
+mixin table_head_individual_collaborator(highlighted, period)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("standard")}
 		+table_head_price('collaborator', period)
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_individual_collaborator(period)
+			+btn_buy_individual_collaborator(highlighted, period)
 		ul.plans-v2-table-th-content-benefit
 			li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
 			li #{translate("all_premium_features")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_individual_collaborator(period)
+			+btn_buy_individual_collaborator(highlighted, period)
 
-mixin table_head_individual_professional(period)
+mixin table_head_individual_professional(highlighted, period)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("professional")}
 		+table_head_price('professional', period)
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_individual_professional(period)
+			+btn_buy_individual_professional(highlighted, period)
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("unlimited_collabs")}
 			li #{translate("all_premium_features")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_individual_professional(period)
+			+btn_buy_individual_professional(highlighted, period)
 
-mixin table_head_group_collaborator()
+mixin table_head_group_collaborator(highlighted)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("group_standard")}
 		.plans-v2-table-price-container
@@ -153,7 +154,7 @@ mixin table_head_group_collaborator()
 			p.plans-v2-table-price-period-label
 				| per user / year
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_group_collaborator()
+			+btn_buy_group_collaborator(highlighted)
 			+additional_link_group('group_collaborator')
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
@@ -161,10 +162,10 @@ mixin table_head_group_collaborator()
 				span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='collaborator') #{initialLocalizedGroupPrice.price.collaborator}
 				span &nbsp;#{translate("total_per_year_lowercase")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_group_collaborator()
+			+btn_buy_group_collaborator(highlighted)
 			+additional_link_group('group_collaborator')
 
-mixin table_head_group_professional()
+mixin table_head_group_professional(highlighted)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("group_professional")}
 		.plans-v2-table-price-container
@@ -175,7 +176,7 @@ mixin table_head_group_professional()
 			p.plans-v2-table-price-period-label
 				| per user / year
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_group_professional()
+			+btn_buy_group_professional(highlighted)
 			+additional_link_group('group_professional')
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("unlimited_collaborators_in_each_project")}
@@ -183,17 +184,17 @@ mixin table_head_group_professional()
 				span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='professional') #{initialLocalizedGroupPrice.price.professional}
 				span &nbsp;#{translate("total_per_year_lowercase")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_group_professional()
+			+btn_buy_group_professional(highlighted)
 			+additional_link_group('group_professional')
 
 
-mixin table_head_group_organization()
+mixin table_head_group_organization(highlighted)
 	.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("organization")}
 		.plans-v2-table-comments-icon
 			i.fa.fa-comments-o
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_group_organization()
+			+btn_buy_group_organization(highlighted)
 			small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("best_choices_companies_universities_non_profits")}
@@ -208,26 +209,26 @@ mixin table_head_group_organization()
 					event-segmentation='{"button": "group_organization-link", "location": "table-header-list", "period": "annual", "plans-page-layout-v2": "new-plans-page"}'
 				) #{translate("also_available_as_on_premises")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_group_organization()
+			+btn_buy_group_organization(highlighted)
 			small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
 
-mixin table_head_student_free(period)
+mixin table_head_student_free(highlighted, period)
 	div.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("free")}
 		+table_head_price('free', period)
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_student_free()
+			+btn_buy_student_free(highlighted)
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("one_collaborator")}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_student_free()
+			+btn_buy_student_free(highlighted)
 
-mixin table_head_student_student(period, showExtraContent)
+mixin table_head_student_student(highlighted, period, showExtraContent)
 	div.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("student")}
 		+table_head_price('student', period)
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_student_student(period)
+			+btn_buy_student_student(highlighted, period)
 		ul.plans-v2-table-th-content-benefit
 			li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
 			li #{translate("all_premium_features")}
@@ -235,18 +236,18 @@ mixin table_head_student_student(period, showExtraContent)
 				li #{translate("for_students_only")}
 
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_student_student(period)
+			+btn_buy_student_student(highlighted, period)
 
-mixin table_head_student_university(period)
+mixin table_head_student_university(highlighted, period)
 	div.plans-v2-table-th-content
 		p.plans-v2-table-th-content-title #{translate("university")}
 		div.plans-v2-table-comments-icon
 			i.fa.fa-comments-o
 		.plans-v2-table-btn-buy-container-mobile
-			+btn_buy_student_university(period)
+			+btn_buy_student_university(highlighted, period)
 		p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
 		.plans-v2-table-btn-buy-container-desktop
-			+btn_buy_student_university(period)
+			+btn_buy_student_university(highlighted, period)
 
 mixin table_head_price(plan, period)
 	div.plans-v2-table-price-container
@@ -324,86 +325,90 @@ mixin group_plans_license_picker()
 				) #{translate("learn_more_lowercase")}
 				span )
 
-mixin btn_buy_individual(subscriptionPlan, period, highlighted) 
-	if (highlighted)
-		a.btn.btn-primary.plans-v2-table-btn-buy(
-			data-ol-start-new-subscription=subscriptionPlan
-			data-ol-item-view=period
-		)
-			if (period === 'monthly')
-				span #{translate("try_for_free")}
-			else 
-				span #{translate("buy_now_no_exclamation_mark")}
-	else
-		a.btn.btn-default.plans-v2-table-btn-buy(
-			data-ol-start-new-subscription=subscriptionPlan
-			data-ol-item-view=period
-		)
-			if (period === 'monthly')
-				span #{translate("try_for_free")}
-			else 
-				span #{translate("buy_now_no_exclamation_mark")}
+mixin btn_buy_individual(highlighted, subscriptionPlan, period) 
+	a.btn.plans-v2-table-btn-buy(
+		data-ol-start-new-subscription=subscriptionPlan
+		data-ol-item-view=period
+		class=(highlighted ? 'btn-primary' : 'btn-default')
+	)
+		if (period === 'monthly')
+			span #{translate("try_for_free")}
+		else 
+			span #{translate("buy_now_no_exclamation_mark")}
 
 mixin btn_buy_individual_free()
 	if (!getSessionUser())
-		a.btn.btn-default.plans-v2-table-btn-buy(href="/register")
+		a.btn.plans-v2-table-btn-buy(
+			href="/register"
+			class=(highlighted ? 'btn-primary' : 'btn-default')
+		)
 			span #{translate("try_for_free")}
 	else
-		a.btn.btn-default.plans-v2-table-btn-buy.invisible(aria-hidden="true")
+		a.btn.plans-v2-table-btn-buy.invisible(
+			aria-hidden="true"
+			class=(highlighted ? 'btn-primary' : 'btn-default')
+		)
 
-mixin btn_buy_individual_personal(period)
-	+btn_buy_individual('paid-personal', period, false)
+mixin btn_buy_individual_personal(highlighted, period)
+	+btn_buy_individual(highlighted, 'paid-personal', period)
 	if (period === 'monthly')
 		+additional_link_buy('paid-personal', period)
 
-mixin btn_buy_individual_collaborator(period)
-	+btn_buy_individual('collaborator', period, true)
+mixin btn_buy_individual_collaborator(highlighted, period)
+	+btn_buy_individual(highlighted, 'collaborator', period)
 	if (period === 'monthly')
 		+additional_link_buy('collaborator', period)
 
-mixin btn_buy_individual_professional(period)
-	+btn_buy_individual('professional', period, false)
+mixin btn_buy_individual_professional(highlighted, period)
+	+btn_buy_individual(highlighted, 'professional', period)
 	if (period === 'monthly')
 		+additional_link_buy('professional', period)
 
-mixin btn_buy_group_collaborator() 
-	a.btn.btn-default.plans-v2-table-btn-buy(
+mixin btn_buy_group_collaborator(highlighted) 
+	a.btn.plans-v2-table-btn-buy(
 		data-ol-start-new-subscription='group_collaborator'
 		data-ol-item-view='annual'
 		data-ol-has-custom-href
+		class=(highlighted ? 'btn-primary' : 'btn-default')
 	)
 		span #{translate("customize")} 
 		span.hidden-mobile #{translate("your_plan_lowercase")}
 
-mixin btn_buy_group_professional() 
-	a.btn.btn-primary.plans-v2-table-btn-buy(
+mixin btn_buy_group_professional(highlighted) 
+	a.btn.plans-v2-table-btn-buy(
 		data-ol-start-new-subscription='group_professional'
 		data-ol-item-view='annual'
 		data-ol-has-custom-href
+		class=(highlighted ? 'btn-primary' : 'btn-default')
 	)
 		span #{translate("customize")} 
 		span.hidden-mobile #{translate("your_plan_lowercase")}
 
-mixin btn_buy_group_organization() 
-	a.btn.btn-default.plans-v2-table-btn-buy(
+mixin btn_buy_group_organization(highlighted) 
+	a.btn.plans-v2-table-btn-buy(
 		data-ol-start-new-subscription='group_organization'
 		data-ol-item-view='annual'
 		data-ol-has-custom-href
 		href='/for/enterprises/sales-contact'
 		target='_blank'
+		class=(highlighted ? 'btn-primary' : 'btn-default')
 	)
 		span #{translate("contact_us_lowercase")}
 
-mixin btn_buy_student_free()
+mixin btn_buy_student_free(highlighted)
 	if (!getSessionUser())
-		a.btn.btn-default.plans-v2-table-btn-buy(href="/register")
+		a.btn.plans-v2-table-btn-buy(
+			href="/register"
+			class=(highlighted ? 'btn-primary' : 'btn-default')
+		)
 			span #{translate("try_for_free")}
 
-mixin btn_buy_student_student(period)
-	a.btn.btn-primary.plans-v2-table-btn-buy(
+mixin btn_buy_student_student(highlighted, period)
+	a.btn.plans-v2-table-btn-buy(
 		data-ol-start-new-subscription='student'
 		data-ol-item-view=period
 		data-ol-location='card'
+		class=(highlighted ? 'btn-primary' : 'btn-default')
 	)
 		if (period === 'monthly')
 			span #{translate("try_for_free")}
@@ -412,14 +417,15 @@ mixin btn_buy_student_student(period)
 	if (period === 'monthly')
 		+additional_link_buy('student', period)
 
-mixin btn_buy_student_university(period)
-	a.btn.btn-default.plans-v2-table-btn-buy(
+mixin btn_buy_student_university(highlighted, period)
+	a.btn.plans-v2-table-btn-buy(
 		href="/for/enterprises/sales-contact"
 		target="_blank"
 		event-tracking="plans-page-click"
 		event-tracking-mb="true"
 		event-tracking-trigger="click"
 		event-segmentation='{"button": "student-university", "location": "table-header-list", "period": "' + period + '", "plans-page-layout-v2": "new-plans-page"}'
+		class=(highlighted ? 'btn-primary' : 'btn-default')
 	)
 		span #{translate("contact_us_lowercase")}