Merge pull request #12857 from guardian/doml/restart-big-events-test

Update UsaExpandableMarketingCard test

dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx

@@ -1,3 +1,4 @@
+import type { ABTestAPI } from '@guardian/ab-core';
 import { getCookie } from '@guardian/libs';
 import { useEffect, useState } from 'react';
 import type { DailyArticle } from '../lib/dailyArticleCount';
@@ -8,6 +9,69 @@ import { ExpandableMarketingCard } from './ExpandableMarketingCard';
 import { ExpandableMarketingCardSwipeable } from './ExpandableMarketingCardSwipeable';
 import { Hide } from './Hide';
 
+type VariantName = 'variant-free' | 'variant-bubble' | 'variant-billionaire';
+type Variant = {
+	heading: string;
+	kicker: string;
+};
+const variantFree: Variant = {
+	heading: 'Yes, this story is free',
+	kicker: 'Why the Guardian has no paywall',
+};
+const variantBubble: Variant = {
+	heading: 'Pop your US news bubble',
+	kicker: 'How the Guardian is different',
+};
+const variantBillionaire: Variant = {
+	heading: 'No billionaire approved this',
+	kicker: 'How the Guardian is different',
+};
+
+const getVariant = (abTestAPI: ABTestAPI | undefined): VariantName | null => {
+	if (!abTestAPI) {
+		return null;
+	}
+
+	const isInVariantFree = abTestAPI.isUserInVariant(
+		'UsaExpandableMarketingCard',
+		'variant-free',
+	);
+	const isInVariantBubble = abTestAPI.isUserInVariant(
+		'UsaExpandableMarketingCard',
+		'variant-bubble',
+	);
+	const isInVariantBillionaire = abTestAPI.isUserInVariant(
+		'UsaExpandableMarketingCard',
+		'variant-billionaire',
+	);
+
+	if (isInVariantFree) {
+		return 'variant-free';
+	}
+
+	if (isInVariantBubble) {
+		return 'variant-bubble';
+	}
+
+	if (isInVariantBillionaire) {
+		return 'variant-billionaire';
+	}
+
+	return null;
+};
+
+const getVariantCopy = (variant: VariantName): Variant => {
+	if (variant === 'variant-free') {
+		return variantFree;
+	}
+
+	if (variant === 'variant-bubble') {
+		return variantBubble;
+	}
+
+	return variantBillionaire;
+};
+
 const isFirstOrSecondArticle = () => {
 	const [dailyCount = {} as DailyArticle] = getDailyArticleCount() ?? [];
 	return Object.keys(dailyCount).length === 0 || dailyCount.count <= 1;
@@ -40,15 +104,7 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => {
 	const [isApplicableUser, setIsApplicableUser] = useState(false);
 
 	const abTestAPI = useAB()?.api;
-	const isInVariantFree = !!abTestAPI?.isUserInVariant(
-		'UsaExpandableMarketingCard',
-		'variant-free',
-	);
-	const isInVariantBubble = !!abTestAPI?.isUserInVariant(
-		'UsaExpandableMarketingCard',
-		'variant-bubble',
-	);
-	const isInEitherVariant = isInVariantFree || isInVariantBubble;
+	const abTestVariant = getVariant(abTestAPI);
 
 	useEffect(() => {
 		void isNewUSUser().then((show) => {
@@ -58,12 +114,11 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => {
 		});
 	}, []);
 
-	if (!isInEitherVariant || !isApplicableUser || isClosed) {
+	if (!abTestVariant || !isApplicableUser || isClosed) {
 		return null;
 	}
 
-	const heading = 'No billionaire approved this';
-	const kicker = 'How the Guardian is different';
+	const { heading, kicker } = getVariantCopy(abTestVariant);
 
 	return (
 		<>

dotcom-rendering/src/experiments/tests/usa-expandable-marketing-card.ts

@@ -7,7 +7,7 @@ export const UsaExpandableMarketingCard: ABTest = {
 	author: '[email protected]',
 	description:
 		'Test the impact of showing the user a component that highlights the Guardians journalism.',
-	audience: 15 / 100,
+	audience: 40 / 100,
 	audienceOffset: 0 / 100,
 	audienceCriteria: 'US-based users that see the US edition.',
 	successMeasure: 'Users are more likely to engage with the site.',
@@ -31,5 +31,11 @@ export const UsaExpandableMarketingCard: ABTest = {
 				/* no-op */
 			},
 		},
+		{
+			id: 'variant-billionaire',
+			test: (): void => {
+				/* no-op */
+			},
+		},
 	],
 };