Merge branch 'main' into filter/carousel-card

Author: charleycampbell

ab-testing/config/abTests.ts

@@ -24,8 +24,8 @@ const ABTests: ABTest[] = [
 		name: "commercial-prebid-v10",
 		description: "Testing Prebid.js v10 integration on DCR",
 		owners: ["[email protected]"],
-		status: "OFF",
-		expirationDate: "2025-12-10",
+		status: "ON",
+		expirationDate: "2026-01-10",
 		type: "client",
 		audienceSize: 10 / 100,
 		audienceSpace: "A",

dotcom-rendering/.storybook/preview.ts

@@ -12,13 +12,19 @@ import { Picture } from '../src/components/Picture';
 import { mockFetch } from '../src/lib/mockRESTCalls';
 import { setABTests } from '../src/lib/useAB';
 import { ConfigContextDecorator } from './decorators/configContextDecorator';
+import { sb } from 'storybook/test';
 import { Preview } from '@storybook/react-webpack5';
 import {
 	globalColourScheme,
 	globalColourSchemeDecorator,
 } from './toolbar/globalColourScheme';
 import { palette as sourcePalette } from '@guardian/source/foundations';
 
+// Set up module mocking for auth and newsletter subscription hooks
+sb.mock(import('../src/lib/useNewsletterSubscription.ts'), { spy: true });
+sb.mock(import('../src/lib/useAuthStatus.ts'), { spy: true });
+sb.mock(import('../src/lib/fetchEmail.ts'), { spy: true });
+
 // Prevent components being lazy rendered when we're taking Chromatic snapshots
 Lazy.disabled = isChromatic();
 Picture.disableLazyLoading = isChromatic();
@@ -64,6 +70,7 @@ style.appendChild(document.createTextNode(css));
 		},
 		page: {
 			ajaxUrl: 'https://api.nextgen.guardianapps.co.uk',
+			idApiUrl: 'https://idapi.theguardian.com',
 		},
 		tests: {},
 		switches: {},

dotcom-rendering/docs/development/ab-testing-in-dcr.md

@@ -255,3 +255,20 @@ These links are also in the [frontend admin](https://frontend.gutools.co.uk/anal
 -   Opt-out on PROD: `https://theguardian.com/ab-tests/opt/out`
 
 You can use the same routes on CODE.
+
+### 6. Forcing yourself into a test locally
+
+Use the opt-in and opt-out URL fragments to force yourself into or out of a test using a query parameter.
+
+When opted-in, the test will override any mvt based assignment and you'll only be in the opted-in test group.
+
+**Opt-in Example**
+
+-   Articles: `http://localhost:3030/Article/?ab-commercial-test-example=variant`
+-   Fronts: `http://localhost:3030/Front/https://www.theguardian.com/international?ab-commercial-test-example=variant`
+-   Interactives: `http://localhost:3030/Interactive/https://www.theguardian.com/global-development/ng-interactive/2022/jun/09/the-black-sea-blockade-mapping-the-impact-of-war-in-ukraine-on-the-worlds-food-supply-interactive?ab--commercial-test-example=variant`
+
+You can verify that you're in the test by checking:
+
+-   Server-side tests: `window.guardian.config.serverSideABTests` in the browser console
+-   Client-side tests: `window.guardian.modules.abTests.getParticipations()` in the browser console

dotcom-rendering/fixtures/generated/match-report.ts

@@ -274,7 +274,7 @@ export const matchReport: MatchReportType = {
 		shotsOff: 6,
 		corners: 10,
 		fouls: 4,
-		colours: '#ffffff',
+		colours: '#01009a',
 		crest: 'https://sport.guim.co.uk/football/crests/120/7699.png',
 	},
 	awayTeam: {

dotcom-rendering/src/components/ArticleBody.tsx

@@ -55,6 +55,7 @@ type Props = {
 	isRightToLeftLang?: boolean;
 	shouldHideAds: boolean;
 	serverTime?: number;
+	idApiUrl?: string;
 };
 
 const globalOlStyles = () => css`
@@ -139,6 +140,7 @@ export const ArticleBody = ({
 	editionId,
 	shouldHideAds,
 	serverTime,
+	idApiUrl,
 }: Props) => {
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
@@ -208,6 +210,7 @@ export const ArticleBody = ({
 					editionId={editionId}
 					shouldHideAds={shouldHideAds}
 					serverTime={serverTime}
+					idApiUrl={idApiUrl}
 				/>
 			</div>
 		);
@@ -256,6 +259,7 @@ export const ArticleBody = ({
 					editionId={editionId}
 					contributionsServiceUrl={contributionsServiceUrl}
 					shouldHideAds={shouldHideAds}
+					idApiUrl={idApiUrl}
 				/>
 			</div>
 			{hasObserverPublicationTag && <ObserverFooter />}

dotcom-rendering/src/components/Caption.tsx

@@ -315,7 +315,7 @@ export const Caption = ({
 			]}
 			data-spacefinder-role="inline"
 		>
-			{mediaType === 'YoutubeVideo' ? (
+			{mediaType === 'YoutubeVideo' || mediaType === 'SelfHostedVideo' ? (
 				<VideoIcon format={format} />
 			) : (
 				<CameraIcon format={format} />

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

@@ -0,0 +1,77 @@
+import type { Breakpoint } from '@guardian/source/foundations';
+import { useNewsletterSubscription } from '../lib/useNewsletterSubscription';
+import type { EmailSignUpProps } from './EmailSignup';
+import { EmailSignup } from './EmailSignup';
+import { InlineSkipToWrapper } from './InlineSkipToWrapper';
+import { Island } from './Island';
+import { NewsletterPrivacyMessage } from './NewsletterPrivacyMessage';
+import { Placeholder } from './Placeholder';
+import { SecureSignup } from './SecureSignup.importable';
+
+/**
+ * Approximate heights of the EmailSignup component at different breakpoints.
+ */
+const PLACEHOLDER_HEIGHTS = new Map<Breakpoint, number>([
+	['mobile', 220],
+	['tablet', 180],
+	['desktop', 180],
+]);
+
+interface EmailSignUpWrapperProps extends EmailSignUpProps {
+	index: number;
+	listId: number;
+	identityName: string;
+	successDescription: string;
+	idApiUrl: string;
+	/** You should only set this to true if the privacy message will be shown elsewhere on the page */
+	hidePrivacyMessage?: boolean;
+}
+
+/**
+ * EmailSignUpWrapper as an importable island component.
+ *
+ * This component needs to be hydrated client-side because it uses
+ * the useNewsletterSubscription hook which depends on auth status
+ * to determine if the user is already subscribed to the newsletter.
+ *
+ * If the user is signed in and already subscribed, this component
+ * will return null (hide the signup form).
+ */
+export const EmailSignUpWrapper = ({
+	index,
+	listId,
+	idApiUrl,
+	...emailSignUpProps
+}: EmailSignUpWrapperProps) => {
+	const isSubscribed = useNewsletterSubscription(listId, idApiUrl);
+
+	// Show placeholder while subscription status is being determined
+	// This prevents layout shift in both subscribed and non-subscribed cases
+	if (isSubscribed === undefined) {
+		return <Placeholder heights={PLACEHOLDER_HEIGHTS} />;
+	}
+
+	// Don't render if user is signed in and already subscribed
+	if (isSubscribed) {
+		return null;
+	}
+
+	return (
+		<InlineSkipToWrapper
+			id={`EmailSignup-skip-link-${index}`}
+			blockDescription="newsletter promotion"
+		>
+			<EmailSignup {...emailSignUpProps}>
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<SecureSignup
+						newsletterId={emailSignUpProps.identityName}
+						successDescription={emailSignUpProps.description}
+					/>
+				</Island>
+				{!emailSignUpProps.hidePrivacyMessage && (
+					<NewsletterPrivacyMessage />
+				)}
+			</EmailSignup>
+		</InlineSkipToWrapper>
+	);
+};

dotcom-rendering/src/components/EmailSignUpWrapper.stories.tsx

@@ -1,35 +1,96 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { EmailSignUpWrapper } from './EmailSignUpWrapper';
+import { mocked } from 'storybook/test';
+import { lazyFetchEmailWithTimeout } from '../lib/fetchEmail';
+import { useIsSignedIn } from '../lib/useAuthStatus';
+import { useNewsletterSubscription } from '../lib/useNewsletterSubscription';
+import { EmailSignUpWrapper } from './EmailSignUpWrapper.importable';
 
 const meta: Meta<typeof EmailSignUpWrapper> = {
 	title: 'Components/EmailSignUpWrapper',
 	component: EmailSignUpWrapper,
 };
 
+type Story = StoryObj<typeof EmailSignUpWrapper>;
+
 const defaultArgs = {
 	index: 10,
+	listId: 4147,
 	identityName: 'the-recap',
 	description:
-		'The best of our sports journalism from the past seven days and a heads-up on the weekend’s action',
+		"The best of our sports journalism from the past seven days and a heads-up on the weekend's action",
 	name: 'The Recap',
 	frequency: 'Weekly',
 	successDescription: "We'll send you The Recap every week",
 	theme: 'sport',
+	idApiUrl: 'https://idapi.theguardian.com',
 } satisfies Story['args'];
-type Story = StoryObj<typeof EmailSignUpWrapper>;
 
+// Loading state - shows placeholder while auth status is being determined
+// This prevents layout shift when subscription status is resolved
+export const Placeholder: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+	},
+	async beforeEach() {
+		mocked(useNewsletterSubscription).mockReturnValue(undefined);
+	},
+};
+
+// Default story - signed out user sees the signup form with email input
 export const DefaultStory: Story = {
 	args: {
 		hidePrivacyMessage: true,
 		...defaultArgs,
 	},
+	async beforeEach() {
+		mocked(useNewsletterSubscription).mockReturnValue(false);
+		mocked(useIsSignedIn).mockReturnValue(false);
+		mocked(lazyFetchEmailWithTimeout).mockReturnValue(() =>
+			Promise.resolve(null),
+		);
+	},
 };
 
 export const DefaultStoryWithPrivacy: Story = {
 	args: {
 		hidePrivacyMessage: false,
 		...defaultArgs,
 	},
+	async beforeEach() {
+		mocked(useNewsletterSubscription).mockReturnValue(false);
+		mocked(useIsSignedIn).mockReturnValue(false);
+		mocked(lazyFetchEmailWithTimeout).mockReturnValue(() =>
+			Promise.resolve(null),
+		);
+	},
+};
+
+// User is signed in but NOT subscribed - email field is hidden, only signup button shows
+export const SignedInNotSubscribed: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+	},
+	async beforeEach() {
+		mocked(useNewsletterSubscription).mockReturnValue(false);
+		mocked(useIsSignedIn).mockReturnValue(true);
+		mocked(lazyFetchEmailWithTimeout).mockReturnValue(() =>
+			Promise.resolve('[email protected]'),
+		);
+	},
+};
+
+// User is signed in and IS subscribed - component returns null (hidden)
+// Note: This story will render nothing as the component returns null when subscribed
+export const SignedInAlreadySubscribed: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+	},
+	async beforeEach() {
+		mocked(useNewsletterSubscription).mockReturnValue(true);
+	},
 };
 
 export default meta;