From 66c27ae153bef2c96c510f1249f3e4b3689d8973 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Mon, 20 Jun 2022 08:21:22 -0400 Subject: [PATCH] Fix interstitial page student plans have wrong button background color (#8489) GitOrigin-RevId: f9f3ec239c06c9ecc7e608aaf879d69041c0a9a3 --- .../plans-marketing/v2/_mixins.pug | 166 +++++++++--------- 1 file changed, 86 insertions(+), 80 deletions(-) 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 903e65963f..cd39238e74 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug @@ -4,32 +4,33 @@ mixin plans_v2_table(period, config) - for (var i = 0; i < 4; i++) - var tableHeadKey = Object.keys(config.tableHead)[i] - var tableHeadOptions = Object.values(config.tableHead)[i] + - var highlighted = i === config.highlightedColumn.index th( class=(i === config.highlightedColumn.index ? 'plans-v2-table-green-highlighted' : (i === config.highlightedColumn.index - 1 ? 'plans-v2-table-cell-before-highlighted-column' : '')) ) - if (i === config.highlightedColumn.index) + if (highlighted) p.plans-v2-table-green-highlighted-text !{config.highlightedColumn.text[period]} case tableHeadKey when 'individual_free' - +table_head_individual_free(period) + +table_head_individual_free(highlighted, period) when 'individual_personal' - +table_head_individual_personal(period) + +table_head_individual_personal(highlighted, period) when 'individual_collaborator' - +table_head_individual_collaborator(period) + +table_head_individual_collaborator(highlighted, period) when 'individual_professional' - +table_head_individual_professional(period) + +table_head_individual_professional(highlighted, period) when 'group_collaborator' - +table_head_group_collaborator() + +table_head_group_collaborator(highlighted) when 'group_professional' - +table_head_group_professional() + +table_head_group_professional(highlighted) when 'group_organization' - +table_head_group_organization() + +table_head_group_organization(highlighted) when 'student_free' - +table_head_student_free(period) + +table_head_student_free(highlighted, period) when 'student_student' - +table_head_student_student(period, tableHeadOptions.showExtraContent) + +table_head_student_student(highlighted, period, tableHeadOptions.showExtraContent) when 'student_university' - +table_head_student_university(period) + +table_head_student_university(highlighted, period) for featuresPerSection in config.features if featuresPerSection.divider @@ -95,54 +96,54 @@ mixin table_student(period) table.card.plans-v2-table.plans-v2-table-student +plans_v2_table(period, plansV2Config.student) -mixin table_head_individual_free(period) +mixin table_head_individual_free(highlighted, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("free")} +table_head_price('free', period) .plans-v2-table-btn-buy-container-mobile - +btn_buy_individual_free() + +btn_buy_individual_free(highlighted) ul.plans-v2-table-th-content-benefit li #{translate("one_collaborator")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_individual_free() + +btn_buy_individual_free(highlighted) -mixin table_head_individual_personal(period) +mixin table_head_individual_personal(highlighted, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("personal")} +table_head_price('personal', period) .plans-v2-table-btn-buy-container-mobile - +btn_buy_individual_personal(period) + +btn_buy_individual_personal(highlighted, period) ul.plans-v2-table-th-content-benefit li #{translate("one_collaborator")} li #{translate("most_premium_features")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_individual_personal(period) + +btn_buy_individual_personal(highlighted, period) -mixin table_head_individual_collaborator(period) +mixin table_head_individual_collaborator(highlighted, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("standard")} +table_head_price('collaborator', period) .plans-v2-table-btn-buy-container-mobile - +btn_buy_individual_collaborator(period) + +btn_buy_individual_collaborator(highlighted, period) ul.plans-v2-table-th-content-benefit li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} li #{translate("all_premium_features")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_individual_collaborator(period) + +btn_buy_individual_collaborator(highlighted, period) -mixin table_head_individual_professional(period) +mixin table_head_individual_professional(highlighted, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("professional")} +table_head_price('professional', period) .plans-v2-table-btn-buy-container-mobile - +btn_buy_individual_professional(period) + +btn_buy_individual_professional(highlighted, period) ul.plans-v2-table-th-content-benefit li #{translate("unlimited_collabs")} li #{translate("all_premium_features")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_individual_professional(period) + +btn_buy_individual_professional(highlighted, period) -mixin table_head_group_collaborator() +mixin table_head_group_collaborator(highlighted) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("group_standard")} .plans-v2-table-price-container @@ -153,7 +154,7 @@ mixin table_head_group_collaborator() p.plans-v2-table-price-period-label | per user / year .plans-v2-table-btn-buy-container-mobile - +btn_buy_group_collaborator() + +btn_buy_group_collaborator(highlighted) +additional_link_group('group_collaborator') ul.plans-v2-table-th-content-benefit li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} @@ -161,10 +162,10 @@ mixin table_head_group_collaborator() span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='collaborator') #{initialLocalizedGroupPrice.price.collaborator} span  #{translate("total_per_year_lowercase")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_group_collaborator() + +btn_buy_group_collaborator(highlighted) +additional_link_group('group_collaborator') -mixin table_head_group_professional() +mixin table_head_group_professional(highlighted) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("group_professional")} .plans-v2-table-price-container @@ -175,7 +176,7 @@ mixin table_head_group_professional() p.plans-v2-table-price-period-label | per user / year .plans-v2-table-btn-buy-container-mobile - +btn_buy_group_professional() + +btn_buy_group_professional(highlighted) +additional_link_group('group_professional') ul.plans-v2-table-th-content-benefit li #{translate("unlimited_collaborators_in_each_project")} @@ -183,17 +184,17 @@ mixin table_head_group_professional() span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price='professional') #{initialLocalizedGroupPrice.price.professional} span  #{translate("total_per_year_lowercase")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_group_professional() + +btn_buy_group_professional(highlighted) +additional_link_group('group_professional') -mixin table_head_group_organization() +mixin table_head_group_organization(highlighted) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("organization")} .plans-v2-table-comments-icon i.fa.fa-comments-o .plans-v2-table-btn-buy-container-mobile - +btn_buy_group_organization() + +btn_buy_group_organization(highlighted) small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true") ul.plans-v2-table-th-content-benefit li #{translate("best_choices_companies_universities_non_profits")} @@ -208,26 +209,26 @@ mixin table_head_group_organization() event-segmentation='{"button": "group_organization-link", "location": "table-header-list", "period": "annual", "plans-page-layout-v2": "new-plans-page"}' ) #{translate("also_available_as_on_premises")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_group_organization() + +btn_buy_group_organization(highlighted) small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true") -mixin table_head_student_free(period) +mixin table_head_student_free(highlighted, period) div.plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("free")} +table_head_price('free', period) .plans-v2-table-btn-buy-container-mobile - +btn_buy_student_free() + +btn_buy_student_free(highlighted) ul.plans-v2-table-th-content-benefit li #{translate("one_collaborator")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_student_free() + +btn_buy_student_free(highlighted) -mixin table_head_student_student(period, showExtraContent) +mixin table_head_student_student(highlighted, period, showExtraContent) div.plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("student")} +table_head_price('student', period) .plans-v2-table-btn-buy-container-mobile - +btn_buy_student_student(period) + +btn_buy_student_student(highlighted, period) ul.plans-v2-table-th-content-benefit li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})} li #{translate("all_premium_features")} @@ -235,18 +236,18 @@ mixin table_head_student_student(period, showExtraContent) li #{translate("for_students_only")} .plans-v2-table-btn-buy-container-desktop - +btn_buy_student_student(period) + +btn_buy_student_student(highlighted, period) -mixin table_head_student_university(period) +mixin table_head_student_university(highlighted, period) div.plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("university")} div.plans-v2-table-comments-icon i.fa.fa-comments-o .plans-v2-table-btn-buy-container-mobile - +btn_buy_student_university(period) + +btn_buy_student_university(highlighted, period) p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])} .plans-v2-table-btn-buy-container-desktop - +btn_buy_student_university(period) + +btn_buy_student_university(highlighted, period) mixin table_head_price(plan, period) div.plans-v2-table-price-container @@ -324,86 +325,90 @@ mixin group_plans_license_picker() ) #{translate("learn_more_lowercase")} span ) -mixin btn_buy_individual(subscriptionPlan, period, highlighted) - if (highlighted) - a.btn.btn-primary.plans-v2-table-btn-buy( - data-ol-start-new-subscription=subscriptionPlan - data-ol-item-view=period - ) - if (period === 'monthly') - span #{translate("try_for_free")} - else - span #{translate("buy_now_no_exclamation_mark")} - else - a.btn.btn-default.plans-v2-table-btn-buy( - data-ol-start-new-subscription=subscriptionPlan - data-ol-item-view=period - ) - if (period === 'monthly') - span #{translate("try_for_free")} - else - span #{translate("buy_now_no_exclamation_mark")} +mixin btn_buy_individual(highlighted, subscriptionPlan, period) + a.btn.plans-v2-table-btn-buy( + data-ol-start-new-subscription=subscriptionPlan + data-ol-item-view=period + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + if (period === 'monthly') + span #{translate("try_for_free")} + else + span #{translate("buy_now_no_exclamation_mark")} mixin btn_buy_individual_free() if (!getSessionUser()) - a.btn.btn-default.plans-v2-table-btn-buy(href="/register") + a.btn.plans-v2-table-btn-buy( + href="/register" + class=(highlighted ? 'btn-primary' : 'btn-default') + ) span #{translate("try_for_free")} else - a.btn.btn-default.plans-v2-table-btn-buy.invisible(aria-hidden="true") + a.btn.plans-v2-table-btn-buy.invisible( + aria-hidden="true" + class=(highlighted ? 'btn-primary' : 'btn-default') + ) -mixin btn_buy_individual_personal(period) - +btn_buy_individual('paid-personal', period, false) +mixin btn_buy_individual_personal(highlighted, period) + +btn_buy_individual(highlighted, 'paid-personal', period) if (period === 'monthly') +additional_link_buy('paid-personal', period) -mixin btn_buy_individual_collaborator(period) - +btn_buy_individual('collaborator', period, true) +mixin btn_buy_individual_collaborator(highlighted, period) + +btn_buy_individual(highlighted, 'collaborator', period) if (period === 'monthly') +additional_link_buy('collaborator', period) -mixin btn_buy_individual_professional(period) - +btn_buy_individual('professional', period, false) +mixin btn_buy_individual_professional(highlighted, period) + +btn_buy_individual(highlighted, 'professional', period) if (period === 'monthly') +additional_link_buy('professional', period) -mixin btn_buy_group_collaborator() - a.btn.btn-default.plans-v2-table-btn-buy( +mixin btn_buy_group_collaborator(highlighted) + a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='group_collaborator' data-ol-item-view='annual' data-ol-has-custom-href + class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("customize")} span.hidden-mobile #{translate("your_plan_lowercase")} -mixin btn_buy_group_professional() - a.btn.btn-primary.plans-v2-table-btn-buy( +mixin btn_buy_group_professional(highlighted) + a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='group_professional' data-ol-item-view='annual' data-ol-has-custom-href + class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("customize")} span.hidden-mobile #{translate("your_plan_lowercase")} -mixin btn_buy_group_organization() - a.btn.btn-default.plans-v2-table-btn-buy( +mixin btn_buy_group_organization(highlighted) + a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='group_organization' data-ol-item-view='annual' data-ol-has-custom-href href='/for/enterprises/sales-contact' target='_blank' + class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("contact_us_lowercase")} -mixin btn_buy_student_free() +mixin btn_buy_student_free(highlighted) if (!getSessionUser()) - a.btn.btn-default.plans-v2-table-btn-buy(href="/register") + a.btn.plans-v2-table-btn-buy( + href="/register" + class=(highlighted ? 'btn-primary' : 'btn-default') + ) span #{translate("try_for_free")} -mixin btn_buy_student_student(period) - a.btn.btn-primary.plans-v2-table-btn-buy( +mixin btn_buy_student_student(highlighted, period) + a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='student' data-ol-item-view=period data-ol-location='card' + class=(highlighted ? 'btn-primary' : 'btn-default') ) if (period === 'monthly') span #{translate("try_for_free")} @@ -412,14 +417,15 @@ mixin btn_buy_student_student(period) if (period === 'monthly') +additional_link_buy('student', period) -mixin btn_buy_student_university(period) - a.btn.btn-default.plans-v2-table-btn-buy( +mixin btn_buy_student_university(highlighted, period) + a.btn.plans-v2-table-btn-buy( href="/for/enterprises/sales-contact" target="_blank" event-tracking="plans-page-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation='{"button": "student-university", "location": "table-header-list", "period": "' + period + '", "plans-page-layout-v2": "new-plans-page"}' + class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("contact_us_lowercase")}