diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js index c825d92ca8..79038613f3 100644 --- a/services/web/app/src/Features/Subscription/SubscriptionController.js +++ b/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, diff --git a/services/web/app/views/subscriptions/plans-marketing-v2.pug b/services/web/app/views/subscriptions/plans-marketing-v2.pug index 2ab713414c..f5f1b0945c 100644 --- a/services/web/app/views/subscriptions/plans-marketing-v2.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/plans-marketing.pug b/services/web/app/views/subscriptions/plans-marketing.pug index fadc4aaea3..5808e66053 100644 --- a/services/web/app/views/subscriptions/plans-marketing.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/plans-marketing/_mixins.pug b/services/web/app/views/subscriptions/plans-marketing/_mixins.pug index d25d1bead9..88e40b51dc 100644 --- a/services/web/app/views/subscriptions/plans-marketing/_mixins.pug +++ b/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 data-ol-view='annual') #{translate("buy_now")} + span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("start_free_trial")} + 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 data-ol-view='annual') #{translate("buy_now")} + span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("start_free_trial")} + 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 data-ol-view='annual') #{translate("buy_now")} + span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("start_free_trial")} + 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 data-ol-view="annual") #{translate("saving_20_percent")} - span(hidden data-ol-view="student") #{translate("save_20_percent_by_paying_annually")} + span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{translate("save_20_percent_by_paying_annually")} + span(hidden=(currentView !== 'annual') data-ol-view='annual') #{translate("saving_20_percent")} + 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 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 !== 'annual') data-ol-view='annual') #{translate("saving_20_percent")} + span(hidden=(currentView !== 'monthly') data-ol-view='monthly') #{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 diff --git a/services/web/frontend/js/pages/user/subscription/plans.js b/services/web/frontend/js/pages/user/subscription/plans.js index e5574b1cde..50f96b1363 100644 --- a/services/web/frontend/js/pages/user/subscription/plans.js +++ b/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()