diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx index c2adaaff5e..ac114f4f37 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-track-changes-menu-button.tsx @@ -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> }> = ({ 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 ( - + + + + ) }