14890 show or hide the sign up newsletter component

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

@@ -0,0 +1,63 @@
+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' | 'Pending';
+	}
+}
+
+/**
+ * Decorator for pending auth state.
+ */
+export const pendingAuthDecorator: Decorator = (Story) => {
+	window.__STORYBOOK_AUTH_STATE__ = 'Pending';
+	return <Story />;
+};
+
+/**
+ * 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,144 @@
+/**
+ * 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' | 'Pending';
+	}
+}
+
+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: '[email protected]',
+		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,
+	},
+};
+
+type MockAuthState = {
+	isAuthenticated: boolean;
+	accessToken?: typeof mockAccessToken;
+	idToken?: typeof mockIdToken;
+};
+
+export async function getAuthState(): Promise<MockAuthState> {
+	const authState = window.__STORYBOOK_AUTH_STATE__ ?? 'SignedOut';
+
+	// For Pending state, return a promise that never resolves
+	// This keeps useAuthStatus in the 'Pending' state indefinitely for testing
+	if (authState === 'Pending') {
+		return new Promise<MockAuthState>(() => {});
+	}
+
+	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.importable.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+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([
+	['mobile', 220],
+	['tablet', 180],
+	['desktop', 180],
+] as const) as Map<'mobile' | 'tablet' | 'desktop', number>;
+
+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);
+
+	// 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,74 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { EmailSignUpWrapper } from './EmailSignUpWrapper';
+import {
+	pendingAuthDecorator,
+	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>;
 
+// Loading state - shows placeholder while auth status is being determined
+// This prevents layout shift when subscription status is resolved
+export const LoadingState: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+	},
+	decorators: [pendingAuthDecorator],
+};
+
+// 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;