prevent placeholder inclusion if article shouldHideAds is true

Author: cemms1

dotcom-rendering/src/components/AdPortals.importable.tsx

@@ -105,9 +105,8 @@ const debounceUpdateAds = libDebounce(updateAds, 100, { leading: true });
 export const AdPortals = ({
 	rightAlignFrom = 'desktop',
 }: {
-	/** In most cases, we want to try to display ads in the right column from desktop upwards.
-	 * For blogs, we want right aligned from wide upwards.
-	 */
+	// In most cases, we want to try to display ads in the right column from desktop upwards.
+	// For blogs, we want right aligned from wide upwards.
 	rightAlignFrom?: Breakpoint;
 }) => {
 	// Server-rendered placeholder elements for inline ad slots to be inserted into (below desktop breakpoint)

dotcom-rendering/src/components/LiveBlock.tsx

@@ -25,6 +25,7 @@ type Props = {
 	isPinnedPost: boolean;
 	pinnedPostId?: string;
 	editionId: EditionId;
+	shouldHideAds?: boolean;
 };
 
 export const LiveBlock = ({
@@ -42,6 +43,7 @@ export const LiveBlock = ({
 	isPinnedPost,
 	pinnedPostId,
 	editionId,
+	shouldHideAds,
 }: Props) => {
 	if (block.elements.length === 0) return null;
 
@@ -86,6 +88,7 @@ export const LiveBlock = ({
 					switches={switches}
 					isPinnedPost={isPinnedPost}
 					editionId={editionId}
+					shouldHideAds={shouldHideAds}
 				/>
 			))}
 			<footer

dotcom-rendering/src/components/LiveBlogBlocksAndAdverts.tsx

@@ -23,6 +23,7 @@ type Props = {
 	isAdFreeUser: boolean;
 	isSensitive: boolean;
 	isLiveUpdate?: boolean;
+	shouldHideAds?: boolean;
 };
 /**
  * On liveblogs we insert two sets of ad slots into the page: one set for small
@@ -46,6 +47,7 @@ export const LiveBlogBlocksAndAdverts = ({
 	isSensitive,
 	isLiveUpdate,
 	editionId,
+	shouldHideAds,
 }: Props) => {
 	const { renderingTarget } = useConfig();
 	const isWeb = renderingTarget === 'Web';
@@ -72,7 +74,7 @@ export const LiveBlogBlocksAndAdverts = ({
 		);
 	};
 
-	if (isAdFreeUser) {
+	if (isAdFreeUser || shouldHideAds) {
 		return (
 			<>
 				{blocks.map((block) => (

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -65,6 +65,7 @@ type RendererProps = {
 	abTests: ServerSideTests;
 	switches: Switches;
 	editionId: EditionId;
+	shouldHideAds: boolean;
 };
 
 const Renderer = ({
@@ -79,6 +80,7 @@ const Renderer = ({
 	abTests,
 	switches,
 	editionId,
+	shouldHideAds,
 }: RendererProps) => {
 	// const cleanedElements = elements.map(element =>
 	//     'html' in element ? { ...element, html: clean(element.html) } : element,
@@ -100,6 +102,7 @@ const Renderer = ({
 			abTests,
 			switches,
 			editionId,
+			shouldHideAds,
 		});
 
 		switch (element._type) {
@@ -305,6 +308,7 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 						isAdFreeUser={article.isAdFreeUser}
 						isSensitive={article.config.isSensitive}
 						editionId={article.editionId}
+						shouldHideAds={article.shouldHideAds}
 					/>
 				</article>
 			</Section>

dotcom-rendering/src/lib/renderElement.tsx

@@ -93,6 +93,7 @@ type Props = {
 	totalElements?: number;
 	isListElement?: boolean;
 	isSectionedMiniProfilesArticle?: boolean;
+	shouldHideAds?: boolean;
 };
 
 // updateRole modifies the role of an element in a way appropriate for most
@@ -153,6 +154,7 @@ export const renderElement = ({
 	totalElements = 0,
 	isListElement = false,
 	isSectionedMiniProfilesArticle = false,
+	shouldHideAds,
 }: Props) => {
 	const isBlog =
 		format.design === ArticleDesign.LiveBlog ||
@@ -531,7 +533,7 @@ export const renderElement = ({
 			if (isListElement || isTimeline) return null;
 			return <EmailSignUpWrapper {...emailSignUpProps} />;
 		case 'model.dotcomrendering.pageElements.AdPlaceholderBlockElement':
-			return <AdPlaceholder />;
+			return !shouldHideAds && <AdPlaceholder />;
 		case 'model.dotcomrendering.pageElements.NumberedTitleBlockElement':
 			return (
 				<NumberedTitleBlockComponent
@@ -713,6 +715,7 @@ export const renderElement = ({
 						host,
 						isPinnedPost,
 						starRating,
+						shouldHideAds,
 					})}
 					format={format}
 				/>
@@ -925,6 +928,7 @@ export const RenderArticleElement = ({
 	totalElements,
 	isListElement,
 	isSectionedMiniProfilesArticle,
+	shouldHideAds,
 }: Props) => {
 	const withUpdatedRole = updateRole(element, format);
 
@@ -950,6 +954,7 @@ export const RenderArticleElement = ({
 		totalElements,
 		isListElement,
 		isSectionedMiniProfilesArticle,
+		shouldHideAds,
 	});
 
 	const needsFigure = !bareElements.has(element._type);