diff --git a/services/web/frontend/js/features/source-editor/components/table-generator/promotion/popover.tsx b/services/web/frontend/js/features/source-editor/components/table-generator/promotion/popover.tsx index 2da929ee81..a445e407db 100644 --- a/services/web/frontend/js/features/source-editor/components/table-generator/promotion/popover.tsx +++ b/services/web/frontend/js/features/source-editor/components/table-generator/promotion/popover.tsx @@ -30,14 +30,16 @@ const GRAMMARLY_CUTOFF_TIME = new Date(2023, 9, 10).getTime() const editorContextPropTypes = { inactiveTutorials: PropTypes.arrayOf(PropTypes.string).isRequired, deactivateTutorial: PropTypes.func.isRequired, + currentPopup: PropTypes.string, + setCurrentPopup: PropTypes.func.isRequired, } export const PromotionOverlay: FC = ({ children }) => { const ref = useRef(null) - const { inactiveTutorials }: EditorTutorials = useEditorContext( - editorContextPropTypes - ) + const { inactiveTutorials, currentPopup, setCurrentPopup }: EditorTutorials = + useEditorContext(editorContextPropTypes) + const { splitTestVariants, }: { splitTestVariants: Record } = @@ -54,11 +56,21 @@ export const PromotionOverlay: FC = ({ children }) => { const hideBecauseNewUser = !userRegistrationTime || userRegistrationTime > NEW_USER_CUTOFF_TIME + const popupPresent = + currentPopup && currentPopup !== 'table-generator-promotion' + const showPromotion = splitTestVariants['table-generator-promotion'] === 'enabled' && + !popupPresent && !inactiveTutorials.includes('table-generator-promotion') && !hideBecauseNewUser + useEffect(() => { + if (showPromotion) { + setCurrentPopup('table-generator-promotion') + } + }, [showPromotion, setCurrentPopup]) + if (!showPromotion) { return <>{children} } diff --git a/services/web/frontend/js/shared/context/editor-context.jsx b/services/web/frontend/js/shared/context/editor-context.jsx index 58c131a007..66ea152897 100644 --- a/services/web/frontend/js/shared/context/editor-context.jsx +++ b/services/web/frontend/js/shared/context/editor-context.jsx @@ -91,6 +91,8 @@ export function EditorProvider({ children }) { getMeta('ol-inactiveTutorials', []) ) + const [currentPopup, setCurrentPopup] = useState(null) + const deactivateTutorial = useCallback( tutorialKey => { setInactiveTutorials([...inactiveTutorials, tutorialKey]) @@ -173,6 +175,8 @@ export function EditorProvider({ children }) { insertSymbol, inactiveTutorials, deactivateTutorial, + currentPopup, + setCurrentPopup, }), [ cobranding, @@ -188,6 +192,8 @@ export function EditorProvider({ children }) { insertSymbol, inactiveTutorials, deactivateTutorial, + currentPopup, + setCurrentPopup, ] ) diff --git a/services/web/types/tutorial.ts b/services/web/types/tutorial.ts index e917a33429..1da5d837c2 100644 --- a/services/web/types/tutorial.ts +++ b/services/web/types/tutorial.ts @@ -2,4 +2,6 @@ export type EditorTutorials = { inactiveTutorials: [string] deactivateTutorial: (key: string) => void + currentPopup: string + setCurrentPopup: (id: string) => void }