From f536b14f961d12efb80f2d53f46843b5d5dc7292 Mon Sep 17 00:00:00 2001 From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com> Date: Tue, 1 Oct 2024 09:30:30 -0600 Subject: [PATCH] Update/jetpack settings connection nudges (#39591) * Unify connection nudges on settings * changelog --- .../client/components/settings-card/index.jsx | 118 +++++++++++++++++- .../jetpack/_inc/client/earn/index.jsx | 22 ++-- .../_inc/client/lib/plans/constants.js | 23 +++- .../jetpack/_inc/client/security/monitor.jsx | 14 +-- .../jetpack/_inc/client/security/sso.jsx | 11 +- .../jetpack/_inc/client/settings/index.jsx | 8 +- .../jetpack/_inc/client/sharing/publicize.jsx | 13 +- .../jetpack/_inc/client/traffic/blaze.jsx | 17 ++- .../_inc/client/writing/post-by-email.jsx | 17 ++- .../update-jetpack-settings-connection-nudges | 4 + 10 files changed, 179 insertions(+), 68 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-settings-connection-nudges diff --git a/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx index 1e6a8d6835312..40bc7a8ca301a 100644 --- 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 ( + + ); + + case FEATURE_SSO: + if ( props.hasConnectedOwner || props.inOfflineMode ) { + return ''; + } + + return ( + + ); + + case FEATURE_POST_BY_EMAIL: + if ( props.hasConnectedOwner || props.isUnavailableInOfflineMode( 'post-by-email' ) ) { + return ''; + } + + return ( + + ); + + case FEATURE_JETPACK_SOCIAL: + if ( props.hasConnectedOwner || props.inOfflineMode ) { + return ''; + } + + return ( + + ); + + case FEATURE_JETPACK_BLAZE: + if ( props.blazeAvailable.can_init || props.inOfflineMode ) { + return ''; + } + + return ( + + ); + + case FEATURE_JETPACK_EARN: + return ( + + ); + 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 index 91651ad7ed4a0..6662ea0bd1bf2 100644 --- 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' ) } - > - - + feature={ feature } + /> ); } diff --git a/projects/plugins/jetpack/_inc/client/lib/plans/constants.js b/projects/plugins/jetpack/_inc/client/lib/plans/constants.js index 8112965e3ae8e..995306b550c74 100644 --- 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 index 6a72d8085f53c..c0bda41fdb64b 100644 --- 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 } > - - { ! hasConnectedOwner && ! isOfflineMode && ( - - ) } ); } diff --git a/projects/plugins/jetpack/_inc/client/security/sso.jsx b/projects/plugins/jetpack/_inc/client/security/sso.jsx index 55d31668c31da..c613373b5c187 100644 --- 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 } > - - { ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && ( - - ) } { this.state.showSSODisableModal && ReactDOM.createPortal( , document.body ) } diff --git a/projects/plugins/jetpack/_inc/client/settings/index.jsx b/projects/plugins/jetpack/_inc/client/settings/index.jsx index 481e195e98c15..76c4a77f6e872 100644 --- 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 } /> - + { userCanManageModules && ( ) } - - { ! isLinked && ! isOfflineMode && ( - - ) } - { isActive && ! useAdminUiV1 && configCard() } ); diff --git a/projects/plugins/jetpack/_inc/client/traffic/blaze.jsx b/projects/plugins/jetpack/_inc/client/traffic/blaze.jsx index 5b119694d05cf..d58324561cd3a 100644 --- a/projects/plugins/jetpack/_inc/client/traffic/blaze.jsx +++ b/projects/plugins/jetpack/_inc/client/traffic/blaze.jsx @@ -1,7 +1,6 @@ import { getRedirectUrl, ToggleControl } from '@automattic/jetpack-components'; import { __ } 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 { shouldInitializeBlaze, } from 'state/initial-state'; import { getModule } from 'state/modules'; +import { FEATURE_JETPACK_BLAZE } from '../lib/plans/constants'; const trackDashboardClick = () => { analytics.tracks.recordJetpackClick( 'blaze-dashboard' ); @@ -102,7 +102,13 @@ function Blaze( props ) { }; return ( - + { canInit && blazeActive && ! isOfflineMode && blazeDashboardLink() } - { ! canInit && reason === 'user_not_connected' && ! isOfflineMode && ( - - ) } ); } diff --git a/projects/plugins/jetpack/_inc/client/writing/post-by-email.jsx b/projects/plugins/jetpack/_inc/client/writing/post-by-email.jsx index 152b83e58a29b..7224dd4006e3f 100644 --- a/projects/plugins/jetpack/_inc/client/writing/post-by-email.jsx +++ b/projects/plugins/jetpack/_inc/client/writing/post-by-email.jsx @@ -2,7 +2,6 @@ import { getRedirectUrl } from '@automattic/jetpack-components'; import { __, _x } from '@wordpress/i18n'; import Button from 'components/button'; import ClipboardButtonInput from 'components/clipboard-button-input'; -import ConnectUserBar from 'components/connect-user-bar'; import { FormFieldset, FormLegend, FormLabel } from 'components/forms'; import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers'; import { ModuleToggle } from 'components/module-toggle'; @@ -13,6 +12,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { getModule } from 'state/modules'; import { isModuleFound as _isModuleFound } from 'state/search'; +import { FEATURE_POST_BY_EMAIL } from '../lib/plans/constants'; class PostByEmail extends React.Component { regeneratePostByEmailAddress = event => { @@ -44,7 +44,12 @@ class PostByEmail extends React.Component { emailAddress = this.address(); return ( - + - - { ! this.props.isUnavailableInOfflineMode( 'post-by-email' ) && ! this.props.isLinked && ( - - ) } ); } diff --git a/projects/plugins/jetpack/changelog/update-jetpack-settings-connection-nudges b/projects/plugins/jetpack/changelog/update-jetpack-settings-connection-nudges new file mode 100644 index 0000000000000..394cbd36b3139 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-jetpack-settings-connection-nudges @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Unify connection nudge design on Jetpack Settings