diff --git a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx index 73ef5947c82..583a4a49896 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx @@ -275,6 +275,8 @@ export const StickyBottomBanner = ({ ); const [SelectedBanner, setSelectedBanner] = useState(null); + const [hasPickMessageCompleted, setHasPickMessageCompleted] = + useState(false); const [asyncArticleCounts, setAsyncArticleCounts] = useState>(); @@ -365,9 +367,10 @@ export const StickyBottomBanner = ({ }; pickMessage(bannerConfig, renderingTarget) - .then((PickedBanner: () => MaybeFC) => - setSelectedBanner(PickedBanner), - ) + .then((PickedBanner: () => MaybeFC) => { + setSelectedBanner(PickedBanner); + setHasPickMessageCompleted(true); + }) .catch((e) => { // Report error to Sentry const msg = `StickyBottomBanner pickMessage - error: ${String( @@ -377,6 +380,7 @@ export const StickyBottomBanner = ({ new Error(msg), 'sticky-bottom-banner', ); + setHasPickMessageCompleted(true); }); }, [ isSignedIn, @@ -402,6 +406,15 @@ export const StickyBottomBanner = ({ isInAuxiaControlGroup, ]); + useEffect(() => { + if (hasPickMessageCompleted && SelectedBanner == null) { + document.dispatchEvent( + new CustomEvent('banner:none', { + detail: { readerRevenue: false }, + }), + ); + } + }, [SelectedBanner, hasPickMessageCompleted]); if (SelectedBanner) { return ; }