Purchases: Individual purchases not loading on sites with Site Redire…

…ct (Fixes #122)

This fixes the issue of individual purchases not loading on site with Site Redirect record set as primary domain.

It changes the use of `domain` property from purchases data to getting the site slug from `SitesList`. This will the URLs will behave the same as in store.

client/lib/purchases/index.js

@@ -15,9 +15,10 @@ import { isDomainRegistration, isTheme, isPlan } from 'lib/products-values';
  * Returns an array of sites objects, each of which contains an array of purchases.
  *
  * @param {array} purchases An array of purchase objects.
+ * @param {SitesList} sites SitesList instance
  * @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 ) {
@@ -27,6 +28,7 @@ function getPurchasesBySite( purchases ) {
 				domain: currentValue.domain,
 				id: currentValue.siteId,
 				name: currentValue.siteName,
+				slug: sites.getSite( currentValue.siteId ).slug,
 				title: currentValue.siteName ? currentValue.siteName : currentValue.domain,
 				purchases: [ currentValue ]
 			} );

client/me/purchases/list/index.jsx

@@ -13,6 +13,9 @@ import Main from 'components/main';
 import MeSidebarNavigation from 'me/sidebar-navigation';
 import PurchasesHeader from './header';
 import PurchasesSite from './site';
+import sitesFactory from 'lib/sites-list';
+
+const sites = sitesFactory();
 
 const PurchasesList = React.createClass( {
 	render() {
@@ -27,12 +30,12 @@ const PurchasesList = React.createClass( {
 		}
 
 		if ( this.props.purchases.hasLoadedFromServer && this.props.purchases.data.length ) {
-			content = getPurchasesBySite( this.props.purchases.data ).map(
+			content = getPurchasesBySite( this.props.purchases.data, sites ).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 } />
 						)
 					)