14890 show or hide the sign up newsletter component

dotcom-rendering/.storybook/decorators/authDecorator.tsx

@@ -0,0 +1,55 @@
+import type { Decorator } from '@storybook/react-webpack5';
+import { customMockFetch } from '../../src/lib/mockRESTCalls';
+
+// Extend window type for auth state mock
+declare global {
+	interface Window {
+		__STORYBOOK_AUTH_STATE__?: 'SignedIn' | 'SignedOut';
+	}
+}
+
+/**
+ * Decorator for signed-out user state.
+ * Sets the auth state to 'SignedOut' so useAuthStatus returns { kind: 'SignedOut' }.
+ */
+export const signedOutDecorator: Decorator = (Story) => {
+	window.__STORYBOOK_AUTH_STATE__ = 'SignedOut';
+	return <Story />;
+};
+
+/**
+ * Creates a decorator for signed-in user state with custom newsletter subscriptions.
+ * Sets the auth state to 'SignedIn' and mocks the newsletters API response.
+ *
+ * @param subscriptions - Array of newsletter subscriptions to return from the API.
+ *                        Each subscription should have a `listId` string.
+ * @returns A Storybook decorator
+ *
+ * @example
+ * // User signed in but not subscribed to any newsletters
+ * decorators: [signedInDecorator([])]
+ *
+ * @example
+ * // User signed in and subscribed to newsletter with listId 4147
+ * decorators: [signedInDecorator([{ listId: '4147' }])]
+ */
+export const signedInDecorator = (
+	subscriptions: Array<{ listId: string }> = [],
+): Decorator => {
+	return (Story) => {
+		window.__STORYBOOK_AUTH_STATE__ = 'SignedIn';
+		window.fetch = customMockFetch([
+			{
+				mockedMethod: 'GET',
+				mockedUrl: /.*idapi\.theguardian\.com\/users\/me\/newsletters/,
+				mockedStatus: 200,
+				mockedBody: {
+					result: {
+						subscriptions,
+					},
+				},
+			},
+		]) as typeof window.fetch;
+		return <Story />;
+	};
+};

dotcom-rendering/.storybook/main.ts

@@ -122,6 +122,10 @@ const webpackConfig = (config: Configuration) => {
 		`${path.resolve(__dirname, '../src/lib/bridgetApi')}$`
 	] = path.resolve(__dirname, './mocks/bridgetApi.ts');
 
+	// Mock identity module for storybook to control auth state
+	config.resolve.alias[`${path.resolve(__dirname, '../src/lib/identity')}$`] =
+		path.resolve(__dirname, './mocks/identity.ts');
+
 	const webpackLoaders = getLoaders('client.web');
 
 	// https://swc.rs/docs/usage/swc-loader#with-babel-loader

dotcom-rendering/.storybook/mocks/identity.ts

@@ -0,0 +1,132 @@
+/**
+ * Mock identity module for Storybook.
+ *
+ * This allows stories to control the authentication state
+ * by setting window.__STORYBOOK_AUTH_STATE__ before rendering.
+ */
+
+import type { AuthStatus, SignedIn } from '../../src/lib/identity';
+
+// Extend window type for our mock
+declare global {
+	interface Window {
+		__STORYBOOK_AUTH_STATE__?: 'SignedIn' | 'SignedOut';
+	}
+}
+
+const mockAccessToken = {
+	expiresAt: Date.now() / 1000 + 3600,
+	scopes: ['openid', 'profile', 'email'],
+	clockSkew: 0,
+	accessToken: 'mock-access-token-for-storybook',
+	claims: {
+		aud: 'guardian-frontend',
+		auth_time: Date.now() / 1000,
+		cid: 'guardian-frontend',
+		exp: Date.now() / 1000 + 3600,
+		iat: Date.now() / 1000,
+		iss: 'https://profile.theguardian.com',
+		jti: 'mock-jti',
+		scp: ['openid', 'profile', 'email'],
+		sub: 'mock-user-id',
+		uid: 'mock-uid',
+		ver: 1,
+		email_validated: true,
+		identity_username: 'storybook-user',
+		legacy_identity_id: 'mock-legacy-id',
+		user_groups: [],
+	},
+	tokenType: 'Bearer' as const,
+};
+
+const mockIdToken = {
+	idToken: 'mock-id-token-for-storybook',
+	issuer: 'https://profile.theguardian.com',
+	clientId: 'guardian-frontend',
+	nonce: 'mock-nonce',
+	clockSkew: 0,
+	expiresAt: Date.now() / 1000 + 3600,
+	scopes: ['openid', 'profile', 'email'],
+	claims: {
+		aud: 'guardian-frontend',
+		auth_time: Date.now() / 1000,
+		exp: Date.now() / 1000 + 3600,
+		iat: Date.now() / 1000,
+		iss: 'https://profile.theguardian.com',
+		sub: 'mock-user-id',
+		identity_username: 'storybook-user',
+		email_validated: true,
+		email: 'storybook@example.com',
+		braze_uuid: 'mock-braze-uuid',
+		user_groups: [],
+		legacy_identity_id: 'mock-legacy-id',
+		amr: ['pwd'],
+		at_hash: 'mock-at-hash',
+		idp: 'guardian',
+		jti: 'mock-jti',
+		name: 'Storybook User',
+		nonce: 'mock-nonce',
+		ver: 1,
+	},
+};
+
+export async function getAuthState() {
+	const authState = window.__STORYBOOK_AUTH_STATE__ ?? 'SignedOut';
+
+	if (authState === 'SignedIn') {
+		return {
+			isAuthenticated: true,
+			accessToken: mockAccessToken,
+			idToken: mockIdToken,
+		};
+	}
+
+	return {
+		isAuthenticated: false,
+		accessToken: undefined,
+		idToken: undefined,
+	};
+}
+
+export function getSignedInStatus(authState: {
+	isAuthenticated: boolean;
+	accessToken?: typeof mockAccessToken;
+	idToken?: typeof mockIdToken;
+}): AuthStatus {
+	if (
+		authState.isAuthenticated &&
+		authState.accessToken &&
+		authState.idToken
+	) {
+		return {
+			kind: 'SignedIn',
+			accessToken: authState.accessToken,
+			idToken: authState.idToken,
+		} as unknown as SignedIn;
+	}
+
+	return { kind: 'SignedOut' };
+}
+
+export const getOptionsHeaders = (authStatus: SignedIn): RequestInit => {
+	return {
+		headers: {
+			Authorization: `Bearer ${authStatus.accessToken.accessToken}`,
+			'X-GU-IS-OAUTH': 'true',
+		},
+	};
+};
+
+export const isUserLoggedIn = (): Promise<boolean> =>
+	getAuthStatus().then((authStatus) =>
+		authStatus.kind === 'SignedIn' ? true : false,
+	);
+
+export const getAuthStatus = async (): Promise<AuthStatus> => {
+	const authState = await getAuthState();
+	return getSignedInStatus(authState);
+};
+
+export async function isSignedInAuthState() {
+	return getAuthState();
+}

dotcom-rendering/.storybook/preview.ts

@@ -64,6 +64,7 @@ style.appendChild(document.createTextNode(css));
 		},
 		page: {
 			ajaxUrl: 'https://api.nextgen.guardianapps.co.uk',
+			idApiUrl: 'https://idapi.theguardian.com',
 		},
 		tests: {},
 		switches: {},

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

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { useNewsletterSubscription } from '../lib/useNewsletterSubscription';
 import type { EmailSignUpProps } from './EmailSignup';
 import { EmailSignup } from './EmailSignup';
 import { InlineSkipToWrapper } from './InlineSkipToWrapper';
@@ -7,16 +9,39 @@ import { SecureSignup } from './SecureSignup.importable';
 
 interface EmailSignUpWrapperProps extends EmailSignUpProps {
 	index: number;
+	listId: number;
 	identityName: string;
 	successDescription: 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,
 	...emailSignUpProps
 }: EmailSignUpWrapperProps) => {
+	const [idApiUrl] = useState(() => {
+		if (typeof window === 'undefined') return undefined;
+		return window.guardian?.config?.page?.idApiUrl ?? undefined;
+	});
+	const isSubscribed = useNewsletterSubscription(listId, idApiUrl);
+
+	// Don't render if user is signed in and already subscribed
+	if (isSubscribed === true) {
+		return null;
+	}
+
 	return (
 		<InlineSkipToWrapper
 			id={`EmailSignup-skip-link-${index}`}

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

@@ -1,35 +1,63 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { EmailSignUpWrapper } from './EmailSignUpWrapper';
+import {
+	signedInDecorator,
+	signedOutDecorator,
+} from '../../.storybook/decorators/authDecorator';
+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',
 } satisfies Story['args'];
-type Story = StoryObj<typeof EmailSignUpWrapper>;
 
+// Default story - signed out user sees the signup form
 export const DefaultStory: Story = {
 	args: {
 		hidePrivacyMessage: true,
 		...defaultArgs,
 	},
+	decorators: [signedOutDecorator],
 };
 
 export const DefaultStoryWithPrivacy: Story = {
 	args: {
 		hidePrivacyMessage: false,
 		...defaultArgs,
 	},
+	decorators: [signedOutDecorator],
+};
+
+// User is signed in but NOT subscribed - signup form is visible
+export const SignedInNotSubscribed: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+	},
+	decorators: [signedInDecorator([])],
+};
+
+// 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,
+	},
+	decorators: [signedInDecorator([{ listId: String(defaultArgs.listId) }])],
 };
 
 export default meta;

dotcom-rendering/src/lib/renderElement.tsx

@@ -12,7 +12,7 @@ import { CommentBlockComponent } from '../components/CommentBlockComponent';
 import { CrosswordComponent } from '../components/CrosswordComponent.importable';
 import { DividerBlockComponent } from '../components/DividerBlockComponent';
 import { DocumentBlockComponent } from '../components/DocumentBlockComponent.importable';
-import { EmailSignUpWrapper } from '../components/EmailSignUpWrapper';
+import { EmailSignUpWrapper } from '../components/EmailSignUpWrapper.importable';
 import { EmbedBlockComponent } from '../components/EmbedBlockComponent.importable';
 import { ExplainerAtom } from '../components/ExplainerAtom';
 import { Figure } from '../components/Figure';
@@ -546,6 +546,7 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.NewsletterSignupBlockElement':
 			const emailSignUpProps = {
 				index,
+				listId: element.newsletter.listId,
 				identityName: element.newsletter.identityName,
 				description: element.newsletter.description,
 				name: element.newsletter.name,
@@ -554,7 +555,11 @@ export const renderElement = ({
 				theme: element.newsletter.theme,
 			};
 			if (isListElement || isTimeline) return null;
-			return <EmailSignUpWrapper {...emailSignUpProps} />;
+			return (
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<EmailSignUpWrapper {...emailSignUpProps} />
+				</Island>
+			);
 		case 'model.dotcomrendering.pageElements.AdPlaceholderBlockElement':
 			return renderAds && <AdPlaceholder />;
 		case 'model.dotcomrendering.pageElements.NumberedTitleBlockElement':