Theme tier badges changes (LiTS & LoTS)

client/components/theme-tier/theme-tier-badge/index.js

@@ -1,16 +1,14 @@
 import { BUNDLED_THEME, DOT_ORG_THEME, MARKETPLACE_THEME } from '@automattic/design-picker';
 import clsx from 'clsx';
-import useIsUpdatedBadgeDesign from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/design-setup/hooks/use-is-updated-badge-design';
 import { useSelector } from 'calypso/state';
 import { useIsThemeAllowedOnSite } from 'calypso/state/themes/hooks/use-is-theme-allowed-on-site';
 import { useThemeTierForTheme } from 'calypso/state/themes/hooks/use-theme-tier-for-theme';
-import { getThemeType, isThemePurchased } from 'calypso/state/themes/selectors';
+import { getThemeType } from 'calypso/state/themes/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { ThemeTierBadgeContextProvider } from './theme-tier-badge-context';
-import ThemeTierBundledBadge from './theme-tier-bundled-badge';
 import ThemeTierCommunityBadge from './theme-tier-community-badge';
 import ThemeTierFreeBadge from './theme-tier-free-badge';
-import ThemeTierPartnerBadge from './theme-tier-partner-badge';
+import ThemeTierIncludedBadge from './theme-tier-included-badge';
 import ThemeTierStyleVariationBadge from './theme-tier-style-variation-badge';
 import ThemeTierUpgradeBadge from './theme-tier-upgrade-badge';
 
@@ -23,22 +21,28 @@ export default function ThemeTierBadge( {
 	showUpgradeBadge = true,
 	themeId,
 	showPartnerPrice = false,
+	hideBackgroundOnUpgrade = false,
 } ) {
 	const siteId = useSelector( getSelectedSiteId );
 	const themeType = useSelector( ( state ) => getThemeType( state, themeId ) );
-	const isLegacyPremiumPurchased = useSelector( ( state ) =>
-		isThemePurchased( state, themeId, siteId )
-	);
 	const themeTier = useThemeTierForTheme( themeId );
 	const isThemeAllowed = useIsThemeAllowedOnSite( siteId, themeId );
-	const isUpdatedBadgeDesign = useIsUpdatedBadgeDesign();
 	const getBadge = () => {
-		if ( isUpdatedBadgeDesign && 'free' === themeTier?.slug ) {
+		if ( ! siteId && themeTier?.slug === 'free' ) {
 			return <ThemeTierFreeBadge />;
 		}
 
+		if ( siteId && isThemeAllowed ) {
+			return <ThemeTierIncludedBadge />;
+		}
+
 		if ( BUNDLED_THEME === themeType ) {
-			return <ThemeTierBundledBadge />;
+			return (
+				<ThemeTierUpgradeBadge
+					showPartnerPrice={ showPartnerPrice }
+					hideBackgroundOnUpgrade={ hideBackgroundOnUpgrade }
+				/>
+			);
 		}
 
 		if ( isLockedStyleVariation ) {
@@ -49,18 +53,25 @@ export default function ThemeTierBadge( {
 			return <ThemeTierCommunityBadge />;
 		}
 
-		if (
-			! isUpdatedBadgeDesign &&
-			( 'partner' === themeTier?.slug || MARKETPLACE_THEME === themeType )
-		) {
-			return <ThemeTierPartnerBadge />;
+		if ( 'partner' === themeTier?.slug || MARKETPLACE_THEME === themeType ) {
+			return (
+				<ThemeTierUpgradeBadge
+					showPartnerPrice={ showPartnerPrice }
+					hideBackgroundOnUpgrade={ hideBackgroundOnUpgrade }
+				/>
+			);
 		}
 
-		if ( isThemeAllowed || ( 'premium' === themeTier?.slug && isLegacyPremiumPurchased ) ) {
-			return null;
+		if ( ! isThemeAllowed && showUpgradeBadge ) {
+			return (
+				<ThemeTierUpgradeBadge
+					showPartnerPrice={ showPartnerPrice }
+					hideBackgroundOnUpgrade={ hideBackgroundOnUpgrade }
+				/>
+			);
 		}
 
-		return <ThemeTierUpgradeBadge showPartnerPrice={ showPartnerPrice } />;
+		return null;
 	};
 
 	const badge = getBadge();

client/components/theme-tier/theme-tier-badge/style.scss

@@ -23,6 +23,8 @@
 		.premium-badge__label {
 			overflow: hidden;
 			text-overflow: ellipsis;
+			white-space: nowrap;
+			font-size: $font-body-small;;
 		}
 	}
 
@@ -44,6 +46,10 @@
 	}
 }
 
+.theme-tier-included-label {
+	border-radius: 4px;
+}
+
 .theme-tier-badge-tooltip,
 .theme-tier-badge-tooltip.premium-badge__popover.popover,
 .theme-tier-badge-tooltip.bundled-badge__popover {
@@ -73,4 +79,4 @@
 	.components-button {
 		font-size: inherit;
 	}
-}
+}

client/components/theme-tier/theme-tier-badge/theme-tier-included-badge.js

@@ -0,0 +1,13 @@
+import { Badge } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import './style.scss';
+
+export default function ThemeTierIncludedBadge() {
+	const translate = useTranslate();
+
+	return (
+		<Badge type="info" className="theme-tier-included-label">
+			{ translate( 'Included with plan' ) }
+		</Badge>
+	);
+}

client/components/theme-tier/theme-tier-badge/theme-tier-upgrade-badge.js

@@ -3,14 +3,13 @@ import { PremiumBadge } from '@automattic/components';
 import { Plans } from '@automattic/data-stores';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
-import useIsUpdatedBadgeDesign from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/design-setup/hooks/use-is-updated-badge-design';
 import { useSelector } from 'calypso/state';
 import { useThemeTierForTheme } from 'calypso/state/themes/hooks/use-theme-tier-for-theme';
 import { getMarketplaceThemeSubscriptionPrices } from 'calypso/state/themes/selectors';
 import { THEME_TIERS } from '../constants';
 import { useThemeTierBadgeContext } from './theme-tier-badge-context';
 
-export default function ThemeTierPlanUpgradeBadge( { showPartnerPrice } ) {
+export default function ThemeTierPlanUpgradeBadge( { showPartnerPrice, hideBackgroundOnUpgrade } ) {
 	const translate = useTranslate();
 	const { themeId } = useThemeTierBadgeContext();
 	const themeTier = useThemeTierForTheme( themeId );
@@ -24,13 +23,8 @@ export default function ThemeTierPlanUpgradeBadge( { showPartnerPrice } ) {
 	// Using API plans because the updated getTitle() method doesn't take the experiment assignment into account.
 	const plans = Plans.usePlans( { coupon: undefined } );
 	const planName = plans?.data?.[ mappedPlan.getStoreSlug() ]?.productNameShort;
-	const isUpdatedBadgeDesign = useIsUpdatedBadgeDesign();
 
 	const getLabel = () => {
-		if ( ! isUpdatedBadgeDesign ) {
-			return translate( 'Upgrade' );
-		}
-
 		if ( showPartnerPrice && subscriptionPrices.month ) {
 			const fullLabel = translate( 'Available on %(planName)s plus %(price)s/month', {
 				args: {
@@ -62,7 +56,7 @@ export default function ThemeTierPlanUpgradeBadge( { showPartnerPrice } ) {
 	return (
 		<PremiumBadge
 			className={ clsx( 'theme-tier-badge__content', {
-				'theme-tier-badge__without-background': isUpdatedBadgeDesign,
+				'theme-tier-badge__without-background': hideBackgroundOnUpgrade,
 			} ) }
 			focusOnShow={ false }
 			labelText={ getLabel() }

client/components/theme/index.jsx

@@ -335,7 +335,13 @@ export class Theme extends Component {
 			shouldLimitGlobalStyles,
 		} );
 
-		return <ThemeTierBadge themeId={ theme.id } isLockedStyleVariation={ isLocked } />;
+		return (
+			<ThemeTierBadge
+				themeId={ theme.id }
+				isLockedStyleVariation={ isLocked }
+				hideBackgroundOnUpgrade
+			/>
+		);
 	};
 
 	render() {

client/my-sites/theme/main.jsx

@@ -10,9 +10,7 @@ import {
 import page from '@automattic/calypso-router';
 import { Button, Card, Gridicon } from '@automattic/components';
 import {
-	BUNDLED_THEME,
 	DEFAULT_GLOBAL_STYLES_VARIATION_SLUG,
-	DOT_ORG_THEME,
 	ThemePreview as ThemeWebPreview,
 	getDesignPreviewUrl,
 	isDefaultGlobalStylesVariationSlug,
@@ -553,26 +551,6 @@ class ThemeSheet extends Component {
 		);
 	};
 
-	renderThemeBadge = () => {
-		const { themeId, themeTier, themeType } = this.props;
-
-		const isCommunityTheme = themeType === DOT_ORG_THEME;
-		const isPartnerTheme = themeTier.slug === 'partner';
-		const isSenseiOrWooCommerceTheme = themeType === BUNDLED_THEME;
-
-		if ( ! isCommunityTheme && ! isPartnerTheme && ! isSenseiOrWooCommerceTheme ) {
-			return null;
-		}
-
-		return (
-			<ThemeTierBadge
-				className="theme__sheet-main-info-type"
-				showUpgradeBadge={ false }
-				themeId={ themeId }
-			/>
-		);
-	};
-
 	renderHeader = () => {
 		const {
 			author,
@@ -596,8 +574,14 @@ class ThemeSheet extends Component {
 				<div className="theme__sheet-main">
 					<div className="theme__sheet-main-info">
 						<h1 className="theme__sheet-main-info-title">
+							<ThemeTierBadge
+								className="theme__sheet-main-info-type"
+								showUpgradeBadge
+								showPartnerPrice
+								themeId={ themeId }
+							/>
+
 							{ title }
-							{ this.renderThemeBadge() }
 							{ softLaunched && (
 								<span className="theme__sheet-bar-soft-launched">{ translate( 'A8C Only' ) }</span>
 							) }

client/my-sites/theme/style.scss

@@ -229,25 +229,30 @@ $button-border: 4px;
 		}
 	}
 
+	.theme__sheet-main-info {
+		display: flex;
+		flex-direction: column;
+	}
+
 	.theme__sheet-main-info-title {
 		@include onboarding-font-recoleta;
-		align-items: center;
 		display: flex;
+		flex-direction: column;
 		font-size: $font-title-large;
-		line-height: 1;
+		line-height: 1.2;
+		margin: 0;
 	}
-
+	
 	.theme__sheet-main-info-type {
-		flex-basis: unset;
-		font-family: $sans;
-		margin-left: 8px;
+		align-self: flex-start;
+		margin: 0;
+		margin-bottom: 8px;
 	}
-
+	
 	.theme__sheet-main-info-tag {
 		color: var(--color-neutral-60);
 		font-size: $font-body;
 		font-weight: 400;
-		letter-spacing: -0.32px;
 		line-height: 24px;
 	}
 }

packages/design-picker/src/components/theme-card/index.tsx

@@ -1,7 +1,7 @@
 import { Card } from '@automattic/components';
 import clsx from 'clsx';
 import { translate } from 'i18n-calypso';
-import { forwardRef, useMemo, Suspense, lazy } from 'react';
+import { forwardRef, useMemo } from 'react';
 import type { StyleVariation } from '../../types';
 import type { Ref } from 'react';
 import './style.scss';
@@ -26,8 +26,6 @@ interface ThemeCardProps {
 	onStyleVariationMoreClick?: () => void;
 }
 
-const StyleVariationBadges = lazy( () => import( '../style-variation-badges' ) );
-
 const ActiveBadge = () => {
 	return (
 		<div className="theme-card__info-badge-container">
@@ -61,15 +59,11 @@ const ThemeCard = forwardRef(
 			banner,
 			badge,
 			styleVariations = [],
-			selectedStyleVariation,
-			optionsMenu,
 			isActive,
 			isLoading,
 			isSoftLaunched,
 			onClick,
 			onImageClick,
-			onStyleVariationClick,
-			onStyleVariationMoreClick,
 		}: ThemeCardProps,
 		forwardedRef: Ref< any > // eslint-disable-line @typescript-eslint/no-explicit-any
 	) => {
@@ -129,19 +123,9 @@ const ThemeCard = forwardRef(
 						<h2 className="theme-card__info-title">
 							<span>{ name }</span>
 						</h2>
-						{ ! optionsMenu && (
-							<Suspense fallback={ null }>
-								<StyleVariationBadges
-									className="theme-card__info-style-variations"
-									variations={ styleVariations }
-									selectedVariation={ selectedStyleVariation }
-									onMoreClick={ onStyleVariationMoreClick }
-									onClick={ onStyleVariationClick }
-								/>
-							</Suspense>
+						{ ! isActive && badge && (
+							<div className="theme-card__info-badge-container">{ badge }</div>
 						) }
-						{ ! isActive && badge && <>{ badge }</> }
-						{ optionsMenu && <div className="theme-card__info-options">{ optionsMenu }</div> }
 						{ isActive && <ActiveBadge /> }
 					</div>
 				</div>

packages/design-picker/src/components/theme-card/style.scss

@@ -26,10 +26,11 @@ $theme-card-info-margin-top: 16px;
 	}
 
 	.theme-card__info-badge-container {
-		position: absolute;
-		bottom: 0;
+		align-items: center;
 		display: flex;
-		flex-basis: 100%;
+		font-size: 0;
+		gap: 4px;
+		height: 24px;
 	}
 
 	.theme-card__info-badge-active {