Merge pull request #21990 from overleaf/mf-payment-page-view-segmentation

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

GitOrigin-RevId: ed15ab83edc8a0642d3cec803c59a4a4437740ea

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
+}