From 3b4968e26330ef07aa965817a5d329d8e3e22915 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Fri, 8 Jul 2022 09:26:11 -0400 Subject: [PATCH] Change number of users in group plan to have a dynamic value in the new plans page (#8592) GitOrigin-RevId: 008c0a1120e5b99945f18f0b4eee60bfcb08a331 --- .../Features/Subscription/plansV2Features.js | 4 +- .../plans-marketing/v2/_mixins.pug | 38 +++++++++++++------ .../plans/plans-v2-group-plan-modal.js | 8 ++-- .../plans-v2/plans-v2-group-plan.js | 32 ++++++++++++++++ .../frontend/stylesheets/app/plans-v2.less | 20 +++++----- services/web/locales/en.json | 2 +- 6 files changed, 76 insertions(+), 28 deletions(-) diff --git a/services/web/app/src/Features/Subscription/plansV2Features.js b/services/web/app/src/Features/Subscription/plansV2Features.js index 50ad81be65..d187a29e2b 100644 --- a/services/web/app/src/Features/Subscription/plansV2Features.js +++ b/services/web/app/src/Features/Subscription/plansV2Features.js @@ -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', }, }, diff --git a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug index c876656c89..d7037feb8e 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug @@ -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) diff --git a/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js b/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js index 15be0779fd..8655b1a43c 100644 --- a/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js +++ b/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js @@ -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)) diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js index 54b899034e..9cb97ce3eb 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js @@ -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 + }) +} diff --git a/services/web/frontend/stylesheets/app/plans-v2.less b/services/web/frontend/stylesheets/app/plans-v2.less index dd9f979997..e235dc59ee 100644 --- a/services/web/frontend/stylesheets/app/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans-v2.less @@ -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; } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index bf4e531650..aa08c621ed 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -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",