Introduce Jetpack Newsletter in the recommendations flow

projects/plugins/jetpack/_inc/client/discussion/subscriptions.jsx

@@ -190,7 +190,7 @@ class SubscriptionsComponent extends React.Component {
 				{ ! this.props.isLinked && ! this.props.isOfflineMode && (
 					<ConnectUserBar
 						feature="subscriptions"
-						featureLabel={ __( 'Subscriptions', 'jetpack' ) }
+						featureLabel={ __( 'Newsletter', 'jetpack' ) }
 						text={ __( 'Connect to manage your subscriptions settings.', 'jetpack' ) }
 					/>
 				) }

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

@@ -95,6 +95,7 @@ const recommendationsRoutes = [
 	'/recommendations/agency',
 	'/recommendations/woocommerce',
 	'/recommendations/monitor',
+	'/recommendations/newsletter',
 	'/recommendations/related-posts',
 	'/recommendations/creative-mail',
 	'/recommendations/site-accelerator',
@@ -576,6 +577,7 @@ class Main extends React.Component {
 			case '/recommendations/agency':
 			case '/recommendations/woocommerce':
 			case '/recommendations/monitor':
+			case '/recommendations/newsletter':
 			case '/recommendations/related-posts':
 			case '/recommendations/creative-mail':
 			case '/recommendations/site-accelerator':

projects/plugins/jetpack/_inc/client/recommendations/constants.js

@@ -19,6 +19,7 @@ export const RECOMMENDATION_WIZARD_STEP = {
 	AGENCY: 'agency',
 	WOOCOMMERCE: 'woocommerce',
 	MONITOR: 'monitor',
+	NEWSLETTER: 'newsletter',
 	RELATED_POSTS: 'related-posts',
 	CREATIVE_MAIL: 'creative-mail',
 	SITE_ACCELERATOR: 'site-accelerator',

projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js

@@ -47,6 +47,13 @@ export const mapStateToSummaryFeatureProps = ( state, featureSlug ) => {
 				summaryActivateButtonLabel: __( 'Enable', 'jetpack' ),
 				configLink: '#/settings?term=monitor',
 			};
+		case 'newsletter':
+			return {
+				configureButtonLabel: __( 'Settings', 'jetpack' ),
+				displayName: __( 'Newsletter', 'jetpack' ),
+				summaryActivateButtonLabel: __( 'Enable', 'jetpack' ),
+				configLink: '#/settings?term=subscriptions',
+			};
 		case 'related-posts':
 			return {
 				configureButtonLabel: __( 'Settings', 'jetpack' ),
@@ -197,6 +204,12 @@ export const mapDispatchToProps = ( dispatch, featureSlug ) => {
 					return dispatch( updateSettings( { monitor: true } ) );
 				},
 			};
+		case 'newsletter':
+			return {
+				activateFeature: () => {
+					return dispatch( updateSettings( { subscriptions: true } ) );
+				},
+			};
 		case 'related-posts':
 			return {
 				activateFeature: () => {
@@ -304,6 +317,18 @@ export const getStepContent = ( state, stepSlug ) => {
 				ctaText: __( 'Install Creative Mail', 'jetpack' ),
 				illustration: 'assistant-creative-mail',
 			};
+		case 'newsletter':
+			return {
+				progressValue: '70',
+				question: __( 'Send subscribers your latest blog posts via email?', 'jetpack' ),
+				description: __(
+					'With Jetpack Newsletter you can keep your audience engaged by automatically sending your content via email. <ExternalLink>Learn more</ExternalLink>',
+					'jetpack'
+				),
+				descriptionLink: 'https://jetpack.com/newsletter/',
+				ctaText: __( 'Enable Newsletter', 'jetpack' ),
+				illustration: 'assistant-creative-mail',
+			};
 		case 'monitor':
 			return {
 				progressValue: '52',

projects/plugins/jetpack/_inc/client/recommendations/index.jsx

@@ -82,6 +82,9 @@ const RecommendationsComponent = props => {
 		case RECOMMENDATION_WIZARD_STEP.MONITOR:
 			redirectPath = '/monitor';
 			break;
+		case RECOMMENDATION_WIZARD_STEP.NEWSLETTER:
+			redirectPath = '/newsletter';
+			break;
 		case RECOMMENDATION_WIZARD_STEP.RELATED_POSTS:
 			redirectPath = '/related-posts';
 			break;
@@ -214,6 +217,9 @@ const RecommendationsComponent = props => {
 					<Route path="/recommendations/monitor">
 						<FeaturePrompt stepSlug="monitor" />
 					</Route>
+					<Route path="/recommendations/newsletter">
+						<FeaturePrompt stepSlug="newsletter" />
+					</Route>
 					<Route path="/recommendations/related-posts">
 						<FeaturePrompt stepSlug="related-posts" />
 					</Route>

projects/plugins/jetpack/_inc/client/recommendations/summary/test/component.js

@@ -113,11 +113,11 @@ describe( 'Recommendations – Summary', () => {
 			expect( within( enabledFeatures ).getByText( 'Related Posts' ) ).toBeInTheDocument();
 		} );
 
-		it( 'shows the skipped recommendations (Monitor, Site Accelerator, and Creative Mail)', () => {
+		it( 'shows the skipped recommendations (Monitor, Site Accelerator, and Newsletter)', () => {
 			render( <SummaryFeature />, {
 				initialState: buildInitialState( {
 					enabledRecommendations: { 'related-posts': true },
-					skippedRecommendations: [ 'monitor', 'site-accelerator', 'creative-mail' ],
+					skippedRecommendations: [ 'monitor', 'site-accelerator', 'newsletter' ],
 					productSlug: 'jetpack_free',
 				} ),
 			} );
@@ -127,7 +127,7 @@ describe( 'Recommendations – Summary', () => {
 			expect( skippedFeatures ).toBeInTheDocument();
 			expect( within( skippedFeatures ).getByText( 'Downtime Monitoring' ) ).toBeInTheDocument();
 			expect( within( skippedFeatures ).getByText( 'Site Accelerator' ) ).toBeInTheDocument();
-			expect( within( skippedFeatures ).getByText( 'Creative Mail' ) ).toBeInTheDocument();
+			expect( within( skippedFeatures ).getByText( 'Newsletter' ) ).toBeInTheDocument();
 		} );
 	} );
 

projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js

@@ -336,8 +336,8 @@ const stepToNextStepByPath = {
 		'product-suggestions': 'woocommerce',
 		woocommerce: 'monitor',
 		monitor: 'related-posts',
-		'related-posts': 'creative-mail',
-		'creative-mail': 'site-accelerator',
+		'related-posts': 'newsletter',
+		newsletter: 'site-accelerator',
 		'site-accelerator': 'publicize',
 		publicize: 'vaultpress-for-woocommerce',
 		'vaultpress-for-woocommerce': 'vaultpress-backup', // falls back to vaultpress-backup so it only shows one of them
@@ -419,6 +419,7 @@ export const stepToRoute = {
 	agency: '#/recommendations/agency',
 	woocommerce: '#/recommendations/woocommerce',
 	monitor: '#/recommendations/monitor',
+	newsletter: '#/recommendations/newsletter',
 	'related-posts': '#/recommendations/related-posts',
 	'creative-mail': '#/recommendations/creative-mail',
 	'site-accelerator': '#/recommendations/site-accelerator',
@@ -483,6 +484,8 @@ export const isFeatureActive = ( state, featureSlug ) => {
 			);
 		case 'monitor':
 			return !! getSetting( state, 'monitor' );
+		case 'newsletter':
+			return !! getSetting( state, 'subscriptions' );
 		case 'related-posts':
 			return !! getSetting( state, 'related-posts' );
 		case 'site-accelerator':
@@ -840,6 +843,7 @@ export const getSummaryFeatureSlugs = state => {
 		'monitor',
 		'related-posts',
 		'creative-mail',
+		'newsletter',
 		'site-accelerator',
 		'protect',
 		'publicize',

projects/plugins/jetpack/changelog/newsletter-recommendations

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Highlight Jetpack Newsletter in recommendations flow

projects/plugins/jetpack/modules/subscriptions.php

@@ -1,6 +1,6 @@
 <?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName)
 /**
- * Module Name: Subscriptions
+ * Module Name: Newsletter
  * Module Description: Let visitors subscribe to new posts and comments via email
  * Sort Order: 9
  * Recommendation Order: 8
@@ -10,7 +10,7 @@
  * Auto Activate: No
  * Module Tags: Social
  * Feature: Engagement
- * Additional Search Queries: subscriptions, subscription, email, follow, followers, subscribers, signup
+ * Additional Search Queries: subscriptions, subscription, email, follow, followers, subscribers, signup, newsletter
  */
 
 // phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- TODO: Move classes to appropriately-named class files.

projects/plugins/jetpack/tests/e2e/specs/post-connection/recommendations.test.js

@@ -59,20 +59,20 @@ test( 'Recommendations (Jetpack Assistant)', async ( { page } ) => {
 		).toBeTruthy();
 	} );
 
-	await test.step( 'Enable Related Posts and continue to Creative Mail step', async () => {
+	await test.step( 'Enable Related Posts and continue to Newsletter step', async () => {
 		await recommendationsPage.enableRelatedPostsAndContinue();
 		await recommendationsPage.reload();
 		await recommendationsPage.waitForNetworkIdle();
-		const isCreativeMailStep = await recommendationsPage.isInstallCreativeMailButtonVisible();
-		expect( isCreativeMailStep, 'Creative Mail step should ne visible' ).toBeTruthy();
+		const isNewsletterStep = await recommendationsPage.isEnableNewsletterButtonVisible();
+		expect( isNewsletterStep, 'Newsletter step should be visible' ).toBeTruthy();
 		expect(
-			recommendationsPage.isUrlInSyncWithStepName( 'creative-mail' ),
+			recommendationsPage.isUrlInSyncWithStepName( 'newsletter' ),
 			'URL should be in sync with the step name'
 		).toBeTruthy();
 	} );
 
-	await test.step( 'Skip Creative Mail and continue to Site Accelerator', async () => {
-		await recommendationsPage.skipCreativeMailAndContinue();
+	await test.step( 'Enable Newsletter and continue to Site Accelerator', async () => {
+		await recommendationsPage.enableNewsletterAndContinue();
 		await recommendationsPage.reload();
 		await recommendationsPage.waitForNetworkIdle();
 		const isSiteAcceleratorStep = await recommendationsPage.isEnableSiteAcceleratorButtonVisible();
@@ -111,22 +111,19 @@ test( 'Recommendations (Jetpack Assistant)', async ( { page } ) => {
 		).toBeTruthy();
 	} );
 
-	await test.step( 'Verify Monitoring and Related Posts are enabled', async () => {
+	await test.step( 'Verify Monitoring, Newsletter, and Related Posts are enabled', async () => {
 		const isMonitoringFeatureEnabled = await recommendationsPage.isMonitoringFeatureEnabled();
 		const isRelatedPostsFeatureEnabled = await recommendationsPage.isRelatedPostsFeatureEnabled();
+		const isNewsletterFeatureEnabled = await recommendationsPage.isNewsletterFeatureEnabled();
 		expect(
-			isMonitoringFeatureEnabled && isRelatedPostsFeatureEnabled,
-			'Monitoring feature and Related Posts should be enabled'
+			isMonitoringFeatureEnabled && isNewsletterFeatureEnabled && isRelatedPostsFeatureEnabled,
+			'Monitoring feature, Newsletter, and Related Posts should be enabled'
 		).toBeTruthy();
 	} );
 
-	await test.step( 'Verify Creative Mail and Site Accelerator are disabled', async () => {
-		const isCreativeMailFeatureEnabled = await recommendationsPage.isCreativeMailFeatureEnabled();
+	await test.step( 'Verify Site Accelerator is disabled', async () => {
 		const isSiteAcceleratorFeatureEnabled =
 			await recommendationsPage.isSiteAcceleratorFeatureEnabled();
-		expect(
-			isCreativeMailFeatureEnabled && isSiteAcceleratorFeatureEnabled,
-			'Creative Mail and Site Accelerator should be enabled'
-		).toBeTruthy();
+		expect( isSiteAcceleratorFeatureEnabled, 'Site Accelerator should be disabled' ).toBeTruthy();
 	} );
 } );

tools/e2e-commons/pages/wp-admin/recommendations.js

@@ -38,15 +38,11 @@ export default class RecommendationsPage extends WpPage {
 	}
 
 	get enableRelatedPostsButtonSel() {
-		return 'a[href*="recommendations/creative-mail"] >> text="Enable Related Posts"';
+		return 'a[href*="recommendations/newsletter"] >> text="Enable Related Posts"';
 	}
 
-	get installCreativeMailButtonSel() {
-		return 'a[href*="recommendations/site-accelerator"] >> text="Install Creative Mail"';
-	}
-
-	get skipCreativeMailButtonSel() {
-		return 'a[href*="recommendations/site-accelerator"] >> text="Not now"';
+	get enableNewsletterButtonSel() {
+		return 'a[href*="recommendations/site-accelerator"] >> text="Enable Newsletter"';
 	}
 
 	get enableSiteAcceleratorButtonSel() {
@@ -81,8 +77,8 @@ export default class RecommendationsPage extends WpPage {
 		return '.jp-recommendations-feature-summary.is-feature-enabled >> a >> text="Related Posts"';
 	}
 
-	get creativeMailFeatureNotEnabledSel() {
-		return '.jp-recommendations-feature-summary:not(.is-feature-enabled) >> a >> text="Creative Mail"';
+	get newsletterFeatureEnabledSel() {
+		return '.jp-recommendations-feature-summary.is-feature-enabled >> a >> text="Newsletter"';
 	}
 
 	get siteAcceleratorFeatureNotEnabledSel() {
@@ -144,12 +140,12 @@ export default class RecommendationsPage extends WpPage {
 		return await this.click( this.enableRelatedPostsButtonSel );
 	}
 
-	async isInstallCreativeMailButtonVisible() {
-		return await this.isElementVisible( this.installCreativeMailButtonSel );
+	async isEnableNewsletterButtonVisible() {
+		return await this.isElementVisible( this.enableNewsletterButtonSel );
 	}
 
-	async skipCreativeMailAndContinue() {
-		return await this.click( this.skipCreativeMailButtonSel );
+	async enableNewsletterAndContinue() {
+		return await this.click( this.enableNewsletterButtonSel );
 	}
 
 	async isEnableSiteAcceleratorButtonVisible() {
@@ -184,8 +180,8 @@ export default class RecommendationsPage extends WpPage {
 		return await this.isElementVisible( this.relatedPostsFeatureEnabledSel );
 	}
 
-	async isCreativeMailFeatureEnabled() {
-		return await this.isElementVisible( this.creativeMailFeatureNotEnabledSel );
+	async isNewsletterFeatureEnabled() {
+		return await this.isElementVisible( this.newsletterFeatureEnabledSel );
 	}
 
 	async isSiteAcceleratorFeatureEnabled() {