Merge pull request #15027 from guardian/442-add-feature-flag-toggle-for-sign-up-component

added feature flag for signup component

Author: Marianaguardian

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

@@ -25,6 +25,8 @@ interface EmailSignUpWrapperProps extends EmailSignUpProps {
 	idApiUrl: string;
 	/** You should only set this to true if the privacy message will be shown elsewhere on the page */
 	hidePrivacyMessage?: boolean;
+	/** Feature flag to enable hiding newsletter signup for already subscribed users */
+	hideNewsletterSignupComponentForSubscribers?: boolean;
 }
 
 /**
@@ -41,9 +43,14 @@ export const EmailSignUpWrapper = ({
 	index,
 	listId,
 	idApiUrl,
+	hideNewsletterSignupComponentForSubscribers = false,
 	...emailSignUpProps
 }: EmailSignUpWrapperProps) => {
-	const isSubscribed = useNewsletterSubscription(listId, idApiUrl);
+	const isSubscribed = useNewsletterSubscription(
+		listId,
+		idApiUrl,
+		hideNewsletterSignupComponentForSubscribers,
+	);
 
 	// Show placeholder while subscription status is being determined
 	// This prevents layout shift in both subscribed and non-subscribed cases

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

@@ -83,14 +83,42 @@ export const SignedInNotSubscribed: Story = {
 
 // User is signed in and IS subscribed - component returns null (hidden)
 // Note: This story will render nothing as the component returns null when subscribed
+// Requires hideNewsletterSignupComponentForSubscribers: true to enable the subscription check
 export const SignedInAlreadySubscribed: Story = {
 	args: {
 		hidePrivacyMessage: false,
 		...defaultArgs,
+		hideNewsletterSignupComponentForSubscribers: true,
 	},
 	async beforeEach() {
 		mocked(useNewsletterSubscription).mockReturnValue(true);
 	},
 };
 
+// Feature flag disabled - always shows signup form regardless of subscription status
+// When hideNewsletterSignupComponentForSubscribers is false, the subscription check is skipped
+export const FeatureFlagDisabled: Story = {
+	args: {
+		hidePrivacyMessage: false,
+		...defaultArgs,
+		hideNewsletterSignupComponentForSubscribers: false,
+	},
+	async beforeEach() {
+		// Even though we mock this to return true (subscribed),
+		// the feature flag being disabled means it won't be checked
+		mocked(useNewsletterSubscription).mockReturnValue(false);
+		mocked(useIsSignedIn).mockReturnValue(true);
+		mocked(lazyFetchEmailWithTimeout).mockReturnValue(() =>
+			Promise.resolve('[email protected]'),
+		);
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'When the hideNewsletterSignupComponentForSubscribers feature flag is disabled, the signup form is always shown regardless of subscription status.',
+			},
+		},
+	},
+};
+
 export default meta;

dotcom-rendering/src/lib/renderElement.tsx

@@ -577,6 +577,8 @@ export const renderElement = ({
 				successDescription: element.newsletter.successDescription,
 				theme: element.newsletter.theme,
 				idApiUrl: idApiUrl ?? '',
+				hideNewsletterSignupComponentForSubscribers:
+					!!switches.hideNewsletterSignupComponentForSubscribers,
 			};
 			if (isListElement || isTimeline) return null;
 			return (