Merge pull request #28239 from overleaf/dp-compile-timeout-paywall-changes

Update compile timeout paywall in new editor

GitOrigin-RevId: be6ef8289e83f97daeb3334c52583fe44a9ecdea

services/web/frontend/extracted-translations.json

@@ -295,8 +295,6 @@
   "compile_error_entry_description": "",
   "compile_error_handling": "",
   "compile_larger_projects": "",
-  "compile_limit_reached": "",
-  "compile_limit_upgrade_prompt": "",
   "compile_mode": "",
   "compile_terminated_by_user": "",
   "compiler": "",
@@ -906,7 +904,6 @@
   "labels_help_you_to_reference_your_tables": "",
   "language": "",
   "language_suggestions": "",
-  "large_or_high-resolution_images_taking_too_long": "",
   "last_active": "",
   "last_active_description": "",
   "last_edit": "",
@@ -931,7 +928,6 @@
   "learn_more_about_email_reconfirmation": "",
   "learn_more_about_link_sharing": "",
   "learn_more_about_managed_users": "",
-  "learn_more_about_other_causes_of_compile_timeouts": "",
   "leave": "",
   "leave_any_group_subscriptions": "",
   "leave_group": "",
@@ -1331,7 +1327,6 @@
   "project_search_result_count": "",
   "project_search_result_count_plural": "",
   "project_synchronisation": "",
-  "project_timed_out_common_causes": "",
   "project_timed_out_enable_stop_on_first_error": "",
   "project_timed_out_fatal_error": "",
   "project_timed_out_intro": "",

services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state/compile-timeout-error-state.tsx

@@ -2,27 +2,97 @@ import OLButton from '@/shared/components/ol/ol-button'
 import MaterialIcon from '@/shared/components/material-icon'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
-import { upgradePlan } from '@/main/account-upgrade'
 import { useStopOnFirstError } from '@/shared/hooks/use-stop-on-first-error'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import ErrorState from './error-state'
+import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
+import getMeta from '@/utils/meta'
+import { sendMB } from '@/infrastructure/event-tracking'
 
 export const ShortCompileTimeoutErrorState = () => {
   const { t } = useTranslation()
+  const { isProjectOwner } = useCompileContext()
+
+  const { compileTimeout } = getMeta('ol-compileSettings')
+  const segmentation = useMemo(
+    () => ({
+      'is-owner': isProjectOwner,
+      compileTime: compileTimeout,
+    }),
+    [isProjectOwner, compileTimeout]
+  )
+
+  const sendInfoClickEvent = useCallback(() => {
+    sendMB('paywall-info-click', {
+      ...segmentation,
+      'paywall-type': 'compile-timeout',
+      content: 'blog',
+    })
+  }, [segmentation])
 
   return (
     <ErrorState
-      title={t('compile_limit_reached')}
-      description={t('compile_limit_upgrade_prompt')}
+      title={t('your_compile_timed_out')}
+      description={
+        <>
+          <p>
+            {isProjectOwner
+              ? t('your_project_exceeded_compile_timeout_limit_on_free_plan')
+              : t('this_project_exceeded_compile_timeout_limit_on_free_plan')}
+          </p>
+          {isProjectOwner ? (
+            <p>
+              <strong>{t('upgrade_for_more_compile_time')}</strong>{' '}
+              {t(
+                'plus_additional_collaborators_document_history_track_changes_and_more'
+              )}
+            </p>
+          ) : (
+            <Trans
+              i18nKey="tell_the_project_owner_and_ask_them_to_upgrade"
+              components={[
+                // eslint-disable-next-line react/jsx-key
+                <strong />,
+              ]}
+            />
+          )}
+        </>
+      }
       iconType="running_with_errors"
+      extraContent={
+        <div className="pdf-error-state-info-box">
+          <p>
+            <em>
+              <Trans
+                i18nKey="were_reducing_compile_timeout"
+                components={[
+                  /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+                  <a
+                    aria-label={t(
+                      'read_more_about_free_compile_timeouts_servers'
+                    )}
+                    href="/blog/changes-to-free-compile-timeout"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    onClick={sendInfoClickEvent}
+                  />,
+                ]}
+              />
+            </em>
+          </p>
+          <ReasonsForTimeoutInfo />
+        </div>
+      }
       actions={
-        <OLButton
-          variant="premium"
-          size="sm"
-          onClick={() => upgradePlan('compile-timeout')}
-        >
-          {t('upgrade')}
-        </OLButton>
+        isProjectOwner && (
+          <StartFreeTrialButton
+            source="compile-timeout"
+            buttonProps={{ variant: 'premium', size: 'sm' }}
+            segmentation={segmentation}
+          >
+            {t('start_a_free_trial')}
+          </StartFreeTrialButton>
+        )
       }
     />
   )
@@ -31,6 +101,23 @@ export const ShortCompileTimeoutErrorState = () => {
 export const LongCompileTimeoutErrorState = () => {
   const { t } = useTranslation()
 
+  return (
+    <ErrorState
+      title={t('your_compile_timed_out')}
+      description={t('project_timed_out_intro_short')}
+      iconType="running_with_errors"
+      extraContent={
+        <div className="pdf-error-state-info-box">
+          <ReasonsForTimeoutInfo />
+        </div>
+      }
+    />
+  )
+}
+
+const ReasonsForTimeoutInfo = () => {
+  const { t } = useTranslation()
+
   const { enableStopOnFirstError } = useStopOnFirstError({
     eventSource: 'timeout',
   })
@@ -44,65 +131,65 @@ export const LongCompileTimeoutErrorState = () => {
   }, [enableStopOnFirstError, startCompile, setAnimateCompileDropdownArrow])
 
   return (
-    <ErrorState
-      title={t('compile_limit_reached')}
-      description={t('project_timed_out_intro_short')}
-      iconType="running_with_errors"
-      extraContent={
-        <div className="pdf-error-state-info-box">
-          <div className="pdf-error-state-info-box-title">
-            <MaterialIcon type="info" unfilled />
-            {t('project_timed_out_common_causes')}
-          </div>
-          <div className="pdf-error-state-info-box-text">
-            <ul className="pdf-error-state-info-box-list">
-              <li>
-                <Trans
-                  i18nKey="project_timed_out_optimize_images"
-                  components={[
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                    <a href="https://www.overleaf.com/learn/how-to/Optimising_very_large_image_files" />,
-                  ]}
-                />
-              </li>
-              <li>
+    <>
+      <div className="pdf-error-state-info-box-title">
+        <MaterialIcon type="info" unfilled />
+        {t('common_causes_of_compile_timeouts_include')}:
+      </div>
+      <div className="pdf-error-state-info-box-text">
+        <ul className="pdf-error-state-info-box-list">
+          <li>
+            <Trans
+              i18nKey="project_timed_out_optimize_images"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a href="https://www.overleaf.com/learn/how-to/Optimising_very_large_image_files" />,
+              ]}
+            />
+          </li>
+          <li>
+            <Trans
+              i18nKey="a_fatal_compile_error_that_completely_blocks_compilation"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a href="https://www.overleaf.com/learn/how-to/Why_do_I_keep_getting_the_compile_timeout_error_message%3F#Fatal_compile_errors_blocking_the_compilation" />,
+              ]}
+            />
+            {!lastCompileOptions.stopOnFirstError && (
+              <>
+                {' '}
                 <Trans
-                  i18nKey="project_timed_out_fatal_error"
+                  i18nKey="enable_stop_on_first_error_under_recompile_dropdown_menu"
                   components={[
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                    <a href="https://www.overleaf.com/learn/how-to/Why_do_I_keep_getting_the_compile_timeout_error_message%3F#Fatal_compile_errors_blocking_the_compilation" />,
+                    // eslint-disable-next-line react/jsx-key
+                    <OLButton
+                      variant="link"
+                      className="btn-inline-link fw-bold"
+                      size="sm"
+                      onClick={handleEnableStopOnFirstErrorClick}
+                    />,
+                    // eslint-disable-next-line react/jsx-key
+                    <strong />,
                   ]}
                 />
-                {!lastCompileOptions.stopOnFirstError && (
-                  <>
-                    {' '}
-                    <Trans
-                      i18nKey="project_timed_out_enable_stop_on_first_error"
-                      components={[
-                        // eslint-disable-next-line react/jsx-key
-                        <OLButton
-                          variant="primary"
-                          size="sm"
-                          onClick={handleEnableStopOnFirstErrorClick}
-                        />,
-                      ]}
-                    />
-                  </>
-                )}
-              </li>
-            </ul>
-            <p className="mb-0">
-              <Trans
-                i18nKey="project_timed_out_learn_more"
-                components={[
-                  // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                  <a href="https://www.overleaf.com/learn/how-to/Why_do_I_keep_getting_the_compile_timeout_error_message%3F" />,
-                ]}
-              />
-            </p>
-          </div>
-        </div>
-      }
-    />
+              </>
+            )}
+          </li>
+        </ul>
+        <p className="mb-0">
+          <Trans
+            i18nKey="project_timed_out_learn_more"
+            components={[
+              // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+              <a
+                href="/learn/how-to/Fixing_and_preventing_compile_timeouts"
+                rel="noopener noreferrer"
+                target="_blank"
+              />,
+            ]}
+          />
+        </p>
+      </div>
+    </>
   )
 }

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

@@ -162,7 +162,7 @@ const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
           <ul>
             <li>
               <Trans
-                i18nKey="large_or_high-resolution_images_taking_too_long"
+                i18nKey="project_timed_out_optimize_images"
                 components={[
                   // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
                   <a
@@ -208,7 +208,7 @@ const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
           </ul>
           <p>
             <Trans
-              i18nKey="learn_more_about_other_causes_of_compile_timeouts"
+              i18nKey="project_timed_out_learn_more"
               components={[
                 // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
                 <a

services/web/frontend/stylesheets/pages/editor/pdf-error-state.scss

@@ -66,12 +66,13 @@
   padding: var(--spacing-06);
   border: 1px solid var(--border-divider-themed);
   border-radius: var(--border-radius-base);
+  font-size: var(--font-size-02);
+  line-height: var(--line-height-02);
 
   @include themed-links;
 }
 
 .pdf-error-state-info-box-title {
-  font-size: var(--font-size-02);
   font-weight: 600;
   display: flex;
   align-items: center;
@@ -79,10 +80,6 @@
   margin-bottom: var(--spacing-04);
 }
 
-.pdf-error-state-info-box-text {
-  font-size: var(--font-size-02);
-}
-
 .pdf-error-state-info-box-list {
   margin-bottom: 0;
 

services/web/locales/en.json

@@ -381,8 +381,6 @@
   "compile_error_entry_description": "An error which prevented this project from compiling",
   "compile_error_handling": "Compile error handling",
   "compile_larger_projects": "Compile larger projects",
-  "compile_limit_reached": "Compile limit reached",
-  "compile_limit_upgrade_prompt": "Your document took longer than the free plan’s compile window. Upgrade to Overleaf Premium for extended compile durations, priority build servers, and uninterrupted LaTeX processing—so you can focus on writing, not waiting.",
   "compile_mode": "Compile mode",
   "compile_servers": "Compile servers",
   "compile_servers_info_new": "The servers used to compile your project. Compiles for users on paid plans always run on the fastest available servers.",
@@ -1174,7 +1172,6 @@
   "labs_program_benefits": "By signing up for Overleaf Labs you can get your hands on in-development features and try them out as much as you like. All we ask in return is your honest feedback to help us develop and improve. It’s important to note that features available in this program are still being tested and actively developed. This means they could change, be removed, or become part of a premium plan.",
   "language": "Language",
   "language_suggestions": "Language suggestions",
-  "large_or_high-resolution_images_taking_too_long": "Large or high-resolution images taking too long to process. You may be able to <0>optimize them</0>.",
   "last_active": "Last Active",
   "last_active_description": "Last time a project was opened.",
   "last_edit": "Last edit",
@@ -1212,7 +1209,6 @@
   "learn_more_about_emails": "<0>Learn more</0> about managing your __appName__ emails.",
   "learn_more_about_link_sharing": "Learn more about Link Sharing",
   "learn_more_about_managed_users": "Learn more about Managed Users.",
-  "learn_more_about_other_causes_of_compile_timeouts": "<0>Learn more</0> about other causes of compile timeouts and how to fix them.",
   "leave": "Leave",
   "leave_any_group_subscriptions": "Leave any group subscriptions other than the one that will be managing your account. <0>Leave them from the Subscription page.</0>",
   "leave_group": "Leave group",
@@ -1747,7 +1743,6 @@
   "project_search_result_count": "__count__ result",
   "project_search_result_count_plural": "__count__ results",
   "project_synchronisation": "Project synchronisation",
-  "project_timed_out_common_causes": "Most common causes of timeouts are:",
   "project_timed_out_enable_stop_on_first_error": "<0>Enable “Stop on first error”</0> to help you find and fix errors right away.",
   "project_timed_out_fatal_error": "A <0>fatal compile error</0> may be completely blocking compilation.",
   "project_timed_out_intro": "Sorry, your compile took too long to run and timed out. The most common causes of timeouts are:",