Extract monthly annual switch on new plans page as mixin (#8292)

GitOrigin-RevId: 4634557dff55a747206d3fb355b9924ca769e98c

services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug

@@ -36,31 +36,7 @@ include ./_mixins
 					href="#"
 				) #{translate("student_plans")}
 
-.row
++monthly_annual_switch("plans-page-toggle-period", '{"plans-page-layout-v2": "new-plans-page"}')
-	.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-monthly-text) #{translate("monthly")}
-		label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch)
-			input(
-				type="checkbox"
-				role="switch"
-				autocomplete="off"
-				event-tracking="plans-page-toggle-period"
-				event-tracking-mb="true"
-				event-tracking-trigger="click"
-				event-tracking-element="checkbox"
-				event-segmentation='{"plans-page-layout-v2": "new-plans-page"}'
-			)
-			span
-		.plans-v2-m-a-switch-annual-text-container
-			span(data-ol-plans-v2-m-a-switch-annual-text) #{translate("annual")}
-			.tooltip.in.right.plans-v2-m-a-tooltip(
-				role="tooltip"
-				data-ol-plans-v2-m-a-tooltip
-			)
-				.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")}
 
 .row(hidden data-ol-plans-v2-license-picker-container)
 	.col-sm-12

services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug

@@ -469,3 +469,30 @@ mixin table_sticky_header
 			span #{translate("student")}
 		.plans-v2-table-sticky-header-item
 			span #{translate("university")}
+
+mixin monthly_annual_switch(eventTracking, eventSegmentation)
+	.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-monthly-text) #{translate("monthly")}
+			label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch)
+				input(
+					type="checkbox"
+					role="switch"
+					autocomplete="off"
+					event-tracking=eventTracking
+					event-tracking-mb="true"
+					event-tracking-trigger="click"
+					event-tracking-element="checkbox"
+					event-segmentation=eventSegmentation
+				)
+				span
+			.plans-v2-m-a-switch-annual-text-container
+				span(data-ol-plans-v2-m-a-switch-annual-text) #{translate("annual")}
+				.tooltip.in.right.plans-v2-m-a-tooltip(
+					role="tooltip"
+					data-ol-plans-v2-m-a-tooltip
+				)
+					.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")}