Merge pull request #9652 from overleaf/tm-plans-v2-default-monthly

Default to showing Annual plans when rendering the V2 plans variant

GitOrigin-RevId: a709e81de3672959c67f6afd0234fb9277400d9d

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)
 

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')

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")}