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

Change number of users in group plan to have a dynamic value in the new plans page (#8592)

Browse source 
GitOrigin-RevId: 008c0a1120e5b99945f18f0b4eee60bfcb08a331
This commit is contained in:
M Fahru 2022-07-08 09:26:11 -04:00 committed by Copybot
parent 8603fcac6c
commit 3b4968e263
6 changed files with 76 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
services/web/app/src/Features/Subscription/plansV2Features.js
View file

@ -205,8 +205,8 @@ const groupPlans = [
info: 'number_of_users_info',
value: 'str',
plans: {
group_standard: '2 - 50 users',
group_professional: '2 - 50 users',
group_standard: '2 users',
group_professional: '2 users',
organization: 'Contact sales',
},
},

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

@ -202,8 +202,7 @@ mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEve
ul.plans-v2-table-th-content-benefit
li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
li
span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='collaborator') #{initialLocalizedGroupPrice.price.collaborator}
span  #{translate("total_per_year_lowercase")}
+table_head_group_total_per_year('collaborator')
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
@ -224,12 +223,20 @@ mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEve
ul.plans-v2-table-th-content-benefit
li #{translate("unlimited_collaborators_in_each_project")}
li
span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='professional') #{initialLocalizedGroupPrice.price.professional}
span  #{translate("total_per_year_lowercase")}
+table_head_group_total_per_year('professional')
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_professional(highlighted, eventTrackingKey)
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
mixin table_head_group_total_per_year(groupPlan)
- var initialLicenseSize = '2'
span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
|  
for licenseSize in groupPlanModalOptions.sizes
span(
hidden=(licenseSize !== initialLicenseSize)
data-ol-plans-v2-table-th-group-license-size=licenseSize
) !{translate("total_per_year_for_x_users", {licenseSize})}
mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
@ -310,15 +317,22 @@ mixin table_head_price(plan, period)
| per month
mixin table_cell(feature, plan)
.plans-v2-table-cell-inner-content
- var planValue = feature.plans[plan]
- var featureName = feature.feature
.plans-v2-table-cell(
data-ol-plans-v2-table-cell-plan=plan
data-ol-plans-v2-table-cell-feature=featureName
)
if (feature.value === 'str')
| #{feature.plans[plan]}
else if (feature.plans[plan])
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")}
| #{planValue}
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)

8
services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js
View file

@ -56,9 +56,11 @@ function hideCurrencyPicker() {
document.querySelector('[data-ol-group-plan-form-currency]').hidden = true
}
document
.querySelectorAll('[data-ol-group-plan-form] select')
.forEach(el => el.addEventListener('change', changePlansV2MainPageGroupData))
document.querySelectorAll('[data-ol-group-plan-form] select').forEach(el =>
el.addEventListener('change', () => {
changePlansV2MainPageGroupData()
})
)
document
.querySelectorAll('[data-ol-group-plan-form] input')
.forEach(el => el.addEventListener('change', changePlansV2MainPageGroupData))

32
services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js
View file

@ -76,6 +76,9 @@ export function updateMainGroupPlanPricing() {
'[data-ol-plans-v2-license-picker-educational-discount-input]'
).checked = false
}
changeNumberOfUsersInTableHead()
changeNumberOfUsersInFeatureTable()
}
export function changeGroupPlanModalNumberOfLicenses() {
@ -100,3 +103,32 @@ export function changeGroupPlanModalEducationalDiscount() {
groupPlanModalEducationalDiscountEl.checked = educationalDiscountChecked
updateGroupModalPlanPricing()
}
export function changeNumberOfUsersInFeatureTable() {
document
.querySelectorAll(
'[data-ol-plans-v2-table-cell-plan^="group"][data-ol-plans-v2-table-cell-feature="number_of_users"]'
)
.forEach(el => {
const licenseSize = document.querySelector(
'[data-ol-plans-v2-license-picker-select]'
).value
el.textContent = `${licenseSize} users`
})
}
export function changeNumberOfUsersInTableHead() {
document
.querySelectorAll('[data-ol-plans-v2-table-th-group-license-size]')
.forEach(el => {
const licenseSize = el.getAttribute(
'data-ol-plans-v2-table-th-group-license-size'
)
const currentLicenseSize = document.querySelector(
'[data-ol-plans-v2-license-picker-select]'
).value
el.hidden = licenseSize !== currentLicenseSize
})
}

20
services/web/frontend/stylesheets/app/plans-v2.less
View file

@ -420,7 +420,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
td:nth-last-child(2) {
background-color: @ol-blue-gray-0;
.plans-v2-table-cell-inner-content {
.plans-v2-table-cell {
border-bottom-right-radius: @plans-v2-table-border-radius;
}
}
@ -466,7 +466,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
td:nth-last-child(2) {
background-color: @ol-blue-gray-0;
.plans-v2-table-cell-inner-content {
.plans-v2-table-cell {
border-bottom-right-radius: @plans-v2-table-border-radius;
}
}
@ -499,7 +499,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
// This is a workaround.
// Table student have "Dedicated account manager" as its last feature.
// That name is long and it overflows to the next line,
// making the `td` is bigger than the inner `plans-v2-table-cell-inner-content` (inner `div` class of most of the `td`).
// making the `td` is bigger than the inner `plans-v2-table-cell` (inner `div` class of most of the `td`).
// Since we can't make all `td` have fixed height
// (due to different text length that makes the
// `td` has variable height depending whether the text overflows),
@ -514,13 +514,13 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
// example reference: https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row
.plans-v2-table-student {
@media (min-width: @screen-md-min) {
tr:last-child td:nth-last-child(2) .plans-v2-table-cell-inner-content {
tr:last-child td:nth-last-child(2) .plans-v2-table-cell {
height: 62px;
}
}
@media (min-width: @screen-sm-min) {
tr:last-child td:nth-last-child(2) .plans-v2-table-cell-inner-content {
tr:last-child td:nth-last-child(2) .plans-v2-table-cell {
height: 56px;
display: flex;
align-items: center;
@ -543,7 +543,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
td:last-child {
background-color: @ol-blue-gray-0;
.plans-v2-table-cell-inner-content {
.plans-v2-table-cell {
border-bottom-right-radius: @plans-v2-table-border-radius;
}
}
@ -581,7 +581,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
border-bottom-left-radius: 0;
}
td:last-child .plans-v2-table-cell-inner-content {
td:last-child .plans-v2-table-cell {
border-bottom-right-radius: 0;
}
}
@ -704,7 +704,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
background-color: @table-hover-bg;
.plans-v2-table-feature-name,
.plans-v2-table-cell-inner-content {
.plans-v2-table-cell {
background-color: @table-hover-bg;
}
}
@ -753,10 +753,10 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
}
// plans-v2-table-cell-inner-content class only appears for the inner `div` of a `td`
// plans-v2-table-cell class only appears for the inner `div` of a `td`
// that doesn't contain divider or feature name
// (i.e it contains either check mark icon or a dash)
.plans-v2-table-cell-inner-content {
.plans-v2-table-cell {
background-color: @white;
padding: 6px;
}

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

@ -1729,7 +1729,7 @@
"x_collaborators_per_project": "__collaboratorsCount__ collaborators per project",
"unlimited_collaborators_in_each_project": "Unlimited collaborators in each project",
"most_premium_features": "Most premium features",
"total_per_year_lowercase": "total per year",
"total_per_year_for_x_users": "total per year for __licenseSize__ users",
"user_management": "User management",
"user_management_info": "Group plan admins have access to an admin panel where users can be added and removed easily. For site-wide plans, users are automatically upgraded when they register or add their email address to Overleaf (domain-based enrollment or SSO).",
"usage_metrics": "Usage metrics",