Site Migration: Indicate that you own the plan on the Migrate vs Impo…

…rt step (#98017)

* Show whether a plan upgrade is necessary or not

* Fix missing import

* Fix missing import

* Remove unexpected change

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;
 }

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' } );

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();
+	} );
 } );

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;
 }