diff --git a/client/my-sites/site-settings/settings-newsletter/main.tsx b/client/my-sites/site-settings/settings-newsletter/main.tsx index 334feee831ee41..9a1d06921d7e90 100644 --- a/client/my-sites/site-settings/settings-newsletter/main.tsx +++ b/client/my-sites/site-settings/settings-newsletter/main.tsx @@ -118,6 +118,7 @@ type NewsletterSettingsFormProps = { isSavingSettings: boolean; settings: { subscription_options?: SubscriptionOptions }; updateFields: ( fields: Fields ) => void; + errorNotice: ( text: string ) => void; }; const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( { @@ -128,6 +129,7 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( { isSavingSettings, settings, updateFields, + errorNotice, }: NewsletterSettingsFormProps ) => { const translate = useTranslate(); const siteId = useSelector( getSelectedSiteId ); @@ -185,15 +187,31 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( { scrollToAnchor( { offset: 15 } ); }, [ savedSubscriptionOptions, updateFields ] ); + const onSubmit = ( event?: React.FormEvent | React.MouseEvent ) => { + event?.preventDefault(); + + if ( + fields.wpcom_newsletter_categories_enabled && + ! fields.wpcom_newsletter_categories?.length + ) { + errorNotice( + translate( 'Please select at least one category when newsletter categories are enabled.' ) + ); + return; + } + + handleSubmitForm(); + }; + return ( -
+ { siteId && } @@ -252,7 +270,7 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( { disabled={ disabled } id="email-settings" isSaving={ isSavingSettings } - onButtonClick={ handleSubmitForm } + onButtonClick={ onSubmit } showButton title={ translate( 'Email' ) } /> @@ -299,7 +317,7 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( { id="newsletter-categories-settings" title={ translate( 'Newsletter categories' ) } showButton - onButtonClick={ handleSubmitForm } + onButtonClick={ onSubmit } disabled={ disabled } isSaving={ isSavingSettings } /> @@ -314,7 +332,7 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( { disabled={ disabled } id="messages" isSaving={ isSavingSettings } - onButtonClick={ handleSubmitForm } + onButtonClick={ onSubmit } showButton title={ translate( 'Messages' ) } /> diff --git a/client/my-sites/site-settings/settings-newsletter/newsletter-categories-section/newsletter-categories-section.tsx b/client/my-sites/site-settings/settings-newsletter/newsletter-categories-section/newsletter-categories-section.tsx index 82814d9475c85b..4ce017bc27b79d 100644 --- a/client/my-sites/site-settings/settings-newsletter/newsletter-categories-section/newsletter-categories-section.tsx +++ b/client/my-sites/site-settings/settings-newsletter/newsletter-categories-section/newsletter-categories-section.tsx @@ -3,6 +3,7 @@ import clsx from 'clsx'; import { useTranslate } from 'i18n-calypso'; import React from 'react'; import TermTreeSelector from 'calypso/blocks/term-tree-selector'; +import FormLegend from 'calypso/components/forms/form-legend'; import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation'; import NewsletterCategoriesToggle from './newsletter-categories-toggle'; import './style.scss'; @@ -44,6 +45,11 @@ const NewsletterCategoriesSection = ( { ) } aria-hidden={ ! newsletterCategoriesEnabled } > + + { translate( + 'Which categories will you use for newsletter subscribers? Select all that apply:' + ) } +