diff --git a/dotcom-rendering/src/components/ReaderRevenueDev.importable.tsx b/dotcom-rendering/src/components/ReaderRevenueDev.importable.tsx index f5cf94bb4cf..c4d22ea90ce 100644 --- a/dotcom-rendering/src/components/ReaderRevenueDev.importable.tsx +++ b/dotcom-rendering/src/components/ReaderRevenueDev.importable.tsx @@ -9,7 +9,9 @@ export const ReaderRevenueDev = ({ shouldHideReaderRevenue }: Props) => { useEffect(() => { // Used internally only, so only import each function on demand const loadAndRun = - (key: K) => + >( + key: K, + ) => (asExistingSupporter: boolean) => import( /* webpackChunkName: "readerRevenueDevUtils" */ '../lib/readerRevenueDevUtils' @@ -36,6 +38,7 @@ export const ReaderRevenueDev = ({ shouldHideReaderRevenue }: Props) => { showMeTheBanner: loadAndRun('showMeTheBanner'), showNextVariant: loadAndRun('showNextVariant'), showPreviousVariant: loadAndRun('showPreviousVariant'), + bannerToShow: undefined, }; } }, [shouldHideReaderRevenue]); diff --git a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx index 3ae188ee1eb..067844d98ea 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx @@ -3,7 +3,7 @@ import type { BrazeMessagesInterface, } from '@guardian/braze-components/logic'; import type { CountryCode } from '@guardian/libs'; -import { cmp, isString, isUndefined, storage } from '@guardian/libs'; +import { cmp, isString, isUndefined, log, storage } from '@guardian/libs'; import type { ModuleData } from '@guardian/support-dotcom-components/dist/dotcom/types'; import type { BannerProps } from '@guardian/support-dotcom-components/dist/shared/types'; import { useEffect, useState } from 'react'; @@ -72,6 +72,8 @@ const buildCmpBannerConfig = (): CandidateConfig => ({ result ? { show: true, meta: undefined } : { show: false }, ), show: () => { + log('supporterRevenue', `Showing CMP UI`); + window.guardian.readerRevenue.bannerToShow = 'cmpUi'; // New CMP is not a react component and is shown outside of react's world // so render nothing if it will show return null; @@ -160,9 +162,11 @@ const buildRRBannerConfigWith = ({ ophanPageViewId, pageId, }), - show: - ({ name, props }: ModuleData) => - () => , + show: ({ name, props }: ModuleData) => { + log('supporterRevenue', `Showing banner: ${name}`); + window.guardian.readerRevenue.bannerToShow = name; + return () => ; + }, }, timeoutMillis: DEFAULT_BANNER_TIMEOUT_MILLIS, }; @@ -193,9 +197,11 @@ const buildBrazeBanner = ( tags, shouldHideReaderRevenue, ), - show: (meta: any) => () => ( - - ), + show: (meta: any) => () => { + log('supporterRevenue', `Showing banner: braze-banner`); + window.guardian.readerRevenue.bannerToShow = 'braze-banner'; + return ; + }, }, timeoutMillis: DEFAULT_BANNER_TIMEOUT_MILLIS, }); @@ -304,9 +310,9 @@ export const StickyBottomBanner = ({ }; pickMessage(bannerConfig, renderingTarget) - .then((PickedBanner: () => MaybeFC) => - setSelectedBanner(PickedBanner), - ) + .then((PickedBanner: () => MaybeFC) => { + setSelectedBanner(PickedBanner); + }) .catch((e) => console.error( `StickyBottomBanner pickMessage - error: ${String(e)}`, diff --git a/dotcom-rendering/src/lib/messagePicker.ts b/dotcom-rendering/src/lib/messagePicker.ts index f07ff1fd4a5..55cbd6fd075 100644 --- a/dotcom-rendering/src/lib/messagePicker.ts +++ b/dotcom-rendering/src/lib/messagePicker.ts @@ -1,4 +1,4 @@ -import { isUndefined, startPerformanceMeasure } from '@guardian/libs'; +import { isUndefined, log, startPerformanceMeasure } from '@guardian/libs'; import { getOphan } from '../client/ophan/ophan'; import type { RenderingTarget } from '../types/renderingTarget'; @@ -164,6 +164,22 @@ export const pickMessage = ( .then((winner) => { clearAllTimeouts(candidateConfigsWithTimeout); + log( + 'supporterRevenue', + `pickMessage for ${name}: ${JSON.stringify(winner)}}`, + ); + document.dispatchEvent( + new CustomEvent<{ + type: string; + winner: string | null; + }>('supporterRevenue:messagePicker', { + detail: { + type: name, + winner: winner?.candidate.id ?? null, + }, + }), + ); + if (winner === null) { resolve(defaultShow); } else { diff --git a/dotcom-rendering/src/lib/readerRevenueDevUtils.ts b/dotcom-rendering/src/lib/readerRevenueDevUtils.ts index aab225ee3de..a7676c7a9cd 100644 --- a/dotcom-rendering/src/lib/readerRevenueDevUtils.ts +++ b/dotcom-rendering/src/lib/readerRevenueDevUtils.ts @@ -161,6 +161,7 @@ export interface ReaderRevenueDevUtils { showMeTheBanner: ReaderRevenueDevUtil; showNextVariant: ReaderRevenueDevUtil; showPreviousVariant: ReaderRevenueDevUtil; + bannerToShow?: string; } const getForcedVariant = (type: 'epic' | 'banner'): string | null => {