Merge pull request #1267 from Automattic/update/invites-process-api-data

People: Invites: Normalize get invite api response

client/lib/invites/reducers/invites-validation.js

@@ -3,7 +3,6 @@
  */
 import { fromJS } from 'immutable';
 import mapValues from 'lodash/object/mapValues';
-import pick from 'lodash/object/pick';
 
 /**
  * Internal dependencies
@@ -26,15 +25,22 @@ function filterObjectProperties( object ) {
 	} );
 }
 
-function filterInvite( invite ) {
-	return mapValues( pick( invite, [ 'invite', 'inviter', 'blog_details' ] ), filterObjectProperties );
+function normalizeInvite( data ) {
+	return {
+		inviteKey: data.invite.invite_slug,
+		date: data.invite.invite_date,
+		role: decodeEntities( data.invite.meta.role ),
+		sentTo: decodeEntities( data.invite.meta.sent_to ),
+		site: filterObjectProperties( Object.assign( data.blog_details, { ID: parseInt( data.invite.blog_id ), URL: data.blog_details.domain } ) ),
+		inviter: filterObjectProperties( data.inviter )
+	}
 }
 
 const reducer = ( state = initialState, payload ) => {
 	const { action } = payload;
 	switch ( action.type ) {
 		case ActionTypes.RECEIVE_INVITE:
-			return state.setIn( [ 'list', action.siteId, action.inviteKey ], filterInvite( action.data ) );
+			return state.setIn( [ 'list', action.siteId, action.inviteKey ], normalizeInvite( action.data ) );
 		case ActionTypes.RECEIVE_INVITE_ERROR:
 			return state.setIn( [ 'errors', action.siteId, action.inviteKey ], action.error );
 	}

client/my-sites/invites/controller.js

@@ -19,7 +19,12 @@ export function acceptInvite( context ) {
 	React.render(
 		React.createElement(
 			InviteAccept,
-			context.params
+			{
+				siteId: context.params.site_id,
+				inviteKey: context.params.invitation_key,
+				activationKey: context.params.activation_key,
+				authKey: context.params.auth_key
+			}
 		),
 		document.getElementById( 'primary' )
 	);

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

@@ -25,7 +25,7 @@ export default React.createClass( {
 
 	accept() {
 		this.setState( { submitting: true } );
-		acceptInvite( this.props.invite, () => page( this.props.redirectTo ) );
+		acceptInvite( this.props, () => page( this.props.redirectTo ) );
 	},
 
 	render() {

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React from 'react'
-import get from 'lodash/object/get'
 
 /**
  * Internal dependencies
@@ -36,7 +35,7 @@ export default React.createClass( {
 			( error, bearerToken ) =>
 				bearerToken &&
 				acceptInvite(
-					this.props.invite,
+					this.props,
 					( acceptInviteError ) => this.setState( { acceptInviteError, userData, bearerToken } ),
 					bearerToken
 				)
@@ -55,20 +54,20 @@ export default React.createClass( {
 			<WpcomLoginForm
 				log={ userData.username }
 				authorization={ 'Bearer ' + bearerToken }
-				redirectTo={ window.location.origin + this.props.redirectTo + '?invite_accepted=' + this.props.invite.blog_id }
+				redirectTo={ window.location.origin + this.props.redirectTo + '?invite_accepted=' + this.props.site.ID }
 			/>
 		)
 	},
 
 	subscribeUserByEmailOnly() {
 		this.setState( { submitting: true } );
 		acceptInvite(
-			this.props.invite,
+			this.props,
 			( error ) => {
 				if ( error ) {
 					this.setState( { error } );
 				} else {
-					window.location = 'https://subscribe.wordpress.com?update=activate&email=' + encodeURIComponent( this.props.invite.meta.sent_to ) + '&key=' + this.props.invite.authKey;
+					window.location = 'https://subscribe.wordpress.com?update=activate&email=' + encodeURIComponent( this.props.sent_to ) + '&key=' + this.props.authKey;
 				}
 			}
 		);
@@ -87,7 +86,7 @@ export default React.createClass( {
 	},
 
 	renderEmailOnlySubscriptionLink() {
-		if ( this.props.invite.meta.role !== 'follower' || ! this.props.invite.activationKey ) {
+		if ( this.props.role !== 'follower' || ! this.props.activationKey ) {
 			return null;
 		}
 
@@ -110,7 +109,7 @@ export default React.createClass( {
 					submitForm={ this.submitForm }
 					submitButtonText={ this.submitButtonText() }
 					footerLink={ this.renderFooterLink() }
-					email={ get( this.props, 'invite.meta.sent_to' ) }
+					email={ this.props.sent_to }
 				/>
 				{ this.state.userData && this.loginUser() }
 			</div>

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

@@ -35,7 +35,7 @@ export default React.createClass( {
 	},
 
 	componentWillMount() {
-		fetchInvite( this.props.site_id, this.props.invitation_key );
+		fetchInvite( this.props.siteId, this.props.inviteKey );
 		InvitesStore.on( 'change', this.refreshInvite );
 	},
 
@@ -44,19 +44,23 @@ export default React.createClass( {
 	},
 
 	refreshInvite() {
-		const invite = InvitesStore.getInvite( this.props.site_id, this.props.invitation_key );
-		const error = InvitesStore.getInviteError( this.props.site_id, this.props.invitation_key );
+		const invite = InvitesStore.getInvite( this.props.siteId, this.props.inviteKey );
+		const error = InvitesStore.getInviteError( this.props.siteId, this.props.inviteKey );
 
 		if ( invite ) {
 			// add subscription-related keys to the invite
-			Object.assign( invite.invite, {
-				activationKey: this.props.activation_key,
-				authKey: this.props.auth_key
+			Object.assign( invite, {
+				activationKey: this.props.activationKey,
+				authKey: this.props.authKey
 			} );
 		}
 		this.setState( { invite, error } );
 	},
 
+	refreshRedirectPath() {
+		this.setState( { redirectPath: this.getRedirectAfterAccept() } );
+	},
+
 	getErrorTitle() {
 		return this.translate(
 			'Oops, your invite is not valid',
@@ -72,14 +76,14 @@ export default React.createClass( {
 	},
 
 	getRedirectAfterAccept() {
-		const { invite } = this.state.invite;
-		switch ( invite.meta.role ) {
+		const { invite } = this.state
+		switch ( invite.role ) {
 			case 'viewer':
 			case 'follower':
 				return '/';
 				break;
 			default:
-				return '/posts/' + invite.blog_id;
+				return '/posts/' + this.props.siteId;
 		}
 	},
 

client/my-sites/invites/invite-form-header/index.jsx

@@ -2,42 +2,30 @@
  * External dependencies
  */
 import React from 'react';
-import get from 'lodash/object/get';
 
 export default React.createClass( {
 	displayName: 'InviteFormHeader',
 
-	getRole() {
-		return get( this.props, 'invite.meta.role' );
-	},
-
-	getSiteName() {
-		return get( this.props, 'blog_details.title' );
-	},
-
-	getSiteDomain() {
-		return get( this.props, 'blog_details.domain' );
-	},
-
 	getSiteLink() {
-		const siteName = this.getSiteName();
-		const siteDomain = this.getSiteDomain();
+		const { site } = this.props;
 
-		if ( ! siteName || ! siteDomain ) {
+		if ( ! site ) {
 			return null;
 		}
 
 		return (
-			<a href={ siteDomain } className="invite-header__site-link">
-				{ siteName }
+			<a href={ site.domain } className="invite-header__site-link">
+				{ site.title }
 			</a>
 		);
 	},
 
 	getLoggedOutTitleForInvite() {
 		let title = '';
 
-		switch ( this.getRole() ) {
+		const { role } = this.props;
+
+		switch ( role ) {
 			case 'administrator':
 				title = this.translate(
 					'Sign up to start managing {{siteLink/}}.', {
@@ -96,7 +84,7 @@ export default React.createClass( {
 				title = this.translate(
 					'Sign up to join {{siteLink/}} as: {{strong}}%(siteRole)s{{/strong}}.', {
 						args: {
-							siteRole: this.getRole()
+							siteRole: role
 						},
 						components: {
 							siteLink: this.getSiteLink(),
@@ -112,7 +100,9 @@ export default React.createClass( {
 	getLoggedInTitleForInvite() {
 		let title = '';
 
-		switch ( this.getRole() ) {
+		const { role } = this.props;
+
+		switch ( role ) {
 			case 'administrator':
 				title = this.translate(
 					'Would you like to start managing {{siteLink/}}?', {
@@ -171,7 +161,7 @@ export default React.createClass( {
 				title = this.translate(
 					'Would you like to join {{siteLink/}} as: {{strong}}%(siteRole)s{{/strong}}?', {
 						args: {
-							siteRole: this.getRole()
+							siteRole: role
 						},
 						components: {
 							siteLink: this.getSiteLink(),
@@ -186,7 +176,8 @@ export default React.createClass( {
 
 	getExplanationForInvite() {
 		let explanation = '';
-		switch ( this.getRole() ) {
+
+		switch ( this.props.role ) {
 			case 'administrator':
 				explanation = this.translate(
 					'As an administrator, you will be able to manage all aspects of %(siteName)s.', {

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

@@ -33,7 +33,7 @@ export default React.createClass( {
 			</strong>
 		);
 
-		const role = get( this.props, 'invite.meta.role' );
+		const { role } = this.props;
 
 		switch ( role ) {
 			case 'administrator':
@@ -108,7 +108,8 @@ export default React.createClass( {
 	},
 
 	render() {
-		let classes = classNames( 'invite-header', { 'is-placeholder': ! this.props.invite } );
+		let classes = classNames( 'invite-header', { 'is-placeholder': ! this.props.inviteKey } );
+
 		return(
 			<div className={ classes }>
 				<CompactCard className="invite-header__inviter">
@@ -121,9 +122,9 @@ export default React.createClass( {
 				</CompactCard>
 				<CompactCard className="invite-header__site">
 					{
-						this.props.blog_details
-						? <Site site={ this.props.blog_details } />
-						: <SitePlaceholder />
+						this.props.site
+							? <Site site={ this.props.site } />
+							: <SitePlaceholder />
 					}
 				</CompactCard>
 			</div>

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

@@ -291,7 +291,7 @@ Undocumented.prototype.getInvite = function( siteId, inviteKey, fn ) {
 
 Undocumented.prototype.acceptInvite = function( invite, fn ) {
 	debug( '/sites/:site_id:/invites/:inviteKey:/accept query' );
-	this.wpcom.req.get( '/sites/' + invite.blog_id + '/invites/' + invite.invite_slug + '/accept', {
+	this.wpcom.req.get( '/sites/' + invite.site.ID + '/invites/' + invite.inviteKey + '/accept', {
 		activate: invite.activationKey
 	}, fn );
 };