github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

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

GitOrigin-RevId: 7157b354a21e46f4eb194ae1ef741e90790b6071
This commit is contained in:
Jakob Ackermann 2023-03-10 15:57:41 +00:00 committed by Copybot
parent 62450f8f31
commit 7ae5a9f060
5 changed files with 68 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
services/web/app/src/Features/Subscription/SubscriptionController.js
View file

@ -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,

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

@ -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

7
services/web/app/views/subscriptions/plans-marketing.pug
View file

@ -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

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

@ -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

62
services/web/frontend/js/pages/user/subscription/plans.js
View file

@ -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()