Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update/jetpack settings connection nudges #39591

Merged
merged 2 commits into from
Oct 1, 2024
Merged

Update/jetpack settings connection nudges #39591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
507b4c5
Unify connection nudges on settings
CodeyGuyDylan Sep 30, 2024
80324e4
changelog
CodeyGuyDylan Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 117 additions & 1 deletion projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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 '';
Expand Down Expand Up @@ -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 => ( {
Expand Down
22 changes: 12 additions & 10 deletions projects/plugins/jetpack/_inc/client/earn/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 }
/>
);
}

Expand Down
23 changes: 17 additions & 6 deletions projects/plugins/jetpack/_inc/client/lib/plans/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

/**
Expand Down
14 changes: 3 additions & 11 deletions projects/plugins/jetpack/_inc/client/security/monitor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 (
Expand All @@ -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
Expand Down Expand Up @@ -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>
);
}
Expand Down
11 changes: 2 additions & 9 deletions projects/plugins/jetpack/_inc/client/security/sso.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 ) }
Expand Down
8 changes: 7 additions & 1 deletion projects/plugins/jetpack/_inc/client/settings/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 }
Expand Down
13 changes: 2 additions & 11 deletions projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -95,6 +94,7 @@ export const Publicize = withModuleSettingsFormHelpers(
header={ _x( 'Jetpack Social', 'Settings header', 'jetpack' ) }
module="publicize"
hideButton
feature={ FEATURE_JETPACK_SOCIAL }
>
{ userCanManageModules && (
<SettingsGroup
Expand Down Expand Up @@ -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>
);
Expand Down
Loading
Loading