Merge pull request #12539 from guardian/mob/remove-apps-ad-slot-place…

…holder

Remove ad slot support message from apps

apps-rendering/src/adSlot.tsx

@@ -1,14 +1,12 @@
 import type { SerializedStyles } from '@emotion/react';
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import type { ArticleFormat } from 'articleFormat';
 import {
 	from,
-	headlineMedium17,
 	remSpace,
 	textSans14,
 	until,
 } from '@guardian/source/foundations';
-import { Button, buttonThemeBrandAlt } from '@guardian/source/react-components';
 import { background, text } from 'palette';
 import type { ReactElement } from 'react';
 import { darkModeCss, wideContentWidth } from 'styles';
@@ -39,24 +37,6 @@ const adLabelsStyles = (format: ArticleFormat): SerializedStyles => css`
 	}
 `;
 
-const supportBannerStyles = (format: ArticleFormat): SerializedStyles => css`
-	padding: ${remSpace[3]};
-	background-color: ${background.supportBanner(format)};
-
-	p {
-		${headlineMedium17};
-		margin-top: 0;
-	}
-
-	button {
-		margin-top: ${remSpace[3]};
-	}
-
-	${darkModeCss`
-		background-color: ${background.supportBannerDark(format)};
-	`}
-`;
-
 const styles = (format: ArticleFormat): SerializedStyles => css`
 	clear: both;
 	margin: ${remSpace[4]} 0;
@@ -117,12 +97,6 @@ const AdSlot = ({ className, paragraph, format }: Props): ReactElement => (
 			<p>Advertisement</p>
 		</div>
 		<div css={adSlotStyles} className="ad-slot"></div>
-		<div css={supportBannerStyles(format)} className="support-banner">
-			<p>Support the Guardian and enjoy the app ad-free.</p>
-			<ThemeProvider theme={buttonThemeBrandAlt}>
-				<Button>Support the Guardian</Button>
-			</ThemeProvider>
-		</div>
 	</aside>
 );
 

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

@@ -1,17 +1,12 @@
 import { AdSlot as BridgetAdSlot } from '@guardian/bridget/AdSlot';
-import { PurchaseScreenReason } from '@guardian/bridget/PurchaseScreenReason';
 import type { IRect as BridgetRect } from '@guardian/bridget/Rect';
 import { isUndefined } from '@guardian/libs';
 import { breakpoints } from '@guardian/source/foundations';
 import type { Breakpoint } from '@guardian/source/foundations';
 import libDebounce from 'lodash.debounce';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import {
-	getAcquisitionsClient,
-	getCommercialClient,
-	getUserClient,
-} from '../lib/bridgetApi';
+import { getCommercialClient, getUserClient } from '../lib/bridgetApi';
 import { useMatchMedia } from '../lib/useMatchMedia';
 import {
 	adPlaceholderClass,
@@ -222,17 +217,10 @@ export const AdPortals = ({
 		return () => resizeObserver?.disconnect();
 	}, [adPlaceholders, rightAdPlaceholder, tryRightAligned]);
 
-	const handleClickSupportButton = () => {
-		void getAcquisitionsClient()
-			.launchPurchaseScreen(PurchaseScreenReason.hideAds)
-			.catch(() => console.error('Error launching purchase screen'));
-	};
-
 	const renderAdSlot = (id: string, index: number) => (
 		<AdSlot
 			key={id}
 			isFirstAdSlot={index === 0}
-			onClickSupportButton={handleClickSupportButton}
 			ref={(node) => {
 				if (node !== null) {
 					adSlots.current = [...adSlots.current, node];

dotcom-rendering/src/components/AdSlot.apps.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
 import { rightColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { allModes } from '../../.storybook/modes';
 import { AdSlot } from './AdSlot.apps';
@@ -19,9 +18,6 @@ const meta = {
 			defaultViewport: 'mobileMedium',
 		},
 	},
-	args: {
-		onClickSupportButton: fn(),
-	},
 } satisfies Meta<typeof AdSlot>;
 
 export default meta;

dotcom-rendering/src/components/AdSlot.apps.tsx

@@ -1,18 +1,11 @@
 import { css } from '@emotion/react';
-import {
-	remSpace,
-	textSans14,
-	textSans15,
-	until,
-} from '@guardian/source/foundations';
-import { Button } from '@guardian/source/react-components';
+import { remSpace, textSans14, until } from '@guardian/source/foundations';
 import { forwardRef } from 'react';
 import { palette } from '../palette';
 
 // Exported for Storybook use
 export interface Props {
 	isFirstAdSlot: boolean;
-	onClickSupportButton: () => void;
 }
 
 const adHeightPx = 258;
@@ -21,6 +14,10 @@ const styles = css`
 	clear: both;
 	margin: ${remSpace[4]} 0;
 	background: ${palette('--ad-background')};
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 
 	${until.phablet} {
 		margin: 1em 0px;
@@ -31,6 +28,8 @@ const adLabelsStyles = css`
 	${textSans14}
 	padding: ${remSpace[3]};
 	float: left;
+	display: flex;
+	justify-content: center;
 
 	/* We need to account for padding on both sides */
 	width: calc(100% - 2 * ${remSpace[3]});
@@ -47,6 +46,7 @@ const adLabelsStyles = css`
 const adSlotStyles = css`
 	clear: both;
 	padding-bottom: ${adHeightPx}px;
+	width: 100%;
 `;
 
 const adSlotSquareStyles = css`
@@ -62,40 +62,6 @@ const adSlotSquareStyles = css`
 	padding-bottom: 0;
 `;
 
-const supportBannerStyles = css`
-	padding: ${remSpace[2]};
-	background-color: ${palette('--ad-support-banner-background')};
-
-	p {
-		${textSans15};
-		color: ${palette('--ad-support-banner-text')};
-		font-weight: bold;
-		margin-top: 0;
-	}
-
-	button {
-		margin-top: ${remSpace[2]};
-		color: ${palette('--ad-support-banner-button-text')};
-		background-color: ${palette('--ad-support-banner-button-background')};
-	}
-`;
-
-/**
- * Support banner component, used at the bottom of the ad slot
- *
- * @todo Allow this to be used with web ad slots
- */
-const SupportBanner = ({
-	onClickSupportButton,
-}: Pick<Props, 'onClickSupportButton'>) => (
-	<div css={supportBannerStyles}>
-		<p>Enjoy the Guardian ad-free</p>
-		<Button size="xsmall" priority="primary" onClick={onClickSupportButton}>
-			Support the Guardian
-		</Button>
-	</div>
-);
-
 /**
  * AdSlot component for in-article ads **on apps only**
  *
@@ -105,7 +71,7 @@ const SupportBanner = ({
  * the native layer, for it to "paint" an advert over the top of it.
  */
 export const AdSlot = forwardRef<HTMLDivElement, Props>(
-	({ isFirstAdSlot, onClickSupportButton }, ref) => (
+	({ isFirstAdSlot }, ref) => (
 		<aside css={styles}>
 			<div css={adLabelsStyles}>
 				<p>Advertisement</p>
@@ -114,7 +80,6 @@ export const AdSlot = forwardRef<HTMLDivElement, Props>(
 				css={isFirstAdSlot ? adSlotSquareStyles : adSlotStyles}
 				ref={ref}
 			></div>
-			<SupportBanner onClickSupportButton={onClickSupportButton} />
 		</aside>
 	),
 );