diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug index 6df523decc..815c01c947 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -59,8 +59,6 @@ mixin plans_table(period, config) - var ariaLabel = translate("free") when 'student_student' - var ariaLabel = translate("student") - when 'student_university' - - var ariaLabel = translate("university") default - var ariaLabel = undefined th( @@ -88,8 +86,6 @@ mixin plans_table(period, config) +table_head_student_free(highlighted, period) when 'student_student' +table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent) - when 'student_university' - +table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) for featuresPerSection in config.features - var dividerColspan = Object.values(config.tableHead).length + 1 @@ -168,16 +164,28 @@ mixin table_student(period) table.card.plans-table.plans-table-student +plans_table(period, plansConfig.student) +//- free plan mixins + +mixin table_short_feature_list_free() + ul.plans-table-th-content-benefit + li #{translate("one_collaborator")} + mixin table_head_individual_free(highlighted, period) .plans-table-th-content p.plans-table-th-content-title #{translate("free")} +table_head_price('free', period) .plans-table-btn-buy-container-mobile - +btn_buy_individual_free(highlighted) - ul.plans-table-th-content-benefit - li #{translate("one_collaborator")} + +btn_buy_individual_free() + +table_short_feature_list_free() .plans-table-btn-buy-container-desktop - +btn_buy_individual_free(highlighted) + +btn_buy_individual_free() + +//- individual plan mixins + +mixin table_short_feature_list_collaborator() + ul.plans-table-th-content-benefit + li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} + li #{translate("all_premium_features")} mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) .plans-table-th-content @@ -185,66 +193,87 @@ mixin table_head_individual_collaborator(highlighted, eventTrackingKey, addition +table_head_price('collaborator', period) .plans-table-btn-buy-container-mobile +btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) - ul.plans-table-th-content-benefit - li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} - li #{translate("all_premium_features")} + +table_short_feature_list_collaborator() .plans-table-btn-buy-container-desktop +btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) +//- professional plan mixins + +mixin table_short_feature_list_professional() + ul.plans-table-th-content-benefit + li !{translate("unlimited_collabs_rt",{},["b"])} + li #{translate("all_premium_features")} + mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) .plans-table-th-content p.plans-table-th-content-title #{translate("professional")} +table_head_price('professional', period) .plans-table-btn-buy-container-mobile +btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) - ul.plans-table-th-content-benefit - li !{translate("unlimited_collabs_rt",{},["b"])} - li #{translate("all_premium_features")} + +table_short_feature_list_professional() .plans-table-btn-buy-container-desktop +btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) +//- group_collaborator plan mixins + +mixin table_short_feature_list_group_collaborator() + ul.plans-table-th-content-benefit + li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} + li + +table_head_group_total_per_year('collaborator') + +mixin table_price_group_collaborator() + .plans-v2-table-price-container + strike.plans-v2-table-price-before-discount + +gen_localized_price_for_plan_view('collaborator', 'annual') + p.plans-v2-table-price + span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator} + p.plans-v2-table-price-period-label + | #{translate('per_user_year')} + mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation) .plans-table-th-content p.plans-table-th-content-title #{translate("group_standard")} - .plans-v2-table-price-container - strike.plans-v2-table-price-before-discount - +gen_localized_price_for_plan_view('collaborator', 'annual') - p.plans-v2-table-price - span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator} - p.plans-v2-table-price-period-label - | #{translate('per_user_year')} + +table_price_group_collaborator() .plans-table-btn-buy-container-mobile +btn_buy_group_collaborator(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator') - ul.plans-table-th-content-benefit - li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} - li - +table_head_group_total_per_year('collaborator') + +table_short_feature_list_group_collaborator() .plans-table-btn-buy-container-desktop +btn_buy_group_collaborator(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator') +//- group_professional plan mixins + +mixin table_short_feature_list_group_professional() + ul.plans-table-th-content-benefit + li #{translate("unlimited_collaborators_in_each_project")} + li + +table_head_group_total_per_year('professional') + +mixin table_price_group_professional() + .plans-v2-table-price-container + strike.plans-v2-table-price-before-discount + +gen_localized_price_for_plan_view('professional', 'annual') + p.plans-v2-table-price + span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional} + p.plans-v2-table-price-period-label + | #{translate('per_user_year')} + mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation) .plans-table-th-content p.plans-table-th-content-title #{translate("group_professional")} - .plans-v2-table-price-container - strike.plans-v2-table-price-before-discount - +gen_localized_price_for_plan_view('professional', 'annual') - p.plans-v2-table-price - span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional} - p.plans-v2-table-price-period-label - | #{translate('per_user_year')} + +table_price_group_professional() .plans-table-btn-buy-container-mobile +btn_buy_group_professional(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional') - ul.plans-table-th-content-benefit - li #{translate("unlimited_collaborators_in_each_project")} - li - +table_head_group_total_per_year('professional') + +table_short_feature_list_group_professional() .plans-table-btn-buy-container-desktop +btn_buy_group_professional(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional') +//- group mixins + 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]} @@ -255,8 +284,22 @@ mixin table_head_group_total_per_year(groupPlan) 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) +mixin table_short_feature_list_group_organization(additionalEventSegmentation) - var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation)) + ul.plans-table-th-content-benefit + li #{translate("best_choices_companies_universities_non_profits")} + li #{translate("for_groups_or_site_wide")} + li + a( + target="_blank" + href="/for/contact-sales" + event-tracking="plans-page-click" + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation=segmentation + ) #{translate("also_available_as_on_premises")} + +mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation) .plans-table-th-content p.plans-table-th-content-title #{translate("organization")} .plans-table-comments-icon @@ -264,91 +307,11 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve .plans-table-btn-buy-container-mobile +btn_buy_group_organization(highlighted, eventTrackingKey) small.plans-table-th-content-additional-link.invisible(aria-hidden="true") - ul.plans-table-th-content-benefit - li #{translate("best_choices_companies_universities_non_profits")} - li #{translate("for_groups_or_site_wide")} - li - a( - target="_blank" - href="/for/contact-sales" - event-tracking="plans-page-click" - event-tracking-mb="true" - event-tracking-trigger="click" - event-segmentation=segmentation - ) #{translate("also_available_as_on_premises")} + +table_short_feature_list_group_organization(additionalEventSegmentation) .plans-table-btn-buy-container-desktop +btn_buy_group_organization(highlighted, eventTrackingKey) small.plans-table-th-content-additional-link.invisible(aria-hidden="true") -mixin table_head_student_free(highlighted, period) - div.plans-table-th-content - p.plans-table-th-content-title #{translate("free")} - +table_head_price('free', period) - .plans-table-btn-buy-container-mobile - +btn_buy_student_free(highlighted) - ul.plans-table-th-content-benefit - li #{translate("one_collaborator")} - .plans-table-btn-buy-container-desktop - +btn_buy_student_free(highlighted) - -mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent) - div.plans-table-th-content - p.plans-table-th-content-title #{translate("student")} - +table_head_price('student', period) - .plans-table-btn-buy-container-mobile - +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) - ul.plans-table-th-content-benefit - li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})} - li #{translate("all_premium_features")} - if showExtraContent - li - b !{translate("for_students_only")} - - .plans-table-btn-buy-container-desktop - +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) - -mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) - div.plans-table-th-content - p.plans-table-th-content-title #{translate("university")} - div.plans-table-comments-icon - i.fa.fa-comments-o - .plans-table-btn-buy-container-mobile - +btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) - p.plans-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])} - .plans-table-btn-buy-container-desktop - +btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) - -mixin table_head_price(plan, period) - div.plans-v2-table-price-container - if plan !== 'free' && period === 'annual' - strike.plans-v2-table-price-before-discount - +gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve') - p.plans-v2-table-price - +gen_localized_price_for_plan_view(plan, period) - p.plans-v2-table-price-period-label - if period == 'annual' - | #{translate("per_year")} - else - | #{translate("per_month")} - -mixin table_cell(feature, plan) - - var planValue = feature.plans[plan] - - var featureName = feature.feature - - .plans-table-cell - .plans-table-cell-content( - data-ol-plans-v2-table-cell-plan=plan - data-ol-plans-v2-table-cell-feature=featureName - ) - if (feature.value === 'str') - | !{translate(planValue, {}, ['strong'])} - 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-license-picker-form(data-ol-plans-v2-license-picker-form) @@ -401,6 +364,75 @@ mixin group_plans_license_picker() span ) span.sr-only #{translate("apply_educational_discount_info")} +//- student free plan mixins + +mixin table_head_student_free(highlighted, period) + div.plans-table-th-content + p.plans-table-th-content-title #{translate("free")} + +table_head_price('free', period) + .plans-table-btn-buy-container-mobile + +btn_buy_student_free(highlighted) + +table_short_feature_list_free() + .plans-table-btn-buy-container-desktop + +btn_buy_student_free(highlighted) + +//- student plan mixins + +mixin table_short_feature_list_student_student(showExtraContent) + ul.plans-table-th-content-benefit + li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})} + li #{translate("all_premium_features")} + if showExtraContent + li + b !{translate("for_students_only")} + +mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent) + div.plans-table-th-content + p.plans-table-th-content-title #{translate("student")} + +table_head_price('student', period) + .plans-table-btn-buy-container-mobile + +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +table_short_feature_list_student_student(showExtraContent) + + .plans-table-btn-buy-container-desktop + +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +//- all plans mixins + +mixin table_head_price(plan, period) + div.plans-v2-table-price-container + if plan !== 'free' && period === 'annual' + strike.plans-v2-table-price-before-discount + +gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve') + p.plans-v2-table-price + +gen_localized_price_for_plan_view(plan, period) + p.plans-v2-table-price-period-label + if period == 'annual' + | #{translate("per_year")} + else + | #{translate("per_month")} + +mixin table_cell(feature, plan) + - var planValue = feature.plans[plan] + - var featureName = feature.feature + + .plans-table-cell + .plans-table-cell-content( + data-ol-plans-v2-table-cell-plan=plan + data-ol-plans-v2-table-cell-feature=featureName + ) + if (feature.value === 'str') + | !{translate(planValue, {}, ['strong'])} + 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")} + +//- CTA mixins + mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period) a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription=subscriptionPlan @@ -496,19 +528,6 @@ mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegm if (period === 'monthly') +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period) -mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) - - var segmentation = JSON.stringify(Object.assign({}, {button: 'student-university', location: 'table-header-list', period}, additionalEventSegmentation)) - a.btn.plans-v2-table-btn-buy( - href="/for/contact-sales" - target="_blank" - event-tracking=eventTrackingKey - event-tracking-mb="true" - event-tracking-trigger="click" - event-segmentation=segmentation - class=(highlighted ? 'btn-primary' : 'btn-default') - ) - span #{translate("contact_us_lowercase")} - mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan) - var buttonSegmentation = plan + '-link' - var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation)) @@ -539,6 +558,8 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p event-segmentation=segmentation ) #{translate("buy_now_no_exclamation_mark")} +//- table header and control mixins + mixin plans_v2_table_sticky_header(withSwitch, config) - var tableHeadKeys = Object.keys(config.tableHead) .row.plans-table-sticky-header.sticky(