diff --git a/client/a8c-for-agencies/components/site-configurations-modal/index.tsx b/client/a8c-for-agencies/components/site-configurations-modal/index.tsx index 7451459330c68f..3e58a9dc88bb39 100644 --- 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 new file mode 100644 index 00000000000000..e7fe67574c2268 --- /dev/null +++ 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 index 8d01056e20c741..6eecead00afae9 100644 --- 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 (
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 index 397cfd641e50af..7cec5b7078b34d 100644 --- 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 index 497d3c2177fbd7..b129ac4962bd6f 100644 --- 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 index c224b2a6828e71..0e82675f5d6c5c 100644 --- 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 ( diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx index 58c11f3d239ceb..63d673247a8b39 100644 --- 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() { ) } 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 index 8f34b417c3fa5c..a6bf12078873bc 100644 --- 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: , + developmentTabLink: , + }, + 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: , + }, + comment: 'The %(siteURL)s is the URL of the site that has been provisioned.', + } + ); + return ( showBanner && ( { 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: , - }, - 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 index 5045b3996d569f..4e287ec20129f5 100644 --- 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 index 12af31803507ff..2f6a8023e6587b 100644 --- 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; }