Accept Invite

- Modifying index.js to check for an activation key URL
parameter before rendering the page
- Render a footer link to accept a follower invite
by email subscription only.
- Updating wpcom undocumented to add subscriptionActivationKey
to the request so that we can accept follower invites by email only.

client/lib/invites/actions.js

@@ -58,14 +58,15 @@ export function createAccount( userData, callback ) {
 	);
 }
 
-export function acceptInvite( invite, callback, bearerToken ) {
+export function acceptInvite( invite, callback, bearerToken, subscriptionActivationKey ) {
 	if ( bearerToken ) {
 		wpcom.loadToken( bearerToken );
 	}
 	return wpcom.undocumented().acceptInvite(
 		invite.blog_id,
 		invite.invite_slug,
-		callback
+		callback,
+		subscriptionActivationKey
 	);
 }
 

client/my-sites/invites/controller.js

@@ -9,15 +9,32 @@ import React from 'react';
 import i18n from 'lib/mixins/i18n';
 import titleActions from 'lib/screen-title/actions';
 import InviteAccept from 'my-sites/invites/invite-accept';
+/**
+ * Module variables
+ */
+let subscriptionActivationKey;
+
+export default {
+	saveSubscriptionActivationKey( context, next ) {
+		if ( context.query.activate ) {
+			subscriptionActivationKey = context.query.activate;
+		}
+
+		next();
+	},
 
-export function acceptInvite( context ) {
-	titleActions.setTitle( i18n.translate( 'Accept Invite', { textOnly: true } ) );
+	acceptInvite( context ) {
+		titleActions.setTitle( i18n.translate( 'Accept Invite', { textOnly: true } ) );
 
-	React.unmountComponentAtNode( document.getElementById( 'secondary' ) );
-	context.layout.setState( { noSidebar: true } );
+		React.unmountComponentAtNode( document.getElementById( 'secondary' ) );
+		context.layout.setState( { noSidebar: true } );
 
-	React.render(
-		React.createElement( InviteAccept, context.params ),
-		document.getElementById( 'primary' )
-	);
+		React.render(
+			React.createElement(
+				InviteAccept,
+				Object.assign( context.params, { subscriptionActivationKey: subscriptionActivationKey } )
+			),
+			document.getElementById( 'primary' )
+		);
+	}
 }

client/my-sites/invites/index.js

@@ -6,11 +6,12 @@ import page from 'page';
 /**
  * Internal dependencies
  */
-import { acceptInvite } from './controller';
+import controller from './controller';
 
 export default () => {
 	page(
 		'/accept-invite/:site_id/:invitation_key',
-		acceptInvite
+		controller.saveSubscriptionActivationKey,
+		controller.acceptInvite
 	);
 };

client/my-sites/invites/invite-accept-logged-out/index.jsx

@@ -43,13 +43,13 @@ export default React.createClass( {
 		);
 	},
 
-	getFormHeader() {
+	renderFormHeader() {
 		return (
 			<InviteFormHeader { ...this.props } />
 		);
 	},
 
-	loginUser() {
+	renderLoginForm() {
 		const { userData, bearerToken } = this.state;
 		return (
 			<WpcomLoginForm
@@ -60,30 +60,61 @@ export default React.createClass( {
 		)
 	},
 
-	footerLink() {
-		let logInUrl = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );
+	subscribeUserByEmailOnly() {
+		this.setState( { submitting: true } );
+		acceptInvite(
+			this.props.invite,
+			( error ) => {
+				if ( error ) {
+					this.setState( { error } );
+				} else {
+					window.location = 'https://subscribe.wordpress.com/?update=activated';
+				}
+			},
+			null,
+			this.props.subscriptionActivationKey
+		);
+	},
+
+	renderEmailOnlySubscriptionLink() {
+		if ( this.props.invite.meta.role !== 'follower' || ! this.props.subscriptionActivationKey ) {
+			return null;
+		}
+
 		return (
-			<a href={ logInUrl } className="logged-out-form__link">
-				{ this.translate( 'Already have a WordPress.com account? Log in now.' ) }
+			<a onClick={ this.subscribeUserByEmailOnly } className="logged-out-form__link">
+				{ this.translate( 'Or follow by email subscription only.' ) }
 			</a>
 		);
 	},
 
+	renderFooterLink() {
+		let logInUrl = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );
+		return (
+			<div>
+				<a href={ logInUrl } className="logged-out-form__link">
+					{ this.translate( 'Already have a WordPress.com account? Log in now.' ) }
+				</a>
+				{ this.renderEmailOnlySubscriptionLink() }
+			</div>
+		);
+	},
+
 	render() {
 		return (
 			<div>
 				<SignupForm
 					getRedirectToAfterLoginUrl={ this.getRedirectToAfterLoginUrl }
 					disabled={ this.state.submitting }
-					formHeader={ this.getFormHeader() }
+					formHeader={ this.renderFormHeader() }
 					submitting={ this.state.submitting }
 					save={ this.save }
 					submitForm={ this.submitForm }
 					submitButtonText={ this.submitButtonText() }
-					footerLink={ this.footerLink() }
+					footerLink={ this.renderFooterLink() }
 					email={ get( this.props, 'invite.meta.sent_to' ) }
 				/>
-				{ this.state.userData && this.loginUser() }
+				{ this.state.userData && this.renderLoginForm() }
 			</div>
 		)
 	}

client/my-sites/invites/invite-accept/index.jsx

@@ -82,8 +82,13 @@ export default React.createClass( {
 		}
 		debug( 'Rendering invite' );
 		return user.get()
-			? <LoggedIn { ...this.state.invite } redirectTo={ this.getRedirectTo() } />
-			: <LoggedOut { ...this.state.invite } redirectTo={ this.getRedirectTo() } />;
+			? <LoggedInAccept
+				{ ...this.state.invite }
+				redirectTo={ this.getRedirectTo() } />
+			: <LoggedOutInvite
+				{ ...this.state.invite }
+				redirectTo={ this.getRedirectTo() }
+				subscriptionActivationKey={ this.props.subscriptionActivationKey } />;
 	},
 
 	renderError() {

client/signup/logged-out-form/style.scss

@@ -25,4 +25,6 @@
 	display: block;
 	font-size: 12px;
 	text-align: center;
+	margin-bottom: 8px;
+	cursor: pointer;
 }

shared/lib/wpcom-undocumented/lib/undocumented.js

@@ -289,9 +289,11 @@ Undocumented.prototype.getInvite = function( siteId, inviteKey, fn ) {
 	this.wpcom.req.get( { path: '/sites/' + siteId + '/invites/' + inviteKey }, fn );
 };
 
-Undocumented.prototype.acceptInvite = function( siteId, inviteKey, fn ) {
+Undocumented.prototype.acceptInvite = function( siteId, inviteKey, fn, subscriptionActivationKey ) {
 	debug( '/sites/:site_id:/invites/:inviteKey:/accept query' );
-	this.wpcom.req.get( '/sites/' + siteId + '/invites/' + inviteKey + '/accept', fn );
+	this.wpcom.req.get( '/sites/' + siteId + '/invites/' + inviteKey + '/accept', {
+		activate: subscriptionActivationKey
+	}, fn );
 };
 
 /**