Merge pull request #12160 from overleaf/mf-old-plans-page-annual-button

Fix annual buy button in old plans page is linked to the free trial check out page

GitOrigin-RevId: 7157b354a21e46f4eb194ae1ef741e90790b6071

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

@@ -71,6 +71,14 @@ async function plansPage(req, res) {
     )
   }
 
+  let currentView = 'monthly'
+  if (
+    plansPageLayoutV3Assignment.variant === 'old-plans-page-annual' ||
+    plansPageLayoutV3Assignment.variant === 'new-plans-page'
+  ) {
+    currentView = 'annual'
+  }
+
   const showNewPlansPage =
     plansPageLayoutV3Assignment.variant === 'new-plans-page'
 
@@ -95,6 +103,7 @@ async function plansPage(req, res) {
 
   res.render(template, {
     title: 'plans_and_pricing',
+    currentView,
     plans,
     itm_content: req.query?.itm_content,
     itm_referrer: req.query?.itm_referrer,

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

@@ -11,6 +11,7 @@ block append meta
 	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)
+	meta(name="ol-currentView" content=currentView)
 
 block content
 	main.content.content-alt#main-content

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

@@ -11,6 +11,7 @@ block append meta
 	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)
+	meta(name="ol-currentView" content=currentView)
 
 block content
 	main.content.content-alt#main-content
@@ -69,11 +70,11 @@ block content
 						.col-md-3.text-right
 							+currency_dropdown
 					.row(event-tracking="features-table-viewed" event-tracking-ga="subscription-funnel" event-tracking-trigger="scroll" event-tracking-send-once="true" event-tracking-label="exp-")
-						.col-sm-12(data-ol-view='monthly')
+						.col-sm-12(hidden=(currentView !== 'monthly') data-ol-view='monthly')
 							+table_premium
-						.col-sm-12(hidden data-ol-view='annual')
+						.col-sm-12(hidden=(currentView !== 'annual') data-ol-view='annual')
 							+table_premium
-						.col-sm-12(hidden data-ol-view='student')
+						.col-sm-12(hidden=(currentView !== 'student') data-ol-view='student')
 							+table_student
 
 					include ./plans-marketing/_quotes

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

@@ -4,16 +4,16 @@ mixin btn_buy_collaborator(location)
 		data-ol-start-new-subscription='collaborator'
 		data-ol-location=location
 	)
-		span(data-ol-view='monthly') #{translate("start_free_trial")}
+		span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("start_free_trial")}
-		span(hidden data-ol-view='annual') #{translate("buy_now")}
+		span(hidden=(currentView !== 'annual') data-ol-view='annual') #{translate("buy_now")}
 mixin btn_buy_personal(location)
 	a.btn.btn-primary(
 		data-ol-start-new-subscription='paid-personal'
 		data-ol-tracking-plan='personal'
 		data-ol-location=location
 	)
-		span(data-ol-view='monthly') #{translate("start_free_trial")}
+		span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("start_free_trial")}
-		span(hidden data-ol-view='annual') #{translate("buy_now")}
+		span(hidden=(currentView !== 'annual') data-ol-view='annual') #{translate("buy_now")}
 mixin btn_buy_free(location)
 	a.btn.btn-primary(
 		data-ol-has-custom-href
@@ -28,8 +28,8 @@ mixin btn_buy_professional(location)
 		data-ol-start-new-subscription='professional'
 		data-ol-location=location
 	)
-		span(data-ol-view='monthly') #{translate("start_free_trial")}
+		span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("start_free_trial")}
-		span(hidden data-ol-view='annual') #{translate("buy_now")}
+		span(hidden=(currentView !== 'annual') data-ol-view='annual') #{translate("buy_now")}
 mixin btn_buy_student(location, plan)
 	if plan == 'annual'
 		a.btn.btn-primary(
@@ -141,15 +141,15 @@ mixin gen_localized_undiscounted_price_for_plan_view(plan)
 
 
 mixin gen_localized_price_for_plan(plan)
-	div(data-ol-view='monthly')
+	div(hidden=(currentView !== 'monthly') data-ol-view='monthly')
 		+gen_localized_price_for_plan_view(plan, 'monthly')
 		span.small /mo
-	div(hidden data-ol-view='annual')
+	div(hidden=(currentView !== 'annual') data-ol-view='annual')
 		+gen_localized_price_for_plan_view(plan, 'annual')
 		span.small /yr
 
 mixin gen_localized_undiscounted_price_for_plan(plan)
-	div(hidden data-ol-view='annual')
+	div(hidden=(currentView !== 'annual') data-ol-view='annual')
 		strike.undiscounted-price.small
 			span.sr-only Price reduced from
 			+gen_localized_undiscounted_price_for_plan_view(plan)
@@ -211,9 +211,9 @@ mixin plan_switch(location)
 				)
 					.tooltip-arrow
 					.tooltip-inner
-						span(data-ol-view="monthly") #{translate("save_20_percent_by_paying_annually")}
+						span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("save_20_percent_by_paying_annually")}
-						span(hidden data-ol-view="annual") #{translate("saving_20_percent")}
+						span(hidden=(currentView !== 'annual') data-ol-view='annual') #{translate("saving_20_percent")}
-						span(hidden data-ol-view="student") #{translate("save_20_percent_by_paying_annually")}
+						span(hidden=(currentView !== 'student') data-ol-view='student') #{translate("save_20_percent_by_paying_annually")}
 		li(data-ol-view-tab='student')
 			button.btn-default-outline #{translate("special_price_student")}
 
@@ -228,9 +228,9 @@ mixin plan_switch_annual_default(location)
 				)
 					.tooltip-arrow
 					.tooltip-inner
-						span(data-ol-view="annual") #{translate("saving_20_percent")}
+						span(hidden=(currentView !== 'annual') data-ol-view='annual') #{translate("saving_20_percent")}
-						span(hidden data-ol-view="monthly") #{translate("save_20_percent_by_paying_annually")}
+						span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("save_20_percent_by_paying_annually")}
-						span(hidden data-ol-view="student") #{translate("save_20_percent_by_paying_annually")}
+						span(hidden=(currentView !== 'student') data-ol-view='student') #{translate("save_20_percent_by_paying_annually")}
 		li(data-ol-view-tab='monthly')
 			button.btn-default-outline #{translate("monthly")}
 		li(data-ol-view-tab='student')
@@ -285,7 +285,7 @@ mixin allCardsAndControls(controlsRowSpaced, listLocation)
 									+price_professional_undiscounted
 								+features_professional(location)
 
-				.card-group.text-centered(hidden data-ol-view='student')
+				.card-group.text-centered(hidden=(currentView !== 'student') data-ol-view='student')
 					.col-md-4
 						.card.card-first
 							.card-header

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

@@ -3,8 +3,14 @@ import '../../../features/plans/group-plan-modal'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import getMeta from '../../../utils/meta'
 
-let currentView = 'monthly'
+let currentView = getMeta('ol-currentView')
 let currentCurrencyCode = getMeta('ol-recommendedCurrency')
+const plansPageLayoutV3Variant =
+  getMeta('ol-splitTestVariants')?.['plans-page-layout-v3'] ?? 'default'
+
+if (window.location.href.includes('validate-pre-rendering=true')) {
+  validatePreRendering()
+}
 
 function selectView(view) {
   document.querySelectorAll('[data-ol-view-tab]').forEach(el => {
@@ -25,9 +31,6 @@ function selectView(view) {
 }
 
 function setUpViewSwitching(liEl) {
-  const plansPageLayoutV3Variant =
-    getMeta('ol-splitTestVariants')?.['plans-page-layout-v3'] ?? 'default'
-
   const view = liEl.getAttribute('data-ol-view-tab')
 
   liEl.querySelector('button').addEventListener('click', function (e) {
@@ -137,23 +140,6 @@ function updateAnnualSavingBanner(view) {
   }
 }
 
-function makeAnnualViewAsDefault() {
-  const plansPageLayoutV3Variant =
-    getMeta('ol-splitTestVariants')?.['plans-page-layout-v3'] ?? 'default'
-
-  // there are a handful of html elements that will switch between monthly and annual view
-  // with the `hidden` attribute.
-  // On the variant `old-plans-page-annual`, we want annual as the default.
-  // So, instead of changing the pugfiles directly, we change the default with this
-  if (plansPageLayoutV3Variant === 'old-plans-page-annual') {
-    document.querySelectorAll('[data-ol-view]').forEach(el => {
-      const view = el.getAttribute('data-ol-view')
-
-      el.hidden = view !== 'annual'
-    })
-  }
-}
-
 function selectViewFromHash() {
   try {
     const params = new URLSearchParams(window.location.hash.substring(1))
@@ -171,6 +157,37 @@ function selectViewFromHash() {
   }
 }
 
+function validatePreRendering() {
+  document.querySelectorAll('[data-ol-view-tab]').forEach(el => {
+    console.assert(
+      (el.getAttribute('data-ol-view-tab') === currentView) ===
+        el.classList.contains('active'),
+      el
+    )
+  })
+
+  document.querySelectorAll('[data-ol-view]').forEach(el => {
+    console.assert(
+      (el.hidden === el.getAttribute('data-ol-view')) !== currentView,
+      el
+    )
+  })
+
+  const plansPageLayoutV3Variant = getMeta('ol-splitTestVariants')?.[
+    'plans-page-layout-v3'
+  ]
+  if (plansPageLayoutV3Variant !== 'new-plans-page') {
+    const tooltipEl = document.querySelector('[data-ol-annual-saving-tooltip]')
+    console.assert(
+      (currentView === 'annual') ===
+        tooltipEl.classList.contains('annual-selected'),
+      tooltipEl
+    )
+  }
+
+  console.log('validated pre-rendering')
+}
+
 document.querySelectorAll('[data-ol-view-tab]').forEach(setUpViewSwitching)
 document
   .querySelectorAll('[data-ol-currencyCode-switch]')
@@ -182,6 +199,3 @@ updateLinkTargets()
 
 selectViewFromHash()
 window.addEventListener('hashchange', selectViewFromHash)
-
-// only for `old-plans-page-annual` variant of the `plans-page-layout-v3` split test
-makeAnnualViewAsDefault()