Show error notice when categories are enabled but not selected.

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

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
+import { createNotice } from 'components/global-notices/state/notices/actions';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
@@ -39,7 +40,6 @@ const mapCategoriesIds = category => {
  */
 function NewsletterCategories( props ) {
 	const {
-		updateFormStateModuleOption,
 		isSubscriptionsActive,
 		isNewsletterCategoriesEnabled,
 		newsletterCategories,
@@ -49,12 +49,9 @@ function NewsletterCategories( props ) {
 		updateFormStateOptionValue,
 		isSavingAnyOption,
 		siteHasConnectedUser,
+		dispatch,
 	} = props;
 
-	const handleEnableNewsletterCategoriesToggleChange = useCallback( () => {
-		updateFormStateModuleOption( SUBSCRIPTIONS_MODULE_NAME, NEWSLETTER_CATEGORIES_ENABLED_OPTION );
-	}, [ updateFormStateModuleOption ] );
-
 	const checkedCategoriesIds = newsletterCategories.map( mapCategoriesIds );
 
 	const mappedCategories = useMemo(
@@ -82,13 +79,41 @@ function NewsletterCategories( props ) {
 		[ checkedCategoriesIds, updateFormStateOptionValue ]
 	);
 
+	const handleEnableNewsletterCategoriesToggleChange = useCallback( () => {
+		updateFormStateOptionValue(
+			NEWSLETTER_CATEGORIES_ENABLED_OPTION,
+			! isNewsletterCategoriesEnabled
+		);
+	}, [ updateFormStateOptionValue, isNewsletterCategoriesEnabled ] );
+
 	const isSaving = isSavingAnyOption( [
 		NEWSLETTER_CATEGORIES_ENABLED_OPTION,
 		NEWSLETTER_CATEGORIES_OPTION,
 	] );
 	const disabled =
 		! siteHasConnectedUser || ! isSubscriptionsActive || unavailableInOfflineMode || isSaving;
 
+	const handleSubmitForm = useCallback(
+		event => {
+			if ( isNewsletterCategoriesEnabled && checkedCategoriesIds.length === 0 ) {
+				event.preventDefault();
+				dispatch(
+					createNotice(
+						'is-error',
+						__(
+							'Please select at least one category when newsletter categories are enabled.',
+							'jetpack'
+						),
+						{ id: 'newsletter-categories-error' }
+					)
+				);
+				return;
+			}
+			props.onSubmit?.( event );
+		},
+		[ isNewsletterCategoriesEnabled, checkedCategoriesIds, props, dispatch ]
+	);
+
 	return (
 		<SettingsCard
 			{ ...props }
@@ -97,6 +122,7 @@ function NewsletterCategories( props ) {
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 			saveDisabled={ isSaving }
 			isDisabled={ disabled }
+			onSubmit={ handleSubmitForm }
 		>
 			<SettingsGroup
 				hasChild
@@ -179,6 +205,7 @@ export default withModuleSettingsFormHelpers(
 			requiresConnection: requiresConnection( state, SUBSCRIPTIONS_MODULE_NAME ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
 			siteHasConnectedUser: hasConnectedOwner( state ),
+			dispatch: ownProps.dispatch,
 		};
 	} )( NewsletterCategories )
 );