Guided Tours: find & show tours based on state selectors

Previously, GuidedTours was able to trigger only a single tour -- `
main`. This was based solely on the presence of `tour=main` in the
query arguments. This change introduces a selectors-based approach to
triggering tours that is based on the current context and tour-specific
requirements for that context.

client/boot/index.js

@@ -281,6 +281,11 @@ function reduxStoreReady( reduxStore ) {
 		}
 
 		// If `?tour` is present, show the guided tour
+		//
+		// TODO(mcsf): Though the rest of the Guided Tours selector-based code
+		// works without this, analytics are triggered during the dispatch of
+		// this action. Thus, keep dispatching this until a solution is
+		// implemented.
 		if ( config.isEnabled( 'guided-tours' ) && context.query.tour ) {
 			context.store.dispatch( showGuidedTour( {
 				shouldShow: true,

client/layout/guided-tours/config.js

@@ -11,7 +11,7 @@ import i18n from 'i18n-calypso';
  */
 import { getSelectedSite } from 'state/ui/selectors';
 
-function get( tour = 'main' ) {
+function get( tour ) {
 	const tours = {
 		main: {
 			version: '20160601',
@@ -108,17 +108,9 @@ function get( tour = 'main' ) {
 				linkUrl: 'https://learn.wordpress.com',
 			},
 		},
-		test: {
-			version: '20160516',
-			init: {
-				description: 'Testing multi tour support',
-				text: i18n.translate( 'Single step tour!' ),
-				type: 'FinishStep',
-			},
-		}
 	};
 
-	return tours[ tour ] || tours.main;
+	return tours[ tour ] || null;
 }
 
 export default {

client/layout/guided-tours/index.js

@@ -77,7 +77,10 @@ class GuidedTours extends Component {
 			return true;
 		};
 		const proceedToNextStep = () => {
-			this.props.nextGuidedTourStep( { stepName: nextStepName } );
+			this.props.nextGuidedTourStep( {
+				stepName: nextStepName,
+				tour: this.props.tourState.tour,
+			} );
 		};
 		const abortTour = () => {
 			const ERROR_WAITED_TOO_LONG = 'waited too long for next target';
@@ -99,6 +102,7 @@ class GuidedTours extends Component {
 		this.currentTarget && this.currentTarget.classList.remove( 'guided-tours__overlay' );
 		this.props.quitGuidedTour( Object.assign( {
 			stepName: this.props.tourState.stepName,
+			tour: this.props.tourState.tour,
 		}, options ) );
 	}
 

client/state/ui/action-log/reducer.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import includes from 'lodash/includes';
-import takeRight from 'lodash/takeRight';
+import { takeRight } from 'lodash';
 
 /**
  * Internal dependencies
@@ -15,19 +14,29 @@ import {
 	ROUTE_SET,
 } from 'state/action-types';
 
-const isRelevantActionType = includes.bind( null, [
+const relevantTypes = {
 	GUIDED_TOUR_SHOW,
 	GUIDED_TOUR_UPDATE,
 	THEMES_RECEIVE,
 	PREVIEW_IS_SHOWING,
 	ROUTE_SET,
-] );
+};
+
+const isRelevantAction = ( action ) =>
+	relevantTypes.hasOwnProperty( action.type ) &&
+	( typeof relevantTypes[ action.type ] !== 'function' ||
+		relevantTypes[ action.type ]( action ) );
 
 const newAction = ( action ) => ( {
 	...action, timestamp: Date.now()
 } );
 
+const maybeAdd = ( state, action ) =>
+	action
+		? takeRight( [ ...state, action ], 50 )
+		: state;
+
 export default ( state = [], action ) =>
-	isRelevantActionType( action.type )
-		? takeRight( [ ...state, newAction( action ) ], 50 )
+	isRelevantAction( action )
+		? maybeAdd( state, newAction( action ) )
 		: state;

client/state/ui/action-log/test/reducer.js

@@ -9,6 +9,7 @@ import { expect } from 'chai';
 import { useFakeTimers } from 'test/helpers/use-sinon';
 import {
 	ROUTE_SET,
+	COMMENTS_LIKE,
 } from 'state/action-types';
 import reducer from '../reducer';
 
@@ -25,11 +26,11 @@ describe( 'reducer', () => {
 		const actions = [
 			{
 				type: ROUTE_SET,
-				path: '/menus/77203074',
+				path: '/design/77203074',
 			},
 			{
 				type: ROUTE_SET,
-				path: '/menus/foobar',
+				path: '/design/foobar',
 			},
 		];
 		const state = actions.reduce( reducer, undefined );
@@ -39,4 +40,20 @@ describe( 'reducer', () => {
 			{ ...actions[ 1 ], timestamp: 1337 },
 		] );
 	} );
+
+	it( 'should discard them if payload is irrelevant', () => {
+		const actions = [
+			{
+				type: COMMENTS_LIKE,
+				path: '/menus/77203074',
+			},
+			{
+				type: COMMENTS_LIKE,
+				path: '/menus/foobar',
+			},
+		];
+		const state = actions.reduce( reducer, undefined );
+
+		expect( state ).to.eql( [] );
+	} );
 } );

client/state/ui/guided-tours/actions.js

@@ -21,14 +21,16 @@ import { getPreference } from 'state/preferences/selectors';
  * @param {Object} options Options object, see fn signature.
  * @return {Object} Action object
  */
-export function showGuidedTour( { shouldShow, shouldDelay = false, tour = 'main' } ) {
+export function showGuidedTour( { shouldShow, shouldDelay = false, tour } ) {
 	const showAction = {
 		type: GUIDED_TOUR_SHOW,
 		shouldShow,
 		shouldDelay,
 		tour,
 	};
 
+	// TODO(mcsf): track this *somewhere*, now that we'll stop relying on this
+	// action for launching tours
 	const trackEvent = recordTracksEvent( 'calypso_guided_tours_show', {
 		tour_version: guidedToursConfig.get( tour ).version,
 		tour,
@@ -37,14 +39,15 @@ export function showGuidedTour( { shouldShow, shouldDelay = false, tour = 'main'
 	return shouldDelay ? showAction : withAnalytics( trackEvent, showAction );
 }
 
-export function quitGuidedTour( { tour = 'main', stepName, finished, error } ) {
+export function quitGuidedTour( { tour, stepName, finished, error } ) {
 	const quitAction = {
 		type: GUIDED_TOUR_UPDATE,
 		shouldShow: false,
 		shouldReallyShow: false,
 		shouldDelay: false,
 		tour,
 		stepName,
+		finished,
 	};
 
 	const trackEvent = recordTracksEvent( `calypso_guided_tours_${ finished ? 'finished' : 'quit' }`, {
@@ -55,14 +58,15 @@ export function quitGuidedTour( { tour = 'main', stepName, finished, error } ) {
 	} );
 
 	return ( dispatch, getState ) => {
-		dispatch( withAnalytics( trackEvent, quitAction ) );
 		dispatch( addSeenGuidedTour( getState, tour, finished ) );
+		dispatch( withAnalytics( trackEvent, quitAction ) );
 	};
 }
 
-export function nextGuidedTourStep( { tour = 'main', stepName } ) {
+export function nextGuidedTourStep( { tour, stepName } ) {
 	const nextAction = {
 		type: GUIDED_TOUR_UPDATE,
+		tour,
 		stepName,
 	};