Add the Welcome Email Message setting to Newsletter settings (#35621)

* Added welcome email message management to Newsletter settings * changelog * Fix blocked text field * Make check before merging array * Creating the subscription_options object before callingi onOptionChange
Automattic · Feb 19, 2024 · 63668e3 · 63668e3
1 parent 30673bb
commit 63668e3
Show file tree

Hide file tree

Showing 6 changed files with 226 additions and 80 deletions.
diff --git a/...gins/jetpack/_inc/client/components/module-settings/with-module-settings-form-helpers.jsx b/...gins/jetpack/_inc/client/components/module-settings/with-module-settings-form-helpers.jsx
@@ -205,6 +205,7 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 					isSavingAnyOption={ this.isSavingAnyOption }
 					isDirty={ this.isDirty }
 					resetFormStateOption={ this.resetFormStateOption }
+					optionsState={ this.state.options }
 					{ ...this.props }
 				/>
 			);

diff --git a/projects/plugins/jetpack/_inc/client/components/settings-group/style.scss b/projects/plugins/jetpack/_inc/client/components/settings-group/style.scss
@@ -10,18 +10,26 @@
 		&.jp-settings-card__blocks-description {
 			margin-bottom: 0;
 		}
+
+		&.jp-settings-card__email-settings {
+			margin-bottom: 0.7rem;
+		}
 	}
+
 	fieldset p:last-child {
 		margin-bottom: 8px;
 	}
+
 	.form-toggle__label {
 		margin-top: rem( 4px );
 		margin-bottom: rem( 4px );
 	}
+
 	.form-toggle__switch {
 		float: left;
 		margin-top: 2px;
 	}
+
 	.jp-form-setting-explanation {
 		color: $gray-text-min;
 		display: block;
@@ -43,10 +51,13 @@
 			text-decoration: underline;
 		}
 	}
+
 	.dops-foldable-card & {
 		/* padding-bottom: 16px; */
 	}
-	.dops-card  {
+
+	.dops-card {
+		padding-top: 0.7rem;
 		padding-right: rem( 48px );
 	}
 
@@ -57,6 +68,7 @@
 		& + p {
 			margin-top: 2px;
 		}
+
 		& + span {
 			padding-top: 2px;
 			display: block;
@@ -80,4 +92,8 @@
 	&.foldable-wrapper > .dops-card {
 		padding: 0;
 	}
-}
+
+	.email-settings__title {
+		margin-bottom: 0.3rem;
+	}
+}
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx
@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import Card from 'components/card';
 import ConnectUserBar from 'components/connect-user-bar';
-import { FormFieldset } from 'components/forms';
+import { FormLabel, FormFieldset } from 'components/forms';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import { ModuleToggle } from 'components/module-toggle';
 import SettingsCard from 'components/settings-card';
@@ -19,6 +19,7 @@ import {
 	getSiteAdminUrl,
 } from 'state/initial-state';
 import { getModule } from 'state/modules';
+import Textarea from '../components/textarea';
 
 const trackViewSubsClick = () => {
 	analytics.tracks.recordJetpackClick( 'manage-subscribers' );
@@ -48,8 +49,10 @@ function SubscriptionsSettings( props ) {
 		siteAdminUrl,
 		themeStylesheet,
 		blogID,
+		onOptionChange,
 	} = props;
 
+	const welcomeMessage = props.getOptionValue( 'subscription_options' )?.welcome || '';
 	const subscribeModalEditorUrl =
 		siteAdminUrl && themeStylesheet
 			? addQueryArgs( `${ siteAdminUrl }site-editor.php`, {
@@ -95,86 +98,123 @@ function SubscriptionsSettings( props ) {
 	const isDisabled =
 		! isSubscriptionsActive || unavailableInOfflineMode || isSavingAnyOption( [ 'subscriptions' ] );
 
+	const changeWelcomeMessageState = useCallback(
+		event => {
+			const subscriptionOptionEvent = {
+				target: { name: event.target.name, value: { welcome: event.target.value } },
+			};
+			onOptionChange( subscriptionOptionEvent );
+		},
+		[ onOptionChange ]
+	);
+
 	return (
-		<SettingsCard { ...props } hideButton module="subscriptions">
-			<SettingsGroup
-				hasChild
-				disableInOfflineMode
-				disableInSiteConnectionMode
-				module={ subscriptions }
-				support={ {
-					text: __(
-						'Allows readers to subscribe to your posts or comments, and receive notifications of new content by email.',
-						'jetpack'
-					),
-					link: getRedirectUrl( 'jetpack-support-subscriptions' ),
-				} }
-			>
-				<ModuleToggle
-					slug="subscriptions"
-					disabled={ unavailableInOfflineMode }
-					activated={ isSubscriptionsActive }
-					toggling={ isSavingAnyOption( 'subscriptions' ) }
-					toggleModule={ toggleModuleNow }
+		<>
+			<SettingsCard { ...props } hideButton module="subscriptions">
+				<SettingsGroup
+					hasChild
+					disableInOfflineMode
+					disableInSiteConnectionMode
+					module={ subscriptions }
+					support={ {
+						text: __(
+							'Allows readers to subscribe to your posts or comments, and receive notifications of new content by email.',
+							'jetpack'
+						),
+						link: getRedirectUrl( 'jetpack-support-subscriptions' ),
+					} }
 				>
-					<span className="jp-form-toggle-explanation">{ subscriptions.description }</span>
-				</ModuleToggle>
-				{
-					<FormFieldset>
-						<ToggleControl
-							checked={ isSubscriptionsActive && isStbEnabled }
-							disabled={ isDisabled }
-							toggling={ isSavingAnyOption( [ 'stb_enabled' ] ) }
-							onChange={ handleSubscribeToBlogToggleChange }
-							label={ __(
-								'Enable the “subscribe to site” option on your comment form',
-								'jetpack'
-							) }
-						/>
-						<ToggleControl
-							checked={ isSubscriptionsActive && isStcEnabled }
-							disabled={ isDisabled }
-							toggling={ isSavingAnyOption( [ 'stc_enabled' ] ) }
-							onChange={ handleSubscribeToCommentToggleChange }
-							label={ __(
-								'Enable the “subscribe to comments” option on your comment form',
-								'jetpack'
-							) }
-						/>
-						<ToggleControl
-							checked={ isSubscriptionsActive && isSmEnabled }
-							disabled={ isDisabled }
-							toggling={ isSavingAnyOption( [ 'sm_enabled' ] ) }
-							onChange={ handleSubscribeModalToggleChange }
-							label={ __( 'Enable subscription pop-up', 'jetpack' ) }
-						/>
-						<p className="jp-form-setting-explanation">
-							{ __(
-								'Automatically add a subscription form pop-up to every post and turn visitors into subscribers. It will appear as readers scroll through your posts.',
-								'jetpack'
-							) }
-							{ isBlockTheme && subscribeModalEditorUrl && (
-								<>
-									{ ' ' }
-									<ExternalLink href={ subscribeModalEditorUrl }>
-										{ __( 'Preview and edit the pop-up', 'jetpack' ) }
-									</ExternalLink>
-								</>
-							) }
-						</p>
-					</FormFieldset>
-				}
-			</SettingsGroup>
-			{ getSubClickableCard() }
+					<ModuleToggle
+						slug="subscriptions"
+						disabled={ unavailableInOfflineMode }
+						activated={ isSubscriptionsActive }
+						toggling={ isSavingAnyOption( 'subscriptions' ) }
+						toggleModule={ toggleModuleNow }
+					>
+						<span className="jp-form-toggle-explanation">{ subscriptions.description }</span>
+					</ModuleToggle>
+					{
+						<FormFieldset>
+							<ToggleControl
+								checked={ isSubscriptionsActive && isStbEnabled }
+								disabled={ isDisabled }
+								toggling={ isSavingAnyOption( [ 'stb_enabled' ] ) }
+								onChange={ handleSubscribeToBlogToggleChange }
+								label={ __(
+									'Enable the “subscribe to site” option on your comment form',
+									'jetpack'
+								) }
+							/>
+							<ToggleControl
+								checked={ isSubscriptionsActive && isStcEnabled }
+								disabled={ isDisabled }
+								toggling={ isSavingAnyOption( [ 'stc_enabled' ] ) }
+								onChange={ handleSubscribeToCommentToggleChange }
+								label={ __(
+									'Enable the “subscribe to comments” option on your comment form',
+									'jetpack'
+								) }
+							/>
+							<ToggleControl
+								checked={ isSubscriptionsActive && isSmEnabled }
+								disabled={ isDisabled }
+								toggling={ isSavingAnyOption( [ 'sm_enabled' ] ) }
+								onChange={ handleSubscribeModalToggleChange }
+								label={ __( 'Enable subscription pop-up', 'jetpack' ) }
+							/>
+							<p className="jp-form-setting-explanation">
+								{ __(
+									'Automatically add a subscription form pop-up to every post and turn visitors into subscribers. It will appear as readers scroll through your posts.',
+									'jetpack'
+								) }
+								{ isBlockTheme && subscribeModalEditorUrl && (
+									<>
+										{ ' ' }
+										<ExternalLink href={ subscribeModalEditorUrl }>
+											{ __( 'Preview and edit the pop-up', 'jetpack' ) }
+										</ExternalLink>
+									</>
+								) }
+							</p>
+						</FormFieldset>
+					}
+				</SettingsGroup>
+				{ getSubClickableCard() }
 
-			{ ! isLinked && ! isOffline && (
-				<ConnectUserBar
-					feature="subscriptions"
-					featureLabel={ __( 'Newsletter', 'jetpack' ) }
-					text={ __( 'Connect to manage your subscriptions settings.', 'jetpack' ) }
-				/>
-			) }
-		</SettingsCard>
+				{ ! isLinked && ! isOffline && (
+					<ConnectUserBar
+						feature="subscriptions"
+						featureLabel={ __( 'Newsletter', 'jetpack' ) }
+						text={ __( 'Connect to manage your subscriptions settings.', 'jetpack' ) }
+					/>
+				) }
+			</SettingsCard>
+			<SettingsCard
+				{ ...props }
+				header={ __( 'Messages', 'jetpack' ) }
+				module="subscriptions"
+				saveDisabled={ props.isSavingAnyOption( [ 'subscription_options' ] ) }
+			>
+				<SettingsGroup hasChild disableInOfflineMode module={ subscriptions }>
+					<p className="jp-settings-card__email-settings">
+						{ __(
+							'These settings change the emails sent from your site to your readers.',
+							'jetpack'
+						) }
+					</p>
+					<FormLabel>
+						<span className="jp-form-label-wide email-settings__title">
+							{ __( 'Welcome email message', 'jetpack' ) }
+						</span>
+						<Textarea
+							name={ 'subscription_options' }
+							value={ welcomeMessage }
+							onChange={ changeWelcomeMessageState }
+						/>
+					</FormLabel>
+				</SettingsGroup>
+			</SettingsCard>
+		</>
 	);
 }
 

diff --git a/projects/plugins/jetpack/_inc/lib/class.core-rest-api-endpoints.php b/projects/plugins/jetpack/_inc/lib/class.core-rest-api-endpoints.php
@@ -2657,6 +2657,17 @@ public static function get_updateable_data_list( $selector = '' ) {
 				'validate_callback' => __CLASS__ . '::validate_boolean',
 				'jp_group'          => 'subscriptions',
 			),
+			'subscription_options'                 => array(
+				'description'       => esc_html__( 'Three options used in subscription email templates: \'invitation\', \'welcome\' and \'comment_follow\'.', 'jetpack' ),
+				'type'              => 'object',
+				'default'           => array(
+					'invitation'     => '',
+					'welcome'        => '',
+					'comment_follow' => '',
+				),
+				'validate_callback' => __CLASS__ . '::validate_subscription_options',
+				'jp_group'          => 'subscriptions',
+			),
 
 			// Related Posts.
 			'show_headline'                        => array(
@@ -3565,6 +3576,37 @@ public static function validate_array_of_strings( $value, $request, $param ) {
 		return true;
 	}
 
+	/**
+	 * Validates the subscription_options parameter.
+	 *
+	 * @param array $values Value to check.
+	 *
+	 * @return bool|WP_Error
+	 */
+	public static function validate_subscription_options( $values ) {
+		if ( is_object( $values ) ) {
+			return new WP_Error(
+				'invalid_param',
+				/* Translators: subscription_options is a variable name, and shouldn't be translated. */
+				esc_html__( 'subscription_options must be an object.', 'jetpack' )
+			);
+		}
+		foreach ( array_keys( $values ) as $key ) {
+			if ( ! in_array( $key, array( 'welcome', 'invitation', 'comment_follow' ), true ) ) {
+				return new WP_Error(
+					'invalid_param',
+					sprintf(
+						/* Translators: Placeholder is the invalid param being sent. */
+						esc_html__( '%s is not one of the allowed members of subscription_options.', 'jetpack' ),
+						$key
+					)
+				);
+			}
+		}
+
+		return true;
+	}
+
 	/**
 	 * If for some reason the roles allowed to see Stats are empty (for example, user tampering with checkboxes),
 	 * return an array with only 'administrator' as the allowed role and save it for 'roles' option.