Refactor plans v2 sticky header to use dedicated config instead of hardcode (#8659)

GitOrigin-RevId: 3ea56ad5c6b9b5f6556e97429cf3e67a0b0d56bc

services/web/app/views/subscriptions/interstitial-payment.pug

@@ -25,15 +25,7 @@ block content
 
 					+monthly_annual_switch("paywall-plans-page-toggle", '{}')
 
-					.row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-individual.sticky(data-ol-plans-v2-table-sticky-header='individual')
+					+plans_v2_table_sticky_header(true, interstitialPaymentConfig)
-						.plans-v2-table-sticky-header-item
-							span #{translate("personal")}
-						.plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted
-							span #{translate("standard")}
-						.plans-v2-table-sticky-header-item
-							span #{translate("professional")}
-						.plans-v2-table-sticky-header-item
-							span #{translate("student")}
 
 					.row.plans-v2-table-container(data-ol-plans-v2-table-container='monthly')
 						.col-sm-12

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

@@ -42,7 +42,7 @@ include ./_mixins
 	.col-sm-12
 		+group_plans_license_picker()
 
-+table_sticky_header
++table_sticky_header_all(plansV2Config)
 
 .row.plans-v2-table-container(data-ol-plans-v2-period='monthly')
 	.col-sm-12(data-ol-plans-v2-view='individual')

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

@@ -465,43 +465,43 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
 			event-segmentation=segmentation
 		) #{translate("buy_now_no_exclamation_mark")}
 
-mixin table_sticky_header
+mixin plans_v2_table_sticky_header(withSwitch, config)
-	.row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-individual.sticky(
+	- var tableHeadKeys = Object.keys(config.tableHead)
+	.row.plans-v2-table-sticky-header.sticky(
 		data-ol-plans-v2-table-sticky-header
+		class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch')
+	)
+		- for (var i = 0; i < tableHeadKeys.length; i++)
+			- var tableHeadKey = tableHeadKeys[i]
+			- var translateKey = tableHeadKey.split('_')[1]
+			.plans-v2-table-sticky-header-item(
+				class=(config.highlightedColumn.index === i ? 'plans-v2-table-sticky-header-item-highlighted' : '')
+			)
+				case tableHeadKey
+					when 'individual_collaborator'
+						span #{translate('standard')}
+					when 'group_professional'
+						span #{translate(tableHeadKey)}
+					when 'group_collaborator'
+						span #{translate('group_standard')}
+					default
+						span #{translate(translateKey)}
+
+mixin table_sticky_header_all(plansV2Config)
+	.row.plans-v2-table-sticky-header-container(
 		data-ol-plans-v2-view='individual'
 	)
-		.plans-v2-table-sticky-header-item
+		+plans_v2_table_sticky_header(true, plansV2Config.individual)
-			span #{translate("free")}
+	.row.plans-v2-table-sticky-header-container(
-		.plans-v2-table-sticky-header-item
-			span #{translate("personal")}
-		.plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted
-			span #{translate("standard")}
-		.plans-v2-table-sticky-header-item
-			span #{translate("professional")}
-
-	.row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-group.sticky(
 		hidden
-		data-ol-plans-v2-table-sticky-header
 		data-ol-plans-v2-view='group'
 	)
-		.plans-v2-table-sticky-header-item
+		+plans_v2_table_sticky_header(false, plansV2Config.group)
-			span #{translate("group_standard")}
+	.row.plans-v2-table-sticky-header-container(
-		.plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted
-			span #{translate("group_professional")}
-		.plans-v2-table-sticky-header-item
-			span #{translate("organization")}
-
-	.row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-student.sticky(
 		hidden
-		data-ol-plans-v2-table-sticky-header
 		data-ol-plans-v2-view='student'
 	)
-		.plans-v2-table-sticky-header-item
+		+plans_v2_table_sticky_header(true, plansV2Config.student)
-			span #{translate("free")}
-		.plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted
-			span #{translate("student")}
-		.plans-v2-table-sticky-header-item
-			span #{translate("university")}
 
 mixin monthly_annual_switch(eventTracking, eventSegmentation)
 	.row

services/web/frontend/stylesheets/app/plans-v2.less

@@ -1046,34 +1046,20 @@ p.plans-v2-table-green-highlighted-text {
   }
 }
 
-.plans-v2-table-sticky-header-group,
+.plans-v2-table-sticky-header-container {
-.plans-v2-table-sticky-header-student {
+  height: 100%;
-  .plans-v2-table-sticky-header-item {
+  width: 100%;
-    // has 3 visible column on the table for mobile view
+  position: absolute;
-    width: 33.33%;
-  }
 }
 
-.plans-v2-table-sticky-header-individual {
+.plans-v2-table-sticky-header-without-switch {
-  .plans-v2-table-sticky-header-item {
-    // has 4 visible column on the table for mobile view
-    width: 25%;
-  }
-}
-
-.plans-v2-table-sticky-header-group {
   margin-bottom: -107px;
   margin-top: 67px;
 }
 
-.plans-v2-table-sticky-header-individual,
+.plans-v2-table-sticky-header-with-switch {
-.plans-v2-table-sticky-header-student {
   margin-bottom: -140px;
   margin-top: 100px;
-
-  @media (max-width: @screen-xs-max) {
-    margin-top: 118px;
-  }
 }
 
 .plans-v2-table-sticky-header {
@@ -1097,6 +1083,7 @@ p.plans-v2-table-green-highlighted-text {
 
 .plans-v2-table-sticky-header-item {
   background-color: @white;
+  flex: 1 1 0px;
 
   span {
     margin: 0px @margin-xs;