}
+ field={ field as Field< Record< string, unknown > > }
+ onChange={ fieldOnChange }
+ url={ `${ jetpackSettings.siteAdminUrl }options-general.php` }
+ linkText={ __( 'Customize date format', 'jetpack-newsletter' ) }
+ isExternal={ false }
+ />
+ )
+ : ( 'toggle' as const ),
+ },
+ ];
+
+ return (
+
+
+ { __( 'Email byline', 'jetpack-newsletter' ) }
+
+
+ { __(
+ 'Customize the information you want to display below your post title in emails.',
+ 'jetpack-newsletter'
+ ) }
+
+
+
+
+
+ { __( 'Email content', 'jetpack-newsletter' ) }
+
+
+ { ! isSitePublic && (
+
+ { __(
+ 'Featured images will not be used in your emails while the site is private, because access to the images is restricted to your site only.',
+ 'jetpack-newsletter'
+ ) }
+
+ ) }
+
+
+
+ );
+}
diff --git a/projects/packages/newsletter/src/settings/sections/email-reply-to-settings-section.tsx b/projects/packages/newsletter/src/settings/sections/email-reply-to-settings-section.tsx
new file mode 100644
index 0000000000000..2928ec48878ee
--- /dev/null
+++ b/projects/packages/newsletter/src/settings/sections/email-reply-to-settings-section.tsx
@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { DataForm, type Field } from '@wordpress/dataviews/wp';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import type { NewsletterSettings } from '../types';
+
+interface EmailReplyToSettingsSectionProps {
+ data: NewsletterSettings;
+ onChange: ( updates: Partial< NewsletterSettings > ) => void;
+ isNewsletterEnabled: boolean;
+}
+
+/**
+ * Email Reply-to Settings Section Component
+ *
+ * Handles the reply-to configuration for newsletter emails.
+ *
+ * @param {EmailReplyToSettingsSectionProps} props - Component props
+ * @return {JSX.Element} The email reply-to settings section
+ */
+export function EmailReplyToSettingsSection( {
+ data,
+ onChange,
+ isNewsletterEnabled,
+}: EmailReplyToSettingsSectionProps ): JSX.Element {
+ const fields: Field< NewsletterSettings >[] = [
+ {
+ id: 'jetpack_subscriptions_reply_to',
+ label: __( 'Reply-to settings', 'jetpack-newsletter' ),
+ type: 'text' as const,
+ Edit: 'radio' as const,
+ elements: [
+ {
+ value: 'comment',
+ label: __( 'Replies will be a public comment on the post', 'jetpack-newsletter' ),
+ },
+ {
+ value: 'author',
+ label: __( "Replies will be sent to the post author's email", 'jetpack-newsletter' ),
+ },
+ { value: 'no-reply', label: __( 'Replies are not allowed', 'jetpack-newsletter' ) },
+ ],
+ description: __(
+ "Choose who receives emails when subscribers reply to your newsletter. The author's account must be connected to WordPress.com to use their email as the reply-to address.",
+ 'jetpack-newsletter'
+ ),
+ },
+ ];
+
+ return (
+
+
+ { __( 'Reply-to settings', 'jetpack-newsletter' ) }
+
+
+
+
+ );
+}
diff --git a/projects/packages/newsletter/src/settings/sections/email-sender-settings-section.tsx b/projects/packages/newsletter/src/settings/sections/email-sender-settings-section.tsx
new file mode 100644
index 0000000000000..4f801256c3ad0
--- /dev/null
+++ b/projects/packages/newsletter/src/settings/sections/email-sender-settings-section.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { DataForm, type Field } from '@wordpress/dataviews/wp';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import type { NewsletterSettings, JetpackNewsletterSettings } from '../types';
+
+interface EmailSenderSettingsSectionProps {
+ data: NewsletterSettings;
+ onChange: ( updates: Partial< NewsletterSettings > ) => void;
+ onSave: () => void;
+ isSaving: boolean;
+ hasChanges: boolean;
+ jetpackSettings: JetpackNewsletterSettings | undefined;
+ isNewsletterEnabled: boolean;
+}
+
+/**
+ * Email Sender Settings Section Component
+ *
+ * Handles the sender name configuration for newsletter emails.
+ *
+ * @param {EmailSenderSettingsSectionProps} props - Component props
+ * @return {JSX.Element} The email sender settings section
+ */
+export function EmailSenderSettingsSection( {
+ data,
+ onChange,
+ onSave,
+ isSaving,
+ hasChanges,
+ jetpackSettings,
+ isNewsletterEnabled,
+}: EmailSenderSettingsSectionProps ): JSX.Element {
+ // Translation strings for save button
+ const savingText = __( 'Saving…', 'jetpack-newsletter' );
+ const saveText = __( 'Save', 'jetpack-newsletter' );
+
+ const fields: Field< NewsletterSettings >[] = [
+ {
+ id: 'jetpack_subscriptions_from_name',
+ label: __( 'Sender name', 'jetpack-newsletter' ),
+ type: 'text' as const,
+ description: __(
+ "This is the name that appears in subscribers' inboxes. It's usually the name of your newsletter or the author.",
+ 'jetpack-newsletter'
+ ),
+ },
+ ];
+
+ // Get the current sender name value
+ const senderName = data.jetpack_subscriptions_from_name || '';
+
+ return (
+
+
+ { __( 'Sender settings', 'jetpack-newsletter' ) }
+
+
+
+
+ { __( 'Preview:', 'jetpack-newsletter' ) }{ ' ' }
+
+ { senderName ||
+ jetpackSettings?.displayName ||
+ __( 'Your Name', 'jetpack-newsletter' ) }
+ { ' ' }
+ <comment-reply@wordpress.com>
+
+
+
+ { isSaving ? savingText : saveText }
+
+
+
+
+
+ { __( 'Newsletter categories', 'jetpack-newsletter' ) }
+
+
+ { createInterpolateElement(
+ __(
+ "Newsletter categories let you select the content that's emailed to subscribers. When enabled, only posts in the selected categories will be sent as newsletters. By default, subscribers can choose from your selected categories, or you can pre-select categories using the
+
+
+
+ { __( 'Add New Category', 'jetpack-newsletter' ) }
+
+
+ ) }
+
+
+
+ { isSaving ? savingText : saveText }
+
+
+
+
+
+ { __( 'Newsletter', 'jetpack-newsletter' ) }
+
+
+
+ { data.subscriptions && (
+
+
+ { __( 'Manage all subscribers', 'jetpack-newsletter' ) }
+
+
+ ) }
+
+
+
+ { __( 'Paid newsletter', 'jetpack-newsletter' ) }
+
+
+ { __(
+ 'Earn money through your Newsletter. Reward your most loyal subscribers with exclusive content or add a paywall to monetize content.',
+ 'jetpack-newsletter'
+ ) }
+
+
+
+ { __( 'Add Plans', 'jetpack-newsletter' ) }
+
+
+
+
+ { __( 'Subscriptions', 'jetpack-newsletter' ) }
+
+
+ { __(
+ 'Automatically add subscription forms to your site and turn visitors into subscribers.',
+ 'jetpack-newsletter'
+ ) }
+
+
+
+
+ { isSaving ? savingText : saveText }
+
+
+
+
+
+ { __( 'Welcome email message', 'jetpack-newsletter' ) }
+
+
+ { __(
+ 'Sent to your email subscribers when they subscribe to your newsletter.',
+ 'jetpack-newsletter'
+ ) }
+
+
+
+
+ { isSaving ? savingText : saveText }
+
+
+
+