Fix Blaze Traffic card for coming-soon sites (#112463)

Author: chriskmnds

client/sites/marketing/traffic/test/traffic.jsx

@@ -0,0 +1,86 @@
+import { getBlazeAdvertisingUrl, shouldShowBlazeAdvertisingOption } from '../traffic';
+
+const siteId = 123;
+
+const getState = ( {
+	canBlaze,
+	isComingSoon = false,
+	isSiteKnown = true,
+	siteSettingsComingSoon = false,
+} ) => {
+	const site = {
+		ID: siteId,
+		URL: 'https://example.wordpress.com',
+		is_coming_soon: isComingSoon,
+		options: {
+			can_blaze: canBlaze,
+			is_wpcom_simple: true,
+		},
+	};
+
+	return {
+		sites: {
+			items: isSiteKnown ? { [ siteId ]: site } : {},
+		},
+		siteSettings: {
+			items: {
+				[ siteId ]: {
+					wpcom_coming_soon: siteSettingsComingSoon ? 1 : 0,
+				},
+			},
+		},
+	};
+};
+
+describe( 'shouldShowBlazeAdvertisingOption', () => {
+	test( 'returns true when the site can use Blaze', () => {
+		const state = getState( { canBlaze: true } );
+
+		expect( shouldShowBlazeAdvertisingOption( state, siteId ) ).toBe( true );
+	} );
+
+	test( 'returns true when the site is coming soon', () => {
+		const state = getState( { canBlaze: false, isComingSoon: true } );
+
+		expect( shouldShowBlazeAdvertisingOption( state, siteId ) ).toBe( true );
+	} );
+
+	test( 'returns true when site settings identify the site as coming soon', () => {
+		const state = getState( {
+			canBlaze: false,
+			isSiteKnown: false,
+			siteSettingsComingSoon: true,
+		} );
+
+		expect( shouldShowBlazeAdvertisingOption( state, siteId ) ).toBe( true );
+	} );
+
+	test( 'returns false when the site cannot use Blaze and is not coming soon', () => {
+		const state = getState( { canBlaze: false } );
+
+		expect( shouldShowBlazeAdvertisingOption( state, siteId ) ).toBe( false );
+	} );
+} );
+
+describe( 'getBlazeAdvertisingUrl', () => {
+	test( 'returns the Calypso Advertising route when the site slug is available', () => {
+		expect(
+			getBlazeAdvertisingUrl( {
+				siteSlug: 'example.wordpress.com',
+				wpAdminAdvertisingUrl: 'https://example.wordpress.com/wp-admin/tools.php?page=advertising',
+			} )
+		).toBe( '/advertising/example.wordpress.com' );
+	} );
+
+	test( 'returns the wp-admin Advertising URL as a fallback', () => {
+		const wpAdminAdvertisingUrl =
+			'https://example.wordpress.com/wp-admin/tools.php?page=advertising';
+
+		expect(
+			getBlazeAdvertisingUrl( {
+				siteSlug: null,
+				wpAdminAdvertisingUrl,
+			} )
+		).toBe( wpAdminAdvertisingUrl );
+	} );
+} );

client/sites/marketing/traffic/traffic.jsx

@@ -25,7 +25,8 @@ import Sitemaps from 'calypso/my-sites/site-settings/sitemaps';
 import wrapSettingsForm from 'calypso/my-sites/site-settings/wrap-settings-form';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import isBlazeEnabled from 'calypso/state/selectors/is-blaze-enabled';
-import { isJetpackSite } from 'calypso/state/sites/selectors';
+import isSiteComingSoon from 'calypso/state/selectors/is-site-coming-soon';
+import { getSiteSlug, isJetpackSite } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 
 import './style.scss';
@@ -35,6 +36,18 @@ const loadForm = () =>
 		/* webpackChunkName: "async-load-calypso-my-sites-site-settings-seo-settings-form" */ 'calypso/my-sites/site-settings/seo-settings/form'
 	);
 
+export const shouldShowBlazeAdvertisingOption = ( state, siteId ) => {
+	return isBlazeEnabled( state, siteId ) || isSiteComingSoon( state, siteId );
+};
+
+export const getBlazeAdvertisingUrl = ( { siteSlug, wpAdminAdvertisingUrl } ) => {
+	if ( siteSlug ) {
+		return `/advertising/${ siteSlug }`;
+	}
+
+	return wpAdminAdvertisingUrl;
+};
+
 const SiteSettingsTraffic = ( {
 	fields,
 	handleAutosavingRadio,
@@ -46,6 +59,7 @@ const SiteSettingsTraffic = ( {
 	isSavingSettings,
 	setFieldValue,
 	siteId,
+	siteSlug,
 	shouldShowAdvertisingOption,
 	translate,
 } ) => {
@@ -57,6 +71,10 @@ const SiteSettingsTraffic = ( {
 	}, [] );
 
 	const advertisingUrl = useAdvertisingUrl();
+	const blazeAdvertisingUrl = getBlazeAdvertisingUrl( {
+		siteSlug,
+		wpAdminAdvertisingUrl: advertisingUrl,
+	} );
 
 	return (
 		// eslint-disable-next-line wpcalypso/jsx-classname-namespace
@@ -95,7 +113,7 @@ const SiteSettingsTraffic = ( {
 							) }
 							ctaText={ translate( 'Get started' ) }
 							image={ blazeIllustration }
-							href={ advertisingUrl }
+							href={ blazeAdvertisingUrl }
 						/>
 					) }
 					{ isAdmin && (
@@ -142,14 +160,16 @@ const connectComponent = connect( ( state ) => {
 	const isAdmin = canCurrentUser( state, siteId, 'manage_options' );
 	const isJetpack = isJetpackSite( state, siteId );
 	const isJetpackAdmin = isJetpack && isAdmin;
-	const shouldShowAdvertisingOption = isBlazeEnabled( state, siteId );
+	const siteSlug = getSiteSlug( state, siteId );
+	const showAdvertisingOption = shouldShowBlazeAdvertisingOption( state, siteId );
 
 	return {
 		siteId,
 		isAdmin,
 		isJetpack,
 		isJetpackAdmin,
-		shouldShowAdvertisingOption,
+		siteSlug,
+		shouldShowAdvertisingOption: showAdvertisingOption,
 	};
 } );