Merge pull request #14395 from guardian/add-discussion-to-gallery

Add discussion to gallery

Author: marjisound

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -16,6 +16,7 @@ import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { Caption } from '../components/Caption';
+import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
 import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots';
 import { GalleryImage } from '../components/GalleryImage';
@@ -172,6 +173,9 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 
 	const contributionsServiceUrl = getContributionsServiceUrl(frontendData);
 
+	const showComments =
+		frontendData.isCommentable && !frontendData.config.isPaidContent;
+
 	return (
 		<>
 			{isWeb && (
@@ -361,7 +365,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						</Fragment>
 					);
 				})}
-				;
+
 				<SubMeta
 					format={format}
 					subMetaKeywordLinks={frontendData.subMetaKeywordLinks}
@@ -391,6 +395,36 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					/>
 				</Section>
 			)}
+			{/** More Galleries container goes here */}
+			{showComments && (
+				<Section
+					fullWidth={true}
+					sectionId="comments"
+					element="section"
+					backgroundColour={themePalette(
+						'--discussion-section-background',
+					)}
+					borderColour={themePalette('--article-border')}
+					fontColour={themePalette('--discussion-text')}
+				>
+					<DiscussionLayout
+						discussionApiUrl={frontendData.config.discussionApiUrl}
+						shortUrlId={frontendData.config.shortUrlId}
+						format={format}
+						discussionD2Uid={frontendData.config.discussionD2Uid}
+						discussionApiClientHeader={
+							frontendData.config.discussionApiClientHeader
+						}
+						enableDiscussionSwitch={
+							!!frontendData.config.switches
+								.enableDiscussionSwitch
+						}
+						isAdFreeUser={frontendData.isAdFreeUser}
+						shouldHideAds={frontendData.shouldHideAds}
+						idApiUrl={frontendData.config.idApiUrl}
+					/>
+				</Section>
+			)}
 			{/** Most Popular container goes here */}
 			{isWeb && renderAds && !isLabs && (
 				<Section