Newsletter: Implement comprehensive settings UI with DataForm

projects/packages/newsletter/changelog/dotcom-15286-build-out-the-settings-screen

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Implement comprehensive newsletter settings UI with DataForm-based interface, toggle controls, and card-based design

projects/packages/newsletter/package.json

@@ -32,9 +32,14 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
+		"@automattic/jetpack-api": "workspace:*",
+		"@automattic/jetpack-components": "workspace:*",
+		"@wordpress/components": "30.8.0",
 		"@wordpress/dataviews": "10.2.0",
 		"@wordpress/element": "6.35.0",
 		"@wordpress/i18n": "6.8.0",
+		"@wordpress/notices": "5.35.0",
+		"@wordpress/url": "4.35.0",
 		"debug": "4.4.1"
 	},
 	"devDependencies": {

projects/packages/newsletter/src/class-settings.php

@@ -123,6 +123,69 @@
 				'enqueue'    => true,
 			)
 		);
+
+		wp_add_inline_script(
+			'jetpack-newsletter',
+			'window.jetpackNewsletterSettings = ' . wp_json_encode( $this->get_settings_data() ) . ';',
+			'before'
+		);
+	}
+
+	/**
+	 * Get the data to be passed to the newsletter settings page.
+	 *
+	 * @return array
+	 */
+	private function get_settings_data() {
+		$current_user = wp_get_current_user();
+		$theme        = wp_get_theme();
+
+		// Get blog ID if available (for WordPress.com sites).
+		$blog_id = defined( 'Jetpack_Options' ) && class_exists( 'Jetpack_Options' )
+			? \Jetpack_Options::get_option( 'id', 0 )
+			: 0;
+
+		// Get site URL without protocol.
+		$site_url     = get_site_url();
+		$site_raw_url = preg_replace( '(^https?://)', '', $site_url );
+
+		return array(
+			'isBlockTheme'      => wp_is_block_theme(),
+			'siteAdminUrl'      => admin_url(),
+			'themeStylesheet'   => $theme->get_stylesheet(),
+			'blogID'            => $blog_id,
+			'siteRawUrl'        => $site_raw_url,
+			'email'             => $current_user->user_email,
+			'gravatar'          => get_avatar_url( $current_user->ID ),
+			'displayName'       => $current_user->display_name,
+			'wpAdminSubscriberManagementEnabled' => apply_filters( 'jetpack_wpcom_subscriber_management_enabled', false ),
+			'isSubscriptionSiteEditSupported'    => wp_is_block_theme(),
+			'setupPaymentPlansUrl' => $this->get_jetpack_cloud_url( 'monetize/payments' ),
+			'isSitePublic'      => (int) get_option( 'blog_public' ) === 1,
+		);
+	}
+
+	/**
+	 * Get a Jetpack Cloud URL.
+	 *
+	 * @param string $path The path to append to the Jetpack Cloud URL.
+	 * @return string
+	 */
+	private function get_jetpack_cloud_url( $path = '' ) {
+		$site_suffix = '';
+		if ( defined( 'Jetpack_Options' ) && class_exists( 'Jetpack_Options' ) ) {
+			$blog_id = \Jetpack_Options::get_option( 'id', 0 );
+			if ( $blog_id ) {
+				$site_suffix = $blog_id;
+			}
+		}
+
+		if ( ! $site_suffix ) {
+			$site_url    = get_site_url();
+			$site_suffix = preg_replace( '(^https?://)', '', $site_url );
+		}
+
+		return 'https://cloud.jetpack.com/' . ltrim( $path, '/' ) . '/' . $site_suffix;
 	}
 
 	/**

projects/packages/newsletter/src/settings/components/header.scss

@@ -0,0 +1,17 @@
+.newsletter-settings__header {
+	margin-bottom: 2em;
+
+	&-top {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+	}
+}
+
+.newsletter-settings__title {
+	margin: 0;
+}
+
+.newsletter-settings__tagline {
+	margin: 8px 0 0;
+}

projects/packages/newsletter/src/settings/components/header.tsx

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { JetpackLogo } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './header.scss';
+
+/**
+ * Newsletter Settings Header Component
+ *
+ * @return {JSX.Element} The header component.
+ */
+export function Header(): JSX.Element {
+	return (
+		<header className="newsletter-settings__header">
+			<div className="newsletter-settings__header-top">
+				<JetpackLogo showText={ false } width={ 20 } />
+				<h1 className="newsletter-settings__title">
+					{ __( 'Newsletter Settings', 'jetpack-newsletter' ) }
+				</h1>
+			</div>
+			<p className="newsletter-settings__tagline">
+				{ __(
+					'Transform your blog posts into newsletters to easily reach your subscribers.',
+					'jetpack-newsletter'
+				) }
+			</p>
+		</header>
+	);
+}

projects/packages/newsletter/src/settings/components/toggle-with-link.scss

@@ -0,0 +1,5 @@
+.toggle-with-link__label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5em;
+}

projects/packages/newsletter/src/settings/components/toggle-with-link.tsx

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import { ExternalLink, ToggleControl } from '@wordpress/components';
+import { type Field } from '@wordpress/dataviews';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import './toggle-with-link.scss';
+
+interface ToggleWithLinkProps {
+	data: Record< string, unknown >;
+	field: Field< Record< string, unknown > >;
+	onChange: ( updates: Record< string, unknown > ) => void;
+	url: string;
+	linkText: string;
+}
+
+/**
+ * Generic toggle control with an external link in the label
+ *
+ * @param {object}   props          - Component props
+ * @param {object}   props.data     - The data object
+ * @param {object}   props.field    - The field definition
+ * @param {Function} props.onChange - Change handler
+ * @param {string}   props.url      - URL for the external link
+ * @param {string}   props.linkText - Text for the link
+ * @return {JSX.Element} The toggle control with link
+ */
+function ToggleWithLink( {
+	data,
+	field,
+	onChange,
+	url,
+	linkText,
+}: ToggleWithLinkProps ): JSX.Element {
+	const handleChange = useCallback( () => {
+		onChange( { [ field.id ]: ! data[ field.id ] } );
+	}, [ data, field.id, onChange ] );
+
+	return (
+		<ToggleControl
+			checked={ !! data[ field.id ] }
+			onChange={ handleChange }
+			label={
+				<span className="toggle-with-link__label">
+					{ field.label }
+					<ExternalLink href={ url }>{ linkText }</ExternalLink>
+				</span>
+			}
+		/>
+	);
+}
+
+interface ToggleWithEditorLinkProps {
+	data: Record< string, unknown >;
+	field: Field< Record< string, unknown > >;
+	onChange: ( updates: Record< string, unknown > ) => void;
+	siteAdminUrl: string;
+	themeStylesheet: string;
+	postType: 'wp_template' | 'wp_template_part';
+	templateId: string;
+}
+
+/**
+ * Toggle control with a "Preview and edit" link to the site editor
+ *
+ * @param {object}   props                 - Component props
+ * @param {object}   props.data            - The data object
+ * @param {object}   props.field           - The field definition
+ * @param {Function} props.onChange        - Change handler
+ * @param {string}   props.siteAdminUrl    - Site admin URL
+ * @param {string}   props.themeStylesheet - Theme stylesheet name
+ * @param {string}   props.postType        - Post type (wp_template or wp_template_part)
+ * @param {string}   props.templateId      - Template ID
+ * @return {JSX.Element} The toggle control with editor link
+ */
+export function ToggleWithEditorLink( {
+	data,
+	field,
+	onChange,
+	siteAdminUrl,
+	themeStylesheet,
+	postType,
+	templateId,
+}: ToggleWithEditorLinkProps ): JSX.Element {
+	const url = addQueryArgs( `${ siteAdminUrl }site-editor.php`, {
+		postType,
+		postId: `${ themeStylesheet }//${ templateId }`,
+		canvas: 'edit',
+	} );
+
+	return (
+		<ToggleWithLink
+			data={ data }
+			field={ field }
+			onChange={ onChange }
+			url={ url }
+			linkText={ __( 'Preview and edit', 'jetpack-newsletter' ) }
+		/>
+	);
+}