Guided Tours: Add Jetpack Sign-In Tour (#25864)

Automattic · Jul 9, 2018 · 5e62832 · 5e62832
1 parent 0dcf0db
commit 5e62832
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 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 { JetpackSignInTour } from 'layout/guided-tours/tours/jetpack-sign-in-tour';
 import { SimplePaymentsEmailTour } from 'layout/guided-tours/tours/simple-payments-email-tour';
 
 export default combineTours( {
@@ -32,6 +33,7 @@ export default combineTours( {
 	checklistUserAvatar: ChecklistUserAvatarTour,
 	jetpack: JetpackBasicTour,
 	jetpackMonitoring: JetpackMonitoringTour,
+	jetpackSignIn: JetpackSignInTour,
 	main: MainTour,
 	editorBasicsTour: EditorBasicsTour,
 	mediaBasicsTour: MediaBasicsTour,

diff --git a/client/layout/guided-tours/tours/jetpack-sign-in-tour.js b/client/layout/guided-tours/tours/jetpack-sign-in-tour.js
@@ -0,0 +1,75 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React, { Fragment } from 'react';
+import Gridicon from 'gridicons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ButtonRow,
+	Continue,
+	makeTour,
+	Quit,
+	SiteLink,
+	Step,
+	Tour,
+} from 'layout/guided-tours/config-elements';
+
+export const JetpackSignInTour = makeTour(
+	<Tour name="jetpackSignIn" version="20180704">
+		<Step
+			name="init"
+			target=".sso__card .form-toggle__switch"
+			arrow="top-left"
+			placement="below"
+			style={ {
+				animationDelay: '0.7s',
+				zIndex: 1,
+			} }
+		>
+			{ ( { translate } ) => (
+				<Fragment>
+					<p>
+						{ translate(
+							"Let's enable sign in using WordPress.com's secure authentication " +
+								'for easy login by activating the toggle switch above.'
+						) }
+					</p>
+					<ButtonRow>
+						<Continue target=".sso__card .form-toggle__switch" step="finish" click hidden />
+						<SiteLink href="/checklist/: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(
+							'You can now sign into your Jetpack site with your WordPress.com account. ' +
+								'Would you like to continue setting up the security essential features for your site?'
+						) }
+					</p>
+					<ButtonRow>
+						<SiteLink isButton href={ '/checklist/: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
@@ -44,6 +44,7 @@ const tasks = {
 		completedTitle: translate( 'You completed your sign in preferences.' ),
 		completedButtonText: 'Change',
 		duration: translate( '3 min' ),
+		tour: 'jetpackSignIn',
 		url: '/settings/security/$siteSlug',
 	},
 };