Theme Sheet: Use information from WordPress.org for themes on Jetpack sites

client/components/data/query-active-theme/index.jsx

@@ -12,10 +12,7 @@ import { isRequestingActiveTheme } from 'state/themes/selectors';
 
 class QueryActiveTheme extends Component {
 	static propTypes = {
-		siteId: PropTypes.oneOfType( [
-			PropTypes.number,
-			PropTypes.oneOf( [ 'wpcom' ] )
-		] ).isRequired,
+		siteId: PropTypes.number.isRequired,
 		// Connected props
 		isRequesting: PropTypes.bool.isRequired,
 		requestActiveTheme: PropTypes.func.isRequired,

client/components/data/query-theme/index.jsx

@@ -14,7 +14,7 @@ class QueryTheme extends Component {
 	static propTypes = {
 		siteId: PropTypes.oneOfType( [
 			PropTypes.number,
-			PropTypes.oneOf( [ 'wpcom' ] )
+			PropTypes.oneOf( [ 'wpcom', 'wporg' ] )
 		] ).isRequired,
 		themeId: PropTypes.string.isRequired,
 		// Connected props

client/lib/wporg/index.js

@@ -95,5 +95,39 @@ module.exports = {
 			.end( function( err, data ) {
 				callback( err, data.body );
 			} );
-	}
+	},
+	/**
+	 * Get information about a given theme from the WordPress.org API.
+	 * If provided with a callback, will call that on succes with an object with theme details.
+	 * Otherwise, will return a promise.
+	 *
+	 * @param {string}     themeId  The theme identifier.
+	 * @param {function}   callback Callback that gets executed after the XHR returns the results.
+	 * @returns {?Promise} Promise  that is returned if no callback parameter is passed
+	 */
+	fetchThemeInformation: function( themeId, callback ) {
+		const url = 'https://api.wordpress.org/themes/info/1.1/';
+		const query = { action: 'theme_information', 'request[slug]': themeId };
+		// if callback is provided, behave traditionally
+		if ( 'function' === typeof callback ) {
+			return superagent
+				.get( url )
+				.set( 'Accept', 'application/json' )
+				.query( query )
+				.end( ( err, { body } ) => {
+					callback( err, body );
+				} );
+		}
+
+		// otherwise, return a Promise
+		return new Promise( ( resolve, reject ) => {
+			return superagent
+				.get( url )
+				.set( 'Accept', 'application/json' )
+				.query( query )
+				.end( ( err, { body } ) => {
+					err ? reject( err ) : resolve( body );
+				} );
+		} );
+	},
 };

client/my-sites/theme/main.jsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import i18n from 'i18n-calypso';
 import titlecase from 'to-title-case';
+import { isArray } from 'lodash';
 
 /**
  * Internal dependencies
@@ -28,7 +29,6 @@ import { getSelectedSite } from 'state/ui/selectors';
 import { getSiteSlug, isJetpackSite } from 'state/sites/selectors';
 import { getCurrentUserId } from 'state/current-user/selectors';
 import { isUserPaid } from 'state/purchases/selectors';
-import { getForumUrl } from 'my-sites/themes/helpers';
 import { isPremiumTheme as isPremium } from 'state/themes/utils';
 import ThanksModal from 'my-sites/themes/thanks-modal';
 import QueryActiveTheme from 'components/data/query-active-theme';
@@ -37,7 +37,7 @@ import QueryUserPurchases from 'components/data/query-user-purchases';
 import QuerySitePurchases from 'components/data/query-site-purchases';
 import ThemesSiteSelectorModal from 'my-sites/themes/themes-site-selector-modal';
 import { connectOptions } from 'my-sites/themes/theme-options';
-import { isThemeActive, isThemePurchased, getThemeRequestErrors } from 'state/themes/selectors';
+import { isThemeActive, isThemePurchased, getThemeRequestErrors, getThemeForumUrl } from 'state/themes/selectors';
 import { getBackPath } from 'state/themes/themes-ui/selectors';
 import EmptyContentComponent from 'components/empty-content';
 import ThemePreview from 'my-sites/themes/theme-preview';
@@ -156,6 +156,17 @@ const ThemeSheet = React.createClass( {
 		return null;
 	},
 
+	renderPreviewButton() {
+		return (
+			<a className="theme__sheet-preview-link" onClick={ this.togglePreview } data-tip-target="theme-sheet-preview">
+				<Gridicon icon="themes" size={ 18 } />
+				<span className="theme__sheet-preview-link-text">
+					{ i18n.translate( 'Open Live Demo', { context: 'Individual theme live preview button' } ) }
+				</span>
+			</a>
+		);
+	},
+
 	renderScreenshot() {
 		let screenshot;
 		if ( this.props.isJetpack ) {
@@ -166,12 +177,7 @@ const ThemeSheet = React.createClass( {
 		const img = screenshot && <img className="theme__sheet-img" src={ screenshot + '?=w680' } />;
 		return (
 			<div className="theme__sheet-screenshot">
-				<a className="theme__sheet-preview-link" onClick={ this.togglePreview } data-tip-target="theme-sheet-preview">
-					<Gridicon icon="themes" size={ 18 } />
-					<span className="theme__sheet-preview-link-text">
-						{ i18n.translate( 'Open Live Demo', { context: 'Individual theme live preview button' } ) }
-					</span>
-				</a>
+				{ this.props.demo_uri && this.renderPreviewButton() }
 				{ img }
 			</div>
 		);
@@ -232,7 +238,7 @@ const ThemeSheet = React.createClass( {
 				</Card>
 				{ this.renderFeaturesCard() }
 				{ this.renderDownload() }
-				{ this.renderRelatedThemes() }
+				{ ! this.props.isJetpack && this.renderRelatedThemes() }
 			</div>
 		);
 	},
@@ -261,6 +267,10 @@ const ThemeSheet = React.createClass( {
 	},
 
 	renderThemeForumCard( isPrimary = false ) {
+		if ( ! this.props.forumUrl ) {
+			return null;
+		}
+
 		const description = isPremium( this.props )
 			? i18n.translate( 'Get in touch with the theme author' )
 			: i18n.translate( 'Get help from volunteers and staff' );
@@ -272,7 +282,7 @@ const ThemeSheet = React.createClass( {
 					{ i18n.translate( 'Have a question about this theme?' ) }
 					<small>{ description }</small>
 				</div>
-				<Button primary={ isPrimary } href={ getForumUrl( this.props ) }>Visit forum</Button>
+				<Button primary={ isPrimary } href={ this.props.forumUrl }>Visit forum</Button>
 			</Card>
 		);
 	},
@@ -310,16 +320,22 @@ const ThemeSheet = React.createClass( {
 	},
 
 	renderFeaturesCard() {
-		const { siteSlug, taxonomies } = this.props;
-		const themeFeatures = taxonomies && taxonomies.theme_feature instanceof Array
-		? taxonomies.theme_feature.map( function( item ) {
+		const { isJetpack, siteSlug, taxonomies } = this.props;
+		if ( ! taxonomies || ! isArray( taxonomies.theme_feature ) ) {
+			return null;
+		}
+
+		const themeFeatures = taxonomies.theme_feature.map( function( item ) {
 			const term = isValidTerm( item.slug ) ? item.slug : `feature:${ item.slug }`;
 			return (
 				<li key={ 'theme-features-item-' + item.slug }>
-					<a href={ `/design/filter/${ term }/${ siteSlug || '' }` }>{ item.name }</a>
+					{ isJetpack
+						? <a>{ item.name }</a>
+						: <a href={ `/design/filter/${ term }/${ siteSlug || '' }` }>{ item.name }</a>
+					}
 				</li>
 			);
-		} ) : [];
+		} );
 
 		return (
 			<div>
@@ -334,7 +350,13 @@ const ThemeSheet = React.createClass( {
 	},
 
 	renderDownload() {
-		if ( isPremium( this.props ) ) {
+		// Don't render download button:
+		// * If it's a premium theme
+		// * If it's on a Jetpack site, and the theme object doesn't have a 'download' attr
+		//   Note that not having a 'download' attr would be permissible for a theme on WPCOM
+		//   since we don't provide any for some themes found on WordPress.org (notably the 'Twenties').
+		//   The <ThemeDownloadCard /> component can handle that case.
+		if ( isPremium( this.props ) || ( this.props.isJetpack && ! this.props.download ) ) {
 			return null;
 		}
 		return <ThemeDownloadCard theme={ this.props.id } href={ this.props.download } />;
@@ -426,7 +448,7 @@ const ThemeSheet = React.createClass( {
 		const analyticsPath = `/theme/:slug${ section ? '/' + section : '' }${ siteID ? '/:site_id' : '' }`;
 		const analyticsPageTitle = `Themes > Details Sheet${ section ? ' > ' + titlecase( section ) : '' }${ siteID ? ' > Site' : '' }`;
 
-		const { name: themeName, description, currentUserId, siteIdOrWpcom } = this.props;
+		const { name: themeName, description, currentUserId, isJetpack, siteIdOrWpcom } = this.props;
 		const title = themeName && i18n.translate( '%(themeName)s Theme', {
 			args: { themeName }
 		} );
@@ -451,6 +473,7 @@ const ThemeSheet = React.createClass( {
 		return (
 			<Main className="theme__sheet">
 				<QueryTheme themeId={ this.props.id } siteId={ siteIdOrWpcom } />
+				{ isJetpack && <QueryTheme themeId={ this.props.id } siteId="wporg" /> }
 				{ currentUserId && <QueryUserPurchases userId={ currentUserId } /> }
 				{ siteID && <QuerySitePurchases siteId={ siteID } /> }
 				{ siteID && <QuerySitePlans siteId={ siteID } /> }
@@ -576,6 +599,7 @@ export default connect(
 		const isCurrentUserPaid = isUserPaid( state, currentUserId );
 		const theme = getTheme( state, siteIdOrWpcom, id );
 		const error = theme ? false : getThemeRequestErrors( state, id, siteIdOrWpcom );
+
 		return {
 			...theme,
 			id,
@@ -593,6 +617,7 @@ export default connect(
 				isThemePurchased( state, id, selectedSite.ID ) ||
 				hasFeature( state, selectedSite.ID, FEATURE_UNLIMITED_PREMIUM_THEMES )
 			),
+			forumUrl: selectedSite && getThemeForumUrl( state, id, selectedSite.ID )
 		};
 	}
 )( ThemeSheetWithOptions );

client/my-sites/theme/test/main.jsx

@@ -32,7 +32,6 @@ describe( 'main', function() {
 			mockery.registerMock( 'lib/analytics', {} );
 			mockery.registerMock( 'my-sites/themes/helpers', {
 				isPremium: noop,
-				getForumUrl: noop,
 				getDetailsUrl: noop,
 			} );
 			mockery.registerSubstitute( 'matches-selector', 'component-matches-selector' );

client/my-sites/themes/helpers.js

@@ -14,13 +14,9 @@ import mapValues from 'lodash/mapValues';
  */
 import config from 'config';
 import { sectionify } from 'lib/route/path';
-import { oldShowcaseUrl, isPremiumTheme as isPremium } from 'state/themes/utils';
-
-export function getPreviewUrl( theme, site ) {
-	if ( site && site.jetpack ) {
-		return site.options.admin_url + 'customize.php?theme=' + theme.id + '&return=' + encodeURIComponent( window.location );
-	}
+import { oldShowcaseUrl } from 'state/themes/utils';
 
+export function getPreviewUrl( theme ) {
 	return `${ theme.demo_uri }?demo=true&iframe=true&theme_preview=true`;
 }
 
@@ -68,10 +64,6 @@ export function getSupportUrl( theme, site ) {
 	return `${ oldShowcaseUrl }${ sitePart }${ theme.id }/support`;
 }
 
-export function getForumUrl( theme ) {
-	return isPremium( theme ) ? '//premium-themes.forums.wordpress.com/forum/' + theme.id : '//en.forums.wordpress.com/forum/themes';
-}
-
 export function getHelpUrl( theme, site ) {
 	if ( site && site.jetpack ) {
 		return getSupportUrl( theme, site );

client/my-sites/themes/thanks-modal.jsx

@@ -11,13 +11,14 @@ import { translate } from 'i18n-calypso';
  */
 import Dialog from 'components/dialog';
 import PulsingDot from 'components/pulsing-dot';
-import { getForumUrl, trackClick } from './helpers';
+import { trackClick } from './helpers';
 import { isJetpackSite } from 'state/sites/selectors';
 import {
 	getActiveTheme,
 	getTheme,
 	getThemeDetailsUrl,
 	getThemeCustomizeUrl,
+	getThemeForumUrl,
 	isActivatingTheme,
 	hasActivatedTheme
 } from 'state/themes/selectors';
@@ -82,7 +83,7 @@ const ThanksModal = React.createClass( {
 			<li>
 				{ translate( 'Have questions? Stop by our {{a}}support forums.{{/a}}', {
 					components: {
-						a: <a href={ getForumUrl( this.props.currentTheme ) }
+						a: <a href={ this.props.forumUrl }
 							onClick={ this.onLinkClick( 'support' ) } />
 					}
 				} ) }
@@ -209,6 +210,7 @@ export default connect(
 			currentTheme,
 			detailsUrl: site && getThemeDetailsUrl( state, currentTheme, site.ID ),
 			customizeUrl: site && getThemeCustomizeUrl( state, currentTheme, site.ID ),
+			forumUrl: getThemeForumUrl( state, currentThemeId ),
 			isActivating: !! ( site && isActivatingTheme( state, site.ID ) ),
 			hasActivated: !! ( site && hasActivatedTheme( state, site.ID ) )
 		};

client/state/themes/actions.js

@@ -8,6 +8,7 @@ import debugFactory from 'debug';
  * Internal dependencies
  */
 import wpcom from 'lib/wp';
+import wporg from 'lib/wporg';
 import {
 	// Old action names
 	THEME_BACK_PATH_SET,
@@ -43,7 +44,12 @@ import {
 import { isJetpackSite } from 'state/sites/selectors';
 import { getActiveTheme } from './selectors';
 import { getQueryParams } from './themes-list/selectors';
-import { getThemeIdFromStylesheet, filterThemesForJetpack, normalizeWpcomTheme } from './utils';
+import {
+	getThemeIdFromStylesheet,
+	filterThemesForJetpack,
+	normalizeWpcomTheme,
+	normalizeWporgTheme
+} from './utils';
 
 const debug = debugFactory( 'calypso:themes:actions' ); //eslint-disable-line no-unused-vars
 
@@ -257,6 +263,24 @@ export function requestTheme( themeId, siteId ) {
 			themeId
 		} );
 
+		if ( siteId === 'wporg' ) {
+			return wporg.fetchThemeInformation( themeId ).then( ( theme ) => {
+				dispatch( receiveTheme( normalizeWporgTheme( theme ), siteId ) );
+				dispatch( {
+					type: THEME_REQUEST_SUCCESS,
+					siteId,
+					themeId
+				} );
+			} ).catch( ( error ) => {
+				dispatch( {
+					type: THEME_REQUEST_FAILURE,
+					siteId,
+					themeId,
+					error
+				} );
+			} );
+		}
+
 		if ( siteId === 'wpcom' ) {
 			return wpcom.undocumented().themeDetails( themeId ).then( ( theme ) => {
 				dispatch( receiveTheme( normalizeWpcomTheme( theme ), siteId ) );

client/state/themes/schema.js

@@ -28,7 +28,7 @@ export const queriesSchema = {
 	type: 'object',
 	patternProperties: {
 		// Site ID
-		'^(wpcom|\\d+)$': {
+		'^(wpcom|wporg|\\d+)$': {
 			type: 'object',
 			properties: {
 				data: {
@@ -80,7 +80,7 @@ export const queriesSchema = {
 export const activeThemesSchema = {
 	type: 'object',
 	patternProperties: {
-		'^(wpcom|\\d+)$': {
+		'^\\d+$': {
 			description: 'Theme ID',
 			type: 'string'
 		}