Revert "Personal Highlight Order Test (#14757)" (#14832)

This reverts commit 63c3564.

Author: abeddow91

dotcom-rendering/src/components/Card/components/CardLink.tsx

@@ -21,19 +21,16 @@ type Props = {
 	headlineText: string;
 	dataLinkName?: string;
 	isExternalLink: boolean;
-	trackCardClick?: () => void;
 };
 
 const InternalLink = ({
 	linkTo,
 	headlineText,
 	dataLinkName,
-	trackCardClick,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
-	trackCardClick?: () => void;
 }) => {
 	return (
 		// eslint-disable-next-line jsx-a11y/anchor-has-content -- we have an aria-label attribute describing the content
@@ -42,7 +39,6 @@ const InternalLink = ({
 			css={fauxLinkStyles}
 			data-link-name={dataLinkName}
 			aria-label={headlineText}
-			onClick={trackCardClick}
 		/>
 	);
 };
@@ -51,12 +47,10 @@ const ExternalLink = ({
 	linkTo,
 	headlineText,
 	dataLinkName,
-	trackCardClick,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
-	trackCardClick?: () => void;
 }) => {
 	return (
 		// eslint-disable-next-line jsx-a11y/anchor-has-content -- we have an aria-label attribute describing the content
@@ -67,7 +61,6 @@ const ExternalLink = ({
 			aria-label={headlineText + ' (opens in new tab)'}
 			target="_blank"
 			rel="noreferrer"
-			onClick={trackCardClick}
 		/>
 	);
 };
@@ -77,7 +70,6 @@ export const CardLink = ({
 	headlineText,
 	dataLinkName = 'article', //this makes sense if the link is to an article, but should this say something like "external" if it's an external link? are there any other uses/alternatives?
 	isExternalLink,
-	trackCardClick,
 }: Props) => {
 	return (
 		<>
@@ -86,15 +78,13 @@ export const CardLink = ({
 					linkTo={linkTo}
 					headlineText={headlineText}
 					dataLinkName={dataLinkName}
-					trackCardClick={trackCardClick}
 				/>
 			)}
 			{!isExternalLink && (
 				<InternalLink
 					linkTo={linkTo}
 					headlineText={headlineText}
 					dataLinkName={dataLinkName}
-					trackCardClick={trackCardClick}
 				/>
 			)}
 		</>

dotcom-rendering/src/components/DecideContainer.tsx

@@ -233,7 +233,7 @@ export const DecideContainer = ({
 			return <NavList trails={trails} showImage={true} />;
 		case 'scrollable/highlights':
 			return (
-				<Island priority="critical">
+				<Island priority="feature" defer={{ until: 'visible' }}>
 					<ScrollableHighlights trails={trails} frontId={frontId} />
 				</Island>
 			);

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -32,7 +32,6 @@ export type HighlightsCardProps = {
 	byline?: string;
 	isExternalLink: boolean;
 	starRating?: Rating;
-	trackCardClick: () => void;
 };
 
 const container = css`
@@ -134,7 +133,6 @@ export const HighlightsCard = ({
 	byline,
 	isExternalLink,
 	starRating,
-	trackCardClick,
 }: HighlightsCardProps) => {
 	const isMediaCard = isMedia(format);
 
@@ -146,7 +144,6 @@ export const HighlightsCard = ({
 					headlineText={headlineText}
 					dataLinkName={dataLinkName}
 					isExternalLink={isExternalLink}
-					trackCardClick={trackCardClick}
 				/>
 
 				<div css={content}>

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

@@ -7,15 +7,8 @@ import {
 	SvgChevronRightSingle,
 } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
-import { submitComponentEvent } from '../client/ophan/ophan';
 import { getZIndex } from '../lib/getZIndex';
 import { ophanComponentId } from '../lib/ophan-helpers';
-import {
-	getOrderedHighlights,
-	onHighlightEvent,
-	resetHighlightsState,
-} from '../lib/personaliseHighlights';
-import { useAB } from '../lib/useAB';
 import { palette } from '../palette';
 import type { DCRFrontCard } from '../types/front';
 import { HighlightsCard } from './Masthead/HighlightsCard';
@@ -48,7 +41,8 @@ const carouselStyles = css`
 	grid-auto-flow: column;
 	overflow-x: auto;
 	overflow-y: hidden;
-	scroll-behavior: auto;
+	scroll-snap-type: x mandatory;
+	scroll-behavior: smooth;
 	overscroll-behavior-x: contain;
 	overscroll-behavior-y: auto;
 
@@ -84,10 +78,6 @@ const carouselStyles = css`
 	position: relative;
 `;
 
-const scrollSnapStyles = css`
-	scroll-snap-type: x mandatory;
-`;
-
 const itemStyles = css`
 	scroll-snap-align: start;
 	grid-area: span 1;
@@ -217,45 +207,12 @@ const getOphanInfo = (frontId?: string) => {
 	};
 };
 
-const isEqual = (
-	historicalHighlights: DCRFrontCard[],
-	currentHighlights: DCRFrontCard[],
-) => {
-	const c = currentHighlights.map((v) => v.url);
-	const h = historicalHighlights.map((v) => v.url);
-	return c.every((v) => {
-		return h.includes(v);
-	});
-};
 export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 	const carouselRef = useRef<HTMLOListElement | null>(null);
 	const carouselLength = trails.length;
 	const imageLoading = 'eager';
 	const [showPreviousButton, setShowPreviousButton] = useState(false);
 	const [showNextButton, setShowNextButton] = useState(true);
-	const [shouldShowHighlights, setShouldShowHighlights] = useState(false);
-	const [orderedTrails, setOrderedTrails] = useState<DCRFrontCard[]>(trails);
-
-	const ABTestAPI = useAB()?.api;
-	let abTestPersonalisedHighlightAttr = 'not-in-test';
-	if (
-		ABTestAPI?.isUserInVariant('PersonalisedHighlights', 'click-tracking')
-	) {
-		abTestPersonalisedHighlightAttr = 'click-tracking';
-	}
-
-	if (ABTestAPI?.isUserInVariant('PersonalisedHighlights', 'view-tracking')) {
-		abTestPersonalisedHighlightAttr = 'view-tracking';
-	}
-
-	if (
-		ABTestAPI?.isUserInVariant(
-			'PersonalisedHighlights',
-			'click-and-view-tracking',
-		)
-	) {
-		abTestPersonalisedHighlightAttr = 'click-and-view-tracking';
-	}
 
 	const scrollTo = (direction: 'left' | 'right') => {
 		if (!carouselRef.current) return;
@@ -290,15 +247,6 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 		setShowNextButton(scrollLeft < maxScrollLeft);
 	};
 
-	useEffect(() => {
-		if (
-			abTestPersonalisedHighlightAttr === 'view-tracking' ||
-			abTestPersonalisedHighlightAttr === 'click-and-view-tracking'
-		) {
-			onHighlightEvent('VIEW');
-		}
-	}, [abTestPersonalisedHighlightAttr]);
-
 	useEffect(() => {
 		const carouselElement = carouselRef.current;
 		if (!carouselElement) return;
@@ -316,50 +264,11 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 		};
 	}, []);
 
-	useEffect(() => {
-		const personalisedHighlights = getOrderedHighlights();
-		if (
-			personalisedHighlights.length === 0 ||
-			personalisedHighlights.length !== trails.length ||
-			!isEqual(personalisedHighlights, trails)
-		) {
-			/* Reset to editorial order */
-			resetHighlightsState(trails);
-			setOrderedTrails(trails);
-			return;
-		}
-		/* Otherwise, use personalised order from local storage */
-		setOrderedTrails(personalisedHighlights);
-
-		/* Fire a view event only if the container has been personalised */
-		void submitComponentEvent(
-			{
-				component: {
-					componentType: 'CONTAINER',
-					id: `reordered-highlights-container`,
-				},
-				action: 'VIEW',
-			},
-			'Web',
-		);
-	}, [trails]);
-
-	/* Update the visibility of highlights once we have the correct trail order set in state. */
-	useEffect(() => {
-		setShouldShowHighlights(true);
-	}, [orderedTrails]);
-
 	const { ophanComponentLink, ophanComponentName, ophanFrontName } =
 		getOphanInfo(frontId);
 
 	return (
-		<div
-			css={[
-				containerStyles,
-				{ visibility: shouldShowHighlights ? 'visible' : 'hidden' },
-			]}
-			data-link-name={ophanFrontName}
-		>
+		<div css={containerStyles} data-link-name={ophanFrontName}>
 			<ol
 				data-link-name={ophanComponentLink}
 				data-component={ophanComponentName}
@@ -368,15 +277,10 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 				css={[
 					carouselStyles,
 					generateCarouselColumnStyles(carouselLength),
-					/*
-					 * Enable scroll-snap only when visible to prevent browser scroll anchoring.
-					 * When items reorder, browsers try to keep previously visible items in view,
-					 * causing unwanted scrolling. Enabling snap after reordering forces position 0.
-					 */ shouldShowHighlights && scrollSnapStyles,
 				]}
 				data-heatphan-type="carousel"
 			>
-				{orderedTrails.map((trail) => {
+				{trails.map((trail) => {
 					return (
 						<li
 							key={trail.url}
@@ -396,16 +300,6 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 								showQuotedHeadline={trail.showQuotedHeadline}
 								mainMedia={trail.mainMedia}
 								starRating={trail.starRating}
-								trackCardClick={() => {
-									if (
-										abTestPersonalisedHighlightAttr ===
-											'click-tracking' ||
-										abTestPersonalisedHighlightAttr ===
-											'click-and-view-tracking'
-									) {
-										onHighlightEvent('CLICK', trail);
-									}
-								}}
 							/>
 						</li>
 					);

dotcom-rendering/src/experiments/ab-tests.ts

@@ -2,7 +2,6 @@ import type { ABTest } from '@guardian/ab-core';
 import { abTestTest } from './tests/ab-test-test';
 import { auxiaSignInGate } from './tests/auxia-sign-in-gate';
 import { noAuxiaSignInGate } from './tests/no-auxia-sign-in-gate';
-import { personalisedHighlights } from './tests/personalised-highlights';
 import { signInGateMainControl } from './tests/sign-in-gate-main-control';
 import { signInGateMainVariant } from './tests/sign-in-gate-main-variant';
 import { userBenefitsApi } from './tests/user-benefits-api';
@@ -15,6 +14,5 @@ export const tests: ABTest[] = [
 	signInGateMainControl,
 	userBenefitsApi,
 	auxiaSignInGate,
-	personalisedHighlights,
 	noAuxiaSignInGate,
 ];