Merge pull request #26398 from overleaf/dp-premium-button

Add upgrade button to new editor toolbar

GitOrigin-RevId: 6c4832ccb6c32e72a842671c35d2315e3b792c15

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -12,6 +12,8 @@ import BackToEditorButton from '@/features/editor-navigation-toolbar/components/
 import { useCallback } from 'react'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import UpgradeButton from './upgrade-button'
+import getMeta from '@/utils/meta'
 
 export const Toolbar = () => {
   const { view, setView } = useLayoutContext()
@@ -71,6 +73,7 @@ const ToolbarButtons = () => {
       <ShowHistoryButton />
       <ChangeLayoutButton />
       <ShareProjectButton />
+      {getMeta('ol-showUpgradePrompt') && <UpgradeButton />}
     </div>
   )
 }

services/web/frontend/js/features/ide-redesign/components/toolbar/upgrade-button.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next'
+import * as eventTracking from '../../../../infrastructure/event-tracking'
+import OLButton from '@/features/ui/components/ol/ol-button'
+
+export default function UpgradeButton() {
+  const { t } = useTranslation()
+
+  function handleClick() {
+    eventTracking.send('subscription-funnel', 'code-editor', 'upgrade')
+    eventTracking.sendMB('upgrade-button-click', { source: 'code-editor' })
+  }
+
+  return (
+    <div className="ide-redesign-toolbar-button-container">
+      <OLButton
+        variant="premium"
+        size="sm"
+        href="/user/subscription/plans?itm_referrer=editor-header-upgrade-prompt"
+        target="_blank"
+        onClick={handleClick}
+      >
+        {t('upgrade')}
+      </OLButton>
+    </div>
+  )
+}