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 #7292 from overleaf/tm-plans-page-layout-teardown

Browse source 
Tear down plans page split test variant with new layout

GitOrigin-RevId: ab09066f05d17ca17a19ab8895fac141e1e89bff
This commit is contained in:
M Fahru 2022-04-07 09:15:11 -04:00 committed by Copybot
parent e948de3234
commit f23accc572
6 changed files with 45 additions and 221 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

@ -57,14 +57,6 @@ async function plansPage(req, res) {
AnalyticsManager.recordEventForSession(req.session, 'plans-page-view')
const assignment = await SplitTestHandler.promises.getAssignment(
req,
'plans-page-layout'
)
const newPlansPageVariant =
assignment && assignment.variant === 'new-plans-page'
const standardPlanNameAssignment =
await SplitTestHandler.promises.getAssignment(req, 'standard-plan-name')
@ -82,7 +74,6 @@ async function plansPage(req, res) {
groupPlans: GroupPlansData,
groupPlanModalOptions,
groupPlanModalDefaults,
newPlansPageVariant,
useNewPlanName,
})
}

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

@ -25,94 +25,53 @@ block content
.col-md-8.col-md-offset-2
p.text-centered #{translate("sl_benefits_plans")}
if (newPlansPageVariant)
+allCardsAndControlsForVariant
else
+allCardsAndControls()
+allCardsAndControls()
if (newPlansPageVariant)
.row.features-table(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')
+table_premium
.col-sm-12(hidden data-ol-view='annual')
+table_premium
.col-sm-12(hidden data-ol-view='student')
+table_student
.row.row-spaced-large.text-centered
.col-xs-12
p.text-centered !{translate('also_provides_free_plan', {}, [{ name: 'a', attrs: { href: '/register' }}])}
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
div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'7'})}
br
div.text-centered #{translate('subject_to_additional_vat')}<br/> #{translate('select_country_vat')}
.row.row-spaced-large
.col-md-8.col-md-offset-2
.card.text-centered
.card-header
h2 #{translate('looking_multiple_licenses')}
span #{translate('reduce_costs_group_licenses')}
br
br
a.btn.btn-default(
href="#groups"
data-ol-open-group-plan-modal
data-ol-location='callout'
) #{translate('find_out_more')}
.row.row-spaced-large.text-centered
.col-xs-12
p.text-centered !{translate('also_provides_free_plan', {}, [{ name: 'a', attrs: { href: '/register' }}])}
i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Mastercard accepted
i.fa.fa-cc-visa.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Visa accepted
i.fa.fa-cc-amex.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Amex accepted
i.fa.fa-cc-paypal.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Paypal accepted
div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'7'})}
.row.row-spaced-large
.col-md-8.col-md-offset-2
.card.text-centered
.card-header
h2 #{translate('looking_multiple_licenses')}
span #{translate('reduce_costs_group_licenses')}
br
div.text-centered #{translate('subject_to_additional_vat')}<br/> #{translate('select_country_vat')}
else
.row.row-spaced-large.text-centered
.col-xs-12
p.text-centered !{translate('also_provides_free_plan', {}, [{ name: 'a', attrs: { href: '/register' }}])}
i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Mastercard accepted
i.fa.fa-cc-visa.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Visa accepted
i.fa.fa-cc-amex.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Amex accepted
i.fa.fa-cc-paypal.fa-2x(aria-hidden="true") &nbsp;
span.sr-only Paypal accepted
div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'7'})}
br
div.text-centered #{translate('subject_to_additional_vat')}<br/> #{translate('select_country_vat')}
a.btn.btn-default(
href="#groups"
data-ol-open-group-plan-modal
data-ol-location='callout'
) #{translate('find_out_more')}
.row.row-spaced-large
.col-md-8.col-md-offset-2
.card.text-centered
.card-header
h2 #{translate('looking_multiple_licenses')}
span #{translate('reduce_costs_group_licenses')}
br
br
a.btn.btn-default(
href="#groups"
data-ol-open-group-plan-modal
data-ol-location='callout'
) #{translate('find_out_more')}
.row.row-spaced-large
.col-sm-12
.page-header.plans-header.plans-subheader.text-centered
h2 #{translate('compare_plan_features')}
.row
.col-md-6.col-md-offset-3
+plan_switch('table')
.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')
+table_premium
.col-sm-12(hidden data-ol-view='annual')
+table_premium
.col-sm-12(hidden data-ol-view='student')
+table_student
.row.row-spaced-large
.col-sm-12
.page-header.plans-header.plans-subheader.text-centered
h2 #{translate('compare_plan_features')}
.row
.col-md-6.col-md-offset-3
+plan_switch('table')
.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')
+table_premium
.col-sm-12(hidden data-ol-view='annual')
+table_premium
.col-sm-12(hidden data-ol-view='student')
+table_student
include ./plans-marketing/_quotes

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

@ -65,24 +65,6 @@ mixin card_student_monthly(location)
span
+price_student_monthly
+features_student(location, 'monthly')
mixin card_student_annual_variant(location)
.best-value
strong #{translate('best_value')}
.card-header
h2 #{translate("student")} (#{translate("annual")})
h5.tagline #{translate('tagline_student_annual')}
.circle
span
+price_student_annual
+btn_buy_student(location, 'annual')
mixin card_student_monthly_variant(location)
.card-header
h2 #{translate("student")}
h5.tagline #{translate('tagline_student_monthly')}
.circle
span
+price_student_monthly
+btn_buy_student(location, 'monthly')
//- Features Lists, used within cards
mixin features_collaborator(location)
@ -210,27 +192,6 @@ mixin plan_switch(location)
href="#"
) #{translate("special_price_student")}
mixin plan_switch_variant()
ul.nav.nav-pills
li.active(data-ol-view-tab='monthly')
a.btn.btn-default-outline(
href="#"
) #{translate("monthly")}
li(data-ol-view-tab='annual')
a.btn.btn-default-outline(
href="#"
) #{translate("annual")}
li(data-ol-view-tab='student')
a.btn.btn-default-outline(
href="#"
) #{translate("special_price_student")}
li()
a.btn.btn-default-outline(
href="#groups"
data-ol-open-group-plan-modal
data-ol-location='toggle'
) #{translate("group_plans")}
mixin allCardsAndControls(controlsRowSpaced, listLocation)
- var location = listLocation ? 'card_' + listLocation : 'card'
.row.top-switch(class=(controlsRowSpaced ? "row-spaced" : ""))
@ -290,73 +251,3 @@ mixin allCardsAndControls(controlsRowSpaced, listLocation)
.col-md-4
.card.card-last
+card_student_monthly(location)
mixin allCardsAndControlsForVariant()
- var location = listLocation ? 'card_' + listLocation : 'card'
.row.top-switch(class=(controlsRowSpaced ? "row-spaced" : ""))
.col-lg-6.col-lg-offset-3.col-md-8.col-md-offset-1
+plan_switch_variant('card')
.col-md-2.text-right
+currency_dropdown
.row
.col-md-10.col-md-offset-1
.row
for view in ['monthly', 'annual']
.card-group.text-centered(data-ol-view=view hidden=(view==='annual'))
.col-md-4
.card.card-first
.card-header
h2 #{translate("personal")}
h5.tagline #{translate("tagline_personal")}
.circle
+price_personal
ul.list-unstyled
li #{translate("one_collaborator")}
+btn_buy_personal(location)
.col-md-4
.card.card-highlighted
.best-value
strong #{translate('best_value')}
.card-header
if (useNewPlanName)
h2 #{translate("standard")}
else
h2 #{translate("collaborator")}
h5.tagline #{translate("tagline_collaborator")}
.circle
+price_collaborator
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:10})}
+btn_buy_collaborator(location)
.col-md-4
.card.card-last
.card-header
h2 #{translate("professional")}
h5.tagline #{translate("tagline_professional")}
.circle
+price_professional
ul.list-unstyled
li
strong #{translate("unlimited_collabs")}
+btn_buy_professional(location)
.card-group.text-centered(hidden data-ol-view='student')
.col-md-4
.card.card-first
.card-header
h2 #{translate("free")}
h5.tagline #{translate("tagline_free")}
.circle #{translate("free")}
ul.list-unstyled
li #{translate("one_collaborator")}
+btn_buy_free(location)
.col-md-4
.card.card-highlighted
+card_student_annual_variant(location)
.col-md-4
.card.card-last
+card_student_monthly_variant(location)

17
services/web/frontend/js/features/plans/group-plan-modal/index.js
View file

@ -53,11 +53,6 @@ function updateGroupPlanView() {
).hidden = size >= 10
}
function getGroupModalOpeningLocation() {
const modalEl = $('[data-ol-group-plan-modal]')
return modalEl.data('ol-modal-opening-location')
}
const modalEl = $('[data-ol-group-plan-modal]')
modalEl
.on('shown.bs.modal', function () {
@ -68,11 +63,8 @@ modalEl
history.replaceState(null, document.title, window.location.pathname)
})
function showGroupPlanModal(location) {
function showGroupPlanModal() {
modalEl.modal()
if (location) {
modalEl.data('ol-modal-opening-location', location)
}
eventTracking.send(
'subscription-funnel',
'plans-page',
@ -101,11 +93,6 @@ document.querySelectorAll('[data-ol-purchase-group-plan]').forEach(el =>
const itmContent = getMeta('ol-itm_content')
if (itmContent) {
queryParams.set('itm_content', itmContent)
} else {
const openingLocation = getGroupModalOpeningLocation()
if (openingLocation === 'toggle') {
queryParams.set('itm_content', openingLocation)
}
}
eventTracking.sendMB('groups-modal-click', {
plan: planCode,
@ -128,7 +115,7 @@ document.querySelectorAll('[data-ol-open-group-plan-modal]').forEach(el => {
location,
period: 'annual',
})
showGroupPlanModal(location)
showGroupPlanModal()
})
})

3
services/web/frontend/stylesheets/app/plans.less
View file

@ -132,9 +132,6 @@
margin-left: @line-height-computed / 2;
}
}
.features-table {
margin-top: 20px;
}
}
#changePlanSection {

3
services/web/locales/en.json
View file

@ -923,7 +923,6 @@
"monthly": "Monthly",
"personal": "Personal",
"free": "Free",
"group_plans": "Group plans",
"one_collaborator": "Only one collaborator",
"collaborator": "Collaborator",
"standard": "Standard",
@ -1611,6 +1610,6 @@
"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>."
}