Merge pull request #6417 from Automattic/add/guided-tours-log-selecto…

…rs-rebased

Guided Tours: Find & show tours based on state selectors

client/boot/index.js

@@ -349,7 +349,9 @@ function reduxStoreReady( reduxStore ) {
 
 	// clear notices
 	page( '*', function( context, next ) {
-		context.store.dispatch( setRouteAction( context.pathname ) );
+		context.store.dispatch( setRouteAction(
+					context.pathname,
+					context.query ) );
 		next();
 	} );
 

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
@@ -14,18 +13,28 @@ import {
 	ROUTE_SET,
 } from 'state/action-types';
 
-const isRelevantActionType = includes.bind( null, [
+const relevantTypes = {
 	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/actions.js

@@ -42,13 +42,15 @@ export function setAllSitesSelected() {
 /**
  * Returns an action object signalling that the current route is to be changed
  *
- * @param  {String} path Route path
- * @return {Object}      Action object
+ * @param  {String} path    Route path
+ * @param  {Object} [query] Query arguments
+ * @return {Object}         Action object
  */
-export function setRoute( path ) {
+export function setRoute( path, query = {} ) {
 	return {
 		type: ROUTE_SET,
-		path
+		path,
+		query,
 	};
 }
 

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

@@ -14,13 +14,14 @@ import guidedToursConfig from 'layout/guided-tours/config';
 import { savePreference } from 'state/preferences/actions';
 import { getPreference } from 'state/preferences/selectors';
 
-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,
 		tour,
 		stepName,
+		finished,
 	};
 
 	const trackEvent = recordTracksEvent( `calypso_guided_tours_${ finished ? 'finished' : 'quit' }`, {
@@ -31,14 +32,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,
 	};