diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx index d47fcf1394af46..28f53036c6986f 100644 --- a/client/my-sites/theme/main.jsx +++ b/client/my-sites/theme/main.jsx @@ -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, @@ -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'; @@ -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'; @@ -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. @@ -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 : '' }${ @@ -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 @@ -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 = ( - - ); - } - - 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 = ( - - ); - } - - 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 ( -
+
@@ -1599,7 +1432,6 @@ class ThemeSheet extends Component {
- { pageUpsellBanner } { this.renderStagingPaidThemeNotice() } { this.renderHeader() } { this.renderReviews() } @@ -1616,7 +1448,7 @@ class ThemeSheet extends Component {
) }
- +