DotOrg Theme: Activate theme on the Marketplace Installation page for…

… themes (Automattic#75546)

* Redirect .org themes to the Marketplace Installation page
* Add intention to install a theme to be read on the Installation page
* Stop showing thanks modal for .org themes

* Update dotorg check to remove themes also provided by dotcom

* Use install and activate a theme instead of only activating

* Clear activation status when leaving the Thank You page

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

@@ -1,10 +1,11 @@
 import { useTranslate } from 'i18n-calypso';
 import page from 'page';
-import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useQueryThemes } from 'calypso/components/data/query-theme';
 import { ThankYouData, ThankYouSectionProps } from 'calypso/components/thank-you/types';
 import { isJetpackSite } from 'calypso/state/sites/selectors';
+import { clearActivated } from 'calypso/state/themes/actions';
 import { getThemes } from 'calypso/state/themes/selectors';
 import { hasExternallyManagedThemes as getHasExternallyManagedThemes } from 'calypso/state/themes/selectors/is-externally-managed-theme';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
@@ -13,6 +14,7 @@ import MasterbarStyled from './masterbar-styled';
 
 export function useThemesThankYouData( themeSlugs: string[] ): ThankYouData {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
 	const siteId = useSelector( getSelectedSiteId );
 	const siteSlug = useSelector( getSelectedSiteSlug );
 
@@ -35,6 +37,13 @@ export function useThemesThankYouData( themeSlugs: string[] ): ThankYouData {
 	useQueryThemes( 'wpcom', themeSlugs );
 	useQueryThemes( 'wporg', themeSlugs );
 
+	// Clear completed activated them request state to avoid displaying the Thanks modal
+	useEffect( () => {
+		return () => {
+			dispatch( clearActivated( siteId || 0 ) );
+		};
+	}, [ dispatch, siteId ] );
+
 	const themesSection: ThankYouSectionProps = {
 		sectionKey: 'theme_information',
 		nextSteps: themesList

client/my-sites/marketplace/pages/marketplace-plugin-install/index.tsx

@@ -42,8 +42,8 @@ import isSiteAutomatedTransfer from 'calypso/state/selectors/is-site-automated-t
 import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { isJetpackSite } from 'calypso/state/sites/selectors';
 import {
-	activateTheme,
 	initiateThemeTransfer as initiateTransfer,
+	installAndActivateTheme,
 	requestActiveTheme,
 } from 'calypso/state/themes/actions';
 import { getTheme, isThemeActive as getThemeActive } from 'calypso/state/themes/selectors';
@@ -203,7 +203,7 @@ const MarketplacePluginInstall = ( {
 			if ( selectedSite.jetpack ) {
 				if ( wpOrgTheme ) {
 					// initilize theme activating
-					dispatch( activateTheme( wpOrgTheme.id, siteId ) );
+					dispatch( installAndActivateTheme( wpOrgTheme.id, siteId ) );
 				} else {
 					// initialize plugin installing
 					dispatch( installPlugin( siteId, wporgPlugin, false ) );

client/state/themes/actions/activate.js

@@ -1,6 +1,8 @@
 import { isEnabled } from '@automattic/calypso-config';
+import page from 'page';
+import { productToBeInstalled } from 'calypso/state/marketplace/purchase-flow/actions';
 import isSiteAtomic from 'calypso/state/selectors/is-site-wpcom-atomic';
-import { isJetpackSite } from 'calypso/state/sites/selectors';
+import { isJetpackSite, getSiteSlug } from 'calypso/state/sites/selectors';
 import { activateTheme } from 'calypso/state/themes/actions/activate-theme';
 import { installAndActivateTheme } from 'calypso/state/themes/actions/install-and-activate-theme';
 import { showAtomicTransferDialog } from 'calypso/state/themes/actions/show-atomic-transfer-dialog';
@@ -72,6 +74,19 @@ export function activate(
 			return dispatch( showAutoLoadingHomepageWarning( themeId ) );
 		}
 
+		/**
+		 * Check if the theme is a .org Theme and not provided by .com as well (as Premium themes)
+		 * and redirect it to the Marketplace theme installation page
+		 */
+		const isDotOrgTheme = !! getTheme( getState(), 'wporg', themeId );
+		const isDotComTheme = !! getTheme( getState(), 'wpcom', themeId );
+		if ( isDotOrgTheme && ! isDotComTheme ) {
+			const siteSlug = getSiteSlug( getState(), siteId );
+
+			dispatch( productToBeInstalled( themeId, siteSlug ) );
+			return page( `/marketplace/theme/${ themeId }/install/${ siteSlug }` );
+		}
+
 		if ( isJetpackSite( getState(), siteId ) && ! getTheme( getState(), siteId, themeId ) ) {
 			const installId = suffixThemeIdForInstall( getState(), siteId, themeId );
 			// If theme is already installed, installation will silently fail,