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

271 lines
8.7 KiB
TypeScript
Raw Normal View History

import { Trans, useTranslation } from 'react-i18next'
import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
import StartFreeTrialButton from '../../../shared/components/start-free-trial-button'
import { memo, useCallback } from 'react'
import PdfLogEntry from './pdf-log-entry'
import { useStopOnFirstError } from '../../../shared/hooks/use-stop-on-first-error'
import { Button } from 'react-bootstrap'
import * as eventTracking from '../../../infrastructure/event-tracking'
[web] Paywall CTA split-test (#17555) * Fix `{splitTest.requiredCohortSize && (...)}` can display `0` * Get `paywall-cta` assignment in ProjectController.js * CTA change: "Get Dropbox Sync" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286026 * CTA change: "Get GitHub Sync" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286736 * CTA change: "Get Git integration" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286283 * CTA change: "Add more collaborators" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763884855 * CTA change: "Get track changes" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764030761 * Update wording and position: "Already subscribed? Try refreshing the page." https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764366969 * Casing update: "Upgrade to track changes" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764209961 * CTA changes: "Get Mendeley integration" + "Get Zotero integration" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764547424 https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764547269 * CTA change: "Get full project history" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762005 * Casing update: "full project history" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762280 * CTA change: "Get more compile time" in timeout-upgrade-prompt-new.tsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762563 * CTA change: "Get more compile time" in compile-timeout-warning.tsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762726 * CTA change: "Get advanced reference search" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764969087 * Update casing and wording: "advanced reference search" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764969412 * CTA change: "Get Symbol Palette" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578765128906 * Update title: "Subscribe to find the symbols you need faster" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578765289664 * Revert use of `satisfies`: it doesn't work with our version of prettier (https://github.com/prettier/prettier/issues/13516) * CTA change: "Get more compile time" in compile-timeout-changing-soon.tsx ⚠️ not in miro * Rename `paywallCtaAssignment`, remove useless export and comment Addressing Fahru's review * Add alternative texts in `/registration/try-premium` page * CTA change: "Get more compile time" in timeout-upgrade-prompt.jsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762563 * CTA change: "Get GitHub Sync" in import-project-from-github-modal-content.tsx Not in Miro, but related to: https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286736 * CTA change: "Get more compile time" in compile-time-warning.tsx Not in Miro, but related to others * Fix compile-time-warning style (spacings, overflows out of window) * `npm run format:fix` GitOrigin-RevId: 0d8d1808b5901c2761d35494c49713d26721bcfd
2024-04-02 10:06:16 -04:00
import { useSplitTestContext } from '@/shared/context/split-test-context'
function TimeoutUpgradePromptNew() {
const {
startCompile,
lastCompileOptions,
setAnimateCompileDropdownArrow,
showNewCompileTimeoutUI,
isProjectOwner,
} = useDetachCompileContext()
const { enableStopOnFirstError } = useStopOnFirstError({
eventSource: 'timeout-new',
})
const handleEnableStopOnFirstErrorClick = useCallback(() => {
enableStopOnFirstError()
startCompile({ stopOnFirstError: true })
setAnimateCompileDropdownArrow(true)
}, [enableStopOnFirstError, startCompile, setAnimateCompileDropdownArrow])
if (!window.ExposedSettings.enableSubscriptions) {
return null
}
const compileTimeChanging = showNewCompileTimeoutUI === 'changing'
return (
<>
<CompileTimeout
compileTimeChanging={compileTimeChanging}
isProjectOwner={isProjectOwner}
/>
<PreventTimeoutHelpMessage
compileTimeChanging={compileTimeChanging}
handleEnableStopOnFirstErrorClick={handleEnableStopOnFirstErrorClick}
lastCompileOptions={lastCompileOptions}
isProjectOwner={isProjectOwner}
/>
</>
)
}
type CompileTimeoutProps = {
compileTimeChanging?: boolean
isProjectOwner: boolean
}
const CompileTimeout = memo(function CompileTimeout({
compileTimeChanging,
isProjectOwner,
}: CompileTimeoutProps) {
const { t } = useTranslation()
[web] Paywall CTA split-test (#17555) * Fix `{splitTest.requiredCohortSize && (...)}` can display `0` * Get `paywall-cta` assignment in ProjectController.js * CTA change: "Get Dropbox Sync" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286026 * CTA change: "Get GitHub Sync" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286736 * CTA change: "Get Git integration" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286283 * CTA change: "Add more collaborators" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763884855 * CTA change: "Get track changes" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764030761 * Update wording and position: "Already subscribed? Try refreshing the page." https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764366969 * Casing update: "Upgrade to track changes" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764209961 * CTA changes: "Get Mendeley integration" + "Get Zotero integration" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764547424 https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764547269 * CTA change: "Get full project history" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762005 * Casing update: "full project history" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762280 * CTA change: "Get more compile time" in timeout-upgrade-prompt-new.tsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762563 * CTA change: "Get more compile time" in compile-timeout-warning.tsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762726 * CTA change: "Get advanced reference search" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764969087 * Update casing and wording: "advanced reference search" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764969412 * CTA change: "Get Symbol Palette" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578765128906 * Update title: "Subscribe to find the symbols you need faster" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578765289664 * Revert use of `satisfies`: it doesn't work with our version of prettier (https://github.com/prettier/prettier/issues/13516) * CTA change: "Get more compile time" in compile-timeout-changing-soon.tsx ⚠️ not in miro * Rename `paywallCtaAssignment`, remove useless export and comment Addressing Fahru's review * Add alternative texts in `/registration/try-premium` page * CTA change: "Get more compile time" in timeout-upgrade-prompt.jsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762563 * CTA change: "Get GitHub Sync" in import-project-from-github-modal-content.tsx Not in Miro, but related to: https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286736 * CTA change: "Get more compile time" in compile-time-warning.tsx Not in Miro, but related to others * Fix compile-time-warning style (spacings, overflows out of window) * `npm run format:fix` GitOrigin-RevId: 0d8d1808b5901c2761d35494c49713d26721bcfd
2024-04-02 10:06:16 -04:00
const { splitTestVariants } = useSplitTestContext()
const hasNewPaywallCta = splitTestVariants['paywall-cta'] === 'enabled'
return (
<PdfLogEntry
headerTitle={t('your_compile_timed_out')}
formattedContent={
<>
<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>
{compileTimeChanging ? (
<>
<strong>{t('upgrade_for_plenty_more_compile_time')}</strong>{' '}
{t(
'plus_additional_collaborators_document_history_track_changes_and_more'
)}
</>
) : (
<>
<strong>{t('upgrade_for_12x_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 />,
]}
/>
)}
{isProjectOwner && (
<p className="text-center">
<StartFreeTrialButton
variant={compileTimeChanging ? 'new-changing' : 'new-20s'}
source="compile-timeout"
buttonProps={{
bsStyle: 'success',
className: 'row-spaced-small',
block: true,
}}
>
[web] Paywall CTA split-test (#17555) * Fix `{splitTest.requiredCohortSize && (...)}` can display `0` * Get `paywall-cta` assignment in ProjectController.js * CTA change: "Get Dropbox Sync" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286026 * CTA change: "Get GitHub Sync" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286736 * CTA change: "Get Git integration" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286283 * CTA change: "Add more collaborators" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763884855 * CTA change: "Get track changes" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764030761 * Update wording and position: "Already subscribed? Try refreshing the page." https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764366969 * Casing update: "Upgrade to track changes" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764209961 * CTA changes: "Get Mendeley integration" + "Get Zotero integration" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764547424 https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764547269 * CTA change: "Get full project history" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762005 * Casing update: "full project history" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762280 * CTA change: "Get more compile time" in timeout-upgrade-prompt-new.tsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762563 * CTA change: "Get more compile time" in compile-timeout-warning.tsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762726 * CTA change: "Get advanced reference search" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764969087 * Update casing and wording: "advanced reference search" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764969412 * CTA change: "Get Symbol Palette" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578765128906 * Update title: "Subscribe to find the symbols you need faster" https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578765289664 * Revert use of `satisfies`: it doesn't work with our version of prettier (https://github.com/prettier/prettier/issues/13516) * CTA change: "Get more compile time" in compile-timeout-changing-soon.tsx ⚠️ not in miro * Rename `paywallCtaAssignment`, remove useless export and comment Addressing Fahru's review * Add alternative texts in `/registration/try-premium` page * CTA change: "Get more compile time" in timeout-upgrade-prompt.jsx https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578764762563 * CTA change: "Get GitHub Sync" in import-project-from-github-modal-content.tsx Not in Miro, but related to: https://miro.com/app/board/uXjVMFLu5J8=/?openComment=3458764578763286736 * CTA change: "Get more compile time" in compile-time-warning.tsx Not in Miro, but related to others * Fix compile-time-warning style (spacings, overflows out of window) * `npm run format:fix` GitOrigin-RevId: 0d8d1808b5901c2761d35494c49713d26721bcfd
2024-04-02 10:06:16 -04:00
{hasNewPaywallCta
? t('get_more_compile_time')
: t('start_a_free_trial')}
</StartFreeTrialButton>
</p>
)}
</>
}
// @ts-ignore
entryAriaLabel={t('your_compile_timed_out')}
level="error"
/>
)
})
type PreventTimeoutHelpMessageProps = {
compileTimeChanging?: boolean
lastCompileOptions: any
handleEnableStopOnFirstErrorClick: () => void
isProjectOwner: boolean
}
const PreventTimeoutHelpMessage = memo(function PreventTimeoutHelpMessage({
compileTimeChanging,
lastCompileOptions,
handleEnableStopOnFirstErrorClick,
isProjectOwner,
}: PreventTimeoutHelpMessageProps) {
const { t } = useTranslation()
function sendInfoClickEvent() {
eventTracking.sendMB('paywall-info-click', {
'paywall-type': 'compile-timeout',
content: 'blog',
})
}
const compileTimeoutChangesBlogLink = (
/* 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-timeouts-and-servers"
rel="noopener noreferrer"
target="_blank"
onClick={sendInfoClickEvent}
/>
)
return (
<PdfLogEntry
headerTitle={t('reasons_for_compile_timeouts')}
formattedContent={
<>
<p>
<em>
{compileTimeChanging ? (
<>
{isProjectOwner ? (
<Trans
i18nKey="were_in_the_process_of_reducing_compile_timeout_which_may_affect_your_project"
components={[compileTimeoutChangesBlogLink]}
/>
) : (
<Trans
i18nKey="were_in_the_process_of_reducing_compile_timeout_which_may_affect_this_project"
components={[compileTimeoutChangesBlogLink]}
/>
)}
</>
) : (
<>
{isProjectOwner ? (
<Trans
i18nKey="weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project"
components={[compileTimeoutChangesBlogLink]}
/>
) : (
<Trans
i18nKey="weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project"
components={[compileTimeoutChangesBlogLink]}
/>
)}
</>
)}
</em>
</p>
<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"
/>,
]}
/>
</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="/learn/how-to/Fixing_and_preventing_compile_timeouts#Step_3:_Assess_your_project_for_time-consuming_tasks_and_fatal_errors"
rel="noopener noreferrer"
target="_blank"
/>,
]}
/>
{!lastCompileOptions.stopOnFirstError && (
<>
{' '}
<Trans
i18nKey="enable_stop_on_first_error_under_recompile_dropdown_menu"
components={[
// eslint-disable-next-line react/jsx-key
<Button
bsSize="xs"
bsStyle="info-ghost-inline"
onClick={handleEnableStopOnFirstErrorClick}
/>,
// eslint-disable-next-line react/jsx-key
<strong />,
]}
/>{' '}
</>
)}
</li>
</ul>
<p>
<Trans
i18nKey="learn_more_about_other_causes_of_compile_timeouts"
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>
</>
}
// @ts-ignore
entryAriaLabel={t('reasons_for_compile_timeouts')}
level="raw"
/>
)
})
export default memo(TimeoutUpgradePromptNew)