diff --git a/services/web/app/views/subscriptions/interstitial-payment.pug b/services/web/app/views/subscriptions/interstitial-payment.pug index 56cc87eb00..6ec3bee24b 100644 --- a/services/web/app/views/subscriptions/interstitial-payment.pug +++ b/services/web/app/views/subscriptions/interstitial-payment.pug @@ -23,7 +23,7 @@ block content .page-header.centered.plans-header.text-centered.top-page-header h1.text-capitalize #{translate('choose_your_plan')} - +monthly_annual_switch("paywall-plans-page-toggle", '{}') + +monthly_annual_switch("monthly", "paywall-plans-page-toggle", '{}') +plans_v2_table_sticky_header(true, interstitialPaymentConfig) diff --git a/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug b/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug index d1dd7bf4a9..444959490f 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug @@ -36,7 +36,7 @@ include ./_mixins href="#" ) #{translate("student_plans")} -+monthly_annual_switch("plans-page-toggle-period", '{"plans-page-layout-v2": "new-plans-page"}') ++monthly_annual_switch("annual", "plans-page-toggle-period", '{"plans-page-layout-v2": "new-plans-page"}') .row(hidden data-ol-plans-v2-license-picker-container) .col-sm-12 @@ -44,7 +44,7 @@ include ./_mixins +table_sticky_header_all(plansV2Config) -.row.plans-v2-table-container(data-ol-plans-v2-period='monthly') +.row.plans-v2-table-container(hidden data-ol-plans-v2-period='monthly') .col-sm-12(data-ol-plans-v2-view='individual') .row +table_individual('monthly') @@ -52,7 +52,7 @@ include ./_mixins .row +table_student('monthly') -.row.plans-v2-table-container(hidden data-ol-plans-v2-period='annual') +.row.plans-v2-table-container(data-ol-plans-v2-period='annual') .col-sm-12(data-ol-plans-v2-view='individual') .row +table_individual('annual') 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 15f214cfca..e7160bfccb 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug @@ -567,13 +567,15 @@ mixin table_sticky_header_all(plansV2Config) ) +plans_v2_table_sticky_header(true, plansV2Config.student) -mixin monthly_annual_switch(eventTracking, eventSegmentation) +mixin monthly_annual_switch(initialState, eventTracking, eventSegmentation) + - var monthlyAnnualToggleChecked = initialState === 'annual' .row .col-md-4.col-md-offset-4.text-centered.plans-v2-m-a-switch-container(data-ol-plans-v2-m-a-switch-container) span.underline(data-ol-plans-v2-m-a-switch-text='monthly') #{translate("monthly")} 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 @@ -588,8 +590,9 @@ mixin monthly_annual_switch(eventTracking, eventSegmentation) .tooltip.in.right.plans-v2-m-a-tooltip( role="tooltip" data-ol-plans-v2-m-a-tooltip + class=monthlyAnnualToggleChecked ? 'plans-v2-m-a-tooltip-annual-selected' : '' ) .tooltip-arrow .tooltip-inner - span(data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")} - span(hidden data-ol-tooltip-period='annual') #{translate("saving_20_percent")} + 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")}