14890 show or hide the sign up newsletter component

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,22 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { EmailSignUpWrapper } from './EmailSignUpWrapper';
+import { useEffect } from 'react';
+import type { EmailSignUpProps } from './EmailSignup';
+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>;
 
 export const DefaultStory: Story = {
 	args: {
@@ -32,4 +36,55 @@ export const DefaultStoryWithPrivacy: Story = {
 	},
 };
 
+// Simulates when user is NOT subscribed - signup form is visible
+export const NotSubscribedState: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+	},
+	decorators: [(Story) => <Story />],
+};
+
+// Simulates when user IS subscribed - component returns null
+interface EmailSignUpWrapperProps extends EmailSignUpProps {
+	index: number;
+	listId: number;
+	identityName: string;
+	successDescription: string;
+	hidePrivacyMessage?: boolean;
+}
+
+const AlreadySubscribedWrapper = (props: EmailSignUpWrapperProps) => {
+	// Directly use the hook logic - in a real scenario it would return true
+	// For storybook, we simulate by just returning null
+	const isSubscribed = true; // Simulating hook return value
+
+	useEffect(() => {
+		const idApiUrl =
+			typeof window !== 'undefined'
+				? window.guardian?.config?.page?.idApiUrl
+				: undefined;
+		console.log(
+			'AlreadySubscribedState: useNewsletterSubscription would return true',
+		);
+		console.log('Props:', { listId: props.listId, idApiUrl });
+	}, [props.listId]);
+
+	if (isSubscribed) {
+		return null;
+	}
+
+	return <EmailSignUpWrapper {...props} />;
+};
+
+export const AlreadySubscribedState = {
+	render: (args: EmailSignUpWrapperProps) => (
+		<AlreadySubscribedWrapper {...args} />
+	),
+	args: {
+		...defaultArgs,
+		hidePrivacyMessage: false,
+	},
+} satisfies Story;
+
 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':

dotcom-rendering/src/lib/useNewsletterSubscription.ts

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { getOptionsHeaders } from './identity';
+import { useAuthStatus } from './useAuthStatus';
+
+interface NewsletterSubscriptionResponse {
+	result: {
+		subscriptions: Array<{
+			listId: string;
+		}>;
+	};
+}
+
+/**
+ * A hook to check if a user is subscribed to a specific newsletter.
+ */
+export const useNewsletterSubscription = (
+	newsletterId: number,
+	idApiUrl: string | undefined,
+): boolean | undefined => {
+	const [isSubscribed, setIsSubscribed] = useState<boolean | undefined>(
+		undefined,
+	);
+
+	const authStatus = useAuthStatus();
+
+	useEffect(() => {
+		// Wait for auth to be determined
+		if (authStatus.kind === 'Pending') {
+			setIsSubscribed(undefined);
+			return;
+		}
+
+		// User is not signed in
+		if (authStatus.kind === 'SignedOut') {
+			setIsSubscribed(false);
+			return;
+		}
+
+		// No API URL available
+		if (idApiUrl === undefined || idApiUrl === '') {
+			setIsSubscribed(false);
+			return;
+		}
+
+		// At this point: authStatus.kind === 'SignedIn'
+
+		// User is signed in, fetch their newsletters
+		const fetchNewsletters = async () => {
+			try {
+				const options = getOptionsHeaders(authStatus);
+				const origin = window.location.origin;
+				const response = await fetch(
+					`${idApiUrl}/users/me/newsletters`,
+					{
+						method: 'GET',
+						credentials: 'include',
+						...options,
+						headers: {
+							...options.headers,
+							Origin: origin,
+							Referer: origin,
+						},
+					},
+				);
+
+				if (!response.ok) {
+					console.error('Failed to fetch user newsletters');
+					setIsSubscribed(false);
+					return;
+				}
+
+				const data: NewsletterSubscriptionResponse =
+					await response.json();
+
+				const newsletters = data.result?.subscriptions ?? [];
+
+				// If newsletter exists in the subscriptions array, user is subscribed
+				const isUserSubscribed = newsletters.some(
+					(n) => Number(n.listId) === newsletterId,
+				);
+
+				setIsSubscribed(isUserSubscribed);
+			} catch (error) {
+				console.error('Error fetching newsletters:', error);
+				setIsSubscribed(false);
+			}
+		};
+
+		void fetchNewsletters();
+	}, [authStatus, newsletterId, idApiUrl]);
+
+	return isSubscribed;
+};