Remove ad slot upgrade 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;
@@ -62,40 +55,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 +64,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 +73,6 @@ export const AdSlot = forwardRef<HTMLDivElement, Props>(
  css={isFirstAdSlot ? adSlotSquareStyles : adSlotStyles}
  ref={ref}
  ></div>
- <SupportBanner onClickSupportButton={onClickSupportButton} />
  </aside>
  ),
 );