Newsletter: Add Send newsletter by default toggle to settings

projects/packages/newsletter/changelog/add-newsletter-send-default-setting

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Add Send newsletter by default toggle to Newsletter settings section.

projects/packages/newsletter/src/settings/index.tsx

@@ -9,7 +9,7 @@ import {
 	GlobalNotices,
 	useGlobalNotices,
 } from '@automattic/jetpack-components';
-import { getSiteType, isSimpleSite } from '@automattic/jetpack-script-data';
+import { getSiteType } from '@automattic/jetpack-script-data';
 import { Notice, Disabled, Spinner } from '@wordpress/components';
 import { createRoot, useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -391,7 +391,7 @@ function NewsletterSettingsApp(): JSX.Element | null {
 			<Container horizontalSpacing={ 3 }>
 				<Col>
 					<Stack gap="md" direction="column" className="newsletter-settings">
-						{ ! isSimpleSite() && <NewsletterSection data={ data } onChange={ handleAutoSave } /> }
+						<NewsletterSection data={ data } onChange={ handleAutoSave } />
 
 						<Disabled isDisabled={ ! data.subscriptions }>
 							<Stack gap="md" direction="column">

projects/packages/newsletter/src/settings/sections/newsletter-section.tsx

@@ -3,13 +3,14 @@
  */
 import analytics from '@automattic/jetpack-analytics';
 import { getRedirectUrl } from '@automattic/jetpack-components';
-import { getSiteType } from '@automattic/jetpack-script-data';
+import { getSiteType, isSimpleSite } from '@automattic/jetpack-script-data';
 import {
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
 	ExternalLink,
+	ToggleControl,
 	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { DataForm, type Field } from '@wordpress/dataviews/wp';
@@ -63,17 +64,54 @@ export function NewsletterSection( { data, onChange }: NewsletterSectionProps ):
 	}, [ siteType ] );
 
 	const fields: Field< NewsletterSettings >[] = [
+		...( ! isSimpleSite()
+			? [
+					{
+						id: 'subscriptions',
+						label: __(
+							'Let visitors subscribe to this site and receive emails when you publish a post',
+							'jetpack-newsletter'
+						),
+						type: 'boolean' as const,
+						Edit: 'toggle' as const,
+					},
+			  ]
+			: [] ),
 		{
-			id: 'subscriptions',
-			label: __(
-				'Let visitors subscribe to this site and receive emails when you publish a post',
+			id: 'wpcom_newsletter_send_default',
+			label: __( 'Email new posts to subscribers by default', 'jetpack-newsletter' ),
+			type: 'boolean' as const,
+			Edit( { field, onChange: onChangeField, data: formData } ) {
+				const handleToggle = useCallback( () => {
+					onChangeField(
+						field.setValue( {
+							item: formData,
+							value: ! field.getValue( { item: formData } ),
+						} )
+					);
+				}, [ onChangeField, field, formData ] );
+				return (
+					<ToggleControl
+						label={ field.label }
+						help={ field.description }
+						checked={ !! field.getValue( { item: formData } ) }
+						onChange={ handleToggle }
+						disabled={ ! isSimpleSite() && ! formData.subscriptions }
+					/>
+				);
+			},
+			description: __(
+				'When on, the newsletter option will be pre-selected each time you publish. You can change it in the newsletter panel in the editor before publishing any post.',
 				'jetpack-newsletter'
 			),
-			type: 'boolean' as const,
-			Edit: 'toggle' as const,
 		},
 	];
 
+	const formFields = [
+		...( ! isSimpleSite() ? [ 'subscriptions' ] : [] ),
+		'wpcom_newsletter_send_default',
+	];
+
 	return (
 		<Card>
 			<CardHeader>
@@ -88,7 +126,7 @@ export function NewsletterSection( { data, onChange }: NewsletterSectionProps ):
 							type: 'regular',
 							labelPosition: 'top',
 						},
-						fields: [ 'subscriptions' ],
+						fields: formFields,
 					} }
 					onChange={ handleChange }
 				/>

projects/packages/newsletter/src/settings/types.ts

@@ -22,6 +22,7 @@ export interface NewsletterSettings {
 	jetpack_post_date_in_email: boolean;
 	jetpack_subscriptions_reply_to: 'comment' | 'author' | 'no-reply';
 	jetpack_subscriptions_from_name: string;
+	wpcom_newsletter_send_default: boolean;
 	wpcom_newsletter_categories_enabled: boolean;
 	wpcom_newsletter_categories: string[];
 	subscription_options?: {

projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx

@@ -1,4 +1,4 @@
-import { getRedirectUrl } from '@automattic/jetpack-components';
+import { getRedirectUrl, ToggleControl } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { connect } from 'react-redux';
@@ -19,6 +19,8 @@ import { isWpAdminSubscriberManagementEnabled, getSiteAdminUrl } from 'state/ini
 import { getModule } from 'state/modules';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
 
+const NEWSLETTER_SEND_DEFAULT_OPTION = 'wpcom_newsletter_send_default';
+
 const trackViewSubsClick = () => {
 	analytics.tracks.recordJetpackClick( 'manage-subscribers' );
 };
@@ -41,7 +43,9 @@ function Newsletter( props ) {
 		siteHasConnectedUser,
 		wpAdminSubscriberManagementEnabled,
 		siteAdminUrl,
+		newsletterSendDefault,
 		updateOptions,
+		updateFormStateAndSaveOptionValue,
 		getOptionValue,
 		refreshSettings,
 	} = props;
@@ -71,6 +75,14 @@ function Newsletter( props ) {
 		);
 	};
 
+	const handleEmailPostToSubsDefaultToggle = useCallback( () => {
+		const newValue = ! newsletterSendDefault;
+		updateFormStateAndSaveOptionValue( NEWSLETTER_SEND_DEFAULT_OPTION, newValue );
+		analytics.tracks.recordEvent( 'jetpack_set_wpcom_newsletter_send_default', {
+			enabled: newValue,
+		} );
+	}, [ newsletterSendDefault, updateFormStateAndSaveOptionValue ] );
+
 	const toggleModule = useCallback(
 		module => {
 			const status = getOptionValue( module );
@@ -129,6 +141,39 @@ function Newsletter( props ) {
 				</ModuleToggle>
 			</SettingsGroup>
 
+			<SettingsGroup
+				hasChild
+				disableInOfflineMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
+				module={ subscriptions }
+				support={ {
+					text: __(
+						'When on, the newsletter option will be pre-selected each time you publish. You can change it in the newsletter panel in the editor before publishing any post.',
+						'jetpack'
+					),
+					link: getRedirectUrl( 'jetpack-support-subscriptions', {
+						anchor: 'post-email-vs-post-only-options',
+					} ),
+				} }
+			>
+				<ToggleControl
+					checked={ isSubscriptionsActive && !! newsletterSendDefault }
+					disabled={
+						! isSubscriptionsActive ||
+						! siteHasConnectedUser ||
+						unavailableInOfflineMode ||
+						isSavingAnyOption( [ SUBSCRIPTIONS_MODULE_NAME, NEWSLETTER_SEND_DEFAULT_OPTION ] )
+					}
+					toggling={ isSavingAnyOption( [ NEWSLETTER_SEND_DEFAULT_OPTION ] ) }
+					onChange={ handleEmailPostToSubsDefaultToggle }
+					label={
+						<span className="jp-form-toggle-explanation">
+							{ __( 'Email new posts to subscribers by default', 'jetpack' ) }
+						</span>
+					}
+				/>
+			</SettingsGroup>
+
 			{ getSubClickableCard() }
 		</SettingsCard>
 	);
@@ -145,6 +190,7 @@ export default withModuleSettingsFormHelpers(
 			siteHasConnectedUser: hasConnectedOwner( state ),
 			wpAdminSubscriberManagementEnabled: isWpAdminSubscriberManagementEnabled( state ),
 			siteAdminUrl: getSiteAdminUrl( state ),
+			newsletterSendDefault: ownProps.getOptionValue( NEWSLETTER_SEND_DEFAULT_OPTION ),
 		};
 	} )( Newsletter )
 );

projects/plugins/jetpack/_inc/client/newsletter/test/component.js

@@ -23,7 +23,9 @@ describe( 'Newsletter', () => {
 		wpAdminSubscriberManagementEnabled: true,
 		siteAdminUrl: 'https://example.org/wp-admin/',
 		getOptionValue: () => true,
+		newsletterSendDefault: true,
 		updateOptions: jest.fn().mockResolvedValue( {} ),
+		updateFormStateAndSaveOptionValue: jest.fn(),
 		refreshSettings: jest.fn(),
 	};
 
@@ -116,4 +118,38 @@ describe( 'Newsletter', () => {
 			expect( screen.getByRole( 'link', { name: 'Manage all subscribers' } ) ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Email new posts to subscribers by default toggle', () => {
+		it( 'renders the toggle', () => {
+			render( <Newsletter { ...defaultProps } />, { initialState } );
+			expect( screen.getByText( 'Email new posts to subscribers by default' ) ).toBeInTheDocument();
+		} );
+
+		it( 'is checked when newsletterSendDefault is true', () => {
+			render( <Newsletter { ...defaultProps } />, { initialState } );
+			const toggle = screen.getByLabelText( 'Email new posts to subscribers by default' );
+			expect( toggle ).toBeChecked();
+		} );
+
+		it( 'is unchecked when newsletterSendDefault is false', () => {
+			const propsWithSendDefaultFalse = {
+				...defaultProps,
+				getOptionValue: option => ( option === 'wpcom_newsletter_send_default' ? false : true ),
+			};
+			render( <Newsletter { ...propsWithSendDefaultFalse } />, { initialState } );
+			const toggle = screen.getByLabelText( 'Email new posts to subscribers by default' );
+			expect( toggle ).not.toBeChecked();
+		} );
+
+		it( 'is disabled and unchecked when subscriptions are inactive', () => {
+			const propsWithSubscriptionsInactive = {
+				...defaultProps,
+				getOptionValue: option => ( option === 'subscriptions' ? false : true ),
+			};
+			render( <Newsletter { ...propsWithSubscriptionsInactive } />, { initialState } );
+			const toggle = screen.getByLabelText( 'Email new posts to subscribers by default' );
+			expect( toggle ).not.toBeChecked();
+			expect( toggle ).toBeDisabled();
+		} );
+	} );
 } );

projects/plugins/jetpack/changelog/add-newsletter-send-default-setting

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Newsletter: Add Send newsletter by default toggle to settings.