Domain-only thank you: hide "Start a new site" when site has a paid plan (#112063)

* Domain-only thank you: hide "Start a new site" when site has a paid plan

On the domain-only checkout thank-you page, the "Start a new site" option
(which sends the user into the plan-selection flow via createSiteFromDomainOnly)
was shown unconditionally. When the purchased domain's site already has a paid
plan attached, offering to create a new site is confusing.

Hide that option when isCurrentPlanPaid is true for the domain's blog, and load
the site's plan data via QuerySites so the check is available on the page.

Co-Authored-By: Claude <noreply@anthropic.com>

* Checkout: hide start-site CTA while plan status loads

* Domain-only thank you: test QuerySites is rendered for plan lookup

Guards against silently removing <QuerySites>, which would leave the plan
selector permanently null and hide the CTA in production while all other
tests stayed green.

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: markbiek

client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-only/index.tsx

@@ -4,6 +4,7 @@ import { formatCurrency } from '@automattic/number-formatters';
 import { Step } from '@automattic/onboarding';
 import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
+import QuerySites from 'calypso/components/data/query-sites';
 import { OptionContent } from 'calypso/components/option-content';
 import { getDashboardFromQuery } from 'calypso/dashboard/app/routing';
 import { dashboardLink } from 'calypso/dashboard/utils/link';
@@ -17,6 +18,7 @@ import { useDomainToPlanCreditsApplicable } from 'calypso/my-sites/plans-feature
 import { useSelector } from 'calypso/state';
 import { hasDashboardOptIn } from 'calypso/state/dashboard/selectors';
 import { canAnySiteConnectDomains } from 'calypso/state/selectors/can-any-site-connect-domains';
+import isCurrentPlanPaid from 'calypso/state/sites/selectors/is-current-plan-paid';
 import attachToSite from './icons/attach-to-site.svg';
 import useDomainOnly from './icons/domain-only.svg';
 import addMailbox from './icons/mailbox.svg';
@@ -43,6 +45,11 @@ export default function DomainOnly( {
 	const hasConnectableSites = useSelector( canAnySiteConnectDomains );
 	const dashboardOptIn = useSelector( hasDashboardOptIn );
 
+	// Don't offer to create a new site when the domain's site already has a paid plan attached.
+	const siteHasPaidPlan = useSelector( ( state ) =>
+		isCurrentPlanPaid( state, domainPurchase.blogId )
+	);
+
 	const planUpgradeCreditsApplicable = useDomainToPlanCreditsApplicable( domainPurchase.blogId );
 
 	// translators: %(domain)s is a domain name, like example.com
@@ -63,6 +70,7 @@ export default function DomainOnly( {
 
 	return (
 		<div className="checkout-thank-you__domain-only-container">
+			<QuerySites siteId={ domainPurchase.blogId } />
 			<Step.CenteredColumnLayout
 				className="step-container-v2--domain-only"
 				columnWidth={ 6 }
@@ -74,30 +82,32 @@ export default function DomainOnly( {
 				}
 				verticalAlign="center"
 			>
-				<OptionContent
-					illustration={ <img src={ startSite } alt="" aria-hidden /> }
-					titleText={ translate( 'Start a new site' ) }
-					topText={ translate( 'Create and launch a site on WordPress.com.' ) }
-					benefits={
-						planUpgradeCreditsApplicable
-							? [
-									translate(
-										'%(upgradeCredits)s in upgrade credits will be applied to new paid plan purchases.',
-										{
-											args: {
-												upgradeCredits: formatCurrency( planUpgradeCreditsApplicable, currency, {
-													stripZeros: true,
-													isSmallestUnit: true,
-												} ),
-											},
-										}
-									),
-							  ]
-							: undefined
-					}
-					href={ createSiteFromDomainOnly( domainPurchase.meta, domainPurchase.blogId ) }
-					onSelect={ getOnClickEventHandler( 'start_new_site' ) }
-				/>
+				{ false === siteHasPaidPlan && (
+					<OptionContent
+						illustration={ <img src={ startSite } alt="" aria-hidden /> }
+						titleText={ translate( 'Start a new site' ) }
+						topText={ translate( 'Create and launch a site on WordPress.com.' ) }
+						benefits={
+							planUpgradeCreditsApplicable
+								? [
+										translate(
+											'%(upgradeCredits)s in upgrade credits will be applied to new paid plan purchases.',
+											{
+												args: {
+													upgradeCredits: formatCurrency( planUpgradeCreditsApplicable, currency, {
+														stripZeros: true,
+														isSmallestUnit: true,
+													} ),
+												},
+											}
+										),
+								  ]
+								: undefined
+						}
+						href={ createSiteFromDomainOnly( domainPurchase.meta, domainPurchase.blogId ) }
+						onSelect={ getOnClickEventHandler( 'start_new_site' ) }
+					/>
+				) }
 				<OptionContent
 					illustration={ <img src={ addMailbox } alt="" aria-hidden /> }
 					titleText={ translate( 'Add a mailbox' ) }

client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-only/test/index.tsx

@@ -16,12 +16,20 @@ import {
 import { useDomainToPlanCreditsApplicable } from 'calypso/my-sites/plans-features-main/hooks/use-domain-to-plan-credits-applicable';
 import { hasDashboardOptIn } from 'calypso/state/dashboard/selectors';
 import { canAnySiteConnectDomains } from 'calypso/state/selectors/can-any-site-connect-domains';
+import isCurrentPlanPaid from 'calypso/state/sites/selectors/is-current-plan-paid';
 import { renderWithProvider } from 'calypso/test-helpers/testing-library';
 import DomainOnly from '../index';
 import type { ReceiptPurchase } from 'calypso/state/receipts/types';
 
 jest.mock( '@automattic/calypso-analytics' );
 
+const mockQuerySites = jest.fn();
+
+jest.mock( 'calypso/components/data/query-sites', () => ( props: { siteId: number } ) => {
+	mockQuerySites( props );
+	return null;
+} );
+
 jest.mock( 'calypso/state/dashboard/selectors', () => ( {
 	hasDashboardOptIn: jest.fn(),
 } ) );
@@ -30,6 +38,11 @@ jest.mock( 'calypso/state/selectors/can-any-site-connect-domains', () => ( {
 	canAnySiteConnectDomains: jest.fn(),
 } ) );
 
+jest.mock( 'calypso/state/sites/selectors/is-current-plan-paid', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+} ) );
+
 jest.mock(
 	'calypso/my-sites/plans-features-main/hooks/use-domain-to-plan-credits-applicable',
 	() => ( {
@@ -83,6 +96,8 @@ describe( 'DomainOnly', () => {
 		jest.mocked( hasDashboardOptIn ).mockReturnValue( false );
 		jest.mocked( canAnySiteConnectDomains ).mockReturnValue( false );
 		jest.mocked( useDomainToPlanCreditsApplicable ).mockReturnValue( null );
+		jest.mocked( isCurrentPlanPaid ).mockReturnValue( false );
+		mockQuerySites.mockClear();
 	} );
 
 	afterEach( () => {
@@ -99,6 +114,35 @@ describe( 'DomainOnly', () => {
 			);
 		} );
 
+		it( 'is visible when the domain’s site does not have a paid plan', () => {
+			jest.mocked( isCurrentPlanPaid ).mockReturnValue( false );
+			renderComponent();
+
+			expect( screen.getByRole( 'link', { name: /Start a new site/ } ) ).toBeVisible();
+		} );
+
+		it( 'is not visible when the domain’s site already has a paid plan', () => {
+			jest.mocked( isCurrentPlanPaid ).mockReturnValue( true );
+			renderComponent();
+
+			expect( screen.queryByRole( 'link', { name: /Start a new site/ } ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'is not visible while the site plan status is loading', () => {
+			jest.mocked( isCurrentPlanPaid ).mockReturnValue( null );
+			renderComponent();
+
+			expect( screen.queryByRole( 'link', { name: /Start a new site/ } ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'queries the sites so the plan status can be resolved', () => {
+			renderComponent();
+
+			expect( mockQuerySites ).toHaveBeenCalledWith(
+				expect.objectContaining( { siteId: mockDomainPurchase.blogId } )
+			);
+		} );
+
 		it( 'records a tracks event when the user clicks the "Start a new site" link', async () => {
 			const user = userEvent.setup();
 			renderComponent();