Change number of users in group plan to have a dynamic value in the new plans page (#8592)

GitOrigin-RevId: 008c0a1120e5b99945f18f0b4eee60bfcb08a331

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

@@ -205,8 +205,8 @@ const groupPlans = [
         info: 'number_of_users_info',
         value: 'str',
         plans: {
-          group_standard: '2 - 50 users',
-          group_professional: '2 - 50 users',
+          group_standard: '2 users',
+          group_professional: '2 users',
           organization: 'Contact sales',
         },
       },

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

@@ -202,8 +202,7 @@ mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEve
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
 			li
-				span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='collaborator') #{initialLocalizedGroupPrice.price.collaborator}
-				span  #{translate("total_per_year_lowercase")}
+				+table_head_group_total_per_year('collaborator')
 		.plans-v2-table-btn-buy-container-desktop
 			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
@@ -224,12 +223,20 @@ mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEve
 		ul.plans-v2-table-th-content-benefit
 			li #{translate("unlimited_collaborators_in_each_project")}
 			li
-				span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='professional') #{initialLocalizedGroupPrice.price.professional}
-				span  #{translate("total_per_year_lowercase")}
+				+table_head_group_total_per_year('professional')
 		.plans-v2-table-btn-buy-container-desktop
 			+btn_buy_group_professional(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
 
+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]}
+	|  
+	for licenseSize in groupPlanModalOptions.sizes
+		span(
+			hidden=(licenseSize !== initialLicenseSize)
+			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)
 	- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
@@ -310,15 +317,22 @@ mixin table_head_price(plan, period)
 				| per month
 
 mixin table_cell(feature, plan)
-	.plans-v2-table-cell-inner-content
+	- var planValue = feature.plans[plan]
+	- var featureName = feature.feature
+
+	.plans-v2-table-cell(
+		data-ol-plans-v2-table-cell-plan=plan
+		data-ol-plans-v2-table-cell-feature=featureName
+	)
 		if (feature.value === 'str')
-			| #{feature.plans[plan]}
-		else if (feature.plans[plan])
-			i.fa.fa-check(aria-hidden="true")
-			span.sr-only #{translate("feature_included")}
-		else
-			span(aria-hidden="true") -
-			span.sr-only #{translate("feature_not_included")}
+			| #{planValue}
+		else if (feature.value === 'bool')
+			if (planValue)
+				i.fa.fa-check(aria-hidden="true")
+				span.sr-only #{translate("feature_included")}
+			else
+				span(aria-hidden="true") -
+				span.sr-only #{translate("feature_not_included")}
 
 mixin group_plans_license_picker()
 	form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form)

services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js

@@ -56,9 +56,11 @@ function hideCurrencyPicker() {
   document.querySelector('[data-ol-group-plan-form-currency]').hidden = true
 }
 
-document
-  .querySelectorAll('[data-ol-group-plan-form] select')
-  .forEach(el => el.addEventListener('change', changePlansV2MainPageGroupData))
+document.querySelectorAll('[data-ol-group-plan-form] select').forEach(el =>
+  el.addEventListener('change', () => {
+    changePlansV2MainPageGroupData()
+  })
+)
 document
   .querySelectorAll('[data-ol-group-plan-form] input')
   .forEach(el => el.addEventListener('change', changePlansV2MainPageGroupData))

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js

@@ -76,6 +76,9 @@ export function updateMainGroupPlanPricing() {
       '[data-ol-plans-v2-license-picker-educational-discount-input]'
     ).checked = false
   }
+
+  changeNumberOfUsersInTableHead()
+  changeNumberOfUsersInFeatureTable()
 }
 
 export function changeGroupPlanModalNumberOfLicenses() {
@@ -100,3 +103,32 @@ export function changeGroupPlanModalEducationalDiscount() {
   groupPlanModalEducationalDiscountEl.checked = educationalDiscountChecked
   updateGroupModalPlanPricing()
 }
+
+export function changeNumberOfUsersInFeatureTable() {
+  document
+    .querySelectorAll(
+      '[data-ol-plans-v2-table-cell-plan^="group"][data-ol-plans-v2-table-cell-feature="number_of_users"]'
+    )
+    .forEach(el => {
+      const licenseSize = document.querySelector(
+        '[data-ol-plans-v2-license-picker-select]'
+      ).value
+
+      el.textContent = `${licenseSize} users`
+    })
+}
+
+export function changeNumberOfUsersInTableHead() {
+  document
+    .querySelectorAll('[data-ol-plans-v2-table-th-group-license-size]')
+    .forEach(el => {
+      const licenseSize = el.getAttribute(
+        'data-ol-plans-v2-table-th-group-license-size'
+      )
+      const currentLicenseSize = document.querySelector(
+        '[data-ol-plans-v2-license-picker-select]'
+      ).value
+
+      el.hidden = licenseSize !== currentLicenseSize
+    })
+}

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

@@ -420,7 +420,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
       td:nth-last-child(2) {
         background-color: @ol-blue-gray-0;
 
-        .plans-v2-table-cell-inner-content {
+        .plans-v2-table-cell {
           border-bottom-right-radius: @plans-v2-table-border-radius;
         }
       }
@@ -466,7 +466,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
         td:nth-last-child(2) {
           background-color: @ol-blue-gray-0;
 
-          .plans-v2-table-cell-inner-content {
+          .plans-v2-table-cell {
             border-bottom-right-radius: @plans-v2-table-border-radius;
           }
         }
@@ -499,7 +499,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
 // This is a workaround.
 // Table student have "Dedicated account manager" as its last feature.
 // That name is long and it overflows to the next line,
-// making the `td` is bigger than the inner `plans-v2-table-cell-inner-content` (inner `div` class of most of the `td`).
+// making the `td` is bigger than the inner `plans-v2-table-cell` (inner `div` class of most of the `td`).
 // Since we can't make all `td` have fixed height
 // (due to different text length that makes the
 // `td` has variable height depending whether the text overflows),
@@ -514,13 +514,13 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
 // example reference: https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row
 .plans-v2-table-student {
   @media (min-width: @screen-md-min) {
-    tr:last-child td:nth-last-child(2) .plans-v2-table-cell-inner-content {
+    tr:last-child td:nth-last-child(2) .plans-v2-table-cell {
       height: 62px;
     }
   }
 
   @media (min-width: @screen-sm-min) {
-    tr:last-child td:nth-last-child(2) .plans-v2-table-cell-inner-content {
+    tr:last-child td:nth-last-child(2) .plans-v2-table-cell {
       height: 56px;
       display: flex;
       align-items: center;
@@ -543,7 +543,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
       td:last-child {
         background-color: @ol-blue-gray-0;
 
-        .plans-v2-table-cell-inner-content {
+        .plans-v2-table-cell {
           border-bottom-right-radius: @plans-v2-table-border-radius;
         }
       }
@@ -581,7 +581,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
           border-bottom-left-radius: 0;
         }
 
-        td:last-child .plans-v2-table-cell-inner-content {
+        td:last-child .plans-v2-table-cell {
           border-bottom-right-radius: 0;
         }
       }
@@ -704,7 +704,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
       background-color: @table-hover-bg;
 
       .plans-v2-table-feature-name,
-      .plans-v2-table-cell-inner-content {
+      .plans-v2-table-cell {
         background-color: @table-hover-bg;
       }
     }
@@ -753,10 +753,10 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
   }
 }
 
-// plans-v2-table-cell-inner-content class only appears for the inner `div` of a `td`
+// plans-v2-table-cell class only appears for the inner `div` of a `td`
 // that doesn't contain divider or feature name
 // (i.e it contains either check mark icon or a dash)
-.plans-v2-table-cell-inner-content {
+.plans-v2-table-cell {
   background-color: @white;
   padding: 6px;
 }

services/web/locales/en.json

@@ -1729,7 +1729,7 @@
   "x_collaborators_per_project": "__collaboratorsCount__ collaborators per project",
   "unlimited_collaborators_in_each_project": "Unlimited collaborators in each project",
   "most_premium_features": "Most premium features",
-  "total_per_year_lowercase": "total per year",
+  "total_per_year_for_x_users": "total per year for __licenseSize__ users",
   "user_management": "User management",
   "user_management_info": "Group plan admins have access to an admin panel where users can be added and removed easily. For site-wide plans, users are automatically upgraded when they register or add their email address to Overleaf (domain-based enrollment or SSO).",
   "usage_metrics": "Usage metrics",