Allow users to change their minds about Big Sky on the plans page (#99128)

* Allow users to change their minds about Big Sky selection on plans page

* Showing Big Sky subheader even with free domains

* Added a custom modal copy for Big Sky + Paid domain

* 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.

---------

Co-authored-by: Philip Jackson <[email protected]>

Author: paulopmt1

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/plans-page-subheader.tsx

@@ -1,7 +1,10 @@
 import { Button, Gridicon } from '@automattic/components';
+import { OnboardSelect } from '@automattic/data-stores';
 import styled from '@emotion/styled';
+import { useSelect } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import FormattedHeader from 'calypso/components/formatted-header';
+import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 
 const Subheader = styled.p`
 	margin: -32px 0 40px 0;
@@ -113,9 +116,26 @@ const PlansPageSubheader = ( {
 } ) => {
 	const translate = useTranslate();
 
+	const createWithBigSky = useSelect( ( select: ( key: string ) => OnboardSelect ) => {
+		const { getCreateWithBigSky } = select( ONBOARD_STORE );
+		return getCreateWithBigSky();
+	}, [] );
+
 	return (
 		<>
-			{ deemphasizeFreePlan && offeringFreePlan ? (
+			{ createWithBigSky && (
+				<Subheader>
+					{ translate(
+						`Build your site quickly with our AI Website Builder or {{link}}start with a free plan{{/link}}.`,
+						{
+							components: {
+								link: <Button onClick={ onFreePlanCTAClick } borderless />,
+							},
+						}
+					) }
+				</Subheader>
+			) }
+			{ ! createWithBigSky && deemphasizeFreePlan && offeringFreePlan ? (
 				<Subheader>
 					{ translate(
 						`Unlock a powerful bundle of features. Or {{link}}start with a free plan{{/link}}.`,

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 = () => {