Update the copy on site provision notification for dev sites. (#94562)

Automattic · Sep 17, 2024 · 2cf3125 · 2cf3125
1 parent f94e00d
commit 2cf3125
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 71 deletions.
diff --git a/client/a8c-for-agencies/components/site-configurations-modal/index.tsx b/client/a8c-for-agencies/components/site-configurations-modal/index.tsx
@@ -18,7 +18,7 @@ import './style.scss';
 
 type SiteConfigurationsModalProps = {
 	closeModal: () => void;
-	onCreateSiteSuccess: ( id: number ) => void;
+	onCreateSiteSuccess: ( id: number, isDevSite?: boolean ) => void;
 	randomSiteName: string;
 	isRandomSiteNameLoading: boolean;
 	siteId?: number;
@@ -96,7 +96,7 @@ export default function SiteConfigurationsModal( {
 		if ( isDevSite ) {
 			createWPCOMDevSite( params, {
 				onSuccess: ( response ) => {
-					onCreateSiteSuccess( response.site.id );
+					onCreateSiteSuccess( response.site.id, true );
 					closeModal();
 				},
 				onError: async ( error ) => {

diff --git a/client/a8c-for-agencies/hooks/use-site-created-callback.ts b/client/a8c-for-agencies/hooks/use-site-created-callback.ts
@@ -0,0 +1,50 @@
+import page from '@automattic/calypso-router';
+import { getQueryArg, addQueryArgs } from '@wordpress/url';
+import { useCallback, useContext, useEffect } from 'react';
+import { A4A_SITES_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import useFetchPendingSites from 'calypso/a8c-for-agencies/data/sites/use-fetch-pending-sites';
+import SitesDashboardContext from '../sections/sites/sites-dashboard-context';
+
+const useSiteCreatedCallback = ( refetchRandomSiteName: () => Promise< void > ) => {
+	const createdSiteId = getQueryArg( window.location.href, 'created_site' ) ?? null;
+	const createdDevSiteId = getQueryArg( window.location.href, 'created_dev_site' ) ?? null;
+
+	const recentlyCreatedSite = createdSiteId || createdDevSiteId;
+	const { setRecentlyCreatedSiteId, setIsRecentlyCreatedSiteDevelopment } =
+		useContext( SitesDashboardContext );
+	const { refetch: refetchPendingSites } = useFetchPendingSites();
+
+	useEffect( () => {
+		if ( recentlyCreatedSite ) {
+			setRecentlyCreatedSiteId( Number( recentlyCreatedSite ) );
+		}
+		if ( createdDevSiteId ) {
+			setIsRecentlyCreatedSiteDevelopment( true );
+		}
+	}, [
+		createdDevSiteId,
+		recentlyCreatedSite,
+		setIsRecentlyCreatedSiteDevelopment,
+		setRecentlyCreatedSiteId,
+	] );
+
+	return useCallback(
+		( id: number, isDevSite?: boolean ) => {
+			refetchPendingSites();
+			refetchRandomSiteName();
+			setRecentlyCreatedSiteId( id );
+			setIsRecentlyCreatedSiteDevelopment( !! isDevSite );
+
+			const queryParams = isDevSite ? { created_dev_site: id } : { created_site: id };
+			page( addQueryArgs( A4A_SITES_LINK, queryParams ) );
+		},
+		[
+			refetchPendingSites,
+			refetchRandomSiteName,
+			setRecentlyCreatedSiteId,
+			setIsRecentlyCreatedSiteDevelopment,
+		]
+	);
+};
+
+export default useSiteCreatedCallback;
diff --git a/client/a8c-for-agencies/sections/overview/header-actions/index.tsx b/client/a8c-for-agencies/sections/overview/header-actions/index.tsx
@@ -1,20 +1,14 @@
-import page from '@automattic/calypso-router';
 import { Button } from '@automattic/components';
 import { useBreakpoint } from '@automattic/viewport-react';
-import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
-import { useCallback, useContext, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import AddNewSiteButton from 'calypso/a8c-for-agencies/components/add-new-site-button';
-import {
-	A4A_MARKETPLACE_PRODUCTS_LINK,
-	A4A_SITES_LINK,
-} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { A4A_MARKETPLACE_PRODUCTS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import SiteConfigurationsModal from 'calypso/a8c-for-agencies/components/site-configurations-modal';
 import { useRandomSiteName } from 'calypso/a8c-for-agencies/components/site-configurations-modal/use-random-site-name';
-import useFetchPendingSites from 'calypso/a8c-for-agencies/data/sites/use-fetch-pending-sites';
+import useSiteCreatedCallback from 'calypso/a8c-for-agencies/hooks/use-site-created-callback';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
-import SitesDashboardContext from '../../sites/sites-dashboard-context';
 
 import './style.scss';
 
@@ -23,24 +17,13 @@ export default function OverviewHeaderActions() {
 	const translate = useTranslate();
 	const isNarrowView = useBreakpoint( '<660px' );
 	const { randomSiteName, isRandomSiteNameLoading, refetchRandomSiteName } = useRandomSiteName();
-	const { refetch: refetchPendingSites } = useFetchPendingSites();
 	const [ showConfigurationModal, setShowConfigurationModal ] = useState( false );
 
 	const toggleDevSiteConfigurationsModal = useCallback( () => {
 		setShowConfigurationModal( ! showConfigurationModal );
 	}, [ showConfigurationModal ] );
 
-	const { setRecentlyCreatedSiteId } = useContext( SitesDashboardContext );
-
-	const onCreateSiteSuccess = useCallback(
-		( id: number ) => {
-			refetchPendingSites();
-			refetchRandomSiteName();
-			setRecentlyCreatedSiteId( id );
-			page( addQueryArgs( A4A_SITES_LINK, { created_site: id } ) );
-		},
-		[ refetchPendingSites, refetchRandomSiteName, setRecentlyCreatedSiteId ]
-	);
+	const onCreateSiteSuccess = useSiteCreatedCallback( refetchRandomSiteName );
 
 	return (
 		<div className="overview-header__actions">

diff --git a/client/a8c-for-agencies/sections/sites/needs-setup-sites/index.tsx b/client/a8c-for-agencies/sections/sites/needs-setup-sites/index.tsx
@@ -18,6 +18,7 @@ import SiteConfigurationsModal from 'calypso/a8c-for-agencies/components/site-co
 import { useRandomSiteName } from 'calypso/a8c-for-agencies/components/site-configurations-modal/use-random-site-name';
 import useCreateWPCOMSiteMutation from 'calypso/a8c-for-agencies/data/sites/use-create-wpcom-site';
 import useFetchPendingSites from 'calypso/a8c-for-agencies/data/sites/use-fetch-pending-sites';
+import useSiteCreatedCallback from 'calypso/a8c-for-agencies/hooks/use-site-created-callback';
 import SitesHeaderActions from '../sites-header-actions';
 import ClientSite from './client-site';
 import { AvailablePlans } from './plan-field';
@@ -135,14 +136,7 @@ export default function NeedSetup( { licenseKey }: Props ) {
 				features.wpcom_atomic.state === 'provisioning' && !! features.wpcom_atomic.license_key
 		);
 
-	const onCreateSiteSuccess = useCallback(
-		( id: number ) => {
-			refetchPendingSites();
-			refetchRandomSiteName();
-			page( addQueryArgs( A4A_SITES_LINK, { created_site: id } ) );
-		},
-		[ refetchPendingSites, refetchRandomSiteName ]
-	);
+	const onCreateSiteSuccess = useSiteCreatedCallback( refetchRandomSiteName );
 
 	const onCreateSiteWithConfig = useCallback(
 		( id: number ) => {

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-context.ts b/client/a8c-for-agencies/sections/sites/sites-dashboard-context.ts
@@ -44,6 +44,9 @@ const SitesDashboardContext = createContext< SitesDashboardContextInterface >( {
 
 	recentlyCreatedSiteId: null,
 	setRecentlyCreatedSiteId: () => {},
+
+	isRecentlyCreatedSiteDevelopment: false,
+	setIsRecentlyCreatedSiteDevelopment: () => {},
 } );
 
 export default SitesDashboardContext;
diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx
@@ -74,6 +74,8 @@ export const SitesDashboardProvider = ( {
 	const [ isPopoverOpen, setIsPopoverOpen ] = useState( false );
 	const [ initialSelectedSiteUrl, setInitialSelectedSiteUrl ] = useState( siteUrlInitialState );
 	const [ recentlyCreatedSiteId, setRecentlyCreatedSiteId ] = useState< number | null >( null );
+	const [ isRecentlyCreatedSiteDevelopment, setIsRecentlyCreatedSiteDevelopment ] =
+		useState< boolean >( false );
 
 	const handleSetBulkManagementActive = ( isActive: boolean ) => {
 		setIsBulkManagementActive( isActive );
@@ -188,6 +190,8 @@ export const SitesDashboardProvider = ( {
 		featurePreview,
 		recentlyCreatedSiteId,
 		setRecentlyCreatedSiteId,
+		isRecentlyCreatedSiteDevelopment,
+		setIsRecentlyCreatedSiteDevelopment,
 	};
 	return (
 		<SitesDashboardContext.Provider value={ sitesDashboardContextValue }>

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx
@@ -51,7 +51,6 @@ export default function SitesDashboard() {
 
 	const agencyId = useSelector( getActiveAgencyId );
 
-	const recentlyCreatedSite = getQueryArg( window.location.href, 'created_site' ) ?? null;
 	const migrationIntent = getQueryArg( window.location.href, 'migration' ) ?? null;
 
 	const {
@@ -66,15 +65,9 @@ export default function SitesDashboard() {
 		hideListing,
 		setHideListing,
 		recentlyCreatedSiteId,
-		setRecentlyCreatedSiteId,
+		isRecentlyCreatedSiteDevelopment,
 	} = useContext( SitesDashboardContext );
 
-	useEffect( () => {
-		if ( recentlyCreatedSite ) {
-			setRecentlyCreatedSiteId( Number( recentlyCreatedSite ) );
-		}
-	}, [ recentlyCreatedSite, setRecentlyCreatedSiteId ] );
-
 	const isLargeScreen = isWithinBreakpoint( '>960px' );
 	// FIXME: We should switch to a new A4A-specific endpoint when it becomes available, instead of using the public-facing endpoint for A4A
 	const { data: products } = useProductsQuery( true );
@@ -261,6 +254,7 @@ export default function SitesDashboard() {
 							<ProvisioningSiteNotification
 								siteId={ Number( recentlyCreatedSiteId ) }
 								migrationIntent={ !! migrationIntent }
+								isDevelopmentSite={ !! isRecentlyCreatedSiteDevelopment }
 							/>
 						) }
 

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/provisioning-site-notification.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/provisioning-site-notification.tsx
@@ -2,15 +2,21 @@ import { Button } from '@automattic/components';
 import NoticeBanner from '@automattic/components/src/notice-banner';
 import { useTranslate } from 'i18n-calypso';
 import { useState, useEffect } from 'react';
+import { A4A_SITES_LINK_DEVELOPMENT } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import useIsSiteReady from 'calypso/a8c-for-agencies/data/sites/use-is-site-ready';
 import { addQueryArgs } from 'calypso/lib/url';
 
 type Props = {
 	siteId: number;
 	migrationIntent: boolean;
+	isDevelopmentSite?: boolean;
 };
 
-export default function ProvisioningSiteNotification( { siteId, migrationIntent }: Props ) {
+export default function ProvisioningSiteNotification( {
+	siteId,
+	migrationIntent,
+	isDevelopmentSite,
+}: Props ) {
 	const { isReady, site } = useIsSiteReady( { siteId } );
 	const [ showBanner, setShowBanner ] = useState( true );
 
@@ -32,6 +38,29 @@ export default function ProvisioningSiteNotification( { siteId, migrationIntent
 		'https://wordpress.com/setup/hosted-site-migration/site-migration-identify'
 	);
 
+	const readySiteMessage = isDevelopmentSite
+		? translate(
+				'{{a}}%(siteURL)s{{/a}} is now ready. It may take a few minutes for it to show up in the site list below. Before the site launches, you will be able to find it under {{developmentTabLink}}Development{{/developmentTabLink}}.',
+				{
+					args: { siteURL: site?.url ?? '' },
+					components: {
+						a: <a href={ wpOverviewUrl } target="_blank" rel="noreferrer" />,
+						developmentTabLink: <a href={ A4A_SITES_LINK_DEVELOPMENT } rel="noreferrer" />,
+					},
+					comment: 'The %(siteURL)s is the URL of the site that has been provisioned.',
+				}
+		  )
+		: translate(
+				'{{a}}%(siteURL)s{{/a}} is now ready. It may take a few minutes for it to show up in the site list below.',
+				{
+					args: { siteURL: site?.url ?? '' },
+					components: {
+						a: <a href={ wpOverviewUrl } target="_blank" rel="noreferrer" />,
+					},
+					comment: 'The %(siteURL)s is the URL of the site that has been provisioned.',
+				}
+		  );
+
 	return (
 		showBanner && (
 			<NoticeBanner
@@ -60,16 +89,7 @@ export default function ProvisioningSiteNotification( { siteId, migrationIntent
 				}
 			>
 				{ isReady
-					? translate(
-							'{{a}}%(siteURL)s{{/a}} is now ready. Get started by configuring your new site. It may take a few minutes for it to show up in the site list below.',
-							{
-								args: { siteURL: site?.url ?? '' },
-								components: {
-									a: <a href={ wpOverviewUrl } target="_blank" rel="noreferrer" />,
-								},
-								comment: 'The %(siteURL)s is the URL of the site that has been provisioned.',
-							}
-					  )
+					? readySiteMessage
 					: translate(
 							"We're setting up your new WordPress.com site and will notify you once it's ready, which should only take a few minutes."
 					  ) }

diff --git a/client/a8c-for-agencies/sections/sites/sites-header-actions/index.tsx b/client/a8c-for-agencies/sections/sites/sites-header-actions/index.tsx
@@ -1,22 +1,17 @@
 import config from '@automattic/calypso-config';
-import page from '@automattic/calypso-router';
 import { Button } from '@automattic/components';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
-import { addQueryArgs, getQueryArg } from '@wordpress/url';
+import { getQueryArg } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import AddNewSiteButton from 'calypso/a8c-for-agencies/components/add-new-site-button';
 import { GuidedTourStep } from 'calypso/a8c-for-agencies/components/guided-tour-step';
-import {
-	A4A_MARKETPLACE_PRODUCTS_LINK,
-	A4A_SITES_LINK,
-} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { A4A_MARKETPLACE_PRODUCTS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import SiteConfigurationsModal from 'calypso/a8c-for-agencies/components/site-configurations-modal';
 import { useRandomSiteName } from 'calypso/a8c-for-agencies/components/site-configurations-modal/use-random-site-name';
-import useFetchPendingSites from 'calypso/a8c-for-agencies/data/sites/use-fetch-pending-sites';
+import useSiteCreatedCallback from 'calypso/a8c-for-agencies/hooks/use-site-created-callback';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
-import SitesDashboardContext from '../sites-dashboard-context';
 
 import './style.scss';
 
@@ -29,7 +24,6 @@ export default function SitesHeaderActions( { onWPCOMImport }: Props ) {
 	const translate = useTranslate();
 	const isMobile = useMobileBreakpoint();
 	const { randomSiteName, isRandomSiteNameLoading, refetchRandomSiteName } = useRandomSiteName();
-	const { refetch: refetchPendingSites } = useFetchPendingSites();
 
 	const [ tourStepRef, setTourStepRef ] = useState< HTMLElement | null >( null );
 	const [ showConfigurationModal, setShowConfigurationModal ] = useState( false );
@@ -38,17 +32,7 @@ export default function SitesHeaderActions( { onWPCOMImport }: Props ) {
 		setShowConfigurationModal( ! showConfigurationModal );
 	}, [ showConfigurationModal ] );
 
-	const { setRecentlyCreatedSiteId } = useContext( SitesDashboardContext );
-
-	const onCreateSiteSuccess = useCallback(
-		( id: number ) => {
-			refetchPendingSites();
-			refetchRandomSiteName();
-			setRecentlyCreatedSiteId( id );
-			page( addQueryArgs( A4A_SITES_LINK, { created_site: id } ) );
-		},
-		[ refetchPendingSites, refetchRandomSiteName, setRecentlyCreatedSiteId ]
-	);
+	const onCreateSiteSuccess = useSiteCreatedCallback( refetchRandomSiteName );
 
 	const devSitesEnabled = config.isEnabled( 'a4a-dev-sites' );
 

diff --git a/client/a8c-for-agencies/sections/sites/types.ts b/client/a8c-for-agencies/sections/sites/types.ts
@@ -47,4 +47,7 @@ export interface SitesDashboardContextInterface {
 
 	recentlyCreatedSiteId: number | null;
 	setRecentlyCreatedSiteId: ( value: number ) => void;
+
+	isRecentlyCreatedSiteDevelopment: boolean;
+	setIsRecentlyCreatedSiteDevelopment: ( value: boolean ) => void;
 }