In NoBoosts AB test, render boosted non-splash cards as non-boosted in Flexible General

Author: domlander

dotcom-rendering/src/components/DecideContainer.tsx

@@ -48,6 +48,7 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
+	isInNoBoostsAbTestVariant?: boolean;
 };
 
 export const DecideContainer = ({
@@ -63,6 +64,7 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
+	isInNoBoostsAbTestVariant,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -268,6 +270,7 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
+					isInNoBoostsAbTestVariant={isInNoBoostsAbTestVariant}
 				/>
 			);
 		case 'scrollable/small':

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -21,6 +21,7 @@ import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FeatureCard } from './FeatureCard';
 import { FrontCard } from './FrontCard';
+import { Hide } from './Hide';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
@@ -32,6 +33,7 @@ type Props = {
 	aspectRatio: AspectRatio;
 	containerLevel?: DCRContainerLevel;
 	collectionId: number;
+	isInNoBoostsAbTestVariant?: boolean;
 };
 
 type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -580,18 +582,27 @@ export const FlexibleGeneral = ({
 	aspectRatio,
 	containerLevel = 'Primary',
 	collectionId,
+	isInNoBoostsAbTestVariant,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
 		...snap,
 		uniqueId: `collection-${collectionId}-splash-0`,
 	}));
+
 	const cards = [...groupedTrails.standard]
 		.slice(0, 19)
 		.map((standard, i) => ({
 			...standard,
 			uniqueId: `collection-${collectionId}-standard-${i}`,
 		}));
+
+	const cardsInAbTest = cards.map((card) => ({
+		...card,
+		boostLevel: isInNoBoostsAbTestVariant ? 'default' : card.boostLevel,
+	}));
+
 	const groupedCards = decideCardPositions(cards);
+	const groupedCardsInAbTest = decideCardPositions(cardsInAbTest);
 
 	return (
 		<>
@@ -609,45 +620,88 @@ export const FlexibleGeneral = ({
 				/>
 			)}
 
-			{groupedCards.map((row, i) => {
-				switch (row.layout) {
-					case 'oneCardFullWidth':
-						return (
-							<FullWidthCardLayout
-								key={row.cards[0]?.uniqueId}
-								cards={row.cards}
-								containerPalette={containerPalette}
-								showAge={showAge}
-								absoluteServerTimes={absoluteServerTimes}
-								imageLoading={imageLoading}
-								aspectRatio={aspectRatio}
-								isFirstRow={!splash.length && i === 0}
-								isLastRow={i === groupedCards.length - 1}
-								containerLevel={containerLevel}
-								collectionId={collectionId}
-							/>
-						);
-
-					case 'oneCardHalfWidth':
-					case 'twoCard':
-					default:
-						return (
-							<HalfWidthCardLayout
-								key={row.cards[0]?.uniqueId}
-								cards={row.cards}
-								containerPalette={containerPalette}
-								showAge={showAge}
-								absoluteServerTimes={absoluteServerTimes}
-								imageLoading={imageLoading}
-								isFirstRow={!splash.length && i === 0}
-								isFirstStandardRow={i === 0}
-								aspectRatio={aspectRatio}
-								isLastRow={i === groupedCards.length - 1}
-								containerLevel={containerLevel}
-							/>
-						);
-				}
-			})}
+			<Hide when="above" breakpoint="tablet">
+				{groupedCardsInAbTest.map((row, i) => {
+					switch (row.layout) {
+						case 'oneCardFullWidth':
+							return (
+								<FullWidthCardLayout
+									key={row.cards[0]?.uniqueId}
+									cards={row.cards}
+									containerPalette={containerPalette}
+									showAge={showAge}
+									absoluteServerTimes={absoluteServerTimes}
+									imageLoading={imageLoading}
+									aspectRatio={aspectRatio}
+									isFirstRow={!splash.length && i === 0}
+									isLastRow={i === groupedCards.length - 1}
+									containerLevel={containerLevel}
+									collectionId={collectionId}
+								/>
+							);
+
+						case 'oneCardHalfWidth':
+						case 'twoCard':
+						default:
+							return (
+								<HalfWidthCardLayout
+									key={row.cards[0]?.uniqueId}
+									cards={row.cards}
+									containerPalette={containerPalette}
+									showAge={showAge}
+									absoluteServerTimes={absoluteServerTimes}
+									imageLoading={imageLoading}
+									isFirstRow={!splash.length && i === 0}
+									isFirstStandardRow={i === 0}
+									aspectRatio={aspectRatio}
+									isLastRow={i === groupedCards.length - 1}
+									containerLevel={containerLevel}
+								/>
+							);
+					}
+				})}
+			</Hide>
+			<Hide when="below" breakpoint="tablet">
+				{groupedCards.map((row, i) => {
+					switch (row.layout) {
+						case 'oneCardFullWidth':
+							return (
+								<FullWidthCardLayout
+									key={row.cards[0]?.uniqueId}
+									cards={row.cards}
+									containerPalette={containerPalette}
+									showAge={showAge}
+									absoluteServerTimes={absoluteServerTimes}
+									imageLoading={imageLoading}
+									aspectRatio={aspectRatio}
+									isFirstRow={!splash.length && i === 0}
+									isLastRow={i === groupedCards.length - 1}
+									containerLevel={containerLevel}
+									collectionId={collectionId}
+								/>
+							);
+
+						case 'oneCardHalfWidth':
+						case 'twoCard':
+						default:
+							return (
+								<HalfWidthCardLayout
+									key={row.cards[0]?.uniqueId}
+									cards={row.cards}
+									containerPalette={containerPalette}
+									showAge={showAge}
+									absoluteServerTimes={absoluteServerTimes}
+									imageLoading={imageLoading}
+									isFirstRow={!splash.length && i === 0}
+									isFirstStandardRow={i === 0}
+									aspectRatio={aspectRatio}
+									isLastRow={i === groupedCards.length - 1}
+									containerLevel={containerLevel}
+								/>
+							);
+					}
+				})}
+			</Hide>
 		</>
 	);
 };

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -105,7 +105,12 @@ const decideLeftContent = (front: Front, collection: DCRCollectionType) => {
 
 export const FrontLayout = ({ front, NAV }: Props) => {
 	const {
-		config: { isPaidContent, hasPageSkin: hasPageSkinConfig, pageId },
+		config: {
+			isPaidContent,
+			hasPageSkin: hasPageSkinConfig,
+			pageId,
+			abTests,
+		},
 		editionId,
 	} = front;
 
@@ -136,6 +141,8 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const { absoluteServerTimes = false } = front.config.switches;
 
+	const isInNoBoostsVariant = abTests.noBoostsVariant === 'variant';
+
 	const fallbackAspectRatio = (collectionType: DCRContainerType) => {
 		switch (collectionType) {
 			case 'scrollable/feature':
@@ -199,7 +206,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 								'--article-section-background',
 							)}
 						>
-							<HeaderAdSlot abTests={front.config.abTests} />
+							<HeaderAdSlot abTests={abTests} />
 						</Section>
 					</Stuck>
 				)}
@@ -743,6 +750,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 									sectionId={ophanName}
 									collectionId={index + 1}
 									containerLevel={collection.containerLevel}
+									isInNoBoostsAbTestVariant={
+										isInNoBoostsVariant
+									}
 								/>
 							</FrontSection>