People: Invites: Add accepted invite welcome message

client/accept-invite/actions.js

@@ -2,6 +2,8 @@
  * Internal dependencies
  */
 import wpcom from 'lib/wp' ;
+import Dispatcher from 'dispatcher';
+import { DISPLAY_INVITE_ACCEPTED_NOTICE, DISMISS_INVITE_ACCEPTED_NOTICE, DISPLAY_INVITE_DECLINED_NOTICE, DISMISS_INVITE_DECLINED_NOTICE } from './invite-message/constants'
 
 export function createAccount( userData, callback ) {
 	return wpcom.undocumented().usersNew(
@@ -23,3 +25,28 @@ export function acceptInvite( invite, callback, bearerToken ) {
 		callback
 	);
 }
+
+export function displayInviteAccepted( siteId ) {
+	Dispatcher.handleViewAction( {
+		type: DISPLAY_INVITE_ACCEPTED_NOTICE,
+		siteId
+	} );
+}
+
+export function dismissInviteAccepted() {
+	Dispatcher.handleViewAction( {
+		type: DISMISS_INVITE_ACCEPTED_NOTICE
+	} );
+}
+
+export function displayInviteDeclined() {
+	Dispatcher.handleViewAction( {
+		type: DISPLAY_INVITE_DECLINED_NOTICE
+	} );
+}
+
+export function dismissInviteDeclined() {
+	Dispatcher.handleViewAction( {
+		type: DISMISS_INVITE_DECLINED_NOTICE
+	} );
+}

client/accept-invite/invite-message/constants.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import keyMirror from 'react/lib/keyMirror';
+
+export default keyMirror( {
+	DISPLAY_INVITE_ACCEPTED_NOTICE: null,
+	DISMISS_INVITE_ACCEPTED_NOTICE: null,
+	DISPLAY_INVITE_DECLINED_NOTICE: null,
+	DISMISS_INVITE_DECLINED_NOTICE: null
+} );

client/accept-invite/invite-message/index.jsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import React from 'react'
+
+/**
+ * Internal dependencies
+ */
+import Notice from 'components/notice'
+import { dismissInviteAccepted, dismissInviteDeclined } from 'accept-invite/actions'
+import store from 'accept-invite/invite-message/store'
+
+export default React.createClass( {
+
+	getInitialState: function() {
+		return store.get();
+	},
+
+	componentWillMount() {
+		store.on( 'change', () => this.setState( this.getInitialState ) );
+	},
+
+	componentWillUnmount() {
+		store.off( 'change', () => this.setState( this.getInitialState ) );
+	},
+
+	render() {
+		if ( ! this.props.sites ) {
+			return null;
+		}
+		const { accepted, declined, siteId } = this.state;
+		if ( accepted ) {
+			const site = this.props.sites.getSite( siteId );
+			if ( ! site ) {
+				return null;
+			}
+			return (
+				<Notice status="is-success" onClick={ dismissInviteAccepted }>
+					<h3 className="invite-message__title">{ this.translate( 'You\'re now a user of: %(site)s', { args: { site: site.slug } } ) }</h3>
+					<p className="invite-message__intro">
+						{ this.translate( 'This is your site dashboard where you can write posts and control your site. ' ) }
+					</p>
+					<p className="invite-message__intro">
+						{
+							this.translate(
+								'Since you\'re new, you might like to {{docsLink}}take a tour{{/docsLink}}.',
+								{ components: { docsLink: <a href="http://en.support.wordpress.com/" target="_blank" /> } }
+							)
+						}
+					</p>
+				</Notice>
+			);
+		}
+		if ( declined ) {
+			return (
+				<Notice status="is-success" onClick={ dismissInviteDeclined }>
+					<h3>
+						{ this.translate( 'You declined to join' ) }
+					</h3>
+				</Notice>
+			);
+		}
+		return null;
+	}
+} )

client/accept-invite/invite-message/store.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { createReducerStore } from 'lib/store'
+import { DISPLAY_INVITE_ACCEPTED_NOTICE, DISMISS_INVITE_ACCEPTED_NOTICE, DISPLAY_INVITE_DECLINED_NOTICE, DISMISS_INVITE_DECLINED_NOTICE } from './constants'
+
+const InviteMessageStore = createReducerStore( ( state, payload ) => {
+	const { action } = payload;
+	let newState = Object.assign( {}, state );
+	switch ( action.type ) {
+		case DISPLAY_INVITE_ACCEPTED_NOTICE:
+			newState.accepted = true;
+			newState.siteId = action.siteId;
+			return newState;
+		case DISPLAY_INVITE_DECLINED_NOTICE:
+			newState.declined = true;
+			newState.siteId = action.siteId;
+			return newState;
+		case DISMISS_INVITE_ACCEPTED_NOTICE:
+		case DISMISS_INVITE_DECLINED_NOTICE:
+			newState.accepted = false;
+			newState.declined = false;
+			newState.siteId = false;
+			return newState;
+	}
+	return state;
+}, { accepted: false, declined: false, siteId: false } );
+
+export default InviteMessageStore;

client/accept-invite/main.jsx

@@ -63,16 +63,16 @@ export default React.createClass( {
 	},
 
 	getRedirectTo() {
-		const redirectTo = window.location.origin,
-			{ invite } = this.state.invite;
+		const { invite } = this.state.invite;
+		let redirectTo = window.location.origin;
 		switch ( invite.meta.role ) {
 			case 'viewer':
 			case 'follower':
-				return redirectTo;
 				break;
 			default:
-				return redirectTo + '/posts/' + invite.blog_id;
+				redirectTo += '/posts/' + invite.blog_id;
 		}
+		return redirectTo += '?invite_accepted=' + invite.blog_id;
 	},
 
 	renderForm() {

client/boot/index.js

@@ -30,6 +30,7 @@ var config = require( 'config' ),
 	translatorInvitation = require( 'layout/community-translator/invitation-utils' ),
 	layoutFocus = require( 'lib/layout-focus' ),
 	nuxWelcome = require( 'nux-welcome' ),
+	inviteActions = require( 'accept-invite/actions' ),
 	emailVerification = require( 'components/email-verification' ),
 	viewport = require( 'lib/viewport' ),
 	detectHistoryNavigation = require( 'lib/detect-history-navigation' ),
@@ -231,6 +232,11 @@ function boot() {
 			nuxWelcome.clearTempWelcome();
 		}
 
+		if ( context.query.invite_accepted ) {
+			inviteActions.displayInviteAccepted( parseInt( context.query.invite_accepted ) );
+			page( context.pathname );
+		}
+
 		// Bump general stat tracking overall Newdash usage
 		analytics.mc.bumpStat( { newdash_pageviews: 'route' } );
 

client/layout/index.jsx

@@ -19,6 +19,7 @@ var Masterbar = require( './masterbar' ),
 	EmailVerificationNotice = require( 'components/email-verification/email-verification-notice' ),
 	Welcome = require( 'my-sites/welcome/welcome' ),
 	WelcomeMessage = require( 'nux-welcome/welcome-message' ),
+	InviteMessage = require( 'accept-invite/invite-message' ),
 	analytics = require( 'analytics' ),
 	config = require( 'config' ),
 	PulsingDot = require( 'components/pulsing-dot' ),
@@ -107,6 +108,7 @@ module.exports = React.createClass( {
 					<Welcome isVisible={ showWelcome } closeAction={ this.closeWelcome } additionalClassName="NuxWelcome">
 						<WelcomeMessage welcomeSite={ newestSite } />
 					</Welcome>
+					<InviteMessage sites={ this.props.sites }/>
 					<EmailVerificationNotice user={ this.props.user } />
 					<NoticesList id="notices" notices={ notices.list } forcePinned={ 'post' === this.state.section } />
 					<TranslatorInvitation isVisible={ showInvitation } />