Skip to content

Commit

Permalink
Add test variants to layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@abeddow91
abeddow91 committed May 7, 2024
1 parent cc04a56 commit 825c4e6
Show file tree
Hide file tree
Showing 7 changed files with 692 additions and 490 deletions.
172 changes: 101 additions & 71 deletions dotcom-rendering/src/layouts/CommentLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 ||
Expand Down Expand Up @@ -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) && (

Check failure on line 823 in dotcom-rendering/src/layouts/CommentLayout.tsx

View workflow job for this annotation

GitHub Actions / lint / check 

Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator
<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) && (

Check failure on line 851 in dotcom-rendering/src/layouts/CommentLayout.tsx

View workflow job for this annotation

GitHub Actions / lint / check 

Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator
<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}
Expand Down Expand Up @@ -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) && (

Check failure on line 904 in dotcom-rendering/src/layouts/CommentLayout.tsx

View workflow job for this annotation

GitHub Actions / lint / check 

Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator
<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
Expand Down
Loading

0 comments on commit 825c4e6

Please sign in to comment.