diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx index 9ce330e54642a..ea337164aa420 100644 --- a/client/my-sites/theme/main.jsx +++ b/client/my-sites/theme/main.jsx @@ -10,7 +10,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import page from 'page'; -import { isPremium } from 'my-sites/themes/helpers'; +import { isPremium, isActive } from 'my-sites/themes/helpers'; /** * Internal dependencies @@ -23,7 +23,7 @@ import SectionNav from 'components/section-nav'; import NavTabs from 'components/section-nav/tabs'; import NavItem from 'components/section-nav/item'; import Card from 'components/card'; -import { signup, purchase, activate, clearActivated } from 'state/themes/actions'; +import { signup, purchase, activate, clearActivated, customize } from 'state/themes/actions'; import i18n from 'lib/mixins/i18n'; import { getSelectedSite } from 'state/ui/selectors'; import { getSiteSlug } from 'state/sites/selectors'; @@ -59,10 +59,10 @@ const ThemeSheet = React.createClass( { }, onPrimaryClick() { - // TODO: if active -> customize (could use theme slug from selected site) - if ( ! this.props.isLoggedIn ) { this.props.dispatch( signup( this.props ) ); + } else if ( isActive( this.props, this.props.selectedSite ) ) { + this.props.dispatch( customize( this.props, this.props.selectedSite ) ); // TODO: use site picker if no selected site } else if ( isPremium( this.props ) ) { // TODO: check theme is not already purchased @@ -170,8 +170,11 @@ const ThemeSheet = React.createClass( { }, render() { + const site = this.props.selectedSite; + const siteID = site && site.ID; + let actionTitle = loading......; - if ( this.props.isLoggedIn && this.props.active ) { //FIXME: active ENOENT + if ( isActive( this.props, site ) ) { actionTitle = i18n.translate( 'Customize' ); } else if ( this.props.name ) { actionTitle = i18n.translate( 'Pick this design' ); @@ -179,7 +182,6 @@ const ThemeSheet = React.createClass( { const section = this.validateSection( this.props.section ); const { themeContentElement, priceElement } = this.getDangerousElements( section ); - const siteID = this.props.selectedSite && this.props.selectedSite.ID; return (
@@ -196,7 +198,7 @@ const ThemeSheet = React.createClass( {
diff --git a/client/my-sites/themes/helpers.js b/client/my-sites/themes/helpers.js index 159935d2fa477..3f410532f12d1 100644 --- a/client/my-sites/themes/helpers.js +++ b/client/my-sites/themes/helpers.js @@ -104,6 +104,11 @@ var ThemesHelpers = { return !! ( theme.cost && theme.cost.number ); }, + isActive: function( theme, site ) { + return theme.stylesheet && site && site.options && site.options.theme_slug && + site.options.theme_slug === theme.stylesheet; + }, + trackClick: function( componentName, eventName, verb = 'click' ) { const stat = `${componentName} ${eventName} ${verb}`; analytics.ga.recordEvent( 'Themes', titlecase( stat ) );