Skip to content

Commit

Permalink
Themes: remove upsell banners (#94264)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eoigal
eoigal authored Sep 6, 2024
1 parent db60921 commit 65ff96b
Showing 1 changed file with 4 additions and 172 deletions.
176 changes: 4 additions & 172 deletions client/my-sites/theme/main.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { getTracksAnonymousUserId } from '@automattic/calypso-analytics';
import config from '@automattic/calypso-config';
import {
FEATURE_UPLOAD_THEMES_PLUGINS,
FEATURE_UPLOAD_THEMES,
PLAN_BUSINESS,
PLAN_PREMIUM,
Expand All @@ -26,10 +25,9 @@ import clsx from 'clsx';
import { localize, getLocaleSlug } from 'i18n-calypso';
import photon from 'photon';
import PropTypes from 'prop-types';
import { cloneElement, Component } from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import titlecase from 'to-title-case';
import UpsellNudge from 'calypso/blocks/upsell-nudge';
import AsyncLoad from 'calypso/components/async-load';
import Banner from 'calypso/components/banner';
import DocumentHead from 'calypso/components/data/document-head';
Expand All @@ -48,7 +46,7 @@ import ThemeSiteSelectorModal from 'calypso/components/theme-site-selector-modal
import { THEME_TIERS } from 'calypso/components/theme-tier/constants';
import ThemeTierBadge from 'calypso/components/theme-tier/theme-tier-badge';
import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
import { decodeEntities, preventWidows } from 'calypso/lib/formatting';
import { decodeEntities } from 'calypso/lib/formatting';
import { PerformanceTrackerStop } from 'calypso/lib/performance-tracking';
import { ReviewsSummary } from 'calypso/my-sites/marketplace/components/reviews-summary';
import { useBundleSettingsByTheme } from 'calypso/my-sites/theme/hooks/use-bundle-settings';
Expand Down Expand Up @@ -116,8 +114,6 @@ import ThemeStyleVariations from './theme-style-variations';

import './style.scss';

const noop = () => {};

/**
* Renders the description for the banner upsell.
* It's a workaround to use hooks in the class component.
Expand Down Expand Up @@ -1324,25 +1320,14 @@ class ThemeSheet extends Component {
const section = this.validateSection( this.props.section );
const {
themeId,
siteCount,
siteId,
siteSlug,
retired,
isBundledSoftwareSet,
translate,
isLoggedIn,
isPremium,
isThemeInstalled,
isThemePurchased,
isSiteBundleEligible,
isSiteEligibleForManagedExternalThemes,
isMarketplaceThemeSubscribed,
isExternallyManagedTheme,
isThemeActivationSyncStarted,
isWpcomTheme,
isThemeAllowed,
successNotice: showSuccessNotice,
themeTier,
styleVariations,
} = this.props;
const analyticsPath = `/theme/${ themeId }${ section ? '/' + section : '' }${
Expand All @@ -1352,32 +1337,6 @@ class ThemeSheet extends Component {
section ? ' > ' + titlecase( section ) : ''
}${ siteId ? ' > Site' : '' }`;

let plansUrl = '';
if ( ! isLoggedIn ) {
plansUrl = localizeUrl( 'https://wordpress.com/pricing' );
} else if ( siteSlug ) {
const redirectTo = `/theme/${ themeId }${ section ? '/' + section : '' }/${ siteSlug }`;
let plan;
if ( ! isThemeAllowed ) {
plan = THEME_TIERS[ themeTier.slug ].minimumUpsellPlan;
} else {
plan = isExternallyManagedTheme || isBundledSoftwareSet ? PLAN_BUSINESS : PLAN_PREMIUM;
}

// @TODO we should add a new feature for personal plan themes or what we agree on.
const feature =
PLAN_PREMIUM === plan
? WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED
: FEATURE_UPLOAD_THEMES_PLUGINS;

plansUrl = `/plans/${ siteSlug }/?plan=${ plan }&feature=${ feature }&redirect_to=${ redirectTo }`;
} else {
plansUrl =
isExternallyManagedTheme || isBundledSoftwareSet ? '/start/business' : '/start/premium';
}

const launchPricing = () => window.open( plansUrl, '_blank' );

const { canonicalUrl, description, name: themeName, seo_title, seo_description } = this.props;

const title = seo_title
Expand Down Expand Up @@ -1409,139 +1368,13 @@ class ThemeSheet extends Component {
} );
}

let pageUpsellBanner;
let previewUpsellBanner;

// Show theme upsell banner on Simple sites.
const hasWpComThemeUpsellBanner =
this.hasWpComThemeUpsellBanner() && ! this.shouldRenderForStaging();
// Show theme upsell banner on Jetpack sites.
const hasWpOrgThemeUpsellBanner =
this.hasWpOrgThemeUpsellBanner() && ! this.shouldRenderForStaging();
// Show theme upsell banner on Atomic sites.
const hasThemeUpsellBannerAtomic =
this.hasThemeUpsellBannerAtomic() && ! this.shouldRenderForStaging();

const hasUpsellBanner =
hasWpComThemeUpsellBanner || hasWpOrgThemeUpsellBanner || hasThemeUpsellBannerAtomic;

let onClick = null;

if (
shouldSelectSite( { isLoggedIn, siteCount, siteId } ) ||
( isExternallyManagedTheme && isLoggedIn && siteId )
) {
onClick = this.onButtonClick;
} else if ( ! isLoggedIn ) {
onClick = launchPricing;
}

const upsellNudgeClasses = clsx( 'theme__page-upsell-banner', {
'theme__page-upsell-disabled': this.state.disabledButton,
} );

if ( hasWpComThemeUpsellBanner ) {
const forceDisplay =
( isPremium && ! isThemePurchased ) ||
( isBundledSoftwareSet && ! isSiteBundleEligible ) ||
! isThemeAllowed ||
( isExternallyManagedTheme &&
! isThemeInstalled &&
( ! isMarketplaceThemeSubscribed || ! isSiteEligibleForManagedExternalThemes ) );

let upsellNudgePlan;
if ( ! isThemeAllowed ) {
upsellNudgePlan = THEME_TIERS[ themeTier.slug ].minimumUpsellPlan;
} else {
upsellNudgePlan =
isExternallyManagedTheme || isBundledSoftwareSet ? PLAN_BUSINESS : PLAN_PREMIUM;
}
const upsellNudgeFeature = themeTier?.feature;

pageUpsellBanner = (
<UpsellNudge
plan={ upsellNudgePlan }
className={ upsellNudgeClasses }
title={ this.getBannerUpsellTitle() }
description={ preventWidows( this.getBannerUpsellDescription() ) }
event="themes_plan_particular_free_with_plan"
feature={ upsellNudgeFeature }
forceHref={ onClick === null }
disableHref={ onClick !== null }
onClick={ null === onClick ? noop : onClick }
href={ plansUrl }
showIcon
forceDisplay={ forceDisplay }
displayAsLink={ onClick !== null }
tracksClickProperties={ { theme_tier: themeTier?.slug } }
/>
);
}

if ( hasWpOrgThemeUpsellBanner || hasThemeUpsellBannerAtomic ) {
const themeInstallationURL = `/marketplace/theme/${ themeId }/install/${ siteSlug }`;
const onThemeUpsellPlanClick = ( event ) => {
if ( shouldSelectSite( { isLoggedIn, siteCount, siteId } ) ) {
event?.preventDefault();
this.setState( { isSiteSelectorModalVisible: true } );
return;
}

this.props.setProductToBeInstalled( themeId, siteSlug );
};
const disableHref = shouldSelectSite( { isLoggedIn, siteCount, siteId } );
pageUpsellBanner = (
<UpsellNudge
plan={ PLAN_BUSINESS }
className="theme__page-upsell-banner"
onClick={ onThemeUpsellPlanClick }
title={ translate( 'Access this third-party theme with the %(businessPlanName)s plan!', {
args: { businessPlanName: getPlan( PLAN_BUSINESS ).getTitle() },
} ) }
description={ preventWidows(
translate(
'Instantly unlock thousands of different themes and install your own when you upgrade to the %(businessPlanName)s plan.',
{ args: { businessPlanName: getPlan( PLAN_BUSINESS ).getTitle() } }
)
) }
forceHref={ ! disableHref }
disableHref={ disableHref }
feature={ FEATURE_UPLOAD_THEMES }
forceDisplay
href={
siteId
? `/checkout/${ siteSlug }/business?redirect_to=${ themeInstallationURL }`
: localizeUrl( 'https://wordpress.com/start/business' )
}
showIcon
event="theme_upsell_plan_click"
tracksClickName="calypso_theme_upsell_plan_click"
tracksClickProperties={ {
theme_id: themeId,
theme_name: themeName,
theme_tier: themeTier?.slug,
} }
/>
);
}

if ( hasUpsellBanner ) {
previewUpsellBanner = cloneElement( pageUpsellBanner, {
className: 'theme__preview-upsell-banner',
} );
}

const isRemoved = this.isRemoved();

const className = clsx( 'theme__sheet', {
'is-with-upsell-banner': hasUpsellBanner,
} );
const columnsClassName = clsx( 'theme__sheet-columns', {
'is-removed': isRemoved,
} );

return (
<Main className={ className }>
<Main className="theme__sheet">
<QueryCanonicalTheme themeId={ this.props.themeId } siteId={ siteId } />
<QueryProductsList />
<QueryUserPurchases />
Expand Down Expand Up @@ -1599,7 +1432,6 @@ class ThemeSheet extends Component {
</div>
<div className={ columnsClassName }>
<div className="theme__sheet-column-header">
{ pageUpsellBanner }
{ this.renderStagingPaidThemeNotice() }
{ this.renderHeader() }
{ this.renderReviews() }
Expand All @@ -1616,7 +1448,7 @@ class ThemeSheet extends Component {
</div>
) }
</div>
<ThemePreview belowToolbar={ previewUpsellBanner } />
<ThemePreview />
<PremiumGlobalStylesUpgradeModal
checkout={ this.onPremiumGlobalStylesUpgradeModalCheckout }
tryStyle={ this.onPremiumGlobalStylesUpgradeModalTryStyle }
Expand Down

0 comments on commit 65ff96b

Please sign in to comment.