Guided Tours: Add Jetpack Plugin Autoupdate Tour (#25474)

* Guided Tours: Add Jetpack Plugin Autoupdate Tour * Jetpack Checklist: Trigger Plugin Updates Tour * Plugins: Add plugin slug to Plugin item className * Query Plugins from checklist early
Automattic · Jul 20, 2018 · a3cac49 · a3cac49
1 parent 69c6525
commit a3cac49
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 6 deletions.
diff --git a/client/layout/guided-tours/config.js b/client/layout/guided-tours/config.js
@@ -20,6 +20,7 @@ import { ChecklistSiteTitleTour } from 'layout/guided-tours/tours/checklist-site
 import { ChecklistUserAvatarTour } from 'layout/guided-tours/tours/checklist-user-avatar-tour';
 import { JetpackBasicTour } from 'layout/guided-tours/tours/jetpack-basic-tour';
 import { JetpackMonitoringTour } from 'layout/guided-tours/tours/jetpack-monitoring-tour';
+import { JetpackPluginUpdatesTour } from 'layout/guided-tours/tours/jetpack-plugin-updates-tour';
 import { JetpackSignInTour } from 'layout/guided-tours/tours/jetpack-sign-in-tour';
 import { SimplePaymentsEmailTour } from 'layout/guided-tours/tours/simple-payments-email-tour';
 import { PluginsBasicTour } from 'layout/guided-tours/tours/plugins-basic-tour';
@@ -34,6 +35,7 @@ export default combineTours( {
 	checklistUserAvatar: ChecklistUserAvatarTour,
 	jetpack: JetpackBasicTour,
 	jetpackMonitoring: JetpackMonitoringTour,
+	jetpackPluginUpdates: JetpackPluginUpdatesTour,
 	jetpackSignIn: JetpackSignInTour,
 	main: MainTour,
 	editorBasicsTour: EditorBasicsTour,

diff --git a/client/layout/guided-tours/tours/jetpack-plugin-updates-tour.js b/client/layout/guided-tours/tours/jetpack-plugin-updates-tour.js
@@ -0,0 +1,88 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import Gridicon from 'gridicons';
+import React, { Fragment } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import PluginsStore from 'lib/plugins/store';
+import { getSelectedSite } from 'state/ui/selectors';
+import {
+	ButtonRow,
+	Continue,
+	makeTour,
+	Quit,
+	SiteLink,
+	Step,
+	Tour,
+} from 'layout/guided-tours/config-elements';
+
+export const JetpackPluginUpdatesTour = makeTour(
+	<Tour name="jetpackPluginUpdates" version="20180611">
+		<Step
+			name="init"
+			when={ state => {
+				const site = getSelectedSite( state );
+				const res =
+					! PluginsStore.isFetchingSite( site ) && !! PluginsStore.getSitePlugin( site, 'jetpack' );
+				return res;
+			} }
+			target=".plugin-item-jetpack .form-toggle__switch"
+			arrow="top-left"
+			placement="below"
+			style={ {
+				animationDelay: '0.7s',
+				zIndex: 1,
+			} }
+		>
+			{ ( { translate } ) => (
+				<Fragment>
+					<p>
+						{ translate(
+							"Let's activate autoupdates for Jetpack to ensure you're always " +
+								'up-to-date with the latest features and security fixes.'
+						) }
+					</p>
+					<ButtonRow>
+						<Continue
+							target=".plugin-item-jetpack .form-toggle__switch"
+							step="finish"
+							click
+							hidden
+						/>
+						<SiteLink href="/plans/my-plan/:site">
+							{ translate( 'Return to the checklist' ) }
+						</SiteLink>
+					</ButtonRow>
+				</Fragment>
+			) }
+		</Step>
+
+		<Step name="finish" placement="right">
+			{ ( { translate } ) => (
+				<Fragment>
+					<h1 className="tours__title">
+						<span className="tours__completed-icon-wrapper">
+							<Gridicon icon="checkmark" className="tours__completed-icon" />
+						</span>
+						{ translate( 'Excellent, you’re done!' ) }
+					</h1>
+					<p>
+						{ translate(
+							'Jetpack will now autoupdate for you. Would you like to continue setting up the security essential features for your site?'
+						) }
+					</p>
+					<ButtonRow>
+						<SiteLink isButton href="/plans/my-plan/:site">
+							{ translate( "Yes, let's do it." ) }
+						</SiteLink>
+						<Quit>{ translate( 'No thanks.' ) }</Quit>
+					</ButtonRow>
+				</Fragment>
+			) }
+		</Step>
+	</Tour>
+);
diff --git a/client/my-sites/checklist/jetpack-checklist.js b/client/my-sites/checklist/jetpack-checklist.js
@@ -7,15 +7,15 @@ import { translate } from 'i18n-calypso';
 export const tasks = [
 	{
 		id: 'jetpack_brute_force',
-		completedTitle: translate(
-			"We've automatically protected you from brute force login attacks."
-		),
+		title: translate( "We've automatically protected you from brute force login attacks." ),
 		completed: true,
+		description: '', // Required prop, item is always complete
 	},
 	{
 		id: 'jetpack_spam_filtering',
-		completedTitle: translate( "We've automatically turned on spam filtering." ),
+		title: translate( "We've automatically turned on spam filtering." ),
 		completed: true,
+		description: '', // Required prop, item is always complete
 	},
 	{
 		id: 'jetpack_backups',
@@ -50,6 +50,7 @@ export const tasks = [
 		completedTitle: translate( 'You turned on automatic plugin updates.' ),
 		completedButtonText: translate( 'Change' ),
 		duration: translate( '%d minute', '%d minutes', { count: 3, args: [ 3 ] } ),
+		tour: 'jetpackPluginUpdates',
 		url: '/plugins/manage/$siteSlug',
 	},
 	{

diff --git a/client/my-sites/plans/current-plan/index.jsx b/client/my-sites/plans/current-plan/index.jsx
@@ -36,6 +36,7 @@ import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer'
 import SidebarNavigation from 'my-sites/sidebar-navigation';
 import ChecklistShow from 'my-sites/checklist/checklist-show';
 import { isEnabled } from 'config';
+import QueryJetpackPlugins from 'components/data/query-jetpack-plugins';
 
 class CurrentPlan extends Component {
 	static propTypes = {
@@ -146,7 +147,12 @@ class CurrentPlan extends Component {
 					/>
 					{ isEnabled( 'jetpack/checklist' ) &&
 						isJetpack &&
-						! isAutomatedTransfer && <ChecklistShow /> }
+						! isAutomatedTransfer && (
+							<Fragment>
+								<QueryJetpackPlugins siteIds={ [ selectedSiteId ] } />
+								<ChecklistShow />
+							</Fragment>
+						) }
 					<div
 						className={ classNames( 'current-plan__header-text current-plan__text', {
 							'is-placeholder': { isLoading },

diff --git a/client/my-sites/plugins/plugin-item/plugin-item.jsx b/client/my-sites/plugins/plugin-item/plugin-item.jsx
@@ -343,7 +343,9 @@ class PluginItem extends Component {
 			pluginActions = this.renderActions();
 		}
 
-		const pluginItemClasses = classNames( 'plugin-item', { disabled } );
+		const pluginItemClasses = classNames( 'plugin-item', 'plugin-item-' + plugin.slug, {
+			disabled,
+		} );
 
 		return (
 			<CompactCard className={ pluginItemClasses }>