Compile timeout paywall after message: Adding the correct translations (#23564)

* adding the right translations to match figma

* adding 2 more translations

* adding the correct styling for the translation

* adding the last translation

* removing unused button and extra line

* adding the p tags and necessary styling to remover margin bottom

GitOrigin-RevId: 97c47e53ee4ae13e95027c602521258f056a6bed

services/web/frontend/extracted-translations.json

@@ -484,6 +484,7 @@
   "enable_single_sign_on": "",
   "enable_sso": "",
   "enable_stop_on_first_error_under_recompile_dropdown_menu": "",
+  "enable_stop_on_first_error_under_recompile_dropdown_menu_v2": "",
   "enabled": "",
   "enabling": "",
   "end_of_document": "",
@@ -835,6 +836,7 @@
   "labels_help_you_to_reference_your_tables": "",
   "language": "",
   "large_or_high-resolution_images_taking_too_long": "",
+  "large_or_high_resolution_images_taking_too_long_to_process": "",
   "last_active": "",
   "last_active_description": "",
   "last_edit": "",
@@ -854,6 +856,7 @@
   "layout_processing": "",
   "learn_more": "",
   "learn_more_about_account": "",
+  "learn_more_about_compile_timeouts": "",
   "learn_more_about_link_sharing": "",
   "learn_more_about_managed_users": "",
   "learn_more_about_other_causes_of_compile_timeouts": "",
@@ -1091,6 +1094,7 @@
   "organize_projects": "",
   "organize_tags": "",
   "other": "",
+  "other_causes_of_compile_timeouts": "",
   "other_logs_and_files": "",
   "other_output_files": "",
   "our_team_will_get_back_to_you_shortly": "",
@@ -1687,6 +1691,7 @@
   "this_project_has_more_than_max_collabs": "",
   "this_project_is_public": "",
   "this_project_is_public_read_only": "",
+  "this_project_need_more_time_to_compile": "",
   "this_project_will_appear_in_your_dropbox_folder_at": "",
   "this_tool_helps_you_insert_figures": "",
   "this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback": "",
@@ -1869,6 +1874,7 @@
   "upgrade_to_add_more_editors_and_access_collaboration_features": "",
   "upgrade_to_get_feature": "",
   "upgrade_to_track_changes": "",
+  "upgrade_to_unlock_more_time": "",
   "upgrade_your_subscription": "",
   "upload": "",
   "upload_from_computer": "",
@@ -2056,6 +2062,7 @@
   "your_project_exceeded_compile_timeout_limit_on_free_plan": "",
   "your_project_exceeded_editor_limit": "",
   "your_project_near_compile_timeout_limit": "",
+  "your_project_need_more_time_to_compile": "",
   "your_projects": "",
   "your_role": "",
   "your_subscription": "",

services/web/frontend/js/features/pdf-preview/components/timeout-message-after-paywall-dismissal.tsx

@@ -5,7 +5,6 @@ import { useDetachCompileContext } from '@/shared/context/detach-compile-context
 import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import MaterialIcon from '@/shared/components/material-icon'
-import OLButton from '@/features/ui/components/ol/ol-button'
 import { useStopOnFirstError } from '@/shared/hooks/use-stop-on-first-error'
 import PdfLogEntry from './pdf-log-entry'
 
@@ -66,10 +65,18 @@ const CompileTimeout = memo(function CompileTimeout({
       formattedContent={
         getMeta('ol-ExposedSettings').enableSubscriptions && (
           <>
-            <p>
-              {isProjectOwner
-                ? t('your_project_exceeded_compile_timeout_limit_on_free_plan')
-                : t('this_project_exceeded_compile_timeout_limit_on_free_plan')}
+            <p className="compile-timeout-message">
+              {isProjectOwner ? (
+                <div>
+                  <p>{t('your_project_need_more_time_to_compile')}</p>
+                  <p>{t('upgrade_to_unlock_more_time')}</p>
+                </div>
+              ) : (
+                <div>
+                  <p>{t('this_project_need_more_time_to_compile')}</p>
+                  <p>{t('upgrade_to_unlock_more_time')}</p>
+                </div>
+              )}
             </p>
 
             {isProjectOwner === false && (
@@ -119,23 +126,12 @@ const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
 
   return (
     <PdfLogEntry
-      headerTitle={t('reasons_for_compile_timeouts')}
+      headerTitle={t('other_causes_of_compile_timeouts')}
       formattedContent={
         <>
-          <p>{t('common_causes_of_compile_timeouts_include')}:</p>
           <ul>
             <li>
-              <Trans
-                i18nKey="large_or_high-resolution_images_taking_too_long"
-                components={[
-                  // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                  <a
-                    href="/learn/how-to/Optimising_very_large_image_files"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  />,
-                ]}
-              />
+              {t('large_or_high_resolution_images_taking_too_long_to_process')}
             </li>
             <li>
               <Trans
@@ -153,18 +149,12 @@ const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
                 <>
                   {' '}
                   <Trans
-                    i18nKey="enable_stop_on_first_error_under_recompile_dropdown_menu"
+                    i18nKey="enable_stop_on_first_error_under_recompile_dropdown_menu_v2"
                     components={[
                       // eslint-disable-next-line react/jsx-key
-                      <OLButton
-                        variant="link"
-                        className="btn-inline-link fw-bold"
-                        size="sm"
-                        onClick={handleEnableStopOnFirstErrorClick}
-                        bs3Props={{ bsSize: 'xsmall' }}
-                      />,
+                      <strong className="log-bold-text" />,
                       // eslint-disable-next-line react/jsx-key
-                      <strong />,
+                      <strong className="log-bold-text" />,
                     ]}
                   />{' '}
                 </>
@@ -173,7 +163,7 @@ const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
           </ul>
           <p className="mb-0">
             <Trans
-              i18nKey="learn_more_about_other_causes_of_compile_timeouts"
+              i18nKey="learn_more_about_compile_timeouts"
               components={[
                 // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
                 <a

services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss

@@ -227,10 +227,21 @@
     padding: var(--spacing-05) var(--spacing-06);
   }
 
+  .compile-timeout-message {
+    p {
+      margin-bottom: 0;
+    }
+  }
+
   .log-entry-content {
     padding: 0;
   }
 
+  .log-bold-text {
+    font-weight: 600;
+    color: var(--neutral-90);
+  }
+
   .log-entry-formatted-content {
     @include body-sm;
 

services/web/locales/en.json

@@ -630,6 +630,7 @@
   "enable_single_sign_on": "Enable single sign-on",
   "enable_sso": "Enable SSO",
   "enable_stop_on_first_error_under_recompile_dropdown_menu": "Enable <0>“Stop on first error”</0> under the <1>Recompile</1> drop-down menu to help you find and fix errors right away.",
+  "enable_stop_on_first_error_under_recompile_dropdown_menu_v2": "Enable <0>Stop on first error</0> under the <1>Recompile</1> drop-down menu to help you find and fix errors right away.",
   "enabled": "Enabled",
   "enabling": "Enabling",
   "end_of_document": "End of document",
@@ -1101,6 +1102,7 @@
   "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",
   "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>.",
+  "large_or_high_resolution_images_taking_too_long_to_process": "Large or high-resolution images taking too long to process.",
   "last_active": "Last Active",
   "last_active_description": "Last time a project was opened.",
   "last_edit": "Last edit",
@@ -1132,6 +1134,7 @@
   "learn": "Learn",
   "learn_more": "Learn more",
   "learn_more_about_account": "<0>Learn more</0> about managing your __appName__ account.",
+  "learn_more_about_compile_timeouts": "<0>Learn more</0> about compile timeouts.",
   "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.",
@@ -1456,6 +1459,7 @@
   "original_price": "Original price",
   "other": "Other",
   "other_actions": "Other Actions",
+  "other_causes_of_compile_timeouts": "Other causes of compile timeouts",
   "other_logs_and_files": "Other logs and files",
   "other_output_files": "Download other output files",
   "other_sessions": "Other Sessions",
@@ -2207,6 +2211,7 @@
   "this_project_has_more_than_max_collabs": "This project has more than the maximum number of collaborators allowed on the project owner’s Overleaf plan. This means you could lose edit access from __linkSharingDate__.",
   "this_project_is_public": "This project is public and can be edited by anyone with the URL.",
   "this_project_is_public_read_only": "This project is public and can be viewed but not edited by anyone with the URL",
+  "this_project_need_more_time_to_compile": "It looks like this project may need more time to compile than our free plan allows.",
   "this_project_will_appear_in_your_dropbox_folder_at": "This project will appear in your Dropbox folder at ",
   "this_tool_helps_you_insert_figures": "This tool helps you insert figures into your project without needing to write the LaTeX code. The following information explains more about the options in the tool and how to further customize your figures.",
   "this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback": "This tool helps you insert simple tables into your project without writing LaTeX code. This tool is new, so please <0>give us feedback</0> and look out for additional functionality coming soon.",
@@ -2400,6 +2405,7 @@
   "upgrade_to_add_more_editors_and_access_collaboration_features": "Upgrade to add more editors and access collaboration features like track changes and full project history.",
   "upgrade_to_get_feature": "Upgrade to get __feature__, plus:",
   "upgrade_to_track_changes": "Upgrade to track changes",
+  "upgrade_to_unlock_more_time": "Upgrade now to unlock 12x more compile time on our fastest servers.",
   "upgrade_your_subscription": "Upgrade your subscription",
   "upload": "Upload",
   "upload_failed": "Upload failed",
@@ -2613,6 +2619,7 @@
   "your_project_exceeded_compile_timeout_limit_on_free_plan": "Your project exceeded the compile timeout limit on our free plan.",
   "your_project_exceeded_editor_limit": "Your project exceeded the editor limit and access levels were changed. Select a new access level for your collaborators, or upgrade to add more editors.",
   "your_project_near_compile_timeout_limit": "Your project is near the compile timeout limit for our free plan.",
+  "your_project_need_more_time_to_compile": "It looks like your project may need more time to compile than our free plan allows.",
   "your_projects": "Your Projects",
   "your_questions_answered": "Your questions answered",
   "your_role": "Your role",