Insert merchandising slot and update css to have space on the sides in mobile plus refactoring

Author: deedeeh

dotcom-rendering/src/components/GalleryAdSlots.tsx

@@ -18,7 +18,7 @@ export const MobileAdSlot = ({
 	);
 };
 
-export const GalleryInlineAdSlot = ({
+export const GalleryDesktopAdSlot = ({
 	renderAds,
 	adSlotIndex,
 }: {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -15,7 +15,7 @@ import { ArticleTitle } from '../components/ArticleTitle';
 import { Caption } from '../components/Caption';
 import { Footer } from '../components/Footer';
 import {
-	GalleryInlineAdSlot,
+	GalleryDesktopAdSlot,
 	MobileAdSlot,
 } from '../components/GalleryAdSlots';
 import { GalleryImage } from '../components/GalleryImage';
@@ -27,13 +27,10 @@ import { Section } from '../components/Section';
 import { Standfirst } from '../components/Standfirst';
 import { SubMeta } from '../components/SubMeta';
 import { grid } from '../grid';
-import type { ArticleFormat } from '../lib/articleFormat';
+import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
 import { canRenderAds } from '../lib/canRenderAds';
 import { decideMainMediaCaption } from '../lib/decide-caption';
-import {
-	getDesktopAdPositions,
-	getMobileAdPositions,
-} from '../lib/getGalleryAdPositions';
+import { getAdPositions } from '../lib/getGalleryAdPositions';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { Gallery } from '../types/article';
@@ -81,11 +78,8 @@ const galleryItemAdvertStyles = css`
 `;
 
 const galleryInlineAdContainerStyles = css`
-	${grid.column.all}
-
-	${from.tablet} {
-		${grid.column.centre}
-	}
+	${grid.column.centre}
+	z-index: 1;
 
 	${from.desktop} {
 		padding-bottom: ${space[10]}px;
@@ -142,15 +136,11 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 		theme: gallery.theme,
 	};
 
-	const renderAds = canRenderAds(frontendData);
+	const isLabs = format.theme === ArticleSpecial.Labs;
 
-	const desktopAdPositions = renderAds
-		? getDesktopAdPositions(gallery.images)
-		: [];
+	const renderAds = canRenderAds(frontendData);
 
-	const mobileAdPositions = renderAds
-		? getMobileAdPositions(gallery.images)
-		: [];
+	const adPositions = renderAds ? getAdPositions(gallery.images) : [];
 
 	return (
 		<>
@@ -277,12 +267,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 				</header>
 				{gallery.images.map((element, idx) => {
 					const index = idx + 1;
-					const shouldShowDesktopAd =
-						desktopAdPositions.includes(index);
-					const shouldShowMobileAd =
-						mobileAdPositions.includes(index);
-					const shouldShowAnyAd =
-						shouldShowDesktopAd || shouldShowMobileAd;
+					const shouldShowAds = adPositions.includes(index);
 
 					return (
 						<Fragment key={element.elementId}>
@@ -292,7 +277,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								pageId={frontendData.pageId}
 								webTitle={frontendData.webTitle}
 							/>
-							{isWeb && shouldShowAnyAd && (
+							{isWeb && shouldShowAds && (
 								<div
 									className={[
 										'gallery__item gallery__item--advert',
@@ -303,23 +288,19 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 										className="gallery__img-container"
 										css={galleryInlineAdContainerStyles}
 									>
-										{shouldShowDesktopAd && (
-											<GalleryInlineAdSlot
-												renderAds={renderAds}
-												adSlotIndex={desktopAdPositions.indexOf(
-													index,
-												)}
-											/>
-										)}
+										<GalleryDesktopAdSlot
+											renderAds={renderAds}
+											adSlotIndex={adPositions.indexOf(
+												index,
+											)}
+										/>
 
-										{shouldShowMobileAd && (
-											<MobileAdSlot
-												renderAds={renderAds}
-												adSlotIndex={mobileAdPositions.indexOf(
-													index,
-												)}
-											/>
-										)}
+										<MobileAdSlot
+											renderAds={renderAds}
+											adSlotIndex={adPositions.indexOf(
+												index,
+											)}
+										/>
 									</div>
 									<div css={galleryBorder}></div>
 								</div>
@@ -357,6 +338,18 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					/>
 				</Section>
 			)}
+			{isWeb && renderAds && !isLabs && (
+				<Section
+					fullWidth={true}
+					padSides={false}
+					showTopBorder={false}
+					showSideBorders={false}
+					backgroundColour={themePalette('--ad-background')}
+					element="aside"
+				>
+					<AdSlot position="merchandising" display={format.display} />
+				</Section>
+			)}
 			{isWeb && (
 				<Section
 					fullWidth={true}

dotcom-rendering/src/lib/getGalleryAdPositions.ts

@@ -1,17 +1,17 @@
 import type { ImageBlockElement } from '../types/content';
 
-const getMobileAdPositions = (images: ImageBlockElement[]): number[] => {
+/**
+ * @param images - An array of ImageBlockElement objects representing the images in the gallery.
+ * @description This function calculates the positions in the gallery where ads should be placed.
+ * The ad position will be the same for all breakpoints, after every 4 images will have an ad slot.
+ * What make the difference between mobile and desktop slot ids are in GalleryAdSlots.tsx and AdSlot.web.tsx.
+ * @returns An array of numbers representing the positions where ads should be placed.
+ */
+const getAdPositions = (images: ImageBlockElement[]): number[] => {
 	const adPositions = images
 		.map((image) => images.indexOf(image) + 1)
 		.filter((position) => position % 4 === 0);
 	return adPositions;
 };
 
-const getDesktopAdPositions = (images: ImageBlockElement[]): number[] => {
-	const adPositions = images
-		.map((image) => images.indexOf(image) + 1)
-		.filter((position) => position % 4 === 0);
-	return adPositions;
-};
-
-export { getDesktopAdPositions, getMobileAdPositions };
+export { getAdPositions };