Misc fixes for updated compile timeout paywall (#23741)

* hide cached files/logs and files buttons while primary paywall showing

* replace plans link with interstitial

* open checkout in new tab

* editors > collaborators, use correct collab count for student plan, refactor collab translations

* fix variable case

GitOrigin-RevId: 48f53aa385ed6d7e5c9b485fe4a045a47c448777

services/web/frontend/extracted-translations.json

@@ -1,5 +1,4 @@
 {
-  "10_editors_per_project": "",
   "12x_more_compile_time": "",
   "1_2_width": "",
   "1_4_width": "",
@@ -1080,7 +1079,6 @@
   "ok_join_project": "",
   "on": "",
   "on_free_plan_upgrade_to_access_features": "",
-  "one_editor_per_project": "",
   "one_step_away_from_professional_features": "",
   "only_group_admin_or_managers_can_delete_your_account_1": "",
   "only_group_admin_or_managers_can_delete_your_account_2": "",

services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import classnames from 'classnames'
 import PdfValidationIssue from './pdf-validation-issue'
 import StopOnFirstErrorPrompt from './stop-on-first-error-prompt'
@@ -34,6 +34,10 @@ function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
 
   const { t } = useTranslation()
 
+  const [
+    isShowingPrimaryCompileTimeoutPaywall,
+    setIsShowingPrimaryCompileTimeoutPaywall,
+  ] = useState(false)
   const isPaywallChangeCompileTimeoutEnabled = getMeta(
     'ol-isPaywallChangeCompileTimeoutEnabled'
   )
@@ -56,7 +60,9 @@ function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
 
         {hasShortCompileTimeout && error === 'timedout' ? (
           isCompileTimeoutPaywallDisplay ? (
-            <TimeoutUpgradePaywallPrompt />
+            <TimeoutUpgradePaywallPrompt
+              setIsShowingPrimary={setIsShowingPrimaryCompileTimeoutPaywall}
+            />
           ) : (
             <TimeoutUpgradePromptNew />
           )
@@ -85,10 +91,12 @@ function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
           />
         )}
 
-        <div className="logs-pane-actions">
-          <PdfClearCacheButton />
-          <PdfDownloadFilesButton />
-        </div>
+        {!isShowingPrimaryCompileTimeoutPaywall && (
+          <div className="logs-pane-actions">
+            <PdfClearCacheButton />
+            <PdfDownloadFilesButton />
+          </div>
+        )}
       </div>
     </div>
   )

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import getMeta from '@/utils/meta'
 import * as eventTracking from '@/infrastructure/event-tracking'
 import TimeoutMessageAfterPaywallDismissal from './timeout-message-after-paywall-dismissal'
@@ -16,7 +16,13 @@ type Segmentation = Record<
   string | number | boolean | undefined | unknown | any
 >
 
-function TimeoutUpgradePaywallPrompt() {
+interface TimeoutUpgradePaywallPromptProps {
+  setIsShowingPrimary: Dispatch<SetStateAction<boolean>>
+}
+
+function TimeoutUpgradePaywallPrompt({
+  setIsShowingPrimary,
+}: TimeoutUpgradePaywallPromptProps) {
   const odcRole = getMeta('ol-odcRole')
   const planPrices = getMeta('ol-paywallPlans')
   const isStudent = useMemo(() => studentRoles.includes(odcRole), [odcRole])
@@ -34,6 +40,7 @@ function TimeoutUpgradePaywallPrompt() {
   function onClose() {
     sendPaywallEvent('paywall-dismiss')
     setIsPaywallDismissed(true)
+    setIsShowingPrimary(false)
   }
 
   function onClickInfoLink() {
@@ -50,7 +57,8 @@ function TimeoutUpgradePaywallPrompt() {
     sendPaywallEvent('paywall-prompt', {
       plan: isStudent ? 'student' : 'collaborator',
     })
-  }, [isStudent])
+    setIsShowingPrimary(true)
+  }, [isStudent, setIsShowingPrimary])
 
   return (
     <div>

services/web/frontend/js/shared/components/upgrade-prompt.tsx

@@ -35,7 +35,7 @@ function PlansLink({
   return (
     <a
       key="compare_plans_link"
-      href={`/user/subscription/plans?itm-campaign=${itmCampaign}`}
+      href={`/user/subscription/choose-your-plan?itm-campaign=${itmCampaign}`}
       target="_blank"
       rel="noreferrer"
       onClick={onClick}
@@ -107,7 +107,7 @@ export function UpgradePrompt({
                   {t('12x_more_compile_time')}
                 </IconListItem>
                 <IconListItem icon="group_add">
-                  {t('10_editors_per_project')}
+                  {t('collabs_per_proj', { collabcount: isStudent ? 6 : 10 })}
                 </IconListItem>
                 <IconListItem icon="history">
                   {t('unlimited_document_history')}
@@ -119,6 +119,8 @@ export function UpgradePrompt({
                 className="btn btn-premium"
                 href={`/user/subscription/new?planCode=${planCode}&itm-campaign=${itmCampaign}`}
                 onClick={onClickPaywall}
+                target="_blank"
+                rel="noreferrer"
               >
                 {t('try_for_free')}
               </a>
@@ -143,7 +145,7 @@ export function UpgradePrompt({
                   {t('basic_compile_time')}
                 </IconListItem>
                 <IconListItem icon="person">
-                  {t('one_editor_per_project')}
+                  {t('collabs_per_proj_single', { collabcount: 1 })}
                 </IconListItem>
                 <IconListItem icon="history_off">
                   {t('limited_document_history')}

services/web/locales/en.json

@@ -1,5 +1,4 @@
 {
-  "10_editors_per_project": "10 editors per project",
   "12x_basic": "12x Basic",
   "12x_more_compile_time": "12x more compile time on our fastest servers",
   "1_2_width": "½ width",
@@ -1432,7 +1431,6 @@
   "on": "On",
   "on_free_plan_upgrade_to_access_features": "You are on the __appName__ Free plan. Upgrade to access these <0>Premium features</0>",
   "one_collaborator_per_project": "1 collaborator per project",
-  "one_editor_per_project": "1 editor per project",
   "one_free_collab": "One free collaborator",
   "one_per_project": "1 per project",
   "one_step_away_from_professional_features": "You are one step away from accessing <0>Overleaf Professional features</0>!",