Remove university section from the Student Plans in the new plans page

GitOrigin-RevId: 00917ab8cd5190721036baab9ea8ab5fca9a3665

services/web/app/src/Features/Subscription/plansV2Config.js

@@ -36,12 +36,16 @@ const config = {
     additionalEventSegmentation: { 'plan-page-layout-v2': 'new-plans-page' },
   },
   student: {
+    baseColspan: 2,
+    maxColumn: 3,
     tableHead: {
-      student_free: {},
+      student_free: {
+        colspan: 3,
+      },
       student_student: {
         showExtraContent: false,
+        colspan: 3,
       },
-      student_university: {},
     },
     features: plansV2Features.student,
     highlightedColumn: {

services/web/app/src/Features/Subscription/plansV2Features.js

@@ -466,7 +466,6 @@ const studentPlans = [
         plans: {
           free: '1 user',
           student: '1 user',
-          university: 'Multiple users',
         },
       },
       {
@@ -476,7 +475,6 @@ const studentPlans = [
         plans: {
           free: 'You + 1',
           student: 'You + 6',
-          university: 'Project author + 10 or unlimited',
         },
       },
     ],
@@ -493,7 +491,6 @@ const studentPlans = [
         plans: {
           free: '1 minute',
           student: '4 minutes',
-          university: '4 minutes',
         },
       },
       {
@@ -503,7 +500,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -513,7 +509,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -523,7 +518,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -533,7 +527,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
     ],
@@ -550,7 +543,6 @@ const studentPlans = [
         plans: {
           free: true,
           student: true,
-          university: true,
         },
       },
       {
@@ -560,7 +552,6 @@ const studentPlans = [
         plans: {
           free: true,
           student: true,
-          university: true,
         },
       },
       {
@@ -570,7 +561,6 @@ const studentPlans = [
         plans: {
           free: true,
           student: true,
-          university: true,
         },
       },
       {
@@ -580,7 +570,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -590,7 +579,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -600,7 +588,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -610,7 +597,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -620,7 +606,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
       {
@@ -630,7 +615,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: true,
-          university: true,
         },
       },
     ],
@@ -647,7 +631,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
       {
@@ -657,7 +640,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
       {
@@ -667,7 +649,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
       {
@@ -677,7 +658,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
       {
@@ -687,7 +667,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
       {
@@ -697,7 +676,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
       {
@@ -707,7 +685,6 @@ const studentPlans = [
         plans: {
           free: false,
           student: false,
-          university: true,
         },
       },
     ],

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

@@ -1,14 +1,18 @@
 mixin plans_v2_table(period, config)
+	- var baseColspan = config.baseColspan || 1
+	- var maxColumn = config.maxColumn || 4
 	tr
-		th
-		- for (var i = 0; i < 4; i++)
+		th(colspan=baseColspan)
+		- for (var i = 0; i < maxColumn; i++)
 			- var tableHeadKey = Object.keys(config.tableHead)[i]
-			- var tableHeadOptions = Object.values(config.tableHead)[i]
+			- var tableHeadOptions = Object.values(config.tableHead)[i] || {}
+			- var colspan = tableHeadOptions.colspan || baseColspan
 			- var highlighted = i === config.highlightedColumn.index
 			- var eventTrackingKey = config.eventTrackingKey
 			- var additionalEventSegmentation = config.additionalEventSegmentation || {}
 			th(
 				class=(i === config.highlightedColumn.index ? 'plans-v2-table-green-highlighted' : (i === config.highlightedColumn.index - 1 ? 'plans-v2-table-cell-before-highlighted-column' : ''))
+				colspan=colspan
 			)
 				if (highlighted)
 					p.plans-v2-table-green-highlighted-text !{config.highlightedColumn.text[period]}
@@ -35,9 +39,13 @@ mixin plans_v2_table(period, config)
 						+table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 	for featuresPerSection in config.features
+		- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
 		if featuresPerSection.divider
 			tr.plans-v2-table-divider
-				td(colspan=Object.keys(config.tableHead).length + 1)
+				td(
+					colspan=dividerColspan
+					class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '')
+				)
 					div
 						b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)}
 						//- will only appear on screen width >= 768px (using CSS)
@@ -59,7 +67,13 @@ mixin plans_v2_table(period, config)
 			tr(
 				class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '')
 			)
-				td(event-tracking="plans-page-table" event-tracking-trigger="hover" event-tracking-ga="subscription-funnel" event-tracking-label=`${feature.feature}`)
+				td(
+					event-tracking="plans-page-table"
+					event-tracking-trigger="hover"
+					event-tracking-ga="subscription-funnel"
+					event-tracking-label=`${feature.feature}`
+					colspan=baseColspan
+				)
 					.plans-v2-table-feature-name
 						if feature.info
 							span #{translate(feature.feature)}
@@ -81,8 +95,11 @@ mixin plans_v2_table(period, config)
 						else
 							| #{translate(feature.feature)}
 				for plan, planIndex in Object.keys(feature.plans)
+					- var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {}
+					- var colspan = tableHeadOptions.colspan || baseColspan
 					td(
 						class=(planIndex === config.highlightedColumn.index ? 'plans-v2-table-green-highlighted' : (planIndex === config.highlightedColumn.index - 1 ? 'plans-v2-table-cell-before-highlighted-column' : ''))
+						colspan=colspan
 					)
 						+table_cell(feature, plan)
 

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

@@ -601,7 +601,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
     background-clip: padding-box; /* needed for firefox when there is bg color */
     text-align: center;
 
-    &:not(.plans-v2-table-cell-before-highlighted-column):not(.plans-v2-table-green-highlighted) {
+    &:not(.plans-v2-table-cell-before-highlighted-column):not(.plans-v2-table-green-highlighted):not(.plans-v2-table-divider-highlighted) {
       border-right: 1px solid @ol-blue-gray-0;
 
       @media (max-width: @screen-xs-max) {
@@ -638,7 +638,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
       text-align: left;
     }
 
-    &:last-child {
+    &:last-child:not(.plans-v2-table-green-highlighted):not(.plans-v2-table-divider-highlighted) {
       border-right: 0;
     }
   }
@@ -966,6 +966,10 @@ tr.plans-v2-table-divider {
     }
   }
 
+  .plans-v2-table-divider-highlighted {
+    border-right: 2px solid @ol-green;
+  }
+
   @media (max-width: @screen-xs-max) {
     // need the colspan attribute selector to increase specificity to override more specific css rule on another selector
     td[colspan] {
@@ -1000,6 +1004,10 @@ tr.plans-v2-table-divider {
         }
       }
     }
+
+    .plans-v2-table-divider-highlighted {
+      border-right: none;
+    }
   }
 }