Update theme tier badges

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

@@ -27,10 +27,6 @@ export default function ThemeTierPlanUpgradeBadge( { showPartnerPrice } ) {
 	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: {

client/components/theme/index.jsx

@@ -1,23 +1,25 @@
-import { Card, Button, Gridicon } from '@automattic/components';
+import { Badge, Card, Button, Gridicon } from '@automattic/components';
 import {
 	DesignPreviewImage,
 	PREMIUM_THEME,
 	ThemeCard,
 	isDefaultGlobalStylesVariationSlug,
 	isLockedStyleVariation,
 } from '@automattic/design-picker';
-import { localize } from 'i18n-calypso';
+import { localize, translate } from 'i18n-calypso';
 import { isEmpty, isEqual } from 'lodash';
 import photon from 'photon';
 import PropTypes from 'prop-types';
 import { Component, createRef } from 'react';
 import { connect } from 'react-redux';
 import ThemeTierBadge from 'calypso/components/theme-tier/theme-tier-badge';
+import ThemeTierFreeBadge from 'calypso/components/theme-tier/theme-tier-badge/theme-tier-free-badge';
 import { decodeEntities } from 'calypso/lib/formatting';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { useSiteGlobalStylesStatus } from 'calypso/state/sites/hooks/use-site-global-styles-status';
 import { getSiteSlug } from 'calypso/state/sites/selectors';
 import { updateThemes } from 'calypso/state/themes/actions/theme-update';
+import { useIsThemeAllowedOnSite } from 'calypso/state/themes/hooks/use-is-theme-allowed-on-site';
 import { isExternallyManagedTheme as getIsExternallyManagedTheme } from 'calypso/state/themes/selectors';
 import { setThemesBookmark } from 'calypso/state/themes/themes-ui/actions';
 import ThemeMoreButton from './more-button';
@@ -154,8 +156,7 @@ export class Theme extends Component {
 	}
 
 	renderScreenshot() {
-		const { isExternallyManagedTheme, selectedStyleVariation, theme, siteSlug, translate } =
-			this.props;
+		const { isExternallyManagedTheme, selectedStyleVariation, theme, siteSlug } = this.props;
 		const { isScreenshotLoaded } = this.state;
 		const { description, screenshot } = theme;
 
@@ -232,7 +233,7 @@ export class Theme extends Component {
 	};
 
 	renderUpdateAlert = () => {
-		const { isUpdated, isUpdating, errorOnUpdate, theme, translate } = this.props;
+		const { isUpdated, isUpdating, errorOnUpdate, theme } = this.props;
 
 		if ( ! theme.update && ! isUpdated && ! isUpdating && ! errorOnUpdate ) {
 			return;
@@ -325,7 +326,7 @@ export class Theme extends Component {
 	};
 
 	renderBadge = () => {
-		const { selectedStyleVariation, shouldLimitGlobalStyles, theme } = this.props;
+		const { selectedStyleVariation, shouldLimitGlobalStyles, theme, isThemeAllowed } = this.props;
 
 		const isPremiumTheme = theme.theme_tier?.slug === PREMIUM_THEME;
 
@@ -335,6 +336,16 @@ export class Theme extends Component {
 			shouldLimitGlobalStyles,
 		} );
 
+		const isFreeTheme = theme.theme_tier?.slug === 'free';
+
+		if ( isFreeTheme ) {
+			return <ThemeTierFreeBadge />;
+		}
+
+		if ( isThemeAllowed ) {
+			return <Badge type="info">{ translate( 'Included with plan' ) }</Badge>;
+		}
+
 		return <ThemeTierBadge themeId={ theme.id } isLockedStyleVariation={ isLocked } />;
 	};
 
@@ -391,5 +402,12 @@ const ConnectedTheme = connect(
 
 export default ( props ) => {
 	const { shouldLimitGlobalStyles } = useSiteGlobalStylesStatus( props.siteId );
-	return <ConnectedTheme { ...props } shouldLimitGlobalStyles={ shouldLimitGlobalStyles } />;
+	const isThemeAllowed = useIsThemeAllowedOnSite( props.siteId, props.theme.id );
+	return (
+		<ConnectedTheme
+			{ ...props }
+			shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
+			isThemeAllowed={ isThemeAllowed }
+		/>
+	);
 };

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,12 @@ 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,20 +124,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 && <>{ badge }</> }
-						{ optionsMenu && <div className="theme-card__info-options">{ optionsMenu }</div> }
 						{ isActive && <ActiveBadge /> }
+						{ optionsMenu && <div className="theme-card__info-options">{ optionsMenu }</div> }
 					</div>
 				</div>
 			</Card>

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

@@ -25,13 +25,6 @@ $theme-card-info-margin-top: 16px;
 		}
 	}
 
-	.theme-card__info-badge-container {
-		position: absolute;
-		bottom: 0;
-		display: flex;
-		flex-basis: 100%;
-	}
-
 	.theme-card__info-badge-active {
 		display: flex;
 		background-color: var(--color-primary);
@@ -223,20 +216,33 @@ $theme-card-info-margin-top: 16px;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 
-	&-badge {
+	&-badge, .theme-tier-badge, .theme-card__info-badge-container {
 		border-radius: 20px;  /* stylelint-disable-line scales/radii */
 		flex: 0 0 auto;
 		text-transform: none;
 		font-size: $font-body-extra-small;
 		font-weight: 600;
 		line-height: 20px;
 		padding: 0 10px;
+		margin-right: -20px;
 
 		&-active {
 			background-color: var(--color-primary-0);
 			color: var(--color-neutral-100);
 		}
 	}
+
+	.badge--info {
+		background: #EBEEFC;
+		color: var(--studio-wordpress-blue);
+	}
+
+	.theme-tier-badge .premium-badge {
+		background: transparent;
+		color: var(--studio-gray-80);
+		padding: 0;
+		font-weight: 400;
+	}
 }
 
 .theme-card__info-soft-launched {
@@ -272,21 +278,6 @@ $theme-card-info-margin-top: 16px;
 	text-overflow: ellipsis;
 }
 
-.theme-card__info-style-variations {
-	align-items: center;
-	display: flex;
-	font-size: 0;
-	gap: 4px;
-	height: 24px;
-
-	.style-variation__badge-wrapper,
-	.style-variation__badge-more-wrapper {
-		&:focus-visible span {
-			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--color-primary-light);
-		}
-	}
-}
-
 .theme-card__info-options,
 .theme-card__info-options .theme__more-button {
 	border: 0;