Merge pull request #536 from Automattic/fix/122-purchases-with-site-r…

…edirect

Purchases: Individual purchases not loading on sites with Site Redirect

client/components/data/purchases/index.jsx

@@ -7,6 +7,7 @@ import React from 'react';
  * Internal dependencies
  */
 import { fetchUserPurchases } from 'lib/upgrades/actions';
+import observe from 'lib/mixins/data-observe';
 import PurchasesStore from 'lib/purchases/store';
 import StoreConnection from 'components/data/store-connection';
 import userFactory from 'lib/user';
@@ -20,16 +21,20 @@ const stores = [ PurchasesStore ],
 function getStateFromStores( props ) {
 	return {
 		noticeType: props.noticeType,
-		purchases: PurchasesStore.getByUser( user.get().ID )
+		purchases: PurchasesStore.getByUser( user.get().ID ),
+		sites: props.sites
 	};
 }
 
 const PurchasesData = React.createClass( {
 	propTypes: {
 		component: React.PropTypes.func.isRequired,
-		noticeType: React.PropTypes.string
+		noticeType: React.PropTypes.string,
+		sites: React.PropTypes.object.isRequired
 	},
 
+	mixins: [ observe( 'sites' ) ],
+
 	componentDidMount() {
 		fetchUserPurchases();
 	},
@@ -39,6 +44,7 @@ const PurchasesData = React.createClass( {
 			<StoreConnection
 				component={ this.props.component }
 				noticeType={ this.props.noticeType }
+				sites={ this.props.sites }
 				stores={ stores }
 				getStateFromStores={ getStateFromStores } />
 		);

client/lib/purchases/index.js

@@ -15,18 +15,25 @@ import { isDomainMapping, isDomainRegistration, isTheme, isPlan } from 'lib/prod
  * Returns an array of sites objects, each of which contains an array of purchases.
  *
  * @param {array} purchases An array of purchase objects.
+ * @param {array} sites An array of site objects
  * @return {array} An array of sites with purchases attached.
  */
-function getPurchasesBySite( purchases ) {
+function getPurchasesBySite( purchases, sites ) {
 	return purchases.reduce( ( result, currentValue ) => {
 		const site = find( result, { id: currentValue.siteId } );
 		if ( site ) {
 			site.purchases = site.purchases.concat( currentValue );
 		} else {
+			const siteObject = find( sites, { ID: currentValue.siteId } );
+
 			result = result.concat( {
 				domain: currentValue.domain,
 				id: currentValue.siteId,
 				name: currentValue.siteName,
+				/* if the purchase is attached to a deleted site,
+				 * there will be no site with this ID in `sites`, so
+				 * we fall back on the domain. */
+				slug: siteObject ? siteObject.slug : currentValue.domain,
 				title: currentValue.siteName ? currentValue.siteName : currentValue.domain,
 				purchases: [ currentValue ]
 			} );

client/me/purchases/controller.jsx

@@ -173,7 +173,8 @@ export default {
 		renderPage(
 			<PurchasesData
 				component={ PurchasesList }
-				noticeType={ context.params.noticeType } />
+				noticeType={ context.params.noticeType }
+				sites={ sites } />
 		);
 	},
 

client/me/purchases/list/index.jsx

@@ -55,24 +55,32 @@ const PurchasesList = React.createClass( {
 		);
 	},
 
-	render() {
-		let content;
+	isDataLoading() {
+		if ( this.props.purchases.isFetching && ! this.props.purchases.hasLoadedFromServer ) {
+			return true;
+		}
 
-		if ( ! this.props.purchases.isFetching && ! this.props.purchases.hasLoadedFromServer ) {
-			return null;
+		if ( ! this.props.sites.initialized ) {
+			return true;
 		}
 
-		if ( this.props.purchases.isFetching && ! this.props.purchases.hasLoadedFromServer ) {
+		return false;
+	},
+
+	render() {
+		let content;
+
+		if ( this.isDataLoading() ) {
 			content = <PurchasesSite isPlaceholder />;
 		}
 
 		if ( this.props.purchases.hasLoadedFromServer && this.props.purchases.data.length ) {
-			content = getPurchasesBySite( this.props.purchases.data ).map(
+			content = getPurchasesBySite( this.props.purchases.data, this.props.sites.get() ).map(
 				site => (
 					<PurchasesSite
 						key={ site.id }
 						name={ site.title }
-						domain={ site.domain }
+						slug={ site.slug }
 						purchases={ site.purchases } />
 				)
 			);

client/me/purchases/list/item/index.jsx

@@ -23,7 +23,7 @@ import {
 
 const PurchaseItem = React.createClass( {
 	propTypes: {
-		domain: React.PropTypes.string,
+		slug: React.PropTypes.string,
 		purchase: React.PropTypes.object,
 		isPlaceholder: React.PropTypes.bool
 	},
@@ -131,7 +131,7 @@ const PurchaseItem = React.createClass( {
 
 		if ( ! isPlaceholder ) {
 			props = {
-				href: paths.managePurchase( this.props.domain, this.props.purchase.id ),
+				href: paths.managePurchase( this.props.slug, this.props.purchase.id ),
 				onClick: this.scrollToTop
 			};
 		}

client/me/purchases/list/site/index.jsx

@@ -12,7 +12,7 @@ import PurchaseItem from '../item';
 
 const PurchasesSite = React.createClass( {
 	propTypes: {
-		domain: React.PropTypes.string,
+		slug: React.PropTypes.string,
 		name: React.PropTypes.string,
 		purchases: React.PropTypes.array,
 		isPlaceholder: React.PropTypes.bool
@@ -39,7 +39,7 @@ const PurchasesSite = React.createClass( {
 					this.props.purchases.map( purchase => (
 						<PurchaseItem
 							key={ purchase.id }
-							domain={ this.props.domain }
+							slug={ this.props.slug }
 							purchase={ purchase } />
 						)
 					)