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

@@ -960,6 +960,7 @@ module.exports = {
     sourceEditorCompletionSources: [],
     sourceEditorSymbolPalette: [],
     sourceEditorToolbarComponents: [],
+    mainEditorLayoutModals: [],
     langFeedbackLinkingWidgets: [],
     labsExperiments: [],
     integrationLinkingWidgets: [],

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>
   )
 }