From 21f930f73bb188e7c5ee9e7edd87d6bea627431e Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Wed, 20 Nov 2024 10:40:58 -0700
Subject: [PATCH] Merge pull request #21990 from
 overleaf/mf-payment-page-view-segmentation

[web] Add new segmentation for `payment-page-view` event

GitOrigin-RevId: ed15ab83edc8a0642d3cec803c59a4a4437740ea
---
 .../frontend/js/utils/screen-breakpoint.ts    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 services/web/frontend/js/utils/screen-breakpoint.ts

diff --git a/services/web/frontend/js/utils/screen-breakpoint.ts b/services/web/frontend/js/utils/screen-breakpoint.ts
new file mode 100644
index 0000000000..7e37ae6eb3
--- /dev/null
+++ b/services/web/frontend/js/utils/screen-breakpoint.ts
@@ -0,0 +1,34 @@
+type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+type Breakpoint = {
+  name: BreakpointName
+  minWidth: number
+}
+
+/**
+ * Maps window width to Bootstrap 5 breakpoint names
+ * Breakpoints based on Bootstrap 5 documentation:
+ * xs: 0-575px
+ * sm: 576-767px
+ * md: 768-991px
+ * lg: 992-1199px
+ * xl: 1200-1399px
+ * xxl: ≥1400px
+ * @param {number} width - Window width in pixels
+ * @returns {BreakpointName} Bootstrap breakpoint name
+ */
+export function getBootstrap5Breakpoint(
+  width: number
+): BreakpointName | undefined {
+  const breakpoints: Breakpoint[] = [
+    { name: 'xxl', minWidth: 1400 },
+    { name: 'xl', minWidth: 1200 },
+    { name: 'lg', minWidth: 992 },
+    { name: 'md', minWidth: 768 },
+    { name: 'sm', minWidth: 576 },
+    { name: 'xs', minWidth: 0 },
+  ]
+
+  const breakpoint = breakpoints.find(bp => width >= bp.minWidth)
+  return breakpoint?.name
+}