diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index 312a281eaf1..c7d9607c7e4 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/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 ( <> diff --git a/dotcom-rendering/src/experiments/tests/usa-expandable-marketing-card.ts b/dotcom-rendering/src/experiments/tests/usa-expandable-marketing-card.ts index 1f9cc1611b9..7e1204bebc8 100644 --- a/dotcom-rendering/src/experiments/tests/usa-expandable-marketing-card.ts +++ b/dotcom-rendering/src/experiments/tests/usa-expandable-marketing-card.ts @@ -7,7 +7,7 @@ export const UsaExpandableMarketingCard: ABTest = { author: 'dotcom.platform@guardian.co.uk', 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 */ + }, + }, ], };