Newsletter Signup Form - signed in and out

[georgerichmond]

What does this change?

Implements the signed-in and signed-out flows for the new NewsletterSignupForm component, closing issues #15678 and #15686.

New components & files

• NewsletterSignupForm.island.tsx — the new auth-aware signup form, replacing SecureSignup as the inner content of the newsletter signup card when showNewNewsletterSignupCard is enabled. Supports both signed-in (email pre-filled from Identity, email input hidden) and signed-out (email input visible) states in a single component.
• useNewsletterSignupForm.ts — a custom hook that encapsulates all form state and side-effects (email resolution, reCAPTCHA, Ophan tracking, form submission). Extracted from the component so that every visual state is trivially reproducible in Storybook by mocking a single hook, and to keep the component itself as a pure rendering layer.

Signed-in flow (closes #15678)

• Email is pre-filled from Identity; the email <input> is hidden
• "Sign up" button is shown; on success, displays "You're signed up!", the newsletter name & frequency, and a "Browse more newsletters" link
• Privacy message is rendered outside the card (below it), since the marketing toggle is not shown for signed-in users
• Ophan tracking reuses the same interaction lifecycle as SecureSignup

Signed-out flow (closes #15686)

• Email input with "Enter your email" label and a "Sign up" button
• Marketing opt-in toggle and privacy message are revealed when the email field is focused/interacted with
• Inline validation error shown for empty or incorrectly formatted email
• Same success state as the signed-in flow after submission completes
• Ophan tracking reuses the same interaction lifecycle as SecureSignup

Why a custom hook?

All form logic (email fetch, reCAPTCHA, marketing opt-in, Ophan tracking, submission, validation) lives in useNewsletterSignupForm. This separation means:

1. Storybook screenshots are easy — every visual state (idle, focused, loading, success, failure, validation error) can be covered by mocking the single hook return value, with no need to stub network requests or drive interactions.
2. The component stays thin — NewsletterSignupFormActive is purely a rendering layer, making it straightforward to review and maintain.

Refactored from SecureSignup

The submission and tracking logic (buildFormData, postFormData, sendTracking) has been lifted from SecureSignup.island.tsx and consolidated into useNewsletterSignupForm. SecureSignup was previously used as an intermediate placeholder inside the new card; it is now replaced by NewsletterSignupForm.

Other changes

• NewsletterSignupCardContainer updated to accept a render-prop children (so it can pass openPreview down), and now renders the privacy message outside the card when the user is signed in
• EmailSignUpWrapper wired up to pass isSignedIn and the new form props through to NewsletterSignupCardContainer
• renderElement.tsx prop name corrected (showNewsletterSignupCard → showNewNewsletterSignupCard)
• Minor NewsletterSignupCard style tweaks (illustration size, spacing)

Why?

Part of the rollout of the new newsletter signup card design. This PR delivers the complete signup experience for both signed-in and signed-out readers.

[github-actions]

Deploy build 26437 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 26437 of dotcom:rendering-all to CODE
• Deploy parts of build 26437 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 1297 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 1297 of dotcom:ab-testing to CODE
• Deploy parts of build 1297 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[mgosz-guardian]

2 comments. One v minor, other possibly worth looking at.

[mgosz-guardian]

This flag is set to false in the happy path. I think we might have a possible edge case when the recaptcha fails (due network issue for example) and the user could be stuck due to this flag not switched to false.

[rBangay]

Hey, I'm curious about the use of clear here. I guess traditionally this would have been paired with floated elements. But nowadays we tend to use flex box to handle similar layouts. It looks like we are using flex and not float, I"ve never seen clear used with flex before.

[georgerichmond]

It's needed to clear a floated element from the previous block in dynamic content in an article page - EmailSignup.tsx does it. However it's not needed on the container actually as it's on the divider above which was added recently. I've removed it from the container and kept it on the divider styles.

[gu-prout]

Seen on PROD (merged by @georgerichmond 10 minutes and 17 seconds ago) Please check your changes!