diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index c6cafa1c33..37eac4a124 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -66,6 +66,8 @@ block content .system-message-content(ng-bind-html="htmlContent") grammarly-warning(delay=10000) + if hasFeature('saas') + legacy-editor-warning(delay=10000) include ./editor/main diff --git a/services/web/frontend/js/features/source-editor/components/legacy-editor-warning.tsx b/services/web/frontend/js/features/source-editor/components/legacy-editor-warning.tsx new file mode 100644 index 0000000000..9c3741669a --- /dev/null +++ b/services/web/frontend/js/features/source-editor/components/legacy-editor-warning.tsx @@ -0,0 +1,81 @@ +import { memo, useCallback, useEffect, useState } from 'react' +import { Button } from 'react-bootstrap' +import customLocalStorage from '../../../infrastructure/local-storage' +import useScopeValue from '../../../shared/hooks/use-scope-value' +import * as eventTracking from '../../../infrastructure/event-tracking' + +export const LegacyEditorWarning = memo(function LegacyEditorWarning({ + delay, +}: { + delay: number +}) { + const [show, setShow] = useState(false) + const [newSourceEditor] = useScopeValue('editor.newSourceEditor') + const hasDismissedLegacyEditor = customLocalStorage.getItem( + 'editor.has_dismissed_legacy_editor_warning' + ) + + useEffect(() => { + const showLegacyEditor = + !hasDismissedLegacyEditor && newSourceEditor === false + + let timeoutId: number | undefined + + if (showLegacyEditor) { + timeoutId = window.setTimeout(() => { + eventTracking.sendMB('legacy-editor-warning-prompt') + setShow(true) + }, delay) + } + + return () => { + window.clearTimeout(timeoutId) + } + }, [hasDismissedLegacyEditor, newSourceEditor, delay]) + + const handleClose = useCallback(() => { + setShow(false) + customLocalStorage.setItem( + 'editor.has_dismissed_legacy_editor_warning', + true + ) + eventTracking.sendMB('legacy-editor-warning-dismiss') + }, []) + + const handleClick = useCallback(() => { + eventTracking.sendMB('legacy-editor-warning-link-click') + }, []) + + if (!show) { + return null + } + + return ( +