Merge pull request #14896 from overleaf/tm-compile-time-warning-would-display

Use standard paywall-types, extend paywall to include variant in segmentation

GitOrigin-RevId: 17a154c525fed3b05a5208a34f374608f045872f

services/web/frontend/js/features/pdf-preview/components/compile-timeout-messages.tsx

@@ -146,7 +146,8 @@ function CompileTimeoutMessages() {
         <Notification
           action={
             <StartFreeTrialButton
-              source="compile-time-warning-new-10s"
+              variant="new-10s"
+              source="compile-time-warning"
               buttonProps={{
                 className: 'btn-secondary-compile-timeout-override',
               }}
@@ -188,7 +189,8 @@ function CompileTimeoutMessages() {
           <Notification
             action={
               <StartFreeTrialButton
-                source="compile-time-warning-new-changing-soon"
+                variant="new-changing"
+                source="compile-time-warning"
                 buttonProps={{
                   className: 'btn-secondary-compile-timeout-override',
                 }}

services/web/frontend/js/features/pdf-preview/components/timeout-upgrade-prompt-new.tsx

@@ -52,7 +52,7 @@ type CompileTimeoutProps = {
   isProjectOwner: boolean
 }
 
-function CompileTimeout({
+const CompileTimeout = memo(function CompileTimeout({
   compileTimeChanging,
   isProjectOwner,
 }: CompileTimeoutProps) {
@@ -98,11 +98,8 @@ function CompileTimeout({
           {isProjectOwner && (
             <p className="text-center">
               <StartFreeTrialButton
-                source={
-                  compileTimeChanging
-                    ? 'compile-timeout-new-changing'
-                    : 'compile-timeout-new-active'
-                }
+                variant={compileTimeChanging ? 'new-changing' : 'new-20s'}
+                source="compile-timeout"
                 buttonProps={{
                   bsStyle: 'success',
                   className: 'row-spaced-small',
@@ -119,7 +116,7 @@ function CompileTimeout({
       level="error"
     />
   )
-}
+})
 
 type PreventTimeoutHelpMessageProps = {
   compileTimeChanging?: boolean
@@ -127,7 +124,7 @@ type PreventTimeoutHelpMessageProps = {
   handleEnableStopOnFirstErrorClick: () => void
 }
 
-function PreventTimeoutHelpMessage({
+const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
   compileTimeChanging,
   lastCompileOptions,
   handleEnableStopOnFirstErrorClick,
@@ -236,6 +233,6 @@ function PreventTimeoutHelpMessage({
       level="raw"
     />
   )
-}
+})
 
 export default memo(TimeoutUpgradePromptNew)

services/web/frontend/js/main/account-upgrade.js

@@ -1,8 +1,13 @@
 import * as eventTracking from '../infrastructure/event-tracking'
 
-function startFreeTrial(source, version, $scope) {
+function startFreeTrial(source, version, $scope, variant) {
+  const eventSegmentation = { 'paywall-type': source }
+  if (variant) {
+    eventSegmentation.variant = variant
+  }
+
   eventTracking.send('subscription-funnel', 'upgraded-free-trial', source)
-  eventTracking.sendMB('paywall-click', { 'paywall-type': source })
+  eventTracking.sendMB('paywall-click', eventSegmentation)
 
   const searchParams = new URLSearchParams({
     itm_campaign: source,

services/web/frontend/js/shared/components/start-free-trial-button.tsx

@@ -6,6 +6,7 @@ import * as eventTracking from '../../infrastructure/event-tracking'
 
 type StartFreeTrialButtonProps = {
   source: string
+  variant?: string
   buttonProps?: Button.ButtonProps
   children?: React.ReactNode
   handleClick?: MouseEventHandler<Button>
@@ -18,14 +19,19 @@ export default function StartFreeTrialButton({
   children,
   handleClick,
   source,
+  variant,
 }: StartFreeTrialButtonProps) {
   const { t } = useTranslation()
 
   useEffect(() => {
-    eventTracking.sendMB('paywall-prompt', {
+    const eventSegmentation: { [key: string]: unknown } = {
       'paywall-type': source,
-    })
-  }, [source])
+    }
+    if (variant) {
+      eventSegmentation.variant = variant
+    }
+    eventTracking.sendMB('paywall-prompt', eventSegmentation)
+  }, [source, variant])
 
   const onClick = useCallback(
     event => {
@@ -35,9 +41,9 @@ export default function StartFreeTrialButton({
         handleClick(event)
       }
 
-      startFreeTrial(source)
+      startFreeTrial(source, null, null, variant)
     },
-    [handleClick, source]
+    [handleClick, source, variant]
   )
 
   return (