Add feature gating for SEO on Settings

projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx

@@ -1,5 +1,7 @@
 import { getUserConnectionUrl } from '@automattic/jetpack-connection';
+import { getSiteFragment } from '@automattic/jetpack-shared-extension-utils';
 import { __, _x } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Button from 'components/button';
@@ -24,6 +26,8 @@ import {
 	getJetpackProductUpsellByFeature,
 	FEATURE_JETPACK_BLAZE,
 	FEATURE_JETPACK_EARN,
+	FEATURE_ADVANCED_SEO,
+	PLAN_BUSINESS,
 } from 'lib/plans/constants';
 import ProStatus from 'pro-status';
 import {
@@ -457,6 +461,39 @@ export const SettingsCard = inprops => {
 						rna
 					/>
 				);
+
+			case FEATURE_ADVANCED_SEO:
+				if ( props.hasAdvancedSeo || props.inOfflineMode ) {
+					return '';
+				}
+
+				return props.hasConnectedOwner ? (
+					<JetpackBanner
+						title={ __(
+							'Optimize your site for search engines with advanced SEO tools and preview how your content will look on Google, Facebook, and Twitter.',
+							'jetpack'
+						) }
+						callToAction={ upgradeLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_ADVANCED_SEO ) }
+						feature={ feature }
+						onClick={ handleClickForTracking( feature ) }
+						href={ props.seoUpgradeUrl }
+						rna
+					/>
+				) : (
+					<JetpackBanner
+						title={ __(
+							'Connect your WordPress.com account to optimize your site for search engines with advanced SEO tools.',
+							'jetpack'
+						) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_ADVANCED_SEO ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
 			default:
 				return '';
 		}
@@ -494,6 +531,13 @@ export const SettingsCard = inprops => {
 					return false;
 				}
 
+				break;
+
+			case FEATURE_ADVANCED_SEO:
+				if ( ! props.hasAdvancedSeo ) {
+					return false;
+				}
+
 				break;
 		}
 
@@ -591,6 +635,24 @@ SettingsCard.propTypes = {
 	isDisabled: PropTypes.bool,
 };
 
+/**
+ * Get the SEO upgrade URL, pointing to WordPress.com Business plan.
+ * Since ADVANCED_SEO is available on JETPACK_ALL_SITES, if the feature is unavailable,
+ * the user is on WordPress.com/Atomic and needs Business plan.
+ *
+ * @param {object} state - Redux state
+ * @return {string} Upgrade URL
+ */
+const getSeoUpgradeUrl = state => {
+	const siteFragment = getSiteFragment();
+	const redirectTo = addQueryArgs( getSiteAdminUrl( state ) + 'admin.php?page=jetpack#/traffic', {
+		feature: 'seo',
+	} );
+	return addQueryArgs( `https://wordpress.com/checkout/${ siteFragment }/${ PLAN_BUSINESS }`, {
+		redirect_to: redirectTo,
+	} );
+};
+
 export default connect( state => {
 	return {
 		fetchingSiteData: isFetchingSiteData( state ),
@@ -608,9 +670,11 @@ export default connect( state => {
 		searchUpgradeUrl: getProductDescriptionUrl( state, 'search' ),
 		simplePaymentsUpgradeUrl: getUpgradeUrl( state, 'jetpack-creator-cta' ),
 		spamUpgradeUrl: getProductDescriptionUrl( state, 'akismet' ),
+		seoUpgradeUrl: getSeoUpgradeUrl( state ),
 		multisite: isMultisite( state ),
 		inOfflineMode: isOfflineMode( state ),
 		hasConnectedOwner: hasConnectedOwnerSelector( state ),
+		hasAdvancedSeo: siteHasFeature( state, 'advanced-seo' ),
 		hasAntispam: siteHasFeature( state, 'antispam' ),
 		hasBackups: siteHasFeature( state, 'backups' ),
 		hasGoogleAnalytics: siteHasFeature( state, 'google-analytics' ),

projects/plugins/jetpack/_inc/client/lib/plans/constants.js

@@ -439,6 +439,7 @@ export const JETPACK_FEATURE_PRODUCT_UPSELL_MAP = {
 	[ FEATURE_NEWSLETTER_JETPACK ]: PLAN_JETPACK_CREATOR_YEARLY,
 	[ FEATURE_WORDADS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 	[ FEATURE_JETPACK_ACCOUNT_PROTECTION ]: PLAN_JETPACK_FREE,
+	[ FEATURE_ADVANCED_SEO ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 };
 
 /**

projects/plugins/jetpack/_inc/client/traffic/seo.jsx

@@ -18,6 +18,7 @@ import SimpleNotice from 'components/notice';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import analytics from 'lib/analytics';
+import { FEATURE_ADVANCED_SEO } from 'lib/plans/constants';
 import { isSeoEnhancerAvailable, getSiteRepresentativeImage } from 'state/initial-state';
 import { siteHasFeature } from 'state/site';
 import { isFetchingPluginsData, isPluginActive } from 'state/site/plugins';
@@ -172,11 +173,13 @@ export const SEO = withModuleSettingsFormHelpers(
 					frontPageMetaDescription.length < this.constants.frontPageMetaMaxLength,
 			} );
 
+			// Destructure feature out to ensure our explicit prop takes precedence
+			const { feature: _ignoredFeature, ...restProps } = this.props;
 			return (
 				<SettingsCard
-					{ ...this.props }
+					{ ...restProps }
 					header={ _x( 'Search engine optimization', 'Settings header', 'jetpack' ) }
-					feature={ 'seo-tools-jetpack' }
+					feature={ FEATURE_ADVANCED_SEO }
 					module={ seo.module }
 					saveDisabled={ this.props.isSavingAnyOption( this.constants.moduleOptionsArray ) }
 					hideButton={ hasConflictingSeoPlugin }

projects/plugins/jetpack/changelog/update-business-q1-gating-seo-changes

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Hides some SEO features for WPCOM users without the correct plan