Add feature recommendations calculation (#15870)

_inc/client/setup-wizard/index.jsx

@@ -49,5 +49,7 @@ const SetupWizardComponent = props => {
 };
 
 export const SetupWizard = connect( state => {
-	return { siteTitle: getSiteTitle( state ) };
+	return {
+		siteTitle: getSiteTitle( state ),
+	};
 } )( SetupWizardComponent );

_inc/client/setup-wizard/recommended-features/index.jsx

@@ -9,11 +9,11 @@ import { connect } from 'react-redux';
  * Internal dependencies
  */
 import { FeatureToggleGroup } from '../feature-toggle-group';
-import { recommendedFeatureGroups } from '../feature-toggle-group/content';
 import Button from 'components/button';
 import { imagePath } from 'constants/urls';
 import analytics from 'lib/analytics';
 import { fetchSettings, isFetchingSettingsList } from 'state/settings';
+import { getRecommendedFeatureGroups } from 'state/setup-wizard';
 
 import './style.scss';
 
@@ -49,7 +49,7 @@ class RecommendedFeatures extends Component {
 				<p className="jp-setup-wizard-recommended-features-p2">
 					{ __( 'You can change your feature settings at any time.' ) }
 				</p>
-				{ recommendedFeatureGroups.map( featureGroup => {
+				{ this.props.recommendedFeatureGroups.map( featureGroup => {
 					return (
 						<FeatureToggleGroup
 							title={ featureGroup.title }
@@ -74,6 +74,7 @@ class RecommendedFeatures extends Component {
 RecommendedFeatures = connect(
 	state => ( {
 		isFetchingSettingsList: isFetchingSettingsList( state ),
+		recommendedFeatureGroups: getRecommendedFeatureGroups( state ),
 	} ),
 	dispatch => ( {
 		fetchSettings: () => dispatch( fetchSettings() ),

_inc/client/state/setup-wizard/feature-recommendations.js

@@ -0,0 +1,77 @@
+export const featureGroups = {
+	security: [ 'backups', 'scan', 'anti-spam', 'brute-force-protect', 'monitor', 'sso' ],
+	performance: [
+		'site-accelerator',
+		'lazy-images',
+		'search',
+		'infinite-scroll',
+		'site-stats',
+		'videopress',
+	],
+	marketing: [
+		'contact-form',
+		'likes',
+		'comment-likes',
+		'google-analytics',
+		'notifications',
+		'publicize',
+		'related-posts',
+		'sharing',
+		'site-verification',
+		'seo',
+		'sitemaps',
+		'subscriptions',
+		'shortlinks',
+		'ads',
+		'simple-payments-block',
+	],
+	publishing: [
+		'beautiful-math',
+		'carousel',
+		'comments',
+		'copy-post',
+		'custom-css',
+		'testimonials',
+		'portfolio',
+		'enhanced-distribution',
+		'extra-sidebar-widgets',
+		'gravatar-hovercards',
+		'json-api',
+		'markdown',
+		'masterbar',
+		'post-by-email',
+		'shortcodes',
+		'tiled-galleries',
+		'widget-visibility',
+	],
+};
+
+export const featureRecommendations = {
+	all: [
+		'backups',
+		'scan',
+		'anti-spam',
+		'brute-force-protect',
+		'site-accelerator',
+		'lazy-images',
+		'site-stats',
+		'subscriptions',
+		'carousel',
+		'extra-sidebar-widgets',
+		'tiled-galleries',
+	],
+	'business-use': [ 'monitor', 'contact-form', 'notifications' ],
+	'advertising-revenue': [ 'ads' ],
+	'store-revenue': [ 'search', 'videopress', 'simple-payments-block' ],
+	'blog-posts': [
+		'search',
+		'infinite-scroll',
+		'videopress',
+		'publicize',
+		'related-posts',
+		'sharing',
+		'site-verification',
+		'copy-post',
+		'enhanced-distribution',
+	],
+};

_inc/client/state/setup-wizard/reducer.js

@@ -2,11 +2,13 @@
  * External dependencies
  */
 import { combineReducers } from 'redux';
-import { get, assign } from 'lodash';
+import { assign, get, intersection, reduce, union } from 'lodash';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import { featureGroups, featureRecommendations } from './feature-recommendations';
 import {
 	JETPACK_SETUP_WIZARD_QUESTIONNAIRE_FETCH,
 	JETPACK_SETUP_WIZARD_QUESTIONNAIRE_FETCH_RECEIVE,
@@ -46,3 +48,74 @@ export const isFetchingSetupWizardQuestionnaire = state => {
 export const getSetupWizardAnswer = ( state, question ) => {
 	return get( state.jetpack.setupWizard.questionnaire, question );
 };
+
+export const getRecommendedFeatureGroups = state => {
+	const answers = state.jetpack.setupWizard.questionnaire;
+
+	if ( ! answers ) {
+		return [];
+	}
+
+	const listOfRecommendedFeatures = [ featureRecommendations.all ];
+
+	if ( 'business' === answers.use ) {
+		listOfRecommendedFeatures.push( featureRecommendations[ 'business-use' ] );
+	}
+
+	if ( answers[ 'advertising-revenue' ] ) {
+		listOfRecommendedFeatures.push( featureRecommendations[ 'advertising-revenue' ] );
+	}
+
+	if ( answers[ 'store-revenue' ] ) {
+		listOfRecommendedFeatures.push( featureRecommendations[ 'store-revenue' ] );
+	}
+
+	if ( answers[ 'site-updates' ] ) {
+		listOfRecommendedFeatures.push( featureRecommendations[ 'blog-posts' ] );
+	}
+
+	const recommendedFeatures = reduce(
+		listOfRecommendedFeatures,
+		( acc, curr ) => union( acc, curr ),
+		[]
+	);
+
+	// Note these are in a list here to guarantee order
+	return [ 'security', 'performance', 'marketing', 'publishing' ].map( featureGroupKey => ( {
+		...getFeatureGroupContent( featureGroupKey ),
+		features: intersection( featureGroups[ featureGroupKey ], recommendedFeatures ).sort(),
+	} ) );
+};
+
+function getFeatureGroupContent( featureGroupKey ) {
+	switch ( featureGroupKey ) {
+		case 'security':
+			return {
+				title: __( 'Security' ),
+				details: __(
+					'Keep your site backed up, prevent unwanted intrusions, find issues with malware scanning, and stop spammers in their tracks.'
+				),
+			};
+		case 'performance':
+			return {
+				title: __( 'Performance' ),
+				details: __(
+					'Load pages faster! Shorter load times can lead to happier readers, more page views, and — if you’re running a store — improved sales.'
+				),
+			};
+		case 'marketing':
+			return {
+				title: __( 'Marketing' ),
+				details: __(
+					'Increase visitors with social integrations, keep them engaged with related content, and so much more.'
+				),
+			};
+		case 'publishing':
+			return {
+				title: __( 'Design & Publishing' ),
+				details: __(
+					'Customize your homepage, blog posts, sidebars, and widgets — all without touching any code.'
+				),
+			};
+	}
+}