From 18447939ffdbcecc86c07a098c0109c878b4f34b Mon Sep 17 00:00:00 2001
From: Daniel Clifton
 <110032454+DanielCliftonGuardian@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:13:29 +0100
Subject: [PATCH] Add `CommentLayout` for apps (#9026)

* commentlayout for apps

* add priority to islands
---
 .../scripts/gen-stories/get-stories.js        |   6 +
 .../src/layouts/CommentLayout.tsx             | 404 ++++++++++--------
 dotcom-rendering/src/layouts/DecideLayout.tsx |  18 +-
 .../stories/generated/Layout.stories.tsx      |  13 +
 4 files changed, 264 insertions(+), 177 deletions(-)

diff --git a/dotcom-rendering/scripts/gen-stories/get-stories.js b/dotcom-rendering/scripts/gen-stories/get-stories.js
index 23da4424c2c..b5660e95302 100644
--- a/dotcom-rendering/scripts/gen-stories/get-stories.js
+++ b/dotcom-rendering/scripts/gen-stories/get-stories.js
@@ -165,6 +165,12 @@ const testLayoutFormats = [
 		theme: 'OpinionPillar',
 		renderingTarget: 'Web',
 	},
+	{
+		display: 'Standard',
+		design: 'Comment',
+		theme: 'NewsPillar',
+		renderingTarget: 'Apps',
+	},
 ];
 
 const generateLayoutStories = () => {
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index e2dcfe8db37..e8b108c8825 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -10,7 +10,9 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import { StraightLines } from '@guardian/source-react-components-development-kitchen';
+import { AdPortals } from '../components/AdPortals.importable';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
@@ -18,7 +20,6 @@ import { ArticleMeta } from '../components/ArticleMeta';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { Border } from '../components/Border';
 import { Carousel } from '../components/Carousel.importable';
-import { useConfig } from '../components/ConfigContext';
 import { ContributorAvatar } from '../components/ContributorAvatar';
 import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
@@ -48,6 +49,7 @@ import { decideTrail } from '../lib/decideTrail';
 import { parse } from '../lib/slot-machine-flags';
 import type { NavType } from '../model/extract-nav';
 import type { DCRArticle } from '../types/frontend';
+import type { RenderingTarget } from '../types/renderingTarget';
 import { BannerWrapper, SendToBack, Stuck } from './lib/stickiness';
 
 const StandardGrid = ({
@@ -258,13 +260,23 @@ const mainMediaWrapper = css`
 	position: relative;
 `;
 
-interface Props {
+interface CommonProps {
 	article: DCRArticle;
-	NAV: NavType;
 	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
+}
+
+interface WebProps extends CommonProps {
+	NAV: NavType;
+	renderingTarget: 'Web';
 }
 
-export const CommentLayout = ({ article, NAV, format }: Props) => {
+interface AppsProps extends CommonProps {
+	renderingTarget: 'Apps';
+}
+
+export const CommentLayout = (props: WebProps | AppsProps) => {
+	const { article, format, renderingTarget } = props;
 	const {
 		config: { isPaidContent, host },
 	} = article;
@@ -290,130 +302,141 @@ export const CommentLayout = ({ article, NAV, format }: Props) => {
 
 	const contributionsServiceUrl = getContributionsServiceUrl(article);
 
-	const renderAds = canRenderAds(article);
-
-	const { renderingTarget } = useConfig();
+	const renderAds = renderingTarget === 'Web' && canRenderAds(article);
 
 	return (
 		<>
-			<div id="bannerandheader">
-				{renderAds && (
-					<Stuck>
-						<Section
-							fullWidth={true}
-							showTopBorder={false}
-							showSideBorders={false}
-							padSides={false}
-							shouldCenter={false}
-						>
-							<HeaderAdSlot />
-						</Section>
-					</Stuck>
-				)}
+			{renderingTarget === 'Web' && (
+				<div id="bannerandheader">
+					{renderAds && (
+						<Stuck>
+							<Section
+								fullWidth={true}
+								showTopBorder={false}
+								showSideBorders={false}
+								padSides={false}
+								shouldCenter={false}
+							>
+								<HeaderAdSlot />
+							</Section>
+						</Stuck>
+					)}
+
+					<SendToBack>
+						{format.theme !== ArticleSpecial.Labs && (
+							<Section
+								fullWidth={true}
+								shouldCenter={false}
+								showTopBorder={false}
+								showSideBorders={false}
+								padSides={false}
+								backgroundColour={brandBackground.primary}
+								element="header"
+							>
+								<Header
+									editionId={article.editionId}
+									idUrl={article.config.idUrl}
+									mmaUrl={article.config.mmaUrl}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+									urls={article.nav.readerRevenueLinks.header}
+									remoteHeader={
+										!!article.config.switches.remoteHeader
+									}
+									contributionsServiceUrl={
+										contributionsServiceUrl
+									}
+									idApiUrl={article.config.idApiUrl}
+									headerTopBarSearchCapiSwitch={
+										!!article.config.switches
+											.headerTopBarSearchCapi
+									}
+								/>
+							</Section>
+						)}
 
-				<SendToBack>
-					{format.theme !== ArticleSpecial.Labs && (
 						<Section
 							fullWidth={true}
-							shouldCenter={false}
+							borderColour={brandLine.primary}
 							showTopBorder={false}
-							showSideBorders={false}
 							padSides={false}
 							backgroundColour={brandBackground.primary}
-							element="header"
+							element="nav"
 						>
-							<Header
-								editionId={article.editionId}
-								idUrl={article.config.idUrl}
-								mmaUrl={article.config.mmaUrl}
-								discussionApiUrl={
-									article.config.discussionApiUrl
+							<Nav
+								nav={props.NAV}
+								isImmersive={
+									format.display === ArticleDisplay.Immersive
 								}
-								urls={article.nav.readerRevenueLinks.header}
-								remoteHeader={
-									!!article.config.switches.remoteHeader
+								displayRoundel={
+									format.display ===
+										ArticleDisplay.Immersive ||
+									format.theme === ArticleSpecial.Labs
 								}
-								contributionsServiceUrl={
-									contributionsServiceUrl
+								selectedPillar={props.NAV.selectedPillar}
+								subscribeUrl={
+									article.nav.readerRevenueLinks.header
+										.subscribe
 								}
-								idApiUrl={article.config.idApiUrl}
-								headerTopBarSearchCapiSwitch={
-									!!article.config.switches
-										.headerTopBarSearchCapi
+								editionId={article.editionId}
+								headerTopBarSwitch={
+									!!article.config.switches.headerTopNav
 								}
 							/>
 						</Section>
-					)}
 
-					<Section
-						fullWidth={true}
-						borderColour={brandLine.primary}
-						showTopBorder={false}
-						padSides={false}
-						backgroundColour={brandBackground.primary}
-						element="nav"
-					>
-						<Nav
-							nav={NAV}
-							isImmersive={
-								format.display === ArticleDisplay.Immersive
-							}
-							displayRoundel={
-								format.display === ArticleDisplay.Immersive ||
-								format.theme === ArticleSpecial.Labs
-							}
-							selectedPillar={NAV.selectedPillar}
-							subscribeUrl={
-								article.nav.readerRevenueLinks.header.subscribe
-							}
-							editionId={article.editionId}
-							headerTopBarSwitch={
-								!!article.config.switches.headerTopNav
-							}
-						/>
-					</Section>
+						{props.NAV.subNavSections && (
+							<Section
+								fullWidth={true}
+								backgroundColour={palette.background.article}
+								padSides={false}
+								element="aside"
+							>
+								<Island
+									priority="enhancement"
+									defer={{ until: 'idle' }}
+								>
+									<SubNav
+										subNavSections={
+											props.NAV.subNavSections
+										}
+										currentNavLink={
+											props.NAV.currentNavLink
+										}
+										linkHoverColour={
+											palette.text.articleLinkHover
+										}
+										borderColour={palette.border.subNav}
+									/>
+								</Island>
+							</Section>
+						)}
 
-					{NAV.subNavSections && (
 						<Section
 							fullWidth={true}
 							backgroundColour={palette.background.article}
 							padSides={false}
-							element="aside"
+							showTopBorder={false}
 						>
-							<Island
-								priority="enhancement"
-								defer={{ until: 'idle' }}
-							>
-								<SubNav
-									subNavSections={NAV.subNavSections}
-									currentNavLink={NAV.currentNavLink}
-									linkHoverColour={
-										palette.text.articleLinkHover
-									}
-									borderColour={palette.border.subNav}
-								/>
-							</Island>
+							<StraightLines
+								count={4}
+								cssOverrides={css`
+									display: block;
+								`}
+								color={palette.border.secondary}
+							/>
 						</Section>
-					)}
-
-					<Section
-						fullWidth={true}
-						backgroundColour={palette.background.article}
-						padSides={false}
-						showTopBorder={false}
-					>
-						<StraightLines
-							count={4}
-							cssOverrides={css`
-								display: block;
-							`}
-							color={palette.border.secondary}
-						/>
-					</Section>
-				</SendToBack>
-			</div>
+					</SendToBack>
+				</div>
+			)}
 
 			<main data-layout="CommentLayout">
+				{renderingTarget === 'Apps' && (
+					<Island priority="critical" clientOnly={true}>
+						<AdPortals />
+					</Island>
+				)}
 				<Section
 					fullWidth={true}
 					showTopBorder={false}
@@ -446,7 +469,9 @@ export const CommentLayout = ({ article, NAV, format }: Props) => {
 									switches={article.config.switches}
 									isAdFreeUser={article.isAdFreeUser}
 									isSensitive={article.config.isSensitive}
-									imagesForAppsLightbox={[]}
+									imagesForAppsLightbox={
+										article.imagesForAppsLightbox
+									}
 								/>
 							</div>
 						</GridItem>
@@ -589,7 +614,9 @@ export const CommentLayout = ({ article, NAV, format }: Props) => {
 										isRightToLeftLang={
 											article.isRightToLeftLang
 										}
-										imagesForAppsLightbox={[]}
+										imagesForAppsLightbox={
+											article.imagesForAppsLightbox
+										}
 									/>
 									{showBodyEndSlot && (
 										<Island
@@ -724,25 +751,29 @@ export const CommentLayout = ({ article, NAV, format }: Props) => {
 					</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>
+				{renderingTarget === 'Web' && (
+					<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>
+				)}
 
 				{!isPaidContent && showComments && (
 					<Section
@@ -768,7 +799,7 @@ export const CommentLayout = ({ article, NAV, format }: Props) => {
 					</Section>
 				)}
 
-				{!isPaidContent && (
+				{renderingTarget === 'Web' && !isPaidContent && (
 					<Section
 						title="Most viewed"
 						padContent={false}
@@ -812,68 +843,91 @@ export const CommentLayout = ({ article, NAV, format }: Props) => {
 				)}
 			</main>
 
-			{NAV.subNavSections && (
+			{renderingTarget === 'Web' && props.NAV.subNavSections && (
 				<Section fullWidth={true} padSides={false} element="aside">
 					<Island priority="enhancement" defer={{ until: 'visible' }}>
 						<SubNav
-							subNavSections={NAV.subNavSections}
-							currentNavLink={NAV.currentNavLink}
+							subNavSections={props.NAV.subNavSections}
+							currentNavLink={props.NAV.currentNavLink}
 							linkHoverColour={palette.text.articleLinkHover}
 							borderColour={palette.border.subNav}
 						/>
 					</Island>
 				</Section>
 			)}
+			{renderingTarget === 'Web' && !isPaidContent && (
+				<>
+					<Section
+						fullWidth={true}
+						padSides={false}
+						backgroundColour={brandBackground.primary}
+						borderColour={brandBorder.primary}
+						showSideBorders={false}
+						element="footer"
+					>
+						<Footer
+							pageFooter={article.pageFooter}
+							selectedPillar={props.NAV.selectedPillar}
+							pillars={props.NAV.pillars}
+							urls={article.nav.readerRevenueLinks.header}
+							editionId={article.editionId}
+							contributionsServiceUrl={
+								article.contributionsServiceUrl
+							}
+						/>
+					</Section>
 
-			<Section
-				fullWidth={true}
-				padSides={false}
-				backgroundColour={brandBackground.primary}
-				borderColour={brandBorder.primary}
-				showSideBorders={false}
-				element="footer"
-			>
-				<Footer
-					pageFooter={article.pageFooter}
-					selectedPillar={NAV.selectedPillar}
-					pillars={NAV.pillars}
-					urls={article.nav.readerRevenueLinks.header}
-					editionId={article.editionId}
-					contributionsServiceUrl={article.contributionsServiceUrl}
-				/>
-			</Section>
-
-			<BannerWrapper>
-				<Island
-					priority="feature"
-					defer={{ until: 'idle' }}
-					clientOnly={true}
+					<BannerWrapper>
+						<Island
+							priority="feature"
+							defer={{ until: 'idle' }}
+							clientOnly={true}
+						>
+							<StickyBottomBanner
+								contentType={article.contentType}
+								contributionsServiceUrl={
+									contributionsServiceUrl
+								}
+								idApiUrl={article.config.idApiUrl}
+								isMinuteArticle={
+									article.pageType.isMinuteArticle
+								}
+								isPaidContent={article.pageType.isPaidContent}
+								isPreview={!!article.config.isPreview}
+								isSensitive={article.config.isSensitive}
+								keywordIds={article.config.keywordIds}
+								pageId={article.pageId}
+								sectionId={article.config.section}
+								shouldHideReaderRevenue={
+									article.shouldHideReaderRevenue
+								}
+								remoteBannerSwitch={
+									!!article.config.switches.remoteBanner
+								}
+								puzzleBannerSwitch={
+									!!article.config.switches.puzzlesBanner
+								}
+								tags={article.tags}
+							/>
+						</Island>
+					</BannerWrapper>
+					<MobileStickyContainer />
+				</>
+			)}
+			{renderingTarget === 'Apps' && (
+				<Section
+					fullWidth={true}
+					data-print-layout="hide"
+					backgroundColour={neutral[97]}
+					padSides={false}
+					showSideBorders={false}
+					element="footer"
 				>
-					<StickyBottomBanner
-						contentType={article.contentType}
-						contributionsServiceUrl={contributionsServiceUrl}
-						idApiUrl={article.config.idApiUrl}
-						isMinuteArticle={article.pageType.isMinuteArticle}
-						isPaidContent={article.pageType.isPaidContent}
-						isPreview={!!article.config.isPreview}
-						isSensitive={article.config.isSensitive}
-						keywordIds={article.config.keywordIds}
-						pageId={article.pageId}
-						sectionId={article.config.section}
-						shouldHideReaderRevenue={
-							article.shouldHideReaderRevenue
-						}
-						remoteBannerSwitch={
-							!!article.config.switches.remoteBanner
-						}
-						puzzleBannerSwitch={
-							!!article.config.switches.puzzlesBanner
-						}
-						tags={article.tags}
-					/>
-				</Island>
-			</BannerWrapper>
-			<MobileStickyContainer />
+					<Island priority="critical">
+						<AppsFooter />
+					</Island>
+				</Section>
+			)}
 		</>
 	);
 };
diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
index c4c91b04ae1..d5e20de79ff 100644
--- a/dotcom-rendering/src/layouts/DecideLayout.tsx
+++ b/dotcom-rendering/src/layouts/DecideLayout.tsx
@@ -59,7 +59,13 @@ const DecideLayoutApps = ({ article, format, renderingTarget }: AppProps) => {
 				case ArticleDesign.Editorial:
 				case ArticleDesign.Letter:
 					// Should be CommentLayout once implemented for apps
-					return notSupported;
+					return (
+						<CommentLayout
+							article={article}
+							format={format}
+							renderingTarget={renderingTarget}
+						/>
+					);
 				case ArticleDesign.Picture:
 					// Should be PictureLayout once implemented for apps
 					return notSupported;
@@ -96,7 +102,13 @@ const DecideLayoutApps = ({ article, format, renderingTarget }: AppProps) => {
 				case ArticleDesign.Editorial:
 				case ArticleDesign.Letter:
 					// Should be CommentLayout once implemented for apps
-					return notSupported;
+					return (
+						<CommentLayout
+							article={article}
+							format={format}
+							renderingTarget={renderingTarget}
+						/>
+					);
 				case ArticleDesign.NewsletterSignup:
 					return notSupported;
 				default:
@@ -166,6 +178,7 @@ const DecideLayoutWeb = ({
 							article={article}
 							NAV={NAV}
 							format={format}
+							renderingTarget={renderingTarget}
 						/>
 					);
 				case ArticleDesign.Picture:
@@ -225,6 +238,7 @@ const DecideLayoutWeb = ({
 							article={article}
 							NAV={NAV}
 							format={format}
+							renderingTarget={renderingTarget}
 						/>
 					);
 				case ArticleDesign.NewsletterSignup:
diff --git a/dotcom-rendering/stories/generated/Layout.stories.tsx b/dotcom-rendering/stories/generated/Layout.stories.tsx
index 11e0cae3f91..ac313b5f357 100644
--- a/dotcom-rendering/stories/generated/Layout.stories.tsx
+++ b/dotcom-rendering/stories/generated/Layout.stories.tsx
@@ -68,3 +68,16 @@ export const WebShowcasePictureOpinionPillar = () => {
 };
 WebShowcasePictureOpinionPillar.storyName = 'Web: Display: Showcase, Design: Picture, Theme: OpinionPillar';
 WebShowcasePictureOpinionPillar.args = { config: { renderingTarget: 'Web' } };
+
+export const AppsStandardCommentNewsPillar = () => {
+	return (
+		<HydratedLayoutWrapper
+			displayName="Standard"
+			designName="Comment"
+			theme="NewsPillar"
+			renderingTarget="Apps"
+		/>
+	);
+};
+AppsStandardCommentNewsPillar.storyName = 'Apps: Display: Standard, Design: Comment, Theme: NewsPillar';
+AppsStandardCommentNewsPillar.args = { config: { renderingTarget: 'Apps' } };