From e85233b12c5b297bdf8c2086c4fab617804c161d Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 3 Mar 2025 11:48:40 +0100
Subject: [PATCH] Open overleaf assist paywall via event listener (#23958)

* Add overleaf assist paywall modal component in storybook

* update img alt

* remove data-action

* rename assistant -> assist

* use css var for blue color

* Open Overleaf assist paywall if in "overleaf-assist-bundle" split-test

* dont use optional planCode

* Open overleaf assist paywal via event listener

* rename to mainEditorLayoutModals

* call setAssistantUpgraded when modal is shown

* fix merge mistake

* fix lint error

* fix merge differences

GitOrigin-RevId: 0b3162a5c241d4dbe2773ae773c3e35f02c5c492
---
 services/web/config/settings.defaults.js            |  1 +
 .../ide-react/components/layout/main-layout.tsx     | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js
index 57e3e2553f..ea975d6010 100644
--- a/services/web/config/settings.defaults.js
+++ b/services/web/config/settings.defaults.js
@@ -960,6 +960,7 @@ module.exports = {
     sourceEditorCompletionSources: [],
     sourceEditorSymbolPalette: [],
     sourceEditorToolbarComponents: [],
+    mainEditorLayoutModals: [],
     langFeedbackLinkingWidgets: [],
     labsExperiments: [],
     integrationLinkingWidgets: [],
diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index 3503b446ce..b0a65e12bb 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
@@ -1,5 +1,5 @@
 import { Panel, PanelGroup } from 'react-resizable-panels'
-import { FC } from 'react'
+import { ElementType, FC } from 'react'
 import { HorizontalResizeHandle } from '../resize/horizontal-resize-handle'
 import classNames from 'classnames'
 import { useLayoutContext } from '@/shared/context/layout-context'
@@ -15,6 +15,12 @@ import { EditorAndPdf } from '@/features/ide-react/components/editor-and-pdf'
 import HistoryContainer from '@/features/ide-react/components/history-container'
 import getMeta from '@/utils/meta'
 import { useEditorContext } from '@/shared/context/editor-context'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+
+const mainEditorLayoutModalsModules: Array<{
+  import: { default: ElementType }
+  path: string
+}> = importOverleafModules('mainEditorLayoutModals')
 
 export const MainLayout: FC = () => {
   const { view } = useLayoutContext()
@@ -124,6 +130,11 @@ export const MainLayout: FC = () => {
           </Panel>
         </PanelGroup>
       </div>
+      {mainEditorLayoutModalsModules.map(
+        ({ import: { default: Component }, path }) => (
+          <Component key={path} />
+        )
+      )}
     </div>
   )
 }