Wp-calypso: Showcase Banners: Prevent showing a banner when the featured theme is already active.

[kjellr]

Our theme showcase banners (#21983) currently feature the Photo Blog and Small Business themes. If you're already using one of those themes, it's fairly likely that you'll see a promo for the theme you're already using.

We should build in logic to prevent this:

cc @mendezcode @mapk

[mendezcode]

Good idea! It does make a ton of sense... If @mapk agrees, I'll work on a PR for this...

[mapk]

I agree. Let's make it happen! 👍

[ockham]

Rough idea how to tackle this (untested!):

diff --git a/client/my-sites/themes/theme-showcase.jsx b/client/my-sites/themes/theme-showcase.jsx
index a349faf..a62caaf 100644
--- a/client/my-sites/themes/theme-showcase.jsx
+++ b/client/my-sites/themes/theme-showcase.jsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 import page from 'page';
-import { compact, pickBy } from 'lodash';
+import { compact, omit, pickBy, values } from 'lodash';
 import Gridicon from 'gridicons';

 /**
@@ -40,6 +40,7 @@ import QueryThemeFilters from 'components/data/query-theme-filters';
 import PhotoBlogBanner from './themes-banner/photo-blog';
 import SmallBusinessBanner from './themes-banner/small-business';
 import RandomThemesBanner from './themes-banner/random-themes-banner';
+import { getActiveTheme } from 'state/themes/selectors';

 const subjectsMeta = {
    photo: { icon: 'camera', order: 1 },
@@ -63,6 +64,7 @@ const optionShape = PropTypes.shape( {

 class ThemeShowcase extends React.Component {
    static propTypes = {
+       currentThemeId: PropTypes.string,
        emptyContent: PropTypes.element,
        tier: PropTypes.oneOf( [ '', 'free', 'premium' ] ),
        search: PropTypes.string,
@@ -153,6 +155,7 @@ class ThemeShowcase extends React.Component {

    render() {
        const {
+           currentThemeId,
            siteId,
            options,
            getScreenshotOption,
@@ -201,6 +204,11 @@ class ThemeShowcase extends React.Component {
                .sort( ( a, b ) => a.order - b.order )
        );

+       const themeBanners = omit( {
+           'photo-blog': PhotoBlogBanner,
+           'small-biz': SmallBusinessBanner,
+       }, currentThemeId ); // We don't want to advertise the theme that's already active.
+
        // FIXME: Logged-in title should only be 'Themes'
        return (
            <Main className="themes">
@@ -218,7 +226,7 @@ class ThemeShowcase extends React.Component {
                ) }
                <div className="themes__content">
                    <QueryThemeFilters />
-                   <RandomThemesBanner banners={ [ PhotoBlogBanner, SmallBusinessBanner ] } />
+                   <RandomThemesBanner banners={ values( themeBanners ) } />
                    <ThemesSearchCard
                        onSearch={ this.doSearch }
                        search={ filterString + search }
@@ -281,6 +289,7 @@ class ThemeShowcase extends React.Component {
 }

 const mapStateToProps = ( state, { siteId, filter, tier, vertical } ) => ( {
+   currentThemeId: getActiveTheme( state, siteId ),
    isLoggedIn: !! getCurrentUserId( state ),
    siteSlug: getSiteSlug( state, siteId ),
    description: getThemeShowcaseDescription( state, { filter, tier, vertical } ),

[mendezcode]

@ockham Haha, this is exactly how I've been doing this but didn't work as expected. I'll have a look at the code :-D