From 825c4e6b92ac9b3c8053c927b87978575e249689 Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Tue, 7 May 2024 15:38:09 +0100
Subject: [PATCH] Add test variants to layouts

---
 .../src/layouts/CommentLayout.tsx             | 172 +++++++++-------
 .../src/layouts/ImmersiveLayout.tsx           | 176 ++++++++++-------
 .../src/layouts/InteractiveLayout.tsx         | 172 +++++++++-------
 dotcom-rendering/src/layouts/LiveLayout.tsx   | 184 ++++++++++--------
 .../src/layouts/PictureLayout.tsx             | 131 ++++++++-----
 .../src/layouts/ShowcaseLayout.tsx            | 171 +++++++++-------
 .../src/layouts/StandardLayout.tsx            | 176 ++++++++++-------
 7 files changed, 692 insertions(+), 490 deletions(-)

diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index a9f8ec425b4..db6f0757f2e 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -45,6 +45,7 @@ import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideTrail } from '../lib/decideTrail';
 import { parse } from '../lib/slot-machine-flags';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -282,6 +283,25 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 		config: { isPaidContent, host },
 	} = article;
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	const showBodyEndSlot =
 		isWeb &&
 		(parse(article.slotMachineFlags ?? '').showBodyEnd ||
@@ -799,49 +819,58 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette('--article-background')}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={article.storyPackage.trails.map(
-									decideTrail,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-							/>
-						</Island>
-					</Section>
-				)}
-
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={!!article.config.isPaidContent}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-					/>
-				</Island>
+				{article.storyPackage &&
+					(showOnwardsAllRows || showOnwardsTopRow) && (
+						<Section
+							fullWidth={true}
+							backgroundColour={themePalette(
+								'--article-background',
+							)}
+							borderColour={themePalette('--article-border')}
+						>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<Carousel
+									heading={article.storyPackage.heading}
+									trails={article.storyPackage.trails.map(
+										decideTrail,
+									)}
+									onwardsSource="more-on-this-story"
+									format={format}
+									leftColSize={'compact'}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+								/>
+							</Island>
+						</Section>
+					)}
 
+				{(showOnwardsAllRows || showOnwardsBottomRow) && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<OnwardsUpper
+							ajaxUrl={article.config.ajaxUrl}
+							hasRelated={article.hasRelated}
+							hasStoryPackage={article.hasStoryPackage}
+							isAdFreeUser={article.isAdFreeUser}
+							pageId={article.pageId}
+							isPaidContent={!!article.config.isPaidContent}
+							showRelatedContent={
+								article.config.showRelatedContent
+							}
+							keywordIds={article.config.keywordIds}
+							contentType={article.contentType}
+							tags={article.tags}
+							format={format}
+							pillar={format.theme}
+							editionId={article.editionId}
+							shortUrlId={article.config.shortUrlId}
+							discussionApiUrl={article.config.discussionApiUrl}
+						/>
+					</Island>
+				)}
 				{showComments && (
 					<Section
 						fullWidth={true}
@@ -871,35 +900,36 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-print-layout="hide"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
+				{!isPaidContent &&
+					(showOnwardsAllRows || showOnwardsMostViewed) && (
+						<Section
+							title="Most viewed"
+							padContent={false}
+							verticalMargins={false}
+							element="aside"
+							data-print-layout="hide"
+							data-link-name="most-popular"
+							data-component="most-popular"
+							backgroundColour={themePalette(
+								'--article-section-background',
+							)}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<MostViewedFooterLayout renderAds={renderAds}>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<MostViewedFooterData
+										sectionId={article.config.section}
+										ajaxUrl={article.config.ajaxUrl}
+										edition={article.editionId}
+									/>
+								</Island>
+							</MostViewedFooterLayout>
+						</Section>
+					)}
 
 				{renderAds && (
 					<Section
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
index 7ba793bdb41..8a7f813cc26 100644
--- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -34,7 +34,7 @@ import { LabsHeader } from '../components/LabsHeader';
 import { MainMedia } from '../components/MainMedia';
 import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
 import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
-import { minNavHeightPx, Nav } from '../components/Nav/Nav';
+import { Nav, minNavHeightPx } from '../components/Nav/Nav';
 import { OnwardsUpper } from '../components/OnwardsUpper.importable';
 import { RightColumn } from '../components/RightColumn';
 import { Section } from '../components/Section';
@@ -50,6 +50,7 @@ import { decideTrail } from '../lib/decideTrail';
 import { getZIndex } from '../lib/getZIndex';
 import { LABS_HEADER_HEIGHT } from '../lib/labs-constants';
 import { parse } from '../lib/slot-machine-flags';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -240,6 +241,25 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 	const isWeb = renderingTarget === 'Web';
 	const isApps = renderingTarget === 'Apps';
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	const showBodyEndSlot =
 		isWeb &&
 		(parse(article.slotMachineFlags ?? '').showBodyEnd ||
@@ -820,51 +840,60 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 					</Section>
 				)}
 
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette('--article-background')}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island
-							priority="enhancement"
-							defer={{ until: 'visible' }}
+				{article.storyPackage &&
+					(showOnwardsAllRows || showOnwardsTopRow) && (
+						<Section
+							fullWidth={true}
+							backgroundColour={themePalette(
+								'--article-background',
+							)}
+							borderColour={themePalette('--article-border')}
 						>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={article.storyPackage.trails.map(
-									decideTrail,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-							/>
-						</Island>
-					</Section>
-				)}
+							<Island
+								priority="enhancement"
+								defer={{ until: 'visible' }}
+							>
+								<Carousel
+									heading={article.storyPackage.heading}
+									trails={article.storyPackage.trails.map(
+										decideTrail,
+									)}
+									onwardsSource="more-on-this-story"
+									format={format}
+									leftColSize={'compact'}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+								/>
+							</Island>
+						</Section>
+					)}
 
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={article.config.isPaidContent ?? false}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-					/>
-				</Island>
+				{(showOnwardsAllRows || showOnwardsBottomRow) && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<OnwardsUpper
+							ajaxUrl={article.config.ajaxUrl}
+							hasRelated={article.hasRelated}
+							hasStoryPackage={article.hasStoryPackage}
+							isAdFreeUser={article.isAdFreeUser}
+							pageId={article.pageId}
+							isPaidContent={
+								article.config.isPaidContent ?? false
+							}
+							showRelatedContent={
+								article.config.showRelatedContent
+							}
+							keywordIds={article.config.keywordIds}
+							contentType={article.contentType}
+							tags={article.tags}
+							format={format}
+							pillar={format.theme}
+							editionId={article.editionId}
+							shortUrlId={article.config.shortUrlId}
+							discussionApiUrl={article.config.discussionApiUrl}
+						/>
+					</Island>
+				)}
 
 				{showComments && (
 					<Section
@@ -894,35 +923,36 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 						/>
 					</Section>
 				)}
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-print-layout="hide"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
+				{!isPaidContent &&
+					(showOnwardsAllRows || showOnwardsMostViewed) && (
+						<Section
+							title="Most viewed"
+							padContent={false}
+							verticalMargins={false}
+							element="aside"
+							data-print-layout="hide"
+							data-link-name="most-popular"
+							data-component="most-popular"
+							backgroundColour={themePalette(
+								'--article-section-background',
+							)}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<MostViewedFooterLayout renderAds={renderAds}>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<MostViewedFooterData
+										sectionId={article.config.section}
+										ajaxUrl={article.config.ajaxUrl}
+										edition={article.editionId}
+									/>
+								</Island>
+							</MostViewedFooterLayout>
+						</Section>
+					)}
 				{!isLabs && renderAds && (
 					<Section
 						fullWidth={true}
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index 0d8fd7dc055..ddd99e3e1d3 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -44,6 +44,7 @@ import { SubNav } from '../components/SubNav.importable';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideTrail } from '../lib/decideTrail';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -223,6 +224,25 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 		editionId,
 	} = article;
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	const isApps = renderingTarget === 'Apps';
 	const isWeb = renderingTarget === 'Web';
 
@@ -733,50 +753,59 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						showTopBorder={false}
-						backgroundColour={themePalette('--article-background')}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={article.storyPackage.trails.map(
-									decideTrail,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-							/>
-						</Island>
-					</Section>
+				{article.storyPackage &&
+					(showOnwardsAllRows || showOnwardsTopRow) && (
+						<Section
+							fullWidth={true}
+							showTopBorder={false}
+							backgroundColour={themePalette(
+								'--article-background',
+							)}
+							borderColour={themePalette('--article-border')}
+						>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<Carousel
+									heading={article.storyPackage.heading}
+									trails={article.storyPackage.trails.map(
+										decideTrail,
+									)}
+									onwardsSource="more-on-this-story"
+									format={format}
+									leftColSize={'compact'}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+								/>
+							</Island>
+						</Section>
+					)}
+				{(showOnwardsAllRows || showOnwardsBottomRow) && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<OnwardsUpper
+							ajaxUrl={article.config.ajaxUrl}
+							hasRelated={article.hasRelated}
+							hasStoryPackage={article.hasStoryPackage}
+							isAdFreeUser={article.isAdFreeUser}
+							pageId={article.pageId}
+							isPaidContent={!!article.config.isPaidContent}
+							showRelatedContent={
+								article.config.showRelatedContent
+							}
+							keywordIds={article.config.keywordIds}
+							contentType={article.contentType}
+							tags={article.tags}
+							format={format}
+							pillar={format.theme}
+							editionId={article.editionId}
+							shortUrlId={article.config.shortUrlId}
+							discussionApiUrl={article.config.discussionApiUrl}
+						/>
+					</Island>
 				)}
 
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={!!article.config.isPaidContent}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-					/>
-				</Island>
-
 				{showComments && (
 					<Section
 						fullWidth={true}
@@ -807,35 +836,36 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-print-layout="hide"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
+				{!isPaidContent &&
+					(showOnwardsAllRows || showOnwardsMostViewed) && (
+						<Section
+							title="Most viewed"
+							padContent={false}
+							verticalMargins={false}
+							element="aside"
+							data-print-layout="hide"
+							data-link-name="most-popular"
+							data-component="most-popular"
+							backgroundColour={themePalette(
+								'--article-section-background',
+							)}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<MostViewedFooterLayout renderAds={renderAds}>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<MostViewedFooterData
+										sectionId={article.config.section}
+										ajaxUrl={article.config.ajaxUrl}
+										edition={article.editionId}
+									/>
+								</Island>
+							</MostViewedFooterLayout>
+						</Section>
+					)}
 
 				{renderAds && (
 					<Section
diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx
index a7158632d3c..36d9ca3d3cd 100644
--- a/dotcom-rendering/src/layouts/LiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/LiveLayout.tsx
@@ -51,13 +51,14 @@ import { StickyBottomBanner } from '../components/StickyBottomBanner.importable'
 import { SubMeta } from '../components/SubMeta';
 import { SubNav } from '../components/SubNav.importable';
 import {
-	hasRelevantTopics,
 	TopicFilterBank,
+	hasRelevantTopics,
 } from '../components/TopicFilterBank';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideTrail } from '../lib/decideTrail';
 import { getZIndex } from '../lib/getZIndex';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -275,6 +276,25 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 		config: { isPaidContent, host },
 	} = article;
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	// TODO:
 	// 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render
 	// 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false.
@@ -1212,56 +1232,59 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 						</Section>
 					)}
 
-					{article.storyPackage && (
-						<Section
-							fullWidth={true}
-							backgroundColour={themePalette(
-								'--article-background',
-							)}
-							borderColour={themePalette('--article-border')}
-						>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
+					{article.storyPackage &&
+						(showOnwardsAllRows || showOnwardsTopRow) && (
+							<Section
+								fullWidth={true}
+								backgroundColour={themePalette(
+									'--article-background',
+								)}
+								borderColour={themePalette('--article-border')}
 							>
-								<Carousel
-									heading={article.storyPackage.heading}
-									trails={article.storyPackage.trails.map(
-										decideTrail,
-									)}
-									onwardsSource="more-on-this-story"
-									format={format}
-									leftColSize={'wide'}
-									discussionApiUrl={
-										article.config.discussionApiUrl
-									}
-								/>
-							</Island>
-						</Section>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<Carousel
+										heading={article.storyPackage.heading}
+										trails={article.storyPackage.trails.map(
+											decideTrail,
+										)}
+										onwardsSource="more-on-this-story"
+										format={format}
+										leftColSize={'wide'}
+										discussionApiUrl={
+											article.config.discussionApiUrl
+										}
+									/>
+								</Island>
+							</Section>
+						)}
+					{(showOnwardsAllRows || showOnwardsBottomRow) && (
+						<Island priority="feature" defer={{ until: 'visible' }}>
+							<OnwardsUpper
+								ajaxUrl={article.config.ajaxUrl}
+								hasRelated={article.hasRelated}
+								hasStoryPackage={article.hasStoryPackage}
+								isAdFreeUser={article.isAdFreeUser}
+								pageId={article.pageId}
+								isPaidContent={!!article.config.isPaidContent}
+								showRelatedContent={
+									article.config.showRelatedContent
+								}
+								keywordIds={article.config.keywordIds}
+								contentType={article.contentType}
+								tags={article.tags}
+								format={format}
+								pillar={format.theme}
+								editionId={article.editionId}
+								shortUrlId={article.config.shortUrlId}
+								discussionApiUrl={
+									article.config.discussionApiUrl
+								}
+							/>
+						</Island>
 					)}
-
-					<Island priority="feature" defer={{ until: 'visible' }}>
-						<OnwardsUpper
-							ajaxUrl={article.config.ajaxUrl}
-							hasRelated={article.hasRelated}
-							hasStoryPackage={article.hasStoryPackage}
-							isAdFreeUser={article.isAdFreeUser}
-							pageId={article.pageId}
-							isPaidContent={!!article.config.isPaidContent}
-							showRelatedContent={
-								article.config.showRelatedContent
-							}
-							keywordIds={article.config.keywordIds}
-							contentType={article.contentType}
-							tags={article.tags}
-							format={format}
-							pillar={format.theme}
-							editionId={article.editionId}
-							shortUrlId={article.config.shortUrlId}
-							discussionApiUrl={article.config.discussionApiUrl}
-						/>
-					</Island>
-
 					{showComments && (
 						<Section
 							fullWidth={true}
@@ -1296,36 +1319,39 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 						</Section>
 					)}
 
-					{!isPaidContent && (
-						<Section
-							title="Most viewed"
-							padContent={false}
-							verticalMargins={false}
-							element="aside"
-							data-print-layout="hide"
-							data-link-name="most-popular"
-							data-component="most-popular"
-							leftColSize="wide"
-							backgroundColour={themePalette(
-								'--article-section-background',
-							)}
-							borderColour={themePalette('--article-border')}
-							fontColour={themePalette('--article-section-title')}
-						>
-							<MostViewedFooterLayout renderAds={renderAds}>
-								<Island
-									priority="feature"
-									defer={{ until: 'visible' }}
-								>
-									<MostViewedFooterData
-										sectionId={article.config.section}
-										ajaxUrl={article.config.ajaxUrl}
-										edition={article.editionId}
-									/>
-								</Island>
-							</MostViewedFooterLayout>
-						</Section>
-					)}
+					{!isPaidContent &&
+						(showOnwardsAllRows || showOnwardsMostViewed) && (
+							<Section
+								title="Most viewed"
+								padContent={false}
+								verticalMargins={false}
+								element="aside"
+								data-print-layout="hide"
+								data-link-name="most-popular"
+								data-component="most-popular"
+								leftColSize="wide"
+								backgroundColour={themePalette(
+									'--article-section-background',
+								)}
+								borderColour={themePalette('--article-border')}
+								fontColour={themePalette(
+									'--article-section-title',
+								)}
+							>
+								<MostViewedFooterLayout renderAds={renderAds}>
+									<Island
+										priority="feature"
+										defer={{ until: 'visible' }}
+									>
+										<MostViewedFooterData
+											sectionId={article.config.section}
+											ajaxUrl={article.config.ajaxUrl}
+											edition={article.editionId}
+										/>
+									</Island>
+								</MostViewedFooterLayout>
+							</Section>
+						)}
 
 					{renderAds && (
 						<Section
diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx
index 169ab553d97..cfe1b7f4e9e 100644
--- a/dotcom-rendering/src/layouts/PictureLayout.tsx
+++ b/dotcom-rendering/src/layouts/PictureLayout.tsx
@@ -42,6 +42,7 @@ import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideTrail } from '../lib/decideTrail';
 import { decideLanguage, decideLanguageDirection } from '../lib/lang';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -265,6 +266,25 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 	const isWeb = renderingTarget === 'Web';
 	const isApps = renderingTarget === 'Apps';
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	// TODO:
 	// 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render
 	// 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false.
@@ -683,30 +703,36 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette('--article-background')}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={article.storyPackage.trails.map(
-									decideTrail,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-							/>
-						</Island>
-					</Section>
-				)}
+				{article.storyPackage &&
+					(showOnwardsAllRows || showOnwardsTopRow) && (
+						<Section
+							fullWidth={true}
+							backgroundColour={themePalette(
+								'--article-background',
+							)}
+							borderColour={themePalette('--article-border')}
+						>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<Carousel
+									heading={article.storyPackage.heading}
+									trails={article.storyPackage.trails.map(
+										decideTrail,
+									)}
+									onwardsSource="more-on-this-story"
+									format={format}
+									leftColSize={'compact'}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+								/>
+							</Island>
+						</Section>
+					)}
 
-				{isWeb && (
+				{isWeb && (showOnwardsAllRows || showOnwardsBottomRow) && (
 					<Island priority="feature" defer={{ until: 'visible' }}>
 						<OnwardsUpper
 							ajaxUrl={article.config.ajaxUrl}
@@ -758,35 +784,36 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-print-layout="hide"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
+				{!isPaidContent &&
+					(showOnwardsAllRows || showOnwardsMostViewed) && (
+						<Section
+							title="Most viewed"
+							padContent={false}
+							verticalMargins={false}
+							element="aside"
+							data-print-layout="hide"
+							data-link-name="most-popular"
+							data-component="most-popular"
+							backgroundColour={themePalette(
+								'--article-section-background',
+							)}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<MostViewedFooterLayout renderAds={renderAds}>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<MostViewedFooterData
+										sectionId={article.config.section}
+										ajaxUrl={article.config.ajaxUrl}
+										edition={article.editionId}
+									/>
+								</Island>
+							</MostViewedFooterLayout>
+						</Section>
+					)}
 
 				{renderAds && (
 					<Section
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
index f8861eba57a..9478144012d 100644
--- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
+++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -47,6 +47,7 @@ import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideTrail } from '../lib/decideTrail';
 import { decideLanguage, decideLanguageDirection } from '../lib/lang';
 import { parse } from '../lib/slot-machine-flags';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -227,6 +228,25 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 	const isWeb = renderingTarget === 'Web';
 	const isApps = renderingTarget === 'Apps';
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	const showBodyEndSlot =
 		isWeb &&
 		(parse(article.slotMachineFlags ?? '').showBodyEnd ||
@@ -798,48 +818,58 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette('--article-background')}
-						borderColour={themePalette('--article-border')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={article.storyPackage.trails.map(
-									decideTrail,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-							/>
-						</Island>
-					</Section>
-				)}
+				{article.storyPackage &&
+					(showOnwardsAllRows || showOnwardsTopRow) && (
+						<Section
+							fullWidth={true}
+							backgroundColour={themePalette(
+								'--article-background',
+							)}
+							borderColour={themePalette('--article-border')}
+						>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<Carousel
+									heading={article.storyPackage.heading}
+									trails={article.storyPackage.trails.map(
+										decideTrail,
+									)}
+									onwardsSource="more-on-this-story"
+									format={format}
+									leftColSize={'compact'}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+								/>
+							</Island>
+						</Section>
+					)}
 
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={!!article.config.isPaidContent}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-					/>
-				</Island>
+				{(showOnwardsAllRows || showOnwardsBottomRow) && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<OnwardsUpper
+							ajaxUrl={article.config.ajaxUrl}
+							hasRelated={article.hasRelated}
+							hasStoryPackage={article.hasStoryPackage}
+							isAdFreeUser={article.isAdFreeUser}
+							pageId={article.pageId}
+							isPaidContent={!!article.config.isPaidContent}
+							showRelatedContent={
+								article.config.showRelatedContent
+							}
+							keywordIds={article.config.keywordIds}
+							contentType={article.contentType}
+							tags={article.tags}
+							format={format}
+							pillar={format.theme}
+							editionId={article.editionId}
+							shortUrlId={article.config.shortUrlId}
+							discussionApiUrl={article.config.discussionApiUrl}
+						/>
+					</Island>
+				)}
 
 				{showComments && (
 					<Section
@@ -870,35 +900,36 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 					</Section>
 				)}
 
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-print-layout="hide"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
+				{!isPaidContent &&
+					(showOnwardsAllRows || showOnwardsMostViewed) && (
+						<Section
+							title="Most viewed"
+							padContent={false}
+							verticalMargins={false}
+							element="aside"
+							data-print-layout="hide"
+							data-link-name="most-popular"
+							data-component="most-popular"
+							backgroundColour={themePalette(
+								'--article-section-background',
+							)}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<MostViewedFooterLayout renderAds={renderAds}>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<MostViewedFooterData
+										sectionId={article.config.section}
+										ajaxUrl={article.config.ajaxUrl}
+										edition={article.editionId}
+									/>
+								</Island>
+							</MostViewedFooterLayout>
+						</Section>
+					)}
 
 				{renderAds && !isLabs && (
 					<Section
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index f600ccbee06..ec6a031dde8 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -53,6 +53,7 @@ import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideTrail } from '../lib/decideTrail';
 import { parse } from '../lib/slot-machine-flags';
+import { useAB } from '../lib/useAB';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { DCRArticle } from '../types/frontend';
@@ -373,6 +374,25 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 		editionId,
 	} = article;
 
+	const abTests = useAB();
+	const abTestsApi = abTests?.api;
+	const showOnwardsAllRows = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'control',
+	);
+	const showOnwardsTopRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-1',
+	);
+	const showOnwardsBottomRow = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-2',
+	);
+	const showOnwardsMostViewed = abTestsApi?.isUserInVariant(
+		'OnwardJourneys',
+		'variant-3',
+	);
+
 	const isWeb = renderingTarget === 'Web';
 	const isApps = renderingTarget === 'Apps';
 
@@ -380,7 +400,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 		isWeb &&
 		(parse(article.slotMachineFlags ?? '').showBodyEnd ||
 			article.config.switches.slotBodyEnd);
-
 	// TODO:
 	// 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render
 	// 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false.
@@ -957,51 +976,59 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					</Section>
 				)}
 
-				{article.storyPackage && (
-					<Section
-						fullWidth={true}
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<Island priority="feature" defer={{ until: 'visible' }}>
-							<Carousel
-								heading={article.storyPackage.heading}
-								trails={article.storyPackage.trails.map(
-									decideTrail,
-								)}
-								onwardsSource="more-on-this-story"
-								format={format}
-								leftColSize={'compact'}
-								discussionApiUrl={
-									article.config.discussionApiUrl
-								}
-							/>
-						</Island>
-					</Section>
+				{article.storyPackage &&
+					(showOnwardsAllRows || showOnwardsTopRow) && (
+						<Section
+							fullWidth={true}
+							// backgroundColour={themePalette(
+							// 	'--article-section-background',
+							// )}
+							backgroundColour={'hotpink'}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
+							>
+								<Carousel
+									heading={article.storyPackage.heading}
+									trails={article.storyPackage.trails.map(
+										decideTrail,
+									)}
+									onwardsSource="more-on-this-story"
+									format={format}
+									leftColSize={'compact'}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+								/>
+							</Island>
+						</Section>
+					)}
+				{(showOnwardsAllRows || showOnwardsBottomRow) && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<OnwardsUpper
+							ajaxUrl={article.config.ajaxUrl}
+							hasRelated={article.hasRelated}
+							hasStoryPackage={article.hasStoryPackage}
+							isAdFreeUser={article.isAdFreeUser}
+							pageId={article.pageId}
+							isPaidContent={!!article.config.isPaidContent}
+							showRelatedContent={
+								article.config.showRelatedContent
+							}
+							keywordIds={article.config.keywordIds}
+							contentType={article.contentType}
+							tags={article.tags}
+							format={format}
+							pillar={format.theme}
+							editionId={article.editionId}
+							shortUrlId={article.config.shortUrlId}
+							discussionApiUrl={article.config.discussionApiUrl}
+						/>
+					</Island>
 				)}
-
-				<Island priority="feature" defer={{ until: 'visible' }}>
-					<OnwardsUpper
-						ajaxUrl={article.config.ajaxUrl}
-						hasRelated={article.hasRelated}
-						hasStoryPackage={article.hasStoryPackage}
-						isAdFreeUser={article.isAdFreeUser}
-						pageId={article.pageId}
-						isPaidContent={!!article.config.isPaidContent}
-						showRelatedContent={article.config.showRelatedContent}
-						keywordIds={article.config.keywordIds}
-						contentType={article.contentType}
-						tags={article.tags}
-						format={format}
-						pillar={format.theme}
-						editionId={article.editionId}
-						shortUrlId={article.config.shortUrlId}
-						discussionApiUrl={article.config.discussionApiUrl}
-					/>
-				</Island>
 				{showComments && (
 					<Section
 						fullWidth={true}
@@ -1032,35 +1059,36 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					</Section>
 				)}
 
-				{!isPaidContent && (
-					<Section
-						title="Most viewed"
-						padContent={false}
-						verticalMargins={false}
-						element="aside"
-						data-print-layout="hide"
-						data-link-name="most-popular"
-						data-component="most-popular"
-						backgroundColour={themePalette(
-							'--article-section-background',
-						)}
-						borderColour={themePalette('--article-border')}
-						fontColour={themePalette('--article-section-title')}
-					>
-						<MostViewedFooterLayout renderAds={renderAds}>
-							<Island
-								priority="feature"
-								defer={{ until: 'visible' }}
-							>
-								<MostViewedFooterData
-									sectionId={article.config.section}
-									ajaxUrl={article.config.ajaxUrl}
-									edition={article.editionId}
-								/>
-							</Island>
-						</MostViewedFooterLayout>
-					</Section>
-				)}
+				{!isPaidContent &&
+					(showOnwardsAllRows || showOnwardsMostViewed) && (
+						<Section
+							title="Most viewed"
+							padContent={false}
+							verticalMargins={false}
+							element="aside"
+							data-print-layout="hide"
+							data-link-name="most-popular"
+							data-component="most-popular"
+							backgroundColour={themePalette(
+								'--article-section-background',
+							)}
+							borderColour={themePalette('--article-border')}
+							fontColour={themePalette('--article-section-title')}
+						>
+							<MostViewedFooterLayout renderAds={renderAds}>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<MostViewedFooterData
+										sectionId={article.config.section}
+										ajaxUrl={article.config.ajaxUrl}
+										edition={article.editionId}
+									/>
+								</Island>
+							</MostViewedFooterLayout>
+						</Section>
+					)}
 
 				{renderAds && !isLabs && (
 					<Section