diff --git a/projects/packages/newsletter/changelog/add-newsletter-send-default-setting b/projects/packages/newsletter/changelog/add-newsletter-send-default-setting new file mode 100644 index 000000000000..5a1713bf7b51 --- /dev/null +++ b/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. diff --git a/projects/packages/newsletter/src/settings/index.tsx b/projects/packages/newsletter/src/settings/index.tsx index 2f21b9f2c577..192a7df837b0 100644 --- a/projects/packages/newsletter/src/settings/index.tsx +++ b/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 { - { ! isSimpleSite() && } + diff --git a/projects/packages/newsletter/src/settings/sections/newsletter-section.tsx b/projects/packages/newsletter/src/settings/sections/newsletter-section.tsx index f500fe6d9219..6ef0cae66190 100644 --- a/projects/packages/newsletter/src/settings/sections/newsletter-section.tsx +++ b/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 ( + + ); + }, + 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 ( @@ -88,7 +126,7 @@ export function NewsletterSection( { data, onChange }: NewsletterSectionProps ): type: 'regular', labelPosition: 'top', }, - fields: [ 'subscriptions' ], + fields: formFields, } } onChange={ handleChange } /> diff --git a/projects/packages/newsletter/src/settings/types.ts b/projects/packages/newsletter/src/settings/types.ts index 690e6eece5f1..1affd1c2ea20 100644 --- a/projects/packages/newsletter/src/settings/types.ts +++ b/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?: { diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx index 98a113719169..0441b9a51986 100644 --- a/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx +++ b/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 ) { + + + { __( 'Email new posts to subscribers by default', 'jetpack' ) } + + } + /> + + { getSubClickableCard() } ); @@ -145,6 +190,7 @@ export default withModuleSettingsFormHelpers( siteHasConnectedUser: hasConnectedOwner( state ), wpAdminSubscriberManagementEnabled: isWpAdminSubscriberManagementEnabled( state ), siteAdminUrl: getSiteAdminUrl( state ), + newsletterSendDefault: ownProps.getOptionValue( NEWSLETTER_SEND_DEFAULT_OPTION ), }; } )( Newsletter ) ); diff --git a/projects/plugins/jetpack/_inc/client/newsletter/test/component.js b/projects/plugins/jetpack/_inc/client/newsletter/test/component.js index f1b219d36895..56cc7b1db116 100644 --- a/projects/plugins/jetpack/_inc/client/newsletter/test/component.js +++ b/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( , { initialState } ); + expect( screen.getByText( 'Email new posts to subscribers by default' ) ).toBeInTheDocument(); + } ); + + it( 'is checked when newsletterSendDefault is true', () => { + render( , { 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( , { 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( , { initialState } ); + const toggle = screen.getByLabelText( 'Email new posts to subscribers by default' ); + expect( toggle ).not.toBeChecked(); + expect( toggle ).toBeDisabled(); + } ); + } ); } ); diff --git a/projects/plugins/jetpack/changelog/add-newsletter-send-default-setting b/projects/plugins/jetpack/changelog/add-newsletter-send-default-setting new file mode 100644 index 000000000000..f39177d9c5a9 --- /dev/null +++ b/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.