From a8a21e05afac4bcdc7db2f530239d50d534fde35 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Wed, 4 Jun 2025 10:47:18 +0100
Subject: [PATCH] Merge pull request #26100 from
 overleaf/dp-compile-timeout-paywall

Add compile timeout paywall to new editor

GitOrigin-RevId: 9742ae67b4103c72cc9d87852801ae8751f85d6d
---
 .../web/frontend/extracted-translations.json  |   2 +
 .../pdf-preview/pdf-error-state.tsx           | 112 ++++++++++++++----
 .../pages/editor/pdf-error-state.scss         |  13 +-
 services/web/locales/en.json                  |   2 +
 4 files changed, 100 insertions(+), 29 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index cad43ed4e1..fda4b6368b 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -287,6 +287,8 @@
   "compile_error_entry_description": "",
   "compile_error_handling": "",
   "compile_larger_projects": "",
+  "compile_limit_reached": "",
+  "compile_limit_upgrade_prompt": "",
   "compile_mode": "",
   "compile_terminated_by_user": "",
   "compiler": "",
diff --git a/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx
index ef77c0fa5d..a4f53ae614 100644
--- a/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx
@@ -5,31 +5,37 @@ import { useRailContext } from '../../contexts/rail-context'
 import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
 import { useIsNewEditorEnabled } from '../../utils/new-editor-utils'
+import { upgradePlan } from '@/main/account-upgrade'
+import classNames from 'classnames'
 
 function PdfErrorState() {
   const { loadingError } = usePdfPreviewContext()
   // TODO ide-redesign-cleanup: rename showLogs to something else and check usages
-  const { showLogs } = useCompileContext()
-  const { t } = useTranslation()
-  const { openTab: openRailTab } = useRailContext()
+  const { hasShortCompileTimeout, error, showLogs } = useCompileContext()
   const newEditor = useIsNewEditorEnabled()
 
   if (!newEditor || (!loadingError && !showLogs)) {
     return null
   }
 
+  if (hasShortCompileTimeout && error === 'timedout') {
+    return <CompileTimeoutErrorState />
+  }
+
+  return <GeneralErrorState />
+}
+
+const GeneralErrorState = () => {
+  const { t } = useTranslation()
+  const { openTab: openRailTab } = useRailContext()
+
   return (
-    <div className="pdf-error-state">
-      <div className="pdf-error-state-top-section">
-        <div className="pdf-error-state-warning-icon">
-          <MaterialIcon type="warning" />
-        </div>
-        <div className="pdf-error-state-text">
-          <p className="pdf-error-state-label">{t('pdf_couldnt_compile')}</p>
-          <p className="pdf-error-state-description">
-            {t('we_are_unable_to_generate_the_pdf_at_this_time')}
-          </p>
-        </div>
+    <ErrorState
+      title={t('pdf_couldnt_compile')}
+      description={t('we_are_unable_to_generate_the_pdf_at_this_time')}
+      iconType="warning"
+      iconClassName="pdf-error-state-warning-icon"
+      actions={
         <OLButton
           variant="secondary"
           size="sm"
@@ -39,20 +45,74 @@ function PdfErrorState() {
         >
           {t('check_logs')}
         </OLButton>
-      </div>
-      <div className="pdf-error-state-info-box">
-        <div className="pdf-error-state-info-box-title">
-          <MaterialIcon type="info" unfilled />
-          {t('why_might_this_happen')}
+      }
+      extraContent={
+        <div className="pdf-error-state-info-box">
+          <div className="pdf-error-state-info-box-title">
+            <MaterialIcon type="info" unfilled />
+            {t('why_might_this_happen')}
+          </div>
+          <ul className="pdf-error-state-info-box-text">
+            <li>{t('there_is_an_unrecoverable_latex_error')}</li>
+            <li>{t('the_document_environment_contains_no_content')}</li>
+            <li>{t('this_project_contains_a_file_called_output')}</li>
+          </ul>
         </div>
-        <ul className="pdf-error-state-info-box-text">
-          <li>{t('there_is_an_unrecoverable_latex_error')}</li>
-          <li>{t('the_document_environment_contains_no_content')}</li>
-          <li>{t('this_project_contains_a_file_called_output')}</li>
-        </ul>
-      </div>
-    </div>
+      }
+    />
   )
 }
 
+const CompileTimeoutErrorState = () => {
+  const { t } = useTranslation()
+
+  return (
+    <ErrorState
+      title={t('compile_limit_reached')}
+      description={t('compile_limit_upgrade_prompt')}
+      iconType="running_with_errors"
+      actions={
+        <OLButton
+          variant="premium"
+          size="sm"
+          onClick={() => upgradePlan('compile-timeout')}
+        >
+          {t('upgrade')}
+        </OLButton>
+      }
+    />
+  )
+}
+
+const ErrorState = ({
+  title,
+  description,
+  iconType,
+  actions,
+  iconClassName,
+  extraContent,
+}: {
+  title: string
+  description: string
+  iconType: string
+  actions: React.ReactNode
+  iconClassName?: string
+  extraContent?: React.ReactNode
+}) => {
+  return (
+    <div className="pdf-error-state">
+      <div className="pdf-error-state-top-section">
+        <div className={classNames('pdf-error-state-icon', iconClassName)}>
+          <MaterialIcon type={iconType} />
+        </div>
+        <div className="pdf-error-state-text">
+          <p className="pdf-error-state-label">{title}</p>
+          <p className="pdf-error-state-description">{description}</p>
+        </div>
+        {actions}
+      </div>
+      {extraContent}
+    </div>
+  )
+}
 export default PdfErrorState
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss
index c1da6ab431..aee036f775 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss
@@ -33,9 +33,7 @@
   padding: 0 var(--spacing-09) var(--spacing-09) var(--spacing-09);
 }
 
-.pdf-error-state-warning-icon {
-  background-color: var(--bg-danger-03);
-  color: var(--content-danger);
+.pdf-error-state-icon {
   width: 80px;
   height: 80px;
   display: flex;
@@ -43,6 +41,15 @@
   justify-content: center;
   border-radius: 100%;
 
+  .material-symbols {
+    font-size: 80px;
+  }
+}
+
+.pdf-error-state-warning-icon {
+  background-color: var(--bg-danger-03);
+  color: var(--content-danger);
+
   .material-symbols {
     font-size: 32px;
   }
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index daa2317683..4404e57553 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -370,6 +370,8 @@
   "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.",