Merge pull request #8846 from overleaf/ab-compile-time-tracking

[web] Add event and time since display segmentation for compile time warning

GitOrigin-RevId: 5a1ca75231e4ffd7a0812674b8600b62c4cddf11

services/web/frontend/js/features/pdf-preview/components/compile-time-warning.tsx

@@ -4,28 +4,54 @@ import { Trans, useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
 import { startFreeTrial } from '../../../main/account-upgrade'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
+
+const ONE_DAY = 24 * 60 * 60 * 24 * 1000
 
 function CompileTimeWarning() {
   const { t } = useTranslation()
 
+  const [lastDisplay, setLastDisplay] = usePersistedState(
+    'compile-time-warning-displayed-at',
+    0,
+    true
+  )
+
   const { showCompileTimeWarning, setShowCompileTimeWarning } =
     useDetachCompileContext()
 
   useEffect(() => {
     if (showCompileTimeWarning) {
+      if (lastDisplay && Date.now() - lastDisplay < ONE_DAY) {
+        return
+      }
+      setLastDisplay(Date.now())
       eventTracking.sendMB('compile-time-warning-displayed', {})
     }
-  }, [showCompileTimeWarning])
+  }, [showCompileTimeWarning, lastDisplay, setLastDisplay])
 
-  const closeWarning = () => {
-    eventTracking.sendMB('compile-time-warning-dismissed', {})
+  const getTimeSinceDisplayed = useCallback(() => {
+    return (Date.now() - lastDisplay) / 1000
+  }, [lastDisplay])
+
+  const closeWarning = useCallback(() => {
+    eventTracking.sendMB('compile-time-warning-dismissed', {
+      'time-since-displayed': getTimeSinceDisplayed(),
+    })
     setShowCompileTimeWarning(false)
-  }
+  }, [getTimeSinceDisplayed, setShowCompileTimeWarning])
 
-  const handleUpgradeClick = useCallback(event => {
-    event.preventDefault()
-    startFreeTrial('compile-time-warning')
-  }, [])
+  const handleUpgradeClick = useCallback(
+    event => {
+      event.preventDefault()
+      startFreeTrial('compile-time-warning')
+      eventTracking.sendMB('compile-time-warning-upgrade-click', {
+        'time-since-displayed': getTimeSinceDisplayed(),
+      })
+      setShowCompileTimeWarning(false)
+    },
+    [getTimeSinceDisplayed, setShowCompileTimeWarning]
+  )
 
   if (!showCompileTimeWarning) {
     return null

services/web/frontend/js/shared/context/local-compile-context.js

@@ -29,8 +29,6 @@ import { useEditorContext } from './editor-context'
 import { buildFileList } from '../../features/pdf-preview/util/file-list'
 import { useSplitTestContext } from './split-test-context'
 
-const ONE_DAY = 24 * 60 * 60 * 24 * 1000
-
 export const LocalCompileContext = createContext()
 
 export const CompileContextPropTypes = {
@@ -95,13 +93,6 @@ export function LocalCompileProvider({ children }) {
   // whether to show the compile time warning
   const [showCompileTimeWarning, setShowCompileTimeWarning] = useState(false)
 
-  // the last time the compile time warning was displayed
-  const [lastDisplay, setLastDisplay] = usePersistedState(
-    'compile-time-warning-displayed-at',
-    0,
-    true
-  )
-
   // the log entries parsed from the compile output log
   const [logEntries, setLogEntries] = useScopeValueSetterOnly('pdf.logEntries')
 
@@ -287,24 +278,14 @@ export function LocalCompileProvider({ children }) {
 
     if (compileTimeWarningEnabled && compiling && isProjectOwner) {
       const timeout = window.setTimeout(() => {
-        if (lastDisplay && Date.now() - lastDisplay < ONE_DAY) {
-          return
-        }
         setShowCompileTimeWarning(true)
-        setLastDisplay(Date.now())
       }, 30000)
 
       return () => {
         window.clearTimeout(timeout)
       }
     }
-  }, [
-    compiling,
-    isProjectOwner,
-    lastDisplay,
-    setLastDisplay,
-    splitTestVariants,
-  ])
+  }, [compiling, isProjectOwner, splitTestVariants])
 
   // handle the data returned from a compile request
   // note: this should _only_ run when `data` changes,