diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx index f74d10e0b9bed..6ce2d3d3bc666 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx @@ -2,6 +2,7 @@ import { Badge } from '@automattic/components'; import { Flex, FlexBlock, FlexItem, Card, CardBody, Icon } from '@wordpress/components'; import { chevronRight } from '@wordpress/icons'; import clsx from 'clsx'; +import { type ReactNode } from 'react'; import type { BadgeType } from '@automattic/components'; import './style.scss'; @@ -13,7 +14,7 @@ interface FlowCardProps { disabled?: boolean; badge?: { type: BadgeType; - text: string; + text: ReactNode; }; className?: string; } diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/index.tsx index c72bae38e1d2a..664c4e485bfe2 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/index.tsx @@ -1,9 +1,10 @@ -import { getPlan, isWpComBusinessPlan, PLAN_BUSINESS } from '@automattic/calypso-products'; +import { getPlan, PLAN_BUSINESS } from '@automattic/calypso-products'; import { BadgeType } from '@automattic/components'; import { StepContainer } from '@automattic/onboarding'; import { canInstallPlugins } from '@automattic/sites'; import { getQueryArg } from '@wordpress/url'; import { useTranslate } from 'i18n-calypso'; +import { useMemo } from 'react'; import DocumentHead from 'calypso/components/data/document-head'; import FormattedHeader from 'calypso/components/formatted-header'; import { useMigrationCancellation } from 'calypso/data/site-migration/landing/use-migration-cancellation'; @@ -22,56 +23,33 @@ const SiteMigrationImportOrMigrate: Step = function ( { navigation, flow } ) { const importSiteQueryParam = getQueryArg( window.location.href, 'from' )?.toString() || ''; const { deleteMigrationSticker } = useMigrationStickerMutation(); const { mutate: cancelMigration } = useMigrationCancellation( site?.ID ); - - const isBusinessPlan = site?.plan?.product_slug - ? isWpComBusinessPlan( site?.plan?.product_slug ) - : false; - - let options; - + const siteCanInstallPlugins = canInstallPlugins( site ); + const isUpgradeRequired = ! siteCanInstallPlugins; const isMigrationExperimentEnabled = useMigrationExperiment( flow ); - if ( isMigrationExperimentEnabled ) { - const badgeText = isBusinessPlan - ? translate( 'Included with your plan' ) - : // translators: %(planName)s is a plan name (e.g. Commerce plan). - ( translate( 'Available on %(planName)s with 50% off', { + const options = useMemo( () => { + const upgradeRequiredLabel = isMigrationExperimentEnabled + ? translate( 'Available on %(planName)s with 50% off', { + args: { planName: getPlan( PLAN_BUSINESS )?.getTitle() ?? '' }, + } ) + : translate( 'Requires %(planName)s plan', { args: { planName: getPlan( PLAN_BUSINESS )?.getTitle() ?? '' }, - } ) as string ); + } ); - options = [ - { - label: translate( 'Migrate site' ), - description: translate( + const migrateOptionDescription = isMigrationExperimentEnabled + ? translate( "Best for WordPress sites. Seamlessly move all your site's content, themes, plugins, users, and customizations to WordPress.com." - ), - value: 'migrate', - badge: { - type: 'info-blue' as BadgeType, - text: badgeText, - }, - selected: true, - }, - { - label: translate( 'Import content only' ), - description: translate( 'Import posts, pages, comments, and media only.' ), - value: 'import', - }, - ]; - } else { - options = [ + ) + : translate( "All your site's content, themes, plugins, users and customizations." ); + + return [ { label: translate( 'Migrate site' ), - description: translate( - "All your site's content, themes, plugins, users and customizations." - ), + description: migrateOptionDescription, value: 'migrate', badge: { type: 'info-blue' as BadgeType, - // translators: %(planName)s is a plan name (e.g. Commerce plan). - text: translate( 'Requires %(planName)s plan', { - args: { planName: getPlan( PLAN_BUSINESS )?.getTitle() ?? '' }, - } ) as string, + text: isUpgradeRequired ? upgradeRequiredLabel : translate( 'Included with your plan' ), }, selected: true, }, @@ -81,15 +59,13 @@ const SiteMigrationImportOrMigrate: Step = function ( { navigation, flow } ) { value: 'import', }, ]; - } + }, [ isMigrationExperimentEnabled, isUpgradeRequired, translate ] ); const { data: hostingProviderDetails } = useHostingProviderUrlDetails( importSiteQueryParam ); const hostingProviderName = hostingProviderDetails.name; const shouldDisplayHostIdentificationMessage = ! hostingProviderDetails.is_unknown && ! hostingProviderDetails.is_a8c; - const siteCanInstallPlugins = canInstallPlugins( site ); - const handleClick = ( destination: string ) => { if ( destination === 'migrate' && ! siteCanInstallPlugins ) { return navigation.submit?.( { destination: 'upgrade' } ); diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/test/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/test/index.tsx index 0204b726f7e43..63a74ecb07f40 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/test/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-import-or-migrate/test/index.tsx @@ -136,4 +136,19 @@ describe( 'Site Migration Import or Migrate Step', () => { expect( deleteMigrationSticker ).toHaveBeenCalledWith( 123 ); } ); + + it( 'shows the upgrade required badge when the site can not install plugins', () => { + render(); + + expect( screen.getByText( /Requires Business plan/ ) ).toBeInTheDocument(); + } ); + + it( 'shows the included with your plan badge when the site can install plugins', () => { + ( useSite as jest.Mock ).mockReturnValue( { + plan: { features: { active: [ 'install-plugins' ] } }, + } ); + render(); + + expect( screen.getByText( /Included with your plan/ ) ).toBeInTheDocument(); + } ); } ); diff --git a/packages/subscriber/src/components/flow-card/index.tsx b/packages/subscriber/src/components/flow-card/index.tsx index f74d10e0b9bed..6ce2d3d3bc666 100644 --- a/packages/subscriber/src/components/flow-card/index.tsx +++ b/packages/subscriber/src/components/flow-card/index.tsx @@ -2,6 +2,7 @@ import { Badge } from '@automattic/components'; import { Flex, FlexBlock, FlexItem, Card, CardBody, Icon } from '@wordpress/components'; import { chevronRight } from '@wordpress/icons'; import clsx from 'clsx'; +import { type ReactNode } from 'react'; import type { BadgeType } from '@automattic/components'; import './style.scss'; @@ -13,7 +14,7 @@ interface FlowCardProps { disabled?: boolean; badge?: { type: BadgeType; - text: string; + text: ReactNode; }; className?: string; }