Replace overview when site is with a pending migration (#95497)

* Fix bottom spacing in the content Since the parent has an overflow hidden and a padding bottom it wasn't being respected. * Extract hero components * Move type to follow the same standard of the others * Add key to the loop * Extract grid component * Add functions to get migration status and migration type * Tweak styles for when it does not have a link * Add migration overview variation * Temporarily add check for pending When we implement the started status, we can also use the MigrationOverview, and remove this conditional. * Redirect users to the proper step * Redirect users to the proper step when the user didn't buy a plan yet * Add query string to trigger the calypso_signup_start event * Add tests for the links * Join imports * Extract canInstallPlugins logic * Improve check to match what is checked in the flows * Fix tests * Fix type to get from relative path * Fix DYI URL * Remove not used conditional * Update tests to also mock the canInstallPlugins Similar to the other mocks in these tests. * Remove missed import after rebase
Automattic · Oct 25, 2024 · 06d23d9 · 06d23d9
1 parent 8db0a3c
commit 06d23d9
Show file tree

Hide file tree

Showing 15 changed files with 420 additions and 87 deletions.
diff --git a/client/components/hosting-card/index.tsx b/client/components/hosting-card/index.tsx
@@ -8,6 +8,7 @@ interface HostingCardProps {
 	className?: string;
 	headingId?: string;
 	title?: string;
+	inGrid?: boolean;
 	children: ReactNode;
 }
 
@@ -22,9 +23,19 @@ interface HostingCardDescriptionProps {
 	children: string | ReactNode;
 }
 
-export function HostingCard( { className, headingId, title, children }: HostingCardProps ) {
+interface HostingCardLinkButtonProps {
+	to: string;
+	children: string | ReactNode;
+	hideOnMobile?: boolean;
+}
+
+interface HostingCardGridProps {
+	children: ReactNode;
+}
+
+export function HostingCard( { className, headingId, title, inGrid, children }: HostingCardProps ) {
 	return (
-		<Card className={ clsx( 'hosting-card', className ) }>
+		<Card className={ clsx( 'hosting-card', className, { 'hosting-card--in-grid': inGrid } ) }>
 			{ title && (
 				<h3 id={ headingId } className="hosting-card__title">
 					{ title }
@@ -52,12 +63,6 @@ export function HostingCardDescription( { children }: HostingCardDescriptionProp
 	return <p className="hosting-card__description">{ children }</p>;
 }
 
-interface HostingCardLinkButtonProps {
-	to: string;
-	children: string | ReactNode;
-	hideOnMobile?: boolean;
-}
-
 export function HostingCardLinkButton( {
 	to,
 	children,
@@ -75,3 +80,7 @@ export function HostingCardLinkButton( {
 		</Button>
 	);
 }
+
+export function HostingCardGrid( props: HostingCardGridProps ) {
+	return <div className="hosting-card-grid">{ props.children }</div>;
+}
diff --git a/client/components/hosting-card/style.scss b/client/components/hosting-card/style.scss
@@ -1,5 +1,6 @@
 @import "@automattic/components/src/styles/typography";
 @import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
 
 .hosting-card {
 	width: 100%;
@@ -22,6 +23,27 @@
 	.form-select {
 		font-size: rem(14px) !important;
 	}
+
+	/* Styles for when it's inside a grid */
+	&--in-grid {
+		> p {
+			font-size: rem(14px);
+			margin-bottom: 0;
+			color: var(--color-text-subtle);
+			flex-grow: 1;
+		}
+
+		> a {
+			display: inline-block;
+			font-size: rem(13px);
+			font-weight: 400;
+			line-height: 16px;
+		}
+
+		> p + a {
+			margin-top: 20px;
+		}
+	}
 }
 
 h3.hosting-card__title {
@@ -58,3 +80,16 @@ a.hosting-card__link-button {
 		display: none;
 	}
 }
+
+.hosting-card-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-column-gap: 16px;
+	grid-row-gap: 16px;
+	padding: 0 20px;
+
+	@include break-medium {
+		grid-template-columns: 1fr 1fr 1fr;
+		padding: 0;
+	}
+}
diff --git a/client/components/hosting-hero/index.tsx b/client/components/hosting-hero/index.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@wordpress/components';
+import type { ReactNode, ComponentProps } from 'react';
+
+import './style.scss';
+
+interface HostingHeroProps {
+	children: ReactNode;
+}
+
+export function HostingHero( { children }: HostingHeroProps ) {
+	return <div className="hosting-hero">{ children }</div>;
+}
+
+export function HostingHeroButton( props: ComponentProps< typeof Button > ) {
+	return <Button variant="primary" className="hosting-hero-button" { ...props } />;
+}
diff --git a/client/components/hosting-hero/style.scss b/client/components/hosting-hero/style.scss
@@ -0,0 +1,27 @@
+@import "@automattic/components/src/styles/typography";
+
+.hosting-hero {
+	grid-column: 1 / -1;
+	text-align: center;
+	margin-bottom: 70px;
+
+	> h1 {
+		margin-top: 30px;
+		font-style: normal;
+		font-weight: 500;
+		font-size: rem(36px);
+		font-family: Recoleta, sans-serif;
+	}
+	> p {
+		font-style: normal;
+		font-weight: 400;
+		font-size: rem(18px);
+	}
+}
+
+.hosting-hero-button {
+	margin: 0 5px;
+	padding: 10px 14px;
+	font-size: rem(14px);
+	height: 40px;
+}
diff --git a/client/hosting/hosting-features/components/hosting-features.tsx b/client/hosting/hosting-features/components/hosting-features.tsx
@@ -2,13 +2,14 @@ import { FEATURE_SFTP, getPlan, PLAN_BUSINESS } from '@automattic/calypso-produc
 import page from '@automattic/calypso-router';
 import { Dialog } from '@automattic/components';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
-import { Button, Spinner } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { addQueryArgs } from '@wordpress/url';
 import { translate } from 'i18n-calypso';
 import { useRef, useState, useEffect } from 'react';
 import { AnyAction } from 'redux';
 import EligibilityWarnings from 'calypso/blocks/eligibility-warnings';
-import { HostingCard } from 'calypso/components/hosting-card';
+import { HostingCard, HostingCardGrid } from 'calypso/components/hosting-card';
+import { HostingHero, HostingHeroButton } from 'calypso/components/hosting-hero';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import { useSiteTransferStatusQuery } from 'calypso/landing/stepper/hooks/use-site-transfer/query';
 import { useSelector, useDispatch } from 'calypso/state';
@@ -28,7 +29,7 @@ type PromoCardProps = {
 };
 
 const PromoCard = ( { title, text, supportContext }: PromoCardProps ) => (
-	<HostingCard className="hosting-features__card" title={ title }>
+	<HostingCard inGrid className="hosting-features__card" title={ title }>
 		<p>{ text }</p>
 		{ translate( '{{supportLink}}Learn more{{/supportLink}}', {
 			components: {
@@ -204,9 +205,7 @@ const HostingFeatures = () => {
 		description = activateDescription;
 		buttons = (
 			<>
-				<Button
-					variant="primary"
-					className="hosting-features__button"
+				<HostingHeroButton
 					onClick={ () => {
 						if ( showActivationButton ) {
 							dispatch( recordTracksEvent( 'calypso_hosting_features_activate_click' ) );
@@ -215,7 +214,7 @@ const HostingFeatures = () => {
 					} }
 				>
 					{ translate( 'Activate now' ) }
-				</Button>
+				</HostingHeroButton>
 
 				<Dialog
 					additionalClassNames="plugin-details-cta__dialog-content"
@@ -239,36 +238,35 @@ const HostingFeatures = () => {
 		title = unlockTitle;
 		description = unlockDescription;
 		buttons = (
-			<Button
-				variant="primary"
-				className="hosting-features__button"
+			<HostingHeroButton
 				href={ upgradeLink }
 				onClick={ () =>
 					dispatch( recordTracksEvent( 'calypso_hosting_features_upgrade_plan_click' ) )
 				}
 			>
 				{ translate( 'Upgrade now' ) }
-			</Button>
+			</HostingHeroButton>
 		);
 	}
 
 	return (
 		<div className="hosting-features">
-			<div className="hosting-features__hero">
+			<HostingHero>
 				{ isTransferInProgress && <Spinner className="hosting-features__content-spinner" /> }
 				<h1>{ title }</h1>
 				<p>{ description }</p>
 				{ buttons }
-			</div>
-			<div className="hosting-features__cards">
+			</HostingHero>
+			<HostingCardGrid>
 				{ promoCards.map( ( card ) => (
 					<PromoCard
+						key={ card.title }
 						title={ card.title }
 						text={ card.text }
 						supportContext={ card.supportContext }
 					/>
 				) ) }
-			</div>
+			</HostingCardGrid>
 		</div>
 	);
 };

diff --git a/client/hosting/hosting-features/components/style.scss b/client/hosting/hosting-features/components/style.scss
@@ -2,61 +2,9 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
-.hosting-features__hero {
-	grid-column: 1 / -1;
-	text-align: center;
-	margin-bottom: 70px;
-
-	> h1 {
-		margin-top: 30px;
-		font-style: normal;
-		font-weight: 500;
-		font-size: rem(36px);
-		font-family: Recoleta, sans-serif;
-	}
-	> p {
-		font-style: normal;
-		font-weight: 400;
-		font-size: rem(18px);
-	}
-	.hosting-features__button {
-		margin: 0 5px;
-		padding: 10px 14px;
-		font-size: rem(14px);
-		height: 40px;
-	}
-
-	.hosting-features__content-spinner {
-		margin-top: 16px;
-		& + h1 {
-			margin-top: 0;
-		}
-	}
-}
-
-.hosting-features__cards {
-	display: grid;
-	grid-template-columns: 1fr;
-	grid-column-gap: 16px;
-	grid-row-gap: 16px;
-	padding: 0 20px;
-	@include break-medium {
-		grid-template-columns: 1fr 1fr 1fr;
-		padding: 0;
-	}
-}
-
-.hosting-features__card {
-	> p {
-		font-size: rem(14px);
-		margin-bottom: 20px;
-		color: var(--color-text-subtle);
-		flex-grow: 1;
-	}
-
-	> a {
-		font-size: rem(13px);
-		font-weight: 400;
-		line-height: 16px;
+.hosting-features__content-spinner {
+	margin-top: 16px;
+	& + h1 {
+		margin-top: 0;
 	}
 }
diff --git a/client/hosting/overview/components/hosting-overview.tsx b/client/hosting/overview/components/hosting-overview.tsx
@@ -5,15 +5,25 @@ import ActiveDomainsCard from 'calypso/hosting/overview/components/active-domain
 import PlanCard from 'calypso/hosting/overview/components/plan-card';
 import QuickActionsCard from 'calypso/hosting/overview/components/quick-actions-card';
 import SiteBackupCard from 'calypso/hosting/overview/components/site-backup-card';
-import { isNotAtomicJetpack } from 'calypso/sites-dashboard/utils';
+import {
+	isNotAtomicJetpack,
+	isMigrationInProgress,
+	getMigrationStatus,
+} from 'calypso/sites-dashboard/utils';
 import { useSelector } from 'calypso/state';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
+import MigrationOverview from './migration-overview';
 import SupportCard from './support-card';
 
 import './style.scss';
 
 const HostingOverview: FC = () => {
 	const site = useSelector( getSelectedSite );
+
+	if ( site && isMigrationInProgress( site ) && getMigrationStatus( site ) === 'pending' ) {
+		return <MigrationOverview site={ site } />;
+	}
+
 	const isJetpackNotAtomic = site && isNotAtomicJetpack( site );
 	const subtitle = isJetpackNotAtomic
 		? translate( 'Get a quick glance at your plans and upgrades.' )