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,7 +7,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { STORE_KEY } from '.~/data';
-import { glaData } from '.~/constants';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useIsEqualRefValue from '.~/hooks/useIsEqualRefValue';
 
 const selectorName = 'getAdsCampaigns';
@@ -30,19 +30,15 @@ const selectorName = 'getAdsCampaigns';
  */
 const useAdsCampaigns = ( ...query ) => {
 	const queryRefValue = useIsEqualRefValue( query );
+	const { 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 ) {
 				return {
-					loading: false,
-					loaded: true,
+					loading: isResolving,
+					loaded: hasFinishedResolution,
 					data: [],
 				};
 			}
@@ -62,7 +58,12 @@ const useAdsCampaigns = ( ...query ) => {
 				data,
 			};
 		},
-		[ queryRefValue ]
+		[
+			hasFinishedResolution,
+			hasGoogleAdsConnection,
+			isResolving,
+			queryRefValue,
+		]
 	);
 };
 

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

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Notice } 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 { hasFinishedResolution, data: products } = useMCProductStatistics();
+	const { loaded: campaignsLoaded, data: campaigns } = useAdsCampaigns();
+
+	const isLoading =
+		! hasFinishedResolution || products?.loading || ! campaignsLoaded;
+
+	if (
+		isLoading ||
+		! products ||
+		products?.statistics?.active === 0 ||
+		! campaigns ||
+		campaigns?.length > 0
+	) {
+		return null;
+	}
+
+	return (
+		<Notice isDismissible={ false } className="gla-ads-inline-notice">
+			<section>
+				<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>
+			</section>
+		</Notice>
+	);
+};
+
+export default CreateCampaignNotice;

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

@@ -0,0 +1,13 @@
+.gla-ads-inline-notice{
+	margin: $grid-unit-20;
+	border-left: none;
+	padding: .75rem 1rem;
+
+	&.is-info {
+		background-color: #f0f6fc;
+	}
+
+	.components-notice__content p:first-child {
+		margin-top: 2px;
+	}
+}

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,6 +134,7 @@ const ProductStatistics = () => {
 					</SummaryList>
 				) }
 			</CardBody>
+			<CreateCampaignNotice />
 			<CardFooter gap={ 0 }>
 				<FeedStatus />
 				<SyncStatus />

tests/e2e/specs/add-paid-campaigns/add-paid-campaigns.test.js

@@ -460,6 +460,18 @@ test.describe( 'Set up Ads account', () => {
 					)
 				).toBeVisible();
 
+				await setupBudgetPage.fulfillAdsCampaignsRequest( [
+					{
+						id: 111111111,
+						name: 'Test Campaign',
+						status: 'enabled',
+						type: 'performance_max',
+						amount: budget,
+						country: 'US',
+						targeted_locations: [ 'US' ],
+					},
+				] );
+
 				//It should redirect to the dashboard page
 				await page.waitForURL(
 					'/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard&guide=campaign-creation-success',
@@ -499,6 +511,20 @@ test.describe( 'Set up Ads account', () => {
 	} );
 
 	test.describe( 'Create Ads with billing data already setup', () => {
+		test.beforeAll( async () => {
+			// Reset the campaigns set in the previous tests.
+			await setupBudgetPage.fulfillAdsCampaignsRequest( [] );
+
+			// Mock budget recommendations.
+			await setupBudgetPage.fulfillRequest(
+				/\/wc\/gla\/ads\/campaigns\/budget-recommendation\b/,
+				{
+					currency: 'USD',
+					recommendations: [ { country: 'US', daily_budget: 15 } ],
+				}
+			);
+		} );
+
 		test( 'Launch paid campaign should be enabled', async () => {
 			//Click Add paid Campaign
 			await adsConnectionButton.click();