mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
d501bc4820
* Implement compile time warning split test * Add i18n for compile time warning * Memoize CompileTimeWarning component * Reuse startFreeTrial() function from account-upgrade * Improve usage of react bootstrap native properties * Cleanup compile-time-warning * Move all logic into CompileTimeWarning component * Only show compile time warning to project owners * Handle compile time warning in detached mode and while switching layout GitOrigin-RevId: 4fc40acfc113f91c81a6744c14c0f8b3ef766e39
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { memo, useCallback, useEffect } from 'react'
|
|
import { Button } from 'react-bootstrap'
|
|
import { Trans, useTranslation } from 'react-i18next'
|
|
import * as eventTracking from '../../../infrastructure/event-tracking'
|
|
import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
|
|
import { startFreeTrial } from '../../../main/account-upgrade'
|
|
|
|
function CompileTimeWarning() {
|
|
const { t } = useTranslation()
|
|
|
|
const { showCompileTimeWarning, setShowCompileTimeWarning } =
|
|
useDetachCompileContext()
|
|
|
|
useEffect(() => {
|
|
if (showCompileTimeWarning) {
|
|
eventTracking.sendMB('compile-time-warning-displayed', {})
|
|
}
|
|
}, [showCompileTimeWarning])
|
|
|
|
const closeWarning = () => {
|
|
eventTracking.sendMB('compile-time-warning-dismissed', {})
|
|
setShowCompileTimeWarning(false)
|
|
}
|
|
|
|
const handleUpgradeClick = useCallback(event => {
|
|
event.preventDefault()
|
|
startFreeTrial('compile-time-warning')
|
|
}, [])
|
|
|
|
if (!showCompileTimeWarning) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="alert alert-success compile-time-warning" role="alert">
|
|
<Button
|
|
className="close"
|
|
data-dismiss="alert"
|
|
aria-label="Close"
|
|
onClick={closeWarning}
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</Button>
|
|
<div>
|
|
<div className="warning-text">
|
|
<Trans
|
|
i18nKey="approaching_compile_timeout_limit_upgrade_for_more_compile_time"
|
|
// eslint-disable-next-line react/jsx-key
|
|
components={[<strong style={{ display: 'inline-block' }} />]}
|
|
/>
|
|
</div>
|
|
<div className="upgrade-prompt">
|
|
<Button bsStyle="primary" bsSize="sm" onClick={handleUpgradeClick}>
|
|
{t('upgrade')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(CompileTimeWarning)
|