[web] New Plans Page for A/B Test (#7330)

GitOrigin-RevId: 4e4629583c6e86bd2bc6165d123224734c133df7

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

@@ -9,6 +9,7 @@ const logger = require('@overleaf/logger')
 const GeoIpLookup = require('../../infrastructure/GeoIpLookup')
 const FeaturesUpdater = require('./FeaturesUpdater')
 const planFeatures = require('./planFeatures')
+const planFeaturesV2 = require('./planFeaturesV2')
 const GroupPlansData = require('./GroupPlansData')
 const V1SubscriptionManager = require('./V1SubscriptionManager')
 const Errors = require('../Errors/Errors')
@@ -57,6 +58,17 @@ async function plansPage(req, res) {
 
   AnalyticsManager.recordEventForSession(req.session, 'plans-page-view')
 
+  const newPlansPageAssignmentV2 =
+    await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'plans-page-layout-v2'
+    )
+
+  const newPlansPageVariantV2 =
+    newPlansPageAssignmentV2 &&
+    newPlansPageAssignmentV2.variant === 'new-plans-page'
+
   const standardPlanNameAssignment =
     await SplitTestHandler.promises.getAssignment(
       req,
@@ -68,13 +80,17 @@ async function plansPage(req, res) {
     standardPlanNameAssignment &&
     standardPlanNameAssignment.variant === 'new-plan-name'
 
-  res.render('subscriptions/plans-marketing', {
+  const template = newPlansPageVariantV2
+    ? 'subscriptions/plans-marketing-v2'
+    : 'subscriptions/plans-marketing'
+
+  res.render(template, {
     title: 'plans_and_pricing',
     plans,
     itm_content: req.query && req.query.itm_content,
     recomendedCurrency: recommendedCurrency,
     recommendedCurrency,
-    planFeatures,
+    planFeatures: newPlansPageVariantV2 ? planFeaturesV2 : planFeatures,
     groupPlans: GroupPlansData,
     groupPlanModalOptions,
     groupPlanModalDefaults,

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

@@ -0,0 +1,720 @@
+const individualPlans = [
+  {
+    divider: false,
+    items: [
+      {
+        feature: 'number_of_users',
+        info: 'number_of_users_info',
+        value: 'str',
+        plans: {
+          free: '1 users',
+          personal: '1 users',
+          collaborator: '1 users',
+          professional: '1 users',
+        },
+      },
+      {
+        feature: 'max_collab_per_project',
+        info: 'max_collab_per_project_info',
+        value: 'str',
+        plans: {
+          free: 'You + 1',
+          personal: 'You + 1',
+          collaborator: 'You + 10',
+          professional: 'Unlimited',
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'you_and_collaborators_get_access_to',
+    dividerInfo: 'you_and_collaborators_get_access_to_info',
+    items: [
+      {
+        feature: 'compile_timeout_short',
+        info: 'compile_timeout_short_info',
+        value: 'str',
+        plans: {
+          free: '1 minute',
+          personal: '4 minutes',
+          collaborator: '4 minutes',
+          professional: '4 minutes',
+        },
+      },
+      {
+        feature: 'realtime_track_changes',
+        info: 'realtime_track_changes_info_v2',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: false,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'full_doc_history',
+        info: 'full_doc_history_info_v2',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'reference_search',
+        info: 'reference_search_info_v2',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'git_integration_lowercase',
+        info: 'git_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'you_get_access_to',
+    dividerInfo: 'you_get_access_to_info',
+    items: [
+      {
+        feature: 'powerful_latex_editor_and_realtime_collaboration',
+        info: 'powerful_latex_editor_and_realtime_collaboration_info',
+        value: 'bool',
+        plans: {
+          free: true,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'unlimited_projects',
+        info: 'unlimited_projects_info',
+        value: 'bool',
+        plans: {
+          free: true,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'thousands_templates',
+        info: 'hundreds_templates_info',
+        value: 'bool',
+        plans: {
+          free: true,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'symbol_palette',
+        info: 'symbol_palette_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'github_only_integration_lowercase',
+        info: 'github_only_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'dropbox_integration_lowercase',
+        info: 'dropbox_integration_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'mendeley_integration_lowercase',
+        info: 'mendeley_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'zotero_integration_lowercase',
+        info: 'zotero_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+      {
+        feature: 'priority_support',
+        info: 'priority_support_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          personal: true,
+          collaborator: true,
+          professional: true,
+        },
+      },
+    ],
+  },
+]
+
+const groupPlans = [
+  {
+    divider: false,
+    items: [
+      {
+        feature: 'number_of_users',
+        info: 'number_of_users_info',
+        value: 'str',
+        plans: {
+          group_standard: '2 - 50 users',
+          group_professional: '2 - 50 users',
+          organization: 'Contact sales',
+        },
+      },
+      {
+        feature: 'max_collab_per_project',
+        info: 'max_collab_per_project_info',
+        value: 'str',
+        plans: {
+          group_standard: 'Project author + 10',
+          group_professional: 'Unlimited',
+          organization: 'Unlimited',
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'group_admins_get_access_to',
+    dividerInfo: 'group_admins_get_access_to_info',
+    items: [
+      {
+        feature: 'user_management',
+        info: 'user_management_info',
+        value: 'str',
+        plans: {
+          group_standard: 'admin panel',
+          group_professional: 'admin panel',
+          organization: 'automatic user registration',
+        },
+      },
+      {
+        feature: 'usage_metrics',
+        info: 'usage_metrics_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'sso_integration',
+        info: 'sso_integration_info',
+        value: 'bool',
+        plans: {
+          group_standard: false,
+          group_professional: false,
+          organization: true,
+        },
+      },
+      {
+        feature: 'sitewide_option_available',
+        info: 'sitewide_option_available_info',
+        value: 'bool',
+        plans: {
+          group_standard: false,
+          group_professional: false,
+          organization: true,
+        },
+      },
+      {
+        feature: 'custom_resource_portal',
+        info: 'custom_resource_portal_info',
+        value: 'bool',
+        plans: {
+          group_standard: false,
+          group_professional: false,
+          organization: true,
+        },
+      },
+      {
+        feature: 'personalised_onboarding',
+        info: 'personalised_onboarding_info',
+        value: 'bool',
+        plans: {
+          group_standard: false,
+          group_professional: false,
+          organization: true,
+        },
+      },
+      {
+        feature: 'dedicated_account_manager',
+        info: 'dedicated_account_manager_info',
+        value: 'bool',
+        plans: {
+          group_standard: false,
+          group_professional: false,
+          organization: true,
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'group_members_and_collaborators_get_access_to',
+    dividerInfo: 'group_members_and_collaborators_get_access_to_info',
+    items: [
+      {
+        feature: 'compile_timeout_short',
+        info: 'compile_timeout_short_info',
+        value: 'str',
+        plans: {
+          group_standard: '4 minutes',
+          group_professional: '4 minutes',
+          organization: '4 minutes',
+        },
+      },
+      {
+        feature: 'realtime_track_changes',
+        info: 'realtime_track_changes_info_v2',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'full_doc_history',
+        info: 'full_doc_history_info_v2',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'reference_search',
+        info: 'reference_search_info_v2',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'git_integration_lowercase',
+        info: 'git_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'group_members_get_access_to',
+    dividerInfo: 'group_members_get_access_to_info',
+    items: [
+      {
+        feature: 'powerful_latex_editor_and_realtime_collaboration',
+        info: 'powerful_latex_editor_and_realtime_collaboration_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'unlimited_projects',
+        info: 'unlimited_projects_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'thousands_templates',
+        info: 'hundreds_templates_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'symbol_palette',
+        info: 'symbol_palette_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'github_only_integration_lowercase',
+        info: 'github_only_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'dropbox_integration_lowercase',
+        info: 'dropbox_integration_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'mendeley_integration_lowercase',
+        info: 'mendeley_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'zotero_integration_lowercase',
+        info: 'zotero_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+      {
+        feature: 'priority_support',
+        info: 'priority_support_info',
+        value: 'bool',
+        plans: {
+          group_standard: true,
+          group_professional: true,
+          organization: true,
+        },
+      },
+    ],
+  },
+]
+
+const studentPlans = [
+  {
+    divider: false,
+    items: [
+      {
+        feature: 'number_of_users',
+        info: 'number_of_users_info',
+        value: 'str',
+        plans: {
+          free: '1 users',
+          student: '1 users',
+          university: 'Multiple users',
+        },
+      },
+      {
+        feature: 'max_collab_per_project',
+        info: 'max_collab_per_project_info',
+        value: 'str',
+        plans: {
+          free: 'You + 1',
+          student: 'You + 6',
+          university: 'Project author + 10 or unlimited',
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'you_and_collaborators_get_access_to',
+    dividerInfo: 'you_and_collaborators_get_access_to_info',
+    items: [
+      {
+        feature: 'compile_timeout_short',
+        info: 'compile_timeout_short_info',
+        value: 'str',
+        plans: {
+          free: '1 minute',
+          student: '4 minutes',
+          university: '4 minutes',
+        },
+      },
+      {
+        feature: 'realtime_track_changes',
+        info: 'realtime_track_changes_info_v2',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'full_doc_history',
+        info: 'full_doc_history_info_v2',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'reference_search',
+        info: 'reference_search_info_v2',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'git_integration_lowercase',
+        info: 'git_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'you_get_access_to',
+    dividerInfo: 'you_get_access_to_info',
+    items: [
+      {
+        feature: 'powerful_latex_editor_and_realtime_collaboration',
+        info: 'powerful_latex_editor_and_realtime_collaboration_info',
+        value: 'bool',
+        plans: {
+          free: true,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'unlimited_projects',
+        info: 'unlimited_projects_info',
+        value: 'bool',
+        plans: {
+          free: true,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'thousands_templates',
+        info: 'thousands_templates_info',
+        value: 'bool',
+        plans: {
+          free: true,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'symbol_palette',
+        info: 'symbol_palette_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'github_only_integration_lowercase',
+        info: 'github_only_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'dropbox_integration_lowercase',
+        info: 'dropbox_integration_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'mendeley_integration_lowercase',
+        info: 'mendeley_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'zotero_integration_lowercase',
+        info: 'zotero_integration_lowercase_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+      {
+        feature: 'priority_support',
+        info: 'priority_support_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: true,
+          university: true,
+        },
+      },
+    ],
+  },
+  {
+    divider: true,
+    dividerLabel: 'group_admins_get_access_to',
+    dividerInfo: 'group_admins_get_access_to_info',
+    items: [
+      {
+        feature: 'user_management',
+        info: 'user_management_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+      {
+        feature: 'usage_metrics',
+        info: 'usage_metrics_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+      {
+        feature: 'sso_integration',
+        info: 'sso_integration_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+      {
+        feature: 'sitewide_option_available',
+        info: 'sitewide_option_available_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+      {
+        feature: 'custom_resource_portal',
+        info: 'custom_resource_portal_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+      {
+        feature: 'personalised_onboarding',
+        info: 'personalised_onboarding_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+      {
+        feature: 'dedicated_account_manager',
+        info: 'dedicated_account_manager_info',
+        value: 'bool',
+        plans: {
+          free: false,
+          student: false,
+          university: true,
+        },
+      },
+    ],
+  },
+]
+module.exports = {
+  individual: individualPlans,
+  group: groupPlans,
+  student: studentPlans,
+}

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

@@ -0,0 +1,58 @@
+extends ../layout-marketing
+
+include ./plans-marketing/_mixins
+include ./plans-marketing/_tables
+
+block vars
+	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
+
+block append meta
+	meta(name="ol-recommendedCurrency" content=recommendedCurrency)
+	meta(name="ol-groupPlans" data-type="json" content=groupPlans)
+	meta(name="ol-currencySymbols" data-type="json" content=groupPlanModalOptions.currencySymbols)
+	meta(name="ol-itm_content" content=itm_content)
+
+block content
+	main.content.content-alt#main-content
+		.content-page
+			.plans
+				.container(ng-cloak)
+					.row
+						.col-md-12
+							.page-header.centered.plans-header.text-centered.top-page-header
+								h1.text-capitalize(ng-non-bindable) #{translate('choose_your_plan')}
+
+					include ./plans-marketing/v2/_cards_controls_tables
+					.row.row-spaced-large.text-centered
+						.col-xs-12
+							p.text-centered #{translate("subject_to_additional_vat")}
+							i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true")  
+							span.sr-only Mastercard accepted
+							i.fa.fa-cc-visa.fa-2x(aria-hidden="true")  
+							span.sr-only Visa accepted
+							i.fa.fa-cc-amex.fa-2x(aria-hidden="true")  
+							span.sr-only Amex accepted
+							i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")  
+							span.sr-only Paypal accepted
+
+					include ./plans-marketing/_quotes
+
+					include ./plans-marketing/v2/_faq
+
+					#bottom-cards.row.row-spaced(style="display: none;")
+						.col-sm-12
+							+allCardsAndControls(true, 'bottom')
+
+					.row.row-spaced-large
+						.col-md-12
+							.plans-header.plans-subheader.text-centered
+								hr
+								h2.header-with-btn #{translate('still_have_questions')}
+								button.btn.plans-v2-btn-header.text-capitalize(
+									data-ol-open-contact-form-modal="general"
+								) #{translate('contact_us')}
+
+					.row.row-spaced
+
+	include ./plans-marketing/_group_plan_modal
+	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug

@@ -38,7 +38,13 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
 										| Plan
 									for plan_code in groupPlanModalOptions.plan_codes
 										label.group-plan-option
-											input(type="radio" name="plan_code" checked=(plan_code.code === "collaborator") value=plan_code.code )
+											input(
+												type="radio"
+												name="plan_code"
+												checked=(plan_code.code === "collaborator")
+												value=plan_code.code
+												data-ol-group-plan-code=plan_code.code
+											)
 											if (useNewPlanName && plan_code.code === 'collaborator')
 												span Standard
 											else
@@ -52,7 +58,7 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
 												value=size
 												selected=(size === groupPlanModalDefaults.size)
 											) #{size}
-								.form-group
+								.form-group(data-ol-group-plan-form-currency)
 									label(for='currency')
 										| Currency
 									select.form-control(id="currency")
@@ -65,7 +71,11 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
 									label(for='usage')
 										| Overleaf offers a 40% educational discount for groups of 10 or more.
 								label.group-plan-option
-									input(id="usage", type="checkbox")
+									input(
+										id="usage"
+										type="checkbox"
+										autocomplete="off"
+									)
 									span This license is for educational purposes (applies to students or faculty using Overleaf for teaching)
 
 					.row

services/web/app/views/subscriptions/plans-marketing/_tables.pug

@@ -39,10 +39,10 @@ mixin table_premium
 							| #{plan}
 						else if plan
 							i.fa.fa-check(aria-hidden="true")
-							span.sr-only Feature included
+							span.sr-only #{translate("feature_included")}
 						else
 							i.fa.fa-times(aria-hidden="true")
-							span.sr-only Feature not included
+							span.sr-only #{translate("feature_not_included")}
 
 		tr
 			td
@@ -62,10 +62,10 @@ mixin table_cell_student(feature)
 		| #{feature.student}
 	else if feature.student
 		i.fa.fa-check(aria-hidden="true")
-		span.sr-only Feature included
+		span.sr-only #{translate("feature_included")}
 	else
 		i.fa.fa-times(aria-hidden="true")
-		span.sr-only Feature not included
+		span.sr-only #{translate("feature_not_included")}
 
 mixin table_student
 	table.card.plans-table.plans-table-student
@@ -99,10 +99,10 @@ mixin table_student
 						| #{feature.plans.free}
 					else if feature.plans.free
 						i.fa.fa-check(aria-hidden="true")
-						span.sr-only Feature included
+						span.sr-only #{translate("feature_included")}
 					else
 						i.fa.fa-times(aria-hidden="true")
-						span.sr-only Feature included
+						span.sr-only #{translate("feature_not_included")}
 				td(ng-non-bindable)
 					+table_cell_student(feature)
 				td(ng-non-bindable)

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

@@ -0,0 +1,64 @@
+include ./_mixins
+
+.row.plans-v2-top-switch
+	.col-xs-12
+		ul.nav.plans-v2-nav
+			li.active.plans-v2-top-switch-individual(data-ol-plans-v2-view-tab='individual')
+				a.btn.btn-default-outline(
+					href="#"
+				) #{translate("indvidual_plans")}
+			li.plans-v2-top-switch-group(data-ol-plans-v2-view-tab='group')
+				a.btn.btn-default-outline(
+					href="#"
+				)
+					span #{translate("group_plans")} 
+					span (save 30% or more)
+			li.plans-v2-top-switch-student(data-ol-plans-v2-view-tab='student')
+				a.btn.btn-default-outline(
+					href="#"
+				) #{translate("student_plans")}
+
+.row
+	.col-md-4.col-md-offset-4.text-centered.plans-v2-m-a-switch-container(data-ol-plans-v2-m-a-switch-container)
+		span.underline(data-ol-plans-v2-m-a-switch-monthly-text) #{translate("monthly")}
+		label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch)
+			input(
+				type="checkbox"
+				role="switch"
+				autocomplete="off"
+			)
+			span
+		div.plans-v2-m-a-switch-annual-text-container
+			span(data-ol-plans-v2-m-a-switch-annual-text) #{translate("annual")}
+			div.plans-v2-m-a-tooltip.plans-v2-m-a-tooltip-monthly(data-ol-plans-v2-m-a-tooltip)
+				div.plans-v2-m-a-tooltip-arrow
+				span(data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")}
+				span(hidden data-ol-tooltip-period='annual') #{translate("saving_20_percent")}
+
+.row(hidden data-ol-plans-v2-license-picker-container)
+	.col-sm-12
+		+group_plans_license_picker()
+
++table_sticky_header
+
+.row.plans-v2-table-container(data-ol-plans-v2-table-container='monthly')
+	.col-sm-12(data-ol-plans-v2-view='individual')
+		.row
+			+table_individual('monthly')
+	.col-sm-12(hidden data-ol-plans-v2-view='student')
+		.row
+			+table_student('monthly')
+
+.row.plans-v2-table-container(hidden data-ol-plans-v2-table-container='annual')
+	.col-sm-12(data-ol-plans-v2-view='individual')
+		.row
+			+table_individual('annual')
+	.col-sm-12(hidden data-ol-plans-v2-view='group')
+		.row
+			+table_group('annual')
+	.col-sm-12(hidden data-ol-plans-v2-view='student')
+		.row
+			+table_student('annual')
+
+//- sticky header on mobile will be "hidden" (by removing its sticky position) if it reaches this div
+.invisible(aria-hidden="true" data-ol-plans-v2-table-sticky-header-stop)

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

@@ -0,0 +1,25 @@
+.faq.plans-v2-faq
+	.row.row-spaced-large
+		.col-md-12
+			.page-header.plans-header.plans-subheader.text-centered
+				h2 FAQ
+	.row
+		.col-md-12
+			h3 #{translate('faq_how_free_trial_works_question')}
+			p #{translate('faq_how_free_trial_works_answer_v2', { len:'7' })}
+	.row
+		.col-md-12
+			h3 #{translate('faq_change_plans_or_cancel_question')}
+			p #{translate('faq_change_plans_or_cancel_answer')}
+	.row
+		.col-md-12
+			h3 #{translate('faq_do_collab_need_on_paid_plan_question')}
+			p !{translate('faq_do_collab_need_on_paid_plan_answer', {}, [{ name: 'a', attrs: { href: "/learn/how-to/Overleaf_Accounts_and_Subscriptions", target: '_blank'}}, { name: 'a', attrs: { href: "/learn/how-to/Overleaf_premium_features", target: '_blank'}}])}
+	.row
+		.col-md-12
+			h3 #{translate('faq_how_does_a_group_plan_work_question')}
+			p !{translate('faq_how_does_a_group_plan_work_answer', {}, [{ name: 'a', attrs: { href: "/learn/how-to/Joining_an_Overleaf_Group_Subscription", target: '_blank'}}, { name: 'a', attrs: { href: "/learn/how-to/Managing_a_group_subscription", target: '_blank'}}, { name: 'a', attrs: { href: "/contact", target: '_blank'}}])}
+	.row
+		.col-md-12
+			h3 #{translate('faq_pay_by_invoice_question')}
+			p #{translate('faq_pay_by_invoice_answer_v2')}

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

@@ -0,0 +1,512 @@
+mixin table_individual(period)
+	table.card.plans-v2-table.plans-v2-table-individual
+		tr
+			th
+			th
+				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_individual_free()
+					ul.plans-v2-table-th-content-benefit
+						li #{translate("only_one_collaborator")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_individual_free()
+			th.plans-v2-table-cell-before-highlighted-column
+				div.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)
+					ul.plans-v2-table-th-content-benefit
+						li #{translate("only_one_collaborator")}
+						li #{translate("most_premium_features")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_individual_personal(period)
+			th.plans-v2-table-green-highlighted
+				div.plans-v2-table-th-content
+					p.plans-v2-table-green-highlighted-text MOST POPULAR
+					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)
+					ul.plans-v2-table-th-content-benefit
+						li #{translate("only_one_collaborator")}
+						li #{translate("all_premium_features")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_individual_collaborator(period)
+
+			th
+				div.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()
+					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_professional(period)
+
+		for planFeaturesPerSection in planFeatures.individual
+			if planFeaturesPerSection.divider
+				tr.plans-v2-table-divider
+					td(colspan="5")
+						div
+							span.plans-v2-table-divider-label #{translate(planFeaturesPerSection.dividerLabel)}
+							//- will only appear on screen width >= 768px (using CSS)
+							i.fa.fa-question-circle.plans-v2-table-divider-question-icon(
+										data-toggle="tooltip"
+										title=translate(planFeaturesPerSection.dividerInfo),
+										data-placement="top"
+									)
+							//- will only appear on screen width < 768px (using CSS)
+							span.plans-v2-table-divider-learn-more-container
+								span (
+								span.plans-v2-table-divider-learn-more-text(
+									data-toggle="tooltip"
+									title=translate(planFeaturesPerSection.dividerInfo),
+									data-placement="top"
+								) #{translate("learn_more_lowercase")}
+								span )
+			for feature, featureIndex in planFeaturesPerSection.items
+				tr(
+					class=(featureIndex === (planFeaturesPerSection.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}`)
+						.plans-v2-table-feature-name
+							if feature.info
+								span #{translate(feature.feature)}
+								//- will only appear on screen width >= 768px (using CSS)
+								i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
+									data-toggle="tooltip"
+									title=translate(feature.info),
+									data-placement="right"
+								)
+								//- will only appear on screen width < 768px (using CSS)
+								span.plans-v2-table-feature-name-learn-more-container
+									span (
+									span.plans-v2-table-feature-name-learn-more-text(
+										data-toggle="tooltip"
+										title=translate(feature.info),
+										data-placement="top"
+									) #{translate("learn_more_lowercase")}
+									span )
+							else
+								| #{translate(feature.feature)}
+					td(ng-non-bindable)
+						+table_cell(feature, 'free')
+					td.plans-v2-table-cell-before-highlighted-column(ng-non-bindable)
+						+table_cell(feature, 'personal')
+					td.plans-v2-table-green-highlighted(ng-non-bindable)
+						+table_cell(feature, 'collaborator')
+					td(ng-non-bindable)
+						+table_cell(feature, 'professional')
+
+mixin table_group
+	table.card.plans-v2-table.plans-v2-table-group
+		tr
+			th
+			th.plans-v2-table-cell-before-highlighted-column
+				div.plans-v2-table-th-content
+					p.plans-v2-table-th-content-title #{translate("group_standard")}
+					div.plans-v2-table-price-container
+						strike.plans-v2-table-annual-price-before-discount(data-ol-plans-v2-table-annual-price-before-discount)
+							+gen_localized_price_for_plan_view('collaborator', 'annual')
+						p.plans-v2-table-price
+							span(data-ol-group-price-per-user='collaborator') $0
+						p.plans-v2-table-price-period-label
+							| per user / year
+					.plans-v2-table-btn-buy-container-mobile
+						+btn_buy_group_collaborator()
+						small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+					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') $0
+							span &nbsp;#{translate("total_per_year_lowercase")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_group_collaborator()
+						small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+
+			th.plans-v2-table-green-highlighted
+				div.plans-v2-table-th-content
+					p.plans-v2-table-green-highlighted-text RECOMMENDED
+					p.plans-v2-table-th-content-title #{translate("group_professional")}
+					div.plans-v2-table-price-container
+						strike.plans-v2-table-annual-price-before-discount(data-ol-plans-v2-table-annual-price-before-discount)
+							+gen_localized_price_for_plan_view('professional', 'annual')
+						p.plans-v2-table-price
+							span(data-ol-group-price-per-user='professional') $0
+						p.plans-v2-table-price-period-label
+							| per user / year
+					.plans-v2-table-btn-buy-container-mobile
+						+btn_buy_group_professional()
+						small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+					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') $0
+							span &nbsp;#{translate("total_per_year_lowercase")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_group_professional()
+						small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+						
+			th
+				div.plans-v2-table-th-content
+					p.plans-v2-table-th-content-title #{translate("organization")}
+					div.plans-v2-table-comments-icon
+						i.fa.fa-comments-o
+					.plans-v2-table-btn-buy-container-mobile
+						+btn_buy_group_organization()
+						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")}
+						li #{translate("for_groups_or_site_wide")}
+						li
+							a(href="/for/enterprises/sales-contact") #{translate("also_available_as_on_premises")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_group_organization()
+						small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
+			th
+
+		for planFeaturesPerSection in planFeatures.group
+			if planFeaturesPerSection.divider
+				tr.plans-v2-table-divider
+					td(colspan="4")
+						div
+							span.plans-v2-table-divider-label #{translate(planFeaturesPerSection.dividerLabel)}
+							//- will only appear on screen width >= 768px (using CSS)
+							i.fa.fa-question-circle.plans-v2-table-divider-question-icon(
+										data-toggle="tooltip"
+										title=translate(planFeaturesPerSection.dividerInfo),
+										data-placement="top"
+									)
+							//- will only appear on screen width < 768px (using CSS)
+							span.plans-v2-table-divider-learn-more-container
+								span (
+								span.plans-v2-table-divider-learn-more-text(
+									data-toggle="tooltip"
+									title=translate(planFeaturesPerSection.dividerInfo),
+									data-placement="top"
+								) #{translate("learn_more_lowercase")}
+								span )
+					td
+			for feature, featureIndex in planFeaturesPerSection.items
+				tr(
+					class=(featureIndex === (planFeaturesPerSection.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}`)
+						.plans-v2-table-feature-name
+							if feature.info
+								span #{translate(feature.feature)}
+								//- will only appear on screen width >= 768px (using CSS)
+								i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
+									data-toggle="tooltip"
+									title=translate(feature.info),
+									data-placement="right"
+								)
+								//- will only appear on screen width < 768px (using CSS)
+								span.plans-v2-table-feature-name-learn-more-container
+									span (
+									span.plans-v2-table-feature-name-learn-more-text(
+										data-toggle="tooltip"
+										title=translate(feature.info),
+										data-placement="top"
+									) #{translate("learn_more_lowercase")}
+									span )
+							else
+								| #{translate(feature.feature)}
+					td.plans-v2-table-cell-before-highlighted-column(ng-non-bindable)
+						+table_cell(feature, 'group_standard')
+					td.plans-v2-table-green-highlighted(ng-non-bindable)
+						+table_cell(feature, 'group_professional')
+					td(ng-non-bindable)
+						+table_cell(feature, 'organization')
+					td
+
+mixin table_student(period)
+	table.card.plans-v2-table.plans-v2-table-student
+		tr
+			th
+			th.plans-v2-table-cell-before-highlighted-column
+				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()
+					ul.plans-v2-table-th-content-benefit
+						li #{translate("only_one_collaborator")}
+						li #{translate("most_premium_features")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_student_free()
+			th.plans-v2-table-green-highlighted
+				div.plans-v2-table-th-content
+					p.plans-v2-table-green-highlighted-text
+						if (period === 'monthly')
+							| SAVE 20% ON ANNUAL PLAN
+						else 
+							| SAVING 20%
+					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)
+					ul.plans-v2-table-th-content-benefit
+						li #{translate("only_one_collaborator")}
+						li #{translate("all_premium_features")}
+					.plans-v2-table-btn-buy-container-desktop
+						+btn_buy_student_student(period)
+			th
+				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
+					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
+			th
+
+		for planFeaturesPerSection in planFeatures.student
+			if (planFeaturesPerSection.divider)
+				tr.plans-v2-table-divider
+					td(colspan="4")
+						div
+							span.plans-v2-table-divider-label #{translate(planFeaturesPerSection.dividerLabel)}
+							//- will only appear on screen width >= 768px (using CSS)
+							i.fa.fa-question-circle.plans-v2-table-divider-question-icon(
+										data-toggle="tooltip"
+										title=translate(planFeaturesPerSection.dividerInfo),
+										data-placement="top"
+									)
+							//- will only appear on screen width < 768px (using CSS)
+							span.plans-v2-table-divider-learn-more-container
+								span (
+								span.plans-v2-table-divider-learn-more-text(
+									data-toggle="tooltip"
+									title=translate(planFeaturesPerSection.dividerInfo),
+									data-placement="top"
+								) #{translate("learn_more_lowercase")}
+								span )
+					td
+			for feature, featureIndex in planFeaturesPerSection.items
+				tr(
+					class=(featureIndex === (planFeaturesPerSection.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}`)
+						.plans-v2-table-feature-name
+							if (feature.info)
+								span #{translate(feature.feature)}
+								//- will only appear on screen width >= 768px (using CSS)
+								i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
+									data-toggle="tooltip"
+									title=translate(feature.info),
+									data-placement="right"
+								)
+								//- will only appear on screen width < 768px (using CSS)
+								span.plans-v2-table-feature-name-learn-more-container
+									span (
+									span.plans-v2-table-feature-name-learn-more-text(
+										data-toggle="tooltip"
+										title=translate(feature.info),
+										data-placement="top"
+									) #{translate("learn_more_lowercase")}
+									span )
+							else
+								| #{translate(feature.feature)}
+					td.plans-v2-table-cell-before-highlighted-column(ng-non-bindable)
+						+table_cell(feature, 'free')
+					td.plans-v2-table-green-highlighted(ng-non-bindable)
+						+table_cell(feature, 'student')
+					td(ng-non-bindable)
+						+table_cell(feature, 'university')
+					td
+
+mixin table_head_price(plan, period)
+	div.plans-v2-table-price-container
+		if plan !== 'free'
+			strike.plans-v2-table-annual-price-before-discount.hidden(data-ol-plans-v2-table-annual-price-before-discount)
+				+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
+		p.plans-v2-table-price
+			+gen_localized_price_for_plan_view(plan, period)
+		p.plans-v2-table-price-period-label
+			if period == 'annual'
+				| per year
+			else
+				| per month
+
+mixin table_cell(feature, plan)
+	.plans-v2-table-cell-inner-content
+		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")}
+
+mixin group_plans_license_picker()
+	form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form)
+		.plans-v2-license-picker-select-container
+			span #{translate("how_many_licenses_are_you_looking_for")}
+			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
+			)
+				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
+				)
+				span #{translate("include_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("include_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("include_educational_discount_info"),
+					data-placement="bottom"
+				) #{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")}
+	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")}
+
+mixin btn_buy_individual_free()
+	if (!getSessionUser())
+		a.btn.btn-default.plans-v2-table-btn-buy(href="/register")
+			span #{translate("try_for_free")}
+	else
+		a.btn.btn-default.plans-v2-table-btn-buy.invisible(aria-hidden="true")
+
+mixin btn_buy_individual_personal(period)
+	+btn_buy_individual('paid-personal', period, false)
+	if (period === 'monthly')
+		small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=paid-personal&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+
+mixin btn_buy_individual_collaborator(period)
+	+btn_buy_individual('collaborator', period, true)
+	if (period === 'monthly')
+		small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=collaborator&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+
+mixin btn_buy_individual_professional(period)
+	+btn_buy_individual('professional', period, false)
+	if (period === 'monthly')
+		small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=professional&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+
+mixin btn_buy_group_collaborator() 
+	a.btn.btn-default.plans-v2-table-btn-buy(
+		data-ol-start-new-subscription='group_collaborator'
+		data-ol-item-view='annual'
+		data-ol-has-custom-href
+	)
+		span #{translate("customize")} 
+		span.hidden-mobile #{translate("your_plan_lowercase")}
+
+mixin btn_buy_group_professional() 
+	a.btn.btn-primary.plans-v2-table-btn-buy(
+		data-ol-start-new-subscription='group_professional'
+		data-ol-item-view='annual'
+		data-ol-has-custom-href
+	)
+		span #{translate("customize")} 
+		span.hidden-mobile #{translate("your_plan_lowercase")}
+
+mixin btn_buy_group_organization() 
+	a.btn.btn-default.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'
+	)
+		span #{translate("contact_us_lowercase")}
+
+mixin btn_buy_student_free()
+	if (!getSessionUser())
+		a.btn.btn-default.plans-v2-table-btn-buy(href="/register")
+			span #{translate("try_for_free")}
+
+mixin btn_buy_student_student(period)
+	a.btn.btn-primary.plans-v2-table-btn-buy(
+		data-ol-start-new-subscription='student'
+		data-ol-item-view=period
+		data-ol-location='card'
+	)
+		if (period === 'monthly')
+			span #{translate("try_for_free")}
+		else 
+			span #{translate("buy_now")}
+	if (period === 'monthly')
+		small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=student&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+
+mixin btn_buy_student_university()
+	a.btn.btn-default.plans-v2-table-btn-buy(
+		href="/for/enterprises/sales-contact"
+		target="_blank"
+	)
+		span #{translate("contact_us_lowercase")}
+
+mixin table_sticky_header
+	.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-item
+			span #{translate("free")}
+		.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='group')
+		.plans-v2-table-sticky-header-item
+			span #{translate("group_standard")}
+		.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='student')
+		.plans-v2-table-sticky-header-item
+			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")}

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

@@ -0,0 +1,81 @@
+import './group-plan-modal'
+import getMeta from '../../utils/meta'
+
+const NEW_PLANS_PAGE_VARIANT = 'new-plans-page'
+
+export function checkIfGroupModalOpen() {
+  return window.location.hash.includes('groups')
+}
+
+export function changePlansV2MainPageGroupData() {
+  const mainPlansPageFormEl = document.querySelector(
+    '[data-ol-plans-v2-license-picker-form]'
+  )
+  const mainPlansPageLicensePickerEl = mainPlansPageFormEl.querySelector(
+    '[data-ol-plans-v2-license-picker-select]'
+  )
+
+  const mainPlansPageEducationalDiscountEl = mainPlansPageFormEl.querySelector(
+    '[data-ol-plans-v2-license-picker-educational-discount-input]'
+  )
+
+  const groupPlanModalNumberOfLicenses = document.querySelector(
+    '[data-ol-group-plan-modal] #size'
+  ).value
+
+  const educationalDiscountChecked = document.querySelector(
+    '[data-ol-group-plan-modal] #usage'
+  ).checked
+
+  const educationalDiscountEnabled =
+    educationalDiscountChecked && groupPlanModalNumberOfLicenses >= 10
+
+  if (checkIfGroupModalOpen()) {
+    // update license picker on the main plans page
+    mainPlansPageLicensePickerEl.value = groupPlanModalNumberOfLicenses
+    mainPlansPageLicensePickerEl.dispatchEvent(new Event('change'))
+
+    // update educational discount checkbox on the main plans page
+    if (groupPlanModalNumberOfLicenses >= 10) {
+      mainPlansPageEducationalDiscountEl.checked = educationalDiscountEnabled
+      mainPlansPageEducationalDiscountEl.dispatchEvent(new Event('change'))
+    } else {
+      if (educationalDiscountChecked) {
+        mainPlansPageEducationalDiscountEl.checked = false
+        mainPlansPageEducationalDiscountEl.dispatchEvent(new Event('change'))
+      }
+    }
+  }
+}
+
+function hideCurrencyPicker() {
+  document.querySelector('[data-ol-group-plan-form-currency]').hidden = true
+}
+
+const plansPageVariant =
+  getMeta('ol-splitTestVariants')?.['plans-page-layout-v2'] ?? 'default'
+
+if (plansPageVariant === NEW_PLANS_PAGE_VARIANT) {
+  hideCurrencyPicker()
+
+  // we need to sync the form data between group plan modal
+  // and the main plan page
+  document.querySelectorAll('[data-ol-group-plan-code]').forEach(el => {
+    // listening to new CustomEvent 'showmodal'
+    // we do this to check whether user clicks the "Standard (Collaborator)" plan or the "Professional" plan
+    // and the radio button on the group plan modal will then be 'checked' accordingly
+    el.addEventListener('showmodal', () => {
+      if (!checkIfGroupModalOpen()) {
+        el.checked = true
+        el.dispatchEvent(new Event('change'))
+      }
+    })
+  })
+}
+
+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

@@ -0,0 +1,136 @@
+import { checkIfGroupModalOpen } from '../../../../features/plans/plans-v2-group-plan-modal'
+import getMeta from '../../../../utils/meta'
+
+const MINIMUM_NUMBER_OF_LICENSES_EDUCATIONAL_DISCOUNT = 10
+
+export function updateGroupPricing() {
+  const groupPlans = getMeta('ol-groupPlans')
+  const currencySymbols = getMeta('ol-currencySymbols')
+  const currentCurrencyCode = getMeta('ol-recommendedCurrency')
+
+  const formEl = document.querySelector(
+    '[data-ol-plans-v2-license-picker-form]'
+  )
+  const numberOfLicenses = formEl.querySelector(
+    '[data-ol-plans-v2-license-picker-select]'
+  ).value
+  const currency = currentCurrencyCode
+  const currencySymbol = currencySymbols[currency]
+  const usage = formEl.querySelector(
+    '[data-ol-plans-v2-license-picker-educational-discount-input]'
+  ).checked
+    ? 'educational'
+    : 'enterprise'
+
+  const priceInCentsProfessional =
+    groupPlans[usage].professional[currency][numberOfLicenses].price_in_cents
+  const priceInUnitProfessional = (priceInCentsProfessional / 100).toFixed()
+  const perUserPriceProfessional = parseFloat(
+    (priceInCentsProfessional / 100 / numberOfLicenses).toFixed(2)
+  )
+  let displayPriceProfessional = `${currencySymbol}${priceInUnitProfessional}`
+  let displayPerUserPriceProfessional = `${currencySymbol}${perUserPriceProfessional}`
+
+  const priceInCentsCollaborator =
+    groupPlans[usage].collaborator[currency][numberOfLicenses].price_in_cents
+  const priceInUnitCollaborator = (priceInCentsCollaborator / 100).toFixed()
+  const perUserPriceCollaborator = parseFloat(
+    (priceInCentsCollaborator / 100 / numberOfLicenses).toFixed(2)
+  )
+  let displayPriceCollaborator = `${currencySymbol}${priceInUnitCollaborator}`
+  let displayPerUserPriceCollaborator = `${currencySymbol}${perUserPriceCollaborator}`
+
+  if (currencySymbol === 'kr') {
+    displayPriceProfessional = `${priceInUnitProfessional} ${currencySymbol}`
+    displayPerUserPriceProfessional = `${perUserPriceProfessional} ${currencySymbol}`
+    displayPriceCollaborator = `${priceInUnitCollaborator} ${currencySymbol}`
+    displayPerUserPriceCollaborator = `${perUserPriceCollaborator} ${currencySymbol}`
+  } else if (currencySymbol === 'Fr') {
+    displayPriceProfessional = `${currencySymbol} ${priceInUnitProfessional}`
+    displayPerUserPriceProfessional = `${currencySymbol} ${perUserPriceProfessional}`
+    displayPriceCollaborator = `${currencySymbol} ${priceInUnitCollaborator}`
+    displayPerUserPriceCollaborator = `${currencySymbol} ${perUserPriceCollaborator}`
+  }
+
+  document.querySelector(
+    '[data-ol-plans-v2-group-total-price="professional"]'
+  ).innerText = displayPriceProfessional
+  document.querySelector(
+    '[data-ol-plans-v2-group-total-price="collaborator"]'
+  ).innerText = displayPriceCollaborator
+
+  document.querySelector(
+    '[data-ol-group-price-per-user="collaborator"]'
+  ).innerText = displayPerUserPriceCollaborator
+
+  document.querySelector(
+    '[data-ol-group-price-per-user="professional"]'
+  ).innerText = displayPerUserPriceProfessional
+
+  // educational discount can only be activated if numberOfLicenses is > 10
+  if (numberOfLicenses < MINIMUM_NUMBER_OF_LICENSES_EDUCATIONAL_DISCOUNT) {
+    formEl.querySelector(
+      '[data-ol-plans-v2-license-picker-educational-discount-input]'
+    ).disabled = true
+    formEl.querySelector(
+      '[data-ol-plans-v2-license-picker-educational-discount-input]'
+    ).checked = false
+    formEl
+      .querySelector(
+        '[data-ol-plans-v2-license-picker-educational-discount-label]'
+      )
+      .classList.add('disabled')
+  } else {
+    formEl.querySelector(
+      '[data-ol-plans-v2-license-picker-educational-discount-input]'
+    ).disabled = false
+    formEl
+      .querySelector(
+        '[data-ol-plans-v2-license-picker-educational-discount-label]'
+      )
+      .classList.remove('disabled')
+  }
+}
+
+export function showGroupPlansLicensePicker() {
+  const el = document.querySelector(
+    '[data-ol-plans-v2-license-picker-container]'
+  )
+
+  el.hidden = false
+}
+
+export function hideGroupPlansLicensePicker() {
+  const el = document.querySelector(
+    '[data-ol-plans-v2-license-picker-container]'
+  )
+
+  el.hidden = true
+}
+
+export function changeGroupPlanModalNumberOfLicenses() {
+  const modalEl = document.querySelector('[data-ol-group-plan-modal]')
+  const numberOfLicenses = document.querySelector(
+    '[data-ol-plans-v2-license-picker-select]'
+  ).value
+
+  const groupPlanModalLicensePickerEl = modalEl.querySelector('#size')
+
+  if (!checkIfGroupModalOpen()) {
+    groupPlanModalLicensePickerEl.value = numberOfLicenses
+    groupPlanModalLicensePickerEl.dispatchEvent(new Event('change'))
+  }
+}
+
+export function changeGroupPlanModalEducationalDiscount() {
+  const modalEl = document.querySelector('[data-ol-group-plan-modal]')
+  const groupPlanModalEducationalDiscountEl = modalEl.querySelector('#usage')
+  const educationalDiscountChecked = document.querySelector(
+    '[data-ol-plans-v2-license-picker-educational-discount-input]'
+  ).checked
+
+  if (!checkIfGroupModalOpen()) {
+    groupPlanModalEducationalDiscountEl.checked = educationalDiscountChecked
+    groupPlanModalEducationalDiscountEl.dispatchEvent(new Event('change'))
+  }
+}

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-m-a-switch.js

@@ -0,0 +1,218 @@
+// m-a stands for monthly-annual
+
+// We need this mutable variable because the group tab only have annual.
+// There's some difference between the monthly and annual UI
+// and since monthly-annual switch is disabled for the group tab,
+// we need to introduce a new variable to store the information
+let currentMonthlyAnnualSwitchValue = 'monthly'
+
+// only executed if switching to group tab
+export function disableMonthlyAnnualSwitching() {
+  const containerEl = document.querySelector(
+    '[data-ol-plans-v2-m-a-switch-container]'
+  )
+  const checkbox = containerEl.querySelector('input[type="checkbox"]')
+
+  containerEl.classList.add('disabled')
+
+  checkbox.disabled = true
+  checkbox.checked = true
+
+  document
+    .querySelectorAll('[data-ol-plans-v2-table-container]')
+    .forEach(el => {
+      const period = el.getAttribute('data-ol-plans-v2-table-container')
+      if (period === 'annual') {
+        el.hidden = false
+      } else {
+        el.hidden = true
+      }
+    })
+  document
+    .querySelectorAll('[data-ol-plans-v2-table-annual-price-before-discount]')
+    .forEach(el => {
+      el.classList.remove('hidden')
+    })
+}
+
+// executed if switching from group tab to individual and student tab
+export function enableMonthlyAnnualSwitching() {
+  const containerEl = document.querySelector(
+    '[data-ol-plans-v2-m-a-switch-container]'
+  )
+  const checkbox = containerEl.querySelector('input[type="checkbox"]')
+  containerEl.classList.remove('disabled')
+
+  checkbox.disabled = false
+
+  if (currentMonthlyAnnualSwitchValue === 'annual') {
+    checkbox.checked = true
+  } else {
+    checkbox.checked = false
+    document
+      .querySelectorAll('[data-ol-plans-v2-table-container]')
+      .forEach(el => {
+        const period = el.getAttribute('data-ol-plans-v2-table-container')
+        if (period === 'annual') {
+          el.hidden = true
+        } else {
+          el.hidden = false
+        }
+      })
+    document
+      .querySelectorAll('[data-ol-plans-v2-table-annual-price-before-discount]')
+      .forEach(el => {
+        el.classList.add('hidden')
+      })
+  }
+}
+
+export function hideMonthlyAnnualSwitchOnSmallScreen() {
+  const isSmallScreen = window.matchMedia('(max-width: 767px)').matches
+
+  if (isSmallScreen) {
+    const el = document.querySelector('[data-ol-plans-v2-m-a-switch-container]')
+
+    el.hidden = true
+  }
+}
+
+export function showMonthlyAnnualSwitchOnSmallScreen() {
+  const isSmallScreen = window.matchMedia('(max-width: 767px)').matches
+
+  if (isSmallScreen) {
+    const el = document.querySelector('[data-ol-plans-v2-m-a-switch-container]')
+
+    el.hidden = false
+  }
+}
+
+// in group tab, there are no "20% discount"
+// tooltip in the monthly-annual switch "annual" text.
+// so, we need to hide it
+export function showMonthlyAnnualTooltip() {
+  const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
+
+  el.hidden = false
+}
+
+export function hideMonthlyAnnualTooltip() {
+  const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
+
+  el.hidden = true
+}
+
+// "20% discount" tooltip in the monthly-annual switch will have a different
+// text and different colour, so we need to switch them accordingly
+function switchMonthlyAnnualTooltip() {
+  const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
+  if (currentMonthlyAnnualSwitchValue === 'annual') {
+    el.classList.replace(
+      'plans-v2-m-a-tooltip-annual',
+      'plans-v2-m-a-tooltip-monthly'
+    )
+    document.querySelectorAll('[data-ol-tooltip-period]').forEach(childEl => {
+      const period = childEl.getAttribute('data-ol-tooltip-period')
+      if (period === 'monthly') {
+        childEl.hidden = false
+      } else {
+        childEl.hidden = true
+      }
+    })
+  } else {
+    el.classList.replace(
+      'plans-v2-m-a-tooltip-monthly',
+      'plans-v2-m-a-tooltip-annual'
+    )
+    document.querySelectorAll('[data-ol-tooltip-period]').forEach(childEl => {
+      const period = childEl.getAttribute('data-ol-tooltip-period')
+      if (period === 'annual') {
+        childEl.hidden = false
+      } else {
+        childEl.hidden = true
+      }
+    })
+  }
+}
+
+// month and annual value will each have its own set of tables that we need to
+// switch accordingly
+function switchMonthlyAnnualTable() {
+  const isAnnualPricing = document.querySelector(
+    '[data-ol-plans-v2-m-a-switch] input[type="checkbox"]'
+  ).checked
+
+  if (isAnnualPricing) {
+    currentMonthlyAnnualSwitchValue = 'annual'
+  } else {
+    currentMonthlyAnnualSwitchValue = 'monthly'
+  }
+
+  document
+    .querySelectorAll('[data-ol-plans-v2-table-annual-price-before-discount]')
+    .forEach(el => {
+      if (isAnnualPricing) {
+        el.classList.remove('hidden')
+      } else {
+        el.classList.add('hidden')
+      }
+    })
+
+  document
+    .querySelectorAll('[data-ol-plans-v2-table-container]')
+    .forEach(el => {
+      const period = el.getAttribute('data-ol-plans-v2-table-container')
+      if (isAnnualPricing) {
+        if (period === 'annual') {
+          el.hidden = false
+        } else {
+          el.hidden = true
+        }
+      } else {
+        if (period === 'annual') {
+          el.hidden = true
+        } else {
+          el.hidden = false
+        }
+      }
+    })
+}
+
+export function underlineAnnualText() {
+  document
+    .querySelector('[data-ol-plans-v2-m-a-switch-monthly-text]')
+    .classList.remove('underline')
+  document
+    .querySelector('[data-ol-plans-v2-m-a-switch-annual-text]')
+    .classList.add('underline')
+}
+
+function underlineMonthlyText() {
+  document
+    .querySelector('[data-ol-plans-v2-m-a-switch-monthly-text]')
+    .classList.add('underline')
+  document
+    .querySelector('[data-ol-plans-v2-m-a-switch-annual-text]')
+    .classList.remove('underline')
+}
+
+// if annual is active, we need to underline the "annual" text
+// if monthly is active, we need to underline the "monthly" text
+export function switchUnderlineText() {
+  if (currentMonthlyAnnualSwitchValue === 'annual') {
+    underlineAnnualText()
+  } else {
+    underlineMonthlyText()
+  }
+}
+
+// click event listener for monthly-annual switch
+export function setUpMonthlyAnnualSwitching() {
+  document
+    .querySelector('[data-ol-plans-v2-m-a-switch]')
+    .addEventListener('click', () => {
+      switchMonthlyAnnualTooltip()
+      switchMonthlyAnnualTable()
+      switchUnderlineText()
+    })
+}

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

@@ -0,0 +1,107 @@
+import '../../../../marketing'
+
+import {
+  setUpStickyHeaderObserver,
+  switchStickyHeader,
+} from './plans-v2-sticky-header'
+import {
+  disableMonthlyAnnualSwitching,
+  enableMonthlyAnnualSwitching,
+  hideMonthlyAnnualSwitchOnSmallScreen,
+  showMonthlyAnnualSwitchOnSmallScreen,
+  hideMonthlyAnnualTooltip,
+  showMonthlyAnnualTooltip,
+  setUpMonthlyAnnualSwitching,
+  underlineAnnualText,
+  switchUnderlineText,
+} from './plans-v2-m-a-switch'
+import {
+  changeGroupPlanModalEducationalDiscount,
+  changeGroupPlanModalNumberOfLicenses,
+  hideGroupPlansLicensePicker,
+  showGroupPlansLicensePicker,
+  updateGroupPricing,
+} from './plans-v2-group-plan'
+import { setUpGroupSubscriptionButtonAction } from './plans-v2-subscription-button'
+import { checkIfGroupModalOpen } from '../../../../features/plans/plans-v2-group-plan-modal'
+import { updateLinkTargets } from '../plans'
+
+function selectTab(viewTab) {
+  document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => {
+    if (el.getAttribute('data-ol-plans-v2-view-tab') === viewTab) {
+      el.classList.add('active')
+    } else {
+      el.classList.remove('active')
+    }
+  })
+
+  document.querySelectorAll('[data-ol-plans-v2-view]').forEach(el => {
+    el.hidden = el.getAttribute('data-ol-plans-v2-view') !== viewTab
+  })
+
+  switchUnderlineText()
+  switchStickyHeader(viewTab)
+
+  // group tab is special because group plan only has annual value
+  // so we need to perform some UI changes whenever user click the group tab
+  if (viewTab === 'group') {
+    disableMonthlyAnnualSwitching()
+    hideMonthlyAnnualTooltip()
+    updateGroupPricing()
+    underlineAnnualText()
+    showGroupPlansLicensePicker()
+    hideMonthlyAnnualSwitchOnSmallScreen()
+  } else {
+    enableMonthlyAnnualSwitching()
+    showMonthlyAnnualTooltip()
+    hideGroupPlansLicensePicker()
+    showMonthlyAnnualSwitchOnSmallScreen()
+  }
+}
+
+function setUpTabSwitching() {
+  document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => {
+    const viewTab = el.getAttribute('data-ol-plans-v2-view-tab')
+
+    el.querySelector('a').addEventListener('click', function (e) {
+      e.preventDefault()
+      // TODO: analytics
+      // eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`)
+      // eventTracking.sendMB('plans-page-toggle', { button: view })
+      selectTab(viewTab)
+    })
+  })
+}
+
+function setUpGroupPlanPricingChange() {
+  document
+    .querySelectorAll('[data-ol-plans-v2-license-picker-select]')
+    .forEach(el => {
+      el.addEventListener('change', () => {
+        updateGroupPricing()
+        if (!checkIfGroupModalOpen()) {
+          changeGroupPlanModalNumberOfLicenses()
+        }
+      })
+    })
+
+  document
+    .querySelectorAll(
+      '[data-ol-plans-v2-license-picker-educational-discount-input]'
+    )
+    .forEach(el =>
+      el.addEventListener('change', () => {
+        updateGroupPricing()
+        if (!checkIfGroupModalOpen()) {
+          changeGroupPlanModalEducationalDiscount()
+        }
+      })
+    )
+}
+
+setUpTabSwitching()
+setUpGroupPlanPricingChange()
+setUpMonthlyAnnualSwitching()
+setUpGroupSubscriptionButtonAction()
+setUpStickyHeaderObserver()
+updateLinkTargets()

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-sticky-header.js

@@ -0,0 +1,40 @@
+// we have different sticky header according to plans (individual, group, and student)
+// we need to show different sticky header based on active tab
+// the value of attribute 'data-ol-plans-v2-table-sticky-header' can be individual, group, or student
+export function switchStickyHeader(viewTab) {
+  document
+    .querySelectorAll('[data-ol-plans-v2-table-sticky-header]')
+    .forEach(el => {
+      const plan = el.getAttribute('data-ol-plans-v2-table-sticky-header')
+
+      if (plan === viewTab) {
+        el.hidden = false
+      } else {
+        el.hidden = true
+      }
+    })
+}
+
+function stickyHeaderObserverCallback(entry) {
+  const entryItem = entry[0]
+
+  if (entryItem.boundingClientRect.bottom <= 0) {
+    document
+      .querySelectorAll('[data-ol-plans-v2-table-sticky-header]')
+      .forEach(el => el.classList.remove('sticky'))
+  } else {
+    document
+      .querySelectorAll('[data-ol-plans-v2-table-sticky-header]')
+      .forEach(el => el.classList.add('sticky'))
+  }
+}
+
+export function setUpStickyHeaderObserver() {
+  const stickyHeaderStopEl = document.querySelector(
+    '[data-ol-plans-v2-table-sticky-header-stop]'
+  )
+
+  const observer = new IntersectionObserver(stickyHeaderObserverCallback)
+
+  observer.observe(stickyHeaderStopEl)
+}

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

@@ -0,0 +1,40 @@
+function sendShowModalEvent(plan) {
+  const groupPlan = plan.split('_')[1]
+
+  const groupModalRadioInputEl = document.querySelector(
+    `[data-ol-group-plan-code="${groupPlan}"]`
+  )
+
+  groupModalRadioInputEl.dispatchEvent(new CustomEvent('showmodal'))
+}
+
+function showGroupPlanModal(el) {
+  const plan = el.getAttribute('data-ol-start-new-subscription')
+
+  sendShowModalEvent(plan)
+
+  const modalEl = $('[data-ol-group-plan-modal]')
+  modalEl
+    .on('shown.bs.modal', function () {
+      const path = `${window.location.pathname}${window.location.search}`
+      history.replaceState(null, document.title, path + '#groups')
+    })
+    .on('hidden.bs.modal', function () {
+      history.replaceState(null, document.title, window.location.pathname)
+    })
+
+  modalEl.modal()
+}
+
+export function setUpGroupSubscriptionButtonAction() {
+  document.querySelectorAll('[data-ol-start-new-subscription]').forEach(el => {
+    const plan = el.getAttribute('data-ol-start-new-subscription')
+
+    if (plan === 'group_collaborator' || plan === 'group_professional') {
+      el.addEventListener('click', e => {
+        e.preventDefault()
+        showGroupPlanModal(el)
+      })
+    }
+  })
+}

services/web/frontend/js/pages/user/subscription/plans.js

@@ -67,7 +67,7 @@ function setUpSubscriptionTracking(linkEl) {
   })
 }
 
-function updateLinkTargets() {
+export function updateLinkTargets() {
   document.querySelectorAll('[data-ol-start-new-subscription]').forEach(el => {
     if (el.hasAttribute('data-ol-has-custom-href')) return
 

services/web/frontend/stylesheets/_style_includes.less

@@ -85,6 +85,7 @@
 @import 'app/editor.less';
 @import 'app/homepage.less';
 @import 'app/plans.less';
+@import 'app/plans-v2.less';
 @import 'app/recurly.less';
 @import 'app/bonus.less';
 @import 'app/register.less';

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

@@ -0,0 +1,1137 @@
+// m-a stands for: monthly annual
+
+@plans-v2-top-switch-item-height: 34px;
+@plans-v2-top-switch-item-border-radius: @plans-v2-top-switch-item-height / 2;
+@plans-v2-m-a-switch-height: 34px;
+@plans-v2-highlighted-text-height-desktop: 30px;
+@plans-v2-highlighted-text-height-mobile: 41px;
+@plans-v2-learn-more-link-color: hsl(206, 100%, 52%);
+@plans-v2-top-switch-group-width-mobile: 46%;
+@plans-v2-m-a-tooltip-arrow-z-index: 10;
+@plans-v2-m-a-tooltip-z-index: 20;
+@plans-v2-table-sticky-header-z-index: 100;
+@plans-v2-table-border-radius: 20px;
+
+.plans-v2-top-switch ul.plans-v2-nav {
+  display: flex;
+  justify-content: center;
+
+  li {
+    border: solid 1px @ol-blue-gray-3;
+    height: @plans-v2-top-switch-item-height;
+
+    &.plans-v2-top-switch-individual {
+      border-top-left-radius: @plans-v2-top-switch-item-border-radius;
+      border-bottom-left-radius: @plans-v2-top-switch-item-border-radius;
+    }
+
+    &.plans-v2-top-switch-student {
+      border-top-right-radius: @plans-v2-top-switch-item-border-radius;
+      border-bottom-right-radius: @plans-v2-top-switch-item-border-radius;
+    }
+
+    a {
+      padding: 4px 16px;
+      height: 100%;
+
+      // remove bootstrap default
+      &.btn:active {
+        box-shadow: none;
+      }
+
+      // on Firefox, there will be a visible dotted border on the li element
+      // when it's `active` / `focus`
+      // `outline: none` rule intends to eliminate that border
+      &:active,
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &.active {
+      background-color: @ol-blue-gray-4;
+
+      a {
+        color: @white;
+      }
+    }
+
+    &:not(.active) {
+      background-color: @white;
+    }
+  }
+
+  @media (max-width: @screen-xs-max) {
+    margin: 0 13px;
+
+    li {
+      height: unset;
+
+      &.plans-v2-top-switch-individual,
+      &.plans-v2-top-switch-student {
+        width: (100% - @plans-v2-top-switch-group-width-mobile) / 2;
+      }
+
+      &.plans-v2-top-switch-group {
+        width: @plans-v2-top-switch-group-width-mobile;
+
+        // force newline for the second span
+        span:first-child::after {
+          content: '';
+          display: block;
+        }
+
+        span:last-child {
+          font-weight: 400;
+        }
+      }
+
+      &.plans-v2-top-switch-individual,
+      &.plans-v2-top-switch-student {
+        a {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+        }
+      }
+
+      a {
+        white-space: unset;
+        padding: 4px 8px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.plans-v2-btn-header {
+  font-family: @font-family-sans-serif;
+  margin-top: @margin-sm;
+  text-shadow: 0 0 0;
+  background-color: @ol-blue;
+  color: @white;
+}
+
+.plans-v2-m-a-switch-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-top: @margin-xl;
+
+  .underline {
+    text-decoration: underline;
+  }
+
+  &.disabled {
+    span {
+      color: @ol-blue-gray-2;
+    }
+
+    .plans-v2-m-a-switch {
+      input + span {
+        background-color: @ol-blue-gray-2;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @media (max-width: @screen-xs-max) {
+    margin-top: 25px;
+  }
+}
+
+.plans-v2-m-a-switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: @plans-v2-m-a-switch-height;
+  margin: 0 @margin-lg;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  input + span {
+    background-color: @ol-blue-gray-4;
+  }
+
+  input:checked + span::before {
+    transform: translateX(26px);
+  }
+
+  span {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: @ol-blue-gray-1;
+    transition: 0.4s;
+    border-radius: @plans-v2-m-a-switch-height;
+
+    &::before {
+      position: absolute;
+      content: '';
+      height: 32px;
+      width: 32px;
+      left: 1px;
+      bottom: 1px;
+      background-color: @white;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  }
+}
+
+.plans-v2-m-a-switch-annual-text-container {
+  position: relative;
+}
+
+.plans-v2-m-a-tooltip {
+  position: absolute;
+  color: @white;
+  width: auto;
+  height: 35px;
+  padding: @padding-xs @padding-sm;
+  border-radius: 4px;
+  left: 59px;
+  top: -5px;
+  z-index: @plans-v2-m-a-tooltip-z-index;
+
+  span {
+    white-space: nowrap;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    top: 36px;
+
+    span {
+      font-size: @font-size-extra-small;
+      position: relative;
+    }
+  }
+}
+
+.plans-v2-m-a-tooltip-monthly {
+  background-color: rgba(0, 0, 0, 0.9);
+
+  .plans-v2-m-a-tooltip-arrow {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+
+  @media (max-width: @screen-xs-max) {
+    left: -86px;
+
+    .plans-v2-m-a-tooltip-arrow {
+      left: 102px;
+    }
+  }
+}
+
+.plans-v2-m-a-tooltip-annual {
+  background-color: @ol-green;
+
+  .plans-v2-m-a-tooltip-arrow {
+    background-color: @ol-green;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    left: -27px;
+
+    .plans-v2-m-a-tooltip-arrow {
+      left: 43px;
+    }
+  }
+}
+
+.plans-v2-m-a-tooltip-arrow {
+  background-color: rgba(0, 0, 0, 0.9);
+  position: absolute;
+  left: -4px;
+  top: 14px;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+  // hide the arrow behind the tooltip text
+  z-index: @plans-v2-m-a-tooltip-arrow-z-index;
+
+  @media (max-width: @screen-xs-max) {
+    width: 18px;
+    height: 18px;
+    top: -9px;
+  }
+}
+
+.page-header.top-page-header {
+  // remove page-header border & margin on mobile
+  @media (max-width: @screen-xs-max) {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+
+    h1 {
+      margin-top: 0;
+    }
+  }
+}
+
+.plans-v2-table-comments-icon {
+  height: 65px;
+
+  i {
+    font-size: 50px;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    height: 58px;
+  }
+}
+
+.plans-v2-table-container {
+  position: relative;
+}
+
+.plans-v2-license-picker-form {
+  margin-top: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  @media (max-width: @screen-xs-max) {
+    font-size: @font-size-small;
+    margin-top: 15px;
+    flex-direction: column;
+  }
+}
+
+.plans-v2-license-picker-select {
+  background-color: @white;
+  border: 1px solid #cccccc;
+  width: 64px;
+  height: 30px;
+  margin: 0 @margin-sm;
+  padding-left: @padding-sm;
+
+  @media (max-width: @screen-xs-max) {
+    margin: 0 15px;
+  }
+}
+
+.plans-v2-license-picker-educational-discount {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: @screen-xs-max) {
+    margin-top: 15px;
+  }
+}
+
+.plans-v2-license-picker-educational-discount-label {
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+
+  &.disabled span {
+    color: @ol-blue-gray-2;
+  }
+}
+
+input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox {
+  margin-top: 0;
+  margin-right: @margin-sm;
+
+  @media (max-width: @screen-xs-max) {
+    margin-right: 25px;
+    // scale the checkbox to around 30px width and height
+    transform: scale(2.307);
+  }
+}
+
+i.plans-v2-license-picker-educational-discount-question-icon {
+  margin-left: @margin-xs;
+
+  @media (max-width: @screen-xs-max) {
+    display: none;
+  }
+}
+
+span.plans-v2-license-picker-educational-discount-learn-more-container {
+  display: none;
+
+  @media (max-width: @screen-xs-max) {
+    margin-left: 5px;
+    display: inline;
+    // this white-space is important to ensure the "learn more" text won't get separated by a newline
+    white-space: nowrap;
+
+    span.plans-v2-license-picker-educational-discount-learn-more-text {
+      color: @plans-v2-learn-more-link-color;
+    }
+
+    .tooltip {
+      // force white-space to have initial value since the `white-space: nowrap` rule
+      // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above
+      // will also affect every child inside of it, including the generated tooltip
+      white-space: initial;
+    }
+  }
+}
+
+.plans-v2-table-individual,
+.plans-v2-table-student {
+  margin-top: 40px + @plans-v2-highlighted-text-height-desktop;
+
+  @media (max-width: @screen-xs-max) {
+    margin-top: 60px + @plans-v2-highlighted-text-height-desktop;
+
+    th .plans-v2-table-th-content {
+      min-height: 280px;
+    }
+  }
+}
+
+.plans-v2-table-group,
+.plans-v2-table-student {
+  tr {
+    // "hide" the last column on desktop by making the background-color as the default background color
+    th:last-of-type,
+    td:last-of-type {
+      background-color: @ol-blue-gray-0;
+    }
+
+    &:last-child {
+      td:first-child {
+        background-color: @ol-blue-gray-0;
+
+        .plans-v2-table-feature-name {
+          border-bottom-left-radius: @plans-v2-table-border-radius;
+        }
+      }
+
+      td:nth-last-child(2) {
+        background-color: @ol-blue-gray-0;
+
+        .plans-v2-table-cell-inner-content {
+          border-bottom-right-radius: @plans-v2-table-border-radius;
+        }
+      }
+    }
+
+    &:not(.plans-v2-table-divider) {
+      background-color: @white;
+    }
+  }
+
+  th {
+    &:nth-last-child(2) .plans-v2-table-th-content {
+      border-top-right-radius: @plans-v2-table-border-radius;
+    }
+
+    &:nth-child(2) .plans-v2-table-th-content {
+      border-top-left-radius: @plans-v2-table-border-radius;
+    }
+  }
+
+  @media (max-width: @screen-md-max) {
+    tr {
+      th:last-of-type,
+      td:last-of-type {
+        // Last column is only a UI placeholder for desktop view.
+        // We need to hide it for mobile to have the full table fully visible on mobile
+        // without any empty horizontal space.
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: @screen-xs-max) {
+    tr {
+      &:last-child {
+        td:first-child {
+          background-color: @ol-blue-gray-0;
+
+          .plans-v2-table-feature-name {
+            border-bottom-left-radius: @plans-v2-table-border-radius;
+          }
+        }
+
+        td:nth-last-child(2) {
+          background-color: @ol-blue-gray-0;
+
+          .plans-v2-table-cell-inner-content {
+            border-bottom-right-radius: @plans-v2-table-border-radius;
+          }
+        }
+      }
+
+      &:not(.plans-v2-table-divider) {
+        td:not(:first-of-type),
+        th:not(:first-of-type) {
+          // 33.33% is because table-group & table-student have 3 real column on mobile.
+          // It actually has 5 table column, but on mobile version,
+          // the first column become row and the last column is hidden since it is just a UI placeholder.
+          // We need to force 33.33% width to make each of 3 columns have an equal width of 1/3 screen width.
+          width: 33.33%;
+        }
+      }
+    }
+
+    th {
+      &:nth-last-child(2) .plans-v2-table-th-content {
+        border-top-right-radius: 0;
+      }
+
+      &:nth-child(2) .plans-v2-table-th-content {
+        border-top-left-radius: 0;
+      }
+    }
+  }
+}
+
+// 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`).
+// 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),
+// we need to force the last element of table student to have fixed height
+// so the `border-bottom-right-radius` will work properly
+// on the bottom right of the `plans-v2-table-student` (desktop only).
+// To remove this workaround
+// I think we need to change the whole table structure
+// so it can support direct border-radius without inner div hack
+// probably adding `border-collapse: separate` on the main table will do it, but need more research
+// (we have `border-collapse: collapse` as the default from our normalize.less)
+// 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 {
+      height: 62px;
+    }
+  }
+
+  @media (min-width: @screen-sm-min) {
+    tr:last-child td:nth-last-child(2) .plans-v2-table-cell-inner-content {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.plans-v2-table-individual {
+  tr {
+    &:last-child {
+      td:first-child {
+        background-color: @ol-blue-gray-0;
+
+        .plans-v2-table-feature-name {
+          border-bottom-left-radius: @plans-v2-table-border-radius;
+        }
+      }
+
+      td:last-child {
+        background-color: @ol-blue-gray-0;
+
+        .plans-v2-table-cell-inner-content {
+          border-bottom-right-radius: @plans-v2-table-border-radius;
+        }
+      }
+    }
+
+    &:not(.plans-v2-table-divider) td {
+      background-color: @white;
+    }
+  }
+
+  th {
+    &:last-child .plans-v2-table-th-content {
+      border-top-right-radius: @plans-v2-table-border-radius;
+    }
+
+    &:nth-child(2) .plans-v2-table-th-content {
+      border-top-left-radius: @plans-v2-table-border-radius;
+    }
+  }
+
+  @media (max-width: @screen-xs-max) {
+    tr:not(.plans-v2-table-divider) {
+      td:not(:first-of-type),
+      th:not(:first-of-type) {
+        // 25% is because table-individual have 4 real columns on mobile
+        // it actually has 5 table columns, but on mobile version, the first column become row
+        // we need to force 25% width to make each of 4 columns have an equal width of 1/4 screen width
+        width: 25%;
+      }
+    }
+
+    tr {
+      &:last-child {
+        td:first-child .plans-v2-table-feature-name {
+          border-bottom-left-radius: 0;
+        }
+
+        td:last-child .plans-v2-table-cell-inner-content {
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    th {
+      &:last-child .plans-v2-table-th-content {
+        border-top-right-radius: 0;
+      }
+
+      &:nth-child(2) .plans-v2-table-th-content {
+        border-top-left-radius: 0;
+      }
+    }
+  }
+}
+
+.plans-v2-table-group {
+  margin-top: 26px + @plans-v2-highlighted-text-height-desktop;
+}
+
+.plans-v2-table {
+  background-color: @ol-blue-gray-0;
+  margin-bottom: 15px;
+  table-layout: fixed;
+  width: 100%;
+
+  th,
+  td {
+    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) {
+      border-right: 1px solid @ol-blue-gray-0;
+
+      @media (max-width: @screen-xs-max) {
+        border-right: none;
+      }
+    }
+  }
+
+  th {
+    border-top: 0;
+    font-family: @headings-font-family;
+    font-size: @font-size-h2;
+    font-weight: @headings-font-weight;
+    line-height: @headings-line-height;
+    vertical-align: top;
+    padding: 0;
+    position: relative;
+    background-color: @ol-blue-gray-0;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  td {
+    vertical-align: middle;
+
+    &:first-child {
+      border-left: 0;
+      text-align: left;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  tr {
+    &:first-child th {
+      // keep the position here, otherwise messes up border on safari
+      position: relative;
+    }
+
+    // css hack for table border-radius on the first feature name
+    &:nth-child(2) {
+      td:first-child {
+        background-color: @ol-blue-gray-0;
+
+        .plans-v2-table-feature-name {
+          border-top-left-radius: @plans-v2-table-border-radius;
+        }
+      }
+    }
+
+    &:not(.plans-v2-table-row-last-row-per-section):not(.plans-v2-table-divider):not(:last-of-type) {
+      border-bottom: 1px solid @ol-blue-gray-0;
+    }
+
+    &:last-child td.plans-v2-table-green-highlighted {
+      border-bottom: 2px solid @ol-green;
+
+      @media (max-width: @screen-xs-max) {
+        border-bottom: unset;
+      }
+    }
+  }
+
+  .fa-check {
+    color: @green;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    // highlight rows on hover
+    tr:not(.plans-v2-table-divider):hover td {
+      background-color: @table-hover-bg;
+
+      .plans-v2-table-feature-name,
+      .plans-v2-table-cell-inner-content {
+        background-color: @table-hover-bg;
+      }
+    }
+  }
+
+  @media (max-width: @screen-sm-max) {
+    font-size: @font-size-small;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    tr {
+      display: flex;
+      // for mobile, we need to show the feature name (the first column) as its own row
+      // the flex-flow will make the whole tr overflow to a next row if
+      // total td width combined is bigger than viewport width
+      // so, one tr can have multiple "visible" row depending on the total width.
+      flex-flow: row wrap;
+      justify-content: space-around;
+    }
+
+    th {
+      font-size: 12px;
+    }
+
+    // hide the first column header
+    tr:first-child th:first-child {
+      display: none;
+    }
+
+    // for mobile, we need to show the feature name (the first td) as its own row
+    // the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
+    // will have the full width of viewport,
+    // and making the first td appear like the it is in its own row (although it's technically still on the same tr as the other tds)
+    td:first-child {
+      background: @gray-lightest;
+      width: 100vw;
+
+      span.plans-v2-table-feature-name {
+        width: 100%;
+
+        span {
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+// plans-v2-table-cell-inner-content 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 {
+  background-color: @white;
+  padding: 6px;
+}
+
+.plans-v2-table-th-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 321px;
+  height: 100%;
+  background-color: @white;
+  padding: 10px 13px;
+
+  @media (max-width: @screen-md-max) {
+    min-height: 330px;
+  }
+
+  @media (max-width: @screen-sm-max) {
+    padding-left: @padding-xs;
+    padding-right: @padding-xs;
+  }
+}
+
+.plans-v2-table-btn-buy-container-desktop {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 60px;
+
+  @media (max-width: @screen-xs-max) {
+    display: none;
+  }
+}
+
+.plans-v2-table-btn-buy-container-mobile {
+  display: none;
+
+  @media (max-width: @screen-xs-max) {
+    display: flex;
+    flex-direction: column;
+    min-height: 50px;
+    margin-top: @padding-sm;
+  }
+}
+
+.plans-v2-table-btn-buy {
+  font-family: @font-family-sans-serif;
+  padding: 4px 15px 5px;
+
+  @media (max-width: @screen-sm-max) {
+    font-size: @font-size-small;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    padding-left: 9px;
+    padding-right: 9px;
+    // truncating group plans long button text for mobile
+    .hidden-mobile {
+      display: none;
+    }
+  }
+}
+
+p.plans-v2-table-th-content-title {
+  font-size: @font-size-large;
+  padding-bottom: @padding-sm;
+  border-bottom: 1px solid @gray-lighter;
+  margin-bottom: @margin-lg;
+
+  @media (max-width: @screen-md-max) {
+    font-size: @font-size-base;
+  }
+
+  // `plans-v2-table-th-content-title` is visually invisible on screen size less than @screen-xs-max
+  // because there is a sticky header (`plans-v2-table-sticky-header` class) that "replace" the content visually
+  // (see the `@plans-v2-table-sticky-header-z-index` variable that make the sticky header element is "above" the whole table)
+  // however, we still need to properly styling the `plans-v2-table-th-content-title` for small screen size to
+  // fit this element to the size of the sticky header
+  // this trick is used because th element can not have a `position: sticky` rule, at least for our use case
+  @media (max-width: @screen-xs-max) {
+    min-height: 40px;
+    margin-bottom: @margin-md;
+    font-size: @font-size-small;
+    padding-bottom: 0;
+  }
+}
+
+p.plans-v2-table-th-content-benefit,
+ul.plans-v2-table-th-content-benefit {
+  padding-top: 15px;
+  font-size: @font-size-small;
+  font-family: @font-family-sans-serif;
+  line-height: 23px;
+}
+
+ul.plans-v2-table-th-content-benefit {
+  padding-left: 15px;
+  text-align: left;
+  margin-bottom: 0;
+
+  li a {
+    color: @ol-blue-gray-3;
+    text-decoration: underline;
+  }
+}
+
+// this class should only appear on the group table
+.plans-v2-group-total-price {
+  font-weight: 700;
+}
+
+.plans-v2-table-price-container {
+  position: relative;
+}
+
+p.plans-v2-table-price-period-label {
+  margin: 0;
+  font-size: @font-size-small;
+  line-height: 23px;
+  color: @ol-blue-gray-3;
+  font-family: @font-family-sans-serif;
+}
+
+p.plans-v2-table-price {
+  margin: 0;
+
+  span {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 42px;
+
+    @media (max-width: @screen-xs-max) {
+      line-height: 35px;
+      font-size: @font-size-large;
+    }
+  }
+}
+
+strike.plans-v2-table-annual-price-before-discount {
+  position: absolute;
+  top: -27px;
+  font-weight: 700;
+  font-size: @font-size-small;
+  line-height: 42px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  color: @ol-blue-gray-2;
+
+  @media (max-width: @screen-xs-max) {
+    font-size: @font-size-extra-small;
+  }
+}
+
+small.plans-v2-table-th-content-additional-link {
+  margin-top: @margin-xs;
+  font-size: @font-size-extra-small;
+  height: 16px;
+  font-family: @font-family-sans-serif;
+
+  a {
+    color: @ol-blue-gray-5;
+    text-decoration: underline;
+  }
+}
+
+.plans-v2-table-feature-name {
+  background-color: @white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 6px 6px 18px;
+
+  i.plans-v2-table-feature-name-question-icon {
+    margin-left: 10px;
+  }
+
+  span.plans-v2-table-feature-name-learn-more-container {
+    display: none;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    display: inline-block;
+    text-align: left;
+    padding: 6px;
+    width: 100%;
+    background-color: @ol-blue-gray-0;
+
+    i.plans-v2-table-feature-name-question-icon {
+      display: none;
+    }
+
+    span.plans-v2-table-feature-name-learn-more-container {
+      margin-left: 5px;
+      display: inline;
+      // this white-space is important to ensure the "learn more" text won't get separated by a newline
+      white-space: nowrap;
+
+      span.plans-v2-table-feature-name-learn-more-text {
+        color: @plans-v2-learn-more-link-color;
+      }
+
+      .tooltip {
+        // force white-space to have initial value since the `white-space: nowrap` rule
+        // on .plans-v2-table-feature-name-learn-more-container selector (the current code block) above
+        // will also affect every child inside of it, including the generated tooltip
+        white-space: initial;
+      }
+    }
+  }
+}
+
+tr.plans-v2-table-divider {
+  background-color: @ol-blue-gray-1;
+
+  // direct child selector to NOT affect the generated tooltip
+  td > div {
+    text-align: center;
+    padding: 6px;
+
+    .plans-v2-table-divider-label {
+      margin-bottom: 0;
+      margin-right: 5px;
+    }
+
+    .plans-v2-table-divider-learn-more-container {
+      display: none;
+    }
+  }
+
+  @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] {
+      padding-top: 0;
+      padding-right: 0;
+      padding-left: 0;
+
+      // direct child selector to NOT affect the generated tooltip
+      > div {
+        background-color: @ol-blue-gray-1;
+        padding: 15px 5px;
+
+        i.plans-v2-table-divider-question-icon {
+          display: none;
+        }
+
+        .plans-v2-table-divider-learn-more-container {
+          display: inline;
+          // this white-space is important to ensure the "learn more" text won't get separated by a newline
+          white-space: nowrap;
+
+          span.plans-v2-table-divider-learn-more-text {
+            color: @plans-v2-learn-more-link-color;
+          }
+
+          // force white-space to have initial value since the `white-space: nowrap` rule
+          // on .plans-v2-table-divider-learn-more-container selector (the current code block) above
+          // will also affect every child inside of it, including the generated tooltip
+          .tooltip {
+            white-space: initial;
+          }
+        }
+      }
+    }
+  }
+}
+
+.plans-v2-table-green-highlighted {
+  border-left: 2px solid @ol-green;
+  border-right: 2px solid @ol-green;
+
+  @media (max-width: @screen-xs-max) {
+    border-left: unset;
+    border-right: unset;
+  }
+}
+
+p.plans-v2-table-green-highlighted-text {
+  border: 2px solid @ol-green;
+  position: absolute;
+  top: -1 * @plans-v2-highlighted-text-height-desktop;
+  left: -2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // 4px because border width is 2px each side (left and right)
+  width: calc(100% + 4px);
+  font-family: @font-family-sans-serif;
+  font-size: @font-size-small;
+  line-height: 19px;
+  font-weight: 700;
+  background-color: @ol-green;
+  border-radius: @plans-v2-table-border-radius @plans-v2-table-border-radius 0 0;
+  color: @white;
+  height: @plans-v2-highlighted-text-height-desktop;
+  margin: 0;
+
+  @media (max-width: @screen-sm-max) {
+    top: -1 * @plans-v2-highlighted-text-height-mobile;
+    height: @plans-v2-highlighted-text-height-mobile;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    padding-left: 5px;
+    padding-right: 5px;
+    font-size: @font-size-extra-small;
+    line-height: 15px;
+  }
+}
+
+.plans-v2-table-sticky-header-group,
+.plans-v2-table-sticky-header-student {
+  .plans-v2-table-sticky-header-item {
+    // has 3 visible column on the table for mobile view
+    width: 33.33%;
+  }
+}
+
+.plans-v2-table-sticky-header-individual {
+  .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-student {
+  margin-bottom: -140px;
+  margin-top: 100px;
+
+  @media (max-width: @screen-xs-max) {
+    margin-top: 118px;
+  }
+}
+
+.plans-v2-table-sticky-header {
+  display: none;
+
+  @media (max-width: @screen-xs-max) {
+    display: flex;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: @plans-v2-table-sticky-header-z-index;
+    height: 40px;
+
+    // separate sticky class because we want to remove the class (to visually remove the sticky header)
+    // with javascript whenever the table is not visible anymore
+    &.sticky {
+      position: sticky;
+    }
+  }
+}
+
+.plans-v2-table-sticky-header-item {
+  background-color: @white;
+
+  span {
+    margin: 0px @margin-xs;
+    border-bottom: 1px solid #cccccc;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: @font-family-serif;
+
+    @media (max-width: @screen-xs-max) {
+      font-size: @font-size-small;
+      text-align: center;
+      line-height: 19px;
+    }
+  }
+}
+
+.plans-v2-table-sticky-header-item-highlighted span {
+  color: @ol-green;
+}
+
+.plans-v2-faq {
+  // need for specificity to override default a color
+  p > a {
+    color: @ol-blue;
+  }
+}

services/web/locales/en.json

@@ -54,6 +54,8 @@
   "also_provides_free_plan": "__appName__ also provides a free plan -- simply <0>register here</0> to get started.",
   "increased_compile_timeout": "Increased compile timeout",
   "compile_timeout": "Compile timeout (minutes)",
+  "compile_timeout_short": "Compile timeout",
+  "compile_timeout_short_info": "This is how much time you get to compile your project on the Overleaf servers. For short and simple projects, 1 minute should be enough, but you may need longer for complex or longer projects",
   "collabs_per_proj_single": "__collabcount__ collaborator per project",
   "premium_feature": "Premium feature",
   "premium_features": "Premium features",
@@ -155,7 +157,6 @@
   "project_ownership_transfer_confirmation_2": "This action cannot be undone. The new owner will be notified and will be able to change project access settings (including removing your own access).",
   "change_owner": "Change owner",
   "change_project_owner": "Change Project Owner",
-  "faq_pay_by_invoice_answer": "Yes, if you’d like to purchase a group account or site license and would prefer to pay by invoice,\r\nor need to raise a purchase order, please <0>let us know</0>.\r\nFor individual accounts or accounts with monthly billing, we can only accept payment online\r\nvia credit or debit card, or PayPal.",
   "password_too_long_please_reset": "Maximum password length exceeded. Please reset your password.",
   "view_other_options_to_log_in": "View other options to log in",
   "we_logged_you_in": "We have logged you in.",
@@ -374,6 +375,7 @@
   "overall_theme": "Overall theme",
   "faq_how_does_free_trial_works_answer": "You get full access to your chosen __appName__ plan during your __len__-day free trial. There is no obligation to continue beyond the trial. Your card will be charged at the end of your __len__ day trial unless you cancel before then. You can cancel via your subscription settings.",
   "thousands_templates": "Thousands of templates",
+  "thousands_templates_info": "Produce beautiful documents starting from our gallery of LaTeX templates for journals, conferences, theses, reports, CVs and much more.",
   "get_instant_access_to": "Get instant access to",
   "ask_proj_owner_to_upgrade_for_full_history": "Please ask the project owner to upgrade to access this project’s full history.",
   "currently_seeing_only_24_hrs_history": "You’re currently seeing the last 24 hours of changes in this project.",
@@ -448,7 +450,9 @@
   "in_good_company": "You’re In Good Company",
   "unlimited": "Unlimited",
   "priority_support": "Priority support",
+  "priority_support_info": "Our helpful Support team will prioritise and escalate your support requests where necessary.",
   "dropbox_integration_lowercase": "Dropbox integration",
+  "dropbox_integration_lowercase_info": "You can synchronize your projects with a Dropbox folder. Changes in Overleaf are automatically pushed to Dropbox and vice versa.",
   "github_integration_lowercase": "Git and GitHub integration",
   "discounted_group_accounts": "discounted group accounts",
   "referring_your_friends": "referring your friends",
@@ -458,27 +462,43 @@
   "best_value": "Best value",
   "faq_how_free_trial_works_question": "How does the free trial work?",
   "faq_change_plans_question": "Can I change plans later?",
+  "faq_change_plans_or_cancel_question": "Can I change plans or cancel later?",
   "faq_do_collab_need_premium_question": "Do my collaborators also need premium accounts?",
+  "faq_do_collab_need_on_paid_plan_question": "Do my collaborators also need a license?",
   "faq_need_more_collab_question": "What if I need more collaborators?",
   "faq_purchase_more_licenses_question": "Can I purchase additional licenses for my colleagues?",
   "faq_monthly_or_annual_question": "Should I choose monthly or annual billing?",
   "faq_how_to_pay_question": "Can I pay online with a credit or debit card, or PayPal?",
   "faq_pay_by_invoice_question": "Can I pay by invoice / purchase order?",
+  "faq_how_does_a_group_plan_work_question": "How does a group plan work?",
   "reference_search": "Advanced reference search",
   "reference_search_info": "You can always search by citation key, and advanced reference search lets you also search by author, title, year or journal.",
+  "reference_search_info_v2": "It’s easy to find your references - you can search by author, title, year or journal. You can still search by citation key too.",
   "reference_sync": "Reference manager sync",
   "reference_sync_info": "Manage your reference library in Mendeley and link it directly to a .bib file in Overleaf, so you can easily cite anything in your Mendeley library.",
   "faq_how_free_trial_works_answer": "You get full access to your chosen __appName__ plan during your __len__-day free trial. There is no obligation to continue beyond the trial. Your card will be charged at the end of your __len__ day trial unless you cancel before then. You can cancel via your subscription settings.",
+  "faq_how_free_trial_works_answer_v2": "You get full access to your chosen __appName__ plan during your __len__ day free trial, and there is no obligation to continue beyond the trial. Your card will be charged at the end of your trial unless you cancel before then. To cancel, go to your subscription settings in your account (the trial will continue for the full __len__ days).",
   "faq_change_plans_answer": "Yes, you can change your plan at any time via your subscription settings. This includes options to switch to a different plan, or to switch between monthly and annual billing options, or to cancel to downgrade to the free plan.",
+  "faq_change_plans_or_cancel_answer": "You can change your plan at any time via your subscription settings. You can switch to a different plan, or switch between monthly and annual billing options, or cancel to downgrade to the free plan. When cancelling, your subscription will continue until the end of the billing period.",
   "faq_do_collab_need_premium_answer": "Premium features, such as tracked changes, will be available to your collaborators on projects that you have created, even if those collaborators have free accounts.",
+  "faq_do_collab_need_on_paid_plan_answer": "No, they can be on the free plan. If you are on a paid plan, some premium features will be available to your collaborators in projects that you have created, even if those collaborators are on the free plan. For more information, read about <0>account and subscription</0> and <1>how premium features work</1>.",
   "faq_need_more_collab_answer": "You can upgrade to one of our paid accounts, which support more collaborators. You can also earn additional collaborators on our free accounts by __referFriendsLink__.",
   "faq_purchase_more_licenses_answer": "Yes, we provide __groupLink__, which are easy to manage, help to save on paperwork, and reduce the cost of purchasing multiple licenses.",
   "faq_monthly_or_annual_answer": "Annual billing offers a way to cut down on your admin and paperwork. If you’d prefer to manage a single payment every year, instead of twelve, annual billing is for you.",
   "faq_how_to_pay_answer": "Yes, you can. All major credit and debit cards and Paypal are supported. Select the plan you’d like above, and you’ll have the option to pay by card or to go through to PayPal when it’s time to set up payment.",
+  "faq_pay_by_invoice_answer": "Yes, if you’d like to purchase a group account or site license and would prefer to pay by invoice,\r\nor need to raise a purchase order, please <0>let us know</0>.\r\nFor individual accounts or accounts with monthly billing, we can only accept payment online\r\nvia credit or debit card, or PayPal.",
+  "faq_pay_by_invoice_answer_v2": "Yes, if you’d like to purchase a group subscription for five or more people, or a site license. For individual subscriptions we can only accept payment online via credit card, debit card or PayPal.",
+  "faq_how_does_a_group_plan_work_answer": "Group subscriptions are a way to purchase more than one license. They are easy to manage, help to save on paperwork, and reduce the cost of purchasing multiple licenses. If you have any questions, read more about <0>joining a group subscription</0> and <1>managing a group subscription</1>. You can purchase group subscriptions above or by <2>contacting us</2>.",
+  "account_and_subscriptions": "account and subscriptions",
+  "how_premium_features_work": "how premium features work",
   "powerful_latex_editor": "Powerful LaTeX editor",
+  "powerful_latex_editor_and_realtime_collaboration": "Powerful LaTeX editor & real-time collaboration",
+  "powerful_latex_editor_and_realtime_collaboration_info": "Spell check, intelligent autocomplete, syntax highlighting, dozens of color themes, vim and emacs bindings, help with LaTeX warnings and error messages, and more. Everyone always has the latest version, and you can see your collaborators’ cursors and changes in real time.",
   "realtime_track_changes": "Real-time track changes",
   "realtime_track_changes_info": "Now you don’t have to choose between tracked changes and typesetting in LaTeX. Leave comments, keep track of TODOs, and accept or reject others’ changes.",
+  "realtime_track_changes_info_v2": "Switch on track changes to see who made every change, accept or reject others’ changes, and write comments.",
   "full_doc_history_info": "Travel back in time to see any version and who made changes. No matter what happens, we’ve got your back.",
+  "full_doc_history_info_v2": "You can see all the edits in your project and who made every change. Add labels to quickly access specific versions.",
   "dropbox_integration_info": "Work online and offline seamlessly with two-way Dropbox sync. Changes you make locally will be sent automatically to the version on Overleaf and vice versa.",
   "github_integration_info": "Push and pull commits to and from GitHub or directly from Git, so you or your collaborators can work offline with Git and online with Overleaf.",
   "latex_editor_info": "Everything you need in a modern LaTeX editor --- spell check, intelligent autocomplete, syntax highlighting, dozens of color themes, vim and emacs bindings, help with LaTeX warnings and error messages, and much more.",
@@ -922,6 +942,7 @@
   "doesnt_match": "Doesn’t match",
   "dropbox_integration": "Dropbox Integration",
   "learn_more": "Learn more",
+  "learn_more_lowercase": "learn more",
   "dropbox_is_premium": "Dropbox Sync is a premium feature",
   "account_is_linked": "Account is linked",
   "unlink_dropbox": "Unlink Dropbox",
@@ -1391,6 +1412,7 @@
   "university_licences": "University Licenses",
   "security": "Security",
   "contact_us": "Contact Us",
+  "contact_us_lowercase": "Contact us",
   "thanks": "Thanks",
   "blog": "Blog",
   "latex_editor": "LaTeX Editor",
@@ -1429,6 +1451,7 @@
   "free_forever": "Free forever",
   "low_priority_compile": "Low priority compiling",
   "unlimited_projects": "Unlimited projects",
+  "unlimited_projects_info": "Your projects are private by default. This means that only you can view them, and only you can allow other people to access them.",
   "unlimited_compiles": "Unlimited compiles",
   "full_history_of_changes": "Full history of changes",
   "highest_priority_compiling": "Highest priority compiling",
@@ -1637,10 +1660,74 @@
   "keep_your_email_updated": "Keep your email updated so that you don’t lose access to your account and data.",
   "learn_more_about_emails": "<0>Learn more</0> about managing your __appName__ emails.",
   "thank_you_email_checked": "Thank you, we’re now taking you back to the projects page",
-  "change_primary_email_address_instructions": "To change your primary email, please add your new primary email address first (by clicking <0>Add another email</0>) and confirm it. Then click the <0>Make Primary</0> button. <1>Learn more</1> about managing your __appName__ emails.",
+  "change_primary_email_address_instructions": "To change your primary email, please add your new primary email address first (by clicking <0>Add another email</0>) and confirm it. Then click the <0>Make Primary</0> button. <1>Learn more</1> about managing your __appName__ emails.", 
   "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey</0>.",
+  "number_of_users": "Number of users",
+  "number_of_users_info": "The number of users that can upgrade their Overleaf account if you purchase this plan.",
+  "student_plans": "Student plans",
+  "group_plans": "Group plans",
+  "max_collab_per_project": "Max. collaborators per project",
+  "max_collab_per_project_info": "The number of people you can invite to work on each project. They just need to have an Overleaf account. They can be different people in each project.",
+  "you_and_collaborators_get_access_to": "You and your project collaborators get access to",
+  "you_and_collaborators_get_access_to_info": "These features are available to you and your collaborators (other Overleaf users that you invite to your projects).",
+  "you_get_access_to": "You get access to",
+  "you_get_access_to_info": "These features are available only to you (the subscriber).",
+  "symbol_palette": "Symbol palette",
+  "symbol_palette_info": "A quick and convenient way to insert math symbols into your document.",
+  "github_only_integration_lowercase": "Github integration",
+  "github_only_integration_lowercase_info": "Link your Overleaf projects directly to a GitHub repository that acts as a remote repository for your overleaf project. This allows you to share with collaborators outside of Overleaf, and integrate Overleaf into more complex workflows.",
+  "git_integration_lowercase": "Git integration",
+  "git_integration_lowercase_info": "You can clone your Overleaf project to a local repository, treating your Overleaf project as a remote repository that changes can be pushed to and pulled from.",
+  "mendeley_integration_lowercase": "Mendeley integration",
+  "mendeley_integration_lowercase_info": "Manage your reference library in Mendeley, and link it directly to .bib files in Overleaf, so you can easily cite anything from your libraries.",
+  "zotero_integration_lowercase": "Zotero integration",
+  "zotero_integration_lowercase_info": "Manage your reference library in Zotero, and link it directly to .bib files in Overleaf, so you can easily cite anything from your libraries.",
+  "only_one_collaborator": "Only one collaborator",
+  "up_to": "Up to",
+  "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",
+  "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",
+  "usage_metrics_info": "Metrics that show how many users are accessing the licence, how many projects are being created and worked on, and how much collaboration is happening in Overleaf.",
+  "sso_integration": "SSO integration",
+  "sso_integration_info": "Overleaf offers a standard SAML-based Single Sign On integration.",
+  "sitewide_option_available": "Site-wide option available",
+  "sitewide_option_available_info": "Users are automatically upgraded when they register or add their email address to Overleaf (domain-based enrollment or SSO).",
+  "custom_resource_portal": "Custom resource portal",
+  "custom_resource_portal_info": "You can have your own custom portal page on Overleaf. This is a great place for your users to find out more about Overleaf, access templates, FAQs and Help resources, and sign up to Overleaf.",
+  "personalised_onboarding": "Personalised onboarding",
+  "personalised_onboarding_info": "We’ll help you get everything set up and then we’re here to answer questions from your users about the platform, templates or LaTeX!",
+  "dedicated_account_manager": "Dedicated account manager",
+  "dedicated_account_manager_info": "Our Account Management Team will be able to assist with requests, questions and to help you spread the word about Overleaf with promotional materials, training resources and webinars.",
+  "group_standard": "Group Standard",
+  "group_professional": "Group Professional",
+  "organization": "Organization",
+  "group_admins_get_access_to": "Group admins get access to",
+  "group_admins_get_access_to_info": "Special features available only on group plans.",
+  "group_members_and_collaborators_get_access_to": "Group members and their project collaborators get access to",
+  "group_members_and_collaborators_get_access_to_info": "These features are available to group members and their collaborators (other Overleaf users invited to projects owned a group member).",
+  "group_members_get_access_to": "Group members get access to",
+  "group_members_get_access_to_info": "These features are available only to group members (subscribers).",
+  "best_choices_companies_universities_non_profits": "Best choice for companies, universities and non-profits",
+  "for_groups_or_site_wide": "For groups or site-wide",
+  "also_available_as_on_premises": "Also available as On-Premises",
+  "how_many_licenses_are_you_looking_for": "How many licenses are you looking for?",
+  "include_educational_discount": "Include educational discount",
+  "include_educational_discount_info": "Overleaf offers a 40% educational discount for groups of 10 or more. Applies to students or faculty using Overleaf for teaching.",
+  "try_for_free": "Try for free",
+  "customize": "Customize",
+  "your_plan_lowercase": "your plan",
+  "save_20_percent_by_paying_annually": "Save 20% by paying annually",
+  "saving_20_percent": "Saving 20%!",
+  "feature_included": "Feature included",
+  "feature_not_included": "Feature not included",
+  "or_contact_us": "or <0>contact us</0>",
+  "or_buy_now": "or <0>buy now</0>",
+  "all_our_group_plans_offer_educational_discount": "All of our <0>group plans</0> offer an <1>educational discount</1> for students and faculty",
   "unlink_dropbox_folder": "Unlink Dropbox Account",
   "unlink_dropbox_warning": "Any projects that you have synced with Dropbox will be disconnected and no longer kept in sync with Dropbox. Are you sure you want to unlink your Dropbox account?",
-  "save_20_percent_by_paying_annually": "Save 20% by paying annually",
-  "saving_20_percent": "Saving 20%!"
+  "group_plans_are_only_available_on_an_annual_billing_cycle": "Group plans are only available on an annual billing cycle"
 }