Invites: Refactor invites structure

client/boot/index.js

@@ -30,7 +30,6 @@ 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' ),
@@ -42,6 +41,7 @@ var config = require( 'config' ),
 	// The following mixins require i18n content, so must be required after i18n is initialized
 	Layout,
 	LoggedOutLayout;
+import { displayInviteAccepted } from 'lib/invites/actions';
 
 function init() {
 	var i18nLocaleStringsObject = null;
@@ -233,7 +233,7 @@ function boot() {
 		}
 
 		if ( context.query.invite_accepted ) {
-			inviteActions.displayInviteAccepted( parseInt( context.query.invite_accepted ) );
+			displayInviteAccepted( parseInt( context.query.invite_accepted ) );
 			page( context.pathname );
 		}
 

client/accept-invite/invite-form-header/index.jsx → client/components/invites/invite-form-header/index.jsx

@@ -4,16 +4,6 @@
 import React from 'react';
 import get from 'lodash/object/get';
 
-/**
- * Internal dependencies
- */
-import userModule from 'lib/user';
-
-/**
- * Module variables
- */
-const user = userModule();
-
 export default React.createClass( {
 	displayName: 'InviteFormHeader',
 
@@ -249,7 +239,7 @@ export default React.createClass( {
 		return (
 			<div className="invite-form-header">
 				<h3 className="invite-form-header__title">
-					{ user.get() ? this.getLoggedInTitleForInvite() : this.getLoggedOutTitleForInvite() }
+					{ this.props.user ? this.getLoggedInTitleForInvite() : this.getLoggedOutTitleForInvite() }
 				</h3>
 				{ roleExplanation &&
 					<p className="invite-form-header__explanation">

client/layout/index.jsx

@@ -19,7 +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' ),
+	InviteMessage = require( 'lib/invites/invite-message' ),
 	analytics = require( 'analytics' ),
 	config = require( 'config' ),
 	PulsingDot = require( 'components/pulsing-dot' ),

client/accept-invite/logged-in-accept/index.jsx → client/lib/invites/accept-invite/logged-in-accept/index.jsx

@@ -12,7 +12,7 @@ import Gravatar from 'components/gravatar';
 import Button from 'components/button';
 import config from 'config';
 import userModule from 'lib/user';
-import InviteFormHeader from '../invite-form-header';
+import InviteFormHeader from 'components/invites/invite-form-header';
 import { acceptInvite } from '../actions';
 
 const user = userModule();
@@ -28,7 +28,7 @@ export default React.createClass( {
 		return (
 			<div className={ classNames( 'logged-in-accept', this.props.className ) } >
 				<Card>
-					<InviteFormHeader { ...this.props } />
+					<InviteFormHeader { ...this.props } user={ user.get() } />
 					<div className="logged-in-accept__join-as">
 						<Gravatar user={ userObject } size={ 72 } />
 						{

client/accept-invite/main.jsx → client/lib/invites/accept/index.jsx

@@ -8,11 +8,11 @@ import classNames from 'classnames';
 /**
  * Internal Dependencies
  */
-import InviteHeader from './invite-header';
-import LoggedInAccept from './logged-in-accept';
-import LoggedOutInvite from './logged-out-invite';
+import InviteHeader from 'components/invites/invite-header';
+import LoggedInAccept from './logged-in';
+import LoggedOutInvite from './logged-out';
 import userModule from 'lib/user';
-import InvitesActions from 'lib/invites/actions';
+import { fetchInvite } from 'lib/invites/actions';
 import InvitesStore from 'lib/invites/stores/invites-validation';
 import EmptyContent from 'components/empty-content';
 
@@ -34,7 +34,7 @@ export default React.createClass( {
 	},
 
 	componentWillMount() {
-		InvitesActions.fetchInvite( this.props.site_id, this.props.invitation_key );
+		fetchInvite( this.props.site_id, this.props.invitation_key );
 		InvitesStore.on( 'change', this.refreshInvite );
 	},
 

client/lib/invites/accept/logged-in/index.jsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Card from 'components/card';
+import Gravatar from 'components/gravatar';
+import Button from 'components/button';
+import config from 'config';
+import userModule from 'lib/user';
+import InviteFormHeader from 'components/invites/invite-form-header';
+import { acceptInvite } from 'lib/invites/actions';
+
+const user = userModule();
+
+export default React.createClass( {
+
+	displayName: 'LoggedInAccept',
+
+	render() {
+		let userObject = user.get(),
+			signInLink = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );
+
+		return (
+			<div className={ classNames( 'logged-in-accept', this.props.className ) } >
+				<Card>
+					<InviteFormHeader { ...this.props } user={ user.get() } />
+					<div className="logged-in-accept__join-as">
+						<Gravatar user={ userObject } size={ 72 } />
+						{
+							this.translate( 'Join as {{usernameWrap}}%(username)s{{/usernameWrap}}', {
+								components: {
+									usernameWrap: <span className="logged-in-accept__join-as-username" />
+								},
+								args: {
+									username: userObject && userObject.display_name
+								}
+							} )
+						}
+					</div>
+					<div className="logged-in-accept__button-bar">
+						<Button href={ window.location.origin + '?invite_declined' }>
+							{ this.translate( 'Decline', { context: 'button' } ) }
+						</Button>
+						<Button primary onClick={ () => acceptInvite( this.props.invite ) } href={ this.props.redirectTo } >
+							{ this.translate( 'Join', { context: 'button' } ) }
+						</Button>
+					</div>
+				</Card>
+				<a className="logged-in-accept__sign-in" href={ signInLink }>
+					{ this.translate( 'Sign in as a different user' ) }
+				</a>
+			</div>
+		);
+	}
+} );

client/accept-invite/logged-out-invite/signup-form.jsx → client/lib/invites/accept/logged-out/index.jsx

@@ -8,8 +8,8 @@ import get from 'lodash/object/get'
  * Internal dependencies
  */
 import SignupForm from 'components/signup-form'
-import InviteFormHeader from '../invite-form-header'
-import { createAccount, acceptInvite } from '../actions'
+import InviteFormHeader from 'components/invites/invite-form-header'
+import { createAccount, acceptInvite } from 'lib/invites/actions'
 import WpcomLoginForm from 'signup/wpcom-login-form'
 import config from 'config'