From b14a131b430317441e8184491485f6300b41b82e Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:52:05 +0100
Subject: [PATCH] Merge pull request #26398 from overleaf/dp-premium-button

Add upgrade button to new editor toolbar

GitOrigin-RevId: 6c4832ccb6c32e72a842671c35d2315e3b792c15
---
 .../components/toolbar/toolbar.tsx            |  3 +++
 .../components/toolbar/upgrade-button.tsx     | 26 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 services/web/frontend/js/features/ide-redesign/components/toolbar/upgrade-button.tsx

diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
index 56c597451e..298e6f8e93 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
+++ b/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>
   )
 }
diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/upgrade-button.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/upgrade-button.tsx
new file mode 100644
index 0000000000..b3059de5af
--- /dev/null
+++ b/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>
+  )
+}