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 {