Suggested change

guardian · Oct 18, 2024 · 4b6aefb · 4b6aefb
1 parent bbbc79e
commit 4b6aefb
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.tsx
@@ -249,6 +249,7 @@ export const ContributionsLiveblogEpic: ReactComponent<EpicProps> = ({
 						onReminderOpen={onReminderOpen}
 						fetchEmail={fetchEmail}
 						submitComponentEvent={submitComponentEvent}
+						isColourInTestVariant={isColourInTestVariant}
 					/>
 				)}
 			</section>

diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
@@ -67,6 +67,7 @@ const PrimaryCtaButton = ({
 	amountsVariantName,
 	numArticles,
 	submitComponentEvent,
+	isColourInTestVariant,
 }: {
 	cta?: Cta;
 	tracking: Tracking;
@@ -75,6 +76,7 @@ const PrimaryCtaButton = ({
 	amountsVariantName?: string;
 	numArticles: number;
 	submitComponentEvent?: (event: OphanComponentEvent) => void;
+	isColourInTestVariant?: boolean;
 }): JSX.Element | null => {
 	if (!cta) {
 		return null;
@@ -98,7 +100,7 @@ const PrimaryCtaButton = ({
 				submitComponentEvent={submitComponentEvent}
 				showArrow={true}
 				data-ignore="global-link-styling"
-				tracking={tracking}
+				isColourInTestVariant={isColourInTestVariant}
 			>
 				{buttonText}
 			</EpicButton>
@@ -153,6 +155,7 @@ interface ContributionsEpicButtonsProps {
 	amountsVariantName?: string;
 	numArticles: number;
 	variantOfChoiceCard?: string;
+	isColourInTestVariant?: boolean;
 }
 
 export const ContributionsEpicButtons = ({
@@ -169,6 +172,7 @@ export const ContributionsEpicButtons = ({
 	amountsVariantName,
 	numArticles,
 	variantOfChoiceCard,
+	isColourInTestVariant,
 }: ContributionsEpicButtonsProps): JSX.Element | null => {
 	const [hasBeenSeen, setNode] = useIsInView({
 		debounce: true,
@@ -294,6 +298,7 @@ export const ContributionsEpicButtons = ({
 							amountsVariantName={amountsVariantName}
 							countryCode={countryCode}
 							submitComponentEvent={submitComponentEvent}
+							isColourInTestVariant={isColourInTestVariant}
 						/>
 						{secondaryCta?.type === SecondaryCtaType.Custom &&
 							!!secondaryCta.cta.baseUrl &&

diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx
@@ -13,6 +13,7 @@ interface OnReminderOpen {
 type Props = EpicProps & {
 	amountsTestName?: string;
 	amountsVariantName?: string;
+	isColourInTestVariant?: boolean;
 };
 
 export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
@@ -25,6 +26,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 	fetchEmail,
 	amountsTestName,
 	amountsVariantName,
+	isColourInTestVariant,
 }: Props): JSX.Element => {
 	// reminders
 	const [fetchedEmail, setFetchedEmail] = useState<string | undefined>(
@@ -117,6 +119,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				amountsVariantName={amountsVariantName}
 				numArticles={articleCounts.for52Weeks}
 				variantOfChoiceCard={variantOfChoiceCard}
+				isColourInTestVariant={isColourInTestVariant}
 			/>
 			{isReminderActive && showReminderFields && (
 				<ContributionsEpicReminder

diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx
@@ -4,16 +4,14 @@
  * https://github.com/guardian/support-dotcom-components/blob/9c3eae7cb0b159db4a1c40679d6b37710b0bb937/packages/modules/src/modules/epics/Button.tsx
  */
 import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { ThemeProvider } from '@emotion/react';
+import { css, ThemeProvider } from '@emotion/react';
 import type { OphanComponentEvent } from '@guardian/libs';
 import { palette } from '@guardian/source/foundations';
 import {
 	Button as DSButton,
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
-import type { Tracking } from '@guardian/support-dotcom-components/dist/shared/src/types';
 import React from 'react';
 import type { ReactComponent } from '../../lib/ReactComponent';
 import {
@@ -69,7 +67,7 @@ type Props = {
 	isTertiary?: boolean;
 	cssOverrides?: SerializedStyles;
 	icon?: React.ReactElement;
-	tracking?: Tracking;
+	isColourInTestVariant?: boolean;
 };
 
 // Overrides for tertiary button
@@ -96,7 +94,7 @@ export const EpicButton: ReactComponent<Props> = (allProps: Props) => {
 		isTertiary,
 		cssOverrides,
 		icon,
-		tracking,
+		isColourInTestVariant,
 		...props
 	} = allProps;
 
@@ -109,9 +107,6 @@ export const EpicButton: ReactComponent<Props> = (allProps: Props) => {
 			);
 		}
 	};
-	const isColourInTestVariant =
-		tracking?.abTestName?.includes('_LB_EPIC_BG_COLOUR') &&
-		tracking?.abTestVariant === 'VARIANT';
 
 	if (typeof onClickAction === 'string') {
 		// LinkButton doesn't support 'tertiary' priority (unlike Button)