Theme: Display the Atomic Transfer dialog for Woo themes with plugin-…

…bundle

client/landing/stepper/declarative-flow/internals/steps-repository/get-current-theme-software-sets/index.tsx

@@ -36,14 +36,14 @@ const GetCurrentThemeSoftwareSets: Step = function GetCurrentBundledPluginsStep(
 	const reduxDispatch = useReduxDispatch();
 	const { goNext } = navigation;
 	useEffect( () => {
-		if ( site?.ID ) {
+		if ( site?.ID && ! hasRequested ) {
 			debug( 'Dispatching requests for active theme and features' );
 			reduxDispatch( requestActiveTheme( site?.ID || -1 ) );
 			reduxDispatch( fetchSiteFeatures( site?.ID || -1 ) );
 			setHasRequested( true );
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ site?.ID ] );
+	}, [ site?.ID, hasRequested ] );
 	const currentThemeId = useSelector( ( state ) => getActiveTheme( state, site?.ID || -1 ) );
 	const currentTheme = useSelector( ( state ) =>
 		getCanonicalTheme( state, site?.ID || -1, currentThemeId )
@@ -93,7 +93,7 @@ const GetCurrentThemeSoftwareSets: Step = function GetCurrentBundledPluginsStep(
 				);
 
 				// Current theme has no bundled plugins; they shouldn't be in this flow
-				window.location.replace( `/home/${ siteSlug }` );
+				// window.location.replace( `/home/${ siteSlug }` );
 			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

client/my-sites/checkout/checkout-thank-you/marketplace/use-themes-thank-you-data.tsx

@@ -73,9 +73,11 @@ export function useThemesThankYouData(
 
 	useEffect( () => {
 		if ( isActive && continueWithPluginBundle ) {
-			page( `/setup/plugin-bundle/getCurrentThemeSoftwareSets?siteSlug=${ siteSlug }` );
+			page(
+				`/setup/plugin-bundle/getCurrentThemeSoftwareSets?siteId=${ siteId }&siteSlug=${ siteSlug }`
+			);
 		}
-	}, [ isActive, continueWithPluginBundle, siteSlug ] );
+	}, [ isActive, continueWithPluginBundle, siteId, siteSlug ] );
 
 	const themesSection = themesList
 		.filter( ( theme ) => theme )

client/my-sites/themes/atomic-transfer-dialog.tsx

@@ -1,4 +1,3 @@
-import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Dialog } from '@automattic/components';
 import { localize, translate } from 'i18n-calypso';
 import { Component } from 'react';
@@ -11,7 +10,6 @@ import {
 	dismissAtomicTransferDialog,
 	activate as activateTheme,
 	initiateThemeTransfer,
-	requestActiveTheme,
 } from 'calypso/state/themes/actions';
 import {
 	getActiveTheme,
@@ -43,9 +41,7 @@ interface AtomicTransferDialogProps {
 	dispatchAcceptAtomicTransferDialog: typeof acceptAtomicTransferDialog;
 	dispatchDismissAtomicTransferDialog: typeof dismissAtomicTransferDialog;
 	dispatchActivateTheme: typeof activateTheme;
-	dispatchRecordTracksEvent: typeof recordTracksEvent;
 	dispatchInitiateThemeTransfer: typeof initiateThemeTransfer;
-	dispatchRequestActiveTheme: typeof requestActiveTheme;
 }
 
 type AtomicTransferDialogState = {
@@ -96,32 +92,18 @@ class AtomicTransferDialog extends Component< AtomicTransferDialogProps > {
 		dispatchInitiateThemeTransfer( siteId, null, '', '', 'theme_install' );
 	}
 
-	getAtomicSitePath = () => {
-		const { origin, href } = window.location;
-
-		return href.replace( origin, '' ).replace( /\b.wordpress.com/, '.wpcomstaging.com' );
-	};
-
-	updateActiveThemeStateAndRedirect = async ( siteId: number ) => {
-		const { dispatchRequestActiveTheme, activeTheme, theme } = this.props;
-		if ( activeTheme === theme?.id ) {
-			return window.location.replace( this.getAtomicSitePath() );
-		}
-		try {
-			await dispatchRequestActiveTheme( siteId );
-		} catch ( e ) {
-			/* do nothing */
+	continueToActivate() {
+		const { siteId, theme, dispatchActivateTheme, dispatchAcceptAtomicTransferDialog } = this.props;
+		if ( siteId ) {
+			dispatchAcceptAtomicTransferDialog( theme.id );
+			dispatchActivateTheme( theme.id, siteId );
 		}
-
-		setTimeout( () => {
-			this.updateActiveThemeStateAndRedirect( siteId );
-		}, 2000 );
-	};
+	}
 
 	componentDidUpdate( prevProps: Readonly< AtomicTransferDialogProps > ): void {
 		const { siteId, siteSlug, isTransferred, uploadError } = this.props;
 		if ( siteId && siteSlug && prevProps.isTransferred !== isTransferred && isTransferred ) {
-			this.updateActiveThemeStateAndRedirect( siteId );
+			this.continueToActivate();
 		}
 
 		if ( siteId && uploadError && prevProps.uploadError !== uploadError ) {
@@ -162,13 +144,11 @@ class AtomicTransferDialog extends Component< AtomicTransferDialogProps > {
 	}
 
 	renderSuccessfulTransfer() {
-		const { isTransferred, theme, activeTheme } = this.props;
-		const isThemeActive = activeTheme === theme?.id;
+		const { isTransferred } = this.props;
 		const successfulTransferText = translate( 'Your site has been transferred successfully.' );
 
 		return (
-			isTransferred &&
-			isThemeActive && (
+			isTransferred && (
 				<Notice
 					className="themes__atomic-transfer-dialog-notice"
 					status="is-success"
@@ -249,8 +229,6 @@ export default connect(
 		dispatchAcceptAtomicTransferDialog: acceptAtomicTransferDialog,
 		dispatchDismissAtomicTransferDialog: dismissAtomicTransferDialog,
 		dispatchActivateTheme: activateTheme,
-		dispatchRecordTracksEvent: recordTracksEvent,
 		dispatchInitiateThemeTransfer: initiateThemeTransfer,
-		dispatchRequestActiveTheme: requestActiveTheme,
 	}
 )( localize( AtomicTransferDialog ) );

client/state/themes/actions/activate.js

@@ -30,13 +30,21 @@ import 'calypso/state/themes/init';
 export function activate( themeId, siteId, options ) {
 	return ( dispatch, getState ) => {
 		const { source, purchased, skipActivationModal } = options || {};
+		const isDotComTheme = !! getTheme( getState(), 'wpcom', themeId );
+		const isDotOrgTheme = !! getTheme( getState(), 'wporg', themeId );
+		const hasThemeBundleSoftwareSet = doesThemeBundleSoftwareSet( getState(), themeId );
+
+		// The DotOrg themes will be handled by the marketplace install page later.
+		const shouldAtomicTransfer =
+			isExternallyManagedTheme( getState(), themeId ) ||
+			( isDotComTheme && hasThemeBundleSoftwareSet );
 
 		/**
 		 * Make sure to show the Atomic transfer dialog if the theme requires
 		 * an Atomic site. If the dialog has been accepted, we can continue.
 		 */
 		if (
-			isExternallyManagedTheme( getState(), themeId ) &&
+			shouldAtomicTransfer &&
 			! isJetpackSite( getState(), siteId ) &&
 			! isSiteAtomic( getState(), siteId ) &&
 			! wasAtomicTransferDialogAccepted( getState(), themeId )
@@ -51,10 +59,7 @@ export function activate( themeId, siteId, options ) {
 			return dispatch( showActivationModal( themeId ) );
 		}
 
-		const isDotComTheme = !! getTheme( getState(), 'wpcom', themeId );
-		const isDotOrgTheme = !! getTheme( getState(), 'wporg', themeId );
 		const siteSlug = getSiteSlug( getState(), siteId );
-		const hasThemeBundleSoftwareSet = doesThemeBundleSoftwareSet( getState(), themeId );
 		const hasRedirection = ( isDotComTheme && hasThemeBundleSoftwareSet ) || isDotOrgTheme;
 		const dispatchActivateAction = activateOrInstallThenActivate( themeId, siteId, {
 			source,

client/state/themes/actions/theme-transfer.js

@@ -1,6 +1,7 @@
 import { delay } from 'lodash';
 import wpcom from 'calypso/lib/wp';
 import { recordTracksEvent, withAnalytics } from 'calypso/state/analytics/actions';
+import { requestSite } from 'calypso/state/sites/actions';
 import {
 	THEME_TRANSFER_INITIATE_FAILURE,
 	THEME_TRANSFER_INITIATE_PROGRESS,
@@ -99,8 +100,13 @@ export function initiateThemeTransfer( siteId, file, plugin, geoAffinity = '', c
 						themeInitiateSuccessAction
 					)
 				);
-				dispatch( pollThemeTransferStatus( siteId, transfer_id, 3000, 180000, !! file ) );
+
+				return dispatch( pollThemeTransferStatus( siteId, transfer_id, 3000, 180000, !! file ) );
 			} )
+			.then( () =>
+				// Get the latest site data after the atomic transfer.
+				dispatch( requestSite( siteId ) )
+			)
 			.catch( ( error ) => {
 				dispatch( transferInitiateFailure( siteId, error, plugin, context ) );
 			} );