Add activate atomic transfer in dev-tools

Automattic · May 24, 2024 · 3c37982 · 3c37982
1 parent 56181b4
commit 3c37982
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 15 deletions.
diff --git a/client/dev-tools/components/dev-tools.tsx b/client/dev-tools/components/dev-tools.tsx
@@ -1,10 +1,17 @@
-import { Card } from '@automattic/components';
+import { FEATURE_SFTP } from '@automattic/calypso-products';
+import page from '@automattic/calypso-router';
+import { Card, Dialog } from '@automattic/components';
 import { Button } from '@wordpress/components';
 import { translate } from 'i18n-calypso';
+import { useState } from 'react';
+import EligibilityWarnings from 'calypso/blocks/eligibility-warnings';
 import CardHeading from 'calypso/components/card-heading';
 import InlineSupportLink from 'calypso/components/inline-support-link';
-import { useSelector } from 'calypso/state';
+import { useDispatch, useSelector } from 'calypso/state';
+import isSiteWpcomAtomic from 'calypso/state/selectors/is-site-wpcom-atomic';
+import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { getSiteSlug } from 'calypso/state/sites/selectors';
+import { initiateThemeTransfer } from 'calypso/state/themes/actions';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import './style.scss';
 
@@ -27,8 +34,13 @@ const PromoCard = ( { title, text, supportContext }: PromoCardProps ) => (
 );
 
 const DevTools = () => {
+	const [ showEligibility, setShowEligibility ] = useState( false );
 	const siteId = useSelector( getSelectedSiteId );
-	const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) ) || '';
+	const { siteSlug, isSiteAtomic, hasSftpFeature } = useSelector( ( state ) => ( {
+		siteSlug: getSiteSlug( state, siteId ) || '',
+		isSiteAtomic: isSiteWpcomAtomic( state, siteId as number ),
+		hasSftpFeature: siteHasFeature( state, siteId, FEATURE_SFTP ),
+	} ) );
 
 	const upgradeLink = `https://wordpress.com/checkout/${ encodeURIComponent( siteSlug ) }/business`;
 	const pluginsLink = `https://wordpress.com/plugins/${ encodeURIComponent( siteSlug ) }`;
@@ -67,21 +79,74 @@ const DevTools = () => {
 			supportContext: 'github-deployments',
 		},
 	];
+
+	const canSiteGoAtomic = ! isSiteAtomic && hasSftpFeature;
+	const showHostingActivationButton = canSiteGoAtomic;
+	const backUrl = `/hosting-config/${ siteSlug }`;
+	const dispatch = useDispatch();
+	const transferInitiate = ( siteId: number, { geo_affinity = '' } = {} ) => {
+		dispatch( initiateThemeTransfer( siteId, null, '', geo_affinity, 'hosting' ) ).then( () => {
+			page( `/setup/transferring-hosted-site?siteId=${ siteId }&to=hosting-config` );
+		} );
+	};
+
 	return (
 		<div className="dev-tools">
 			<div className="dev-tools__hero">
-				<h1> { translate( 'Unlock all developer tools' ) }</h1>
+				<h1>
+					{ showHostingActivationButton
+						? translate( 'Activate hosting configuration' )
+						: translate( 'Unlock all developer tools' ) }
+				</h1>
 				<p>
-					{ translate(
-						'Upgrade to the Creator plan or higher to get access to all developer tools'
-					) }
+					{ showHostingActivationButton
+						? translate(
+								'Your plan includes all the developer tools listed below. Click "Activate Now" to begin.'
+						  )
+						: translate(
+								'Upgrade to the Creator plan or higher to get access to all developer tools'
+						  ) }
 				</p>
-				<Button variant="secondary" className="dev-tools__button" href={ pluginsLink }>
-					{ translate( 'Browse plugins' ) }
-				</Button>
-				<Button variant="primary" className="dev-tools__button" href={ upgradeLink }>
-					{ translate( 'Upgrade now' ) }
-				</Button>
+				{ showHostingActivationButton ? (
+					<>
+						<Button
+							variant="primary"
+							className="dev-tools__button"
+							onClick={ () => {
+								if ( showHostingActivationButton ) {
+									return setShowEligibility( true );
+								}
+							} }
+						>
+							{ translate( 'Activate now' ) }
+						</Button>
+
+						<Dialog
+							additionalClassNames="plugin-details-cta__dialog-content"
+							additionalOverlayClassNames="plugin-details-cta__modal-overlay"
+							isVisible={ showEligibility }
+							onClose={ () => setShowEligibility( false ) }
+							showCloseIcon
+						>
+							<EligibilityWarnings
+								className="hosting__activating-warnings"
+								onProceed={ () => transferInitiate( siteId as number ) }
+								backUrl={ backUrl }
+								showDataCenterPicker
+								standaloneProceed
+							/>
+						</Dialog>
+					</>
+				) : (
+					<>
+						<Button variant="secondary" className="dev-tools__button" href={ pluginsLink }>
+							{ translate( 'Browse plugins' ) }
+						</Button>
+						<Button variant="primary" className="dev-tools__button" href={ upgradeLink }>
+							{ translate( 'Upgrade now' ) }
+						</Button>
+					</>
+				) }
 			</div>
 			<div className="dev-tools__cards">
 				{ promoCards.map( ( card ) => (

diff --git a/client/landing/stepper/declarative-flow/transferring-hosted-site-flow.ts b/client/landing/stepper/declarative-flow/transferring-hosted-site-flow.ts
@@ -1,6 +1,7 @@
 import { TRANSFERRING_HOSTED_SITE_FLOW } from '@automattic/onboarding';
 import { useDispatch } from '@wordpress/data';
 import { useDispatch as useReduxDispatch } from 'react-redux';
+import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
 import { requestAdminMenu } from 'calypso/state/admin-menu/actions';
 import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { ONBOARD_STORE } from '../stores';
@@ -29,10 +30,13 @@ const transferringHostedSite: Flow = {
 	useStepNavigation( currentStep, navigate ) {
 		const flowName = this.name;
 		const siteId = useSiteIdParam();
+		const exitTo = useQuery().get( 'to' ) || 'home';
 		const dispatch = useReduxDispatch();
 
 		const exitFlow = ( to: string ) => {
-			window.location.assign( to );
+			setTimeout( () => {
+				window.location.assign( to );
+			}, 500 );
 		};
 
 		function submit( providedDependencies: ProvidedDependencies = {}, ...params: string[] ) {
@@ -48,7 +52,7 @@ const transferringHostedSite: Flow = {
 
 					dispatch( requestAdminMenu( siteId ) );
 
-					return exitFlow( '/home/' + siteId );
+					return exitFlow( `/${ exitTo }/${ siteId }` );
 				}
 
 				case 'waitForAtomic': {