From 3720d28df0c42647eba548ea6a577f0882f699e7 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Tue, 3 Dec 2024 17:15:34 -0500
Subject: [PATCH 01/49] Initial start at new plans page for migrations

---
 .../importer/wordpress/upgrade-plan/index.tsx |  33 +++-
 .../wordpress/upgrade-plan/skeleton/index.tsx |  90 +++++-----
 .../importer/wordpress/upgrade-plan/types.ts  |   7 +-
 .../upgrade-plan/upgrade-plan-details.tsx     | 169 +++++++++++++++---
 .../migration-assistance-modal/index.tsx      |   4 +-
 .../importer-migrate-message/style.scss       |   2 +-
 .../site-migration-upgrade-plan/index.tsx     |  63 +++++--
 .../site-migration-upgrade-plan/style.scss    |  56 ++++++
 8 files changed, 330 insertions(+), 94 deletions(-)
 create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index a710409e0d188..cecd64da4e83a 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -1,6 +1,11 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { isEnabled } from '@automattic/calypso-config';
-import { getPlan, PLAN_BUSINESS } from '@automattic/calypso-products';
+import {
+	getPlan,
+	PLAN_BUSINESS,
+	PLAN_BUSINESS_2_YEARS,
+	PLAN_BUSINESS_MONTHLY,
+} from '@automattic/calypso-products';
 import { Button } from '@automattic/components';
 import { Plans } from '@automattic/data-stores';
 import { useHasEnTranslation, useIsEnglishLocale } from '@automattic/i18n-utils';
@@ -35,6 +40,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 		trackingEventsProps,
 		hideFreeMigrationTrialForNonVerifiedEmail = false,
 		visiblePlan = PLAN_BUSINESS,
+		showVariants = false,
 	} = props;
 	const { data: migrationTrialEligibility } = useCheckEligibilityMigrationTrialPlan( site.ID );
 	const isEligibleForTrialPlan =
@@ -47,7 +53,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 	const pricingMeta = Plans.usePricingMetaForGridPlans( {
 		coupon: undefined,
-		planSlugs: [ visiblePlan ],
+		planSlugs: [ visiblePlan, PLAN_BUSINESS_2_YEARS, PLAN_BUSINESS_MONTHLY ],
 		siteId: site.ID,
 		storageAddOns: null,
 		useCheckPlanAvailabilityForPurchase,
@@ -56,6 +62,16 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 	const pricing =
 		pricingMeta && pricingMeta[ visiblePlan ] ? pricingMeta[ visiblePlan ] : undefined;
 
+	const pricing2Years =
+		pricingMeta && pricingMeta[ PLAN_BUSINESS_2_YEARS ]
+			? pricingMeta[ PLAN_BUSINESS_2_YEARS ]
+			: undefined;
+
+	const pricingMonthly =
+		pricingMeta && pricingMeta[ PLAN_BUSINESS_MONTHLY ]
+			? pricingMeta[ PLAN_BUSINESS_MONTHLY ]
+			: undefined;
+
 	const introOfferAvailable =
 		isEnabled( 'migration-flow/introductory-offer' ) &&
 		pricing?.introOffer &&
@@ -155,7 +171,13 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 		  );
 
 	if ( isFetchingHostingDetails || ! pricing ) {
-		return <Skeleton />;
+		return (
+			<div className="import__upgrade-plan">
+				{ showVariants && <Skeleton showVariants={ showVariants } /> }
+				<Skeleton showVariants={ showVariants } />
+				{ showVariants && <Skeleton showVariants={ showVariants } /> }
+			</div>
+		);
 	}
 
 	return (
@@ -194,11 +216,14 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 			) }
 
 			<PlanNoticeCreditUpgrade siteId={ site.ID } visiblePlans={ [ visiblePlan ] } />
-
 			<UpgradePlanDetails
 				pricing={ pricing }
+				pricing2Years={ pricing2Years }
+				pricingMonthly={ pricingMonthly }
 				introOfferAvailable={ !! introOfferAvailable }
 				upgradePlanHostingDetailsList={ upgradePlanHostingDetailsList }
+				showVariants={ showVariants }
+				onCtaClick={ onCtaClick }
 			>
 				{ renderCTAs() }
 			</UpgradePlanDetails>
diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
index d1544681880dc..b0787e57bb29d 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import './style.scss';
 
-export const Skeleton: FC = () => {
+export const Skeleton: FC< { showVariants: boolean } > = ( { showVariants } ) => {
 	return (
 		<div className="import__upgrade-plan">
 			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
@@ -33,58 +33,60 @@ export const Skeleton: FC = () => {
 							style={ { width: '103px', margin: '0 auto' } }
 						/>
 					</div>
-					<div className="import__upgrade-plan-hosting-details">
-						<div className="import__upgrade-plan-hosting-details-card-container">
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-								style={ { width: '131px', height: '17px', margin: '0 auto 14px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton"
-								style={ { width: '277px', margin: '0 auto 40px' } }
-							/>
-
-							{ Array.from( { length: 3 } ).map( ( _, index ) => (
+					{ ! showVariants && (
+						<div className="import__upgrade-plan-hosting-details">
+							<div className="import__upgrade-plan-hosting-details-card-container">
 								<div
-									key={ index }
-									className="import-upgrade-plan-skeleton__flex-container"
-									style={ { marginBottom: '12px' } }
-								>
+									className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+									style={ { width: '131px', height: '17px', margin: '0 auto 14px' } }
+								/>
+								<div
+									className="import-upgrade-plan-skeleton"
+									style={ { width: '277px', margin: '0 auto 40px' } }
+								/>
+
+								{ Array.from( { length: 3 } ).map( ( _, index ) => (
 									<div
-										className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--light-highlight"
-										style={ {
-											width: '36px',
-											height: '36px',
-											marginRight: '8px',
-											borderRadius: '4px',
-										} }
-									/>
-									<div>
+										key={ index }
+										className="import-upgrade-plan-skeleton__flex-container"
+										style={ { marginBottom: '12px' } }
+									>
 										<div
-											className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-											style={ { width: '111px' } }
+											className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--light-highlight"
+											style={ {
+												width: '36px',
+												height: '36px',
+												marginRight: '8px',
+												borderRadius: '4px',
+											} }
 										/>
-										<div className="import-upgrade-plan-skeleton" style={ { width: '257px' } } />
+										<div>
+											<div
+												className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+												style={ { width: '111px' } }
+											/>
+											<div className="import-upgrade-plan-skeleton" style={ { width: '257px' } } />
+										</div>
 									</div>
-								</div>
-							) ) }
+								) ) }
 
-							<div
-								className="import-upgrade-plan-skeleton"
-								style={ { width: '277px', margin: '28px auto 10px' } }
-							/>
+								<div
+									className="import-upgrade-plan-skeleton"
+									style={ { width: '277px', margin: '28px auto 10px' } }
+								/>
 
-							<div
-								className="import-upgrade-plan-skeleton__flex-container"
-								style={ { justifyContent: 'center' } }
-							>
-								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+								<div
+									className="import-upgrade-plan-skeleton__flex-container"
+									style={ { justifyContent: 'center' } }
+								>
+									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+								</div>
 							</div>
 						</div>
-					</div>
+					) }
 				</div>
 			</div>
 		</div>
diff --git a/client/blocks/importer/wordpress/upgrade-plan/types.ts b/client/blocks/importer/wordpress/upgrade-plan/types.ts
index 413fd6a469ce2..46acf2b582ed0 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/types.ts
+++ b/client/blocks/importer/wordpress/upgrade-plan/types.ts
@@ -17,6 +17,10 @@ export type UpgradePlanDetailsProps = {
 	introOfferAvailable: boolean;
 	pricing?: PricingMetaForGridPlan;
 	upgradePlanHostingDetailsList: Array< HostingDetailsItem >;
+	showVariants?: boolean;
+	onCtaClick?: ( planSlug: string ) => void;
+	pricing2Years?: PricingMetaForGridPlan;
+	pricingMonthly?: PricingMetaForGridPlan;
 };
 
 export type UpgradePlanProps = {
@@ -27,9 +31,10 @@ export type UpgradePlanProps = {
 	hideTitleAndSubTitle?: boolean;
 	onFreeTrialClick?: () => void;
 	navigateToVerifyEmailStep: () => void;
-	onCtaClick: () => void;
+	onCtaClick: ( planSlug: string ) => void;
 	onContentOnlyClick?: () => void;
 	trackingEventsProps?: Record< string, unknown >;
 	hideFreeMigrationTrialForNonVerifiedEmail?: boolean;
+	showVariants?: boolean;
 	visiblePlan?: PlanSlug;
 };
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 55241e398533d..9aca56fb1a23a 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -4,13 +4,14 @@ import {
 	Plan,
 	PLAN_BUSINESS,
 	PLAN_BUSINESS_MONTHLY,
+	PLAN_BUSINESS_2_YEARS,
 	isMonthly,
 } from '@automattic/calypso-products';
 import { Badge, CloudLogo, Button, PlanPrice } from '@automattic/components';
 import { PricingMetaForGridPlan } from '@automattic/data-stores';
 import { formatCurrency } from '@automattic/format-currency';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
-import { Title } from '@automattic/onboarding';
+import { NextButton, Title } from '@automattic/onboarding';
 import { Plans2023Tooltip, useManageTooltipToggle } from '@automattic/plans-grid-next';
 import clsx from 'clsx';
 import { type TranslateResult, useTranslate } from 'i18n-calypso';
@@ -79,6 +80,7 @@ interface PlanPriceOfferProps {
 	originalFullPrice?: number;
 	introOfferFullPrice?: number;
 	introOfferAvailable: boolean;
+	showVariants?: boolean;
 }
 
 const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
@@ -93,6 +95,7 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 		introOfferMonthlyPrice,
 		originalMonthlyPrice,
 		currencyCode,
+		showVariants,
 	} = props;
 
 	const showOriginalPrice =
@@ -148,9 +151,11 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 
 	return (
 		<UpgradePlanPrice billingTimeFrame={ billingTimeFrame }>
-			<Badge type="info-purple" className="import__upgrade-plan-price-badge">
-				{ badgeText }
-			</Badge>
+			{ ! showVariants && (
+				<Badge type="info-purple" className="import__upgrade-plan-price-badge">
+					{ badgeText }
+				</Badge>
+			) }
 			<div className="import__upgrade-plan-price-group">
 				<PlanPrice
 					rawPrice={ originalMonthlyPrice }
@@ -172,7 +177,8 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 const preparePlanPriceOfferProps = (
 	introOfferAvailable: boolean,
 	plan?: Plan,
-	pricing?: PricingMetaForGridPlan
+	pricing?: PricingMetaForGridPlan,
+	showVariants?: boolean
 ): PlanPriceOfferProps => {
 	const currencyCode = pricing?.currencyCode;
 	const originalMonthlyPrice = pricing?.originalPrice.monthly ?? undefined;
@@ -190,6 +196,7 @@ const preparePlanPriceOfferProps = (
 		originalFullPrice,
 		introOfferFullPrice,
 		introOfferAvailable,
+		showVariants,
 	};
 };
 
@@ -201,11 +208,39 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 		typeof PLAN_BUSINESS | typeof PLAN_BUSINESS_MONTHLY
 	>( PLAN_BUSINESS );
 
-	const { children, pricing, introOfferAvailable, upgradePlanHostingDetailsList } = props;
+	const {
+		children,
+		pricing,
+		pricing2Years,
+		pricingMonthly,
+		introOfferAvailable,
+		upgradePlanHostingDetailsList,
+		showVariants,
+		onCtaClick,
+	} = props;
 
 	const plan = getPlan( selectedPlan );
+	const planMonthly = getPlan( PLAN_BUSINESS_MONTHLY );
+	const plan2Years = getPlan( PLAN_BUSINESS_2_YEARS );
 
-	const planPriceOfferProps = preparePlanPriceOfferProps( introOfferAvailable, plan, pricing );
+	const planPriceOfferProps = preparePlanPriceOfferProps(
+		introOfferAvailable,
+		plan,
+		pricing,
+		showVariants
+	);
+	const planPriceOfferPropsMonthly = preparePlanPriceOfferProps(
+		introOfferAvailable,
+		planMonthly,
+		pricingMonthly,
+		showVariants
+	);
+	const planPriceOfferProps2Years = preparePlanPriceOfferProps(
+		introOfferAvailable,
+		plan2Years,
+		pricing2Years,
+		showVariants
+	);
 
 	const { mutate: setSelectedPlanSlug } = useSelectedPlanUpgradeMutation();
 
@@ -219,7 +254,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 
 	return (
 		<div className="import__upgrade-plan-details">
-			{ ! introOfferAvailable && (
+			{ ! introOfferAvailable && ! showVariants && (
 				<UpgradePlanPeriodSwitcher
 					selectedPlan={ selectedPlan }
 					onMonthlyPlanClick={ () => setSelectedPlan( PLAN_BUSINESS_MONTHLY ) }
@@ -227,21 +262,63 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 				/>
 			) }
 
+			{ showVariants && (
+				<div className="import__upgrade-plan-container">
+					<div className="import__upgrade-plan-features-container">
+						<div className="import__upgrade-plan-header">
+							<Title className="plan-title" tagName="h2">
+								{ translate( 'Monthly' ) }
+							</Title>
+							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
+						</div>
+
+						<PlanPriceOffer { ...planPriceOfferPropsMonthly } />
+
+						<div>
+							<div className="import__upgrade-plan-cta">
+								<NextButton
+									variant="secondary"
+									onClick={ () => onCtaClick?.( PLAN_BUSINESS_MONTHLY ) }
+								>
+									{ translate( 'Get Monthly' ) }
+								</NextButton>
+							</div>
+							<div className="import__upgrade-plan-refund-sub-text">
+								{ translate( 'Refundable within 7 days. No questions asked.' ) }
+							</div>
+						</div>
+						<div className="import__upgrade-plan-features-list">
+							<UpgradePlanFeatureList
+								plan={ planMonthly }
+								showFeatures={ showFeatures }
+								setShowFeatures={ setShowFeatures }
+							/>
+						</div>
+					</div>
+				</div>
+			) }
+
 			<div className="import__upgrade-plan-container">
 				<div className="import__upgrade-plan-features-container">
 					<div className="import__upgrade-plan-header">
-						<Plans2023Tooltip
-							text={ translate(
-								'WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'
-							) }
-							id="wp-cloud-logo"
-							setActiveTooltipId={ setActiveTooltipId }
-							activeTooltipId={ activeTooltipId }
-						>
-							<CloudLogo />
-						</Plans2023Tooltip>
+						{ showVariants ? (
+							<Badge className="import__upgrade-plan-variants-badge">
+								{ translate( 'Most popular' ) }
+							</Badge>
+						) : (
+							<Plans2023Tooltip
+								text={ translate(
+									'WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'
+								) }
+								id="wp-cloud-logo"
+								setActiveTooltipId={ setActiveTooltipId }
+								activeTooltipId={ activeTooltipId }
+							>
+								<CloudLogo />
+							</Plans2023Tooltip>
+						) }
 						<Title className="plan-title" tagName="h2">
-							{ plan?.getTitle() }
+							{ showVariants ? translate( 'Yearly' ) : plan?.getTitle() }
 						</Title>
 						<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
 					</div>
@@ -249,7 +326,15 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 					<PlanPriceOffer { ...planPriceOfferProps } />
 
 					<div>
-						<div className="import__upgrade-plan-cta">{ children }</div>
+						<div className="import__upgrade-plan-cta">
+							{ showVariants ? (
+								<NextButton onClick={ () => onCtaClick?.( PLAN_BUSINESS ) }>
+									{ translate( 'Get Yearly' ) }
+								</NextButton>
+							) : (
+								children
+							) }
+						</div>
 						<div className="import__upgrade-plan-refund-sub-text">
 							{ plan && ! isMonthly( plan.getStoreSlug() )
 								? translate( 'Refundable within 14 days. No questions asked.' )
@@ -264,10 +349,48 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 						/>
 					</div>
 				</div>
-				<UpgradePlanHostingDetails
-					upgradePlanHostingDetailsList={ upgradePlanHostingDetailsList }
-				/>
+				{ ! showVariants && (
+					<UpgradePlanHostingDetails
+						upgradePlanHostingDetailsList={ upgradePlanHostingDetailsList }
+					/>
+				) }
 			</div>
+
+			{ showVariants && (
+				<div className="import__upgrade-plan-container">
+					<div className="import__upgrade-plan-features-container">
+						<div className="import__upgrade-plan-header">
+							<Title className="plan-title" tagName="h2">
+								{ translate( 'Biennially' ) }
+							</Title>
+							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
+						</div>
+
+						<PlanPriceOffer { ...planPriceOfferProps2Years } />
+
+						<div>
+							<div className="import__upgrade-plan-cta">
+								<NextButton
+									variant="secondary"
+									onClick={ () => onCtaClick?.( PLAN_BUSINESS_2_YEARS ) }
+								>
+									{ translate( 'Get Biennial' ) }
+								</NextButton>
+							</div>
+							<div className="import__upgrade-plan-refund-sub-text">
+								{ translate( 'Refundable within 14 days. No questions asked.' ) }
+							</div>
+						</div>
+						<div className="import__upgrade-plan-features-list">
+							<UpgradePlanFeatureList
+								plan={ plan2Years }
+								showFeatures={ showFeatures }
+								setShowFeatures={ setShowFeatures }
+							/>
+						</div>
+					</div>
+				</div>
+			) }
 		</div>
 	);
 };
diff --git a/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx b/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx
index b642442e22835..586ed4cb5fd0d 100644
--- a/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx
@@ -15,7 +15,7 @@ const EVENT_NAMES = {
 interface MigrationAssistanceModalProps {
 	navigateBack: ( () => void ) | undefined;
 	migrateFrom: string | null;
-	onConfirm: ( () => void ) | undefined;
+	onConfirm: ( ( planSlug: string ) => void ) | undefined;
 }
 export const MigrationAssistanceModal: React.FunctionComponent< MigrationAssistanceModalProps > = (
 	props: MigrationAssistanceModalProps
@@ -39,7 +39,7 @@ export const MigrationAssistanceModal: React.FunctionComponent< MigrationAssista
 		const acceptedDeal = true;
 		setMigrationAssistanceAccepted();
 		logEvent( acceptedDeal );
-		props.onConfirm?.();
+		props.onConfirm?.( PLAN_BUSINESS );
 	};
 
 	useEffect( () => {
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss
index 3d5167c3ef202..0a396741f241a 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss
@@ -2,7 +2,7 @@
 @import "@automattic/onboarding/styles/mixins";
 
 .import-hosted-site,
-.site-migration :not(.site-migration-instructions--launchpad),
+.site-migration :not(.site-migration-instructions--launchpad, .is-wide-layout),
 .migrate-message {
 	.step-container__header {
 		margin: auto;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
index 37f215dd54770..d1fbcb372e434 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
@@ -6,6 +6,7 @@ import {
 } from '@automattic/calypso-products';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
 import { StepContainer } from '@automattic/onboarding';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { type FC } from 'react';
 import { UpgradePlan } from 'calypso/blocks/importer/wordpress/upgrade-plan';
@@ -19,6 +20,8 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { MigrationAssistanceModal } from '../../components/migration-assistance-modal';
 import type { StepProps } from '../../types';
 
+import './style.scss';
+
 type StepContainerProps = React.ComponentProps< typeof StepContainer >;
 
 interface Props extends StepProps {
@@ -35,6 +38,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	customizedActionButtons,
 	...props
 } ) => {
+	const showVariants = true;
 	const { onSkip, skipLabelText, skipPosition } = props;
 	const siteItem = useSite();
 	const siteSlug = useSiteSlug();
@@ -57,10 +61,11 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	const migrateFrom = queryParams.get( 'from' );
 	const showMigrationModal = queryParams.get( 'showModal' );
 
-	const goToMigrationAssistanceCheckout = ( userAcceptedDeal = false ) => {
+	const goToMigrationAssistanceCheckout = ( planSlug: string, userAcceptedDeal = false ) => {
+		const plan = getPlanByPathSlug( planSlug );
 		navigation?.submit?.( {
 			goToCheckout: true,
-			plan: plan.getPathSlug ? plan.getPathSlug() : '',
+			plan: plan?.getPathSlug ? plan.getPathSlug() : '',
 			userAcceptedDeal,
 		} );
 	};
@@ -74,9 +79,9 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 		<>
 			{ showMigrationModal && (
 				<MigrationAssistanceModal
-					onConfirm={ () => {
+					onConfirm={ ( planSlug: string ) => {
 						const userAcceptedDeal = true;
-						goToMigrationAssistanceCheckout( userAcceptedDeal );
+						goToMigrationAssistanceCheckout( planSlug, userAcceptedDeal );
 					} }
 					migrateFrom={ migrateFrom }
 					navigateBack={ navigation.goBack }
@@ -88,9 +93,9 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 				subTitleText=""
 				isBusy={ false }
 				hideTitleAndSubTitle
-				onCtaClick={ () => {
+				onCtaClick={ ( planSlug: string ) => {
 					const userAcceptedDeal = false;
-					goToMigrationAssistanceCheckout( userAcceptedDeal );
+					goToMigrationAssistanceCheckout( planSlug, userAcceptedDeal );
 				} }
 				onFreeTrialClick={ () => {
 					navigation.submit?.( {
@@ -105,44 +110,64 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 				hideFreeMigrationTrialForNonVerifiedEmail={ hideFreeMigrationTrialForNonVerifiedEmail }
 				trackingEventsProps={ customTracksEventProps }
 				visiblePlan={ plan.getStoreSlug() }
+				showVariants={ showVariants }
 			/>
 		</>
 	);
 
-	const headerText =
+	const className = clsx(
+		'is-step-site-migration-upgrade-plan',
+		showVariants && 'is-step-site-migration-upgrade-plan-with-variants'
+	);
+
+	let headerText =
 		props.headerText ??
 		( hasEnTranslation( 'Upgrade your plan' )
 			? translate( 'Upgrade your plan' )
 			: translate( 'Upgrade your plan to migrate your site' ) );
 
+	showVariants && ( headerText = translate( 'There is a plan for you' ) );
+
+	const planName = getPlan( PLAN_BUSINESS )?.getTitle() ?? '';
+
+	let subHeaderText = hasEnTranslation( 'Migrations are exclusive to the %(planName)s plan.' )
+		? translate( 'Migrations are exclusive to the %(planName)s plan.', {
+				args: {
+					planName,
+				},
+		  } )
+		: translate(
+				'Migrations are exclusive to the Creator plan. Check out all its benefits, and upgrade to get started.'
+		  );
+	showVariants &&
+		( subHeaderText = translate(
+			'A %(planName)s plan is needed for Migrations. Pick one of the following options to tap into our lightning-fast infrastructure. Your site will be faster, smoother, and ready for anything.',
+			{
+				args: {
+					planName,
+				},
+			}
+		) );
+
 	return (
 		<>
 			<DocumentHead title={ translate( 'Upgrade your plan', { textOnly: true } ) } />
 			<StepContainer
 				stepName="site-migration-upgrade-plan"
 				shouldHideNavButtons={ false }
-				className="is-step-site-migration-upgrade-plan"
+				className={ className }
 				goBack={ navigation.goBack }
 				skipLabelText={ skipLabelText }
 				skipButtonAlign={ skipPosition }
 				goNext={ onSkip }
 				hideSkip={ ! onSkip }
+				isWideLayout={ showVariants }
 				customizedActionButtons={ customizedActionButtons }
 				formattedHeader={
 					<FormattedHeader
 						id="site-migration-instructions-header"
 						headerText={ headerText }
-						subHeaderText={
-							hasEnTranslation( 'Migrations are exclusive to the %(planName)s plan.' )
-								? translate( 'Migrations are exclusive to the %(planName)s plan.', {
-										args: {
-											planName: getPlan( PLAN_BUSINESS )?.getTitle() ?? '',
-										},
-								  } )
-								: translate(
-										'Migrations are exclusive to the Creator plan. Check out all its benefits, and upgrade to get started.'
-								  )
-						}
+						subHeaderText={ subHeaderText }
 						align="center"
 						subHeaderAlign="center"
 					/>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
new file mode 100644
index 0000000000000..1c9a82921dd19
--- /dev/null
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -0,0 +1,56 @@
+.is-step-site-migration-upgrade-plan-with-variants {
+    .import__upgrade-plan-variants-badge {
+        background-color: var(--studio-gray-100);
+        color: var(--color-text-inverted);
+        border-radius: 4px;
+        font-size: 0.75rem;
+        margin-bottom: 1rem;
+    }
+    .import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
+        background-color: var(--studio-wordpress-blue-50) !important;
+        border-color: var(--studio-wordpress-blue-50);
+    }
+    .import__upgrade-plan .import__upgrade-plan-refund-sub-text,
+    .import__upgrade-plan .import__upgrade-plan-features-list .import__upgrade-plan-feature-more button {
+        color: var(--color-text-subtle);
+    }
+
+    .import__upgrade-plan .import__upgrade-plan-details {
+        @media ( min-width: 1040px ) {
+            display: flex;
+            flex-direction: row;
+            gap: 0;
+
+            .import__upgrade-plan-container {
+                padding-top: 1.5rem;
+                padding-bottom: 1.5rem;
+                gap: 0;
+
+                &:first-of-type .import__upgrade-plan-features-container {
+                    border-right: 0;
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+
+                &:last-of-type .import__upgrade-plan-features-container {
+                    border-left: 0;
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                }
+
+                .import__upgrade-plan-features-container {
+                    padding-top: 1.5rem;
+                    padding-bottom: 1.5rem;
+                    margin-bottom: 0;
+                    margin-top: 0;
+                }
+
+                &:first-of-type .import__upgrade-plan-features-container,
+                &:last-of-type .import__upgrade-plan-features-container {
+                    margin-bottom: 1.5rem;
+                    margin-top: 3rem;
+                }
+            }
+        }
+    }
+}

From 0be5072625ba9536fa9aee25411c60377eb39e0c Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 10:12:51 -0500
Subject: [PATCH 02/49] Update loader styles/markup

---
 .../importer/wordpress/upgrade-plan/index.tsx |  8 +--
 .../wordpress/upgrade-plan/skeleton/index.tsx | 58 +++++++++++++++++++
 .../site-migration-upgrade-plan/style.scss    | 11 ++++
 3 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index cecd64da4e83a..d77a8a58b7191 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -171,13 +171,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 		  );
 
 	if ( isFetchingHostingDetails || ! pricing ) {
-		return (
-			<div className="import__upgrade-plan">
-				{ showVariants && <Skeleton showVariants={ showVariants } /> }
-				<Skeleton showVariants={ showVariants } />
-				{ showVariants && <Skeleton showVariants={ showVariants } /> }
-			</div>
-		);
+		return <Skeleton showVariants={ showVariants } />;
 	}
 
 	return (
diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
index b0787e57bb29d..47eedb3d321e6 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
@@ -6,6 +6,35 @@ export const Skeleton: FC< { showVariants: boolean } > = ( { showVariants } ) =>
 		<div className="import__upgrade-plan">
 			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
 				<div className="import__upgrade-plan-container">
+					{ showVariants && (
+						<div className="import__upgrade-plan-features-container">
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+								style={ { width: '173px', height: '32px', marginBottom: '20px' } }
+							/>
+							<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
+							<div
+								className="import-upgrade-plan-skeleton"
+								style={ { width: '195px', marginBottom: '40px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+								style={ { width: '173px', height: '32px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton"
+								style={ { width: '103px', marginBottom: '40px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+								style={ { width: '305px', height: '32px', borderRadius: '4px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+								style={ { width: '103px', margin: '0 auto' } }
+							/>
+						</div>
+					) }
 					<div className="import__upgrade-plan-features-container">
 						<div
 							className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
@@ -87,6 +116,35 @@ export const Skeleton: FC< { showVariants: boolean } > = ( { showVariants } ) =>
 							</div>
 						</div>
 					) }
+					{ showVariants && (
+						<div className="import__upgrade-plan-features-container">
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+								style={ { width: '173px', height: '32px', marginBottom: '20px' } }
+							/>
+							<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
+							<div
+								className="import-upgrade-plan-skeleton"
+								style={ { width: '195px', marginBottom: '40px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+								style={ { width: '173px', height: '32px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton"
+								style={ { width: '103px', marginBottom: '40px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+								style={ { width: '305px', height: '32px', borderRadius: '4px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+								style={ { width: '103px', margin: '0 auto' } }
+							/>
+						</div>
+					) }
 				</div>
 			</div>
 		</div>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 1c9a82921dd19..230b1b8534aff 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -1,4 +1,15 @@
 .is-step-site-migration-upgrade-plan-with-variants {
+    .import-upgrade-plan-skeleton {
+        &.import-upgrade-plan-skeleton--light-highlight {
+            background-color: var(--studio-wordpress-blue-50);
+            opacity: 0.2;
+        }
+
+        &.import-upgrade-plan-skeleton--dark-highlight {
+            background-color: var(--studio-wordpress-blue-50);
+            opacity: 0.5;
+        }
+    }
     .import__upgrade-plan-variants-badge {
         background-color: var(--studio-gray-100);
         color: var(--color-text-inverted);

From f4819c7dda827d346cbfe4720666f8c49a5e734d Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 10:18:33 -0500
Subject: [PATCH 03/49] Fix header styles

---
 .../site-migration-upgrade-plan/index.tsx             |  2 +-
 .../site-migration-upgrade-plan/style.scss            | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
index d1fbcb372e434..12822b30546cb 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
@@ -38,7 +38,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	customizedActionButtons,
 	...props
 } ) => {
-	const showVariants = true;
+	const showVariants = true; // TODO: replace this with the flag.
 	const { onSkip, skipLabelText, skipPosition } = props;
 	const siteItem = useSite();
 	const siteSlug = useSiteSlug();
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 230b1b8534aff..5ea6a9d76ea62 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -1,4 +1,15 @@
 .is-step-site-migration-upgrade-plan-with-variants {
+    &.step-container .step-container__header {
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        @media ( min-width: 720px ) {
+            max-width: 720px;
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
     .import-upgrade-plan-skeleton {
         &.import-upgrade-plan-skeleton--light-highlight {
             background-color: var(--studio-wordpress-blue-50);

From 7b8ca9bb45cc628ddf5abf59a403987cdbfb4b80 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 10:22:48 -0500
Subject: [PATCH 04/49] Remove descriptions

---
 .../wordpress/upgrade-plan/upgrade-plan-details.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 9aca56fb1a23a..e36f3503e965b 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -269,7 +269,6 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							<Title className="plan-title" tagName="h2">
 								{ translate( 'Monthly' ) }
 							</Title>
-							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
 						</div>
 
 						<PlanPriceOffer { ...planPriceOfferPropsMonthly } />
@@ -320,7 +319,9 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 						<Title className="plan-title" tagName="h2">
 							{ showVariants ? translate( 'Yearly' ) : plan?.getTitle() }
 						</Title>
-						<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
+						{ ! showVariants && (
+							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
+						) }
 					</div>
 
 					<PlanPriceOffer { ...planPriceOfferProps } />
@@ -363,7 +364,6 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							<Title className="plan-title" tagName="h2">
 								{ translate( 'Biennially' ) }
 							</Title>
-							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
 						</div>
 
 						<PlanPriceOffer { ...planPriceOfferProps2Years } />

From cbd084679055bfbaea6f908193fa9aba3bb77ee1 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 10:24:13 -0500
Subject: [PATCH 05/49] Fix spacing

---
 .../steps-repository/site-migration-upgrade-plan/style.scss   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 5ea6a9d76ea62..267e1a98bb01a 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -37,6 +37,10 @@
         color: var(--color-text-subtle);
     }
 
+    .import__upgrade-plan .import__upgrade-plan-header .plan-title {
+        margin-bottom: -0.5rem;
+    }
+
     .import__upgrade-plan .import__upgrade-plan-details {
         @media ( min-width: 1040px ) {
             display: flex;

From 2af1e3a0f3eaae831b53f589dd46a040dd900a1f Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 10:40:22 -0500
Subject: [PATCH 06/49] Refactor pricing

---
 .../importer/wordpress/upgrade-plan/index.tsx | 34 +++++++------------
 .../importer/wordpress/upgrade-plan/types.ts  |  4 +--
 .../upgrade-plan/upgrade-plan-details.tsx     |  8 ++---
 3 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index d77a8a58b7191..2905639455f95 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -59,27 +59,21 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 		useCheckPlanAvailabilityForPurchase,
 	} );
 
-	const pricing =
-		pricingMeta && pricingMeta[ visiblePlan ] ? pricingMeta[ visiblePlan ] : undefined;
-
-	const pricing2Years =
-		pricingMeta && pricingMeta[ PLAN_BUSINESS_2_YEARS ]
-			? pricingMeta[ PLAN_BUSINESS_2_YEARS ]
-			: undefined;
-
-	const pricingMonthly =
-		pricingMeta && pricingMeta[ PLAN_BUSINESS_MONTHLY ]
-			? pricingMeta[ PLAN_BUSINESS_MONTHLY ]
-			: undefined;
+	const pricing = {
+		[ visiblePlan ]: pricingMeta?.[ visiblePlan ],
+		[ PLAN_BUSINESS_2_YEARS ]: pricingMeta?.[ PLAN_BUSINESS_2_YEARS ],
+		[ PLAN_BUSINESS_MONTHLY ]: pricingMeta?.[ PLAN_BUSINESS_MONTHLY ],
+	};
 
 	const introOfferAvailable =
 		isEnabled( 'migration-flow/introductory-offer' ) &&
-		pricing?.introOffer &&
-		pricing.introOffer.rawPrice &&
-		! pricing.introOffer.isOfferComplete &&
-		pricing.originalPrice.monthly &&
-		pricing.originalPrice.full &&
-		pricing.currencyCode;
+		pricing[ visiblePlan ]?.introOffer &&
+		pricing[ visiblePlan ]?.introOffer.rawPrice &&
+		! pricing[ visiblePlan ]?.introOffer.isOfferComplete &&
+		pricing[ visiblePlan ]?.originalPrice &&
+		pricing[ visiblePlan ]?.originalPrice.monthly &&
+		pricing[ visiblePlan ]?.originalPrice.full &&
+		pricing[ visiblePlan ]?.currencyCode;
 
 	const hideFreeMigrationTrial =
 		introOfferAvailable ||
@@ -170,7 +164,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 				'Migrations are exclusive to the Creator plan. Check out all its benefits, and upgrade to get started.'
 		  );
 
-	if ( isFetchingHostingDetails || ! pricing ) {
+	if ( isFetchingHostingDetails || ! pricing[ visiblePlan ] ) {
 		return <Skeleton showVariants={ showVariants } />;
 	}
 
@@ -212,8 +206,6 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 			<PlanNoticeCreditUpgrade siteId={ site.ID } visiblePlans={ [ visiblePlan ] } />
 			<UpgradePlanDetails
 				pricing={ pricing }
-				pricing2Years={ pricing2Years }
-				pricingMonthly={ pricingMonthly }
 				introOfferAvailable={ !! introOfferAvailable }
 				upgradePlanHostingDetailsList={ upgradePlanHostingDetailsList }
 				showVariants={ showVariants }
diff --git a/client/blocks/importer/wordpress/upgrade-plan/types.ts b/client/blocks/importer/wordpress/upgrade-plan/types.ts
index 46acf2b582ed0..15d1af507e9d2 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/types.ts
+++ b/client/blocks/importer/wordpress/upgrade-plan/types.ts
@@ -15,12 +15,10 @@ export type HostingDetails = {
 export type UpgradePlanDetailsProps = {
 	children: React.ReactNode;
 	introOfferAvailable: boolean;
-	pricing?: PricingMetaForGridPlan;
+	pricing?: [ PricingMetaForGridPlan ];
 	upgradePlanHostingDetailsList: Array< HostingDetailsItem >;
 	showVariants?: boolean;
 	onCtaClick?: ( planSlug: string ) => void;
-	pricing2Years?: PricingMetaForGridPlan;
-	pricingMonthly?: PricingMetaForGridPlan;
 };
 
 export type UpgradePlanProps = {
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index e36f3503e965b..b81609fcc96ff 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -211,8 +211,6 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 	const {
 		children,
 		pricing,
-		pricing2Years,
-		pricingMonthly,
 		introOfferAvailable,
 		upgradePlanHostingDetailsList,
 		showVariants,
@@ -226,19 +224,19 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 	const planPriceOfferProps = preparePlanPriceOfferProps(
 		introOfferAvailable,
 		plan,
-		pricing,
+		pricing?.[ selectedPlan ],
 		showVariants
 	);
 	const planPriceOfferPropsMonthly = preparePlanPriceOfferProps(
 		introOfferAvailable,
 		planMonthly,
-		pricingMonthly,
+		pricing?.[ PLAN_BUSINESS_MONTHLY ],
 		showVariants
 	);
 	const planPriceOfferProps2Years = preparePlanPriceOfferProps(
 		introOfferAvailable,
 		plan2Years,
-		pricing2Years,
+		pricing?.[ PLAN_BUSINESS_2_YEARS ],
 		showVariants
 	);
 

From ea003437524a712a963e699168c9682f714c4c84 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 10:45:23 -0500
Subject: [PATCH 07/49] Fix typing

---
 client/blocks/importer/wordpress/upgrade-plan/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/types.ts b/client/blocks/importer/wordpress/upgrade-plan/types.ts
index 15d1af507e9d2..4767e2a32d453 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/types.ts
+++ b/client/blocks/importer/wordpress/upgrade-plan/types.ts
@@ -15,7 +15,7 @@ export type HostingDetails = {
 export type UpgradePlanDetailsProps = {
 	children: React.ReactNode;
 	introOfferAvailable: boolean;
-	pricing?: [ PricingMetaForGridPlan ];
+	pricing?: { [ key: string ]: PricingMetaForGridPlan };
 	upgradePlanHostingDetailsList: Array< HostingDetailsItem >;
 	showVariants?: boolean;
 	onCtaClick?: ( planSlug: string ) => void;

From e1d73487324819db2972358e57703adddbeef306 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 11:21:45 -0500
Subject: [PATCH 08/49] Fix checkout ctas, update wording for 2 year plan

---
 .../importer/wordpress/upgrade-plan/index.tsx |  9 ++++----
 .../wordpress/upgrade-plan/skeleton/index.tsx |  2 +-
 .../upgrade-plan/upgrade-plan-details.tsx     | 23 ++++++++++++++++++-
 .../site-migration-upgrade-plan/index.tsx     |  2 +-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index 2905639455f95..66766189b6c01 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -21,6 +21,7 @@ import UpgradePlanDetails from './upgrade-plan-details';
 import './style.scss';
 import withMigrationSticker from './with-migration-sticker';
 import type { UpgradePlanProps } from './types';
+import type { PricingMetaForGridPlan } from '@automattic/data-stores';
 
 export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > = ( props ) => {
 	const translate = useTranslate();
@@ -114,7 +115,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 		if ( hideFreeMigrationTrial ) {
 			return (
-				<NextButton isBusy={ isBusy } onClick={ onCtaClick }>
+				<NextButton isBusy={ isBusy } onClick={ () => onCtaClick( visiblePlan ) }>
 					{ cta }
 				</NextButton>
 			);
@@ -124,7 +125,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 			return (
 				<>
 					<NextButton onClick={ onFreeTrialClick }>{ trialText }</NextButton>
-					<Button busy={ isBusy } transparent onClick={ onCtaClick }>
+					<Button busy={ isBusy } transparent onClick={ () => onCtaClick( visiblePlan ) }>
 						{ cta }
 					</Button>
 				</>
@@ -133,7 +134,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 		return (
 			<>
-				<NextButton isBusy={ isBusy } onClick={ onCtaClick }>
+				<NextButton isBusy={ isBusy } onClick={ () => onCtaClick( visiblePlan ) }>
 					{ cta }
 				</NextButton>
 				<Button disabled transparent>
@@ -205,7 +206,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 			<PlanNoticeCreditUpgrade siteId={ site.ID } visiblePlans={ [ visiblePlan ] } />
 			<UpgradePlanDetails
-				pricing={ pricing }
+				pricing={ pricing as { [ key: string ]: PricingMetaForGridPlan } }
 				introOfferAvailable={ !! introOfferAvailable }
 				upgradePlanHostingDetailsList={ upgradePlanHostingDetailsList }
 				showVariants={ showVariants }
diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
index 47eedb3d321e6..3a254333cddaa 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import './style.scss';
 
-export const Skeleton: FC< { showVariants: boolean } > = ( { showVariants } ) => {
+export const Skeleton: FC< { showVariants?: boolean } > = ( { showVariants = false } ) => {
 	return (
 		<div className="import__upgrade-plan">
 			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index b81609fcc96ff..4f71f6585d917 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -109,7 +109,7 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 		);
 	}
 
-	const billingTimeFrame = hasEnTranslation(
+	let billingTimeFrame = hasEnTranslation(
 		'per month, %(discountedPrice)s billed annually for the first year, %(originalPrice)s per year afterwards, excl. taxes'
 	)
 		? translate(
@@ -145,6 +145,27 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 				}
 		  );
 
+	if ( PLAN_BUSINESS_2_YEARS === plan?.getStoreSlug() ) {
+		billingTimeFrame = translate(
+			'per month, %(discountedPrice)s for the first two years,{{br/}}' +
+				'then %(rawPrice)s billed biennially, excl. taxes',
+			{
+				args: {
+					discountedPrice: formatCurrency( introOfferFullPrice, currencyCode, {
+						isSmallestUnit: true,
+						stripZeros: true,
+					} ),
+					rawPrice: formatCurrency( originalFullPrice, currencyCode, {
+						isSmallestUnit: true,
+						stripZeros: true,
+					} ),
+				},
+				components: { br: <br /> },
+				comment: 'excl. taxes is short for excluding taxes',
+			}
+		);
+	}
+
 	const badgeText = hasEnTranslation( '50% off your first year' )
 		? translate( '50% off your first year' )
 		: translate( 'One time offer' );
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
index 12822b30546cb..a9c0b4e404279 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
@@ -62,7 +62,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	const showMigrationModal = queryParams.get( 'showModal' );
 
 	const goToMigrationAssistanceCheckout = ( planSlug: string, userAcceptedDeal = false ) => {
-		const plan = getPlanByPathSlug( planSlug );
+		const plan = getPlan( planSlug );
 		navigation?.submit?.( {
 			goToCheckout: true,
 			plan: plan?.getPathSlug ? plan.getPathSlug() : '',

From 862cdd8a406a93ff7759f28822903a74b39c3ebb Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 11:23:46 -0500
Subject: [PATCH 09/49] Simplify loader

---
 .../wordpress/upgrade-plan/skeleton/index.tsx | 89 +++++++------------
 1 file changed, 31 insertions(+), 58 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
index 3a254333cddaa..279ba58e12dee 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
@@ -2,39 +2,40 @@ import type { FC } from 'react';
 import './style.scss';
 
 export const Skeleton: FC< { showVariants?: boolean } > = ( { showVariants = false } ) => {
+	const variantSkeleton = (
+		<div className="import__upgrade-plan-features-container">
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+				style={ { width: '173px', height: '32px', marginBottom: '20px' } }
+			/>
+			<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
+			<div
+				className="import-upgrade-plan-skeleton"
+				style={ { width: '195px', marginBottom: '40px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+				style={ { width: '173px', height: '32px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton"
+				style={ { width: '103px', marginBottom: '40px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+				style={ { width: '305px', height: '32px', borderRadius: '4px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+				style={ { width: '103px', margin: '0 auto' } }
+			/>
+		</div>
+	);
 	return (
 		<div className="import__upgrade-plan">
 			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
 				<div className="import__upgrade-plan-container">
-					{ showVariants && (
-						<div className="import__upgrade-plan-features-container">
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-								style={ { width: '173px', height: '32px', marginBottom: '20px' } }
-							/>
-							<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
-							<div
-								className="import-upgrade-plan-skeleton"
-								style={ { width: '195px', marginBottom: '40px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-								style={ { width: '173px', height: '32px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton"
-								style={ { width: '103px', marginBottom: '40px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-								style={ { width: '305px', height: '32px', borderRadius: '4px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-								style={ { width: '103px', margin: '0 auto' } }
-							/>
-						</div>
-					) }
+					{ showVariants && variantSkeleton }
 					<div className="import__upgrade-plan-features-container">
 						<div
 							className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
@@ -116,35 +117,7 @@ export const Skeleton: FC< { showVariants?: boolean } > = ( { showVariants = fal
 							</div>
 						</div>
 					) }
-					{ showVariants && (
-						<div className="import__upgrade-plan-features-container">
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-								style={ { width: '173px', height: '32px', marginBottom: '20px' } }
-							/>
-							<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
-							<div
-								className="import-upgrade-plan-skeleton"
-								style={ { width: '195px', marginBottom: '40px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-								style={ { width: '173px', height: '32px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton"
-								style={ { width: '103px', marginBottom: '40px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-								style={ { width: '305px', height: '32px', borderRadius: '4px' } }
-							/>
-							<div
-								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-								style={ { width: '103px', margin: '0 auto' } }
-							/>
-						</div>
-					) }
+					{ showVariants && variantSkeleton }
 				</div>
 			</div>
 		</div>

From a96726647faa00605673503a72dc506dee497dcc Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 11:29:40 -0500
Subject: [PATCH 10/49] Simplify pricing output

---
 .../upgrade-plan/upgrade-plan-details.tsx     | 19 ++++++-------------
 .../site-migration-upgrade-plan/style.scss    |  3 +++
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 4f71f6585d917..1ff6c9f71d797 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -80,7 +80,6 @@ interface PlanPriceOfferProps {
 	originalFullPrice?: number;
 	introOfferFullPrice?: number;
 	introOfferAvailable: boolean;
-	showVariants?: boolean;
 }
 
 const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
@@ -95,7 +94,6 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 		introOfferMonthlyPrice,
 		originalMonthlyPrice,
 		currencyCode,
-		showVariants,
 	} = props;
 
 	const showOriginalPrice =
@@ -172,11 +170,9 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 
 	return (
 		<UpgradePlanPrice billingTimeFrame={ billingTimeFrame }>
-			{ ! showVariants && (
-				<Badge type="info-purple" className="import__upgrade-plan-price-badge">
-					{ badgeText }
-				</Badge>
-			) }
+			<Badge type="info-purple" className="import__upgrade-plan-price-badge">
+				{ badgeText }
+			</Badge>
 			<div className="import__upgrade-plan-price-group">
 				<PlanPrice
 					rawPrice={ originalMonthlyPrice }
@@ -245,20 +241,17 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 	const planPriceOfferProps = preparePlanPriceOfferProps(
 		introOfferAvailable,
 		plan,
-		pricing?.[ selectedPlan ],
-		showVariants
+		pricing?.[ selectedPlan ]
 	);
 	const planPriceOfferPropsMonthly = preparePlanPriceOfferProps(
 		introOfferAvailable,
 		planMonthly,
-		pricing?.[ PLAN_BUSINESS_MONTHLY ],
-		showVariants
+		pricing?.[ PLAN_BUSINESS_MONTHLY ]
 	);
 	const planPriceOfferProps2Years = preparePlanPriceOfferProps(
 		introOfferAvailable,
 		plan2Years,
-		pricing?.[ PLAN_BUSINESS_2_YEARS ],
-		showVariants
+		pricing?.[ PLAN_BUSINESS_2_YEARS ]
 	);
 
 	const { mutate: setSelectedPlanSlug } = useSelectedPlanUpgradeMutation();
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 267e1a98bb01a..559db65a6babb 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -28,6 +28,9 @@
         font-size: 0.75rem;
         margin-bottom: 1rem;
     }
+    .import__upgrade-plan-price-badge {
+        display: none;
+    }
     .import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
         background-color: var(--studio-wordpress-blue-50) !important;
         border-color: var(--studio-wordpress-blue-50);

From c4f074d6a20a44512a5120a8441b7ce1efea43e6 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 11:35:24 -0500
Subject: [PATCH 11/49] Tweak copy, remove unused function param

---
 .../wordpress/upgrade-plan/upgrade-plan-details.tsx         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 1ff6c9f71d797..ba4bb88c9b3dc 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -145,7 +145,7 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 
 	if ( PLAN_BUSINESS_2_YEARS === plan?.getStoreSlug() ) {
 		billingTimeFrame = translate(
-			'per month, %(discountedPrice)s for the first two years,{{br/}}' +
+			'per month, %(discountedPrice)s for the first 2 years,{{br/}}' +
 				'then %(rawPrice)s billed biennially, excl. taxes',
 			{
 				args: {
@@ -194,8 +194,7 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 const preparePlanPriceOfferProps = (
 	introOfferAvailable: boolean,
 	plan?: Plan,
-	pricing?: PricingMetaForGridPlan,
-	showVariants?: boolean
+	pricing?: PricingMetaForGridPlan
 ): PlanPriceOfferProps => {
 	const currencyCode = pricing?.currencyCode;
 	const originalMonthlyPrice = pricing?.originalPrice.monthly ?? undefined;
@@ -213,7 +212,6 @@ const preparePlanPriceOfferProps = (
 		originalFullPrice,
 		introOfferFullPrice,
 		introOfferAvailable,
-		showVariants,
 	};
 };
 

From 9f51fb07f80be15d978f5bebdd377ab6224e0dbc Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 12:16:50 -0500
Subject: [PATCH 12/49] Simplify rendering

---
 .../upgrade-plan/upgrade-plan-details.tsx     | 153 +++++++-----------
 .../site-migration-upgrade-plan/style.scss    |   2 +-
 2 files changed, 60 insertions(+), 95 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index ba4bb88c9b3dc..1b0bf7fcbd684 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -232,26 +232,59 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 		onCtaClick,
 	} = props;
 
-	const plan = getPlan( selectedPlan );
-	const planMonthly = getPlan( PLAN_BUSINESS_MONTHLY );
-	const plan2Years = getPlan( PLAN_BUSINESS_2_YEARS );
-
-	const planPriceOfferProps = preparePlanPriceOfferProps(
-		introOfferAvailable,
-		plan,
-		pricing?.[ selectedPlan ]
-	);
-	const planPriceOfferPropsMonthly = preparePlanPriceOfferProps(
-		introOfferAvailable,
-		planMonthly,
-		pricing?.[ PLAN_BUSINESS_MONTHLY ]
-	);
-	const planPriceOfferProps2Years = preparePlanPriceOfferProps(
-		introOfferAvailable,
-		plan2Years,
-		pricing?.[ PLAN_BUSINESS_2_YEARS ]
+	const plans = [ PLAN_BUSINESS, PLAN_BUSINESS_MONTHLY, PLAN_BUSINESS_2_YEARS ];
+	const visiblePlan = getPlan( selectedPlan );
+
+	const planPriceOfferPropsList = plans.reduce(
+		( acc, planSlug ) => ( {
+			...acc,
+			[ planSlug ]: preparePlanPriceOfferProps(
+				introOfferAvailable,
+				getPlan( planSlug ),
+				pricing?.[ planSlug ]
+			),
+		} ),
+		{} as Record< string, PlanPriceOfferProps >
 	);
 
+	const planVariant = ( planSlug: string ) => {
+		return (
+			<div className="import__upgrade-plan-container">
+				<div className="import__upgrade-plan-features-container">
+					<div className="import__upgrade-plan-header">
+						<Title className="plan-title" tagName="h2">
+							{ planSlug === PLAN_BUSINESS_MONTHLY
+								? translate( 'Monthly' )
+								: translate( 'Biennially' ) }
+						</Title>
+					</div>
+
+					<PlanPriceOffer { ...planPriceOfferPropsList[ planSlug ] } />
+
+					<div>
+						<div className="import__upgrade-plan-cta">
+							<NextButton variant="secondary" onClick={ () => onCtaClick?.( planSlug ) }>
+								{ translate( 'Get Monthly' ) }
+							</NextButton>
+						</div>
+						<div className="import__upgrade-plan-refund-sub-text">
+							{ PLAN_BUSINESS_MONTHLY === planSlug
+								? translate( 'Refundable within 7 days. No questions asked.' )
+								: translate( 'Refundable within 14 days. No questions asked.' ) }
+						</div>
+					</div>
+					<div className="import__upgrade-plan-features-list">
+						<UpgradePlanFeatureList
+							plan={ getPlan( planSlug ) }
+							showFeatures={ showFeatures }
+							setShowFeatures={ setShowFeatures }
+						/>
+					</div>
+				</div>
+			</div>
+		);
+	};
+
 	const { mutate: setSelectedPlanSlug } = useSelectedPlanUpgradeMutation();
 
 	useEffect( () => {
@@ -259,8 +292,8 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 	}, [] );
 
 	useEffect( () => {
-		plan && plan.getPathSlug && setSelectedPlanSlug( plan.getPathSlug() );
-	}, [ plan ] );
+		visiblePlan && visiblePlan.getPathSlug && setSelectedPlanSlug( visiblePlan.getPathSlug() );
+	}, [ visiblePlan ] );
 
 	return (
 		<div className="import__upgrade-plan-details">
@@ -272,41 +305,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 				/>
 			) }
 
-			{ showVariants && (
-				<div className="import__upgrade-plan-container">
-					<div className="import__upgrade-plan-features-container">
-						<div className="import__upgrade-plan-header">
-							<Title className="plan-title" tagName="h2">
-								{ translate( 'Monthly' ) }
-							</Title>
-						</div>
-
-						<PlanPriceOffer { ...planPriceOfferPropsMonthly } />
-
-						<div>
-							<div className="import__upgrade-plan-cta">
-								<NextButton
-									variant="secondary"
-									onClick={ () => onCtaClick?.( PLAN_BUSINESS_MONTHLY ) }
-								>
-									{ translate( 'Get Monthly' ) }
-								</NextButton>
-							</div>
-							<div className="import__upgrade-plan-refund-sub-text">
-								{ translate( 'Refundable within 7 days. No questions asked.' ) }
-							</div>
-						</div>
-						<div className="import__upgrade-plan-features-list">
-							<UpgradePlanFeatureList
-								plan={ planMonthly }
-								showFeatures={ showFeatures }
-								setShowFeatures={ setShowFeatures }
-							/>
-						</div>
-					</div>
-				</div>
-			) }
-
+			{ showVariants && planVariant( PLAN_BUSINESS_MONTHLY ) }
 			<div className="import__upgrade-plan-container">
 				<div className="import__upgrade-plan-features-container">
 					<div className="import__upgrade-plan-header">
@@ -327,14 +326,14 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							</Plans2023Tooltip>
 						) }
 						<Title className="plan-title" tagName="h2">
-							{ showVariants ? translate( 'Yearly' ) : plan?.getTitle() }
+							{ showVariants ? translate( 'Yearly' ) : visiblePlan?.getTitle() }
 						</Title>
 						{ ! showVariants && (
 							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
 						) }
 					</div>
 
-					<PlanPriceOffer { ...planPriceOfferProps } />
+					<PlanPriceOffer { ...planPriceOfferPropsList[ selectedPlan ] } />
 
 					<div>
 						<div className="import__upgrade-plan-cta">
@@ -347,14 +346,14 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							) }
 						</div>
 						<div className="import__upgrade-plan-refund-sub-text">
-							{ plan && ! isMonthly( plan.getStoreSlug() )
+							{ visiblePlan && ! isMonthly( visiblePlan.getStoreSlug() )
 								? translate( 'Refundable within 14 days. No questions asked.' )
 								: translate( 'Refundable within 7 days. No questions asked.' ) }
 						</div>
 					</div>
 					<div className="import__upgrade-plan-features-list">
 						<UpgradePlanFeatureList
-							plan={ plan }
+							plan={ visiblePlan }
 							showFeatures={ showFeatures }
 							setShowFeatures={ setShowFeatures }
 						/>
@@ -366,41 +365,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 					/>
 				) }
 			</div>
-
-			{ showVariants && (
-				<div className="import__upgrade-plan-container">
-					<div className="import__upgrade-plan-features-container">
-						<div className="import__upgrade-plan-header">
-							<Title className="plan-title" tagName="h2">
-								{ translate( 'Biennially' ) }
-							</Title>
-						</div>
-
-						<PlanPriceOffer { ...planPriceOfferProps2Years } />
-
-						<div>
-							<div className="import__upgrade-plan-cta">
-								<NextButton
-									variant="secondary"
-									onClick={ () => onCtaClick?.( PLAN_BUSINESS_2_YEARS ) }
-								>
-									{ translate( 'Get Biennial' ) }
-								</NextButton>
-							</div>
-							<div className="import__upgrade-plan-refund-sub-text">
-								{ translate( 'Refundable within 14 days. No questions asked.' ) }
-							</div>
-						</div>
-						<div className="import__upgrade-plan-features-list">
-							<UpgradePlanFeatureList
-								plan={ plan2Years }
-								showFeatures={ showFeatures }
-								setShowFeatures={ setShowFeatures }
-							/>
-						</div>
-					</div>
-				</div>
-			) }
+			{ showVariants && planVariant( PLAN_BUSINESS_2_YEARS ) }
 		</div>
 	);
 };
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 559db65a6babb..7f1a746d5e7c2 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -77,7 +77,7 @@
                 &:first-of-type .import__upgrade-plan-features-container,
                 &:last-of-type .import__upgrade-plan-features-container {
                     margin-bottom: 1.5rem;
-                    margin-top: 3rem;
+                    margin-top: 2.6rem;
                 }
             }
         }

From 08c29e9d1be5c3c705b799a7f68302bd014812c4 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 12:45:55 -0500
Subject: [PATCH 13/49] Add vars for repeated constants

---
 .../importer/wordpress/upgrade-plan/index.tsx | 17 ++++---
 .../skeleton/variants-skeleton.tsx            | 45 +++++++++++++++++++
 .../upgrade-plan/upgrade-plan-details.tsx     | 10 +++--
 .../site-migration-upgrade-plan/style.scss    |  3 +-
 4 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index 66766189b6c01..9759abb6413ed 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -17,6 +17,7 @@ import PlanNoticeCreditUpgrade from 'calypso/my-sites/plans-features-main/compon
 import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
 import { useUpgradePlanHostingDetailsList } from './hooks/use-get-upgrade-plan-hosting-details-list';
 import { Skeleton } from './skeleton';
+import { VariantsSkeleton } from './skeleton/variants-skeleton';
 import UpgradePlanDetails from './upgrade-plan-details';
 import './style.scss';
 import withMigrationSticker from './with-migration-sticker';
@@ -26,7 +27,6 @@ import type { PricingMetaForGridPlan } from '@automattic/data-stores';
 export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > = ( props ) => {
 	const translate = useTranslate();
 	const isEnglishLocale = useIsEnglishLocale();
-	const plan = getPlan( PLAN_BUSINESS );
 	const hasEnTranslation = useHasEnTranslation();
 	const {
 		site,
@@ -51,10 +51,14 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 	const { list: upgradePlanHostingDetailsList, isFetching: isFetchingHostingDetails } =
 		useUpgradePlanHostingDetailsList();
+	const plan = getPlan( visiblePlan );
+
+	const planMonthly = PLAN_BUSINESS_MONTHLY;
+	const planBiennial = PLAN_BUSINESS_2_YEARS;
 
 	const pricingMeta = Plans.usePricingMetaForGridPlans( {
 		coupon: undefined,
-		planSlugs: [ visiblePlan, PLAN_BUSINESS_2_YEARS, PLAN_BUSINESS_MONTHLY ],
+		planSlugs: [ visiblePlan, planMonthly, planBiennial ],
 		siteId: site.ID,
 		storageAddOns: null,
 		useCheckPlanAvailabilityForPurchase,
@@ -62,8 +66,8 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 	const pricing = {
 		[ visiblePlan ]: pricingMeta?.[ visiblePlan ],
-		[ PLAN_BUSINESS_2_YEARS ]: pricingMeta?.[ PLAN_BUSINESS_2_YEARS ],
-		[ PLAN_BUSINESS_MONTHLY ]: pricingMeta?.[ PLAN_BUSINESS_MONTHLY ],
+		[ planBiennial ]: pricingMeta?.[ planBiennial ],
+		[ planMonthly ]: pricingMeta?.[ planMonthly ],
 	};
 
 	const introOfferAvailable =
@@ -166,7 +170,10 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 		  );
 
 	if ( isFetchingHostingDetails || ! pricing[ visiblePlan ] ) {
-		return <Skeleton showVariants={ showVariants } />;
+		if ( ! showVariants ) {
+			return <Skeleton />;
+		}
+		return <VariantsSkeleton />;
 	}
 
 	return (
diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx
new file mode 100644
index 0000000000000..f1f73b57e3440
--- /dev/null
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx
@@ -0,0 +1,45 @@
+import type { FC } from 'react';
+import './style.scss';
+
+export const VariantsSkeleton: FC = () => {
+	const variantSkeleton = (
+		<div className="import__upgrade-plan-features-container">
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+				style={ { width: '173px', height: '32px', marginBottom: '20px' } }
+			/>
+			<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
+			<div
+				className="import-upgrade-plan-skeleton"
+				style={ { width: '195px', marginBottom: '40px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+				style={ { width: '173px', height: '32px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton"
+				style={ { width: '103px', marginBottom: '40px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+				style={ { width: '305px', height: '32px', borderRadius: '4px' } }
+			/>
+			<div
+				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+				style={ { width: '103px', margin: '0 auto' } }
+			/>
+		</div>
+	);
+	return (
+		<div className="import__upgrade-plan">
+			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
+				<div className="import__upgrade-plan-container">
+					{ variantSkeleton }
+					{ variantSkeleton }
+					{ variantSkeleton }
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 1b0bf7fcbd684..3a67844199bed 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -253,7 +253,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 				<div className="import__upgrade-plan-features-container">
 					<div className="import__upgrade-plan-header">
 						<Title className="plan-title" tagName="h2">
-							{ planSlug === PLAN_BUSINESS_MONTHLY
+							{ PLAN_BUSINESS_MONTHLY === planSlug
 								? translate( 'Monthly' )
 								: translate( 'Biennially' ) }
 						</Title>
@@ -264,7 +264,9 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 					<div>
 						<div className="import__upgrade-plan-cta">
 							<NextButton variant="secondary" onClick={ () => onCtaClick?.( planSlug ) }>
-								{ translate( 'Get Monthly' ) }
+								{ PLAN_BUSINESS_MONTHLY === planSlug
+									? translate( 'Get Monthly' )
+									: translate( 'Get Biennial' ) }
 							</NextButton>
 						</div>
 						<div className="import__upgrade-plan-refund-sub-text">
@@ -276,7 +278,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 					<div className="import__upgrade-plan-features-list">
 						<UpgradePlanFeatureList
 							plan={ getPlan( planSlug ) }
-							showFeatures={ showFeatures }
+							showFeatures
 							setShowFeatures={ setShowFeatures }
 						/>
 					</div>
@@ -354,7 +356,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 					<div className="import__upgrade-plan-features-list">
 						<UpgradePlanFeatureList
 							plan={ visiblePlan }
-							showFeatures={ showFeatures }
+							showFeatures={ showVariants ? true : showFeatures }
 							setShowFeatures={ setShowFeatures }
 						/>
 					</div>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 7f1a746d5e7c2..03104224c21d0 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -44,7 +44,8 @@
         margin-bottom: -0.5rem;
     }
 
-    .import__upgrade-plan .import__upgrade-plan-details {
+    .import__upgrade-plan .import__upgrade-plan-details,
+    .import__upgrade-plan .import__upgrade-plan-details--loading {
         @media ( min-width: 1040px ) {
             display: flex;
             flex-direction: row;

From 4bffcdc241077ffd24d3aa3e34e8ead83c6d1d4e Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 12:46:44 -0500
Subject: [PATCH 14/49] Revert changes to Skeleton

---
 .../wordpress/upgrade-plan/skeleton/index.tsx | 121 +++++++-----------
 1 file changed, 44 insertions(+), 77 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
index 279ba58e12dee..d1544681880dc 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/index.tsx
@@ -1,41 +1,11 @@
 import type { FC } from 'react';
 import './style.scss';
 
-export const Skeleton: FC< { showVariants?: boolean } > = ( { showVariants = false } ) => {
-	const variantSkeleton = (
-		<div className="import__upgrade-plan-features-container">
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-				style={ { width: '173px', height: '32px', marginBottom: '20px' } }
-			/>
-			<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
-			<div
-				className="import-upgrade-plan-skeleton"
-				style={ { width: '195px', marginBottom: '40px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-				style={ { width: '173px', height: '32px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton"
-				style={ { width: '103px', marginBottom: '40px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-				style={ { width: '305px', height: '32px', borderRadius: '4px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-				style={ { width: '103px', margin: '0 auto' } }
-			/>
-		</div>
-	);
+export const Skeleton: FC = () => {
 	return (
 		<div className="import__upgrade-plan">
 			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
 				<div className="import__upgrade-plan-container">
-					{ showVariants && variantSkeleton }
 					<div className="import__upgrade-plan-features-container">
 						<div
 							className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
@@ -63,61 +33,58 @@ export const Skeleton: FC< { showVariants?: boolean } > = ( { showVariants = fal
 							style={ { width: '103px', margin: '0 auto' } }
 						/>
 					</div>
-					{ ! showVariants && (
-						<div className="import__upgrade-plan-hosting-details">
-							<div className="import__upgrade-plan-hosting-details-card-container">
-								<div
-									className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-									style={ { width: '131px', height: '17px', margin: '0 auto 14px' } }
-								/>
-								<div
-									className="import-upgrade-plan-skeleton"
-									style={ { width: '277px', margin: '0 auto 40px' } }
-								/>
+					<div className="import__upgrade-plan-hosting-details">
+						<div className="import__upgrade-plan-hosting-details-card-container">
+							<div
+								className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+								style={ { width: '131px', height: '17px', margin: '0 auto 14px' } }
+							/>
+							<div
+								className="import-upgrade-plan-skeleton"
+								style={ { width: '277px', margin: '0 auto 40px' } }
+							/>
 
-								{ Array.from( { length: 3 } ).map( ( _, index ) => (
+							{ Array.from( { length: 3 } ).map( ( _, index ) => (
+								<div
+									key={ index }
+									className="import-upgrade-plan-skeleton__flex-container"
+									style={ { marginBottom: '12px' } }
+								>
 									<div
-										key={ index }
-										className="import-upgrade-plan-skeleton__flex-container"
-										style={ { marginBottom: '12px' } }
-									>
+										className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--light-highlight"
+										style={ {
+											width: '36px',
+											height: '36px',
+											marginRight: '8px',
+											borderRadius: '4px',
+										} }
+									/>
+									<div>
 										<div
-											className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--light-highlight"
-											style={ {
-												width: '36px',
-												height: '36px',
-												marginRight: '8px',
-												borderRadius: '4px',
-											} }
+											className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+											style={ { width: '111px' } }
 										/>
-										<div>
-											<div
-												className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-												style={ { width: '111px' } }
-											/>
-											<div className="import-upgrade-plan-skeleton" style={ { width: '257px' } } />
-										</div>
+										<div className="import-upgrade-plan-skeleton" style={ { width: '257px' } } />
 									</div>
-								) ) }
+								</div>
+							) ) }
 
-								<div
-									className="import-upgrade-plan-skeleton"
-									style={ { width: '277px', margin: '28px auto 10px' } }
-								/>
+							<div
+								className="import-upgrade-plan-skeleton"
+								style={ { width: '277px', margin: '28px auto 10px' } }
+							/>
 
-								<div
-									className="import-upgrade-plan-skeleton__flex-container"
-									style={ { justifyContent: 'center' } }
-								>
-									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-									<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
-								</div>
+							<div
+								className="import-upgrade-plan-skeleton__flex-container"
+								style={ { justifyContent: 'center' } }
+							>
+								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
+								<div className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--circles-item" />
 							</div>
 						</div>
-					) }
-					{ showVariants && variantSkeleton }
+					</div>
 				</div>
 			</div>
 		</div>

From efd3ab7f4159ab08f0061ea0de7665d765754b2e Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 12:53:49 -0500
Subject: [PATCH 15/49] Revert unnecessary name change

---
 .../wordpress/upgrade-plan/upgrade-plan-details.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 3a67844199bed..fd34cb1d123f5 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -233,7 +233,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 	} = props;
 
 	const plans = [ PLAN_BUSINESS, PLAN_BUSINESS_MONTHLY, PLAN_BUSINESS_2_YEARS ];
-	const visiblePlan = getPlan( selectedPlan );
+	const plan = getPlan( selectedPlan );
 
 	const planPriceOfferPropsList = plans.reduce(
 		( acc, planSlug ) => ( {
@@ -294,8 +294,8 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 	}, [] );
 
 	useEffect( () => {
-		visiblePlan && visiblePlan.getPathSlug && setSelectedPlanSlug( visiblePlan.getPathSlug() );
-	}, [ visiblePlan ] );
+		plan && plan.getPathSlug && setSelectedPlanSlug( plan.getPathSlug() );
+	}, [ plan ] );
 
 	return (
 		<div className="import__upgrade-plan-details">
@@ -328,7 +328,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							</Plans2023Tooltip>
 						) }
 						<Title className="plan-title" tagName="h2">
-							{ showVariants ? translate( 'Yearly' ) : visiblePlan?.getTitle() }
+							{ showVariants ? translate( 'Yearly' ) : plan?.getTitle() }
 						</Title>
 						{ ! showVariants && (
 							<p>{ translate( 'Unlock the power of WordPress with plugins and cloud tools.' ) }</p>
@@ -348,14 +348,14 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							) }
 						</div>
 						<div className="import__upgrade-plan-refund-sub-text">
-							{ visiblePlan && ! isMonthly( visiblePlan.getStoreSlug() )
+							{ plan && ! isMonthly( plan.getStoreSlug() )
 								? translate( 'Refundable within 14 days. No questions asked.' )
 								: translate( 'Refundable within 7 days. No questions asked.' ) }
 						</div>
 					</div>
 					<div className="import__upgrade-plan-features-list">
 						<UpgradePlanFeatureList
-							plan={ visiblePlan }
+							plan={ plan }
 							showFeatures={ showVariants ? true : showFeatures }
 							setShowFeatures={ setShowFeatures }
 						/>

From 1799b57750456cea059a899c53febf51ca074806 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 13:01:46 -0500
Subject: [PATCH 16/49] Fix tabs

---
 .../site-migration-upgrade-plan/style.scss    | 152 +++++++++---------
 1 file changed, 76 insertions(+), 76 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 03104224c21d0..4a6b95fd40f29 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -1,86 +1,86 @@
 .is-step-site-migration-upgrade-plan-with-variants {
-    &.step-container .step-container__header {
-        margin-left: auto;
-        margin-right: auto;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        @media ( min-width: 720px ) {
-            max-width: 720px;
-            padding-left: 0;
-            padding-right: 0;
-        }
-    }
-    .import-upgrade-plan-skeleton {
-        &.import-upgrade-plan-skeleton--light-highlight {
-            background-color: var(--studio-wordpress-blue-50);
-            opacity: 0.2;
-        }
+	&.step-container .step-container__header {
+		margin-left: auto;
+		margin-right: auto;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		@media ( min-width: 720px ) {
+			max-width: 720px;
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+	.import-upgrade-plan-skeleton {
+		&.import-upgrade-plan-skeleton--light-highlight {
+			background-color: var(--studio-wordpress-blue-50);
+			opacity: 0.2;
+		}
 
-        &.import-upgrade-plan-skeleton--dark-highlight {
-            background-color: var(--studio-wordpress-blue-50);
-            opacity: 0.5;
-        }
-    }
-    .import__upgrade-plan-variants-badge {
-        background-color: var(--studio-gray-100);
-        color: var(--color-text-inverted);
-        border-radius: 4px;
-        font-size: 0.75rem;
-        margin-bottom: 1rem;
-    }
-    .import__upgrade-plan-price-badge {
-        display: none;
-    }
-    .import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
-        background-color: var(--studio-wordpress-blue-50) !important;
-        border-color: var(--studio-wordpress-blue-50);
-    }
-    .import__upgrade-plan .import__upgrade-plan-refund-sub-text,
-    .import__upgrade-plan .import__upgrade-plan-features-list .import__upgrade-plan-feature-more button {
-        color: var(--color-text-subtle);
-    }
+		&.import-upgrade-plan-skeleton--dark-highlight {
+			background-color: var(--studio-wordpress-blue-50);
+			opacity: 0.5;
+		}
+	}
+	.import__upgrade-plan-variants-badge {
+		background-color: var(--studio-gray-100);
+		color: var(--color-text-inverted);
+		border-radius: 4px;
+		font-size: 0.75rem;
+		margin-bottom: 1rem;
+	}
+	.import__upgrade-plan-price-badge {
+		display: none;
+	}
+	.import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
+		background-color: var(--studio-wordpress-blue-50) !important;
+		border-color: var(--studio-wordpress-blue-50);
+	}
+	.import__upgrade-plan .import__upgrade-plan-refund-sub-text,
+	.import__upgrade-plan .import__upgrade-plan-features-list .import__upgrade-plan-feature-more button {
+		color: var(--color-text-subtle);
+	}
 
-    .import__upgrade-plan .import__upgrade-plan-header .plan-title {
-        margin-bottom: -0.5rem;
-    }
+	.import__upgrade-plan .import__upgrade-plan-header .plan-title {
+		margin-bottom: -0.5rem;
+	}
 
-    .import__upgrade-plan .import__upgrade-plan-details,
-    .import__upgrade-plan .import__upgrade-plan-details--loading {
-        @media ( min-width: 1040px ) {
-            display: flex;
-            flex-direction: row;
-            gap: 0;
+	.import__upgrade-plan .import__upgrade-plan-details,
+	.import__upgrade-plan .import__upgrade-plan-details--loading {
+		@media ( min-width: 1040px ) {
+			display: flex;
+			flex-direction: row;
+			gap: 0;
 
-            .import__upgrade-plan-container {
-                padding-top: 1.5rem;
-                padding-bottom: 1.5rem;
-                gap: 0;
+			.import__upgrade-plan-container {
+				padding-top: 1.5rem;
+				padding-bottom: 1.5rem;
+				gap: 0;
 
-                &:first-of-type .import__upgrade-plan-features-container {
-                    border-right: 0;
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                }
+				&:first-of-type .import__upgrade-plan-features-container {
+					border-right: 0;
+					border-top-right-radius: 0;
+					border-bottom-right-radius: 0;
+				}
 
-                &:last-of-type .import__upgrade-plan-features-container {
-                    border-left: 0;
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                }
+				&:last-of-type .import__upgrade-plan-features-container {
+					border-left: 0;
+					border-top-left-radius: 0;
+					border-bottom-left-radius: 0;
+				}
 
-                .import__upgrade-plan-features-container {
-                    padding-top: 1.5rem;
-                    padding-bottom: 1.5rem;
-                    margin-bottom: 0;
-                    margin-top: 0;
-                }
+				.import__upgrade-plan-features-container {
+					padding-top: 1.5rem;
+					padding-bottom: 1.5rem;
+					margin-bottom: 0;
+					margin-top: 0;
+				}
 
-                &:first-of-type .import__upgrade-plan-features-container,
-                &:last-of-type .import__upgrade-plan-features-container {
-                    margin-bottom: 1.5rem;
-                    margin-top: 2.6rem;
-                }
-            }
-        }
-    }
+				&:first-of-type .import__upgrade-plan-features-container,
+				&:last-of-type .import__upgrade-plan-features-container {
+					margin-bottom: 1.5rem;
+					margin-top: 2.6rem;
+				}
+			}
+		}
+	}
 }

From b86ba5febb049c237c28c60265b1416fc5a9a17b Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 13:17:13 -0500
Subject: [PATCH 17/49] Fix for loader display

---
 .../skeleton/variants-skeleton.tsx            | 62 +++++++++----------
 .../site-migration-upgrade-plan/style.scss    |  3 +-
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx b/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx
index f1f73b57e3440..d103a35bca6f9 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/skeleton/variants-skeleton.tsx
@@ -3,42 +3,42 @@ import './style.scss';
 
 export const VariantsSkeleton: FC = () => {
 	const variantSkeleton = (
-		<div className="import__upgrade-plan-features-container">
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-				style={ { width: '173px', height: '32px', marginBottom: '20px' } }
-			/>
-			<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
-			<div
-				className="import-upgrade-plan-skeleton"
-				style={ { width: '195px', marginBottom: '40px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
-				style={ { width: '173px', height: '32px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton"
-				style={ { width: '103px', marginBottom: '40px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-				style={ { width: '305px', height: '32px', borderRadius: '4px' } }
-			/>
-			<div
-				className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
-				style={ { width: '103px', margin: '0 auto' } }
-			/>
+		<div className="import__upgrade-plan-container">
+			<div className="import__upgrade-plan-features-container">
+				<div
+					className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+					style={ { width: '173px', height: '32px', marginBottom: '20px' } }
+				/>
+				<div className="import-upgrade-plan-skeleton" style={ { width: '277px' } } />
+				<div
+					className="import-upgrade-plan-skeleton"
+					style={ { width: '195px', marginBottom: '40px' } }
+				/>
+				<div
+					className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-gray"
+					style={ { width: '173px', height: '32px' } }
+				/>
+				<div
+					className="import-upgrade-plan-skeleton"
+					style={ { width: '103px', marginBottom: '40px' } }
+				/>
+				<div
+					className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+					style={ { width: '305px', height: '32px', borderRadius: '4px' } }
+				/>
+				<div
+					className="import-upgrade-plan-skeleton import-upgrade-plan-skeleton--dark-highlight"
+					style={ { width: '103px', margin: '0 auto' } }
+				/>
+			</div>
 		</div>
 	);
 	return (
 		<div className="import__upgrade-plan">
 			<div className="import__upgrade-plan-details import__upgrade-plan-details--loading">
-				<div className="import__upgrade-plan-container">
-					{ variantSkeleton }
-					{ variantSkeleton }
-					{ variantSkeleton }
-				</div>
+				{ variantSkeleton }
+				{ variantSkeleton }
+				{ variantSkeleton }
 			</div>
 		</div>
 	);
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 4a6b95fd40f29..9901f9b9e35a5 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -44,8 +44,7 @@
 		margin-bottom: -0.5rem;
 	}
 
-	.import__upgrade-plan .import__upgrade-plan-details,
-	.import__upgrade-plan .import__upgrade-plan-details--loading {
+	.import__upgrade-plan .import__upgrade-plan-details {
 		@media ( min-width: 1040px ) {
 			display: flex;
 			flex-direction: row;

From 7faf794be477474547d86dc9fbaaef79a207e6d3 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 14:18:14 -0500
Subject: [PATCH 18/49] Simplify

---
 .../importer/wordpress/upgrade-plan/index.tsx  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index 9759abb6413ed..a295548d2b054 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -22,6 +22,7 @@ import UpgradePlanDetails from './upgrade-plan-details';
 import './style.scss';
 import withMigrationSticker from './with-migration-sticker';
 import type { UpgradePlanProps } from './types';
+import type { PlanSlug } from '@automattic/calypso-products';
 import type { PricingMetaForGridPlan } from '@automattic/data-stores';
 
 export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > = ( props ) => {
@@ -56,19 +57,22 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 	const planMonthly = PLAN_BUSINESS_MONTHLY;
 	const planBiennial = PLAN_BUSINESS_2_YEARS;
 
+	const planSlugs: PlanSlug[] = [ visiblePlan, planMonthly, planBiennial ];
+
 	const pricingMeta = Plans.usePricingMetaForGridPlans( {
 		coupon: undefined,
-		planSlugs: [ visiblePlan, planMonthly, planBiennial ],
+		planSlugs: planSlugs,
 		siteId: site.ID,
 		storageAddOns: null,
 		useCheckPlanAvailabilityForPurchase,
 	} );
-
-	const pricing = {
-		[ visiblePlan ]: pricingMeta?.[ visiblePlan ],
-		[ planBiennial ]: pricingMeta?.[ planBiennial ],
-		[ planMonthly ]: pricingMeta?.[ planMonthly ],
-	};
+	const pricing = planSlugs.reduce(
+		( acc, planSlug: string ) => {
+			acc[ planSlug ] = pricingMeta?.[ planSlug ];
+			return acc;
+		},
+		{} as Record< string, PricingMetaForGridPlan | undefined >
+	);
 
 	const introOfferAvailable =
 		isEnabled( 'migration-flow/introductory-offer' ) &&

From f8c908883dfd23db75729e60252a3a9dd51fea66 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 14:35:04 -0500
Subject: [PATCH 19/49] Prevent flash of uncentered loader

---
 .../steps-repository/site-migration-upgrade-plan/style.scss      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 9901f9b9e35a5..9891125b3a62c 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -49,6 +49,7 @@
 			display: flex;
 			flex-direction: row;
 			gap: 0;
+			justify-content: center;
 
 			.import__upgrade-plan-container {
 				padding-top: 1.5rem;

From e7de03fe0f9b1c1912f0367a4eccd26cb3c2b443 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 14:37:36 -0500
Subject: [PATCH 20/49] Update language for consistency

---
 .../importer/wordpress/upgrade-plan/upgrade-plan-details.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index fd34cb1d123f5..20010aa2b4ad8 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -145,8 +145,8 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 
 	if ( PLAN_BUSINESS_2_YEARS === plan?.getStoreSlug() ) {
 		billingTimeFrame = translate(
-			'per month, %(discountedPrice)s for the first 2 years,{{br/}}' +
-				'then %(rawPrice)s billed biennially, excl. taxes',
+			'per month, %(discountedPrice)s billed biennially for the first 2 years,{{br/}}' +
+				'then %(rawPrice)s every 2 years afterwards, excl. taxes',
 			{
 				args: {
 					discountedPrice: formatCurrency( introOfferFullPrice, currencyCode, {

From 8f3f84702176b2aaf1e9013d997dbaab690e7bcb Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 14:46:52 -0500
Subject: [PATCH 21/49] More specific typing, pass planSlugs through so we
 don't have to repeat

---
 client/blocks/importer/wordpress/upgrade-plan/index.tsx    | 1 +
 client/blocks/importer/wordpress/upgrade-plan/types.ts     | 5 +++--
 .../wordpress/upgrade-plan/upgrade-plan-details.tsx        | 7 ++++---
 .../components/migration-assistance-modal/index.tsx        | 3 ++-
 .../steps-repository/site-migration-upgrade-plan/index.tsx | 7 ++++---
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index a295548d2b054..6d512b6f8f109 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -217,6 +217,7 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 
 			<PlanNoticeCreditUpgrade siteId={ site.ID } visiblePlans={ [ visiblePlan ] } />
 			<UpgradePlanDetails
+				planSlugs={ planSlugs }
 				pricing={ pricing as { [ key: string ]: PricingMetaForGridPlan } }
 				introOfferAvailable={ !! introOfferAvailable }
 				upgradePlanHostingDetailsList={ upgradePlanHostingDetailsList }
diff --git a/client/blocks/importer/wordpress/upgrade-plan/types.ts b/client/blocks/importer/wordpress/upgrade-plan/types.ts
index 4767e2a32d453..155bb51b90297 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/types.ts
+++ b/client/blocks/importer/wordpress/upgrade-plan/types.ts
@@ -18,7 +18,8 @@ export type UpgradePlanDetailsProps = {
 	pricing?: { [ key: string ]: PricingMetaForGridPlan };
 	upgradePlanHostingDetailsList: Array< HostingDetailsItem >;
 	showVariants?: boolean;
-	onCtaClick?: ( planSlug: string ) => void;
+	onCtaClick?: ( planSlug: PlanSlug ) => void;
+	planSlugs: Array< PlanSlug >;
 };
 
 export type UpgradePlanProps = {
@@ -29,7 +30,7 @@ export type UpgradePlanProps = {
 	hideTitleAndSubTitle?: boolean;
 	onFreeTrialClick?: () => void;
 	navigateToVerifyEmailStep: () => void;
-	onCtaClick: ( planSlug: string ) => void;
+	onCtaClick: ( planSlug: PlanSlug ) => void;
 	onContentOnlyClick?: () => void;
 	trackingEventsProps?: Record< string, unknown >;
 	hideFreeMigrationTrialForNonVerifiedEmail?: boolean;
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 20010aa2b4ad8..2d86beffb34b5 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -21,6 +21,7 @@ import { useSelectedPlanUpgradeMutation } from 'calypso/data/import-flow/use-sel
 import { UpgradePlanDetailsProps } from './types';
 import { UpgradePlanFeatureList } from './upgrade-plan-feature-list';
 import { UpgradePlanHostingDetails } from './upgrade-plan-hosting-details';
+import type { PlanSlug } from '@automattic/calypso-products';
 
 interface SwitcherProps {
 	selectedPlan: string;
@@ -230,12 +231,12 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 		upgradePlanHostingDetailsList,
 		showVariants,
 		onCtaClick,
+		planSlugs,
 	} = props;
 
-	const plans = [ PLAN_BUSINESS, PLAN_BUSINESS_MONTHLY, PLAN_BUSINESS_2_YEARS ];
 	const plan = getPlan( selectedPlan );
 
-	const planPriceOfferPropsList = plans.reduce(
+	const planPriceOfferPropsList = planSlugs.reduce(
 		( acc, planSlug ) => ( {
 			...acc,
 			[ planSlug ]: preparePlanPriceOfferProps(
@@ -247,7 +248,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 		{} as Record< string, PlanPriceOfferProps >
 	);
 
-	const planVariant = ( planSlug: string ) => {
+	const planVariant = ( planSlug: PlanSlug ) => {
 		return (
 			<div className="import__upgrade-plan-container">
 				<div className="import__upgrade-plan-features-container">
diff --git a/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx b/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx
index 586ed4cb5fd0d..4125d28d9d3bd 100644
--- a/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/components/migration-assistance-modal/index.tsx
@@ -6,6 +6,7 @@ import { useTranslate } from 'i18n-calypso';
 import ConfirmModal from 'calypso/blocks/importer/components/confirm-modal';
 import { setMigrationAssistanceAccepted } from 'calypso/blocks/importer/wordpress/utils';
 import './style.scss';
+import type { PlanSlug } from '@automattic/calypso-products';
 
 const EVENT_NAMES = {
 	accepted: 'calypso_migration_assistance_modal_deal_accepted',
@@ -15,7 +16,7 @@ const EVENT_NAMES = {
 interface MigrationAssistanceModalProps {
 	navigateBack: ( () => void ) | undefined;
 	migrateFrom: string | null;
-	onConfirm: ( ( planSlug: string ) => void ) | undefined;
+	onConfirm: ( ( planSlug: PlanSlug ) => void ) | undefined;
 }
 export const MigrationAssistanceModal: React.FunctionComponent< MigrationAssistanceModalProps > = (
 	props: MigrationAssistanceModalProps
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
index a9c0b4e404279..69de688fde9e9 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
@@ -1,6 +1,7 @@
 import {
 	PLAN_BUSINESS,
 	PLAN_MIGRATION_TRIAL_MONTHLY,
+	PlanSlug,
 	getPlan,
 	getPlanByPathSlug,
 } from '@automattic/calypso-products';
@@ -61,7 +62,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	const migrateFrom = queryParams.get( 'from' );
 	const showMigrationModal = queryParams.get( 'showModal' );
 
-	const goToMigrationAssistanceCheckout = ( planSlug: string, userAcceptedDeal = false ) => {
+	const goToMigrationAssistanceCheckout = ( planSlug: PlanSlug, userAcceptedDeal = false ) => {
 		const plan = getPlan( planSlug );
 		navigation?.submit?.( {
 			goToCheckout: true,
@@ -79,7 +80,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 		<>
 			{ showMigrationModal && (
 				<MigrationAssistanceModal
-					onConfirm={ ( planSlug: string ) => {
+					onConfirm={ ( planSlug: PlanSlug ) => {
 						const userAcceptedDeal = true;
 						goToMigrationAssistanceCheckout( planSlug, userAcceptedDeal );
 					} }
@@ -93,7 +94,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 				subTitleText=""
 				isBusy={ false }
 				hideTitleAndSubTitle
-				onCtaClick={ ( planSlug: string ) => {
+				onCtaClick={ ( planSlug: PlanSlug ) => {
 					const userAcceptedDeal = false;
 					goToMigrationAssistanceCheckout( planSlug, userAcceptedDeal );
 				} }

From 1266076e5b067f16616894dfee15f44412cb2375 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 15:01:04 -0500
Subject: [PATCH 22/49] Use feature flag being introduced in separate PR

---
 .../steps-repository/site-migration-upgrade-plan/index.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
index 69de688fde9e9..ae4ce46071b1a 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/index.tsx
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import {
 	PLAN_BUSINESS,
 	PLAN_MIGRATION_TRIAL_MONTHLY,
@@ -20,7 +21,6 @@ import { useSiteSlug } from 'calypso/landing/stepper/hooks/use-site-slug';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { MigrationAssistanceModal } from '../../components/migration-assistance-modal';
 import type { StepProps } from '../../types';
-
 import './style.scss';
 
 type StepContainerProps = React.ComponentProps< typeof StepContainer >;
@@ -39,7 +39,7 @@ const SiteMigrationUpgradePlan: FC< Props > = ( {
 	customizedActionButtons,
 	...props
 } ) => {
-	const showVariants = true; // TODO: replace this with the flag.
+	const showVariants = config.isEnabled( 'migration-flow/experiment' );
 	const { onSkip, skipLabelText, skipPosition } = props;
 	const siteItem = useSite();
 	const siteSlug = useSiteSlug();

From d8da194bd1723f650f687cc2a6cc0662e5e1b696 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 15:17:01 -0500
Subject: [PATCH 23/49] Use consistent variable

---
 .../importer/wordpress/upgrade-plan/upgrade-plan-details.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 2d86beffb34b5..4c4e621bd0e6e 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -341,7 +341,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 					<div>
 						<div className="import__upgrade-plan-cta">
 							{ showVariants ? (
-								<NextButton onClick={ () => onCtaClick?.( PLAN_BUSINESS ) }>
+								<NextButton onClick={ () => onCtaClick?.( selectedPlan ) }>
 									{ translate( 'Get Yearly' ) }
 								</NextButton>
 							) : (

From 25dbce6792d27aa3aff11e4b88f7a574153a5c79 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 15:28:26 -0500
Subject: [PATCH 24/49] Ensure we have planSlugs before reducer

---
 .../upgrade-plan/upgrade-plan-details.tsx     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 4c4e621bd0e6e..fe2b687378cd4 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -236,17 +236,19 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 
 	const plan = getPlan( selectedPlan );
 
-	const planPriceOfferPropsList = planSlugs.reduce(
-		( acc, planSlug ) => ( {
-			...acc,
-			[ planSlug ]: preparePlanPriceOfferProps(
-				introOfferAvailable,
-				getPlan( planSlug ),
-				pricing?.[ planSlug ]
-			),
-		} ),
-		{} as Record< string, PlanPriceOfferProps >
-	);
+	const planPriceOfferPropsList =
+		planSlugs &&
+		planSlugs.reduce(
+			( acc, planSlug ) => ( {
+				...acc,
+				[ planSlug ]: preparePlanPriceOfferProps(
+					introOfferAvailable,
+					getPlan( planSlug ),
+					pricing?.[ planSlug ]
+				),
+			} ),
+			{} as Record< string, PlanPriceOfferProps >
+		);
 
 	const planVariant = ( planSlug: PlanSlug ) => {
 		return (

From 43ee4c46495a78b5549920656330c6e427012749 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Wed, 4 Dec 2024 15:41:48 -0500
Subject: [PATCH 25/49] Update test

---
 .../wordpress/upgrade-plan/test/upgrade-plan-details.tsx   | 7 +++++--
 .../wordpress/upgrade-plan/upgrade-plan-details.tsx        | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx
index 24cdc580dceba..7dbea45a1b3bb 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx
@@ -1,6 +1,7 @@
 /**
  * @jest-environment jsdom
  */
+import { PLAN_BUSINESS } from '@automattic/calypso-products';
 import { type PricingMetaForGridPlan } from '@automattic/data-stores';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { screen, waitFor } from '@testing-library/react';
@@ -54,7 +55,8 @@ describe( 'UpgradePlanDetails', () => {
 
 	it( 'should show the pricing description for the introductory offer when the intro offer is avaiable', async () => {
 		renderUpgradePlanDetailsComponent( {
-			pricing: getPricing(),
+			planSlugs: [ PLAN_BUSINESS ],
+			pricing: { [ PLAN_BUSINESS ]: getPricing() },
 			introOfferAvailable: true,
 			children: 'Content',
 			upgradePlanHostingDetailsList: [],
@@ -83,7 +85,8 @@ describe( 'UpgradePlanDetails', () => {
 
 	it( 'should show the standard pricing offer description when the introductory offer is not avaiable', async () => {
 		renderUpgradePlanDetailsComponent( {
-			pricing: getPricing(),
+			planSlugs: [ PLAN_BUSINESS ],
+			pricing: { [ PLAN_BUSINESS ]: getPricing() },
 			introOfferAvailable: false,
 			children: 'Content',
 			upgradePlanHostingDetailsList: [],
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index fe2b687378cd4..7eeaed043c56a 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -302,7 +302,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 
 	return (
 		<div className="import__upgrade-plan-details">
-			{ ! introOfferAvailable && ! showVariants && (
+			{ ! introOfferAvailable && (
 				<UpgradePlanPeriodSwitcher
 					selectedPlan={ selectedPlan }
 					onMonthlyPlanClick={ () => setSelectedPlan( PLAN_BUSINESS_MONTHLY ) }

From 67cbc8f9c38210647623569391f5b5125a38d61d Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 10:14:21 -0500
Subject: [PATCH 26/49] Fix mobile spacing, update pricing copy

---
 .../importer/wordpress/upgrade-plan/index.tsx |  7 +++
 .../upgrade-plan/upgrade-plan-details.tsx     | 47 +++++++++++++------
 .../site-migration-upgrade-plan/style.scss    | 17 +++++++
 3 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/index.tsx b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
index 6d512b6f8f109..7a86634380f1b 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/index.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/index.tsx
@@ -10,6 +10,7 @@ import { Button } from '@automattic/components';
 import { Plans } from '@automattic/data-stores';
 import { useHasEnTranslation, useIsEnglishLocale } from '@automattic/i18n-utils';
 import { Title, SubTitle, NextButton } from '@automattic/onboarding';
+import { Icon, reusableBlock } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import React, { useEffect } from 'react';
 import useCheckEligibilityMigrationTrialPlan from 'calypso/data/plans/use-check-eligibility-migration-trial-plan';
@@ -226,6 +227,12 @@ export const UnwrappedUpgradePlan: React.FunctionComponent< UpgradePlanProps > =
 			>
 				{ renderCTAs() }
 			</UpgradePlanDetails>
+			{ showVariants && (
+				<div className="import__upgrade-plan-refund-sub-text">
+					<Icon icon={ reusableBlock } />
+					{ translate( 'Fully refundable. No questions asked.' ) }
+				</div>
+			) }
 		</div>
 	);
 };
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 7eeaed043c56a..f6b91dfc78cd7 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -81,6 +81,7 @@ interface PlanPriceOfferProps {
 	originalFullPrice?: number;
 	introOfferFullPrice?: number;
 	introOfferAvailable: boolean;
+	showVariants?: boolean;
 }
 
 const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
@@ -95,6 +96,7 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 		introOfferMonthlyPrice,
 		originalMonthlyPrice,
 		currencyCode,
+		showVariants,
 	} = props;
 
 	const showOriginalPrice =
@@ -144,10 +146,27 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 				}
 		  );
 
+	if ( showVariants ) {
+		billingTimeFrame = translate(
+			'per month, %(discountedPrice)s for your first year. %(originalPrice)s after.',
+			{
+				args: {
+					discountedPrice: formatCurrency( introOfferFullPrice, currencyCode, {
+						stripZeros: true,
+						isSmallestUnit: true,
+					} ),
+					originalPrice: formatCurrency( originalFullPrice, currencyCode, {
+						isSmallestUnit: true,
+						stripZeros: true,
+					} ),
+				},
+			}
+		);
+	}
+
 	if ( PLAN_BUSINESS_2_YEARS === plan?.getStoreSlug() ) {
 		billingTimeFrame = translate(
-			'per month, %(discountedPrice)s billed biennially for the first 2 years,{{br/}}' +
-				'then %(rawPrice)s every 2 years afterwards, excl. taxes',
+			'per month, %(discountedPrice)s for first 2 years. %(rawPrice)s after.',
 			{
 				args: {
 					discountedPrice: formatCurrency( introOfferFullPrice, currencyCode, {
@@ -159,8 +178,6 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 						stripZeros: true,
 					} ),
 				},
-				components: { br: <br /> },
-				comment: 'excl. taxes is short for excluding taxes',
 			}
 		);
 	}
@@ -272,11 +289,6 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 									: translate( 'Get Biennial' ) }
 							</NextButton>
 						</div>
-						<div className="import__upgrade-plan-refund-sub-text">
-							{ PLAN_BUSINESS_MONTHLY === planSlug
-								? translate( 'Refundable within 7 days. No questions asked.' )
-								: translate( 'Refundable within 14 days. No questions asked.' ) }
-						</div>
 					</div>
 					<div className="import__upgrade-plan-features-list">
 						<UpgradePlanFeatureList
@@ -338,7 +350,10 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 						) }
 					</div>
 
-					<PlanPriceOffer { ...planPriceOfferPropsList[ selectedPlan ] } />
+					<PlanPriceOffer
+						showVariants={ showVariants }
+						{ ...planPriceOfferPropsList[ selectedPlan ] }
+					/>
 
 					<div>
 						<div className="import__upgrade-plan-cta">
@@ -350,11 +365,13 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 								children
 							) }
 						</div>
-						<div className="import__upgrade-plan-refund-sub-text">
-							{ plan && ! isMonthly( plan.getStoreSlug() )
-								? translate( 'Refundable within 14 days. No questions asked.' )
-								: translate( 'Refundable within 7 days. No questions asked.' ) }
-						</div>
+						{ ! showVariants && (
+							<div className="import__upgrade-plan-refund-sub-text">
+								{ plan && ! isMonthly( plan.getStoreSlug() )
+									? translate( 'Refundable within 14 days. No questions asked.' )
+									: translate( 'Refundable within 7 days. No questions asked.' ) }
+							</div>
+						) }
 					</div>
 					<div className="import__upgrade-plan-features-list">
 						<UpgradePlanFeatureList
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 9891125b3a62c..72a6709ac883a 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -1,4 +1,10 @@
 .is-step-site-migration-upgrade-plan-with-variants {
+	padding-bottom: 5rem;
+
+	@media ( min-width: 1040px ) {
+		padding-bottom: 3rem;
+	}
+
 	&.step-container .step-container__header {
 		margin-left: auto;
 		margin-right: auto;
@@ -45,6 +51,8 @@
 	}
 
 	.import__upgrade-plan .import__upgrade-plan-details {
+		margin-bottom: 0;
+
 		@media ( min-width: 1040px ) {
 			display: flex;
 			flex-direction: row;
@@ -83,4 +91,13 @@
 			}
 		}
 	}
+
+	.import__upgrade-plan-refund-sub-text {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.3rem;
+		font-size: 0.75rem;
+		margin-top: 0;
+	}
 }

From 17bad2b24b404c8c36283cbfd4f282e3c028fbee Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 10:23:01 -0500
Subject: [PATCH 27/49] Mobile refund text

---
 .../steps-repository/site-migration-upgrade-plan/style.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 72a6709ac883a..c7ffd1306793c 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -98,6 +98,10 @@
 		justify-content: center;
 		gap: 0.3rem;
 		font-size: 0.75rem;
-		margin-top: 0;
+		margin-top: 1rem;
+
+		@media ( min-width: 1040px ) {
+			margin-top: 0;
+		}
 	}
 }

From 6a308ffccb28f2f2cf645206fb686c34f31104c9 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 10:47:10 -0500
Subject: [PATCH 28/49] Fix flash of original skeleton

---
 .../wordpress/upgrade-plan/with-migration-sticker.tsx    | 9 +++++++--
 .../site-migration-upgrade-plan/style.scss               | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/with-migration-sticker.tsx b/client/blocks/importer/wordpress/upgrade-plan/with-migration-sticker.tsx
index 1d76dba33cbef..7d8a9e0ad69f3 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/with-migration-sticker.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/with-migration-sticker.tsx
@@ -2,6 +2,7 @@ import config from '@automattic/calypso-config';
 import { useEffect } from 'react';
 import { useMigrationStickerMutation } from 'calypso/data/site-migration/use-migration-sticker';
 import { Skeleton } from './skeleton';
+import { VariantsSkeleton } from './skeleton/variants-skeleton';
 import type { UpgradePlanProps } from './types';
 import type { FC } from 'react';
 
@@ -9,7 +10,7 @@ const isIntroductoryOfferEnabled = config.isEnabled( 'migration-flow/introductor
 
 const withMigrationSticker =
 	( WrappedComponent: FC< UpgradePlanProps > ) => ( props: UpgradePlanProps ) => {
-		const { site } = props;
+		const { site, showVariants } = props;
 		const siteId = site.ID;
 
 		const {
@@ -35,7 +36,11 @@ const withMigrationSticker =
 		}, [ addMigrationSticker, deleteMigrationSticker, siteId ] );
 
 		if ( isIntroductoryOfferEnabled && ( isIdle || isPending ) ) {
-			return <Skeleton />;
+			if ( ! showVariants ) {
+				return <Skeleton />;
+			}
+
+			return <VariantsSkeleton />;
 		}
 
 		return <WrappedComponent { ...props } />;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index c7ffd1306793c..cec63d3fae44a 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -100,7 +100,7 @@
 		font-size: 0.75rem;
 		margin-top: 1rem;
 
-		@media ( min-width: 1040px ) {
+		@media ( min-width: 720px ) {
 			margin-top: 0;
 		}
 	}

From 578824f3cfd752e2bfb49da8dcc2af9d8785987a Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 10:51:49 -0500
Subject: [PATCH 29/49] Fix box shadow on secondary buttons

---
 .../steps-repository/site-migration-upgrade-plan/style.scss    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index cec63d3fae44a..c78845f5d1694 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -37,6 +37,9 @@
 	.import__upgrade-plan-price-badge {
 		display: none;
 	}
+	.import__upgrade-plan .import__upgrade-plan-cta button.button {
+		box-shadow: none;
+	}
 	.import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
 		background-color: var(--studio-wordpress-blue-50) !important;
 		border-color: var(--studio-wordpress-blue-50);

From 17d3a35aa73dbd4dc0b974845aa4b708e9b072d0 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 11:21:11 -0500
Subject: [PATCH 30/49] Don't show storage

---
 .../upgrade-plan/upgrade-plan-details.tsx     |  2 ++
 .../upgrade-plan-feature-list.tsx             | 19 ++++++++++++-------
 .../site-migration-upgrade-plan/style.scss    |  4 ++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index f6b91dfc78cd7..f3b21f03edf0a 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -295,6 +295,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							plan={ getPlan( planSlug ) }
 							showFeatures
 							setShowFeatures={ setShowFeatures }
+							showVariants={ showVariants }
 						/>
 					</div>
 				</div>
@@ -378,6 +379,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 							plan={ plan }
 							showFeatures={ showVariants ? true : showFeatures }
 							setShowFeatures={ setShowFeatures }
+							showVariants={ showVariants }
 						/>
 					</div>
 				</div>
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
index a144ca33a8152..c9f90ff5a865c 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
@@ -17,11 +17,12 @@ interface Props {
 	plan: Plan | JetpackPlan | WPComPlan | undefined;
 	showFeatures: boolean;
 	setShowFeatures: ( showFeatures: boolean ) => void;
+	showVariants?: boolean;
 }
 
 export const UpgradePlanFeatureList = ( props: Props ) => {
 	const { __ } = useI18n();
-	const { plan, showFeatures, setShowFeatures } = props;
+	const { plan, showFeatures, setShowFeatures, showVariants } = props;
 	const [ activeTooltipId, setActiveTooltipId ] = useState( '' );
 
 	const isMonthlyPlan = plan ? isMonthly( plan.getStoreSlug() ) : false;
@@ -91,12 +92,16 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 							) ) }
 						</>
 					) }
-					<li className={ clsx( 'import__upgrade-plan-feature logo' ) }>
-						<strong>{ __( 'Storage' ) }</strong>
-					</li>
-					<li className={ clsx( 'import__upgrade-plan-feature' ) }>
-						<Badge type="info">{ storageFeatureTitle }</Badge>
-					</li>
+					{ ! showVariants && (
+						<>
+							<li className={ clsx( 'import__upgrade-plan-feature logo' ) }>
+								<strong>{ __( 'Storage' ) }</strong>
+							</li>
+							<li className={ clsx( 'import__upgrade-plan-feature' ) }>
+								<Badge type="info">{ storageFeatureTitle }</Badge>
+							</li>
+						</>
+					) }
 				</>
 			) }
 		</ul>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index c78845f5d1694..5546465738f5b 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -56,6 +56,10 @@
 	.import__upgrade-plan .import__upgrade-plan-details {
 		margin-bottom: 0;
 
+		.import__details-list li {
+			margin-bottom: 8px;
+		}
+
 		@media ( min-width: 1040px ) {
 			display: flex;
 			flex-direction: row;

From be5757e3b09a50ca47d49b4c113f0c6efc7001c3 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 12:15:14 -0500
Subject: [PATCH 31/49] Use styles to make first list item bold, tweaks to
 spacing

---
 client/blocks/importer/wordpress/upgrade-plan/style.scss | 6 ++++++
 .../wordpress/upgrade-plan/upgrade-plan-feature-list.tsx | 3 +--
 .../site-migration-upgrade-plan/style.scss               | 9 +++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/style.scss b/client/blocks/importer/wordpress/upgrade-plan/style.scss
index 0012eca13e74b..9a555f08661c4 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/style.scss
+++ b/client/blocks/importer/wordpress/upgrade-plan/style.scss
@@ -248,6 +248,12 @@ $business-plan-color: #7f54b3;
 
 		ul {
 			margin: 0;
+
+			li {
+				&:first-child {
+					font-weight: bold;
+				}
+			}
 		}
 
 		.import__upgrade-plan-feature.logo {
diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
index c9f90ff5a865c..d6a3714ef14ce 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
@@ -67,8 +67,7 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 								setActiveTooltipId={ setActiveTooltipId }
 								activeTooltipId={ activeTooltipId }
 							>
-								{ i === 0 && <strong>{ feature?.getTitle() }</strong> }
-								{ i > 0 && <span>{ feature?.getTitle() }</span> }
+								<span>{ feature?.getTitle() }</span>
 							</Plans2023Tooltip>
 						</li>
 					) ) }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 5546465738f5b..3c1c8cfbbbe6d 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -71,6 +71,10 @@
 				padding-bottom: 1.5rem;
 				gap: 0;
 
+				.import__upgrade-plan-cta {
+					margin-bottom: 0.5rem;
+				}
+
 				&:first-of-type .import__upgrade-plan-features-container {
 					border-right: 0;
 					border-top-right-radius: 0;
@@ -88,6 +92,7 @@
 					padding-bottom: 1.5rem;
 					margin-bottom: 0;
 					margin-top: 0;
+					gap: 1rem;
 				}
 
 				&:first-of-type .import__upgrade-plan-features-container,
@@ -107,6 +112,10 @@
 		font-size: 0.75rem;
 		margin-top: 1rem;
 
+		svg {
+			fill: var(--color-text-subtle);
+		}
+
 		@media ( min-width: 720px ) {
 			margin-top: 0;
 		}

From 93579aceb1da12aedff81b9443c614426f264958 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 12:21:36 -0500
Subject: [PATCH 32/49] No bold text for feature flag

---
 .../site-migration-upgrade-plan/style.scss         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 3c1c8cfbbbe6d..cf331aed9fdf7 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -104,6 +104,20 @@
 		}
 	}
 
+	.import__upgrade-plan-features-list {
+		flex-direction: column;
+
+		ul {
+			margin: 0;
+
+			li {
+				&:first-child {
+					font-weight: normal;
+				}
+			}
+		}
+	}
+
 	.import__upgrade-plan-refund-sub-text {
 		display: flex;
 		align-items: center;

From 872e05a2ff3763b3e1867273f57a140ef5f57dbb Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 12:44:41 -0500
Subject: [PATCH 33/49] Add refund tooltip

---
 .../upgrade-plan-feature-list.tsx             | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
index d6a3714ef14ce..dbd97e88706cc 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
@@ -4,6 +4,7 @@ import {
 	type WPComPlan,
 	getFeatureByKey,
 	isMonthly,
+	PLAN_BUSINESS_MONTHLY,
 } from '@automattic/calypso-products';
 import { Badge } from '@automattic/components';
 import { Plans2023Tooltip } from '@automattic/plans-grid-next';
@@ -46,6 +47,31 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 		? getFeatureByKey( storageFeature )?.getTitle()
 		: undefined;
 
+	const renderRefund = () => {
+		const title =
+			PLAN_BUSINESS_MONTHLY === plan?.getStoreSlug()
+				? __( 'Refundable within 7 days' )
+				: __( 'Refundable within 14 days' );
+
+		const description =
+			PLAN_BUSINESS_MONTHLY === plan?.getStoreSlug()
+				? __( 'Fully refundable within 7 days. No questions asked.' )
+				: __( 'Fully refundable within 14 days. No questions asked.' );
+
+		return (
+			<li className={ clsx( 'import__upgrade-plan-feature' ) }>
+				<Plans2023Tooltip
+					id="feature-refund"
+					text={ description }
+					setActiveTooltipId={ setActiveTooltipId }
+					activeTooltipId={ activeTooltipId }
+				>
+					<span>{ title }</span>
+				</Plans2023Tooltip>
+			</li>
+		);
+	};
+
 	return (
 		<ul className={ clsx( 'import__details-list' ) }>
 			{ ! showFeatures && (
@@ -72,6 +98,8 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 						</li>
 					) ) }
 
+					{ showVariants && renderRefund() }
+
 					{ jetpackFeatures && jetpackFeatures.length > 0 && (
 						<>
 							<li className={ clsx( 'import__upgrade-plan-feature logo' ) }>

From b55a7819ce944d6fc04905dbd1470e0753157460 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 12:46:57 -0500
Subject: [PATCH 34/49] Account for border width

---
 .../steps-repository/site-migration-upgrade-plan/style.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index cf331aed9fdf7..c492cac656af9 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -98,7 +98,7 @@
 				&:first-of-type .import__upgrade-plan-features-container,
 				&:last-of-type .import__upgrade-plan-features-container {
 					margin-bottom: 1.5rem;
-					margin-top: 2.6rem;
+					margin-top: calc( 2.6rem - 2px );
 				}
 			}
 		}

From 4d9b36c41a4955fbeec384b516ab50f28797c1c0 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 12:49:22 -0500
Subject: [PATCH 35/49] Update spacing under header

---
 .../steps-repository/site-migration-upgrade-plan/style.scss      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index c492cac656af9..bd694168a35d4 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -8,6 +8,7 @@
 	&.step-container .step-container__header {
 		margin-left: auto;
 		margin-right: auto;
+		margin-bottom: 1rem;
 		padding-left: 1rem;
 		padding-right: 1rem;
 		@media ( min-width: 720px ) {

From 7ffe981dd6529260778524d1f95daf50f068c28b Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 13:00:29 -0500
Subject: [PATCH 36/49] Fix title spacing

---
 .../steps-repository/site-migration-upgrade-plan/style.scss   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index bd694168a35d4..65b4e1609d31b 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -50,10 +50,6 @@
 		color: var(--color-text-subtle);
 	}
 
-	.import__upgrade-plan .import__upgrade-plan-header .plan-title {
-		margin-bottom: -0.5rem;
-	}
-
 	.import__upgrade-plan .import__upgrade-plan-details {
 		margin-bottom: 0;
 

From 1cf313230c790db6e47a7540c2e16d11ca07158e Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 13:22:22 -0500
Subject: [PATCH 37/49] Bold around days

---
 .../upgrade-plan/upgrade-plan-feature-list.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
index dbd97e88706cc..a9c1ef345c40d 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
@@ -11,6 +11,7 @@ import { Plans2023Tooltip } from '@automattic/plans-grid-next';
 import { chevronDown, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
 import React, { useState } from 'react';
 import JetpackLogo from 'calypso/components/jetpack-logo';
 
@@ -23,6 +24,7 @@ interface Props {
 
 export const UpgradePlanFeatureList = ( props: Props ) => {
 	const { __ } = useI18n();
+	const translate = useTranslate();
 	const { plan, showFeatures, setShowFeatures, showVariants } = props;
 	const [ activeTooltipId, setActiveTooltipId ] = useState( '' );
 
@@ -47,11 +49,19 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 		? getFeatureByKey( storageFeature )?.getTitle()
 		: undefined;
 
-	const renderRefund = () => {
+	const renderRefundTooltip = () => {
 		const title =
 			PLAN_BUSINESS_MONTHLY === plan?.getStoreSlug()
-				? __( 'Refundable within 7 days' )
-				: __( 'Refundable within 14 days' );
+				? translate( 'Refundable within {{strong}}7 days{{/strong}}', {
+						components: {
+							strong: <strong />,
+						},
+				  } )
+				: translate( 'Refundable within {{strong}}14 days{{/strong}}', {
+						components: {
+							strong: <strong />,
+						},
+				  } );
 
 		const description =
 			PLAN_BUSINESS_MONTHLY === plan?.getStoreSlug()
@@ -98,7 +108,7 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 						</li>
 					) ) }
 
-					{ showVariants && renderRefund() }
+					{ showVariants && renderRefundTooltip() }
 
 					{ jetpackFeatures && jetpackFeatures.length > 0 && (
 						<>

From d33fb0f4f1fd4cf78b993c60f16d6d844de3d00a Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 15:04:18 -0500
Subject: [PATCH 38/49] New strings for features

---
 .../upgrade-plan/upgrade-plan-details.tsx     | 24 ++++-----
 .../migration-plan-feature-list.tsx           | 14 ++++++
 .../migration-plan-features.tsx               | 50 +++++++++++++++++++
 3 files changed, 76 insertions(+), 12 deletions(-)
 create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
 create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index f3b21f03edf0a..cab0cef667654 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -18,6 +18,7 @@ import { type TranslateResult, useTranslate } from 'i18n-calypso';
 import { useState, useEffect, type PropsWithChildren } from 'react';
 import ButtonGroup from 'calypso/components/button-group';
 import { useSelectedPlanUpgradeMutation } from 'calypso/data/import-flow/use-selected-plan-upgrade';
+import { MigrationPlanFeatureList } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list';
 import { UpgradePlanDetailsProps } from './types';
 import { UpgradePlanFeatureList } from './upgrade-plan-feature-list';
 import { UpgradePlanHostingDetails } from './upgrade-plan-hosting-details';
@@ -291,12 +292,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 						</div>
 					</div>
 					<div className="import__upgrade-plan-features-list">
-						<UpgradePlanFeatureList
-							plan={ getPlan( planSlug ) }
-							showFeatures
-							setShowFeatures={ setShowFeatures }
-							showVariants={ showVariants }
-						/>
+						<MigrationPlanFeatureList planSlug={ planSlug } />
 					</div>
 				</div>
 			</div>
@@ -375,12 +371,16 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 						) }
 					</div>
 					<div className="import__upgrade-plan-features-list">
-						<UpgradePlanFeatureList
-							plan={ plan }
-							showFeatures={ showVariants ? true : showFeatures }
-							setShowFeatures={ setShowFeatures }
-							showVariants={ showVariants }
-						/>
+						{ ! showVariants ? (
+							<UpgradePlanFeatureList
+								plan={ plan }
+								showFeatures={ showVariants ? true : showFeatures }
+								setShowFeatures={ setShowFeatures }
+								showVariants={ showVariants }
+							/>
+						) : (
+							<MigrationPlanFeatureList planSlug={ selectedPlan } />
+						) }
 					</div>
 				</div>
 				{ ! showVariants && (
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
new file mode 100644
index 0000000000000..e17fa73c14553
--- /dev/null
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
@@ -0,0 +1,14 @@
+import { migrationPlanFeatures } from './migration-plan-features';
+import type { PlanSlug } from '@automattic/calypso-products';
+
+export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } ) => {
+	return (
+		<ul className="import__details-list">
+			{ migrationPlanFeatures[ planSlug ].map( ( feature: string ) => (
+				<li className="import__upgrade-plan-feature" key={ feature }>
+					{ feature }
+				</li>
+			) ) }
+		</ul>
+	);
+};
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
new file mode 100644
index 0000000000000..44e94f50ce1d9
--- /dev/null
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
@@ -0,0 +1,50 @@
+import {
+	PLAN_BUSINESS,
+	PLAN_BUSINESS_MONTHLY,
+	PLAN_BUSINESS_2_YEARS,
+} from '@automattic/calypso-products';
+import { __ } from '@wordpress/i18n';
+import type { PlanSlug } from '@automattic/calypso-products';
+
+const jetpackFeatures = [
+	__( 'In-depth site analytics dashboard' ),
+	__( 'SEO, marketing, and analytics tools' ),
+	__( 'Plugin auto-updates' ),
+	__( 'Real-time backups and one-click restores' ),
+];
+
+const businessFeatures = [
+	__( 'Unrestricted bandwidth and visitors' ),
+	__( 'Install plugins and themes' ),
+	__( 'SFTP/SSH, WP-CLI, Git tools' ),
+];
+
+export const migrationPlanFeatures: Record< PlanSlug, string[] > = {
+	[ PLAN_BUSINESS ]: [
+		__( '50% off your first year' ),
+		__( '39% annual savings' ),
+		__( 'Free domain for a year' ),
+		__( 'Free migration service' ),
+		__( 'Refundable within 14 days' ),
+		...businessFeatures,
+		...jetpackFeatures,
+	],
+	[ PLAN_BUSINESS_MONTHLY ]: [
+		__( 'No first year discount' ),
+		__( 'No annual savings' ),
+		__( 'No free domain' ),
+		__( 'Free migration service' ),
+		__( 'Refundable within 7 days' ),
+		...businessFeatures,
+		...jetpackFeatures,
+	],
+	[ PLAN_BUSINESS_2_YEARS ]: [
+		__( '50% off your first two years' ),
+		__( '52% annual savings' ),
+		__( 'Free domain for a year' ),
+		__( 'Free migration service' ),
+		__( 'Refundable within 14 days' ),
+		...businessFeatures,
+		...jetpackFeatures,
+	],
+};

From 08c33bd135793b9ba8cd109365217f513913b8ae Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 15:18:14 -0500
Subject: [PATCH 39/49] Separate Jetpack and WPcom features

---
 .../migration-plan-feature-list.tsx           | 12 +++-
 .../migration-plan-features.tsx               | 59 ++++++++++---------
 2 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
index e17fa73c14553..2e4d5282ac702 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
@@ -1,10 +1,18 @@
+import { JetpackLogo } from '@automattic/components';
 import { migrationPlanFeatures } from './migration-plan-features';
 import type { PlanSlug } from '@automattic/calypso-products';
-
 export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } ) => {
 	return (
 		<ul className="import__details-list">
-			{ migrationPlanFeatures[ planSlug ].map( ( feature: string ) => (
+			{ migrationPlanFeatures[ 'wpcomFeatures' ][ planSlug ]?.map( ( feature: string ) => (
+				<li className="import__upgrade-plan-feature" key={ feature }>
+					{ feature }
+				</li>
+			) ) }
+			<li className="import__upgrade-plan-feature logo">
+				<JetpackLogo size={ 16 } />
+			</li>
+			{ migrationPlanFeatures[ 'jetpackFeatures' ].map( ( feature: string ) => (
 				<li className="import__upgrade-plan-feature" key={ feature }>
 					{ feature }
 				</li>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
index 44e94f50ce1d9..d6c59798c19f0 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
@@ -19,32 +19,35 @@ const businessFeatures = [
 	__( 'SFTP/SSH, WP-CLI, Git tools' ),
 ];
 
-export const migrationPlanFeatures: Record< PlanSlug, string[] > = {
-	[ PLAN_BUSINESS ]: [
-		__( '50% off your first year' ),
-		__( '39% annual savings' ),
-		__( 'Free domain for a year' ),
-		__( 'Free migration service' ),
-		__( 'Refundable within 14 days' ),
-		...businessFeatures,
-		...jetpackFeatures,
-	],
-	[ PLAN_BUSINESS_MONTHLY ]: [
-		__( 'No first year discount' ),
-		__( 'No annual savings' ),
-		__( 'No free domain' ),
-		__( 'Free migration service' ),
-		__( 'Refundable within 7 days' ),
-		...businessFeatures,
-		...jetpackFeatures,
-	],
-	[ PLAN_BUSINESS_2_YEARS ]: [
-		__( '50% off your first two years' ),
-		__( '52% annual savings' ),
-		__( 'Free domain for a year' ),
-		__( 'Free migration service' ),
-		__( 'Refundable within 14 days' ),
-		...businessFeatures,
-		...jetpackFeatures,
-	],
+export const migrationPlanFeatures: {
+	wpcomFeatures: Partial< Record< PlanSlug, string[] > >;
+	jetpackFeatures: string[];
+} = {
+	wpcomFeatures: {
+		[ PLAN_BUSINESS ]: [
+			__( '50% off your first year' ),
+			__( '39% annual savings' ),
+			__( 'Free domain for a year' ),
+			__( 'Free migration service' ),
+			__( 'Refundable within 14 days' ),
+			...businessFeatures,
+		],
+		[ PLAN_BUSINESS_MONTHLY ]: [
+			__( 'No first year discount' ),
+			__( 'No annual savings' ),
+			__( 'No free domain' ),
+			__( 'Free migration service' ),
+			__( 'Refundable within 7 days' ),
+			...businessFeatures,
+		],
+		[ PLAN_BUSINESS_2_YEARS ]: [
+			__( '50% off your first two years' ),
+			__( '52% annual savings' ),
+			__( 'Free domain for a year' ),
+			__( 'Free migration service' ),
+			__( 'Refundable within 14 days' ),
+			...businessFeatures,
+		],
+	},
+	jetpackFeatures: [ ...jetpackFeatures ],
 };

From c65064624646a74f51aae46dd5f9fb6e45755c3e Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 15:24:12 -0500
Subject: [PATCH 40/49] Fix jetpack logo color

---
 .../migration-plan-feature-list.tsx                            | 2 +-
 .../steps-repository/site-migration-upgrade-plan/style.scss    | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
index 2e4d5282ac702..5373a3eba4761 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
@@ -10,7 +10,7 @@ export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } )
 				</li>
 			) ) }
 			<li className="import__upgrade-plan-feature logo">
-				<JetpackLogo size={ 16 } />
+				<JetpackLogo size={ 24 } />
 			</li>
 			{ migrationPlanFeatures[ 'jetpackFeatures' ].map( ( feature: string ) => (
 				<li className="import__upgrade-plan-feature" key={ feature }>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 65b4e1609d31b..f6877366d1c35 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -113,6 +113,9 @@
 				}
 			}
 		}
+		.import__upgrade-plan-feature.logo svg {
+			fill: var(--studio-jetpack-green-40);
+		}
 	}
 
 	.import__upgrade-plan-refund-sub-text {

From 8c1c32f3b2daeb2ecbc65061cf350fbcdbba685b Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 15:26:28 -0500
Subject: [PATCH 41/49] Logo spacing

---
 .../site-migration-upgrade-plan/style.scss                | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index f6877366d1c35..58ef194f83ec2 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -113,8 +113,12 @@
 				}
 			}
 		}
-		.import__upgrade-plan-feature.logo svg {
-			fill: var(--studio-jetpack-green-40);
+		.import__upgrade-plan-feature.logo {
+			margin-top: .75rem;
+
+			svg {
+				fill: var(--studio-jetpack-green-40);
+			}
 		}
 	}
 

From 1f1bd56c1c054498a3b9b47fab6b5d84d564b6b7 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 15:50:25 -0500
Subject: [PATCH 42/49] Move so we can take full advantage of hooks in
 translate, add bold text

---
 .../migration-plan-feature-list.tsx           | 95 +++++++++++++++++--
 .../migration-plan-features.tsx               | 53 -----------
 .../site-migration-upgrade-plan/style.scss    |  4 +-
 3 files changed, 90 insertions(+), 62 deletions(-)
 delete mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
index 5373a3eba4761..67717ecd1b71d 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
@@ -1,19 +1,98 @@
+import {
+	PLAN_BUSINESS,
+	PLAN_BUSINESS_MONTHLY,
+	PLAN_BUSINESS_2_YEARS,
+} from '@automattic/calypso-products';
 import { JetpackLogo } from '@automattic/components';
-import { migrationPlanFeatures } from './migration-plan-features';
+import { useTranslate } from 'i18n-calypso';
 import type { PlanSlug } from '@automattic/calypso-products';
+import type { ReactNode } from 'react';
+
 export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } ) => {
+	const translate = useTranslate();
+	const jetpackFeatures = [
+		translate( 'In-depth site analytics dashboard' ),
+		translate( 'SEO, marketing, and analytics tools' ),
+		translate( 'Plugin auto-updates' ),
+		translate( 'Real-time backups and one-click restores' ),
+	];
+
+	const businessFeatures = [
+		translate( 'Unrestricted bandwidth and visitors' ),
+		translate( 'Install plugins and themes' ),
+		translate( 'SFTP/SSH, WP-CLI, Git tools' ),
+	];
+
+	const migrationPlanFeatures: {
+		wpcomFeatures: Partial< Record< PlanSlug, ReactNode[] > >;
+		jetpackFeatures: ReactNode[];
+	} = {
+		wpcomFeatures: {
+			[ PLAN_BUSINESS ]: [
+				translate( '{{strong}}50% off{{/strong}} your first year', {
+					components: { strong: <strong /> },
+				} ),
+				translate( '{{strong}}39%{{/strong}} annual savings', {
+					components: { strong: <strong /> },
+				} ),
+				translate( '{{strong}}Free{{/strong}} domain for a year', {
+					components: { strong: <strong /> },
+				} ),
+				translate( '{{strong}}Free{{/strong}} migration service', {
+					components: { strong: <strong /> },
+				} ),
+				translate( 'Refundable within {{strong}}14 days{{/strong}}', {
+					components: { strong: <strong /> },
+				} ),
+				...businessFeatures,
+			],
+			[ PLAN_BUSINESS_MONTHLY ]: [
+				translate( 'No first year discount' ),
+				translate( 'No annual savings' ),
+				translate( 'No free domain' ),
+				translate( '{{strong}}Free{{/strong}} migration service', {
+					components: { strong: <strong /> },
+				} ),
+				translate( 'Refundable within {{strong}}7 days{{/strong}}', {
+					components: { strong: <strong /> },
+				} ),
+				...businessFeatures,
+			],
+			[ PLAN_BUSINESS_2_YEARS ]: [
+				translate( '{{strong}}50% off{{/strong}} your first two years', {
+					components: { strong: <strong /> },
+				} ),
+				translate( '{{strong}}52%{{/strong}} annual savings', {
+					components: { strong: <strong /> },
+				} ),
+				translate( '{{strong}}Free{{/strong}} domain for a year', {
+					components: { strong: <strong /> },
+				} ),
+				translate( '{{strong}}Free{{/strong}} migration service', {
+					components: { strong: <strong /> },
+				} ),
+				translate( 'Refundable within {{strong}}14 days{{/strong}}', {
+					components: { strong: <strong /> },
+				} ),
+				...businessFeatures,
+			],
+		},
+		jetpackFeatures: [ ...jetpackFeatures ],
+	};
 	return (
 		<ul className="import__details-list">
-			{ migrationPlanFeatures[ 'wpcomFeatures' ][ planSlug ]?.map( ( feature: string ) => (
-				<li className="import__upgrade-plan-feature" key={ feature }>
-					{ feature }
-				</li>
-			) ) }
+			{ migrationPlanFeatures[ 'wpcomFeatures' ][ planSlug ]?.map(
+				( feature: ReactNode, index: number ) => (
+					<li key={ index } className="import__upgrade-plan-feature">
+						{ feature }
+					</li>
+				)
+			) }
 			<li className="import__upgrade-plan-feature logo">
 				<JetpackLogo size={ 24 } />
 			</li>
-			{ migrationPlanFeatures[ 'jetpackFeatures' ].map( ( feature: string ) => (
-				<li className="import__upgrade-plan-feature" key={ feature }>
+			{ migrationPlanFeatures[ 'jetpackFeatures' ].map( ( feature: ReactNode, index: number ) => (
+				<li key={ index } className="import__upgrade-plan-feature">
 					{ feature }
 				</li>
 			) ) }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
deleted file mode 100644
index d6c59798c19f0..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-features.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {
-	PLAN_BUSINESS,
-	PLAN_BUSINESS_MONTHLY,
-	PLAN_BUSINESS_2_YEARS,
-} from '@automattic/calypso-products';
-import { __ } from '@wordpress/i18n';
-import type { PlanSlug } from '@automattic/calypso-products';
-
-const jetpackFeatures = [
-	__( 'In-depth site analytics dashboard' ),
-	__( 'SEO, marketing, and analytics tools' ),
-	__( 'Plugin auto-updates' ),
-	__( 'Real-time backups and one-click restores' ),
-];
-
-const businessFeatures = [
-	__( 'Unrestricted bandwidth and visitors' ),
-	__( 'Install plugins and themes' ),
-	__( 'SFTP/SSH, WP-CLI, Git tools' ),
-];
-
-export const migrationPlanFeatures: {
-	wpcomFeatures: Partial< Record< PlanSlug, string[] > >;
-	jetpackFeatures: string[];
-} = {
-	wpcomFeatures: {
-		[ PLAN_BUSINESS ]: [
-			__( '50% off your first year' ),
-			__( '39% annual savings' ),
-			__( 'Free domain for a year' ),
-			__( 'Free migration service' ),
-			__( 'Refundable within 14 days' ),
-			...businessFeatures,
-		],
-		[ PLAN_BUSINESS_MONTHLY ]: [
-			__( 'No first year discount' ),
-			__( 'No annual savings' ),
-			__( 'No free domain' ),
-			__( 'Free migration service' ),
-			__( 'Refundable within 7 days' ),
-			...businessFeatures,
-		],
-		[ PLAN_BUSINESS_2_YEARS ]: [
-			__( '50% off your first two years' ),
-			__( '52% annual savings' ),
-			__( 'Free domain for a year' ),
-			__( 'Free migration service' ),
-			__( 'Refundable within 14 days' ),
-			...businessFeatures,
-		],
-	},
-	jetpackFeatures: [ ...jetpackFeatures ],
-};
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 58ef194f83ec2..e706dbd212757 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -104,10 +104,12 @@
 	.import__upgrade-plan-features-list {
 		flex-direction: column;
 
-		ul {
+		.import__details-list {
+			list-style: none;
 			margin: 0;
 
 			li {
+				display: list-item;
 				&:first-child {
 					font-weight: normal;
 				}

From bd62be1d24b4f7609c9701e26794006578c757bb Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 15:51:10 -0500
Subject: [PATCH 43/49] Revert changes to plan feature list

---
 .../upgrade-plan-feature-list.tsx             | 60 +++----------------
 1 file changed, 9 insertions(+), 51 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
index a9c1ef345c40d..a144ca33a8152 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-feature-list.tsx
@@ -4,14 +4,12 @@ import {
 	type WPComPlan,
 	getFeatureByKey,
 	isMonthly,
-	PLAN_BUSINESS_MONTHLY,
 } from '@automattic/calypso-products';
 import { Badge } from '@automattic/components';
 import { Plans2023Tooltip } from '@automattic/plans-grid-next';
 import { chevronDown, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
 import React, { useState } from 'react';
 import JetpackLogo from 'calypso/components/jetpack-logo';
 
@@ -19,13 +17,11 @@ interface Props {
 	plan: Plan | JetpackPlan | WPComPlan | undefined;
 	showFeatures: boolean;
 	setShowFeatures: ( showFeatures: boolean ) => void;
-	showVariants?: boolean;
 }
 
 export const UpgradePlanFeatureList = ( props: Props ) => {
 	const { __ } = useI18n();
-	const translate = useTranslate();
-	const { plan, showFeatures, setShowFeatures, showVariants } = props;
+	const { plan, showFeatures, setShowFeatures } = props;
 	const [ activeTooltipId, setActiveTooltipId ] = useState( '' );
 
 	const isMonthlyPlan = plan ? isMonthly( plan.getStoreSlug() ) : false;
@@ -49,39 +45,6 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 		? getFeatureByKey( storageFeature )?.getTitle()
 		: undefined;
 
-	const renderRefundTooltip = () => {
-		const title =
-			PLAN_BUSINESS_MONTHLY === plan?.getStoreSlug()
-				? translate( 'Refundable within {{strong}}7 days{{/strong}}', {
-						components: {
-							strong: <strong />,
-						},
-				  } )
-				: translate( 'Refundable within {{strong}}14 days{{/strong}}', {
-						components: {
-							strong: <strong />,
-						},
-				  } );
-
-		const description =
-			PLAN_BUSINESS_MONTHLY === plan?.getStoreSlug()
-				? __( 'Fully refundable within 7 days. No questions asked.' )
-				: __( 'Fully refundable within 14 days. No questions asked.' );
-
-		return (
-			<li className={ clsx( 'import__upgrade-plan-feature' ) }>
-				<Plans2023Tooltip
-					id="feature-refund"
-					text={ description }
-					setActiveTooltipId={ setActiveTooltipId }
-					activeTooltipId={ activeTooltipId }
-				>
-					<span>{ title }</span>
-				</Plans2023Tooltip>
-			</li>
-		);
-	};
-
 	return (
 		<ul className={ clsx( 'import__details-list' ) }>
 			{ ! showFeatures && (
@@ -103,13 +66,12 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 								setActiveTooltipId={ setActiveTooltipId }
 								activeTooltipId={ activeTooltipId }
 							>
-								<span>{ feature?.getTitle() }</span>
+								{ i === 0 && <strong>{ feature?.getTitle() }</strong> }
+								{ i > 0 && <span>{ feature?.getTitle() }</span> }
 							</Plans2023Tooltip>
 						</li>
 					) ) }
 
-					{ showVariants && renderRefundTooltip() }
-
 					{ jetpackFeatures && jetpackFeatures.length > 0 && (
 						<>
 							<li className={ clsx( 'import__upgrade-plan-feature logo' ) }>
@@ -129,16 +91,12 @@ export const UpgradePlanFeatureList = ( props: Props ) => {
 							) ) }
 						</>
 					) }
-					{ ! showVariants && (
-						<>
-							<li className={ clsx( 'import__upgrade-plan-feature logo' ) }>
-								<strong>{ __( 'Storage' ) }</strong>
-							</li>
-							<li className={ clsx( 'import__upgrade-plan-feature' ) }>
-								<Badge type="info">{ storageFeatureTitle }</Badge>
-							</li>
-						</>
-					) }
+					<li className={ clsx( 'import__upgrade-plan-feature logo' ) }>
+						<strong>{ __( 'Storage' ) }</strong>
+					</li>
+					<li className={ clsx( 'import__upgrade-plan-feature' ) }>
+						<Badge type="info">{ storageFeatureTitle }</Badge>
+					</li>
 				</>
 			) }
 		</ul>

From ea30fafdd1a46d2493dbf1cd195984b6ef16485a Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Thu, 5 Dec 2024 16:05:41 -0500
Subject: [PATCH 44/49] Remove unused prop

---
 .../importer/wordpress/upgrade-plan/upgrade-plan-details.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index cab0cef667654..20eb569501d90 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -376,7 +376,6 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 								plan={ plan }
 								showFeatures={ showVariants ? true : showFeatures }
 								setShowFeatures={ setShowFeatures }
-								showVariants={ showVariants }
 							/>
 						) : (
 							<MigrationPlanFeatureList planSlug={ selectedPlan } />

From 71a61568819c1c19b81cfb53e09354e7f2bc0b71 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Mon, 9 Dec 2024 10:04:02 -0500
Subject: [PATCH 45/49] Fix button colors

---
 .../steps-repository/site-migration-upgrade-plan/style.scss  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index e706dbd212757..5da9e51113ede 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -44,6 +44,11 @@
 	.import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
 		background-color: var(--studio-wordpress-blue-50) !important;
 		border-color: var(--studio-wordpress-blue-50);
+		color: var(--color-text-inverted);
+	}
+	.import__upgrade-plan .import__upgrade-plan-cta button.button:focus {
+		box-shadow: 0 0 0 2px var(--studio-white),
+			0 0 0 4px var(--studio-wordpress-blue-50) !important;
 	}
 	.import__upgrade-plan .import__upgrade-plan-refund-sub-text,
 	.import__upgrade-plan .import__upgrade-plan-features-list .import__upgrade-plan-feature-more button {

From a65521cc09fc8ab3d704c519e031996aadbd662c Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Mon, 9 Dec 2024 11:30:12 -0500
Subject: [PATCH 46/49] Alignment issues

---
 .../steps-repository/site-migration-upgrade-plan/style.scss   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index 5da9e51113ede..bbe67b9cabcb3 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -43,7 +43,7 @@
 	}
 	.import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
 		background-color: var(--studio-wordpress-blue-50) !important;
-		border-color: var(--studio-wordpress-blue-50);
+		border-color: var(--studio-wordpress-blue-50) !important;
 		color: var(--color-text-inverted);
 	}
 	.import__upgrade-plan .import__upgrade-plan-cta button.button:focus {
@@ -100,7 +100,7 @@
 				&:first-of-type .import__upgrade-plan-features-container,
 				&:last-of-type .import__upgrade-plan-features-container {
 					margin-bottom: 1.5rem;
-					margin-top: calc( 2.6rem - 2px );
+					margin-top: 41px;
 				}
 			}
 		}

From 3fdf8cd4a856706e528e001b301cbd339ae13e38 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Mon, 9 Dec 2024 11:51:37 -0500
Subject: [PATCH 47/49] Fix alignment issues

---
 .../steps-repository/site-migration-upgrade-plan/style.scss    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index bbe67b9cabcb3..e3b1f992e1d90 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -43,8 +43,9 @@
 	}
 	.import__upgrade-plan .import__upgrade-plan-cta button.button.is-primary {
 		background-color: var(--studio-wordpress-blue-50) !important;
-		border-color: var(--studio-wordpress-blue-50) !important;
+		border: 1px solid var(--studio-wordpress-blue-50) !important;
 		color: var(--color-text-inverted);
+		height: 42px;
 	}
 	.import__upgrade-plan .import__upgrade-plan-cta button.button:focus {
 		box-shadow: 0 0 0 2px var(--studio-white),

From 184d0491cbbfa3caf8903867610f59f53961e6b9 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Mon, 9 Dec 2024 16:48:00 -0500
Subject: [PATCH 48/49] Update loader colors to gray

---
 .../steps-repository/site-migration-upgrade-plan/style.scss   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
index e3b1f992e1d90..1d56f7249f0a0 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/style.scss
@@ -19,12 +19,12 @@
 	}
 	.import-upgrade-plan-skeleton {
 		&.import-upgrade-plan-skeleton--light-highlight {
-			background-color: var(--studio-wordpress-blue-50);
+			background-color: var(--studio-gray-10);
 			opacity: 0.2;
 		}
 
 		&.import-upgrade-plan-skeleton--dark-highlight {
-			background-color: var(--studio-wordpress-blue-50);
+			background-color: var(--studio-gray-20);
 			opacity: 0.5;
 		}
 	}

From 6ef486d858f1c2ba4637d2b5afaa7b639c56e614 Mon Sep 17 00:00:00 2001
From: Caroline Moore <calobee@gmail.com>
Date: Tue, 10 Dec 2024 11:49:19 -0500
Subject: [PATCH 49/49] Calculate percentage rather than hard-coding,
 consolidate features

---
 .../upgrade-plan/upgrade-plan-details.tsx     | 12 +++-
 .../migration-plan-feature-list.tsx           | 68 ++++++++++++-------
 2 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
index 20eb569501d90..61e9cc6560cce 100644
--- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
+++ b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx
@@ -292,7 +292,11 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 						</div>
 					</div>
 					<div className="import__upgrade-plan-features-list">
-						<MigrationPlanFeatureList planSlug={ planSlug } />
+						<MigrationPlanFeatureList
+							planSlug={ planSlug }
+							fullMonthlyPrice={ pricing?.[ PLAN_BUSINESS_MONTHLY ]?.originalPrice?.monthly }
+							pricing={ pricing?.[ planSlug ] }
+						/>
 					</div>
 				</div>
 			</div>
@@ -378,7 +382,11 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 								setShowFeatures={ setShowFeatures }
 							/>
 						) : (
-							<MigrationPlanFeatureList planSlug={ selectedPlan } />
+							<MigrationPlanFeatureList
+								planSlug={ selectedPlan }
+								fullMonthlyPrice={ pricing?.[ PLAN_BUSINESS_MONTHLY ]?.originalPrice?.monthly }
+								pricing={ pricing?.[ selectedPlan ] }
+							/>
 						) }
 					</div>
 				</div>
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
index 67717ecd1b71d..dfce6ec6a3d4e 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-upgrade-plan/migration-plan-feature-list.tsx
@@ -6,10 +6,31 @@ import {
 import { JetpackLogo } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import type { PlanSlug } from '@automattic/calypso-products';
+import type { PricingMetaForGridPlan } from '@automattic/data-stores';
 import type { ReactNode } from 'react';
 
-export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } ) => {
+export const MigrationPlanFeatureList = ( {
+	planSlug,
+	fullMonthlyPrice,
+	pricing,
+}: {
+	planSlug: PlanSlug;
+	fullMonthlyPrice?: number | null;
+	pricing?: PricingMetaForGridPlan;
+} ) => {
 	const translate = useTranslate();
+	if ( ! pricing || ! fullMonthlyPrice ) {
+		return null;
+	}
+
+	const selectedPlanPricing = pricing.originalPrice?.monthly;
+
+	let percentageString = '0%';
+	if ( fullMonthlyPrice && selectedPlanPricing ) {
+		percentageString =
+			Math.floor( ( ( fullMonthlyPrice - selectedPlanPricing ) / fullMonthlyPrice ) * 100 ) + '%';
+	}
+
 	const jetpackFeatures = [
 		translate( 'In-depth site analytics dashboard' ),
 		translate( 'SEO, marketing, and analytics tools' ),
@@ -23,6 +44,25 @@ export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } )
 		translate( 'SFTP/SSH, WP-CLI, Git tools' ),
 	];
 
+	const commonDiscountedFeatures = [
+		// translators: %(percentage)s is the percentage of annual savings formatted like '50%'
+		translate( '{{strong}}%(percentage)s{{/strong}} annual savings', {
+			args: {
+				percentage: percentageString,
+			},
+			components: { strong: <strong /> },
+		} ),
+		translate( '{{strong}}Free{{/strong}} domain for a year', {
+			components: { strong: <strong /> },
+		} ),
+		translate( '{{strong}}Free{{/strong}} migration service', {
+			components: { strong: <strong /> },
+		} ),
+		translate( 'Refundable within {{strong}}14 days{{/strong}}', {
+			components: { strong: <strong /> },
+		} ),
+	];
+
 	const migrationPlanFeatures: {
 		wpcomFeatures: Partial< Record< PlanSlug, ReactNode[] > >;
 		jetpackFeatures: ReactNode[];
@@ -32,18 +72,7 @@ export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } )
 				translate( '{{strong}}50% off{{/strong}} your first year', {
 					components: { strong: <strong /> },
 				} ),
-				translate( '{{strong}}39%{{/strong}} annual savings', {
-					components: { strong: <strong /> },
-				} ),
-				translate( '{{strong}}Free{{/strong}} domain for a year', {
-					components: { strong: <strong /> },
-				} ),
-				translate( '{{strong}}Free{{/strong}} migration service', {
-					components: { strong: <strong /> },
-				} ),
-				translate( 'Refundable within {{strong}}14 days{{/strong}}', {
-					components: { strong: <strong /> },
-				} ),
+				...commonDiscountedFeatures,
 				...businessFeatures,
 			],
 			[ PLAN_BUSINESS_MONTHLY ]: [
@@ -62,18 +91,7 @@ export const MigrationPlanFeatureList = ( { planSlug }: { planSlug: PlanSlug } )
 				translate( '{{strong}}50% off{{/strong}} your first two years', {
 					components: { strong: <strong /> },
 				} ),
-				translate( '{{strong}}52%{{/strong}} annual savings', {
-					components: { strong: <strong /> },
-				} ),
-				translate( '{{strong}}Free{{/strong}} domain for a year', {
-					components: { strong: <strong /> },
-				} ),
-				translate( '{{strong}}Free{{/strong}} migration service', {
-					components: { strong: <strong /> },
-				} ),
-				translate( 'Refundable within {{strong}}14 days{{/strong}}', {
-					components: { strong: <strong /> },
-				} ),
+				...commonDiscountedFeatures,
 				...businessFeatures,
 			],
 		},