From d7ed2364c79d23aa9318142118a969358f98ea19 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Mon, 13 Jan 2025 11:58:55 +0000 Subject: [PATCH 1/4] Show whether a plan upgrade is necessary or not --- .../components/flow-card/index.tsx | 2 +- .../index.tsx | 66 ++++++------------- .../test/index.tsx | 15 +++++ .../src/components/flow-card/index.tsx | 2 +- 4 files changed, 38 insertions(+), 47 deletions(-) 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 f74d10e0b9bedc..d4d165985fe047 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 @@ -13,7 +13,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 c72bae38e1d2a5..b7f58fab0d51e7 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,74 +23,49 @@ 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, }, { label: translate( 'Import content only' ), - description: translate( 'Import just posts, pages, comments and media.' ), + description: translate( 'Import posts, pages, comments, and media only.' ), 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 0204b726f7e439..63a74ecb07f409 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 f74d10e0b9bedc..d4d165985fe047 100644 --- a/packages/subscriber/src/components/flow-card/index.tsx +++ b/packages/subscriber/src/components/flow-card/index.tsx @@ -13,7 +13,7 @@ interface FlowCardProps { disabled?: boolean; badge?: { type: BadgeType; - text: string; + text: ReactNode; }; className?: string; } From 898ed6ae375414663410ef66cd129017503fca34 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Mon, 13 Jan 2025 14:00:08 +0000 Subject: [PATCH 2/4] Fix missing import --- packages/subscriber/src/components/flow-card/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/subscriber/src/components/flow-card/index.tsx b/packages/subscriber/src/components/flow-card/index.tsx index d4d165985fe047..6ce2d3d3bc666e 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'; From ba8090102895e05c82564f79aecab494f45d58b4 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Tue, 14 Jan 2025 11:36:03 +0000 Subject: [PATCH 3/4] Fix missing import --- .../internals/steps-repository/components/flow-card/index.tsx | 1 + 1 file changed, 1 insertion(+) 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 d4d165985fe047..6ce2d3d3bc666e 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'; From 2d8c438f5db333c9cdd1e19706b5a454992c1267 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Wed, 15 Jan 2025 17:15:40 +0000 Subject: [PATCH 4/4] Remove unexpected change --- .../steps-repository/site-migration-import-or-migrate/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b7f58fab0d51e7..664c4e485bfe21 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 @@ -55,7 +55,7 @@ const SiteMigrationImportOrMigrate: Step = function ( { navigation, flow } ) { }, { label: translate( 'Import content only' ), - description: translate( 'Import posts, pages, comments, and media only.' ), + description: translate( 'Import just posts, pages, comments and media.' ), value: 'import', }, ];