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

[joemcgill]

Part of #2460

Once a merchant has approved products in their product feed, we want to make it easy for them to start running ads for those products by adding a promo for creating their first campaign on the product feed overview card.

Acceptance Criteria

• Show the create campaign promo/notice in the overview card when the store has approved products, but has not yet created any campaigns.
• Clicking on the Create Campaign button enters the campaign creation flow.
• If there are no approved products, or the connected Ads account already has campaigns running, the notice should not be shown.

Implementation Brief

• Using js/src/product-feed/product-statistics,
  • Create the create-campaign-notice.js which will house the CreateCampaignNotice component.
• Within CreateCampaignNotice,
  • Use the useMCProductStatistics hook to determine whether there are approved products.
  • Check if there are any campaigns via the useAdsCampaigns hook (see this update to ensure that hook always checks for campaigns when a Google Ads account is connected).
  • If there are no approved products or there are campaigns, render null.
  • If there are approved products but no campaigns, render the notice as per the ticket description.
    • Make use of the Notice component with custom class name for styling.
  • Clicking the "Create Campaign" button should redirect the user to create a campaign.
    • Use the js/src/components/paid-ads/add-paid-campaign-button.js component, but pass a new context to the eventProps called product-statistics-card.
• Update js/src/product-feed/product-statistics/index.js to include CreateCampaignNotice

Test Coverage

• Appropriate E2E tests should be added to test when the notice is displayed/not displayed.

Definition Questions

• In the AC, there is mention of approved products but not specifically mentioning how many products. Does that mean that if the user has at least one approved product and has not running campaigns, we should show the notice? Or should all the products be approved? A: This should apply as long as at least one product is approved.
• @michaeleleder mentioned that this Notice style is an existing "inline notice" but I don't already see a component for this style in this repo. Should it be pulled from elsewhere, or should we create a custom AppNotice and style for this project?

[joemcgill]

This will likely be blocked until #2599 is resolved.

[asvinb]

@joemcgill I've added the IB. Can you kindly take a look and let me know please?

[joemcgill]

There is an existing issue with useAdsCampaigns that was discovered in #2242 (comment), where the hook will not fetch existing Ads accounts in certain circumstances.

I think we can fix this by replacing the TODO comment in the useAdsCampaign hook with a check for whether there is a Google Ads connection. Here's the idea:

diff --git a/js/src/hooks/useAdsCampaigns.js b/js/src/hooks/useAdsCampaigns.js
index 5975aec45..235b12a6a 100644
--- a/js/src/hooks/useAdsCampaigns.js
+++ b/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,16 +30,12 @@ const selectorName = 'getAdsCampaigns';
  */
 const useAdsCampaigns = ( ...query ) => {
 	const queryRefValue = useIsEqualRefValue( query );
+	const { hasGoogleAdsConnection, hasFinishedResolution } =
+		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 ( hasFinishedResolution && ! hasGoogleAdsConnection ) {
 				return {
 					loading: false,
 					loaded: true,

[joemcgill]

I think we should reuse the AddPaidCampaignButton component directly here, rather than creating a different one. I've added info about what eventProps name to add, which we can change later based on feedback during WooCR (cc: @eason9487).

[eason9487]

The eventProps for this requirement could be { context: 'product-feed-overview-promotion' }