Focused Launch success view: fix CTA rendering conditions

packages/data-stores/src/launch/selectors.ts

@@ -22,7 +22,7 @@ export const hasPaidDomain = ( state: State ): boolean => {
 	if ( ! state.domain ) {
 		return false;
 	}
-	return ! state.domain.is_free;
+	return ! state.domain.is_free; // @TODO: check if we are ever storing a paid domain
 };
 export const getSelectedDomain = ( state: State ): DomainSuggestions.DomainSuggestion | undefined =>
 	state.domain;
@@ -50,7 +50,7 @@ export const isSelectedPlanPaid = ( state: State ): boolean =>
  *
  * @param state State
  */
-export const hasSelectedDomain = ( state: State ): boolean =>
+export const hasSelectedDomainOrSubdomain = ( state: State ): boolean =>
 	!! getSelectedDomain( state ) || state.confirmedDomainSelection;
 
 // Completion status of steps is derived from the state of the launch flow
@@ -68,7 +68,7 @@ export const isStepCompleted = ( state: State, step: LaunchStepType ): boolean =
 		return !! site?.title;
 	}
 	if ( step === LaunchStep.Domain ) {
-		return select( LAUNCH_STORE ).hasSelectedDomain();
+		return select( LAUNCH_STORE ).hasSelectedDomainOrSubdomain();
 	}
 	return false;
 };

packages/launch/src/focused-launch/index.tsx

@@ -26,7 +26,7 @@ const FocusedLaunch: React.FunctionComponent = () => {
 	const [ hasSelectedDomain, selectedPlanProductId ] = useSelect( ( select ) => {
 		const { planProductId } = select( LAUNCH_STORE ).getState();
 
-		return [ select( LAUNCH_STORE ).hasSelectedDomain(), planProductId ];
+		return [ select( LAUNCH_STORE ).hasSelectedDomainOrSubdomain(), planProductId ];
 	} );
 
 	// @TODO: extract to some hook for reusability (Eg: use-products-from-cart)

packages/launch/src/focused-launch/success/index.tsx

@@ -13,7 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useSiteDomains, useWillRedirectAfterSuccess } from '../../hooks';
+import { useSiteDomains, useHasEcommercePlan } from '../../hooks';
 import Confetti from './confetti';
 import LaunchContext from '../../context';
 import { LAUNCH_STORE, SITE_STORE } from '../../stores';
@@ -23,17 +23,20 @@ import './style.scss';
 // Success is shown when the site is launched but also while the site is still launching.
 // This view is technically going to be the selected view in the modal even while the user goes through the checkout flow (which is rendered on top of this view).
 const Success: React.FunctionComponent = () => {
-	const { redirectTo, siteId, getCurrentLaunchFlowUrl } = React.useContext( LaunchContext );
+	const { redirectTo, siteId, getCurrentLaunchFlowUrl, isInIframe } = React.useContext(
+		LaunchContext
+	);
 
 	const isSiteLaunching = useSelect(
 		( select ) => select( SITE_STORE ).isSiteLaunching( siteId ),
 		[]
 	);
 
-	const isSelectedPlanPaid = useSelect(
-		( select ) => select( LAUNCH_STORE ).isSelectedPlanPaid(),
-		[]
-	);
+	const [ isSelectedPlanPaid, selectedDomain ] = useSelect( ( select ) => {
+		const launchStore = select( LAUNCH_STORE );
+
+		return [ launchStore.isSelectedPlanPaid(), launchStore.getSelectedDomain() ];
+	}, [] );
 
 	// Save the post before displaying the action buttons and launch succes message
 	const [ isPostSaved, setIsPostSaved ] = React.useState( false );
@@ -56,9 +59,13 @@ const Success: React.FunctionComponent = () => {
 	const [ displayedSiteUrl, setDisplayedSiteUrl ] = React.useState( '' );
 	const [ hasCopied, setHasCopied ] = React.useState( false );
 
-	// if the user has an ecommerce plan or they're using focused launch from wp-admin
-	// they will be automatically redirected to /checkout, in which case the CTAs are not needed
-	const willUserBeRedirectedAutomatically = useWillRedirectAfterSuccess();
+	// Show CTA buttons needed to dismiss the success view only if the user is not going to be redirected to /checkout after launch.
+	// When we display the CTA buttons?
+	// 1. All the time for the free flow (no selected custom domain or paid plan).
+	// 2. If the selected plan isn't Ecommerce and we are in the iframed editor (conditions when we display Checkout Modal).
+	const isEcommerce = useHasEcommercePlan();
+	const isFreeFlow = ! selectedDomain && ! isSelectedPlanPaid;
+	const shouldShowCTAs = isFreeFlow || ( ! isEcommerce && isInIframe );
 
 	React.useEffect( () => {
 		setDisplayedSiteUrl( `https://${ sitePrimaryDomain?.domain }` );
@@ -105,7 +112,7 @@ const Success: React.FunctionComponent = () => {
 			<SubTitle tagName="h3">
 				{ isLaunchComplete ? subtitleTextLaunched : subtitleTextLaunching }
 			</SubTitle>
-			{ ! willUserBeRedirectedAutomatically && isLaunchComplete && (
+			{ shouldShowCTAs && isLaunchComplete && (
 				<>
 					<div className="focused-launch-success__url-wrapper">
 						<span className="focused-launch-success__url-field">{ displayedSiteUrl }</span>

packages/launch/src/focused-launch/summary/index.tsx

@@ -534,7 +534,12 @@ const Summary: React.FunctionComponent = () => {
 		const launchStore = select( LAUNCH_STORE );
 		const { isSiteTitleStepVisible, domain, planProductId } = launchStore.getState();
 
-		return [ launchStore.hasSelectedDomain(), isSiteTitleStepVisible, domain, planProductId ];
+		return [
+			launchStore.hasSelectedDomainOrSubdomain(),
+			isSiteTitleStepVisible,
+			domain,
+			planProductId,
+		];
 	}, [] );
 
 	const isSelectedPlanPaid = useSelect(
@@ -632,7 +637,7 @@ const Summary: React.FunctionComponent = () => {
 		<PlanStep
 			highlighted={ isPlansStepHighlighted }
 			hasPaidPlan={ hasPaidPlan }
-			selectedPaidDomain={ selectedDomain && ! selectedDomain.is_free }
+			selectedPaidDomain={ selectedDomain && ! selectedDomain.is_free } // @TODO: check if selectedDomain can ever be free
 			hasPaidDomain={ hasPaidDomain }
 			stepIndex={ forwardStepIndex ? stepIndex : undefined }
 			key={ stepIndex }

packages/launch/src/hooks/index.ts

@@ -7,4 +7,4 @@ export * from './use-title';
 export * from './use-site-domains';
 export * from './use-plans';
 export * from './use-cart';
-export * from './use-will-redirect-after-success';
+export * from './use-has-ecommerce-plan';

packages/launch/src/hooks/use-cart.ts

@@ -11,7 +11,7 @@ import { useLocale } from '@automattic/i18n-utils';
 import { LAUNCH_STORE, SITE_STORE, PLANS_STORE } from '../stores';
 import LaunchContext from '../context';
 import { getDomainProduct, getPlanProductForFlow } from '../utils';
-import { useSiteDomains, useWillRedirectAfterSuccess } from '../hooks';
+import { useSiteDomains, useHasEcommercePlan } from '../hooks';
 
 type LaunchCart = {
 	goToCheckout: () => Promise< void >; // used in gutenboarding-launch
@@ -20,7 +20,7 @@ type LaunchCart = {
 };
 
 export function useCart(): LaunchCart {
-	const { siteId, flow, openCheckout } = React.useContext( LaunchContext );
+	const { siteId, flow, openCheckout, isInIframe } = React.useContext( LaunchContext );
 
 	const locale = useLocale();
 
@@ -49,7 +49,7 @@ export function useCart(): LaunchCart {
 
 	const [ isCartUpdating, setIsCartUpdating ] = React.useState( false );
 
-	const willRedirectAfterSuccess = useWillRedirectAfterSuccess();
+	const hasEcommercePlan = useHasEcommercePlan();
 
 	const addProductsToCart = async () => {
 		if ( isCartUpdating ) {
@@ -77,7 +77,7 @@ export function useCart(): LaunchCart {
 	};
 
 	const goToCheckoutAndLaunch = async () => {
-		if ( willRedirectAfterSuccess ) {
+		if ( ! isInIframe || hasEcommercePlan ) {
 			// We launch the site first and then open Checkout in these cases:
 			// - Focused Launch is loaded outside Calypso iframe (in wp-admin)
 			// - eCommerce plan is selected so Checkout will handle thank-you redirect after purchase

packages/launch/src/hooks/use-will-redirect-after-success.ts → packages/launch/src/hooks/use-has-ecommerce-plan.ts

@@ -1,26 +1,15 @@
 /**
  * External dependencies
  */
-import * as React from 'react';
 import { useSelect } from '@wordpress/data';
 import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
  */
 import { LAUNCH_STORE, PLANS_STORE } from '../stores';
-import LaunchContext from '../context';
-
-/**
- * When the user has an ecommerce plan or they're using focused launch in wp-admin
- * they will be automatically redirected to /checkout after site launch.
- * This hook returns true when this is the case
- *
- * @returns boolean
- */
-export function useWillRedirectAfterSuccess(): boolean {
-	const { isInIframe } = React.useContext( LaunchContext );
 
+export function useHasEcommercePlan(): boolean {
 	const locale = useLocale();
 
 	const planProductId = useSelect(
@@ -37,5 +26,5 @@ export function useWillRedirectAfterSuccess(): boolean {
 		[ planProductId, locale ]
 	);
 
-	return ! isInIframe || isEcommercePlan;
+	return isEcommercePlan;
 }