Update/jetpack settings connection nudges (#39591)

* Unify connection nudges on settings * changelog
Automattic · Oct 1, 2024 · f536b14 · f536b14
1 parent f34d1a7
commit f536b14
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 68 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx
@@ -13,7 +13,13 @@ import {
 	FEATURE_SPAM_AKISMET_PLUS,
 	FEATURE_SEARCH_JETPACK,
 	FEATURE_SIMPLE_PAYMENTS_JETPACK,
+	FEATURE_DOWNTIME_MONITORING_JETPACK,
+	FEATURE_SSO,
+	FEATURE_JETPACK_SOCIAL,
+	FEATURE_POST_BY_EMAIL,
 	getJetpackProductUpsellByFeature,
+	FEATURE_JETPACK_BLAZE,
+	FEATURE_JETPACK_EARN,
 } from 'lib/plans/constants';
 import { get, includes } from 'lodash';
 import ProStatus from 'pro-status';
@@ -22,19 +28,20 @@ import {
 	isSearchNewPricingLaunched202208,
 } from 'product-descriptions/utils';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { connect } from 'react-redux';
 import { isAkismetKeyValid, isCheckingAkismetKey, getVaultPressData } from 'state/at-a-glance';
 import {
 	hasConnectedOwner as hasConnectedOwnerSelector,
 	isOfflineMode,
 	connectUser,
+	isUnavailableInOfflineMode,
 } from 'state/connection';
 import {
 	getSiteAdminUrl,
 	getUpgradeUrl,
 	isMultisite,
 	userCanManageModules,
+	shouldInitializeBlaze,
 } from 'state/initial-state';
 import { getModuleOverride, getModule } from 'state/modules';
 import { siteHasFeature, isFetchingSiteData } from 'state/site';
@@ -223,6 +230,113 @@ export const SettingsCard = inprops => {
 					/>
 				);
 
+			case FEATURE_DOWNTIME_MONITORING_JETPACK:
+				if ( props.hasConnectedOwner || props.inOfflineMode ) {
+					return '';
+				}
+
+				return (
+					<JetpackBanner
+						title={ __(
+							'Connect your WordPress.com account to set up your status alerts.',
+							'jetpack'
+						) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_DOWNTIME_MONITORING_JETPACK ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
+			case FEATURE_SSO:
+				if ( props.hasConnectedOwner || props.inOfflineMode ) {
+					return '';
+				}
+
+				return (
+					<JetpackBanner
+						title={ __( 'Connect your WordPress.com account to enable Secure Sign-On', 'jetpack' ) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_SSO ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
+			case FEATURE_POST_BY_EMAIL:
+				if ( props.hasConnectedOwner || props.isUnavailableInOfflineMode( 'post-by-email' ) ) {
+					return '';
+				}
+
+				return (
+					<JetpackBanner
+						title={ __(
+							'Connect your WordPress.com account to enable publishing via email.',
+							'jetpack'
+						) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_POST_BY_EMAIL ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
+			case FEATURE_JETPACK_SOCIAL:
+				if ( props.hasConnectedOwner || props.inOfflineMode ) {
+					return '';
+				}
+
+				return (
+					<JetpackBanner
+						title={ __(
+							'Connect your WordPress.com account to add your social media accounts.',
+							'jetpack'
+						) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_SOCIAL ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
+			case FEATURE_JETPACK_BLAZE:
+				if ( props.blazeAvailable.can_init || props.inOfflineMode ) {
+					return '';
+				}
+
+				return (
+					<JetpackBanner
+						title={ __(
+							'Connect your WordPress.com account to set up campaigns and promote your content.',
+							'jetpack'
+						) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_BLAZE ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
+			case FEATURE_JETPACK_EARN:
+				return (
+					<JetpackBanner
+						title={ __(
+							'Connect your WordPress.com account to discover tools to earn money with your site.',
+							'jetpack'
+						) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_EARN ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
+
 			case FEATURE_GOOGLE_ANALYTICS_JETPACK:
 				if ( props.hasGoogleAnalytics ) {
 					return '';
@@ -478,6 +592,8 @@ export default connect(
 			hasSimplePayments: siteHasFeature( state, 'simple-payments' ),
 			hasVideoPress: siteHasFeature( state, 'videopress' ),
 			hasWordAds: siteHasFeature( state, 'wordads' ),
+			isUnavailableInOfflineMode: module_name => isUnavailableInOfflineMode( state, module_name ),
+			blazeAvailable: shouldInitializeBlaze( state ),
 		};
 	},
 	dispatch => ( {

diff --git a/projects/plugins/jetpack/_inc/client/earn/index.jsx b/projects/plugins/jetpack/_inc/client/earn/index.jsx
@@ -2,7 +2,6 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Card from 'components/card';
-import ConnectUserBar from 'components/connect-user-bar';
 import QuerySite from 'components/data/query-site';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
@@ -81,8 +80,16 @@ function EarnFeatureButton( props ) {
  * @return {React.Component} Earn settings component.
  */
 function Earn( props ) {
-	const { active, hasConnectedOwner, isModuleFound, isOffline, searchTerm, siteRawUrl, blogID } =
-		props;
+	const {
+		active,
+		hasConnectedOwner,
+		isModuleFound,
+		isOffline,
+		searchTerm,
+		siteRawUrl,
+		blogID,
+		feature,
+	} = props;
 
 	if ( ! searchTerm && ! active ) {
 		return null;
@@ -112,13 +119,8 @@ function Earn( props ) {
 					hideButton
 					module="earn"
 					header={ __( 'Collect payments', 'jetpack' ) }
-				>
-					<ConnectUserBar
-						feature="earn"
-						featureLabel={ __( 'Collect payments', 'jetpack' ) }
-						text={ __( 'Connect to discover tools to earn money with your site.', 'jetpack' ) }
-					/>
-				</SettingsCard>
+					feature={ feature }
+				/>
 			);
 		}
 

diff --git a/projects/plugins/jetpack/_inc/client/lib/plans/constants.js b/projects/plugins/jetpack/_inc/client/lib/plans/constants.js
@@ -400,22 +400,33 @@ export const FEATURE_JETPACK_AI = 'ai-jetpack';
 export const FEATURE_JETPACK_CRM = 'crm-jetpack';
 export const FEATURE_JETPACK_BOOST = 'boost-jetpack';
 export const FEATURE_SIMPLE_PAYMENTS_JETPACK = 'simple-payments-jetpack';
+export const FEATURE_DOWNTIME_MONITORING_JETPACK = 'downtime-monitoring-jetpack';
+export const FEATURE_SSO = 'sso-jetpack';
+export const FEATURE_POST_BY_EMAIL = 'post-by-email-jetpack';
+export const FEATURE_JETPACK_SOCIAL = 'social-jetpack';
+export const FEATURE_JETPACK_BLAZE = 'blaze-jetpack';
+export const FEATURE_JETPACK_EARN = 'earn-jetpack';
 
 // Upsells
 export const JETPACK_FEATURE_PRODUCT_UPSELL_MAP = {
+	[ FEATURE_DOWNTIME_MONITORING_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
+	[ FEATURE_GOOGLE_ANALYTICS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
+	[ FEATURE_JETPACK_AI ]: PLAN_JETPACK_AI_YEARLY,
+	[ FEATURE_JETPACK_BOOST ]: PLAN_JETPACK_BOOST,
+	[ FEATURE_JETPACK_BLAZE ]: PLAN_JETPACK_FREE,
+	[ FEATURE_JETPACK_EARN ]: PLAN_JETPACK_FREE,
+	[ FEATURE_JETPACK_SOCIAL ]: PLAN_JETPACK_SOCIAL_V1,
+	[ FEATURE_POST_BY_EMAIL ]: PLAN_JETPACK_FREE,
 	[ FEATURE_PRIORITY_SUPPORT_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 	[ FEATURE_SEARCH_JETPACK ]: PLAN_JETPACK_SEARCH,
 	[ FEATURE_SECURITY_SCANNING_JETPACK ]: PLAN_JETPACK_SCAN,
+	[ FEATURE_SIMPLE_PAYMENTS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 	[ FEATURE_SITE_BACKUPS_JETPACK ]: PLAN_JETPACK_BACKUP_T1_YEARLY,
 	[ FEATURE_SPAM_AKISMET_PLUS ]: PLAN_JETPACK_ANTI_SPAM,
+	[ FEATURE_SSO ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 	[ FEATURE_VIDEO_HOSTING_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
-	[ FEATURE_WORDADS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
-	[ FEATURE_GOOGLE_ANALYTICS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
-	[ FEATURE_SPAM_AKISMET_PLUS ]: PLAN_JETPACK_ANTI_SPAM,
 	[ FEATURE_VIDEOPRESS ]: PLAN_JETPACK_VIDEOPRESS,
-	[ FEATURE_SIMPLE_PAYMENTS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
-	[ FEATURE_JETPACK_AI ]: PLAN_JETPACK_AI_YEARLY,
-	[ FEATURE_JETPACK_BOOST ]: PLAN_JETPACK_BOOST,
+	[ FEATURE_WORDADS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 };
 
 /**

diff --git a/projects/plugins/jetpack/_inc/client/security/monitor.jsx b/projects/plugins/jetpack/_inc/client/security/monitor.jsx
@@ -2,13 +2,13 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import ConnectUserBar from 'components/connect-user-bar';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import { ModuleToggle } from 'components/module-toggle';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import analytics from 'lib/analytics';
-import React, { Component } from 'react';
+import { Component } from 'react';
+import { FEATURE_DOWNTIME_MONITORING_JETPACK } from '../lib/plans/constants';
 
 export const Monitor = withModuleSettingsFormHelpers(
 	class extends Component {
@@ -18,7 +18,6 @@ export const Monitor = withModuleSettingsFormHelpers(
 
 		render() {
 			const hasConnectedOwner = this.props.hasConnectedOwner,
-				isOfflineMode = this.props.isOfflineMode,
 				isMonitorActive = this.props.getOptionValue( 'monitor' ),
 				unavailableInOfflineMode = this.props.isUnavailableInOfflineMode( 'monitor' );
 			return (
@@ -27,6 +26,7 @@ export const Monitor = withModuleSettingsFormHelpers(
 					hideButton
 					module="monitor"
 					header={ _x( 'Downtime monitoring', 'Settings header', 'jetpack' ) }
+					feature={ FEATURE_DOWNTIME_MONITORING_JETPACK }
 				>
 					<SettingsGroup
 						hasChild
@@ -66,14 +66,6 @@ export const Monitor = withModuleSettingsFormHelpers(
 							</span>
 						</ModuleToggle>
 					</SettingsGroup>
-
-					{ ! hasConnectedOwner && ! isOfflineMode && (
-						<ConnectUserBar
-							feature="monitor"
-							featureLabel={ __( 'Downtime Monitoring', 'jetpack' ) }
-							text={ __( 'Connect to set up your status alerts.', 'jetpack' ) }
-						/>
-					) }
 				</SettingsCard>
 			);
 		}

diff --git a/projects/plugins/jetpack/_inc/client/security/sso.jsx b/projects/plugins/jetpack/_inc/client/security/sso.jsx
@@ -3,7 +3,6 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { Button, ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import ConnectUserBar from 'components/connect-user-bar';
 import { FormFieldset } from 'components/forms';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import { ModuleToggle } from 'components/module-toggle';
@@ -12,6 +11,7 @@ import SettingsGroup from 'components/settings-group';
 import cookie from 'cookie';
 import { useState, Component } from 'react';
 import ReactDOM from 'react-dom';
+import { FEATURE_SSO } from '../lib/plans/constants';
 
 const SSOSurveyNotice = () => {
 	const { userConnectionData } = useConnection();
@@ -140,6 +140,7 @@ export const SSO = withModuleSettingsFormHelpers(
 						hideButton
 						module="sso"
 						header={ _x( 'WordPress.com login', 'Settings header, noun.', 'jetpack' ) }
+						feature={ FEATURE_SSO }
 					>
 						<SettingsGroup
 							hasChild
@@ -239,14 +240,6 @@ export const SSO = withModuleSettingsFormHelpers(
 								/>
 							</FormFieldset>
 						</SettingsGroup>
-
-						{ ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && (
-							<ConnectUserBar
-								feature="sso"
-								featureLabel={ __( 'Secure Sign-On', 'jetpack' ) }
-								text={ __( 'Connect to enable WordPress.com Secure Sign-On.', 'jetpack' ) }
-							/>
-						) }
 					</SettingsCard>
 					{ this.state.showSSODisableModal &&
 						ReactDOM.createPortal( <SSOSurveyNotice />, document.body ) }

diff --git a/projects/plugins/jetpack/_inc/client/settings/index.jsx b/projects/plugins/jetpack/_inc/client/settings/index.jsx
@@ -14,6 +14,7 @@ import Sharing from 'sharing';
 import { isModuleActivated as isModuleActivatedSelector } from 'state/modules';
 import Traffic from 'traffic';
 import Writing from 'writing';
+import { FEATURE_JETPACK_EARN } from '../lib/plans/constants';
 
 class Settings extends React.Component {
 	static displayName = 'SearchableSettings';
@@ -66,7 +67,12 @@ class Settings extends React.Component {
 						active={ '/newsletter' === pathname }
 						{ ...commonProps }
 					/>
-					<Earn siteRawUrl={ siteRawUrl } active={ '/earn' === pathname } { ...commonProps } />
+					<Earn
+						siteRawUrl={ siteRawUrl }
+						active={ '/earn' === pathname }
+						feature={ FEATURE_JETPACK_EARN }
+						{ ...commonProps }
+					/>
 					<Performance active={ '/performance' === pathname } { ...commonProps } />
 					<Traffic
 						siteRawUrl={ siteRawUrl }

diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
@@ -6,7 +6,6 @@ import {
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import Card from 'components/card';
-import ConnectUserBar from 'components/connect-user-bar';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import { ModuleToggle } from 'components/module-toggle';
 import SettingsCard from 'components/settings-card';
@@ -15,6 +14,7 @@ import analytics from 'lib/analytics';
 import React, { Component } from 'react';
 import './style.scss';
 import { FormFieldset } from '../components/forms';
+import { FEATURE_JETPACK_SOCIAL } from '../lib/plans/constants';
 import SocialImageGeneratorSection from './features/social-image-generator-section';
 
 export const Publicize = withModuleSettingsFormHelpers(
@@ -44,7 +44,6 @@ export const Publicize = withModuleSettingsFormHelpers(
 
 			const unavailableInOfflineMode = this.props.isUnavailableInOfflineMode( 'publicize' ),
 				isLinked = this.props.isLinked,
-				isOfflineMode = this.props.isOfflineMode,
 				siteRawUrl = this.props.siteRawUrl,
 				blogID = this.props.blogID,
 				siteAdminUrl = this.props.siteAdminUrl,
@@ -95,6 +94,7 @@ export const Publicize = withModuleSettingsFormHelpers(
 					header={ _x( 'Jetpack Social', 'Settings header', 'jetpack' ) }
 					module="publicize"
 					hideButton
+					feature={ FEATURE_JETPACK_SOCIAL }
 				>
 					{ userCanManageModules && (
 						<SettingsGroup
@@ -164,15 +164,6 @@ export const Publicize = withModuleSettingsFormHelpers(
 							</RefreshJetpackSocialSettingsWrapper>
 						</SettingsGroup>
 					) }
-
-					{ ! isLinked && ! isOfflineMode && (
-						<ConnectUserBar
-							feature="publicize"
-							featureLabel={ __( 'Jetpack Social', 'jetpack' ) }
-							text={ __( 'Connect to add your social media accounts.', 'jetpack' ) }
-						/>
-					) }
-
 					{ isActive && ! useAdminUiV1 && configCard() }
 				</SettingsCard>
 			);