add logs for supporter revenue banner decisions and include decision on window object

Author: cemms1

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 =
-			<K extends keyof ReaderRevenueDevUtils>(key: K) =>
+			<K extends keyof Omit<ReaderRevenueDevUtils, 'bannerToShow'>>(
+				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: null,
 			};
 		}
 	}, [shouldHideReaderRevenue]);

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<void> => ({
 					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<BannerProps>) =>
-					() => <BannerComponent name={name} props={props} />,
+				show: ({ name, props }: ModuleData<BannerProps>) => {
+					log('supporterRevenue', `Showing banner: ${name}`);
+					window.guardian.readerRevenue.bannerToShow = name;
+					return () => <BannerComponent name={name} props={props} />;
+				},
 			},
 			timeoutMillis: DEFAULT_BANNER_TIMEOUT_MILLIS,
 		};
@@ -193,9 +197,11 @@ const buildBrazeBanner = (
 				tags,
 				shouldHideReaderRevenue,
 			),
-		show: (meta: any) => () => (
-			<BrazeBanner meta={meta} idApiUrl={idApiUrl} />
-		),
+		show: (meta: any) => () => {
+			log('supporterRevenue', `Showing banner: braze-banner`);
+			window.guardian.readerRevenue.bannerToShow = 'braze-banner';
+			return <BrazeBanner meta={meta} idApiUrl={idApiUrl} />;
+		},
 	},
 	timeoutMillis: DEFAULT_BANNER_TIMEOUT_MILLIS,
 });

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';
 
@@ -165,9 +165,17 @@ export const pickMessage = (
 				clearAllTimeouts(candidateConfigsWithTimeout);
 
 				if (winner === null) {
+					log(
+						'supporterRevenue',
+						`pickMessage for ${name}: no winner, returning default value`,
+					);
 					resolve(defaultShow);
 				} else {
 					const { candidate, meta } = winner;
+					log(
+						'supporterRevenue',
+						`pickMessage for ${name}: winner is ${candidate.id}`,
+					);
 					resolve(() => candidate.show(meta));
 				}
 			})

dotcom-rendering/src/lib/readerRevenueDevUtils.ts

@@ -161,6 +161,7 @@ export interface ReaderRevenueDevUtils {
 	showMeTheBanner: ReaderRevenueDevUtil;
 	showNextVariant: ReaderRevenueDevUtil;
 	showPreviousVariant: ReaderRevenueDevUtil;
+	bannerToShow: string | null;
 }
 
 const getForcedVariant = (type: 'epic' | 'banner'): string | null => {