Merge pull request #14874 from overleaf/tm-compile-timeout-20s-plans-pages

Changes to the plans/interstitial pages for compile timeout reduction

GitOrigin-RevId: 753e6eaf98d70b8aa994ec9dcad5185dbbeb5a42

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

@@ -148,6 +148,24 @@ async function plansPage(req, res) {
     plansPageViewSegmentation
   )
 
+  let showNewCompileTimeoutVariant = false
+  const compileAssignment = await SplitTestHandler.promises.getAssignment(
+    req,
+    res,
+    'compile-backend-class-n2d'
+  )
+  if (compileAssignment?.variant === 'n2d') {
+    const timeoutAssignment = await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'compile-timeout-20s'
+    )
+    if (timeoutAssignment?.variant === '20s') {
+      // there may be anonymous/logged out users in this group
+      showNewCompileTimeoutVariant = true
+    }
+  }
+
   res.render('subscriptions/plans', {
     title: 'plans_and_pricing',
     currentView,
@@ -166,6 +184,7 @@ async function plansPage(req, res) {
     showInrGeoBanner,
     showBackToSchoolBanner,
     annualTrialsAssignment: annualTrialsAssignment?.variant,
+    showNewCompileTimeoutVariant,
   })
 }
 
@@ -442,6 +461,24 @@ async function interstitialPaymentPage(req, res) {
         templatePath = 'subscriptions/interstitial-payment'
     }
 
+    let showNewCompileTimeoutVariant = false
+    const compileAssignment = await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'compile-backend-class-n2d'
+    )
+    if (compileAssignment?.variant === 'n2d') {
+      const timeoutAssignment = await SplitTestHandler.promises.getAssignment(
+        req,
+        res,
+        'compile-timeout-20s'
+      )
+      if (timeoutAssignment?.variant === '20s') {
+        // there may be anonymous/logged out users in this group
+        showNewCompileTimeoutVariant = true
+      }
+    }
+
     res.render(templatePath, {
       title: 'subscribe',
       itm_content: req.query?.itm_content,
@@ -451,6 +488,7 @@ async function interstitialPaymentPage(req, res) {
       interstitialPaymentConfig,
       showSkipLink,
       showInrGeoBanner,
+      showNewCompileTimeoutVariant,
     })
   }
 }

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

@@ -60,6 +60,17 @@ const config = {
             student: 'four_minutes',
           },
         },
+        {
+          feature: 'compile_servers',
+          info: 'compile_servers_info',
+          value: 'str',
+          plans: {
+            free: 'fast',
+            collaborator: 'fastest',
+            professional: 'fastest',
+            student: 'fastest',
+          },
+        },
         {
           feature: 'realtime_track_changes',
           info: 'realtime_track_changes_info_v2',

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

@@ -41,6 +41,16 @@ const individualPlans = [
           professional: 'four_minutes',
         },
       },
+      {
+        feature: 'compile_servers',
+        info: 'compile_servers_info',
+        value: 'str',
+        plans: {
+          free: 'fast',
+          collaborator: 'fastest',
+          professional: 'fastest',
+        },
+      },
       {
         feature: 'realtime_track_changes',
         info: 'realtime_track_changes_info_v2',

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

@@ -69,6 +69,13 @@ block content
 					//- 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)
 
+					.row.row-spaced-large.text-centered
+						.col-xs-12
+							p.text-centered
+								strong *
+								|  
+								| !{translate("the_free_compile_timeout_will_be_changing_soon_with_faster_servers", {}, [{name: 'a', attrs: {href: '/blog/changes-to-free-compile-timeouts-and-servers', rel: 'noopener noreferrer', target: '_blank'}}])}
+
 		if (showSkipLink)
 			.row.row-spaced-small.text-center
 				a(href='/project'

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

@@ -69,6 +69,13 @@ block content
 					//- 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)
 
+					.row.row-spaced-large.text-centered
+						.col-xs-12
+							p.text-centered
+								strong *
+								|  
+								| !{translate("the_free_compile_timeout_will_be_changing_soon_with_faster_servers", {}, [{name: 'a', attrs: {href: '/blog/changes-to-free-compile-timeouts-and-servers', rel: 'noopener noreferrer', target: '_blank'}}])}
+
 		if (showSkipLink)
 			.row.row-spaced-small.text-center
 				a(href='/project'

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

@@ -69,6 +69,13 @@ block content
 					//- 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)
 
+					.row.row-spaced-large.text-centered
+						.col-xs-12
+							p.text-centered
+								strong *
+								|  
+								| !{translate("the_free_compile_timeout_will_be_changing_soon_with_faster_servers", {}, [{name: 'a', attrs: {href: '/blog/changes-to-free-compile-timeouts-and-servers', rel: 'noopener noreferrer', target: '_blank'}}])}
+
 		if (showSkipLink)
 			.row.row-spaced-small.text-center
 				a(href='/project'

services/web/app/views/subscriptions/plans.pug

@@ -54,6 +54,10 @@ block content
 					include ./plans/_cards_controls_tables
 					.row.row-spaced-large.text-centered
 						.col-xs-12
+							p.text-centered
+								strong *
+								|  
+								| !{translate("the_free_compile_timeout_will_be_changing_soon_with_faster_servers", {}, [{name: 'a', attrs: {href: '/blog/changes-to-free-compile-timeouts-and-servers', rel: 'noopener noreferrer', target: '_blank'}}])}
 							p.text-centered
 								strong #{translate("all_prices_displayed_are_in_currency", {recommendedCurrency})}
 								|  

services/web/app/views/subscriptions/plans/_mixins.pug

@@ -89,54 +89,71 @@ mixin plans_v2_table(period, config)
 							) #{translate("learn_more_lowercase")}
 							span )
 		for feature, featureIndex in featuresPerSection.items
-			tr(
-				class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
-			)
-				td(
-					event-tracking="plans-page-table"
-					event-tracking-trigger="hover"
-					event-tracking-ga="subscription-funnel"
-					event-tracking-label=`${feature.feature}`
-					colspan=baseColspan
+			unless !showNewCompileTimeoutVariant && feature.feature === 'compile_servers'
+				tr(
+					class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
 				)
-					.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)}
-				for plan, planIndex in Object.keys(feature.plans)
-					- var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {}
-					- var colspan = tableHeadOptions.colspan || baseColspan
-					-
-						if (planIndex === discountedColumn.index) {
-							var tdClass = 'plans-v2-table-discount-highlighted'
-						} else if (planIndex === config.highlightedColumn.index) {
-							var tdClass = 'plans-v2-table-green-highlighted'
-						} else if (planIndex === config.highlightedColumn.index - 1) {
-							var tdClass = 'plans-v2-table-cell-before-green-highlighted-column'
-						} else {
-							var tdClass = ''
-						}
 					td(
-						class=tdClass
-						colspan=colspan
+						event-tracking="plans-page-table"
+						event-tracking-trigger="hover"
+						event-tracking-ga="subscription-funnel"
+						event-tracking-label=`${feature.feature}`
+						colspan=baseColspan
 					)
-						+table_cell(feature, plan)
+						.plans-v2-table-feature-name
+							if feature.info
+								span #{translate(feature.feature)}
+								//- will only appear on screen width >= 768px (using CSS)
+								if showNewCompileTimeoutVariant && feature.info === 'compile_timeout_short_info'
+									i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
+										data-toggle="tooltip"
+										title=translate("compile_timeout_short_info_basic"),
+										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("compile_timeout_short_info_basic"),
+											data-placement="top"
+										) #{translate("learn_more_lowercase")}
+										span )
+								else
+									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)}
+					for plan, planIndex in Object.keys(feature.plans)
+						- var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {}
+						- var colspan = tableHeadOptions.colspan || baseColspan
+						-
+							if (planIndex === discountedColumn.index) {
+								var tdClass = 'plans-v2-table-discount-highlighted'
+							} else if (planIndex === config.highlightedColumn.index) {
+								var tdClass = 'plans-v2-table-green-highlighted'
+							} else if (planIndex === config.highlightedColumn.index - 1) {
+								var tdClass = 'plans-v2-table-cell-before-green-highlighted-column'
+							} else {
+								var tdClass = ''
+							}
+						td(
+							class=tdClass
+							colspan=colspan
+						)
+							+table_cell(feature, plan)
 
 mixin table_individual(period)
 	table.card.plans-v2-table.plans-v2-table-individual
@@ -322,15 +339,32 @@ mixin table_cell(feature, plan)
 			data-ol-plans-v2-table-cell-plan=plan
 			data-ol-plans-v2-table-cell-feature=featureName
 		)
-			if (feature.value === 'str')
-				| !{translate(planValue, {}, ['strong'])}
-			else if (feature.value === 'bool')
-				if (planValue)
-					i.fa.fa-check(aria-hidden="true")
-					span.sr-only #{translate("feature_included")}
+			if feature.feature === 'compile_servers'
+				if showNewCompileTimeoutVariant
+					| #{translate(planValue)}
+			else if feature.feature === 'compile_timeout_short'
+				if showNewCompileTimeoutVariant && plan !== 'group_standard' && plan !== 'group_professional' && plan !== 'organization'
+					if plan === 'free'
+						| #{translate("basic")}&nbsp;
+						strong *
+					else
+						| #{translate("12x_basic")}
 				else
-					span(aria-hidden="true") -
-					span.sr-only #{translate("feature_not_included")}
+					if plan === 'free'
+						| #{translate(planValue)}&nbsp;
+						strong *
+					else
+						| #{translate(planValue)}
+			else
+				if (feature.value === 'str')
+					| !{translate(planValue, {}, ['strong'])}
+				else if (feature.value === 'bool')
+					if (planValue)
+						i.fa.fa-check(aria-hidden="true")
+						span.sr-only #{translate("feature_included")}
+					else
+						span(aria-hidden="true") -
+						span.sr-only #{translate("feature_not_included")}
 
 mixin group_plans_license_picker()
 	form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form)

services/web/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "12x_basic": "12x Basic",
   "1_2_width": "½ width",
   "1_4_width": "¼ width",
   "3_4_width": "¾ width",
@@ -150,6 +151,7 @@
   "back_to_school_modal_offers_from_writefull_and_papers": "And with offers from Writefull and Papers too, you’ll have the tools you need to write smarter this year.",
   "back_to_subscription": "Back to Subscription",
   "back_to_your_projects": "Back to your projects",
+  "basic": "Basic",
   "become_an_advisor": "Become an __appName__ advisor",
   "best_choices_companies_universities_non_profits": "Best choice for companies, universities and non-profits",
   "beta": "Beta",
@@ -284,10 +286,13 @@
   "compile_error_handling": "Compile Error Handling",
   "compile_larger_projects": "Compile larger projects",
   "compile_mode": "Compile Mode",
+  "compile_servers": "Compile servers",
+  "compile_servers_info": "Compiles for users on premium plans always run on a dedicated pool of the fastest available servers.",
   "compile_terminated_by_user": "The compile was cancelled using the ‘Stop Compilation’ button. You can download the raw logs to see where the compile stopped.",
   "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",
+  "compile_timeout_short_info_basic": "This is how much time you get to compile your project on the Overleaf servers. You may need additional time for longer or more complex projects.",
   "compile_timeout_will_be_reduced_project_exceeds_limit_speed_up_compile": "The compile timeout limit on our free plan <0>will be reduced on __date__</0> and this project currently exceeds the new limit. You may be able to fix issues to <1>speed up the compile</1>.",
   "compiler": "Compiler",
   "compiling": "Compiling",
@@ -543,6 +548,7 @@
   "faster_compiles_feedback_seems_same": "Same",
   "faster_compiles_feedback_seems_slower": "Slower",
   "faster_compiles_feedback_thanks": "Thanks for the feedback!",
+  "fastest": "Fastest",
   "feature_included": "Feature included",
   "feature_not_included": "Feature not included",
   "featured": "Featured",
@@ -1716,6 +1722,7 @@
   "the_easy_online_collab_latex_editor": "The easy to use, online, collaborative LaTeX editor",
   "the_file_supplied_is_of_an_unsupported_type ": "The link to open this content on Overleaf pointed to the wrong kind of file. Valid file types are .tex documents and .zip files. If this keeps happening for links on a particular site, please report this to them.",
   "the_following_files_already_exist_in_this_project": "The following files already exist in this project:",
+  "the_free_compile_timeout_will_be_changing_soon_with_faster_servers": "The free compile timeout will be changing soon as we introduce faster servers. <0>Find out more</0>.",
   "the_project_that_contains_this_file_is_not_shared_with_you": "The project that contains this file is not shared with you",
   "the_requested_conversion_job_was_not_found": "The link to open this content on Overleaf specified a conversion job that could not be found. It’s possible that the job has expired and needs to be run again. If this keeps happening for links on a particular site, please report this to them.",
   "the_requested_publisher_was_not_found": "The link to open this content on Overleaf specified a publisher that could not be found. If this keeps happening for links on a particular site, please report this to them.",