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 26406 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.