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

GitOrigin-RevId: c4809784783af740d6b7d9fa24110e915c36d794

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<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 /> }}
-        />
-      ) : (
-        <Trans
-          i18nKey="track_changes_is_off"
-          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'}
+            />
+          }
         />
-      )}
-      <BootstrapVersionSwitcher
-        bs3={<Icon type={menuExpanded ? 'angle-down' : 'angle-right'} />}
-        bs5={
-          <MaterialIcon type={menuExpanded ? 'expand_more' : 'chevron_right'} />
-        }
-      />
-    </button>
+      </button>
+
+      <UpgradeTrackChangesModal show={showModal} setShow={setShowModal} />
+    </>
   )
 }