From b9e8cbff2e3c1a3ce878b20208ee6257c89aa3e8 Mon Sep 17 00:00:00 2001 From: Rebeka Date: Tue, 1 Aug 2023 18:47:00 +0200 Subject: [PATCH] copy the plan&interstitial pages and update the view to show the annual view and plan to show the free trial options GitOrigin-RevId: e77f0f9c4825776d3abb28ce5c46e3e2c456719e --- .../Subscription/SubscriptionController.js | 44 +- .../interstitial-payment_no_nudge_monthly.pug | 57 ++ .../interstitial-payment_nudge_annual.pug | 57 ++ .../plans/_cards_controls_tables.pug | 7 +- .../subscriptions/plans/_mixins_nudge.pug | 590 ++++++++++++++++++ 5 files changed, 735 insertions(+), 20 deletions(-) create mode 100644 services/web/app/views/subscriptions/interstitial-payment_no_nudge_monthly.pug create mode 100644 services/web/app/views/subscriptions/interstitial-payment_nudge_annual.pug create mode 100644 services/web/app/views/subscriptions/plans/_mixins_nudge.pug diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js index 8766f3d4da..20dd3f5aa0 100644 --- a/services/web/app/src/Features/Subscription/SubscriptionController.js +++ b/services/web/app/src/Features/Subscription/SubscriptionController.js @@ -123,7 +123,7 @@ async function plansPage(req, res) { ) ? 'latam' : 'default', - 'annual-trials': annualTrialsAssignment?.variant, + 'annual-trials': annualTrialsAssignment.variant, } if (inrGeoBannerSplitTestName) { plansPageViewSegmentation[inrGeoBannerSplitTestName] = inrGeoBannerVariant @@ -366,7 +366,7 @@ async function interstitialPaymentPage(req, res) { ) ? 'latam' : 'default', - 'annual-trials': annualTrialsAssignment?.variant, + 'annual-trials': annualTrialsAssignment.variant, } if (inrGeoBannerSplitTestName) { paywallPlansPageViewSegmentation[inrGeoBannerSplitTestName] = @@ -378,23 +378,29 @@ async function interstitialPaymentPage(req, res) { paywallPlansPageViewSegmentation ) - res.render( - annualTrialsAssignment?.variant == 'nudge' - ? 'subscriptions/interstitial-payment_nudge_annual' - : annualTrialsAssignment?.variant == 'no-nudge' - ? 'subscriptions/interstitial-payment_no_nudge_monthly' - : 'subscriptions/interstitial-payment', - { - title: 'subscribe', - itm_content: req.query?.itm_content, - itm_campaign: req.query?.itm_campaign, - itm_referrer: req.query?.itm_referrer, - recommendedCurrency, - interstitialPaymentConfig, - showSkipLink, - showInrGeoBanner, - } - ) + let templatePath + + switch (annualTrialsAssignment?.variant) { + case 'nudge': + templatePath = 'subscriptions/interstitial-payment_nudge_annual' + break + case 'no-nudge': + templatePath = 'subscriptions/interstitial-payment_no_nudge_monthly' + break + default: + templatePath = 'subscriptions/interstitial-payment' + } + + res.render(templatePath, { + title: 'subscribe', + itm_content: req.query?.itm_content, + itm_campaign: req.query?.itm_campaign, + itm_referrer: req.query?.itm_referrer, + recommendedCurrency, + interstitialPaymentConfig, + showSkipLink, + showInrGeoBanner, + }) } } diff --git a/services/web/app/views/subscriptions/interstitial-payment_no_nudge_monthly.pug b/services/web/app/views/subscriptions/interstitial-payment_no_nudge_monthly.pug new file mode 100644 index 0000000000..3c2f712af2 --- /dev/null +++ b/services/web/app/views/subscriptions/interstitial-payment_no_nudge_monthly.pug @@ -0,0 +1,57 @@ +extends ../layout + +include ./plans/_mixins_nudge + +block vars + - entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main' + - var suppressFooter = true + - var suppressNavbarRight = true + - var suppressCookieBanner = true + +block append meta + meta(name="ol-recommendedCurrency" content=recommendedCurrency) + meta(name="ol-itm_content" content=itm_content) + +block content + main.content.content-alt#main-content + .content-page + .plans + .container + if showInrGeoBanner + div.alert.alert-success.text-centered !{translate("inr_discount_offer_plans_page_banner", {flag: '🇮🇳'})} + + .row + .col-md-12 + .page-header.centered.plans-header.text-centered.top-page-header + h1.text-capitalize #{translate('choose_your_plan')} + + +monthly_annual_switch("monthly", "paywall-plans-page-toggle", '{}') + + +plans_v2_table_sticky_header(true, interstitialPaymentConfig) + + .row.plans-v2-table-container(data-ol-plans-v2-period='monthly') + .col-sm-12 + .row + table.card.plans-v2-table.plans-v2-table-individual + +plans_v2_table('monthly', interstitialPaymentConfig) + + .row.plans-v2-table-container(hidden data-ol-plans-v2-period='annual') + .col-sm-12 + .row + table.card.plans-v2-table.plans-v2-table-individual + +plans_v2_table('annual', interstitialPaymentConfig) + + //- sticky header on mobile will be "hidden" (by removing its sticky position) if it reaches this div + .invisible(aria-hidden="true" data-ol-plans-v2-table-sticky-header-stop) + + if (showSkipLink) + .row.row-spaced-small.text-center + a(href='/project' + event-tracking="skip-button-click" + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation='{"location": "interstitial-page"}' + ) + | #{translate("continue_with_free_plan")} + + != moduleIncludes("contactModalGeneral-marketing", locals) diff --git a/services/web/app/views/subscriptions/interstitial-payment_nudge_annual.pug b/services/web/app/views/subscriptions/interstitial-payment_nudge_annual.pug new file mode 100644 index 0000000000..47f01ff18e --- /dev/null +++ b/services/web/app/views/subscriptions/interstitial-payment_nudge_annual.pug @@ -0,0 +1,57 @@ +extends ../layout + +include ./plans/_mixins_nudge + +block vars + - entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main' + - var suppressFooter = true + - var suppressNavbarRight = true + - var suppressCookieBanner = true + +block append meta + meta(name="ol-recommendedCurrency" content=recommendedCurrency) + meta(name="ol-itm_content" content=itm_content) + +block content + main.content.content-alt#main-content + .content-page + .plans + .container + if showInrGeoBanner + div.alert.alert-success.text-centered !{translate("inr_discount_offer_plans_page_banner", {flag: '🇮🇳'})} + + .row + .col-md-12 + .page-header.centered.plans-header.text-centered.top-page-header + h1.text-capitalize #{translate('choose_your_plan')} + + +monthly_annual_switch("annual", "paywall-plans-page-toggle", '{}') + + +plans_v2_table_sticky_header(true, interstitialPaymentConfig) + + .row.plans-v2-table-container(data-ol-plans-v2-period='annual') + .col-sm-12 + .row + table.card.plans-v2-table.plans-v2-table-individual + +plans_v2_table('annual', interstitialPaymentConfig) + + .row.plans-v2-table-container(hidden data-ol-plans-v2-period='monthly') + .col-sm-12 + .row + table.card.plans-v2-table.plans-v2-table-individual + +plans_v2_table('monthly', interstitialPaymentConfig) + + //- sticky header on mobile will be "hidden" (by removing its sticky position) if it reaches this div + .invisible(aria-hidden="true" data-ol-plans-v2-table-sticky-header-stop) + + if (showSkipLink) + .row.row-spaced-small.text-center + a(href='/project' + event-tracking="skip-button-click" + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation='{"location": "interstitial-page"}' + ) + | #{translate("continue_with_free_plan")} + + != moduleIncludes("contactModalGeneral-marketing", locals) diff --git a/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug b/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug index 79e458bba2..407e925f2d 100644 --- a/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug +++ b/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug @@ -1,4 +1,9 @@ -include ./_mixins +if annualTrialsAssignment == 'nudge' + include ./_mixins_nudge +else if annualTrialsAssignment == 'no-nudge' + include ./_mixins_nudge +else if annualTrialsAssignment == 'default' + include ./_mixins .row.plans-v2-top-switch .col-xs-12 diff --git a/services/web/app/views/subscriptions/plans/_mixins_nudge.pug b/services/web/app/views/subscriptions/plans/_mixins_nudge.pug new file mode 100644 index 0000000000..ab2dda4d00 --- /dev/null +++ b/services/web/app/views/subscriptions/plans/_mixins_nudge.pug @@ -0,0 +1,590 @@ +mixin features_premium + li   + li + strong #{translate('all_premium_features')} + li #{translate('sync_dropbox_github')} + li #{translate('full_doc_history')} + li #{translate('track_changes')} + li + #{translate('more').toLowerCase()} + +mixin gen_localized_price_for_plan_view(plan, view) + span #{settings.localizedPlanPricing[recommendedCurrency][plan][view]} + +mixin plans_v2_table(period, config) + - var baseColspan = config.baseColspan || 1 + - var maxColumn = config.maxColumn || 4 + - var discountedColumn = config.discountedColumn || {} + tr(class=`cols-${maxColumn}`) + th(colspan=baseColspan) + - for (var i = 0; i < maxColumn; i++) + - var tableHeadKey = Object.keys(config.tableHead)[i] + - var tableHeadOptions = Object.values(config.tableHead)[i] || {} + - var colspan = tableHeadOptions.colspan || baseColspan + - var highlighted = i === config.highlightedColumn.index + - var discountHighlighted = i === discountedColumn.index + - var eventTrackingKey = config.eventTrackingKey + - var additionalEventSegmentation = config.additionalEventSegmentation || {} + - + if (discountHighlighted) { + var thClass = 'plans-v2-table-discount-highlighted' + } else if (highlighted) { + var thClass = 'plans-v2-table-green-highlighted' + } else if (i === config.highlightedColumn.index - 1) { + var thClass = 'plans-v2-table-cell-before-green-highlighted-column' + } else { + var thClass = '' + } + th( + class=thClass + colspan=colspan + ) + .plans-v2-table-th + if (discountHighlighted) + p.plans-v2-table-discount-highlighted-text #{translate(config.discountedColumn.text[period]).toUpperCase()} + if (highlighted) + p.plans-v2-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()} + case tableHeadKey + when 'individual_free' + +table_head_individual_free(highlighted, period) + when 'individual_collaborator' + +table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) + when 'individual_professional' + +table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) + when 'group_collaborator' + +table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation) + when 'group_professional' + +table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation) + when 'group_organization' + +table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation) + when 'student_free' + +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).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan) + if featuresPerSection.divider + tr.plans-v2-table-divider + td( + colspan=dividerColspan + class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '') + ) + div + b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)} + //- will only appear on screen width >= 768px (using CSS) + i.fa.fa-question-circle.plans-v2-table-divider-question-icon( + data-toggle="tooltip" + title=translate(featuresPerSection.dividerInfo), + data-placement="top" +) + //- will only appear on screen width < 768px (using CSS) + span.plans-v2-table-divider-learn-more-container + span ( + span.plans-v2-table-divider-learn-more-text( + data-toggle="tooltip" + title=translate(featuresPerSection.dividerInfo), + data-placement="top" + ) #{translate("learn_more_lowercase")} + span ) + for feature, featureIndex in featuresPerSection.items + tr( + class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`) + ) + td( + event-tracking="plans-page-table" + event-tracking-trigger="hover" + event-tracking-ga="subscription-funnel" + event-tracking-label=`${feature.feature}` + colspan=baseColspan + ) + .plans-v2-table-feature-name + if feature.info + span #{translate(feature.feature)} + //- will only appear on screen width >= 768px (using CSS) + i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon( + data-toggle="tooltip" + title=translate(feature.info), + data-placement="right" + ) + //- will only appear on screen width < 768px (using CSS) + span.plans-v2-table-feature-name-learn-more-container + span ( + span.plans-v2-table-feature-name-learn-more-text( + data-toggle="tooltip" + title=translate(feature.info), + data-placement="top" + ) #{translate("learn_more_lowercase")} + span ) + else + | #{translate(feature.feature)} + for plan, planIndex in Object.keys(feature.plans) + - var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {} + - var colspan = tableHeadOptions.colspan || baseColspan + - + if (planIndex === discountedColumn.index) { + var tdClass = 'plans-v2-table-discount-highlighted' + } else if (planIndex === config.highlightedColumn.index) { + var tdClass = 'plans-v2-table-green-highlighted' + } else if (planIndex === config.highlightedColumn.index - 1) { + var tdClass = 'plans-v2-table-cell-before-green-highlighted-column' + } else { + var tdClass = '' + } + td( + class=tdClass + colspan=colspan + ) + +table_cell(feature, plan) + +mixin table_individual(period) + table.card.plans-v2-table.plans-v2-table-individual + +plans_v2_table(period, plansConfig.individual) + +mixin table_group + table.card.plans-v2-table.plans-v2-table-group + +plans_v2_table('annual', plansConfig.group) + +mixin table_student(period) + table.card.plans-v2-table.plans-v2-table-student + +plans_v2_table(period, plansConfig.student) + +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(highlighted) + ul.plans-v2-table-th-content-benefit + li #{translate("one_collaborator")} + .plans-v2-table-btn-buy-container-desktop + +btn_buy_individual_free(highlighted) + +mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, 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(highlighted, eventTrackingKey, additionalEventSegmentation, 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(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, 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(highlighted, eventTrackingKey, additionalEventSegmentation, period) + ul.plans-v2-table-th-content-benefit + li !{translate("unlimited_collabs_rt",{},["b"])} + li #{translate("all_premium_features")} + .plans-v2-table-btn-buy-container-desktop + +btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation) + .plans-v2-table-th-content + p.plans-v2-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')} + .plans-v2-table-btn-buy-container-mobile + +btn_buy_group_collaborator(highlighted, eventTrackingKey) + +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator') + ul.plans-v2-table-th-content-benefit + li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} + li + +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') + +mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation) + .plans-v2-table-th-content + p.plans-v2-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')} + .plans-v2-table-btn-buy-container-mobile + +btn_buy_group_professional(highlighted, eventTrackingKey) + +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional') + ul.plans-v2-table-th-content-benefit + li #{translate("unlimited_collaborators_in_each_project")} + li + +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)) + .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(highlighted, eventTrackingKey) + 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")} + 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")} + .plans-v2-table-btn-buy-container-desktop + +btn_buy_group_organization(highlighted, eventTrackingKey) + small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true") + +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(highlighted) + ul.plans-v2-table-th-content-benefit + li #{translate("one_collaborator")} + .plans-v2-table-btn-buy-container-desktop + +btn_buy_student_free(highlighted) + +mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, 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(highlighted, eventTrackingKey, additionalEventSegmentation, period) + ul.plans-v2-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-v2-table-btn-buy-container-desktop + +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, 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(highlighted, eventTrackingKey, additionalEventSegmentation, 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(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-v2-table-cell + .plans-v2-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-v2-license-picker-form(data-ol-plans-v2-license-picker-form) + .plans-v2-license-picker-select-container + span #{translate("number_of_users_with_colon")} + select.plans-v2-license-picker-select( + name="plans-v2-license-picker-select" + id="plans-v2-license-picker-select" + autocomplete="off" + data-ol-plans-v2-license-picker-select + event-tracking="plans-page-group-size" + event-tracking-mb="true" + event-tracking-trigger="click" + event-tracking-element="select" + ) + option(value="2") 2 + option(value="3") 3 + option(value="4") 4 + option(value="5") 5 + option(value="10") 10 + option(value="20") 20 + option(value="50") 50 + .plans-v2-license-picker-educational-discount + label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label) + input.plans-v2-license-picker-educational-discount-checkbox( + type="checkbox" + id="license-picker-educational-discount" + autocomplete="off" + data-ol-plans-v2-license-picker-educational-discount-input + event-tracking="plans-page-edu-discount" + event-tracking-mb="true" + event-tracking-trigger="click" + event-tracking-element="checkbox" + ) + span #{translate("apply_educational_discount")} + //- will only appear on screen width >= 768px (using CSS) + i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon( + data-toggle="tooltip" + title=translate("apply_educational_discount_info"), + data-placement="bottom" + ) + //- will only appear on screen width < 768px (using CSS) + span.plans-v2-license-picker-educational-discount-learn-more-container + span ( + span.plans-v2-license-picker-educational-discount-learn-more-text( + data-toggle="tooltip" + title=translate("apply_educational_discount_info"), + data-placement="bottom" + ) #{translate("learn_more_lowercase")} + span ) + +mixin btn_buy_individual(highlighted, discountHighlighted, eventTrackingKey, subscriptionPlan, period) + a.btn.plans-v2-table-btn-buy( + data-ol-start-new-subscription=subscriptionPlan + data-ol-event-tracking-key=eventTrackingKey + data-ol-item-view=period + class=(discountHighlighted ? 'btn-dark-blue' : (highlighted ? 'btn-primary' : 'btn-default')) + ) + span #{translate("try_for_free")} + +mixin btn_buy_individual_free() + if (!getSessionUser()) + a.btn.plans-v2-table-btn-buy( + href="/register" + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + span #{translate("try_for_free")} + else + a.btn.plans-v2-table-btn-buy.invisible( + aria-hidden="true" + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + +mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +btn_buy_individual(highlighted, false, eventTrackingKey, 'collaborator', period) + +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'collaborator', period) + +mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) + +btn_buy_individual(highlighted, false, eventTrackingKey, 'professional', period) + +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period) + +mixin btn_buy_group_collaborator(highlighted, eventTrackingKey) + a.btn.plans-v2-table-btn-buy( + data-ol-start-new-subscription='group_collaborator' + data-ol-event-tracking-key=eventTrackingKey + data-ol-item-view='annual' + data-ol-has-custom-href + data-ol-location='table-header' + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + span.hidden-desktop #{translate("customize")} + span.hidden-mobile #{translate("customize_your_plan")} + +mixin btn_buy_group_professional(highlighted, eventTrackingKey) + a.btn.plans-v2-table-btn-buy( + data-ol-start-new-subscription='group_professional' + data-ol-event-tracking-key=eventTrackingKey + data-ol-item-view='annual' + data-ol-has-custom-href + data-ol-location='table-header' + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + span.hidden-desktop #{translate("customize")} + span.hidden-mobile #{translate("customize_your_plan")} + +mixin btn_buy_group_organization(highlighted, eventTrackingKey) + a.btn.plans-v2-table-btn-buy( + data-ol-start-new-subscription='group_organization' + data-ol-event-tracking-key=eventTrackingKey + data-ol-item-view='annual' + data-ol-has-custom-href + data-ol-location='table-header' + href='/for/contact-sales' + target='_blank' + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + span #{translate("contact_us_lowercase")} + +mixin btn_buy_student_free(highlighted) + if (!getSessionUser()) + 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(highlighted, eventTrackingKey, additionalEventSegmentation, period) + a.btn.plans-v2-table-btn-buy( + data-ol-start-new-subscription='student' + data-ol-event-tracking-key=eventTrackingKey + data-ol-item-view=period + data-ol-location='card' + class=(highlighted ? 'btn-primary' : 'btn-default') + ) + span #{translate("try_for_free")} + +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)) + small.plans-v2-table-th-content-additional-link + | #{translate("or")} + a( + href="/for/contact-sales" + target="_blank" + event-tracking=eventTrackingKey + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation=segmentation + ) #{translate("contact_us_lowercase")} + +mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period) + - var isAnnual = (period === 'annual') + - var buttonSegmentation = plan + '-link' + - var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header', period}, additionalEventSegmentation)) + - var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'} + - var itmReferrer = itm_referrer ? { itm_referrer } : {} + - var qs = new URLSearchParams({planCode: isAnnual ? `${plan}-annual` : plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer}) + small.plans-v2-table-th-content-additional-link + | #{translate("or")} + a( + href=`/user/subscription/new?${qs.toString()}` + event-tracking=eventTrackingKey + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation=segmentation + ) #{translate("buy_now_no_exclamation_mark")} + +mixin plans_v2_table_sticky_header(withSwitch, config) + - var tableHeadKeys = Object.keys(config.tableHead) + .row.plans-v2-table-sticky-header.sticky( + data-ol-plans-v2-table-sticky-header + class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch') + ) + - for (var i = 0; i < tableHeadKeys.length; i++) + - var tableHeadKey = tableHeadKeys[i] + - var translateKey = tableHeadKey.split('_')[1] + - + if (config.discountedColumn?.index === i) { + var elClass = 'plans-v2-table-sticky-header-item-discount-highlighted' + } else if (config.highlightedColumn.index === i) { + var elClass = 'plans-v2-table-sticky-header-item-green-highlighted' + } else { + var elClass = '' + } + .plans-v2-table-sticky-header-item( + class=elClass + ) + case tableHeadKey + when 'individual_collaborator' + span #{translate('standard')} + when 'group_professional' + span #{translate(tableHeadKey)} + when 'group_collaborator' + span #{translate('group_standard')} + default + span #{translate(translateKey)} + +mixin table_sticky_header_all(plansConfig) + .row.plans-v2-table-sticky-header-container( + data-ol-plans-v2-view='individual' + ) + +plans_v2_table_sticky_header(true, plansConfig.individual) + .row.plans-v2-table-sticky-header-container( + hidden + data-ol-plans-v2-view='group' + ) + +plans_v2_table_sticky_header(false, plansConfig.group) + .row.plans-v2-table-sticky-header-container( + hidden + data-ol-plans-v2-view='student' + ) + +plans_v2_table_sticky_header(true, plansConfig.student) + +mixin monthly_annual_switch(initialState, eventTracking, eventSegmentation) + - var monthlyAnnualToggleChecked = initialState === 'monthly' + .row + .col-md-4.col-md-offset-4.text-centered.plans-v2-m-a-switch-container(data-ol-plans-v2-m-a-switch-container) + .plans-v2-m-a-switch-annual-text-container + span.underline(data-ol-plans-v2-m-a-switch-text='annual') #{translate("annual")} + .tooltip.in.left.plans-v2-m-a-tooltip( + role="tooltip" + data-ol-plans-v2-m-a-tooltip + class=monthlyAnnualToggleChecked ? 'plans-v2-m-a-tooltip-monthly-selected' : '' + ) + .tooltip-arrow + .tooltip-inner + span(hidden=!monthlyAnnualToggleChecked data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")} + span(hidden=monthlyAnnualToggleChecked data-ol-tooltip-period='annual') #{translate("saving_20_percent")} + + label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch) + input( + type="checkbox" + checked=monthlyAnnualToggleChecked + role="switch" + autocomplete="off" + event-tracking=eventTracking + event-tracking-mb="true" + event-tracking-trigger="click" + event-tracking-element="checkbox" + event-segmentation=eventSegmentation + ) + span + span(data-ol-plans-v2-m-a-switch-text='monthly') #{translate("monthly")}