diff --git a/client/components/theme-tier/theme-tier-badge/index.js b/client/components/theme-tier/theme-tier-badge/index.js
index 2a5fd7e979736f..969732c4aa2e01 100644
--- a/client/components/theme-tier/theme-tier-badge/index.js
+++ b/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 ;
}
+ if ( siteId && isThemeAllowed ) {
+ return ;
+ }
+
if ( BUNDLED_THEME === themeType ) {
- return ;
+ return (
+
+ );
}
if ( isLockedStyleVariation ) {
@@ -49,18 +53,25 @@ export default function ThemeTierBadge( {
return ;
}
- if (
- ! isUpdatedBadgeDesign &&
- ( 'partner' === themeTier?.slug || MARKETPLACE_THEME === themeType )
- ) {
- return ;
+ if ( 'partner' === themeTier?.slug || MARKETPLACE_THEME === themeType ) {
+ return (
+
+ );
}
- if ( isThemeAllowed || ( 'premium' === themeTier?.slug && isLegacyPremiumPurchased ) ) {
- return null;
+ if ( ! isThemeAllowed && showUpgradeBadge ) {
+ return (
+
+ );
}
- return ;
+ return null;
};
const badge = getBadge();
diff --git a/client/components/theme-tier/theme-tier-badge/style.scss b/client/components/theme-tier/theme-tier-badge/style.scss
index 9729d8b422a215..a97b58486d7882 100644
--- a/client/components/theme-tier/theme-tier-badge/style.scss
+++ b/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;
}
-}
+}
\ No newline at end of file
diff --git a/client/components/theme-tier/theme-tier-badge/theme-tier-included-badge.js b/client/components/theme-tier/theme-tier-badge/theme-tier-included-badge.js
new file mode 100644
index 00000000000000..e7ed982961ff59
--- /dev/null
+++ b/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 (
+
+ { translate( 'Included with plan' ) }
+
+ );
+}
diff --git a/client/components/theme-tier/theme-tier-badge/theme-tier-upgrade-badge.js b/client/components/theme-tier/theme-tier-badge/theme-tier-upgrade-badge.js
index 5439ff149ecdde..0213b0befb1941 100644
--- a/client/components/theme-tier/theme-tier-badge/theme-tier-upgrade-badge.js
+++ b/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 (
;
+ return (
+
+ );
};
render() {
diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
index 004d596c1878db..28002bb0c70d1e 100644
--- a/client/my-sites/theme/main.jsx
+++ b/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 (
-
- );
- };
-
renderHeader = () => {
const {
author,
@@ -596,8 +574,14 @@ class ThemeSheet extends Component {
+
+
{ title }
- { this.renderThemeBadge() }
{ softLaunched && (
{ translate( 'A8C Only' ) }
) }
diff --git a/client/my-sites/theme/style.scss b/client/my-sites/theme/style.scss
index e0d9e1944048b1..67a578a6b3ae95 100644
--- a/client/my-sites/theme/style.scss
+++ b/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;
}
}
diff --git a/packages/design-picker/src/components/theme-card/index.tsx b/packages/design-picker/src/components/theme-card/index.tsx
index de7d8a9b7370c6..8b63527d08fd01 100644
--- a/packages/design-picker/src/components/theme-card/index.tsx
+++ b/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 (
@@ -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(
{ name }
- { ! optionsMenu && (
-
-
-
+ { ! isActive && badge && (
+
{ badge }
) }
- { ! isActive && badge && <>{ badge }> }
- { optionsMenu &&
{ optionsMenu }
}
{ isActive &&
}
diff --git a/packages/design-picker/src/components/theme-card/style.scss b/packages/design-picker/src/components/theme-card/style.scss
index c6d4ce55609280..b0de81e2e73f9a 100644
--- a/packages/design-picker/src/components/theme-card/style.scss
+++ b/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 {