Add support for groups in Happychat

client/lib/happychat/connection.js

@@ -13,7 +13,7 @@ const debug = require( 'debug' )( 'calypso:happychat:connection' );
 
 class Connection extends EventEmitter {
 
-	open( user_id, token, locale ) {
+	open( signer_user_id, jwt, locale, groups ) {
 		if ( ! this.openSocket ) {
 			this.openSocket = new Promise( resolve => {
 				const url = config( 'happychat_url' );
@@ -25,7 +25,7 @@ class Connection extends EventEmitter {
 						resolve( socket );
 					} )
 					.on( 'token', handler => {
-						handler( { signer_user_id: user_id, jwt: token, locale } );
+						handler( { signer_user_id, jwt, locale, groups } );
 					} )
 					.on( 'unauthorized', () => {
 						socket.close();
@@ -81,6 +81,19 @@ class Connection extends EventEmitter {
 		);
 	}
 
+
+	/**
+	 * Update chat preferences (locale and groups)
+	 * @param {string} locale representing the user selected locale
+	 * @param {array} groups of string happychat groups (wp.com, jpop) based on the site selected
+	 */
+	preferences( locale, groups ) {
+		this.openSocket.then(
+			socket => socket.emit( 'preferences', { locale, groups } ),
+			e => debug( 'failed to send preferences', e )
+		);
+	}
+
 	// This is a temporary measure — we want to start sending some events that are
 	// picked up by the staged HUD but not by the production HUD. The only way to do this
 	// now is to send a different event type, and make the staging HUD render this event.

client/lib/happychat/index.js

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import {
+	HAPPYCHAT_GROUP_WPCOM,
+	HAPPYCHAT_GROUP_JPOP
+} from 'state/happychat/constants';
+import { isJetpackSite } from 'state/sites/selectors';
+
+/**
+ * Get happychat group for site id
+ * For now if the site is jetpack jpop will be set as the group otherwise WP.COM
+ * @param {object} state Current state
+ * @param {int} siteId The site id, if no siteId is present primary siteId will be used
+ * @returns {string} The happychat group for the selected site
+ */
+export const getGroupForSiteId = ( state, siteId ) => {
+	switch ( true ) {
+		case isJetpackSite( state, siteId ):
+			return HAPPYCHAT_GROUP_JPOP;
+
+		default:
+			return HAPPYCHAT_GROUP_WPCOM;
+	}
+};
+
+/**
+ * Grab the group or groups for happychat based on siteId
+ * @param {object} state Current state
+ * @param {int} siteId The site id, if no siteId is present primary siteId will be used
+ * @returns {array} of groups for site Id
+ */
+export const getGroups = ( state, siteId ) => {
+	return [ getGroupForSiteId( state, siteId ) ];
+};

client/lib/happychat/test/index.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import {
+	HAPPYCHAT_GROUP_WPCOM,
+	HAPPYCHAT_GROUP_JPOP
+} from 'state/happychat/constants';
+import { getGroups } from 'lib/happychat';
+
+describe( 'groups', () => {
+	describe( '#getGroups()', () => {
+		it( 'should return default group for no sites', () => {
+			const siteId = 1;
+			const state = {
+				sites: {
+					items: {}
+				}
+			};
+
+			expect( getGroups( state, siteId ) ).to.eql( [ HAPPYCHAT_GROUP_WPCOM ] );
+		} );
+
+		it( 'should return default group for no siteId', () => {
+			const siteId = undefined;
+			const state = {
+				sites: {
+					items: {
+						1: {}
+					}
+				}
+			};
+
+			expect( getGroups( state, siteId ) ).to.eql( [ HAPPYCHAT_GROUP_WPCOM ] );
+		} );
+
+		it( 'should return JPOP group for jetpack site', () => {
+			const siteId = 1;
+			const state = {
+				sites: {
+					items: {
+						[ siteId ]: { jetpack: true }
+					}
+				}
+			};
+
+			expect( getGroups( state, siteId ) ).to.eql( [ HAPPYCHAT_GROUP_JPOP ] );
+		} );
+	} );
+} );

client/me/help/help-contact-form/index.jsx

@@ -23,7 +23,9 @@ import FormButton from 'components/forms/form-button';
 import SitesDropdown from 'components/sites-dropdown';
 import siteList from 'lib/sites-list';
 import ChatClosureNotice from '../chat-closure-notice';
+import QuerySites from 'components/data/query-sites';
 import { getSelectedSiteId } from 'state/ui/selectors';
+import { selectSiteId } from 'state/help/actions';
 
 /**
  * Module variables
@@ -109,6 +111,7 @@ export const HelpContactForm = React.createClass( {
 	setSite( siteSlug ) {
 		const site = sites.getSite( siteSlug );
 		this.setState( { siteId: site.ID } );
+		this.props.onChangeSite( site.ID );
 	},
 
 	trackClickStats( selectionName, selectedOption ) {
@@ -222,6 +225,7 @@ export const HelpContactForm = React.createClass( {
 
 		return (
 			<div className="help-contact-form">
+				<QuerySites allSites />
 				<ChatClosureNotice
 					reason="eoy-holidays"
 					from="2016-12-24T00:00:00Z"
@@ -279,4 +283,12 @@ const mapStateToProps = ( state ) => {
 	};
 };
 
-export default connect( mapStateToProps )( localize( HelpContactForm ) );
+const mapDispatchToProps = ( dispatch ) => {
+	return {
+		onChangeSite( siteId ) {
+			dispatch( selectSiteId( siteId ) );
+		}
+	};
+};
+
+export default connect( mapStateToProps, mapDispatchToProps )( localize( HelpContactForm ) );

client/state/action-types.js

@@ -178,6 +178,7 @@ export const HAPPYCHAT_SET_MESSAGE = 'HAPPYCHAT_SET_MESSAGE';
 export const HAPPYCHAT_TRANSCRIPT_RECEIVE = 'HAPPYCHAT_TRANSCRIPT_RECEIVE';
 export const HAPPYCHAT_TRANSCRIPT_REQUEST = 'HAPPYCHAT_TRANSCRIPT_REQUEST';
 export const HELP_COURSES_RECEIVE = 'HELP_COURSES_RECEIVE';
+export const HELP_SELECTED_SITE = 'HELP_SELECTED_SITE';
 export const HELP_TICKET_CONFIGURATION_DISMISS_ERROR = 'HELP_TICKET_CONFIGURATION_DISMISS_ERROR';
 export const HELP_TICKET_CONFIGURATION_REQUEST = 'HELP_TICKET_CONFIGURATION_REQUEST';
 export const HELP_TICKET_CONFIGURATION_REQUEST_FAILURE = 'HELP_TICKET_CONFIGURATION_REQUEST_FAILURE';

client/state/happychat/constants.js

@@ -7,3 +7,9 @@ export const HAPPYCHAT_CONNECTION_ERROR_TRANSPORT_ERROR = 'transport error';
 
 // Max number of messages to save between refreshes
 export const HAPPYCHAT_MAX_STORED_MESSAGES = 30;
+
+// Groups
+export const HAPPYCHAT_GROUP_JPOP = 'jpop';
+export const HAPPYCHAT_GROUP_WOO = 'woo';
+export const HAPPYCHAT_GROUP_JPPHP = 'jpphp';
+export const HAPPYCHAT_GROUP_WPCOM = 'WP.com';

client/state/happychat/middleware.js

@@ -20,6 +20,7 @@ import {
 	HAPPYCHAT_SEND_MESSAGE,
 	HAPPYCHAT_SET_MESSAGE,
 	HAPPYCHAT_TRANSCRIPT_REQUEST,
+	HELP_SELECTED_SITE,
 	ROUTE_SET,
 
 	COMMENTS_CHANGE_STATUS_SUCESS,
@@ -62,6 +63,7 @@ import {
 	getCurrentUser,
 	getCurrentUserLocale,
 } from 'state/current-user/selectors';
+import { getGroups } from 'lib/happychat';
 
 const debug = require( 'debug' )( 'calypso:happychat:actions' );
 
@@ -99,6 +101,7 @@ export const connectChat = ( connection, { getState, dispatch } ) => {
 
 	const user = getCurrentUser( state );
 	const locale = getCurrentUserLocale( state );
+	const groups = getGroups( state );
 
 	// Notify that a new connection is being established
 	dispatch( setConnecting() );
@@ -129,10 +132,19 @@ export const connectChat = ( connection, { getState, dispatch } ) => {
 
 			return sign( { user, session_id } );
 		} )
-		.then( ( { jwt } ) => connection.open( user.ID, jwt, locale ) )
+		.then( ( { jwt } ) => connection.open( user.ID, jwt, locale, groups ) )
 		.catch( e => debug( 'failed to start happychat session', e, e.stack ) );
 };
 
+
+export const updateChatPreferences = ( connection, { getState }, siteId ) => {
+	const state = getState();
+	const locale = getCurrentUserLocale( state );
+	const groups = getGroups( state, siteId );
+
+	connection.preferences( locale, groups );
+};
+
 export const requestTranscript = ( connection, { dispatch } ) => {
 	debug( 'requesting current session transcript' );
 
@@ -309,6 +321,10 @@ export default function( connection = null ) {
 			case HAPPYCHAT_INITIALIZE:
 				connectIfRecentlyActive( connection, store );
 				break;
+
+			case HELP_SELECTED_SITE:
+				updateChatPreferences( connection, store, action.siteId );
+				break;
 
 			case HAPPYCHAT_SEND_USER_INFO:
 				sendInfo( connection, store, action.siteUrl );

client/state/happychat/test/middleware.js

@@ -34,6 +34,7 @@ import middleware, {
 	sendActionLogsAndEvents,
 	sendAnalyticsLogEvent,
 	sendRouteSetEventMessage,
+	updateChatPreferences,
 	sendInfo,
 } from '../middleware';
 import * as selectors from '../selectors';
@@ -244,6 +245,27 @@ describe( 'middleware', () => {
 		} );
 	} );
 
+	describe( 'HELP_SELECTED_SITE action', () => {
+		it( 'should send the locale and groups through the connection and send a preferences signal', () => {
+			const state = {
+				currentUser: {
+					locale: 'en',
+				},
+				sites: {
+					items: {
+						1: { ID: 1 }
+					}
+				}
+			};
+			const getState = () => state;
+			const connection = {
+				preferences: stub(),
+			};
+			updateChatPreferences( connection, { getState }, 1 );
+			expect( connection.preferences ).to.have.been.called;
+		} );
+	} );
+
 	describe( 'ROUTE_SET action', () => {
 		let connection;
 		const action = { path: '/me' };

client/state/help/actions.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { HELP_SELECTED_SITE } from 'state/action-types';
+
+export const selectSiteId = ( siteId ) => ( {
+	type: HELP_SELECTED_SITE, siteId
+} );

client/state/help/reducer.js

@@ -1,13 +1,44 @@
+/**
+ * External dependencies
+ */
+import isEmpty from 'lodash/isEmpty';
+import { combineReducers } from 'redux';
+
 /**
  * Internal dependencies
  */
+import {
+	HELP_SELECTED_SITE,
+	SITES_RECEIVE,
+} from 'state/action-types';
 import courses from './courses/reducer';
 import { combineReducers } from 'state/utils';
 import directly from './directly/reducer';
 import ticket from './ticket/reducer';
+import { createReducer } from 'state/utils';
+
+const selectFirstSite = ( sites ) => {
+	if ( ! isEmpty( sites ) ) {
+		return sites[ 0 ].ID;
+	}
+	return null;
+};
+
+/**
+ * Tracks the site id for the selected site in the help/contact form
+ *
+ * @param  {Object} state  Current state
+ * @param  {Object} action Action payload
+ * @return {Object}        Updated state
+ */
+export const selectedSiteId = createReducer( null, {
+	[ HELP_SELECTED_SITE ]: ( state, action ) => action.siteId,
+	[ SITES_RECEIVE ]: ( state, action ) => selectFirstSite( action.sites ),
+} );
 
 export default combineReducers( {
 	courses,
 	directly,
 	ticket,
+	selectedSiteId,
 } );

client/state/help/selectors.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import createSelector from 'lib/create-selector';
+
+export const getHelpSelectedSiteId = createSelector(
+	state => state.help.selectedSiteId
+);

client/state/help/test/actions.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import {
+	HELP_SELECTED_SITE
+} from 'state/action-types';
+import {
+	selectSiteId,
+} from '../actions';
+
+describe( 'actions', () => {
+	describe( '#selectSiteId()', () => {
+		it( 'should return an action object', () => {
+			const action = selectSiteId( 1 );
+
+			expect( action ).to.eql( {
+				type: HELP_SELECTED_SITE,
+				siteId: 1,
+			} );
+		} );
+	} );
+} );