From 5a8a0fb268dba5255622384474e4def78334e3a6 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Tue, 27 Feb 2024 10:25:10 -0700 Subject: [PATCH] Tear down `annual-trials` split test: - Use the `default` variant as the winner - Remove all `annual-trials`-related code GitOrigin-RevId: 3956f256157f3e86c99e41eec54ef6fd0da39bc3 --- .../Subscription/SubscriptionController.js | 29 +- .../interstitial-payment_no_nudge_monthly.pug | 58 -- .../interstitial-payment_nudge_annual.pug | 58 -- .../plans/_cards_controls_tables.pug | 7 +- .../subscriptions/plans/_mixins_nudge.pug | 626 ------------------ .../subscription/plans-v2/plans-v2-main.js | 17 +- 6 files changed, 3 insertions(+), 792 deletions(-) delete mode 100644 services/web/app/views/subscriptions/interstitial-payment_no_nudge_monthly.pug delete mode 100644 services/web/app/views/subscriptions/interstitial-payment_nudge_annual.pug delete 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 f5518a56fc..3fe2f02124 100644 --- a/services/web/app/src/Features/Subscription/SubscriptionController.js +++ b/services/web/app/src/Features/Subscription/SubscriptionController.js @@ -67,17 +67,9 @@ async function plansPage(req, res) { usage: getDefault('usage', 'usage', 'enterprise'), } - // annual plans with the free trial option split test - nudge variant - const annualTrialsAssignment = await SplitTestHandler.promises.getAssignment( - req, - res, - 'annual-trials' - ) - const plansPageViewSegmentation = { currency: recommendedCurrency, countryCode, - 'annual-trials': annualTrialsAssignment.variant, } AnalyticsManager.recordEventForSession( @@ -102,7 +94,6 @@ async function plansPage(req, res) { initialLocalizedGroupPrice: SubscriptionHelper.generateInitialLocalizedGroupPrice(currency), showInrGeoBanner: countryCode === 'IN', - annualTrialsAssignment: annualTrialsAssignment?.variant, }) } @@ -225,14 +216,9 @@ async function interstitialPaymentPage(req, res) { if (hasSubscription) { res.redirect('/user/subscription?hasSubscription=true') } else { - // annual plans with the free trial option split test - nudge variant - const annualTrialsAssignment = - await SplitTestHandler.promises.getAssignment(req, res, 'annual-trials') - const paywallPlansPageViewSegmentation = { currency: recommendedCurrency, countryCode, - 'annual-trials': annualTrialsAssignment.variant, } AnalyticsManager.recordEventForSession( req.session, @@ -240,20 +226,7 @@ async function interstitialPaymentPage(req, res) { paywallPlansPageViewSegmentation ) - 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, { + res.render('subscriptions/interstitial-payment', { title: 'subscribe', itm_content: req.query?.itm_content, itm_campaign: req.query?.itm_campaign, 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 deleted file mode 100644 index 9ceca988d8..0000000000 --- a/services/web/app/views/subscriptions/interstitial-payment_no_nudge_monthly.pug +++ /dev/null @@ -1,58 +0,0 @@ -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.notification.notification-type-success.text-centered - div.notification-content !{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 deleted file mode 100644 index a03931da39..0000000000 --- a/services/web/app/views/subscriptions/interstitial-payment_nudge_annual.pug +++ /dev/null @@ -1,58 +0,0 @@ -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.notification.notification-type-success.text-centered - div.notification-content !{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 9d58bec52e..042dd7aba4 100644 --- a/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug +++ b/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug @@ -1,9 +1,4 @@ -if annualTrialsAssignment == 'nudge' - include ./_mixins_nudge -else if annualTrialsAssignment == 'no-nudge' - include ./_mixins_nudge -else if annualTrialsAssignment == 'default' - include ./_mixins +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 deleted file mode 100644 index ec28886af5..0000000000 --- a/services/web/app/views/subscriptions/plans/_mixins_nudge.pug +++ /dev/null @@ -1,626 +0,0 @@ -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 = '' - } - thClass += ' plans-v2-table-column-header' - if (colspan > 1) { - var scopeValue = 'colgroup' - } - else { - var scopeValue = 'col' - } - case tableHeadKey - when 'individual_free' - - var ariaLabel = translate("free") - when 'individual_collaborator' - - var ariaLabel = translate("standard") - when 'individual_professional' - - var ariaLabel = translate("professional") - when 'group_collaborator' - - var ariaLabel = translate("group_standard") - when 'group_professional' - - var ariaLabel = translate("group_professional") - when 'group_organization' - - var ariaLabel = translate("organization") - when 'student_free' - - var ariaLabel = translate("free") - when 'student_student' - - var ariaLabel = translate("student") - when 'student_university' - - var ariaLabel = translate("university") - default - - var ariaLabel = undefined - th( - aria-label=ariaLabel - class=thClass - colspan=colspan - scope=scopeValue - ) - .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 ) - span.sr-only #{translate(featuresPerSection.dividerInfo)} - 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}`) - ) - th( - class="plans-v2-table-row-header" - event-tracking="plans-page-table" - event-tracking-trigger="hover" - event-tracking-ga="subscription-funnel" - event-tracking-label=`${feature.feature}` - colspan=baseColspan - scope="row" - ) - .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 ) - span.sr-only #{translate(feature.info)} - 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 ) - span.sr-only #{translate("apply_educational_discount_info")} - -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" - aria-label=translate("select_monthly_plans") - 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")} diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js index 0d643bb9e8..3c6db1c5a4 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js @@ -51,23 +51,8 @@ export function updateLinkTargets() { const plan = el.getAttribute('data-ol-start-new-subscription') const view = el.getAttribute('data-ol-item-view') - // annual split test trial (nudge, no-nudge, default) - const annualTrialsVariant = getMeta('ol-splitTestVariants')?.[ - 'annual-trials' - ] - let suffix = '' - if (view === 'annual') { - if (annualTrialsVariant === 'nudge') { - suffix = '-annual_free_trial_7_days' - } else if (annualTrialsVariant === 'no-nudge') { - suffix = '-annual_free_trial_7_days' - } else if (annualTrialsVariant === 'default') { - suffix = '-annual' - } - } else { - suffix = '_free_trial_7_days' - } + const suffix = view === 'annual' ? '-annual' : '_free_trial_7_days' const planCode = `${plan}${suffix}`