61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { FC, memo, useState } from 'react'
|
|
import { Trans } from 'react-i18next'
|
|
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import { useProjectContext } from '@/shared/context/project-context'
|
|
import UpgradeTrackChangesModalLegacy from './upgrade-track-changes-modal-legacy'
|
|
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={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 /> }}
|
|
/>
|
|
)}
|
|
<MaterialIcon type={menuExpanded ? 'expand_more' : 'chevron_right'} />
|
|
</button>
|
|
|
|
<UpgradeTrackChangesModalLegacy show={showModal} setShow={setShowModal} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default memo(ReviewPanelTrackChangesMenuButton)
|