diff --git a/client/my-sites/checkout/checkout-thank-you/marketplace/use-themes-thank-you-data.tsx b/client/my-sites/checkout/checkout-thank-you/marketplace/use-themes-thank-you-data.tsx index 21ad97f8e0d4dd..527ee61d8c9dda 100644 --- a/client/my-sites/checkout/checkout-thank-you/marketplace/use-themes-thank-you-data.tsx +++ b/client/my-sites/checkout/checkout-thank-you/marketplace/use-themes-thank-you-data.tsx @@ -2,11 +2,19 @@ import page from '@automattic/calypso-router'; import { addQueryArgs } from '@wordpress/url'; import { useTranslate } from 'i18n-calypso'; import { useEffect, useMemo } from 'react'; +import { useQuerySitePurchases } from 'calypso/components/data/query-site-purchases'; import { useQueryThemes } from 'calypso/components/data/query-theme'; import { useDispatch, useSelector } from 'calypso/state'; +import { + hasLoadedSitePurchasesFromServer, + isFetchingSitePurchases, +} from 'calypso/state/purchases/selectors'; import { isJetpackSite, getSiteAdminUrl, getSiteOption } from 'calypso/state/sites/selectors'; import { clearActivated } from 'calypso/state/themes/actions'; -import { getThemes } from 'calypso/state/themes/selectors'; +import { + getThemes, + isMarketplaceThemeSubscribed as getIsMarketplaceThemeSubscribed, +} 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'; import { Theme } from 'calypso/types'; @@ -45,6 +53,10 @@ export function useThemesThankYouData( "Your new theme is a reflection of your unique style and personality, and we're thrilled to see it come to life." ); + useQuerySitePurchases( siteId ); + const isRequestingSitePurchases = useSelector( isFetchingSitePurchases ); + const hasLoadedSitePurchases = useSelector( hasLoadedSitePurchasesFromServer ); + const dotComThemes = useSelector( ( state ) => getThemes( state, 'wpcom', themeSlugs ) ); const dotOrgThemes = useSelector( ( state ) => getThemes( state, 'wporg', themeSlugs ) ); const themesList = useMemo( @@ -117,10 +129,37 @@ export function useThemesThankYouData( ( dotComTheme: { id: string } | undefined ) => dotComTheme?.id === theme.id ) ); + + const themesSubscribed = useSelector( ( state ) => + themeSlugs.filter( ( themeId ) => getIsMarketplaceThemeSubscribed( state, themeId, siteId ) ) + ); + + const hasExternallyManagedThemesSubscribed = themesSubscribed.length > 0; + const hasExternallyManagedThemes = useSelector( ( state ) => getHasExternallyManagedThemes( state, themeSlugs ) ); - const isAtomicNeeded = hasDotOrgThemes || hasExternallyManagedThemes; + + useEffect( () => { + if ( + ! isRequestingSitePurchases && + hasLoadedSitePurchases && + ! hasExternallyManagedThemesSubscribed && + hasExternallyManagedThemes + ) { + page( `/home/${ siteSlug }` ); + } + }, [ + hasExternallyManagedThemes, + hasExternallyManagedThemesSubscribed, + isRequestingSitePurchases, + siteSlug, + ] ); + + const isAtomicNeeded = + hasDotOrgThemes || + ( hasExternallyManagedThemes && + ( isRequestingSitePurchases || hasExternallyManagedThemesSubscribed ) ); // Clear completed activated theme request state to avoid displaying the Thanks modal useEffect( () => { @@ -163,6 +202,7 @@ export function useThemesThankYouData( // Always display the loading screen for the following situations: // - Redirect to the plugin-bundle flow after the theme is activated for Woo themes. // - Redirect to the Theme Details page after the atomic transfer if it's required. - ! ( continueWithPluginBundle || isAtomicNeeded ), + // - Redirect to the /home page if the user removed the externally managed theme from checkout. + ! ( continueWithPluginBundle || isAtomicNeeded || ! isRequestingSitePurchases ), ]; }