agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-06-01 05:11:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show "Upgrade to track changes" modal for redesigned review panel (#23003)

Browse Source 
GitOrigin-RevId: c4809784783af740d6b7d9fa24110e915c36d794
This commit is contained in:
Domagoj Kriskovic
2025-01-23 12:42:09 +01:00
committed by Copybot
parent 48d08f5b28
commit c300d0adb1
1 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx
View File

@@ -1,40 +1,68 @@
import { FC, memo } from 'react'
import { FC, memo, useState } from 'react'
import { Trans } from 'react-i18next'
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
import Icon from '@/shared/components/icon'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
import { useProjectContext } from '@/shared/context/project-context'
import UpgradeTrackChangesModal from '@/features/source-editor/components/review-panel/upgrade-track-changes-modal'
import { send, sendMB } from '@/infrastructure/event-tracking'
const sendAnalytics = () => {
send('subscription-funnel', 'editor-click-feature', 'real-time-track-changes')
sendMB('paywall-prompt', {
'paywall-type': 'track-changes',
})
}
const ReviewPanelTrackChangesMenuButton: FC<{
menuExpanded: boolean
setMenuExpanded: React.Dispatch<React.SetStateAction<boolean>>
}> = ({ menuExpanded, setMenuExpanded }) => {
const project = useProjectContext()
const { wantTrackChanges } = useEditorManagerContext()
const [showModal, setShowModal] = useState(false)
const handleTrackChangesMenuExpand = () => {
if (project.features.trackChanges) {
setMenuExpanded(value => !value)
} else {
sendAnalytics()
setShowModal(true)
}
}
return (
<button
className="track-changes-menu-button"
onClick={() => setMenuExpanded(value => !value)}
>
{wantTrackChanges && <div className="track-changes-indicator-circle" />}
{wantTrackChanges ? (
<Trans
i18nKey="track_changes_is_on"
components={{ strong: <strong /> }}
<>
<button
className="track-changes-menu-button"
onClick={handleTrackChangesMenuExpand}
>
{wantTrackChanges && <div className="track-changes-indicator-circle" />}
{wantTrackChanges ? (
<Trans
i18nKey="track_changes_is_on"
components={{ strong: <strong /> }}
/>
) : (
<Trans
i18nKey="track_changes_is_off"
components={{ strong: <strong /> }}
/>
)}
<BootstrapVersionSwitcher
bs3={<Icon type={menuExpanded ? 'angle-down' : 'angle-right'} />}
bs5={
<MaterialIcon
type={menuExpanded ? 'expand_more' : 'chevron_right'}
/>
}
/>
) : (
<Trans
i18nKey="track_changes_is_off"
components={{ strong: <strong /> }}
/>
)}
<BootstrapVersionSwitcher
bs3={<Icon type={menuExpanded ? 'angle-down' : 'angle-right'} />}
bs5={
<MaterialIcon type={menuExpanded ? 'expand_more' : 'chevron_right'} />
}
/>
</button>
</button>
<UpgradeTrackChangesModal show={showModal} setShow={setShowModal} />
</>
)
}