Show promo for setting up Google Ads on the product feed tabs #2539

js/src/dashboard/all-programs-table-card/index.js

@@ -78,10 +78,11 @@ const AllProgramsTableCard = ( props ) => {
 	const { formatAmount } = useAdsCurrency();
 	const { data: finalCountryCodesData } =
 		useTargetAudienceFinalCountryCodes();
-	const { data: adsCampaignsData } = useAdsCampaigns();
+	const { data: adsCampaignsData, loaded: adsCampaignsLoaded } =
+		useAdsCampaigns();
 	const map = useCountryKeyNameMap();
 
-	if ( ! finalCountryCodesData || ! adsCampaignsData ) {
+	if ( ! finalCountryCodesData || ! adsCampaignsLoaded ) {
 		return <AppSpinner />;
 	}
 

js/src/dashboard/all-programs-table-card/index.test.js

@@ -83,7 +83,7 @@ describe( 'AllProgramsTableCard', () => {
 		let mockedCampaigns = [];
 
 		useAdsCampaigns.mockImplementation( () => {
-			return { data: mockedCampaigns };
+			return { data: mockedCampaigns, loaded: true };
 		} );
 
 		mockCampaigns = ( ...campaigns ) => {

js/src/hooks/useAdsCampaigns.js

@@ -7,8 +7,9 @@
  * Internal dependencies
  */
 import { STORE_KEY } from '.~/data';
-import { glaData } from '.~/constants';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useIsEqualRefValue from '.~/hooks/useIsEqualRefValue';
+import { GOOGLE_ADS_ACCOUNT_STATUS } from '.~/constants';
 
 const selectorName = 'getAdsCampaigns';
 
@@ -30,19 +31,22 @@
  */
 const useAdsCampaigns = ( ...query ) => {
 	const queryRefValue = useIsEqualRefValue( query );
+	const {
+		googleAdsAccount,
+		hasGoogleAdsConnection,
+		hasFinishedResolution,
+		isResolving,
+	} = useGoogleAdsAccount();
 
 	return useSelect(
 		( select ) => {
-			// TODO: ideally adsSetupComplete should be retrieved from API endpoint
-			// and then put into wp-data.
-			// With that in place, then we don't need to depend on glaData
-			// which requires force reload using window.location.href.
-			const { adsSetupComplete } = glaData;
-
-			if ( ! adsSetupComplete ) {
+			if (
+				! hasGoogleAdsConnection ||
+				googleAdsAccount?.status !== GOOGLE_ADS_ACCOUNT_STATUS.CONNECTED
+			) {
 				return {
-					loading: false,
-					loaded: true,
+					loading: isResolving,
+					loaded: hasFinishedResolution,
 					data: [],
 				};
 			}
@@ -62,7 +66,12 @@
 				data,
 			};
 		},
-		[ queryRefValue ]
+		[
+			hasFinishedResolution,
+			hasGoogleAdsConnection,
+			isResolving,
+			queryRefValue,
+		]
 	);
 };
 

js/src/product-feed/product-statistics/create-campaign-notice/index.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Flex, FlexItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AddPaidCampaignButton from '.~/components/paid-ads/add-paid-campaign-button';
+import useMCProductStatistics from '.~/hooks/useMCProductStatistics';
+import useAdsCampaigns from '.~/hooks/useAdsCampaigns';
+import './index.scss';
+
+const CreateCampaignNotice = () => {
+	const { data: products } = useMCProductStatistics();
+	const { loaded: campaignsLoaded, data: campaigns } = useAdsCampaigns();
+
+	if (
+		! products?.statistics?.active ||
+		! campaignsLoaded ||
+		campaigns?.length > 0
+	) {
+		return null;
+	}
+
+	return (
+		<Flex className="gla-ads-inline-notice">
+			<FlexItem>
+				<p>
+					{ __(
+						'You have approved products. Create a Google Ads campaign to reach more customers and drive more sales.',
+						'google-listings-and-ads'
+					) }
+				</p>
+				<AddPaidCampaignButton
+					isSmall={ false }
+					eventProps={ {
+						context: 'product-feed-overview-promotion',
+					} }
+				>
+					{ __( 'Create Campaign', 'google-listings-and-ads' ) }
+				</AddPaidCampaignButton>
+			</FlexItem>
+		</Flex>
+	);
+};
+
+export default CreateCampaignNotice;

js/src/product-feed/product-statistics/create-campaign-notice/index.scss

@@ -0,0 +1,10 @@
+.gla-ads-inline-notice {
+	background-color: #f0f6fc;
+	border-left: none;
+	margin-bottom: $grid-unit-20;
+	padding: $grid-unit-20 $grid-unit-30;
+
+	p {
+		margin-top: 0;
+	}
+}

js/src/product-feed/product-statistics/index.js

@@ -25,6 +25,7 @@ import SyncStatus from '.~/product-feed/product-statistics/status-box/sync-statu
 import SyncProductStatistics from '.~/product-feed/product-statistics/status-box/sync-product-statistics';
 import FeedStatus from '.~/product-feed/product-statistics/status-box/feed-status';
 import AccountStatus from '.~/product-feed/product-statistics/status-box/account-status';
+import CreateCampaignNotice from '.~/product-feed/product-statistics/create-campaign-notice';
 import Text from '.~/components/app-text';
 import AppSpinner from '.~/components/app-spinner';
 import './index.scss';
@@ -133,7 +134,9 @@ const ProductStatistics = () => {
 					</SummaryList>
 				) }
 			</CardBody>
+
 			<CardFooter gap={ 0 }>
+				<CreateCampaignNotice />
 				<FeedStatus />
 				<SyncStatus />
 				<AccountStatus />

tests/e2e/specs/product-feed/product-feed-campaign-notice.test.js

@@ -0,0 +1,206 @@
+/**
+ * External dependencies
+ */
+import { expect, test } from '@playwright/test';
+/**
+ * Internal dependencies
+ */
+import { clearOnboardedMerchant, setOnboardedMerchant } from '../../utils/api';
+import ProductFeedPage from '../../utils/pages/product-feed';
+import SetupAdsAccountsPage from '../../utils/pages/setup-ads/setup-ads-accounts.js';
+import { LOAD_STATE } from '../../utils/constants';
+
+test.use( { storageState: process.env.ADMINSTATE } );
+
+test.describe.configure( { mode: 'serial' } );
+
+/**
+ * @type {import('../../utils/pages/setup-ads/setup-ads-accounts').default} setupAdsAccounts
+ */
+let setupAdsAccounts = null;
+
+/**
+ * @type {import('../../utils/pages/product-feed').default} productFeedPage
+ */
+let productFeedPage = null;
+
+/**
+ * @type {import('@playwright/test').Page} page
+ */
+let page = null;
+
+test.describe( 'Product Feed Page', () => {
+	test.beforeAll( async ( { browser } ) => {
+		page = await browser.newPage();
+		productFeedPage = new ProductFeedPage( page );
+		setupAdsAccounts = new SetupAdsAccountsPage( page );
+		await Promise.all( [
+			setupAdsAccounts.mockAdsAccountsResponse( [] ),
+			productFeedPage.mockRequests(),
+			setOnboardedMerchant(),
+		] );
+	} );
+
+	test.afterAll( async () => {
+		await clearOnboardedMerchant();
+		await page.close();
+	} );
+
+	test.describe( 'No campaign', () => {
+		test.beforeAll( async () => {
+			await productFeedPage.fulfillAdsCampaignsRequest( [] );
+			await productFeedPage.goto();
+		} );
+
+		test( 'No active product and no campaign; Do not display campaign notice', async () => {
+			await expect(
+				page.getByRole( 'heading', { level: 1, name: 'Product Feed' } )
+			).toBeVisible();
+
+			await productFeedPage.fulfillProductStatisticsRequest( {
+				timestamp: 1695011644,
+				statistics: {
+					active: 0,
+					expiring: 0,
+					pending: 0,
+					disapproved: 0,
+					not_synced: 1137,
+				},
+				scheduled_sync: 0,
+				loading: false,
+			} );
+
+			await page.reload();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Overview',
+				} )
+			).toBeVisible();
+
+			await expect(
+				await productFeedPage.getActiveProductValueElement()
+			).toBeVisible();
+
+			await expect(
+				( await productFeedPage.getActiveProductValue() ).trim()
+			).toBe( '0' );
+
+			await expect(
+				await productFeedPage.getCampaignNoticeSection()
+			).not.toBeVisible();
+		} );
+
+		test( 'Has active product but no campaign; Display campaign notice', async () => {
+			await productFeedPage.fulfillProductStatisticsRequest( {
+				timestamp: 1695011644,
+				statistics: {
+					active: 1,
+					expiring: 0,
+					pending: 0,
+					disapproved: 0,
+					not_synced: 1137,
+				},
+				scheduled_sync: 0,
+				loading: false,
+			} );
+
+			await page.reload();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+
+			await expect(
+				await productFeedPage.getActiveProductValueElement()
+			).toBeVisible();
+
+			await expect(
+				( await productFeedPage.getActiveProductValue() ).trim()
+			).toBe( '1' );
+
+			const noticeSection =
+				await productFeedPage.getCampaignNoticeSection();
+			const createCampaignButton =
+				await productFeedPage.getInNoticeCreateCampaignButton();
+
+			await expect( noticeSection ).toBeVisible();
+			await expect( createCampaignButton ).toBeVisible();
+			await createCampaignButton.click();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+			await expect(
+				page.getByRole( 'heading', {
+					level: 1,
+					name: 'Set up your accounts',
+				} )
+			).toBeVisible();
+
+			await productFeedPage.goto();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+
+			await expect(
+				page.getByRole( 'heading', { level: 1, name: 'Product Feed' } )
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'Has campaign', () => {
+		test.beforeAll( async () => {
+			await productFeedPage.fulfillAdsCampaignsRequest( [
+				{
+					id: 111111111,
+					name: 'Test Campaign',
+					status: 'enabled',
+					type: 'performance_max',
+					amount: 1,
+					country: 'US',
+					targeted_locations: [ 'US' ],
+				},
+			] );
+		} );
+
+		test( 'Has active product and a campaign; Do not display campaign notice', async () => {
+			await productFeedPage.goto();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+
+			await expect(
+				await productFeedPage.getActiveProductValueElement()
+			).toBeVisible();
+
+			await expect(
+				( await productFeedPage.getActiveProductValue() ).trim()
+			).toBe( '1' );
+
+			await expect(
+				await productFeedPage.getCampaignNoticeSection()
+			).not.toBeVisible();
+		} );
+
+		test( 'Has campaign but no active product; Do not display campaign notice', async () => {
+			await productFeedPage.fulfillProductStatisticsRequest( {
+				timestamp: 1695011644,
+				statistics: {
+					active: 0,
+					expiring: 0,
+					pending: 0,
+					disapproved: 0,
+					not_synced: 1137,
+				},
+				scheduled_sync: 0,
+				loading: false,
+			} );
+			await page.reload();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+
+			await expect(
+				await productFeedPage.getActiveProductValueElement()
+			).toBeVisible();
+
+			await expect(
+				( await productFeedPage.getActiveProductValue() ).trim()
+			).toBe( '0' );
+
+			await expect(
+				await productFeedPage.getCampaignNoticeSection()
+			).not.toBeVisible();
+		} );
+	} );
+} );

tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js

@@ -363,6 +363,9 @@ test.describe( 'Complete your campaign', () => {
 		test( 'should not see the Free Ad Credit section if the account is not eligible', async () => {
 			await setupAdsAccountPage.mockAdsAccountConnected();
 			await completeCampaign.goto();
+			await completeCampaign.clickCreatePaidAdButton();
+			await completeCampaign.clickSkipPaidAdsCreationButon();
+			await completeCampaign.fulfillAdsCampaignsRequest( [] );
 			await setupAdsAccountPage.awaitAdsConnectionResponse();
 
 			// Check we are on the correct page.