From 199360afb8fa6cdca956f4e6a6deff0ebc823732 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Fri, 3 Jun 2022 09:43:33 -0400
Subject: [PATCH] Extract monthly annual switch on new plans page as mixin
 (#8292)

GitOrigin-RevId: 4634557dff55a747206d3fb355b9924ca769e98c
---
 .../v2/_cards_controls_tables.pug             | 26 +-----------------
 .../plans-marketing/v2/_mixins.pug            | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 25 deletions(-)

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 a6220d0b0f..7cdf0b9da0 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,31 +36,7 @@ include ./_mixins
 					href="#"
 				) #{translate("student_plans")}
 
-.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="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")}
++monthly_annual_switch("plans-page-toggle-period", '{"plans-page-layout-v2": "new-plans-page"}')
 
 .row(hidden data-ol-plans-v2-license-picker-container)
 	.col-sm-12
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 8d014852f1..469964a013 100644
--- a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug
+++ b/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")}