Moved Big Sky changes from PAID_PLAN_PAID_DOMAIN_DIALOG to PAID_PLAN_…

…IS_REQUIRED_DIALOG

Changes needed to be made to the useModalResolutionCallback hook anyway
to ensure the dialog appeared when the user had a free domain.

So switching to the PAID_PLAN_IS_REQUIRED_DIALOG dialog was better for
us anyway, since it doesn't include the green "free for a year" text
that sometimes appears.

client/my-sites/plans-features-main/components/plan-upsell-modal/hooks/use-modal-resolution-callback.tsx

@@ -16,6 +16,7 @@ type Props = {
 	paidDomainName?: string | null;
 	intent?: string | null;
 	selectedThemeType?: string;
+	createWithBigSky?: boolean;
 };
 
 /**
@@ -27,6 +28,7 @@ export function useModalResolutionCallback( {
 	paidDomainName,
 	intent,
 	selectedThemeType,
+	createWithBigSky,
 }: Props ) {
 	return useCallback(
 		( currentSelectedPlan?: string | null ): ModalType | null => {
@@ -45,6 +47,10 @@ export function useModalResolutionCallback( {
 				return FREE_PLAN_FREE_DOMAIN_DIALOG;
 			}
 
+			if ( createWithBigSky && ONBOARDING_FLOW === flowName ) {
+				return PAID_PLAN_IS_REQUIRED_DIALOG;
+			}
+
 			// TODO: look into decoupling the flowName from here as well.
 			if (
 				paidDomainName &&
@@ -58,6 +64,13 @@ export function useModalResolutionCallback( {
 
 			return null;
 		},
-		[ isCustomDomainAllowedOnFreePlan, flowName, paidDomainName, intent, selectedThemeType ]
+		[
+			isCustomDomainAllowedOnFreePlan,
+			flowName,
+			paidDomainName,
+			intent,
+			selectedThemeType,
+			createWithBigSky,
+		]
 	);
 }

client/my-sites/plans-features-main/components/plan-upsell-modal/paid-plan-is-required-dialog.tsx

@@ -1,8 +1,11 @@
 import { LoadingPlaceholder } from '@automattic/components';
+import { type OnboardSelect } from '@automattic/data-stores';
 import { FREE_THEME } from '@automattic/design-picker';
 import { PlanButton } from '@automattic/plans-grid-next';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
+import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { getHidePlanPropsBasedOnThemeType } from '../utils/utils';
 import { ButtonContainer, DialogContainer, Heading, Row } from './components';
@@ -21,6 +24,11 @@ export const PaidPlanIsRequiredDialog = ( {
 	const [ isBusy, setIsBusy ] = useState( false );
 	const isPaidTheme = selectedThemeType && selectedThemeType !== FREE_THEME;
 	const hidePlanProps = getHidePlanPropsBasedOnThemeType( selectedThemeType || '' );
+	const { setCreateWithBigSky } = useDispatch( ONBOARD_STORE );
+	const createWithBigSky = useSelect( ( select: ( key: string ) => OnboardSelect ) => {
+		const { getCreateWithBigSky } = select( ONBOARD_STORE );
+		return getCreateWithBigSky();
+	}, [] );
 
 	const getUpsellTitle = () => {
 		if ( isPaidTheme && paidDomainName ) {
@@ -31,12 +39,24 @@ export const PaidPlanIsRequiredDialog = ( {
 			return translate( 'Premium themes are only available with a paid plan' );
 		}
 
+		if ( createWithBigSky && paidDomainName ) {
+			return translate( 'Domains and our AI Website Builder are only available with a paid plan' );
+		}
+
+		if ( createWithBigSky ) {
+			return translate( 'Our AI Website Builder is only available with a paid plan' );
+		}
+
 		return translate( 'Custom domains are only available with a paid plan' );
 	};
 
 	const handleFreeDomainClick = () => {
 		setIsBusy( true );
 		onFreePlanSelected();
+
+		if ( createWithBigSky ) {
+			setCreateWithBigSky( false );
+		}
 	};
 
 	useEffect( () => {

client/my-sites/plans-features-main/components/plan-upsell-modal/paid-plan-paid-domain-dialog.tsx

@@ -1,10 +1,7 @@
 import { LoadingPlaceholder } from '@automattic/components';
-import { OnboardSelect } from '@automattic/data-stores';
 import { PlanButton } from '@automattic/plans-grid-next';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
-import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import {
 	ButtonContainer,
@@ -24,12 +21,6 @@ export function PaidPlanPaidDomainDialog( {
 	onFreePlanSelected,
 	onPlanSelected,
 }: DomainPlanDialogProps ) {
-	const { setCreateWithBigSky } = useDispatch( ONBOARD_STORE );
-	const createWithBigSky = useSelect( ( select: ( key: string ) => OnboardSelect ) => {
-		const { getCreateWithBigSky } = select( ONBOARD_STORE );
-		return getCreateWithBigSky();
-	}, [] );
-
 	const translate = useTranslate();
 	const [ isBusy, setIsBusy ] = useState( false );
 
@@ -42,28 +33,16 @@ export function PaidPlanPaidDomainDialog( {
 	function handleFreeDomainClick() {
 		setIsBusy( true );
 		onFreePlanSelected();
-
-		if ( createWithBigSky ) {
-			setCreateWithBigSky( false );
-		}
 	}
 
-	const upsellDescription = createWithBigSky
-		? ''
-		: translate(
-				"Custom domains are only available with a paid plan. Choose annual billing and receive the domain's first year free."
-		  );
-
-	const bigSkyHeader = paidDomainName
-		? translate( 'Domains and our AI Website Builder are only available with a paid plan' )
-		: translate( 'Our AI Website Builder is only available with a paid plan' );
+	const upsellDescription = translate(
+		"Custom domains are only available with a paid plan. Choose annual billing and receive the domain's first year free."
+	);
 
 	return (
 		<DialogContainer>
 			<Heading id="plan-upsell-modal-title" shrinkMobileFont>
-				{ createWithBigSky
-					? bigSkyHeader
-					: translate( 'A paid plan is required for your domain.' ) }
+				{ translate( 'A paid plan is required for your domain.' ) }
 			</Heading>
 			<SubHeading id="plan-upsell-modal-description">{ upsellDescription }</SubHeading>
 			<ButtonContainer>

client/my-sites/plans-features-main/index.tsx

@@ -20,7 +20,7 @@ import {
 } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Button, Spinner } from '@automattic/components';
-import { WpcomPlansUI, AddOns, Plans } from '@automattic/data-stores';
+import { WpcomPlansUI, AddOns, Plans, OnboardSelect } from '@automattic/data-stores';
 import { isAnyHostingFlow, isOnboardingGuidedFlow } from '@automattic/onboarding';
 import {
 	FeaturesGrid,
@@ -32,7 +32,7 @@ import {
 } from '@automattic/plans-grid-next';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
 import styled from '@emotion/styled';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useCallback,
 	useEffect,
@@ -50,6 +50,7 @@ import QueryActivePromotions from 'calypso/components/data/query-active-promotio
 import QueryProductsList from 'calypso/components/data/query-products-list';
 import QuerySitePlans from 'calypso/components/data/query-site-plans';
 import QuerySites from 'calypso/components/data/query-sites';
+import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { retargetViewPlans } from 'calypso/lib/analytics/ad-tracking';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { planItem as getCartItemForPlan } from 'calypso/lib/cart-values/cart-items';
@@ -248,12 +249,20 @@ const PlansFeaturesMain = ( {
 
 	const longerPlanTermDefaultExperiment = useLongerPlanTermDefaultExperiment( flowName );
 
+	const { createWithBigSky } = useSelect(
+		( select ) => ( {
+			createWithBigSky: ( select( ONBOARD_STORE ) as OnboardSelect ).getCreateWithBigSky(),
+		} ),
+		[]
+	);
+
 	const resolveModal = useModalResolutionCallback( {
 		isCustomDomainAllowedOnFreePlan,
 		flowName,
 		paidDomainName,
 		intent: intentFromProps,
 		selectedThemeType,
+		createWithBigSky,
 	} );
 
 	const toggleShowPlansComparisonGrid = () => {